/* ══ AQORA · landing ══
   Se apoya en sitio.css. El color de producto (--aqora) identifica —marca, iconos,
   acentos de sección— y nunca sustituye a los colores de estado: verde, ámbar y
   rojo siguen significando lo mismo que en todo RealControl.
   ══ */

:root,.aq{--aqora-fuerte:#056B75;--aqora-soft:#E7F6F7;--aqora-line:#B9DEE2}
.aq .eyebrow{color:var(--aqora-fuerte)}
.aq .ink .eyebrow,.aq .aq-hero .eyebrow{color:var(--aqora-claro)}
.aq .lista .lm{background:var(--aqora-soft);border-color:var(--aqora-line);color:var(--aqora-fuerte)}
.aq .ink .lista .lm{background:rgba(92,196,205,.08);border-color:rgba(92,196,205,.25);color:var(--aqora-claro)}
.aq .hero-proof .ico{color:var(--aqora-claro)}

/* ── La acción: el aqua vivo del producto ────────────────────────────────────────────────────────────────────────────────────
   El dorado es de la marca RealControl; en AQORA lo primario («Solicitar demo» y todo CTA principal) va en el AQUA VIVO del producto: el mismo matiz
   que el énfasis del texto sobre el agua, pero sólido y saturado, para que se vea a TODAS las profundidades sin chocar con el turquesa (un azul
   puro, probado antes, desentonaba). El texto sobre él es la tinta (≥ 7:1). Tokens propios: acción, su par de hover y de activo, y su «sobre».
   El dorado vuelve solo en la estación de RealControl (.btn-marca). */
:root,.aq{--aqora-accion:#25D4E4;--aqora-accion-hover:#5BE4F0;--aqora-accion-activo:#19B1BF;--aqora-sobre-accion:var(--ink)}
.aq .btn-gold,.aq .form .btn-dark{background:var(--aqora-accion);color:var(--aqora-sobre-accion)}
.aq .btn-gold:hover,.aq .form .btn-dark:hover{background:var(--aqora-accion-hover)}
.aq .btn-gold:active,.aq .form .btn-dark:active{background:var(--aqora-accion-activo)}
.aq .btn-line-ink{border-color:color-mix(in srgb,var(--aqora-claro) 50%,transparent)}
.aq .btn-line-ink:hover{border-color:var(--aqora-claro);background:color-mix(in srgb,var(--aqora-claro) 10%,transparent)}
.aq .btn-marca{background:var(--marca);color:var(--ink)}
.aq .btn-marca:hover{background:var(--marca-claro)}
.aq :focus-visible{outline-color:var(--aqora-claro)}
.aq .nav a::after{background:var(--aqora-claro)}
/* El icono de cada ficha de la compuerta: «.gnode span» (gris de lectura) le ganaba por especificidad y el trazo salía casi blanco sobre la ficha clara. */
.gnode .gi2{color:var(--aqora-fuerte)}
/* El pie «Ejemplo» de las ventanas: una línea discreta, para no restarle lugar a la ventana. */
.vg-f.ejemplo{padding:6px 16px;font-size:11.5px;line-height:1.35;color:var(--text-3)}

/* ── Marca: AQORA se nombra con texto, y RealControl lo firma ─ */
.brand-aq{gap:12px;align-items:center}
.brand-aq .aqw{font:700 21px/1 var(--f-display);letter-spacing:.07em}
.brand-aq .by{display:inline-flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid var(--ink-line);
  font:500 12.5px/1 var(--f-sans);letter-spacing:0;color:var(--on-ink-3)}
.brand-aq .by .ico{width:15px;height:15px;stroke-width:2.2;color:var(--on-ink-2)}

/* ── Hero ────────────────────────────────────────────────── */
.aq-hero{position:relative;overflow:hidden;color:var(--on-ink);
  padding:calc(var(--top-h) + clamp(48px,7vw,96px)) 0 clamp(72px,9vw,120px);
  background:
    radial-gradient(ellipse 55% 60% at 88% 18%,rgba(7,140,153,.26),transparent 70%),
    radial-gradient(ellipse 45% 55% at 0% 100%,rgba(7,140,153,.12),transparent 70%),
    var(--ink)}
.aq-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 30%,#000 20%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 70% at 30% 30%,#000 20%,transparent 72%)}
.aq-hero .wrap{position:relative;z-index:1}
/* La forma tradicional: la luz del agua, QUIETA, sobre el hero (en la moderna es la capa .tn-rayos, animada). Solo tokens y sin movimiento. */
.aq-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 164deg at 62% -14%,transparent 0deg 3deg,
    color-mix(in srgb,var(--aqora-claro) 11%,transparent) 5deg,transparent 9deg 13deg,
    color-mix(in srgb,var(--aqora-claro) 7%,transparent) 15deg,transparent 19deg 24deg,
    color-mix(in srgb,var(--aqora-claro) 9%,transparent) 27deg,transparent 31deg 36deg,
    color-mix(in srgb,var(--aqora-claro) 6%,transparent) 38deg,transparent 43deg);
  -webkit-mask-image:linear-gradient(to bottom,var(--ink) 0%,color-mix(in srgb,var(--ink) 55%,transparent) 45%,transparent 90%);
          mask-image:linear-gradient(to bottom,var(--ink) 0%,color-mix(in srgb,var(--ink) 55%,transparent) 45%,transparent 90%)}
/* alineado ARRIBA: el bloque de texto y la primera ventana comparten la línea superior (centrados en vertical, el texto arrancaba a ~430 px y la tarjeta a ~136) */
.aq-hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(40px,6vw,88px);align-items:start}
.aq-hero h1{font:600 clamp(42px,5.6vw,78px)/1 var(--f-display);letter-spacing:-.042em;margin-top:24px;text-wrap:balance}
.aq-hero h1 em{font-style:normal;color:var(--aqora-claro)}
/* El símbolo de la marca junto al titular (el mismo gesto del inicio de RealControl: las cuatro escuadras se cierran, el punto entra, el halo late cada
   4,2 s y todo se agranda y se apaga al avanzar). En AQORA, en los azules del agua y con las escuadras redondeadas. Solo en la forma moderna. */
/* El titular se detiene en 13 em para dejar a la derecha el hueco del símbolo (como el .hero-t de 14,4 em del inicio); el símbolo baja un poco para quedar
   por debajo del medidor de profundidad («Sala n de N») y a la izquierda del riel. */
.aq-hero h1{position:relative;width:fit-content;max-width:min(100%,13em)}
html.tunel .aq .pulso{transform:translate(-40%,-20%) scale(var(--ps,1))}
@media (max-width:1200px){html.tunel .aq .pulso{transform:translate(-58%,-20%) scale(var(--ps,1))}}
.aq-hero h1 .hero-t{position:relative;z-index:1}
.aq .pulso::before{background:radial-gradient(circle,color-mix(in srgb,var(--aqora) 34%,transparent),transparent 62%)}
.aq .pulso-e{stroke:var(--aqora-claro);opacity:.75}
.aq .pulso-p{fill:var(--aqora-accion)}
.aq .pulso-h{stroke:var(--aqora-claro)}
html[data-modo="tradicional"] .aq .pulso{display:none}
.aq-hero .lead{color:var(--on-ink-2);margin-top:26px}
.aq-hero .lead b{color:var(--on-ink);font-weight:500}

.gate-card{box-shadow:var(--shadow-float);border-color:rgba(255,255,255,.08)}
/* Las dos ventanas del inicio: la faena, más corta (las ocho condiciones en dos columnas, sin el vacío del medio), y las estadísticas. En la tradicional van
   apiladas; en el recorrido, una al lado de la otra (una sola estación). */
.hero-ventanas{display:flex;flex-direction:column;gap:16px;min-width:0}
.hero-ventanas .gate-card{max-width:none}
.gate-card .gate-body .conds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.gate-card .gate-body .cond{padding:7px 0;gap:9px;grid-template-columns:20px minmax(0,1fr)}
.gate-card .gate-body .cond .g{display:none}
.gate-card .gate-body .cond b{font-size:13.5px}
.gate-card .gate-body .cond span{font-size:12px}
.gate-card .gate-kpis div{padding:8px 14px}
.gate-card .fv{margin:6px 16px 14px;padding:11px 14px}
.gate-card .fv .gi{width:34px;height:34px}
.gate-card .fv .gi .ico{width:17px;height:17px}
.gate-card .fv b{font-size:15.5px}
.gate-card .vg-h{padding:12px 18px}
/* Naves, Registro y Equipos: texto y ventana en UNA estación — la ventana centrada en vertical respecto de la columna de texto (mismo margen arriba y abajo) y en dos columnas */
#naves .split,#registro .split,#equipos .split{align-items:center}
.vg-2c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;align-items:start}
.vg-2c .col{min-width:0}
.vg-2c .col-ancho{grid-column:1 / -1}
.vg-2c .cond{padding:8px 0}
.vg-2c .emb{padding:7px 0}
.vg.nave .kpis div,.vg.registro .kpis div{padding:8px 14px}
/* Las dos ventanas del primer recorrido: el mismo borde superior, el mismo alto y el mismo ancho; el pie «Ejemplo» queda a la misma línea */
.hero-ventanas .vg{display:flex;flex-direction:column}
.hero-ventanas .vg > .vg-f{margin-top:auto}
.est .est-barras{flex:1}
/* Estadísticas de ejemplo: un donut con su total al centro, la leyenda con valores (no solo color) y las causales en barras horizontales */
.est .est-b{display:flex;align-items:center;gap:20px;padding:16px 20px 10px}
.est-donut{position:relative;width:124px;height:124px;flex:none}
.est-donut svg{width:100%;height:100%}
.est-donut .seg{stroke-linecap:butt}
.est-donut .seg.go{stroke:var(--fig-ok,var(--ok))}
.est-donut .seg.adv{stroke:var(--fig-warn,var(--warn))}
.est-donut .seg.nogo{stroke:var(--fig-crit,var(--crit))}
.est-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.est-c b{font:600 26px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text)}
.est-c span{font-size:11.5px;color:var(--text-3);margin-top:3px}
.est-leyenda{display:grid;gap:9px;flex:1;min-width:0}
.est-leyenda li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 40px;gap:9px;align-items:center;font-size:13px}
.est-leyenda .k{width:10px;height:10px;border-radius:3px}
.est-leyenda .k.go{background:var(--fig-ok,var(--ok))}
.est-leyenda .k.adv{background:var(--fig-warn,var(--warn))}
.est-leyenda .k.nogo{background:var(--fig-crit,var(--crit))}
.est-leyenda b{font:600 13.5px var(--f-mono);font-variant-numeric:tabular-nums}
.est-leyenda em{font:normal 12px var(--f-mono);color:var(--text-3);text-align:right}
.est .est-barras{padding:6px 20px 12px;border-top:1px solid var(--line)}
.est-barras .mini-k{display:block;margin:10px 0 8px}
.est-barras ul{display:grid;gap:9px}
.est-barras li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;font-size:12.5px}
.est-barras .eb-v{font:600 13px var(--f-mono);font-variant-numeric:tabular-nums}
.est-barras li i{grid-column:1 / -1;display:block;height:7px;border-radius:4px;background:var(--surface-3);position:relative;overflow:hidden}
.est-barras li i::after{content:"";position:absolute;inset:0;width:var(--w,50%);border-radius:4px;background:var(--fig-crit,var(--crit));transform-origin:left}
.est-n{display:flex;align-items:baseline;gap:9px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.est-n b{font:600 18px var(--f-mono);font-variant-numeric:tabular-nums}
.est-n span{font-size:12.5px;color:var(--text-3)}
/* entrada discreta: el donut se dibuja y las barras crecen una vez (con la ventana a la vista; en el recorrido, al llegar la sala) */
/* Pastel (pedido del dueño, 2026-10-12): «Faenas de la semana» y «Ciclos de buceo» con los tonos pastel de la maqueta en vez de los de estado plenos.
   El estado sigue diciéndose con texto y número (GO · GO con advertencias · NO-GO; jornada · aviso · descanso), no solo con el color. */
:root,.aq{--pa-ok-fuerte:#4FB487}      /* los tres pastel base (--pa-ok · --pa-warn · --pa-crit) viven en sitio.css */
/* !important: el programa de tonos de la moderna (tono.css) redefine --fig-warn más oscuro para el contraste de las figuras; aquí el estado va en texto y número */
.aq .est{--fig-ok:var(--pa-ok)!important;--fig-warn:var(--pa-warn)!important;--fig-crit:var(--pa-crit)!important}
.aq .ciclo-bar .t-act{background:var(--pa-ok)}
.aq .ciclo-bar .t-avi{background:var(--pa-warn)}
.aq .ciclo-l .l-act::before{background:var(--pa-ok)}
.aq .ciclo-l .l-avi::before{background:var(--pa-warn)}
.aq .ciclo-dias .pas{background:var(--pa-ok);opacity:.8}
.aq .ciclo-dias .hoy{background:var(--pa-ok-fuerte)}
.aq .ciclo-dias .avi{background:color-mix(in srgb,var(--pa-warn) 35%,transparent);border-color:var(--pa-warn)}
.aq .ciclo-dias .pen{background:color-mix(in srgb,var(--pa-ok) 22%,transparent);border-color:var(--pa-ok)}
@keyframes est-seg{from{stroke-dasharray:0 289}}
@keyframes est-barra{from{transform:scaleX(0)}}
/* Pedido del dueño (2026-10-12): la animación de «Faenas de la semana» dura unos 2,5 s (antes ≈ 0,9 s): el anillo se dibuja en 2,5 s y las cuatro barras
   entran escalonadas, cada una en 2 s, para terminar juntas a los 2,5 s. La de la faena FB no cambia. */
.est.is-in .est-donut .seg,.est.rc-sonar .est-donut .seg{animation:est-seg 2.5s cubic-bezier(.4,0,.2,1) both}
.est.is-in .est-barras li i::after,.est.rc-sonar .est-barras li i::after{animation:est-barra 2s cubic-bezier(.4,0,.2,1) both}
.est .est-barras li:nth-child(2) i::after{animation-delay:.1s!important}
.est .est-barras li:nth-child(3) i::after{animation-delay:.2s!important}
.est .est-barras li:nth-child(4) i::after{animation-delay:.5s!important}
.est.rc-sonar .est-donut .seg{animation-name:est-seg-b}
.est.rc-sonar .est-barras li i::after{animation-name:est-barra-b}
@keyframes est-seg-b{from{stroke-dasharray:0 289}}
@keyframes est-barra-b{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.est .seg,.est .est-barras li i::after{animation:none!important}}
.gate-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--surface-2)}
.gate-kpis div{padding:10px 16px;border-right:1px solid var(--line)}
.gate-kpis div:last-child{border-right:0}
.gate-kpis b{display:block;font:600 16px/1.2 var(--f-mono);letter-spacing:-.02em}
.gate-kpis span{font-size:11.5px;color:var(--text-3)}
.gate-body{position:relative;padding:4px 20px 2px}
.gate-body .cond{padding:8px 0}

/* Una condición todavía sin evaluar */
.cond .m{position:relative}
.cond .m,.cond b,.cond span{transition:color .35s,background-color .35s,border-color .35s,opacity .35s}
.cond.pend .m{color:var(--text-3);background:var(--surface-2);border-color:var(--line)}
.cond.pend .m .ico{opacity:0}
.cond.pend .m::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.cond.pend b{color:var(--text-2)}
.cond.pend span{color:var(--text-3)!important;opacity:.5}

.fv{margin:8px 20px 20px;padding:16px 18px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fv .gi{width:42px;height:42px}
.fv .gi .ico{width:21px;height:21px}
.fv b{font-size:clamp(17px,1.7vw,20px)}
.fv span{font-size:13px}
.js .fv:not(.on){opacity:0;transform:translateY(10px)}

/* ── Hoy ─────────────────────────────────────────────────── */
.antes{padding:clamp(72px,9vw,128px) 0}
.antes-g{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.antes-g .eyebrow{margin-top:14px}
.antes-l{display:flex;flex-direction:column;gap:6px;font:600 clamp(26px,3.6vw,48px)/1.12 var(--f-display);letter-spacing:-.032em}
.antes-l span{color:var(--text-3)}
.antes-l strong{font-weight:600;color:var(--text);margin-top:18px;text-wrap:balance}
.antes-l strong em{font-style:normal;color:var(--aqora-fuerte)}

/* ── La compuerta ────────────────────────────────────────── */
.gate{display:grid;grid-template-columns:minmax(0,320px) minmax(48px,1fr) minmax(0,470px);align-items:stretch}
.gate-in{display:flex;flex-direction:column}
.gw{flex:1;display:flex;padding:5px 0}
.gnode{flex:1;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.gi2{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--aqora-soft);border:1px solid var(--aqora-line);color:var(--aqora-fuerte)}
.gi2 .ico{width:17px;height:17px}
.gnode b{display:block;font-weight:500;font-size:15px;line-height:1.25}
.gnode span{font-size:12.5px;color:var(--text-3)}
.gate-lines,.reuso-lines{position:relative}
.gate-lines svg,.reuso-lines svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gate-lines path,.reuso-lines path{fill:none;stroke:var(--line-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.gate-lines path.f,.reuso-lines path.f{stroke:var(--aqora);stroke-dasharray:3 11;animation:flujo 1.6s linear infinite}
@keyframes flujo{to{stroke-dashoffset:-28}}
.gate-out{align-self:center}
.gate-out .vg-b{padding:2px 20px}
.causal{padding:14px 0;border-bottom:1px solid var(--line)}
.causal:last-child{border-bottom:0}
.causal .ct{display:flex;align-items:center;gap:8px;font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.causal .ct .ico{width:13px;height:13px;color:var(--crit);stroke-width:2.6}
.causal > b{display:block;font-weight:500;font-size:14.5px;margin-top:5px}
.causal .cm{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:5px;font-size:12.5px;color:var(--text-3)}
.causal .cm .res{color:var(--text-2)}
.causal .nx{display:inline-flex;align-items:center;gap:5px;color:var(--crit);font-weight:500}
.causal .nx .ico{width:12px;height:12px;stroke-width:2.4}

/* ── Buceo ───────────────────────────────────────────────── */
.cat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--surface-2)}
.cat-row div{padding:11px 16px;border-right:1px solid var(--line)}
.cat-row div:last-child{border-right:0}
.cat-row span{display:block;font:500 10px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.cat-row b{font-weight:500;font-size:14px}
.tbl.reglas-b{min-width:500px}
.reglas-b td{vertical-align:middle}
.reglas-b td:first-child{font-weight:400;color:var(--text)}
.reglas-b .nx{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font:500 10.5px var(--f-mono);color:var(--crit);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.reglas-b .nx .ico{width:12px;height:12px;stroke-width:2.4}

/* ── Naves ───────────────────────────────────────────────── */
.aq .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.aq .kpis div{padding:12px 16px;border-right:1px solid var(--line)}
.aq .kpis div:last-child{border-right:0}
.aq .kpis b{display:block;font:600 19px/1.1 var(--f-mono);letter-spacing:-.02em}
.aq .kpis span{font-size:11.5px;color:var(--text-3)}
.aq .kpis .crit b{color:var(--crit)}
.nave .vg-b{padding:10px 20px 16px}
.mini-k.sep{display:block;margin-top:16px;margin-bottom:2px}
.cond.aviso span{color:var(--warn-tx)}
.emb{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.emb:last-child{border-bottom:0}
.emb .av{width:32px;height:32px;font-size:11px}
.emb b{display:block;font-weight:500;font-size:13.5px}
.emb span{font-size:12px;color:var(--text-3)}

/* ── Centros: el embarque en el móvil ────────────────────── */
.phone{width:100%;max-width:360px;margin:0 auto;background:#0f0f0e;border-radius:46px;padding:12px;box-shadow:var(--shadow-float);border:1px solid #2c2c2a}
.phone .scr{background:var(--bg);border-radius:35px;overflow:hidden;padding:0 16px 20px}
.ph-notch{width:96px;height:24px;border-radius:0 0 14px 14px;background:#0f0f0e;margin:0 auto 12px}
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-top .aqs{font:700 14px var(--f-display);letter-spacing:.07em}
.off{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-tx)}
.off .ico{width:13px;height:13px}
.ph-ruta{margin:16px 0 12px}
.ph-ruta b{display:block;font:600 17px/1.25 var(--f-display);letter-spacing:-.015em;margin-top:4px}
.ph-ruta .t{font-size:12px;color:var(--text-3)}
.phone .garita-v{padding:16px;gap:12px}
.phone .garita-v .gi{width:40px;height:40px}
.phone .garita-v .gi .ico{width:20px;height:20px}
.phone .garita-v b{font-size:19px}
.phone .garita-v span{font-size:12.5px}
.phone .person{margin-top:14px}
.phone .conds{margin-top:6px}
.phone .cond{grid-template-columns:22px minmax(0,1fr)}
.phone .btn{width:100%;margin-top:14px;height:46px}

/* ── Reutilización entre salmoneras ─────────────────────── */
.reuso{display:grid;grid-template-columns:minmax(0,340px) minmax(48px,1fr) minmax(0,400px);align-items:stretch;margin-top:8px}
.reuso-src{align-self:center;padding:24px}
.reuso-src .di{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);margin-bottom:16px}
.reuso-src .di .ico{width:22px;height:22px}
.reuso-src h3{font:600 20px/1.2 var(--f-display);letter-spacing:-.02em}
.reuso-src p{font-size:13.5px;color:var(--text-3);margin-top:4px}
.reuso-src .chips{margin-top:16px}
.reuso-lines path{stroke:var(--ink-line)}
.reuso-lines path.f{stroke:var(--aqora-claro)}
.reuso-dst{display:flex;flex-direction:column}
.rw{flex:1;display:flex;padding:6px 0}
.rcli{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.rcli-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rcli-h b{font:600 16px var(--f-display);letter-spacing:-.01em}
.rcli > span{font-size:12.5px;color:var(--text-3)}
.rcli .lk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.rcli .lk .ico{width:13px;height:13px}
.puntos.dos{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── Indicadores ─────────────────────────────────────────── */
.inds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ind{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 20px 24px}
.ind .gi2{margin-bottom:16px}
.ind h3{font:600 19px var(--f-display);letter-spacing:-.02em}
.ind ul{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.ind li{display:flex;gap:9px;font-size:14px;color:var(--text-2);line-height:1.45}
.ind li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aqora);margin-top:8px;flex:none}
.evitados{margin-top:14px;display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:14px;background:var(--ink);color:var(--on-ink)}
.evitados .ico{width:28px;height:28px;color:var(--aqora-claro)}
.evitados b{display:block;font:600 clamp(18px,2vw,22px)/1.3 var(--f-display);letter-spacing:-.015em}
.evitados span{display:block;font-size:14.5px;color:var(--on-ink-3);margin-top:3px}
/* «Lo que AQORA cuenta hoy»: tres tarjetas con un conteo de ejemplo, en las píldoras pastel del sitio. */
.inds.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.ind.cuenta li::before{display:none}
.ind.cuenta li{display:block}
.ind-n{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.ind-n b{font:600 44px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--text)}
.ind-n span{font-size:13.5px;color:var(--text-3)}
.ind-nota{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:13.5px;line-height:1.5;color:var(--text-2)}
/* ── RealControl, opcional: la estación oscura ───────────────────────────────────────────────────────────────────────────────
   Rompe el agua a propósito: fondo casi negro y el DORADO de la marca, que en el resto de AQORA no aparece. El pulso va DENTRO de la cápsula que
   invita (no de fondo): el núcleo de la marca y su halo de 4,2 s —el mismo latido de la intro y del ingreso—. El dorado se fija aquí con los tokens
   de la página (--rc-oro, --marca): inmune a los remapeos del túnel (que sobre el agua llevan el énfasis al aqua). */
.rc-estacion{--rc-oro:var(--marca-claro);--rc-oro-base:var(--marca)}
.aq .rc-estacion .eyebrow{color:var(--rc-oro)}
.rc-estacion .h2{font-size:clamp(30px,3.3vw,46px)}
.rc-estacion .lead{font-size:clamp(15.5px,1.25vw,17.5px);margin-top:14px}
.rc-estacion .lista{margin-top:18px;gap:10px}
.aq .rc-estacion .lista .lm{background:color-mix(in srgb,var(--rc-oro-base) 12%,transparent);border-color:color-mix(in srgb,var(--rc-oro-base) 38%,transparent);color:var(--rc-oro)}
.rc-capsula{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding:clamp(24px,3vw,36px);border-radius:34px;
  border:1px solid color-mix(in srgb,var(--rc-oro-base) 46%,transparent);
  background:color-mix(in srgb,var(--rc-oro-base) 8%,var(--ink-2));box-shadow:var(--shadow-float)}
.rc-cab{display:flex;align-items:center;gap:18px}
.rc-cab b{display:block;font:600 clamp(24px,2.4vw,32px)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--on-ink)}
.rc-cab div > span{display:block;font-size:14px;color:var(--on-ink-2);margin-top:4px}      /* solo el texto: antes tambien alcanzaba a .rc-pulso (display:block y 4 px de margen) y el logo quedaba arriba, fuera del centro de la onda */
.rc-capsula p{color:var(--on-ink-2);max-width:46ch;font-size:15.5px;line-height:1.55}
.rc-capsula small{font-size:13px;color:var(--on-ink-3)}
.rc-pulso{position:relative;flex:none;width:88px;height:88px;display:grid;place-items:center;border-radius:50%}
.rc-logo{width:46px;height:46px;stroke-width:1.5;color:var(--on-ink)}
.rc-pulso::before,.rc-pulso::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;box-sizing:border-box;transform-origin:50% 50%;
  border:1.3px solid var(--rc-oro-base);opacity:0;animation:rc-latido 4.2s cubic-bezier(.2,.6,.3,1) infinite}
.rc-pulso::after{animation-delay:-2.1s}
@keyframes rc-latido{0%{transform:scale(1);opacity:.7}70%{opacity:0}100%{transform:scale(6);opacity:0}}
.rc-pulso .rc-logo{animation:rc-respira 4.2s ease-in-out infinite}
@keyframes rc-respira{0%,100%{transform:scale(1)}8%{transform:scale(1.08)}30%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rc-pulso::before,.rc-pulso::after,.rc-pulso .rc-logo{animation:none}}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1180px){
  .inds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gate{grid-template-columns:minmax(0,270px) minmax(32px,1fr) minmax(0,420px)}
  .reuso{grid-template-columns:minmax(0,300px) minmax(32px,1fr) minmax(0,360px)}
}
@media (max-width:1020px){
  .aq-hero-g{grid-template-columns:minmax(0,1fr)}
  .gate-card{max-width:560px}
  .antes-g{grid-template-columns:minmax(0,1fr);gap:8px}
  .antes-g .eyebrow{margin-top:0}
  .gate,.reuso{grid-template-columns:minmax(0,1fr)}
  .gate-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
  .gate-lines,.reuso-lines{height:48px}
  .gate-lines svg,.reuso-lines svg{display:none}
  .gate-lines::after,.reuso-lines::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;
    background:linear-gradient(var(--aqora) 50%,transparent 0) 0 0/2px 8px}
  .reuso-src{align-self:stretch}
}
@media (max-width:760px){
  .gate-in{grid-template-columns:minmax(0,1fr)}
  .inds,.puntos.dos{grid-template-columns:minmax(0,1fr)}
  .cat-row,.aq .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-row div:nth-child(2),.aq .kpis div:nth-child(2){border-right:0}
  .cat-row div:nth-child(-n+2),.aq .kpis div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gate-kpis div{padding:10px 12px}
  /* La tabla de validaciones se apila: en 390 px la consecuencia quedaba fuera */
  .tbl.reglas-b{min-width:0}
  .reglas-b thead{display:none}
  .reglas-b tr{display:block;padding:12px 20px;border-bottom:1px solid var(--line)}
  .reglas-b tr:last-child{border-bottom:0}
  .reglas-b td{display:block;padding:0;border:0}
  .reglas-b td + td{margin-top:7px}
  .reglas-b .nx{display:flex;margin:4px 0 0}
  .evitados{flex-direction:column;align-items:flex-start}
  .brand-aq .by{font-size:11.5px;padding-left:10px}
}

/* El interruptor «Tradicional / Moderna» de las páginas de AQORA, en el azul tinta de la marca y con el celeste de AQORA en el segmento activo y el borde */
.aq .modo-sel{background:var(--aq-agua-tinta,#0B2B42);border-color:color-mix(in srgb,var(--aqora-claro) 40%,transparent)}
.aq .modo-sel button{color:var(--on-ink-2)}
.aq .modo-sel button:hover{color:var(--aqora-claro)}
.aq .modo-sel button[aria-pressed="true"]{background:var(--aqora-claro);color:var(--aq-agua-tinta,#0B2B42)}