/* ═══════════════════════════════════════════════════════════
   OPENEER v3 — "Señal"

   Se carga DESPUÉS de style.css y lo reescribe.

   EL FONDO POR DEFECTO ES EL PAPEL CLARO, igual que siempre. El
   diseño cambia en la estructura —celdas enmarcadas, riel lateral,
   titular en contorno, movimiento continuo— pero no en la paleta.

   El fondo negro existe sólo como MODO OSCURO opcional, que el
   visitante elige con el conmutador del hero y queda guardado.
   ═══════════════════════════════════════════════════════════ */

/* ── MODO CLARO: el de siempre, sin tocar ── */
:root {
  --paper:     #F4F1EB;
  --ink:       #0C0D0F;
  --accent:    #FF5A00;

  --panel:     var(--ink);        /* fondo de las secciones invertidas */
  --panel-fg:  var(--paper);

  --sec-y:     clamp(84px, 12vh, 158px);
}

/* ── MODO OSCURO ──
   No es el claro con los colores dados vuelta: las secciones que en
   claro son de tinta pasan a un panel apenas más alto, porque un
   blanco pleno en modo oscuro encandila y arruina el sentido. */
:root[data-mode="dark"] {
  --paper:     #0B0C0E;           /* el "papel" ahora es tinta */
  --ink:       #F2EFE9;           /* y la "tinta" es clara */

  --panel:     #15181C;
  --panel-fg:  #F2EFE9;

  --fg:        #F2EFE9;
  --bg:        #0B0C0E;
  --muted:     rgba(242, 239, 233, .56);
  --faint:     rgba(242, 239, 233, .3);
  --line:      rgba(242, 239, 233, .16);
  --line-soft: rgba(242, 239, 233, .08);
  --grid:      rgba(242, 239, 233, .05);
  --ghost:     rgba(242, 239, 233, .05);
}

:root[data-mode="dark"] body { background: #0B0C0E; color: #F2EFE9; }

/* Las secciones invertidas usan el panel, en los dos modos */
:root[data-mode="dark"] .sec--dark {
  --fg: var(--panel-fg);
  --bg: var(--panel);
  --muted: rgba(242, 239, 233, .56);
  --faint: rgba(242, 239, 233, .32);
  --line: rgba(242, 239, 233, .17);
  --line-soft: rgba(242, 239, 233, .09);
  --grid: rgba(242, 239, 233, .05);
  --ghost: rgba(242, 239, 233, .05);
}

html, body { transition: background-color .45s var(--ease); }

/* ═══════════ LO QUE SÍ CAMBIA: LA ESTRUCTURA ═══════════ */

/* Sin grilla de fondo: acá la estructura la dan los marcos */
.sec, .hero, .pin { background-image: none; }
.sec {
  border-top: 1px solid var(--line);
  padding-inline: 0;
}
.sec > * { padding-inline: var(--pad); }
.sec[data-section]::after { display: none; }   /* el numeral vive en el riel */

/* ── RIEL: índice fijo a la izquierda, siempre visible ──
   Reemplaza al indicador flotante. Da sensación de documento
   técnico más que de folleto. */
.rail {
  left: 0; top: 0; bottom: 0;
  width: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  border-right: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 1 !important;
  color: var(--ink) !important;
  pointer-events: none;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.rail__num { font-size: 18px; letter-spacing: -.02em; color: var(--accent); }
.rail__name {
  writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  opacity: .5; max-height: 40vh; overflow: hidden;
}
@media (max-width: 900px) { .rail { display: none; } }
@media (min-width: 901px) {
  body { padding-left: 44px; }
  .nav, .progress { left: 44px; }
}

/* ── HERO con el flujo animado ── */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
#flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero > * { position: relative; z-index: 1; }

.hero__title { font-size: clamp(32px, 6.3vw, 116px); letter-spacing: -.05em; }
/* La segunda mitad va en contorno y se rellena al pasar el mouse:
   la afirmación termina de completarse. */
.hero__title span.is-accent .line {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  transition: color .6s var(--ease);
}
.hero__title:hover span.is-accent .line { color: var(--accent); }

/* ── La unidad visual pasa a ser la celda enmarcada ── */
.leaks, .install, .faq { border: 1px solid var(--line); border-bottom: 0; }
.leaks li, .install li, .faq details { border-bottom: 1px solid var(--line); }
.leaks li, .install li { padding-inline: clamp(14px, 2vw, 28px); }
.faq summary, .faq p { padding-inline: clamp(14px, 2vw, 28px); }
.leaks li:hover, .install li:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }

.why { border: 1px solid var(--line); background: var(--line); }
.why article { background: var(--bg); }
.why article:hover { background: var(--accent); color: #fff; }
.why article:hover p, .why article:hover .why__x { color: rgba(255, 255, 255, .86); }

.engine__card, .steps li {
  border: 1px solid var(--line);
  padding: clamp(18px, 2vw, 30px);
}

/* Growth en naranja pleno, en vez de tinta */
.tier--featured { background: var(--accent); border-color: var(--accent); color: #fff; }
.tier--featured .tier__name { color: rgba(255, 255, 255, .8); }
.tier--featured li::before, .tier--featured a { color: #fff; }
.tier--featured li { border-bottom-color: rgba(255, 255, 255, .26); }
.tier--featured .tier__flag { background: var(--ink); color: var(--paper); }

/* ═══════════ MOVIMIENTO CONTINUO ═══════════ */

.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 55s; }

/* Barrido lento sobre las cifras del hero */
.stats b {
  background: linear-gradient(100deg,
      var(--fg) 0 38%, var(--accent) 46%, var(--fg) 54% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: barrido 7s var(--ease-io) infinite;
}
.stats li:nth-child(2) b { animation-delay: .7s; }
.stats li:nth-child(3) b { animation-delay: 1.4s; }
.stats li:nth-child(4) b { animation-delay: 2.1s; }
@keyframes barrido {
  0%, 62% { background-position: 100% 0; }
  92%, 100% { background-position: 0 0; }
}

/* Latido en el borde de la tarjeta destacada */
.tier--featured { position: relative; overflow: hidden; }
.tier--featured::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translateX(-100%);
  animation: barra 4s linear infinite;
}
@keyframes barra { to { transform: translateX(100%); } }

/* ═══════════ CONMUTADOR DE MODO ═══════════ */
.mode {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--fg);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.mode:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.mode__ico { position: relative; width: 19px; height: 19px; flex: none; color: var(--accent); }
.mode__ico svg {
  position: absolute; inset: 0; width: 19px; height: 19px;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.mode__sol  { opacity: 1; transform: none; }
.mode__luna { opacity: 0; transform: rotate(-70deg) scale(.6); }
:root[data-mode="dark"] .mode__sol  { opacity: 0; transform: rotate(70deg) scale(.6); }
:root[data-mode="dark"] .mode__luna { opacity: 1; transform: none; }
.mode__txt {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}

.hero__top { gap: 14px; }
.hero__acciones { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .mode { padding: 8px 14px 8px 11px; }
  .mode__txt { font-size: 10px; letter-spacing: .12em; }
}

/* ── Nav: el tema lo decide el JS por luminancia del fondo ── */
.nav[data-theme="dark"], .nav[data-theme="accent"] { --nav-fg: #F2EFE9; }
.nav[data-theme="light"] { --nav-fg: #0C0D0F; }
.nav.is-stuck[data-theme="light"]  { background-color: color-mix(in srgb, var(--paper) 80%, transparent); }
.nav.is-stuck[data-theme="dark"]   { background-color: rgba(12, 13, 15, .76); }
.nav.is-stuck[data-theme="accent"] { background-color: rgba(255, 90, 0, .8); }
.nav[data-theme="light"] .nav__logo--d { opacity: 1; }
.nav[data-theme="light"] .nav__logo--l { opacity: 0; }
.nav[data-theme="dark"] .nav__logo--d,
.nav[data-theme="accent"] .nav__logo--d { opacity: 0; }
.nav[data-theme="dark"] .nav__logo--l,
.nav[data-theme="accent"] .nav__logo--l { opacity: 1; }

/* El botón de tinta se volvería invisible sobre su mismo color */
.btn--ink { background: var(--fg); color: var(--bg); }
.btn--ink:hover { background: var(--accent); color: #fff; }

.foot { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .stats b, .tier--featured::after { animation: none; }
  .stats b { color: var(--fg); background: none; -webkit-text-fill-color: currentColor; }
  html, body { transition: none; }
}

/* ═══════════ HERO EN DOS TONOS ═══════════
   Reemplaza al hero anterior. Colores fijos a propósito: la portada es
   naranja y negra en los dos modos; el modo claro/oscuro empieza debajo. */
.duo-pin { position: relative; height: 210svh; }
.duo {
  position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--accent);
  --tinta: #0C0D0F; --papel: #F4F1EB;
  --bg: #0C0D0F;                       /* el nav lee esto fuera del tramo naranja */
  /* costura: --p la mueve el scroll, --q la entrada, --b respira, --m sigue al mouse */
  --p: 0; --q: 0; --b: 0; --m: 0;
  --pp: calc(var(--p) + var(--q) + var(--b) + var(--m));
  --yl: 70%; --yr: 42%; --k: 76%;      /* el script las recalcula sobre el logotipo */
}
.duo-layer { position: absolute; inset: 0; }
.duo-o {
  background: var(--accent); color: var(--tinta);
  --word: #fff; --alt: #fff;
  --fg: var(--tinta); --muted: rgba(12, 13, 15, .68); --line: rgba(12, 13, 15, .3);
}
.duo-k {
  background: var(--tinta); color: var(--papel);
  --word: var(--accent); --alt: var(--accent);
  --fg: var(--papel); --muted: rgba(244, 241, 235, .6); --line: rgba(244, 241, 235, .26);
  clip-path: polygon(0 calc(var(--yl) - var(--pp) * var(--k)), 100% calc(var(--yr) - var(--pp) * var(--k)), 100% 100%, 0 100%);
  will-change: clip-path;
}
.duo-hc {
  height: 100%; max-width: calc(1600px + 2 * var(--pad)); margin-inline: auto;
  padding: clamp(66px, 9.5svh, 92px) var(--pad) clamp(16px, 3svh, 34px);
  container-type: inline-size;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.duo-top { display: flex; align-items: center; min-height: 42px; }
.duo-h1 {
  margin-top: clamp(14px, 2svh, 24px);
  font-family: var(--body); font-weight: 800; text-transform: none;
  letter-spacing: -.05em; line-height: .98;
  font-size: clamp(34px, 9.5svh, 98px);
  font-size: clamp(34px, min(6.6cqw, 9.5svh), 98px);
  text-wrap: balance;
}
/* cada línea sube desde abajo de su propia caja */
.duo-ln { display: block; overflow: hidden; padding: .07em 0 .13em; margin: -.07em 0 -.13em; }
.duo-lni { display: block; will-change: transform; }
.duo-alt { color: var(--alt); }
.duo-word {
  align-self: center; justify-self: center; white-space: nowrap;
  color: var(--word); font-family: var(--body); font-weight: 800;
  letter-spacing: -.06em; line-height: .8;
  font-size: clamp(60px, 24vw, 320px);
  font-size: min(calc(100cqw / 3.82), 36svh);
  user-select: none;
  transform: scale(calc(1 + var(--p) * .035)); transform-origin: 50% 64%;
}
/* Las letras van en ::before: así el traductor de la página, que recorre los
   nodos de texto, no las toma por cadenas sin traducir. */
.duo-word .ch { display: inline-block; will-change: transform; }
.duo-word .ch::before { content: attr(data-ch); }
.duo-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.duo-side { max-width: 440px; }
.duo-lede { font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; line-height: 1.5; max-width: 42ch; opacity: .92; }
.duo-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.duo .btn { white-space: nowrap; }
.duo-o .dbtn1 { background: var(--tinta); color: var(--papel); }
.duo-o .dbtn1:hover { background: #fff; color: var(--tinta); }
.duo-k .dbtn1 { background: var(--accent); color: #fff; }
.duo-k .dbtn1:hover { background: var(--papel); color: var(--tinta); }
.duo-o .dbtn2 { border-color: rgba(12, 13, 15, .5); color: var(--tinta); }
.duo-o .dbtn2:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.duo-k .dbtn2 { border-color: rgba(244, 241, 235, .45); color: var(--papel); }
.duo-k .dbtn2:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.duo-o .scroll-cue i::after { background: var(--tinta); }

/* conmutadores: pastillas con fondo propio, legibles sobre naranja y sobre negro */
.duo-ui { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(66px, 9.5svh, 92px); pointer-events: none; }
.duo-ui__in { max-width: calc(1600px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); display: flex; justify-content: flex-end; }
.duo-ui .hero__acciones { pointer-events: auto; flex-wrap: nowrap; }
.duo-ui .mode, .duo-ui .lang {
  background: var(--papel); border-color: transparent; color: var(--tinta);
  --fg: var(--tinta); --ink: var(--tinta); --muted: rgba(12, 13, 15, .52); --line: transparent;
}
.duo-ui .mode:hover, .duo-ui .lang:hover { background: #fff; border-color: transparent; }
.duo-ui .lang__cta { color: var(--tinta); }

/* la franja de cifras continúa el negro del final de la portada */
.duo-stats {
  background: #0C0D0F; color: #F4F1EB;
  --bg: #0C0D0F; --fg: #F4F1EB; --muted: rgba(244, 241, 235, .56);
  padding: clamp(26px, 4vw, 48px) var(--pad) clamp(34px, 5vw, 64px);
}
.duo-stats .stats { max-width: 1600px; margin-inline: auto; justify-content: space-between; }

/* sobre naranja el isotipo del logo, que también es naranja, se perdía */
.nav[data-theme="accent"] .nav__logo--l { filter: brightness(0) invert(1); }

@media (max-width: 860px) {
  .duo-top .kicker, .duo-bottom .scroll-cue { display: none; }
  .duo-side { max-width: none; }
  .duo-ui__in { justify-content: flex-start; }
  .duo-ui .hero__acciones { gap: 8px; }
  .duo-ui .mode__txt { display: none; }
  .duo-ui .mode { padding: 9px 11px; }
}
@media (max-width: 860px) and (max-height: 700px) { .duo-cta { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .duo-pin { height: auto; } .duo { position: relative; } }

/* ═══════════ DIFERENCIAL: PAUTA INCLUIDA ═══════════
   La nota bajo los planes abre con el diferencial en el acento. */
.sec--price .sec__foot b { color: var(--accent); font-weight: 600; }