/* =========================================================================
   Clean Water Pachuca
   Un solo archivo. Móvil primero: todo se maqueta a 360px y se expande.
   ========================================================================= */

/* ---- Paleta y tokens ------------------------------------------------- */
:root {
  --tinta:      #0a2233;
  --tinta-2:    #3d5a70;
  --gris:       #5d7992;   /* 4.55:1 sobre blanco; el #62809a daba 4.14 y no pasaba AA */
  --linea:      #d7e9f3;
  --hueso:      #f2fafd;
  --blanco:     #ffffff;

  --azul:       #0f5c96;
  --azul-hondo: #062c4a;
  --cian:       #16b6dd;   /* decorativo: fondos, bordes, iconos. NO para texto */
  --cian-txt:   #0f819c;   /* la versión legible: 4.53:1 sobre blanco */
  --cian-claro: #7fe3f5;
  --verde-wa:   #25d366;
  --verde-ok:   #12a06e;   /* "este componente sí te toca" */
  --verde-piso: #d7f6e7;
  --verde-tinta:#08432f;

  --si:         #0f865e;   /* 4.57:1; el #12996b daba 3.62 y está en las 8 celdas 'Sí' de la tabla */
  --no:         #c2543c;

  --r:          16px;
  --r-lg:       22px;
  --sombra:     0 1px 2px rgba(6,44,74,.05), 0 8px 24px -12px rgba(6,44,74,.18);
  --sombra-alta:0 2px 4px rgba(6,44,74,.06), 0 22px 50px -20px rgba(6,44,74,.32);

  --tipo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escena del agua. Cada sección redefine estas seis variables y el CSS
     interpola: no hay ni un bucle de animación en JavaScript. */
  --w1:        #d9f2fb;
  --w2:        #a7e2f4;
  --ola-op:    .55;
  --ola-dur:   16s;
  --burb-op:   .5;
  --burb-dur:  13s;
  --tinte:     rgba(126, 216, 240, .10);
}

/* ---- Guion de escenas ------------------------------------------------ */
body[data-scene="hero"]       { --w1:#e2f7fd; --w2:#9adff2; --ola-op:.6;  --ola-dur:15s; --burb-op:1; --burb-dur:11s; --tinte:rgba(126,216,240,.12); }
body[data-scene="sarro"]      { --w1:#eeeae2; --w2:#c9bfb0; --ola-op:.42; --ola-dur:30s; --burb-op:.22; --burb-dur:26s; --tinte:rgba(150,132,104,.08); }
body[data-scene="medimos"]    { --w1:#d6f2e9; --w2:#7fd0bd; --ola-op:.4;  --ola-dur:22s; --burb-op:.95; --burb-dur:13s; --tinte:rgba(20,140,120,.10); }
body[data-scene="setup"]      { --w1:#eef8fc; --w2:#cbe7f2; --ola-op:.24; --ola-dur:34s; --burb-op:.3; --burb-dur:24s; --tinte:rgba(126,196,224,.05); }
body[data-scene="tren"]       { --w1:#dff3fc; --w2:#96d4ee; --ola-op:.5;  --ola-dur:9s;  --burb-op:.7;  --burb-dur:14s; --tinte:rgba(110,200,236,.10); }
body[data-scene="comparativa"]{ --w1:#e4f4fb; --w2:#a9dcef; --ola-op:.4;  --ola-dur:20s; --burb-op:.55;  --burb-dur:16s; --tinte:rgba(126,206,236,.09); }
body[data-scene="osmosis"]    { --w1:#e8fcff; --w2:#8fe6f8; --ola-op:.62; --ola-dur:12s; --burb-op:1;  --burb-dur:8s;  --tinte:rgba(140,230,248,.14); }
body[data-scene="proceso"]    { --w1:#dcf0fa; --w2:#8ec8e6; --ola-op:.44; --ola-dur:22s; --burb-op:.5; --burb-dur:19s; --tinte:rgba(110,190,226,.10); }
body[data-scene="faq"]        { --w1:#e9f6fb; --w2:#bcdff0; --ola-op:.3;  --ola-dur:28s; --burb-op:.34; --burb-dur:22s; --tinte:rgba(126,196,224,.07); }
body[data-scene="contacto"]   { --w1:#0d4a76; --w2:#062c4a; --ola-op:.5;  --ola-dur:26s; --burb-op:.6;  --burb-dur:20s; --tinte:rgba(6,44,74,.30); }

/* ---- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  /* proximity, NO mandatory: engancha al inicio de sección cuando el scroll se
     detiene cerca, pero nunca atrapa dentro de una sección más alta que la
     pantalla. Ver docs/PLAN.md. */
  scroll-snap-type: y proximity;
}

/* En celular el enganche por zonas NO funciona, probado en dispositivo real:
   pelea con el scroll por inercia y con la barra de URL que cambia de altura,
   y el resultado se siente trabado. En una pantalla chica cada sección ya
   ocupa toda la vista por sí sola, así que el enganche no aportaba nada que
   la propia altura no diera. */
@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  /* En pantalla chica las secciones tapan casi todo el fondo, así que la capa
     de enfrente es la única que se ve: se le sube el peso. */
  .burbujas--frente { opacity: calc(var(--burb-op) * .95); }
}

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  /* clip y no hidden: overflow-x:hidden fuerza overflow-y:auto, convierte al
     body en contenedor de scroll y con eso el position:sticky del diagrama
     del setup deja de pegarse (su contenedor pasa a ser el body, cuyo
     scrollport mide todo el contenido). clip recorta sin crear scroller. */
  overflow-x: clip;
}

h1, h2, h3 { line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.022em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 8.5vw, 4.2rem); }
h2 { font-size: clamp(1.75rem, 6vw, 3rem); }
h3 { font-size: clamp(1.1rem, 3.4vw, 1.35rem); }
p  { margin: 0 0 1rem; }
a  { color: var(--azul); }
img, svg { max-width: 100%; }

/* El [hidden] del navegador es regla de UA: cualquier `display` de autor le
   gana. Sin esto, .btn { display:inline-flex } dejaba visibles los botones que
   el JS oculta con el.hidden = true (Atrás y "prefiero platicarlo directo"). */
[hidden] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: var(--azul-hondo); color: #fff; padding: .7rem 1.1rem;
  border-radius: 10px; text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 12px; }

/* El anillo de foco es un componente no textual: WCAG 1.4.11 pide 3:1 y el
   --cian daba 2.39. Con el azul de marca sube a 6.6:1 y se ve mejor. */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

/* ---- Fondo de agua --------------------------------------------------- */
.agua {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(170deg, var(--w1) 0%, var(--w2) 100%);
  transition: background 1.1s ease;
}
.agua__tinte {
  position: absolute; inset: 0;
  background: var(--tinte);
  transition: background 1.1s ease;
}
.agua__olas {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* max-width:none es obligatorio: la regla base `img, svg { max-width: 100% }`
     le capaba el ancho a 100% del viewport en vez de 260%, así que al
     desplazarse dejaba un tercio de la pantalla sin ola. Se nota sobre todo en
     monitores anchos, donde ese tercio son cientos de píxeles de corte. */
  max-width: none;
  width: 260%; height: 42vh; min-height: 220px;
  opacity: var(--ola-op);
  transition: opacity 1.1s ease;
}
.ola { fill: #fff; transform-origin: center; }
.ola--1 { opacity: .55; animation: deriva var(--ola-dur) linear infinite; }
.ola--2 { opacity: .35; animation: deriva calc(var(--ola-dur) * 1.6) linear infinite reverse; }
.ola--3 { opacity: .22; animation: deriva calc(var(--ola-dur) * 2.3) linear infinite; }
/* -50% y no -33.33%: el trazado lleva DOS ciclos de ola dentro del viewBox, así
   que un periodo mide exactamente la mitad del elemento. Desplazar justo un
   periodo es lo que hace que el bucle no dé el salto que daba antes. Y con 260%
   de ancho, tras el desplazamiento todavía quedan 130% de viewport cubiertos. */
@keyframes deriva { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Burbujas: máximo 18 en el DOM, animadas solo con transform y opacity para
   que vivan en el hilo del compositor y no disparen layout ni paint. */
.burbujas { position: absolute; inset: 0; overflow: hidden; }
.burbuja {
  position: absolute; bottom: -8vh;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  /* El relleno casi no importa: lo que hace legible una burbuja sobre fondo
     claro es el aro azulado de afuera y la sombra interior que le da volumen.
     Con relleno blanco y borde blanco eran invisibles. */
  background:
    radial-gradient(circle at 34% 27%,
      rgba(255,255,255,.98) 0 16%,
      rgba(255,255,255,.42) 36%,
      rgba(255,255,255,.06) 62%,
      rgba(255,255,255,0)   72%);
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 1.2px rgba(8,86,136,.16),
    inset 0 -2px 6px rgba(8,86,136,.20),
    0 3px 10px rgba(8,86,136,.12);
  opacity: 0;
  will-change: transform, opacity;
  animation: subir var(--dur) linear infinite;
  animation-delay: var(--del);
}
.burbujas { opacity: var(--burb-op); transition: opacity 1.1s ease; }
@keyframes subir {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  85%  { opacity: .75; }
  100% { transform: translate3d(var(--dx), -112vh, 0) scale(1); opacity: 0; }
}

/* Capa frontal: z-index 60 la deja por encima del contenido pero por debajo
   del nav (100) y del botón flotante (90), que nunca deben ensuciarse. */
.burbujas--frente {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; overflow: hidden;
  opacity: calc(var(--burb-op) * .7);
}
.burbujas--frente .burbuja {
  border-color: rgba(255,255,255,.75);
  box-shadow:
    0 0 0 1.2px rgba(8,86,136,.11),
    inset 0 -2px 7px rgba(8,86,136,.13);
}

/* ---- Nav ------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* El desenfoque obliga a capturar y desenfocar la franja de fondo en cada
     cuadro del scroll, con un gradiente animado y burbujas detrás. En un
     celular de gama media es lo más caro de la página, y apenas se nota. */
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.nav.is-pegado { background: rgba(255,255,255,.94); border-bottom-color: var(--linea); box-shadow: 0 6px 20px -14px rgba(6,44,74,.5); }
.nav__wrap {
  max-width: 1180px; margin: 0 auto; padding: .65rem 1.1rem;
  display: flex; align-items: center; gap: 1rem;
}
/* El logo horizontal ya trae el nombre y "Pachuca": no hace falta texto al
   lado. Los PNG del kit venían con mucho margen vacío alrededor —a 38px de
   alto el dibujo real medía unos 23— así que están recortados al contenido y
   la altura de aquí es la altura que se ve. */
.marca { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.marca img { display: block; height: 32px; width: auto; }
@media (min-width: 940px) { .marca img { height: 36px; } }

.nav__menu {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--linea); background: #fff; border-radius: 12px; cursor: pointer;
}
.nav__barras { display: grid; gap: 4px; }
.nav__barras i { display: block; width: 18px; height: 2px; background: var(--azul-hondo); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav__menu[aria-expanded="true"] .nav__barras i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__barras i:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] .nav__barras i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__links {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--linea);
  padding: .5rem 1.1rem 1.1rem;
  display: none; flex-direction: column; gap: .1rem;
}
.nav__links.is-abierto { display: flex; }
.nav__links a {
  text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .98rem;
  padding: .72rem .2rem; border-bottom: 1px solid var(--linea);
}
.nav__links a.btn--wa { color: #05341a; }
.nav__links a:last-child { border: 0; margin-top: .6rem; }

@media (min-width: 940px) {
  .nav__menu { display: none; }
  .nav__links {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: 1.5rem; background: none; border: 0; padding: 0;
  }
  .nav__links a { border: 0; padding: .3rem 0; font-size: .92rem; color: var(--tinta-2); }
  .nav__links a:hover { color: var(--azul); }
  .nav__links a:last-child { margin: 0; }
  /* El botón conserva lo suyo: la regla de arriba tiene más especificidad que
     .btn--wa y le estaba pintando el texto de gris azulado sobre verde. */
  .nav__links a.btn { padding: .6rem 1.05rem; }
  .nav__links a.btn--wa, .nav__links a.btn--wa:hover { color: #05341a; }
}

/* ---- Botones --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.35rem; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: .97rem; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .25s, background .2s, color .2s;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn--wa { background: var(--verde-wa); color: #05341a; box-shadow: 0 10px 24px -12px rgba(37,211,102,.9); }
.btn--wa:hover { background: #1fbd5a; }
.btn--ghost { background: rgba(255,255,255,.72); color: var(--azul-hondo); box-shadow: inset 0 0 0 1.6px rgba(15,92,150,.28); }
.btn--ghost:hover { background: #fff; }
.btn--lg { padding: 1.02rem 1.7rem; font-size: 1.03rem; }
.btn--sm { padding: .6rem 1.05rem; font-size: .88rem; }
.btn--full { width: 100%; }
.btn--texto { background: none; color: var(--azul); font-weight: 600; padding: .5rem .2rem; font-size: .92rem; text-decoration: none; }
.btn--texto:hover { text-decoration: underline; }
.ico-wa { width: 19px; height: 19px; fill: currentColor; flex: none; }

/* ---- Secciones ------------------------------------------------------- */
.sec {
  position: relative;
  min-height: 100svh;            /* svh y no vh: la barra de URL móvil cambia de alto */
  display: flex; align-items: center;
  padding: 5.5rem 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* En celular el contenido ya es más alto que la pantalla en casi todas las
   secciones; forzar 100svh solo mete huecos enormes en las cortas. Que cada
   una mida lo que mide. */
@media (max-width: 900px) {
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.92); }
  .sec { min-height: 0; padding: 3.6rem 0; }
  .sec--hero { padding-top: 5.2rem; }
}
.sec--claro { background: rgba(255,255,255,.7); }
/* Superficie profunda. Va semitransparente a propósito: así las olas y las
   burbujas del fondo siguen leyéndose por debajo, y encima del azul oscuro es
   donde mejor se ven. */
.sec--hondo { background: linear-gradient(168deg, rgba(8,46,76,.88) 0%, rgba(4,28,48,.9) 100%); }
/* Verde agua para la sección de la prueba química: es análisis, no producto, y
   el cambio de familia de color lo dice sin escribirlo. Va semitransparente
   igual que la honda, para que las burbujas sigan subiendo por debajo — sobre
   oscuro es donde mejor se leen. El tono es profundo a propósito: en un verde
   claro el botón flotante de WhatsApp se perdería justo aquí. */
.sec--verde { background: linear-gradient(168deg, rgba(10,79,71,.88) 0%, rgba(5,50,46,.9) 100%); }
.sec--verde h2, .sec--verde h3 { color: #fff; }
.sec--verde .kicker { color: #7ce8cf; }
.sec--verde .intro { color: rgba(255,255,255,.8); }
.sec--verde .h-sub { color: #fff; }
.sec--verde .lista-check li { color: rgba(255,255,255,.82); }
.sec--verde .lista-check li b { color: #fff; }
.sec--verde .lista-check li::before { background: #4fdcbc; box-shadow: 0 0 0 4px rgba(79,220,188,.18); }
.sec--verde .nota { color: rgba(255,255,255,.66); }
.sec--verde .nota b { color: #fff; }
/* La nota franca conserva el ámbar, que sobre verde contrasta aún mejor que
   sobre blanco, pero traslúcido para no quedar como un parche pegado. */
.sec--verde .nota--franca {
  background: rgba(240,200,120,.13); border-color: rgba(240,200,120,.4);
  color: rgba(255,255,255,.84);
}
.sec--verde .nota--franca b { color: #ffd98a; }
/* La tarjeta de la escala es clara dentro de una sección oscura: hay que
   devolverle sus colores o hereda el texto blanco y desaparece. Pasó: el
   título "Dónde vas a caer" y su nota final quedaron blancos sobre blanco. */
.sec--verde .escala h3,
.sec--verde .escala .h-sub { color: var(--azul-hondo); }
.sec--verde .escala .nota { color: var(--gris); }
.sec--verde .escala .escala__lista li { color: var(--tinta); }
.sec--hondo h2, .sec--hondo h3 { color: #fff; }
.sec--hondo .kicker { color: var(--cian-claro); }
.sec--hondo .intro { color: rgba(255,255,255,.78); }
/* El panel y el diagrama siguen blancos: sobre el fondo hondo, saltan. */
.sec--hondo .setup__panel h3,
.sec--hondo .setup__panel .paso__q { color: var(--azul-hondo); }
/* Fondo propio, no heredado del data-scene: sin JS el body se queda en la
   escena "hero" y este texto blanco caía sobre azul pastel a 1.1:1, invisible.
   Es la sección de cierre y el destino de todos los enlaces de respaldo. */
.sec--cta   { color: #fff; background: linear-gradient(168deg, #0b3f6a 0%, #062c4a 100%); }
.sec--cta h2 { color: #fff; }
.sec--cta .intro, .sec--cta .nota { color: rgba(255,255,255,.86); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.15rem; }
.wrap--angosto { max-width: 760px; }
.centro { text-align: center; }

.kicker {
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 700; color: var(--azul); margin-bottom: .9rem;
}
.sec--cta .kicker { color: var(--cian-claro); }
.intro { font-size: clamp(1.02rem, 2.6vw, 1.18rem); color: var(--tinta-2); max-width: 62ch; }
.nota  { font-size: .9rem; color: var(--gris); }
.cierre { margin-top: 2.4rem; font-size: 1.05rem; font-weight: 600; color: var(--azul-hondo); max-width: 68ch; }
.h-sub { font-size: 1.05rem; color: var(--azul-hondo); margin-bottom: .8rem; }

/* ---- Hero ------------------------------------------------------------ */
.sec--hero { padding-top: 3rem; }
.hero { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 980px) { .hero { grid-template-columns: 1.04fr .96fr; gap: 3.4rem; } }

/* El gancho va solo en una línea y la promesa debajo, más chica: es la misma
   pregunta que llevan los anuncios, y la correspondencia entre el anuncio y el
   encabezado es de lo que más sostiene la conversión. */
/* Solo en escritorio. En celular el nav es sticky, así que el logo ya está en
   pantalla de forma permanente y repetirlo justo debajo se leía como marca
   duplicada — además de gastar el espacio vertical donde más escasea. En
   escritorio el hero es una composición a dos columnas y el logo ancla la
   izquierda sin competir con el del nav. */
.hero__logo { display: none; }
@media (min-width: 980px) {
  .hero__logo { display: block; height: 62px; width: auto; margin-bottom: 1.4rem; }
}

.hero h1 { margin-bottom: 1.1rem; color: var(--azul-hondo); }
.hero h1 em {
  display: block; font-style: normal; color: var(--azul);
  font-size: .42em; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.24; margin-top: .5rem;
}
.hero .lede { font-size: clamp(1.02rem, 2.7vw, 1.2rem); color: var(--tinta-2); max-width: 52ch; margin-bottom: 1.9rem; }

/* Mosaico de síntomas */
.hero__mosaico {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}
.mosaico__i {
  margin: 0; overflow: hidden; border-radius: var(--r-lg);
  background: #dbe7ee; border: 3px solid #fff;
  box-shadow: var(--sombra-alta);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.mosaico__i--ancha { grid-column: 1 / -1; }
.mosaico__i img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  /* Vienen de fuentes distintas: un ajuste parejo de contraste y saturación
     evita que una se vea lavada junto a otra. No es duotono — aquí el color
     del sarro es el argumento y hay que verlo tal cual. */
  filter: contrast(1.06) saturate(1.04);
}
.mosaico__i--ancha img { aspect-ratio: 16 / 9; }
.mosaico__i:hover { transform: translateY(-3px) scale(1.012); }
.mosaico__pie {
  grid-column: 1 / -1; margin: .1rem 0 0;
  font-size: .78rem; color: var(--gris); text-align: right;
}
.cta-fila { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.hero__nota { font-size: .89rem; color: var(--gris); max-width: 46ch; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(15,92,150,.35); border-radius: 14px;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  background: var(--azul); border-radius: 2px; animation: baja 1.9s ease-in-out infinite;
}
@keyframes baja { 0%,100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(13px); opacity: .2 } }
@media (max-width: 640px) { .scroll-hint { display: none; } }

/* ---- Rejilla de tarjetas --------------------------------------------- */
.rejilla { display: grid; gap: 1.05rem; margin-top: 2.4rem; }
@media (min-width: 640px) { .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: rgba(255,255,255,.9); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.5rem 1.35rem;
  box-shadow: var(--sombra); transition: transform .3s, box-shadow .3s;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta__ico { width: 54px; height: 54px; margin-bottom: 1rem; }
.tarjeta__ico svg { width: 100%; height: 100%; fill: none; stroke: var(--azul); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta__ico .alerta { stroke: #d9744f; }
.tarjeta h3 { color: var(--azul-hondo); }
.tarjeta p { font-size: .95rem; color: var(--tinta-2); margin: 0; }

/* ---- Cómo medimos ---------------------------------------------------- */
.medimos { display: grid; gap: 2rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .medimos { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }

.lista-check { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .62rem; }
.lista-check li { position: relative; padding-left: 1.9rem; font-size: .96rem; color: var(--tinta-2); }
.lista-check li b { color: var(--tinta); }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cian); box-shadow: 0 0 0 4px rgba(22,182,221,.16);
}

.nota--franca {
  background: #fff8ec; border: 1px solid #f0dcb8; border-radius: 13px;
  padding: .9rem 1rem; margin-top: 1.1rem; color: var(--tinta-2);
}
.nota--franca b { color: var(--azul-hondo); }

/* Prueba visual del sarro.
 *
 * Las fotos vienen de fuentes distintas y no se parecen entre sí: una es sepia,
 * la otra gris de taller. Juntas se leen como imágenes encontradas, no como
 * material del negocio. El duotono las resuelve: la figura pone el color de
 * fondo y la imagen entra en mix-blend-mode luminosity, así que solo aporta su
 * luminancia y toma el tono de abajo. Dos fotos cualesquiera salen del mismo
 * sistema, y de paso el azul profundo las despega del fondo arena de la sección.
 *
 * Cuando lleguen fotos reales de instalaciones, esto se puede quitar: material
 * propio y consistente no necesita rescate de color.
 */
/* El hero muestra los síntomas a color; aquí va la anatomía, en duotono. Son
   dos registros distintos a propósito, y el rótulo es lo que hace que se lea
   como decisión y no como descuido. */
.rotulo {
  display: flex; align-items: center; gap: .9rem;
  margin: 2.6rem 0 0; font-size: .76rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--tinta-2);
}
.rotulo::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(10,42,68,.28), rgba(10,42,68,0));
}

.prueba { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 760px) { .prueba { grid-template-columns: 1.55fr 1fr; gap: 1.2rem; } }

.prueba__f {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); background: #0a2a44;
  box-shadow: var(--sombra-alta);
}
.prueba__f img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  mix-blend-mode: luminosity; filter: contrast(1.12) brightness(1.04);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.prueba__f--grande img { aspect-ratio: 16 / 11; }
@media (max-width: 759px) { .prueba__f img, .prueba__f--grande img { aspect-ratio: 16 / 10; } }
.prueba__f:hover img { transform: scale(1.035); }

/* El pie va sobre la foto, con degradado: una etiqueta debajo de la imagen la
   hace parecer stock con caption; encima, parece evidencia. */
.prueba__f figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem .95rem;
  font-size: .92rem; line-height: 1.4; color: rgba(255,255,255,.82);
  background: linear-gradient(180deg, rgba(6,26,44,0) 0%, rgba(6,26,44,.55) 45%, rgba(6,26,44,.88) 100%);
}
.prueba__f figcaption b { color: #fff; font-weight: 700; }

/* align-self:start para que la tarjeta se ajuste a su contenido. Estirada a la
   altura de la columna izquierda quedaba con un bloque de blanco vacío abajo. */
.escala { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 1.6rem 1.4rem; box-shadow: var(--sombra-alta); align-self: start; }
.escala__intro { font-size: .9rem; color: var(--gris); }
.escala__lista { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; counter-reset: e; }
.escala__lista li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; }
.escala__lista b { flex: 1; }
.escala__lista i { font-style: normal; color: var(--gris); font-size: .87rem; font-variant-numeric: tabular-nums; }
.escala__b { width: 34px; height: 12px; border-radius: 6px; flex: none; }
.escala__b--1 { background: #a9e8f7; }
.escala__b--2 { background: #55c9e8; }
.escala__b--3 { background: #d8a24a; }
.escala__b--4 { background: #bf5e3c; }

/* ---- Arma tu setup --------------------------------------------------- */
.setup { display: grid; gap: 1.6rem; margin-top: 2.2rem; }

/* En celular las preguntas van PRIMERO. El diagrama mide 460x792, así que a
   ancho de móvil ocupa la pantalla entera y empujaba la pregunta 1 por debajo
   del pliegue: había que hacer scroll de un diagrama completo para encontrar
   qué responder, y desde ahí el diagrama ya no se veía. Con las preguntas
   arriba se contesta de inmediato y el diagrama queda abajo como resultado
   visible de cada respuesta. En escritorio se queda pegado al lado y el
   comportamiento original no cambia. */
@media (max-width: 939px) {
  .setup { display: flex; flex-direction: column; }
  .setup__panel    { order: 1; }
  .setup__diagrama { order: 2; padding: .8rem; }
  .setup__pie      { margin-top: .7rem; }
}
/* Es la única sección de dos columnas del sitio; con el ancho general de 1180
   el diagrama y las preguntas se aprietan. */
@media (min-width: 1240px) { #setup .wrap { max-width: 1300px; } }
@media (min-width: 940px)  { .setup { grid-template-columns: minmax(380px, 440px) 1fr; gap: 2.4rem; align-items: start; } }
@media (min-width: 1180px) { .setup { grid-template-columns: 500px 1fr; gap: 3rem; } }

.setup__diagrama {
  background: rgba(255,255,255,.92); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.1rem; box-shadow: var(--sombra);
}
@media (min-width: 940px) { .setup__diagrama { position: sticky; top: 88px; } }
#diagrama { display: block; width: 100%; height: auto; }
.setup__pie {
  margin: .9rem 0 0; font-size: .9rem; font-weight: 600; color: var(--azul-hondo);
  text-align: center; background: #f0fafd; border-radius: 10px; padding: .55rem .7rem;
}

/* --- estados del diagrama ---
 *
 * Nada se atenúa. Un componente al 32% de opacidad se lee como "bloqueado" o
 * "no disponible", que es lo contrario de lo que pasa: todavía no sabemos si te
 * toca. Por eso el estado de arranque es una tarjeta blanca completamente
 * legible en tonos neutros, y lo que cambia al responder es el COLOR: verde =
 * este componente entra en tu setup. Es la misma convención de la palomita, y
 * se entiende sin leer nada.
 */
.etapa, .tanque { transition: opacity .45s ease, transform .5s ease; }
.etapa.recien { animation: prender .7s ease; }
@keyframes prender {
  0%   { transform: scale(.97); }
  45%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* --- pendiente ---
 * Conserva los colores de la marca: icono azul, título azul hondo, tanques con
 * su contenido a color. Un componente pendiente no está apagado ni bloqueado,
 * simplemente todavía no sabemos si te toca. */
.etapa__caja { fill: #fff; stroke: #d5e3ec; stroke-width: 1.6; transition: fill .45s ease, stroke .45s ease; }
.etapa--tren .etapa__caja { fill: #f6fbfd; }
.etapa__ico { fill: none; stroke: var(--azul); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.etapa__ico .agua-glifo { stroke: var(--cian); }
.etapa__t { font: 700 17px var(--tipo); fill: var(--azul-hondo); }
.etapa__d { font: 500 13.5px var(--tipo); fill: var(--gris); }

/* --- te toca ---
 * Solo cambia el marco: fondo menta claro, borde verde y palomita. El icono y
 * el texto NO se vuelven verdes — si todo se tiñe, el diagrama pierde su
 * identidad y el verde deja de ser una señal para volverse decoración. */
.etapa.on .etapa__caja {
  fill: #e9faf1; stroke: var(--verde-ok); stroke-width: 2.4;
  filter: drop-shadow(0 5px 16px rgba(18,160,110,.26));
}

/* Insignia: el disco marca la ranura desde el principio, así se ve cuántos
   pasos faltan, y la palomita entra cuando el componente aplica. */
.etapa__disco { fill: none; stroke: #cfdce4; stroke-width: 2; transition: fill .45s ease, stroke .45s ease; }
.etapa.on .etapa__disco { fill: var(--verde-ok); stroke: var(--verde-ok); }
.etapa__palomita {
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity .35s ease .1s;
}
.etapa.on .etapa__palomita { opacity: 1; }

/* --- no te toca ---
 * Este SÍ se atenúa, y ahora el gris significa algo concreto: ya lo evaluamos
 * y no aplica. Es distinto de "pendiente", que va a color. La rayita en la
 * insignia lo separa de un círculo vacío, que se leería como "falta responder".
 * Decir qué NO necesitas vale tanto como decir qué sí. */
/* La opacidad va SOLO en la caja y el icono. Aplicada al grupo entero dejaba
   el texto a 1.58:1 — y ahí vive el mensaje de "no te hace falta", que es
   media tesis del sitio. Los colores de abajo ya son los atenuados. */
.etapa.descartado .etapa__caja,
.etapa.descartado .etapa__ico,
.etapa.descartado .etapa__disco,
.tanque.descartado .tanque__c,
.tanque.descartado .tanque__m { opacity: .55; }
.etapa.descartado .etapa__caja { fill: #fafcfd; stroke: #e3eaef; }
.etapa.descartado .etapa__ico { stroke: #92a6b3; }
.etapa.descartado .etapa__ico .agua-glifo { stroke: #a8bcc8; }
.etapa.descartado .etapa__t { fill: #56707f; }
.etapa.descartado .etapa__d { fill: #7b8f9d; }
.etapa.descartado .etapa__disco { stroke: #c8d5dd; }
.etapa__raya {
  fill: none; stroke: #9db0bc; stroke-width: 2.6; stroke-linecap: round;
  opacity: 0; transition: opacity .35s ease;
}
.etapa.descartado .etapa__raya { opacity: 1; }
.tanque.descartado .tanque__c { fill: #fafcfd; stroke: #b6c8d4; }
.tanque.descartado .tanque__m { stroke: #a8bccb; }

/* --- tanques del tren ---
 * Sin fill en la regla base: así conservan el degradado azul del <defs>. */
.tanque__c { stroke: var(--azul); stroke-width: 2; transition: fill .45s ease, stroke .45s ease; }
.tanque__m { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; }
.tanque__p { fill: var(--cian); }
.tanque__p--r { fill: #d8a24a; }
.tanque__t { font: 700 12px var(--tipo); fill: var(--azul-hondo); text-anchor: middle; }

.tanque.on .tanque__c { fill: #e9faf1; stroke: var(--verde-ok); }

/* Resina, IPS y la ranura pendiente ocupan el MISMO lugar. Atenuar a los que no
   aplican dejaba las etiquetas encimadas ("Resina o IPS" leyéndose debajo de
   "IPS"), así que los tres se ocultan por completo y solo se ve el que aplica. */
.tanque--alterno, .tanque--slot { opacity: 0; }
.tanque--alterno.on, .tanque--slot.on { opacity: 1; }
.tanque__slot { fill: none; stroke: var(--gris); stroke-width: 2; stroke-dasharray: 5 5; }
.tanque__i { font: 700 26px var(--tipo); fill: var(--gris); text-anchor: middle; }

.tubo__base { fill: none; stroke: var(--linea); stroke-width: 11; stroke-linecap: round; transition: stroke .6s ease; }
.tubo__flujo {
  fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 8 12; opacity: 0; transition: opacity .5s ease;
}
.tubo.on .tubo__flujo { opacity: .95; animation: fluir 1.1s linear infinite; }
.tubo.on.tubo--crudo   .tubo__base { stroke: #b79a68; }
.tubo.on.tubo--tratada .tubo__base { stroke: var(--cian); }
@keyframes fluir { to { stroke-dashoffset: -18; } }

/* --- panel de preguntas --- */
.setup__panel {
  background: rgba(255,255,255,.94); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.8rem 1.6rem; box-shadow: var(--sombra);
}
@media (min-width: 940px) { .setup__panel { padding: 2.2rem 2rem; } }
.setup__barra { height: 8px; border-radius: 5px; background: var(--linea); overflow: hidden; margin-bottom: 1.5rem; }
.setup__barra i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--azul), var(--cian)); transition: width .45s ease; }

.paso__n { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--cian-txt); margin-bottom: .5rem; }
.paso__q { color: var(--azul-hondo); margin-bottom: 1.2rem; font-size: clamp(1.22rem, 3.8vw, 1.6rem); }
.paso__ayuda { font-size: .87rem; color: var(--gris); margin: 1rem 0 0; }
.paso__sig { margin-top: 1rem; }

.ops { display: grid; gap: .6rem; }
.ops--fila { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .ops--fila { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 620px) { .ops--multi { grid-template-columns: repeat(2, 1fr); } }

.op {
  display: flex; flex-direction: column; gap: .12rem; text-align: left;
  padding: 1.02rem 1.15rem; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1.6px solid var(--linea);
  font-family: inherit; color: var(--tinta);
  transition: border-color .2s, background .2s, transform .15s, box-shadow .25s;
}
.op:hover { border-color: var(--cian-txt); transform: translateY(-2px); box-shadow: var(--sombra); }
.op b { font-size: 1.03rem; font-weight: 700; }
.op span { font-size: .87rem; color: var(--gris); line-height: 1.42; }
/* Borde en el cian oscuro: el claro daba 2.27:1 contra su propio fondo y
   1.4.11 pide 3:1 para el límite de un control. Un usuario con visión reducida
   no distinguía cuál opción tenía elegida. */
.op.sel { border-color: var(--cian-txt); background: #effbfe; box-shadow: 0 0 0 3px rgba(15,129,156,.18); }
.op--chica { align-items: center; text-align: center; padding: .9rem .5rem; }
.op--check { position: relative; padding-right: 2.4rem; }
.op--check::after {
  content: ""; position: absolute; right: .9rem; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 6px; border: 1.8px solid var(--linea);
  transition: background .2s, border-color .2s;
}
.op--check.sel::after {
  background: var(--cian) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--cian);
}

/* Detalle de los litros: parte de la pregunta 5, no una séptima pregunta. */
.extra {
  margin-top: 1.2rem; padding: 1.1rem 1.2rem;
  background: #f2fafd; border: 1px solid var(--linea); border-radius: 14px;
}
.extra__check { width: 100%; margin-bottom: 1.1rem; }
.extra__q { margin: 0 0 .7rem; font-weight: 700; color: var(--azul-hondo); font-size: 1rem; }
.extra__fila { display: flex; align-items: center; gap: 1rem; }
.extra__v {
  font-weight: 800; font-size: 1.05rem; color: var(--azul);
  font-variant-numeric: tabular-nums; min-width: 5.5ch; text-align: right;
}
.extra__ayuda { margin: .7rem 0 0; font-size: .86rem; color: var(--gris); }
.extra__acc { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

/* El control nativo se ve distinto en cada navegador y en iOS sale diminuto.
   Con 28px de pulgar cumple el mínimo táctil de 24px de WCAG 2.5.8. */
.extra input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px; background: var(--linea);
  outline-offset: 6px; margin: 0;
}
.extra input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azul); border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,92,150,.4);
}
.extra input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul); border: 3px solid #fff; cursor: pointer;
}

.setup__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.setup__saltar { margin-left: auto; }

/* --- resultado --- */
.resultado__por { font-size: 1rem; color: var(--tinta-2); }
.resultado__lista { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.resultado__lista li {
  padding: .85rem 1rem; border-radius: 13px; background: #f4fbfe;
  border-left: 4px solid var(--cian); font-size: .93rem;
}
.resultado__lista li b { display: block; color: var(--azul-hondo); margin-bottom: .12rem; }
.resultado__lista li span { color: var(--tinta-2); }
.resultado__aviso {
  font-size: .88rem; color: var(--tinta-2); background: #fff8ec;
  border: 1px solid #f0dcb8; border-radius: 13px; padding: .9rem 1rem; margin-bottom: 1.1rem;
}
#res-reiniciar { display: block; margin: .8rem auto 0; }

/* ---- Etapas del tren ------------------------------------------------- */
.etapas { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.etapa-card {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem;
  background: rgba(255,255,255,.92); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.4rem 1.3rem; box-shadow: var(--sombra);
}
.etapa-card--clave { border-color: rgba(22,182,221,.5); box-shadow: 0 0 0 3px rgba(22,182,221,.1), var(--sombra); }
.etapa-card__n {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(140deg, var(--azul), var(--cian)); color: #fff;
  font-weight: 800; font-size: 1.15rem;
}
.etapa-card h3 { color: var(--azul-hondo); display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.pill { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #e2f7fd; color: var(--azul); padding: .28rem .6rem; border-radius: 999px; }
.etapa-card p { font-size: .94rem; margin-bottom: .5rem; }
.etapa-card__q  { color: var(--tinta-2); }
.etapa-card__q b  { color: var(--si); }
.etapa-card__n2 { color: var(--tinta-2); }
.etapa-card__n2 b { color: var(--no); }
.etapa-card__m  { font-size: .86rem !important; color: var(--gris); margin: 0 !important; }
.etapa-card__m b { color: var(--tinta-2); }

/* ---- Comparativa ----------------------------------------------------- */
.vs { display: grid; gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 880px) { .vs { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.vs__col { background: rgba(255,255,255,.94); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 1.6rem 1.4rem; box-shadow: var(--sombra); }
.vs__cab { border-bottom: 2px solid var(--linea); padding-bottom: .9rem; margin-bottom: 1.1rem; }
.vs__cab h3 { margin: 0 0 .2rem; color: var(--azul-hondo); }
.vs__cab p { margin: 0; font-size: .87rem; color: var(--gris); }
.vs__sub { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); display: block; }
/* Diagramas de mecanismo.
 * Los dos son estructuralmente idénticos —mismo tubo, mismos iones ámbar
 * entrando— para que la única diferencia visible sea la que importa: en la
 * resina los iones se quedan adentro; con el IPS salen igual, pero pasan por en
 * medio del tubo sin tocar la pared. Una foto del tanque y otra del aparato no
 * habrían explicado nada de eso. */
.mec { margin: 0 0 1.3rem; }
.mec svg {
  display: block; width: 100%; height: auto;
  background: #eef8fc; border-radius: 14px; padding: .5rem 0;
}
.mec figcaption { margin-top: .65rem; font-size: .88rem; line-height: 1.45; color: var(--tinta-2); }
.mec figcaption b { color: var(--azul-hondo); }

.mec__tubo      { fill: none; stroke: #d3e7f0; stroke-width: 24; stroke-linecap: round; }
.mec__caja      { fill: rgba(255,255,255,.92); stroke: var(--azul); stroke-width: 2.4; }
.mec__perla     { fill: #dcf1fa; stroke: var(--azul); stroke-width: 1.5; }
/* El mineral del sarro va café en los dos diagramas, y es la clave de lectura:
   del lado de la resina desaparece a la salida; del lado del IPS sale del mismo
   color pero en partículas chicas. Mismo color = mismo mineral. */
.mec__sarro     { fill: #a06a35; }
.mec__limpia    { fill: var(--cian); }
.mec__accion    { font: 700 12.5px var(--tipo); fill: var(--azul); text-anchor: middle; letter-spacing: .12em; }
.mec__cab       { font: 700 12px var(--tipo); fill: var(--azul-hondo); letter-spacing: .07em; }
.mec__cab--fin  { text-anchor: end; }
.mec__sub       { font: 500 12px var(--tipo); fill: var(--gris); }
.mec__sub--fin  { text-anchor: end; }
.mec__electrodo { fill: none; stroke: var(--cian); stroke-width: 3.4; stroke-linecap: round; }
.mec__giro      { fill: none; stroke: var(--cian); stroke-width: 2.4; stroke-dasharray: 7 9; opacity: .8; }
.mec__pared     { fill: none; stroke: #b9d6e4; stroke-width: 3; stroke-linecap: round; }

/* Columna oscura: las dos tecnologías se leen como un enfrentamiento, no como
   dos tarjetas iguales una al lado de la otra. */
.vs__col--hondo {
  background: linear-gradient(165deg, #0e3d63 0%, #07293f 100%);
  border-color: rgba(255,255,255,.13);
  color: rgba(255,255,255,.82);
  box-shadow: var(--sombra-alta);
}
.vs__col--hondo h3 { color: #fff; }
.vs__col--hondo .vs__cab { border-bottom-color: rgba(255,255,255,.16); }
.vs__col--hondo .vs__cab p, .vs__col--hondo .vs__sub { color: rgba(255,255,255,.52); }
.vs__col--hondo .vs__dl dt { color: rgba(255,255,255,.5); }
.vs__col--hondo .vs__dl dd { color: rgba(255,255,255,.8); }
.vs__col--hondo .vs__dl dd.si { color: #5fe0a6; }
.vs__col--hondo .vs__dl dd.no { color: #ffa184; }
.vs__col--hondo .vs__cuando { border-top-color: rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.vs__col--hondo .vs__cuando b { color: #fff; }
.vs__col--hondo .mec svg { background: rgba(255,255,255,.06); }
.vs__col--hondo .mec figcaption { color: rgba(255,255,255,.74); }
.vs__col--hondo .mec figcaption b { color: #fff; }
.vs__col--hondo .mec__tubo { stroke: rgba(255,255,255,.15); }
.vs__col--hondo .mec__caja { fill: rgba(255,255,255,.05); stroke: var(--cian-claro); }
.vs__col--hondo .mec__accion { fill: var(--cian-claro); }
.vs__col--hondo .mec__cab { fill: #fff; }
.vs__col--hondo .mec__sub { fill: rgba(255,255,255,.6); }
/* Sobre azul oscuro el café se apaga: se sube el tono para que siga leyéndose
   como el mismo mineral que en la tarjeta clara. */
.vs__col--hondo .mec__sarro { fill: #d99a55; }
.vs__col--hondo .mec__pared { stroke: rgba(255,255,255,.28); }
.vs__col--hondo .mec__electrodo,
.vs__col--hondo .mec__giro { stroke: var(--cian-claro); }

.vs__dl { margin: 0 0 1.1rem; }
.vs__dl dt { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); margin-top: .95rem; }
.vs__dl dd { margin: .2rem 0 0; font-size: .94rem; color: var(--tinta-2); }
.vs__dl dd.si { color: var(--si); font-weight: 600; }
.vs__dl dd.no { color: var(--no); font-weight: 600; }
.vs__cuando { font-size: .94rem; color: var(--tinta-2); border-top: 1px solid var(--linea); padding-top: 1rem; margin: 0; }
.vs__cuando b { color: var(--azul-hondo); }

/* ---- Poro y tabla ---------------------------------------------------- */
.poro { margin: 2.4rem 0 2rem; display: grid; gap: .9rem; }
.poro__fila { display: grid; grid-template-columns: 1fr; gap: .35rem; }
@media (min-width: 620px) { .poro__fila { grid-template-columns: 200px 1fr; align-items: center; gap: 1.1rem; } }
.poro__et b { display: block; font-size: .95rem; color: var(--azul-hondo); }
.poro__et i { font-style: normal; font-size: .84rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.poro__barra { height: 16px; background: rgba(255,255,255,.8); border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.poro__llena { display: block; height: 100%; border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.7,.3,1); width: 0; }
.poro__llena--uf { width: 100%; }
.poro__llena--oi { width: 6%; }
.js-ok .poro__llena { width: 0; }
.js-ok .rv--visible .poro__llena--uf { width: 100%; }
.js-ok .rv--visible .poro__llena--oi { width: 6%; }
.poro__llena--uf { background: linear-gradient(90deg, #b79a68, #d8b98a); }
.poro__llena--oi { background: linear-gradient(90deg, var(--azul), var(--cian)); }
.poro__nota { font-size: .88rem; color: var(--gris); margin: .3rem 0 0; }

.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--linea); background: rgba(255,255,255,.94); }
.tabla { width: 100%; border-collapse: collapse; min-width: 460px; font-size: .93rem; }
.tabla th, .tabla td { padding: .78rem 1rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla thead th { background: #eef8fc; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--azul-hondo); }
.tabla tbody th { font-weight: 600; color: var(--tinta); }
.tabla td { text-align: center; font-weight: 700; }
.tabla td.si { color: var(--si); }
.tabla td.no { color: var(--no); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }

/* ---- Línea de tiempo ------------------------------------------------- */
.linea { list-style: none; margin: 2.4rem 0 0; padding: 0 0 0 2rem; position: relative; counter-reset: paso; }
.linea::before { content: ""; position: absolute; left: 7px; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(180deg, var(--azul), var(--cian)); border-radius: 2px; }
.linea__p { position: relative; margin-bottom: 1.9rem; counter-increment: paso; }
.linea__p::before {
  content: counter(paso); position: absolute; left: -2rem; top: 0;
  transform: translateX(-6px); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff;
  background: var(--azul); box-shadow: 0 0 0 4px rgba(255,255,255,.9);
}
/* Las reglas BASE van primero, siempre. Estaban después de las del paso
   destacado y con la misma especificidad, así que le ganaban: la tarjeta
   quedaba azul marino con texto azul marino encima, ilegible en el celular.
   Es el paso donde vive la garantía del negocio. */
.linea__p h3 { color: var(--azul-hondo); margin-bottom: .3rem; }
.linea__p p { font-size: .95rem; color: var(--tinta-2); margin: 0; }

/* La medición entregada por escrito ES la garantía. En una lista de cinco
   pasos iguales se leía como uno más; aquí pesa lo que le toca. */
.linea__p--clave {
  background: linear-gradient(165deg, #0e3d63 0%, #07293f 100%);
  border-radius: var(--r-lg); padding: 1.4rem 1.5rem;
  margin-left: -.6rem; box-shadow: var(--sombra-alta);
}
.linea__p--clave::before {
  background: var(--cian); left: -1.4rem;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 7px rgba(22,182,221,.28);
}
.linea__p--clave h3 { color: #fff; }
.linea__p--clave p { color: rgba(255,255,255,.88); }
.linea__p--clave p b { color: var(--cian-claro); }
.linea__p--clave p + p { margin-top: .8rem; }

/* ---- FAQ ------------------------------------------------------------- */
.faq { margin-top: 2.2rem; display: grid; gap: .7rem; }
.faq__i { background: rgba(255,255,255,.94); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.faq__i summary {
  cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.2rem;
  font-weight: 700; color: var(--azul-hondo); position: relative; font-size: 1rem;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; border-right: 2.4px solid var(--azul); border-bottom: 2.4px solid var(--azul);
  transform: rotate(45deg); transition: transform .25s;
}
.faq__i[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.faq__i[open] { border-color: rgba(22,182,221,.5); }
.faq__c { padding: 0 1.2rem 1.2rem; }
.faq__c p { font-size: .95rem; color: var(--tinta-2); margin-bottom: .7rem; }
.faq__c p:last-child { margin-bottom: 0; }

/* ---- Cierre unificado ---- */
.cta__tel { margin: 1.1rem 0 0; font-size: .95rem; color: rgba(255,255,255,.78); }
.cta__tel a { color: #fff; font-weight: 700; }

.zona { margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.16); }
.zona__t {
  margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--cian-claro);
}
.sec--cta .chips li {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff;
}

/* ---- Chips ----------------------------------------------------------- */
.chips { list-style: none; margin: 1.8rem 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.chips li { background: rgba(255,255,255,.95); border: 1px solid var(--linea); border-radius: 999px; padding: .5rem 1.05rem; font-size: .9rem; font-weight: 600; color: var(--azul-hondo); }

/* ---- Pie ------------------------------------------------------------- */
.pie { background: var(--azul-hondo); color: rgba(255,255,255,.76); padding: 3rem 0 2rem; }
.pie__wrap { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .pie__wrap { grid-template-columns: 1.4fr 1fr; align-items: start; } }
/* La versión sobre fondo oscuro trae el navy #062c4a horneado, que es
   exactamente --azul-hondo, o sea el fondo del pie: se funde sin borde. */
.pie__logo { display: block; height: 40px; width: auto; margin-bottom: .9rem; }
.pie__txt { font-size: .9rem; max-width: 44ch; margin: 0; }
.pie__links { display: grid; gap: .5rem; }
.pie__links a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .92rem; }
.pie__links a:hover { color: #fff; text-decoration: underline; }
.pie__legal { max-width: 1180px; margin: 2.2rem auto 0; padding: 1.4rem 1.15rem 0; border-top: 1px solid rgba(255,255,255,.13); font-size: .8rem; color: rgba(255,255,255,.55); }

/* ---- WhatsApp flotante ----------------------------------------------- */
.wa-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--verde-wa); display: grid; place-items: center;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.75);
  transition: transform .25s;
}
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
.wa-flotante:hover { transform: scale(1.07); }
@supports (padding: env(safe-area-inset-bottom)) {
  .wa-flotante { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ---- Revelado al entrar ---------------------------------------------- */
/* Solo bajo .js-ok, que pone un script en línea del <head> y que se retira
   solo si main.js no avisa en 4 s. Sin esa guarda, cualquier fallo del script
   dejaba 70 elementos en opacity:0 y la página en blanco. */
.js-ok .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js-ok .rv--visible { opacity: 1; transform: none; }

/* ---- Movimiento reducido --------------------------------------------
   Se apaga TODO: olas, burbujas, flujo del diagrama, revelados y el snap.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .burbujas { display: none; }
  .js-ok .rv { opacity: 1; transform: none; }
  .poro__llena--uf { width: 100%; }
  .poro__llena--oi { width: 6%; }
}