/* ⚠️ Los rotulos pequenos estaban a 0.6875rem = 11 px. Con versalitas y
   mucho espaciado eso baja del suelo legible, y estas webs las va a mirar
   gente que no tiene veinte anos. 12 px es el minimo. */
/* Sistema de Laysa. Lo comparten index.html y sus subpáginas.
   ⚠️ Extraído del <style> de la portada el 20/09/2026 para no duplicarlo:
   con una copia por página, a la tercera edición divergen. */
/* ───────────────────────────────────────────────────────────────────────────
   LAYSA — «El agua se acuerda»
   Dirección: Swwim (refero.design). Inundación de cobalto a sangre, tipografía
   de display gigantesca en caja alta, superficies planas con filete de un
   píxel y jamás una sombra. Todo control es una pastilla de radio total.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --cobalto:#1658b3;     /* el color que define cada sección a sangre */
  --canal:#0d3c88;       /* profundidad: pies, degradados */
  --abismo:#01295f;      /* el azul más hondo. Nunca texto, nunca botón */
  --arcilla:#eee1d9;     /* el ÚNICO neutro cálido. Humaniza el azul */
  /* ⚠️ SU ROSA. Está muestreado de su logotipo. La primera versión de esta
     demo lo quitó entero y la dejó en azul corporativo: quedaba una marca
     deportiva, no un centro de belleza. Va de ACENTO —cifras y acción—, nunca
     repintando: el azul estructura, el rosa la identifica. */
  --rosa:#d6336c;
  --rosa-claro:#f2a0be;
  --blanco:#ffffff;
  --carbon:#0a0a0a;
  --filete:#e5e7eb;      /* el neutro estructural de todo el sistema */
  --gris:#5b6470;
  --max:1400px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--blanco); color:var(--carbon);
  font-family:'Manrope',system-ui,sans-serif; font-weight:400;
  font-size:16px; line-height:1.56; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--cobalto); color:#fff}
:focus-visible{outline:2px solid var(--cobalto); outline-offset:3px}
p{margin:0}
a{color:inherit; text-decoration:none}

/* Baton Turbo → Anton. Solo display, nunca por debajo de 20 px. */
.turbo{font-family:'Bricolage Grotesque',Impact,sans-serif; font-weight:400; text-transform:uppercase;
  line-height:1; letter-spacing:.004em}
h1,h2,h3{margin:0; font-weight:400}

.env{width:min(100% - 1.75rem, var(--max)); margin-inline:auto}
@media(min-width:900px){ .env{width:min(100% - 5rem, var(--max))} }
.eti{font-size:.75rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase}

/* Toda acción es una pastilla. En este sistema no hay esquinas redondeadas. */
.pil{display:inline-flex; align-items:center; gap:.6rem; min-height:46px;
  padding:.8rem 1.6rem; border-radius:9999px; cursor:pointer;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--blanco); color:var(--cobalto); border:1px solid var(--blanco);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)}
.pil:hover{background:var(--arcilla); border-color:var(--arcilla); transform:translateY(-2px)}
.pil.linea{background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.6)}
.pil.linea:hover{background:var(--blanco); color:var(--cobalto); border-color:var(--blanco)}
.pil.tinta{background:var(--cobalto); color:var(--blanco); border-color:var(--cobalto)}
.pil.tinta:hover{background:var(--canal); border-color:var(--canal)}
.pil svg{width:15px; height:15px; flex:none}

/* ── EL AGUA ─────────────────────────────────────────────────────────────── */
/* El agua ya NO es el fondo: es la luz. El fondo son sus fotos. */
#agua{position:absolute; inset:0; z-index:1; background:transparent;
  pointer-events:none}
#fotos{position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--abismo)}
#fotos figure{position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 2.2s var(--ease)}
#fotos figure.puesta{opacity:1}
#fotos figure.puesta img{animation:respira 15s linear infinite alternate}
#fotos img{width:100%; height:100%; object-fit:cover;
  /* Empuje lento de cámara: su web las tiene quietas. Y oscurecidas, porque
     encima va texto blanco y son fotos de cabina muy claras. */
  /* ⚠️ SIN animación por defecto. Una animación CSS sigue corriendo aunque el
     elemento esté a `opacity:0`, así que las cinco fotos de portada se estaban
     reescalando a la vez —cinco imágenes de 1800 px a pantalla completa— y la
     página iba a tirones. Solo se anima la que se ve. */
  /* Apenas se toca: la foto tiene que parecer una foto. Lo que da fondo al
     texto es el degradado de abajo, no apagar la imagen entera. */
  filter:brightness(.84) saturate(1.04)}
/* El velo va solo donde cae el texto —abajo a la izquierda—, no por toda la
   pantalla. Es lo que permite que el aparato y la clienta se vean con su
   color de verdad y el titular siga leyéndose. */
#fotos::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(1,25,60,.82) 0%, rgba(1,25,60,.34) 34%, rgba(1,25,60,0) 62%),
    linear-gradient(to right, rgba(1,25,60,.58) 0%, rgba(1,25,60,0) 52%)}
@keyframes respira{ from{transform:scale(1.035)} to{transform:scale(1.10)} }
@media (prefers-reduced-motion: reduce){ #fotos img{animation:none} }
#agua canvas{display:block; width:100%; height:100%}

/* ── NAVEGACIÓN ──────────────────────────────────────────────────────────── */
nav{position:fixed; inset:0 0 auto; z-index:40; padding:1.05rem 0;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent}
nav.posada{background:rgba(255,255,255,.9); backdrop-filter:blur(16px);
  border-bottom-color:var(--filete)}
nav .env{display:flex; align-items:center; justify-content:space-between; gap:1rem}
nav .marca{font-family:'Bricolage Grotesque',sans-serif; text-transform:uppercase; font-size:1.3rem;
  color:var(--blanco); display:flex; align-items:center; gap:.7rem;
  transition:color .45s var(--ease)}
/* Un filete blanco vertical entre el logotipo y el descriptor: es de la casa. */
nav .marca i{display:block; width:1px; height:17px; background:currentColor; opacity:.55}
nav .marca em{font-family:'Manrope',sans-serif; font-style:normal; font-size:.75rem;
  font-weight:500; letter-spacing:.14em}
nav.posada .marca{color:var(--cobalto)}
nav ul{display:none; list-style:none; margin:0; padding:0; gap:2rem}
@media(min-width:1040px){ nav ul{display:flex} }
nav ul a{font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82); transition:color .3s var(--ease)}
nav.posada ul a{color:var(--gris)}
nav ul a:hover{color:var(--blanco)}
nav.posada ul a:hover{color:var(--cobalto)}
nav.posada .pil{background:var(--cobalto); color:var(--blanco); border-color:var(--cobalto)}
nav.posada .pil:hover{background:var(--canal); border-color:var(--canal)}

/* ── PORTADA: la inundación ──────────────────────────────────────────────── */
header{position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:7rem 0 clamp(1.75rem,5vh,3rem); overflow:hidden;
  background:var(--cobalto)}
header .env{position:relative; z-index:2; color:var(--blanco)}
header h1{font-size:clamp(4.2rem,20vw,16rem); margin-bottom:.4rem}
.bajo{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.35)}
.bajo p{max-width:44ch; color:rgba(255,255,255,.9); font-size:1.0625rem; line-height:1.7}
.bajo .der{display:flex; gap:2.25rem; flex-wrap:wrap}
/* Las cifras en SU rosa. Es lo único de la portada que no es blanco, así que
   es lo que mira el ojo después del titular — y lo que devuelve su marca a una
   demo que se había quedado en azul corporativo. */
.bajo b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.6rem; letter-spacing:.01em;
  color:var(--rosa-claro); text-shadow:0 2px 16px rgba(1,25,60,.6)}
.bajo .eti{color:rgba(255,255,255,.72)}

/* ── BLOQUES BLANCOS ─────────────────────────────────────────────────────── */
.bloque{padding:clamp(5.5rem,15vh,10rem) 0}
.rotulo{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2.25rem,6vh,4rem)}
.rotulo h2{font-size:clamp(2rem,6.4vw,5rem); max-width:16ch}
.rotulo p{max-width:34ch; color:var(--gris); font-size:.9375rem; line-height:1.8}
.azul{color:var(--cobalto)}

/* Las siete áreas. Sin tarjetas: filas con filete, que es este sistema. */
.areas{border-top:1px solid var(--filete)}
.area{display:flex; align-items:center; gap:1.25rem; padding:clamp(1.1rem,2.6vw,1.9rem) 0;
  border-bottom:1px solid var(--filete); position:relative;
}
/* ⚠️ `transform`, no `width` ni `padding`. Animar una propiedad de maquetación
   obliga al navegador a recalcular posiciones y a repintar en CADA fotograma,
   que es de donde salen los tirones; `transform` va en la GPU y no toca el
   flujo. Lo marcaron las dos skills el 21/09/2026. */
.area > *{ transition:transform .5s var(--ease) }
.area:hover > *{ transform:translateX(1.1rem) }
.area::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cobalto); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease)}
.area:hover::before{transform:scaleY(1); transform-origin:top}


.area h3{font-family:'Bricolage Grotesque',sans-serif; text-transform:uppercase; flex:1 1 auto;
  font-size:clamp(1.5rem,4.6vw,3.2rem); line-height:1}
.area p{color:var(--gris); font-size:.875rem; max-width:34ch; text-align:right;
  display:none; line-height:1.7}
@media(min-width:840px){ .area p{display:block} }

/* La aparatología: doce nombres en pastillas. Es su argumento y son doce. */




/* ── BANDA DE TESTIMONIO: vuelve el cobalto ──────────────────────────────── */
.banda{background:var(--cobalto); color:var(--blanco);
  padding:clamp(4.5rem,13vh,8rem) 0}
.banda blockquote{margin:0; font-size:clamp(1.5rem,4.4vw,3.4rem); line-height:1.24;
  max-width:19ch; font-weight:300; letter-spacing:-.015em}
.banda .quien{margin-top:2rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.35); color:rgba(255,255,255,.78)}

/* ── LA LETRA PEQUEÑA, QUE AQUÍ ES UNA VIRTUD ────────────────────────────── */
.pacto{background:var(--arcilla); border-radius:0; padding:clamp(2rem,5vw,3.5rem) 0}
.pacto .env{display:grid; gap:2rem}
@media(min-width:900px){ .pacto .env{grid-template-columns:1fr 1.3fr; gap:4rem} }
.pacto h2{font-family:'Bricolage Grotesque',sans-serif; text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.02; color:var(--canal)}
.pacto ol{margin:0; padding-left:1.15rem; color:#4a4038; display:grid; gap:.7rem;
  font-size:.9375rem; line-height:1.7}
.pacto .nota{margin-top:1.4rem; color:#6b5f55; font-size:.875rem; line-height:1.8}

/* ── CITA ────────────────────────────────────────────────────────────────── */
#cita{background:var(--canal); color:var(--blanco); padding:clamp(5rem,15vh,9rem) 0 0}
#cita h2{font-size:clamp(2.6rem,11vw,9rem)}
#cita .sub{margin-top:1.8rem; max-width:42ch; color:rgba(255,255,255,.82); line-height:1.8}
.acciones{margin-top:2.5rem; display:flex; gap:.9rem; flex-wrap:wrap}
footer{margin-top:clamp(4rem,11vh,7rem); border-top:1px solid rgba(255,255,255,.28);
  padding:2rem 0 2.6rem}
footer .env{display:flex; flex-wrap:wrap; gap:1.4rem 3rem; justify-content:space-between}
footer .col{color:rgba(255,255,255,.78); font-size:.875rem; line-height:1.9}
footer .col b{display:block; color:var(--blanco); font-size:.75rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:.5rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ── Banda de aparatos en la portada ──────────────────────────────────────
   A sangre y con el pie nombrando el aparato: la lista de doce etiquetas de
   abajo dice lo que tienen, esto enseña que se usa. */
.banda-fotos{width:100vw; margin-left:50%; transform:translateX(-50%);
  display:grid; gap:2px; grid-template-columns:1fr}
@media(min-width:880px){ .banda-fotos{grid-template-columns:repeat(3,1fr)} }
/* Altura fija y no proporción: con columnas iguales y `aspect-ratio` cada foto
   sale de una altura distinta y la banda queda escalonada. */
.banda-fotos figure{position:relative; margin:0; overflow:hidden;
  height:clamp(280px,42vh,520px); background:var(--abismo)}
.banda-fotos img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.4s var(--ease)}
@media (hover:hover) and (pointer:fine){ .banda-fotos figure:hover img{transform:scale(1.07)} }
.banda-fotos figcaption{position:absolute; inset:auto 0 0 0; padding:1.4rem 1.3rem 1.1rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(1,25,60,.86), rgba(1,25,60,0))}

/* ⚠️ Dos secciones seguidas sumaban su margen de abajo y su margen de arriba:
   hasta 320 px de blanco entre una y otra. Cuando una sección va justo detrás
   de otra, la segunda no necesita su margen completo. */
.bloque + .bloque{padding-top:clamp(3rem,8vh,5.5rem)}
.banda-fotos + .bloque{padding-top:clamp(3.5rem,9vh,6rem)}

/* ── Los doce aparatos, sobre los aparatos trabajando ─────────────────────
   La lista de doce etiquetas ahora vive encima de sus propias fotos de cabina,
   fundiéndose. Deja de ser una nube de nombres y pasa a ser una nube de
   nombres sobre las manos que los usan. El velo va en su abismo, su azul más
   hondo, no en negro. */
#aparatologia.fondo-vivo{
  --fv-velo: rgba(1,25,60,.92);
  --fv-velo-2: rgba(1,25,60,.74);
  color:#fff;
  padding-bottom:clamp(4rem,11vh,7rem);
}
#aparatologia.fondo-vivo h2, #aparatologia.fondo-vivo .turbo{ color:#fff }
#aparatologia.fondo-vivo .rotulo p{ color:rgba(255,255,255,.88) }
#aparatologia.fondo-vivo 
#aparatologia.fondo-vivo .azul{ color:var(--rosa-claro) }

/* ── Las siete áreas: carril, no lista ────────────────────────────────────
   Eran siete filas de número + titular + párrafo, y el pacto de más abajo es
   otra lista numerada: dos veces la misma familia en la misma página. Ahora
   cada área entra por SU foto, sacada de la carpeta que su propia web tiene
   con ese nombre.

   Se arrastra con el dedo, con la rueda y con el teclado. */
.carril{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:min(78vw, 340px);
  gap:1.1rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:inline mandatory;
  /* ⚠️ Sin esto, al llegar al final del carril el gesto sigue empujando el
     documento y la página da un salto. Es lo que hace que estos carriles se
     sientan rotos en el móvil. */
  overscroll-behavior-inline:contain;
  scrollbar-width:thin; scrollbar-color:var(--cobalto) var(--filete);
  padding-bottom:1.4rem;
  /* Sangra por la derecha para que se vea que hay más: un carril que termina
     justo en el borde parece una retícula cortada, no algo que se desplaza. */
  margin-right:calc(-1 * max(1rem, (100vw - var(--max)) / 2));
  padding-right:max(1rem, (100vw - var(--max)) / 2);
}
.carril::-webkit-scrollbar{ height:8px }
.carril::-webkit-scrollbar-track{ background:var(--filete); border-radius:99px }
.carril::-webkit-scrollbar-thumb{ background:var(--cobalto); border-radius:99px }
.carril:focus-visible{ outline:2px solid var(--cobalto); outline-offset:6px }

.carta{ scroll-snap-align:start; display:flex; flex-direction:column }
.carta figure{
  margin:0 0 1.1rem; aspect-ratio:4/5; overflow:hidden; background:var(--filete);
}
.carta figure img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03);
  transition:transform 1.3s var(--ease), filter .7s ease;
  filter:saturate(.97);
}
@media (hover:hover) and (pointer:fine){
  .carta:hover figure img{ transform:scale(1.09) }
}
.carta .n{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.8125rem; letter-spacing:.06em;
  color:var(--rosa); display:block; margin-bottom:.35rem;
}
.carta h3{
  font-family:'Bricolage Grotesque',sans-serif; text-transform:uppercase; font-weight:400;
  font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.01em; line-height:1;
  margin:0 0 .6rem;
}
.carta p{ margin:0; line-height:1.7; color:var(--gris); font-size:.9375rem }

@media(min-width:900px){ .carril{ grid-auto-columns:minmax(0,320px) } }

/* El pacto, sobre su cabina. Es la sección con más texto de la página, así que
   el velo sube y la foto se queda muy atrás. */
#pacto.fondo-vivo{
  --fv-velo: rgba(1,25,60,.94);
  --fv-velo-2: rgba(1,25,60,.86);
}

/* El color con el que `tacto.css` tine las superficies del navegador
   —seleccion, cursor, barra y anillo de foco—. Aqui es el rosa de --rosa, que ya pinta las cifras.
   Va al final para ganar al valor de reserva de tacto.css. */
:root{ --tinte: #d6336c }

/* ══ EL MAPA DE LA APARATOLOGÍA ═══════════════════════════════════════════
   Antes esta sección eran doce pastillas iguales en fila: el inventario dicho
   sin decir nada, y además la misma familia de maquetación que ya usa media
   internet. Ahora es un diagrama.

   La idea sale de su PROPIA web, donde el dato estaba enterrado en una
   subpágina: cuatro de los aparatos aparecen en las dos listas. No tiene doce
   cosas distintas; tiene cuatro que dejan seguir el mismo protocolo cuando el
   tratamiento baja del rostro al cuerpo. Eso es un argumento de venta, y una
   lista de nombres no lo cuenta.

   Por eso la columna del medio es más grande, va en rosa y lleva la
   explicación: es la que hay que leer primero, aunque esté en el centro. */
.mapa{
  display:grid; gap:clamp(2.2rem,5vw,3.4rem);
  margin-top:clamp(2.8rem,7vh,4.5rem);
  align-items:start;
}
@media(min-width:900px){
  /* La del medio es más ancha a propósito: la jerarquía se ve antes de leer. */
  .mapa{ grid-template-columns:1fr 1.25fr 1fr; gap:clamp(2rem,4vw,3.4rem) }
}

.zona h3{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.4rem); letter-spacing:-.01em;
  margin:0 0 1.4rem; padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.zona ul{ list-style:none; margin:0; padding:0 }
.zona li{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:500;
  font-size:clamp(1.05rem,2.4vw,1.45rem); line-height:1.25;
  padding:.72rem 0; color:rgba(255,255,255,.80);
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* ── El núcleo: los cuatro que trabajan arriba y abajo ──────────────────── */
.zona.nucleo h3{
  color:var(--rosa-claro);
  border-bottom-color:var(--rosa);
}
.zona.nucleo h3 em{ font-style:italic; font-weight:400 }
.zona.nucleo li{
  font-weight:700; color:#fff;
  font-size:clamp(1.25rem,3.2vw,1.95rem);
  border-bottom-color:rgba(242,160,190,.28);
}
/* Un punto rosa al principio de cada uno: el único adorno, y marca de qué
   lista salen. No es un icono decorativo, es el vínculo con las otras dos
   columnas. */
.zona.nucleo li::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:99px;
  background:var(--rosa); margin-right:.75rem; vertical-align:middle;
}
.zona.nucleo .nota{
  margin:1.5rem 0 0; font-size:.9375rem; line-height:1.75;
  color:rgba(255,255,255,.72); max-width:34ch;
}

@media(prefers-reduced-motion:no-preference){
  .zona li{ transition:color .35s var(--ease), padding-left .001s }
}
@media (hover:hover) and (pointer:fine){
  .zona li:hover{ color:#fff }
}

/* ══ #pacto · ARREGLO DE CONTRASTE ════════════════════════════════════════
   ⚠️ FALLO REAL, el que Natxo fotografió el 21/09/2026 diciendo que se veía
   «super simple y básico». Era peor que soso: era ilegible.

   Qué pasó: esta sección tenía fondo `--arcilla` (beige), y sus colores de
   texto son marrones oscuros elegidos para ese beige. Al convertirla en fondo
   vivo le puse un velo `rgba(1,25,60,.94)` —azul casi negro— y no cambié el
   texto. Medido en el navegador:

     «Cómo trabajamos»            1,67:1   (azul sobre azul)
     las tres reglas de cancelación 1,73:1
     la nota de abajo              2,81:1

   El mínimo legible es 4,5:1. A `#aparatologia` sí le puse el override de
   color en su día; a ésta se me olvidó.

   Y hay algo más que arreglar de fondo: la frase que de verdad vende —«esa
   hora es tuya y nadie más la va a ocupar»— estaba enterrada DEBAJO de la
   letra pequeña. Sube de rango. */
#pacto.fondo-vivo h2,
#pacto.fondo-vivo .turbo{ color:#fff }
#pacto.fondo-vivo ol{ color:rgba(255,255,255,.88) }
#pacto.fondo-vivo ol li::marker{ color:var(--rosa-claro) }
#pacto.fondo-vivo .nota{
  color:#fff;
  font-size:clamp(1.05rem,2.4vw,1.45rem);
  line-height:1.6;
  max-width:30ch;
  border-left:0;
  margin-top:clamp(2rem,5vh,3rem);
}
#pacto.fondo-vivo .nota strong,
#pacto.fondo-vivo .nota b{ color:var(--rosa-claro); font-weight:500 }

/* ══ .banda · el testimonio deja de ser un bote de pintura ════════════════
   Era `background:var(--cobalto)` plano con una cita gigante encima: el
   recurso más repetido de las cuatro demos y lo que más las hace parecerse
   entre ellas. Ahora la cita va sobre la cabina de verdad, con el velo teñido
   del azul de la casa en vez de pintado a pincel. */
.banda.fondo-vivo{
  --fv-velo: rgba(13,60,136,.90);
  --fv-velo-2: rgba(13,60,136,.72);
  background:none;
}
.banda.fondo-vivo blockquote{ color:#fff }
.banda.fondo-vivo .quien{ color:rgba(255,255,255,.66) }

/* ══ #cita · romper la cadena de azules ═══════════════════════════════════
   Testimonio azul → pacto azul marino → cierre azul: tres de la misma familia
   seguidas, y en móvil es una escalera de bloques de color. El cierre pasa al
   ÚNICO neutro cálido de la paleta, que estaba sin usar y que el propio CSS
   describe como el color que «humaniza el azul». La web abre en azul y cierra
   en arcilla. */
#cita{
  background:var(--arcilla) !important;
  color:var(--carbon);
}
#cita h2, #cita .turbo{ color:var(--carbon) }
#cita p, #cita .sub{ color:#4a4038 }
#cita .pil{ background:var(--cobalto); color:#fff; border-color:var(--cobalto) }
#cita .pil.linea{ background:transparent; color:var(--carbon); border-color:var(--carbon) }

/* ⚠️ «Catorce APARATOS»: la palabra destacada iba en `--cobalto` sobre el velo
   azul marino de la sección y medía 2,49:1 — por debajo del mínimo de 3:1 para
   texto grande. Pasa al rosa claro, que además la ENLAZA con la columna del
   medio del mapa, que es la que hay que leer. El destacado deja de ser adorno
   y señala dónde mirar. */
#aparatologia .azul{ color:var(--rosa-claro) }