/* ==========================================================================
   NODEX · Portada (index.html)
   Secciones en orden de aparición. Requiere base.css.
   Escritorio con movimiento: html.escena-activa (≥ 60em y sin
   prefers-reduced-motion) activa las escenas fijadas al scroll.
   ========================================================================== */

/* ==========================================================================
   Navegación en píldora flotante
   ========================================================================== */
.nav-flotante {
  position: fixed; top: max(.9rem, env(safe-area-inset-top)); left: 50%; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  width: calc(100% - 1.5rem); padding: .35rem; overflow: hidden;
  border-radius: var(--r-pill); background: rgba(255,255,255,.72); border: 1px solid rgba(10,10,10,.08);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.35);
  transform: translateX(-50%); transition: transform 450ms var(--ease-suave);
}
.nav-flotante.escondido { transform: translate(-50%, calc(-100% - 2rem)); }
.nav-flotante .marca { min-height: 2.75rem; padding: 0 .45rem; }
.nav-flotante .logotipo { display: none; }
.nav-flotante .btn { --bg: var(--c-tinta); --bg-hover: var(--c-tinta-2); min-height: 2.75rem; padding: .4rem 1.15rem; font-size: .9375rem; white-space: nowrap; }
.btn-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 2.75rem; min-height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--r-pill); background: rgba(10,10,10,.06); color: var(--c-tinta);
  font-size: .9375rem; font-weight: 500; transition: background-color 180ms ease, transform var(--d-rapida) var(--ease-out);
}
.btn-menu .txt { display: none; }
.btn-menu:active { transform: scale(.97); }
.btn-menu svg { width: 18px; height: 18px; }
.btn-menu .l1, .btn-menu .l2 { transform-origin: center; transition: transform 220ms var(--ease-out); }
.menu-abierto .btn-menu .l1 { transform: translateY(3px) rotate(45deg); }
.menu-abierto .btn-menu .l2 { transform: translateY(-3px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .btn-menu:hover { background: rgba(10,10,10,.1); } }
.nav-enlaces { display: none; }
.progreso-nav { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.progreso-nav i { display: block; height: 100%; background: var(--c-laton); transform-origin: left; transform: scaleX(0); }

.menu-panel {
  position: fixed; top: calc(max(.9rem, env(safe-area-inset-top)) + 4.1rem); left: 50%; z-index: calc(var(--z-nav) - 1);
  width: min(26rem, calc(100% - 2rem)); padding: var(--e-2);
  border-radius: var(--r-lg); background: var(--c-fondo); border: 1px solid var(--c-borde); box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.98); transform-origin: top center;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.menu-abierto .menu-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.menu-panel a {
  display: flex; justify-content: space-between; align-items: center; padding: var(--e-4) 1.1rem; border-radius: var(--r-md);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--c-tinta); text-decoration: none; transition: background-color 150ms ease;
}
.menu-panel a span { font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; color: var(--c-texto-3); }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--c-superficie); }

@media (min-width: 40em) {
  .nav-flotante { width: auto; justify-content: flex-start; }
  .nav-flotante .marca { padding: 0 .9rem 0 .45rem; }
  .nav-flotante .logotipo { display: inline; }
  .btn-menu { width: auto; padding: 0 var(--e-4); }
  .btn-menu .txt { display: inline; }
}
@media (min-width: 60em) {
  .btn-menu, .menu-panel { display: none; }
  .nav-enlaces { display: flex; list-style: none; gap: .15rem; }
  .nav-enlaces a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border-radius: var(--r-pill);
    font-size: .9375rem; font-weight: 500; color: var(--c-texto-2); text-decoration: none; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease;
  }
  .nav-enlaces a:hover { background: rgba(10,10,10,.06); color: var(--c-tinta); }
}

/* ==========================================================================
   Intro de marca (solo la primera visita de la sesión)
   ========================================================================== */
.intro { position: fixed; inset: 0; z-index: var(--z-intro); display: none; place-items: center; background: var(--c-tinta); color: var(--c-fondo);
  clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-in-out); }
.js:not(.sin-intro) .intro { display: grid; }
.intro.fuera { clip-path: inset(0 0 100% 0); }
.intro-marca { display: grid; justify-items: center; gap: 1.25rem; }
.intro svg { width: clamp(64px, 8vw, 96px); height: auto; overflow: visible; }
.intro .trazo { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibuja 900ms cubic-bezier(.65, 0, .35, 1) 120ms forwards; }
.intro .nodo { fill: currentColor; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: nodo 380ms cubic-bezier(.34, 1.56, .64, 1) forwards; }
.intro .nodo:nth-of-type(1) { animation-delay: 150ms; } .intro .nodo:nth-of-type(2) { animation-delay: 380ms; }
.intro .nodo:nth-of-type(3) { animation-delay: 720ms; } .intro .nodo:nth-of-type(4) { animation-delay: 960ms; }
.intro .centro { fill: var(--c-laton-claro); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: nodo 500ms cubic-bezier(.34, 1.56, .64, 1) 640ms forwards; }
.intro-texto { font-size: clamp(1rem, .8rem + .8vw, 1.5rem); font-weight: 700; letter-spacing: .5em; margin-right: -.5em; opacity: 0; transform: translateY(8px); animation: sube 600ms var(--ease-suave) 900ms forwards; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes nodo { to { transform: scale(1); } }
@keyframes sube { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Titulares que se revelan palabra a palabra (los prepara escenas.js)
   ========================================================================== */
.tit-listo .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.tit-listo .w > span { display: inline-block; opacity: 0; transform: translateY(105%); transition: transform 900ms var(--ease-suave), opacity 600ms ease; transition-delay: calc(var(--i) * 45ms); }
.tit-listo.tit-on .w > span { opacity: 1; transform: none; }

/* Las tarjetas oscuras crecen un poco al entrar (escenas.js) */
.centro-tarjeta, .garantia-tarjeta, .pie-tarjeta { transform-origin: 50% 0; }

/* ==========================================================================
   Portada: ondas de agua y esfera de cristal
   ========================================================================== */
.portada-orb {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: max(40rem, 100svh); padding: 7rem var(--gutter) 3.5rem; /* abajo: mismo aire bajo los botones que entre el menú y el contenido */
  background: radial-gradient(120% 90% at 50% 45%, #FFFFFF 0%, #FFFFFF 50%, var(--c-superficie-2) 100%);
}
.portada-orb #ondas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.portada-orb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 22%; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--c-fondo)); }

.orb-esfera {
  position: absolute; left: 50%; top: 50%; z-index: -1; width: min(86vw, 46rem); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); animation: flota 9s ease-in-out infinite;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 18%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 55%, rgba(210,210,208,.35) 72%, rgba(255,255,255,.65) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(1.15) contrast(1.05); backdrop-filter: blur(3px) saturate(1.15) contrast(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -40px 80px rgba(0,0,0,.06), inset 0 30px 60px rgba(255,255,255,.6), 0 60px 120px -60px rgba(0,0,0,.35);
}
.orb-brillo { position: absolute; left: 18%; top: 12%; width: 34%; height: 16%; border-radius: 50%; transform: rotate(-28deg); background: radial-gradient(ellipse at center, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); filter: blur(4px); }
@keyframes flota { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 14px)); } }

.orb-cont { position: relative; display: grid; justify-items: center; max-width: 60rem; text-align: center; }
.orb-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.75rem; padding: .5rem 1rem;
  border-radius: var(--r-pill); background: rgba(255,255,255,.75); border: 1px solid rgba(10,10,10,.08); box-shadow: 0 6px 18px -10px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--c-texto-2); text-decoration: none;
}
.orb-pill .punto { width: 7px; height: 7px; }
/* Marca como firma; el titular es lo que manda */
.orb-marca { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, .5rem + .8vw, 1.25rem); }
.orb-iso {
  flex: none; display: grid; place-items: center; width: clamp(3rem, 2.4rem + 2.4vw, 4.75rem); aspect-ratio: 1; border-radius: 50%; color: var(--c-fondo);
  background: radial-gradient(circle at 35% 28%, #4A4A4F 0%, #151517 45%, #050505 100%);
  box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 0 0 6px rgba(10,10,10,.08), 0 18px 40px -16px rgba(0,0,0,.55), inset 0 2px 6px rgba(255,255,255,.25);
}
.orb-iso svg { width: 52%; height: 52%; }
.orb-nombre { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.orb-lema { max-width: 14ch; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); font-size: clamp(2.5rem, 1.1rem + 5.4vw, 6.75rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.orb-sub { max-width: 40rem; margin-top: clamp(1rem, .8rem + .8vw, 1.5rem); font-size: var(--t-md); line-height: 1.6; color: var(--c-texto-3); }
.orb-acciones { margin-top: var(--e-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); }
.orb-b1 { --bg-hover: var(--c-tinta-2); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.orb-b2 { --bg: var(--c-fondo); --fg: var(--c-tinta); --bg-hover: var(--c-superficie-2); border-color: rgba(10,10,10,.08); box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }

/* ==========================================================================
   Franja de confianza
   ========================================================================== */
.confianza { position: relative; z-index: var(--z-2); margin-top: -1rem; padding-inline: var(--gutter); }
.confianza ul {
  list-style: none; display: grid; max-width: var(--max); margin-inline: auto; padding: var(--e-2);
  border-radius: var(--r-2xl); background: var(--c-fondo); border: 1px solid var(--c-borde); box-shadow: var(--sombra-2);
}
.confianza li { display: grid; grid-template-columns: auto 1fr; gap: .25rem var(--e-4); align-items: center; padding: clamp(1rem, .8rem + .8vw, 1.5rem) clamp(1rem, .8rem + 1vw, 1.75rem); }
.confianza li + li { border-top: 1px solid var(--c-borde); }
.confianza .ic { grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--c-superficie-2); color: var(--acento); }
.confianza .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.confianza b { font-size: clamp(1rem, .9rem + .35vw, 1.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.confianza span { font-size: clamp(.8125rem, .75rem + .2vw, .9375rem); color: var(--c-texto-3); }
@media (min-width: 40em) {
  .confianza ul { grid-template-columns: 1fr 1fr; }
  .confianza li + li { border-top: 0; }
  .confianza li:nth-child(even) { border-left: 1px solid var(--c-borde); }
  .confianza li:nth-child(n+3) { border-top: 1px solid var(--c-borde); }
}
@media (min-width: 60em) {
  .confianza ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .confianza li:nth-child(n+3) { border-top: 0; }
  .confianza li + li { border-left: 1px solid var(--c-borde); }
}

/* ==========================================================================
   Las 3 fugas (el titular se ilumina con el scroll)
   ========================================================================== */
.palabra { color: var(--c-borde); transition: color 260ms ease; }
.palabra.on { color: var(--c-tinta); }
.palabra.on.acento { color: var(--acento); }
.tarjetas-3 { display: grid; gap: clamp(1rem, .5rem + 1.5vw, 2rem); max-width: 34rem; margin: var(--e-bloque) auto 0; }
.tarjeta-fuga { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--c-superficie); border: 1px solid var(--c-borde); }
.tf-foto { position: relative; aspect-ratio: 4 / 3; background: var(--c-tinta); }
.tf-foto img { width: 100%; height: 100%; object-fit: cover; }
.tf-foto .num { position: absolute; left: 1.1rem; top: 1.1rem; padding: .15rem .55rem; border-radius: var(--r-pill); background: rgba(250,250,250,.9); font-size: var(--t-xs); font-weight: 600; color: var(--c-tinta); }
.tf-texto { display: flex; flex: 1; flex-direction: column; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.tarjeta-fuga .fase { font-size: var(--t-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-texto-3); }
.tarjeta-fuga h3 { margin-top: .6rem; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.15; }
.tarjeta-fuga .txt { margin: var(--e-3) 0 1.25rem; font-size: var(--t-base); line-height: 1.6; color: var(--c-texto-3); }
.tarjeta-fuga .estudio { margin-bottom: 1.25rem; font-size: var(--t-sm); line-height: 1.55; color: var(--c-texto-2); }
.tarjeta-fuga .estudio b { font-weight: 600; color: var(--c-tinta); }
.tarjeta-fuga .cifra { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--c-borde); font-size: 1.125rem; font-weight: 500; }
.total-fugas { margin-top: var(--e-bloque); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--e-2) 1.25rem; text-align: center; }
.total-fugas span { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--c-texto-3); }
.total-fugas output { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 500; letter-spacing: -.04em; }
.total-fugas output small { font-size: .42em; letter-spacing: 0; color: var(--c-texto-3); }
.nota-pie { max-width: 40rem; margin: var(--e-4) auto 0; text-align: center; }
@media (min-width: 60em) { .tarjetas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

/* ==========================================================================
   Calculadora
   ========================================================================== */
.calc { display: grid; gap: var(--e-3); margin-top: var(--e-bloque); padding: var(--e-3); border-radius: var(--r-2xl); background: var(--c-superficie); }
.calc-controles { display: grid; gap: 1.75rem; align-content: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-xl); background: var(--c-fondo); }
.ctrl { display: grid; gap: var(--e-2); cursor: pointer; }
.ctrl-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); font-size: var(--t-md); line-height: 1.35; }
.ctrl-cab output { font-size: clamp(1.25rem, 1rem + .6vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.ctrl input[type=range] { width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ctrl input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(var(--c-tinta), var(--c-tinta)) 0 / var(--v, 50%) 100% no-repeat, var(--c-superficie); }
.ctrl input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--c-superficie); }
.ctrl input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--c-tinta); }
.ctrl input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--c-fondo); border: 2px solid var(--c-tinta); box-shadow: 0 4px 12px -4px rgba(10,10,10,.4); transition: transform var(--d-rapida) var(--ease-out); -webkit-appearance: none; }
.ctrl input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-fondo); border: 2px solid var(--c-tinta); }
.ctrl input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
.ctrl input[type=range]:focus-visible { outline-offset: 0; border-radius: 6px; }

.calc-resultado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-xl); background: var(--c-tinta); text-align: center; }
.calc-lbl { font-size: var(--t-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--c-texto-osc); }
.calc-cifra { font-size: clamp(3rem, 1.2rem + 6vw, 8rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; color: var(--acento); }
.calc-cifra small { font-size: .4em; letter-spacing: 0; color: var(--c-texto-osc); }
.calc-barra { width: 100%; max-width: 22rem; height: 6px; overflow: hidden; border-radius: 6px; background: var(--c-tinta-2); }
.calc-barra i { display: block; height: 100%; background: var(--acento-relleno); transform-origin: left; transform: scaleX(.1); }
.calc-desglose { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); width: 100%; max-width: 24rem; margin: 0; }
.calc-desglose div { padding: var(--e-3); border-radius: var(--r-md); background: var(--c-tinta-2); border: 1px solid var(--c-borde-osc); }
.calc-desglose dt { font-size: var(--t-xs); color: var(--c-texto-osc); }
.calc-desglose dd { margin: .2rem 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.calc-nota { max-width: 26rem; font-size: .8125rem; color: var(--c-texto-osc); }
@media (min-width: 60em) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ==========================================================================
   La solución: bento
   ========================================================================== */
.lema { margin-top: var(--e-4); font-size: var(--t-sm); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--acento); }
.bento { display: grid; gap: 1.25rem; max-width: 34rem; margin-inline: auto; }
.celda { display: flex; flex-direction: column; gap: var(--e-5); overflow: hidden; padding: 1.75rem; border-radius: var(--r-xl); background: var(--c-superficie); }
.celda h3 { font-size: var(--t-h3); }
.celda h3 .n { margin-right: var(--e-2); font-size: .8125rem; font-weight: 500; letter-spacing: 0; vertical-align: .2em; color: var(--acento); }
.celda .meta { margin-top: .35rem; font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--c-texto-3); }
.celda .meta em { font-style: normal; font-weight: 500; color: var(--acento); }
.celda .txt { margin-top: .85rem; font-size: var(--t-md); line-height: 1.55; color: var(--c-texto-2); }
.celda .res { margin-top: auto; padding-top: var(--e-4); border-top: 1px solid var(--c-borde); font-size: var(--t-base); font-weight: 600; line-height: 1.4; }

.mini { padding: var(--e-4); border-radius: var(--r-lg); background: var(--c-fondo); border: 1px solid var(--c-borde); font-size: var(--t-sm); }
.mini-lbl { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--c-texto-3); }

.entradas { list-style: none; display: grid; gap: var(--e-2); margin-top: .6rem; }
.entradas li { display: grid; grid-template-columns: 30px 1fr auto; gap: .65rem; align-items: center; padding: .55rem .6rem; border-radius: var(--r-md); background: var(--c-fondo); }
.entradas .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-fondo); border: 1px solid var(--c-borde); color: var(--acento); }
.entradas .ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.entradas b { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.entradas small { font-size: var(--t-xs); color: var(--c-texto-3); }
.entradas .ok { padding: .15rem .5rem; border-radius: var(--r-pill); background: var(--c-senal-fondo); font-size: var(--t-xs); color: var(--c-senal); white-space: nowrap; }
.entradas .ic.ic-wa { background: var(--c-wa); border-color: var(--c-wa); color: #fff; }
.reloj-grande { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--c-superficie); }
.reloj-grande b { font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em; }

.seguimiento { position: relative; list-style: none; display: grid; gap: .55rem; margin-top: .7rem; }
.seguimiento::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--c-borde); }
.seguimiento li { position: relative; display: flex; justify-content: space-between; gap: var(--e-2); padding-left: 1.4rem; font-size: var(--t-sm); }
.seguimiento li::before { content: ""; position: absolute; left: 1px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-fondo); border: 1px solid var(--c-texto-3); transition: background-color 300ms ease, border-color 300ms ease; }
.seguimiento li.hecho::before { background: var(--c-tinta); border-color: var(--c-tinta); }
.seguimiento li.firmado { font-weight: 600; }
.seguimiento li.firmado::before { background: var(--c-laton); border-color: var(--c-laton); }
.seguimiento li span { font-size: var(--t-xs); color: var(--c-texto-3); white-space: nowrap; }

.semana { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin-top: .7rem; }
.semana .dia { padding-bottom: .2rem; font-size: var(--t-xs); text-align: center; color: var(--c-texto-3); }
.semana .h { height: 1.35rem; border-radius: 6px; background: var(--c-fondo); border: 1px dashed var(--c-borde); transition: background-color 400ms ease, border-color 400ms ease; }
.semana .h.lleno { background: var(--c-laton-osc); border: 1px solid var(--c-laton-osc); }
.semana .h.rellenado { background: var(--c-laton); border: 1px solid var(--c-laton); }
.resena { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3); font-size: var(--t-xs); color: var(--c-texto-2); }
.resena .estrellas { font-size: .8125rem; letter-spacing: 1px; color: var(--c-laton); }

.celda.d { display: grid; gap: var(--e-5); }
.incluido-lista { list-style: none; display: grid; gap: .1rem; margin-top: var(--e-4); }
.incluido-lista li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; padding-block: .65rem; border-bottom: 1px solid var(--c-borde); font-size: var(--t-base); line-height: 1.45; }
.incluido-lista li:last-child { border-bottom: 0; }
.icono { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--acento); }
.panel-mini { display: flex; flex-direction: column; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: .7rem; }
.kpi { padding: .65rem .7rem; border-radius: var(--r-md); background: var(--c-superficie); }
.kpi b { display: block; margin-top: .15rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.04em; }
.kpi b.l { color: var(--acento); }
.grafico { flex: 1; width: 100%; min-height: 90px; margin-top: .9rem; }
.grafico .area { fill: rgba(138,106,74,.08); }
.grafico .trazo { fill: none; stroke: var(--c-laton-osc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .rejilla { stroke: var(--c-superficie); stroke-width: 1; }

@media (min-width: 40em) { .celda.d { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 60em) {
  /* Tres columnas alineadas: cabecera, mini interfaz y resultado comparten filas */
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; max-width: none; }
  .celda.a, .celda.b, .celda.c { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .celda.d { grid-column: 1 / -1; }
}

/* ==========================================================================
   La solución: tarjeta oscura con el diagrama (el bento va debajo)
   ========================================================================== */
.centro { padding-inline: clamp(.5rem, .25rem + 1vw, 1rem); }
.centro-tarjeta { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); border-radius: var(--r-2xl); background: var(--c-tinta); }
.centro-cab { max-width: 50rem; margin-inline: auto; text-align: center; }
.centro-cab h2 { margin-top: 1.25rem; }
.centro-cab .lema { margin-top: var(--e-3); }
.diagrama { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.diagrama svg { display: none; width: 100%; height: auto; overflow: visible; }
.diagrama .tramo { fill: none; stroke: var(--c-texto-2); stroke-width: 1.25; }
.diagrama .tramo-on { fill: none; stroke: var(--c-fondo); stroke-width: 1.5; stroke-dasharray: 1 1; }
.diagrama .bucle-on { fill: none; stroke: var(--c-laton-claro); stroke-width: 1.5; stroke-dasharray: 1 1; }
.diagrama .n { fill: var(--c-tinta); stroke: var(--c-texto-3); stroke-width: 1.25; transition: fill 300ms ease, stroke 300ms ease; }
.diagrama .on .n { fill: var(--c-fondo); stroke: var(--c-fondo); }
.diagrama text { font-size: 17px; fill: var(--c-texto-osc); transition: fill 300ms ease; }
.diagrama .on text { fill: var(--c-fondo); }
.diagrama .canal text { font-size: 16px; font-weight: 600; }
.diagrama .lbl-mono { font-size: 12px; letter-spacing: .08em; fill: var(--c-texto-osc); }
.diagrama .viajero { fill: var(--c-laton-claro); }
.diagrama .iso-nucleo { color: var(--c-tinta); }
.diagrama-movil { position: relative; list-style: none; max-width: 22rem; margin: 0 auto; }
.diagrama-movil::before { content: ""; position: absolute; left: 7px; top: .6rem; bottom: .6rem; width: 1px; background: var(--c-texto-3); }
.diagrama-movil li { position: relative; padding: 0 0 1.4rem 2.25rem; }
.diagrama-movil li::before { content: ""; position: absolute; left: 0; top: .4rem; width: 15px; height: 15px; border-radius: 50%; background: var(--c-tinta); border: 1px solid var(--c-texto-osc); }
.diagrama-movil .canales { font-weight: 600; }
.diagrama-movil .nucleo { font-weight: 700; letter-spacing: .28em; }
.diagrama-movil .nucleo::before { background: var(--c-laton-claro); border-color: var(--c-laton-claro); }
.diagrama-movil .vuelta { font-size: .8125rem; color: var(--c-laton-claro); }
.diagrama-movil .vuelta::before { border-style: dashed; border-color: var(--c-laton-claro); }
@media (min-width: 60em) {
  .diagrama svg { display: block; }
  .diagrama-movil { display: none; }
}
/* El margen negativo compensa el hueco del menú al fijarse: fuera de la escena la tarjeta queda a --e-seccion de sus vecinas */
.escena-activa .centro { margin-block: -4.75rem -.75rem; }
.escena-activa .centro-pista { height: 230vh; }
.escena-activa .centro-fijo { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-block: 4.75rem .75rem; }
.escena-activa .centro-tarjeta { display: flex; align-items: center; width: 100%; height: 100%; padding-block: clamp(1.5rem, 4vh, 3rem); }
.escena-activa .centro-cab h2 { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); }
.escena-activa .centro .entrada { margin-top: .9rem; font-size: 1.0625rem; }
.escena-activa .diagrama { margin-top: clamp(1rem, 3vh, 2.5rem); }
.escena-activa .diagrama svg { max-height: 44vh; margin-inline: auto; }

/* ==========================================================================
   Demo en vivo
   Móvil y tablet: todo visible, sin fijar. Escritorio con movimiento:
   escena fijada donde el scroll cuenta la conversación (escenas.js).
   ========================================================================== */
.demo2 { position: relative; background: var(--c-tinta); }
.demo2-fijo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); padding: var(--e-seccion) var(--gutter); }
.demo2-cab { text-align: center; }
.demo2-cab h2 { max-width: 24ch; margin: var(--e-4) auto 0; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.75rem); }
.demo2-cab .nota { max-width: 44rem; margin: var(--e-3) auto 0; font-size: clamp(.9375rem, .85rem + .25vw, 1.125rem); }

.demo2-escena { position: relative; display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "movil" "izq" "der"; }
.demo2-hilos { display: none; }
.movil { grid-area: movil; position: relative; z-index: var(--z-2); justify-self: center; width: min(100%, 19rem); aspect-ratio: 9 / 18.5; }
.demo2-lado { position: relative; z-index: var(--z-1); display: grid; gap: .7rem; align-content: start; }
.demo2-lado.izq { grid-area: izq; }
.demo2-lado.der { grid-area: der; }
.lado-tit { margin-bottom: .25rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texto-osc); }
@media (min-width: 40em) {
  .demo2-escena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "movil movil" "izq der"; column-gap: var(--e-4); }
}

.d2-card {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .85rem; align-items: center; padding: .85rem var(--e-4);
  border-radius: 18px; background: rgba(250,250,250,.045); border: 1px solid var(--c-borde-osc);
  transition: opacity 550ms ease, transform 750ms var(--ease-suave), border-color 400ms ease, background-color 400ms ease;
}
.d2-card b { display: block; font-size: clamp(.9375rem, .85rem + .25vw, 1.0625rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.d2-card b + span { display: block; font-size: clamp(.8125rem, .75rem + .2vw, .9375rem); line-height: 1.35; color: var(--c-texto-osc); }
.d2-perdido { border-style: dashed; border-color: rgba(220,120,100,.35); background: rgba(163,57,44,.08); }
.d2-nodex.activo { border-color: rgba(138,106,74,.75); background: rgba(138,106,74,.1); }
.d2-ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 13px; background: var(--c-tinta-2); border: 1px solid var(--c-borde-osc); color: var(--c-fondo); }
.d2-ic svg { width: 20px; height: 20px; }
.d2-ic .icono { color: var(--c-fondo); }
.d2-ic-wa { background: var(--c-wa); border-color: var(--c-wa); }
.d2-ic-wa svg { width: 22px; height: 22px; fill: #fff; }
.d2-ic-n { background: rgba(138,106,74,.16); border-color: rgba(138,106,74,.4); }
.d2-ic-n .icono { color: var(--c-laton-claro); }
.d2-ic-ok { background: var(--c-laton-claro); border-color: var(--c-laton-claro); color: var(--c-tinta); }
.trazo-ok { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms cubic-bezier(.65, 0, .35, 1) 350ms; }
.d2-reloj { color: var(--c-laton-claro); }
.d2-agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: var(--e-2); }
.d2-agenda span { font-size: var(--t-xs); text-align: center; color: var(--c-texto-osc); }
.d2-agenda i { height: 15px; border-radius: 4px; background: rgba(250,250,250,.07); transition: background-color 400ms ease, box-shadow 400ms ease, transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.d2-agenda i.o { background: rgba(138,106,74,.95); }
.d2-agenda.libres i.h { background: rgba(138,106,74,.18); box-shadow: inset 0 0 0 1.5px var(--c-laton-claro); }
.d2-agenda.elegido i.h[data-k="j"] { background: var(--c-laton-claro); box-shadow: 0 0 0 4px rgba(138,106,74,.25); transform: scale(1.12); }
.d2-card.nuevo-card { animation: entra-card 650ms var(--ease-suave) both; }
/* la tarjeta de «Pruébalo tú» ocupa el sitio del recordatorio: la columna no crece y no empuja el móvil ni la línea */
.demo2-lado.der:has(#d2-eventos .d2-card) .d2-recordatorio { display: none; }
@keyframes entra-card { from { opacity: 0; transform: translateX(36px) scale(.95); } }

/* Réplica de WhatsApp */
.movil-marco {
  position: absolute; inset: 11px; display: flex; flex-direction: column; overflow: hidden; border-radius: 44px; background: #EFEAE2;
  box-shadow: 0 0 0 11px #07131A, 0 0 0 12.5px #2B4654, 0 60px 120px -40px rgba(0,0,0,.85), 0 0 80px -10px rgba(138,106,74,.25);
}
.movil-isla { position: absolute; top: 9px; left: 50%; z-index: 5; width: 30%; height: 22px; border-radius: 20px; background: #05090C; transform: translateX(-50%); }
.movil-estado { display: flex; justify-content: space-between; align-items: center; padding: 11px 24px 4px 30px; background: #fff; font-size: 12.5px; font-weight: 600; color: #111B21; }
.movil-iconos { display: flex; gap: 4px; align-items: center; }
.movil-iconos i { display: block; width: 15px; height: 9px; border-radius: 2px; background: #111B21; }
.movil-iconos i:nth-child(1) { width: 14px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.movil-iconos i:nth-child(2) { width: 13px; border-radius: 6px 6px 1px 1px; clip-path: polygon(50% 100%, 0 20%, 100% 20%); }
.movil-iconos i:nth-child(3) { width: 21px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #111B21; background: linear-gradient(90deg, #111B21 70%, transparent 70%); }
.wa-cab { display: flex; align-items: center; gap: var(--e-2); padding: 6px 12px 9px 8px; background: #fff; border-bottom: 1px solid #E9EDEF; color: #111B21; }
.wa-atras, .wa-acc { flex: none; width: 22px; height: 22px; }
.wa-acc { fill: none; stroke: currentColor; stroke-width: 1.8; color: #54656F; }
.wa-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-tinta); color: var(--c-fondo); }
.wa-avatar svg { width: 21px; height: 21px; }
.wa-quien { flex: 1; min-width: 0; line-height: 1.2; }
.wa-quien b { display: block; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wa-quien span { font-size: 12px; color: #667781; transition: color 200ms ease; }
.wa-quien span.escribe { color: #008069; }
.chat-cuerpo {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; overflow-y: auto; scrollbar-width: none;
  background-color: #EFEAE2; background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
  background-image: radial-gradient(rgba(84,101,111,.07) 1.2px, transparent 1.4px), radial-gradient(rgba(84,101,111,.05) 1.2px, transparent 1.4px);
}
.chat-cuerpo::-webkit-scrollbar { display: none; }
.chat-dia { align-self: center; margin: auto 0 4px; padding: 4px 10px; border-radius: var(--r-sm); background: #fff; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 12px; color: #54656F; }
.wa-cifrado { align-self: center; max-width: 88%; margin-bottom: 6px; padding: 5px 9px; border-radius: var(--r-sm); background: #FFEECD; font-size: 12px; line-height: 1.35; text-align: center; color: #54656F; }
.msg {
  position: relative; max-width: 82%; padding: 6px 8px 5px 9px; border-radius: var(--r-sm); box-shadow: 0 1px .5px rgba(11,20,26,.13);
  font-size: 14px; line-height: 1.38; color: #111B21;
  transition: opacity 320ms ease, transform 480ms cubic-bezier(.34, 1.45, .64, 1);
}
.msg time { display: inline-flex; align-items: center; gap: 3px; float: right; margin: 6px 0 -3px 10px; font-size: 12px; color: #54656F; }
.msg.cliente { align-self: flex-start; background: #fff; border-top-left-radius: 0; transform-origin: 0 0; }
.msg.negocio { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0; transform-origin: 100% 0; }
.msg.cliente::before, .msg.negocio::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.msg.cliente::before { left: -8px; background: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.msg.negocio::before { right: -8px; background: #D9FDD3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tics { width: 16px; height: 10px; fill: none; stroke: #8696A0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms ease; }
.msg.leido .tics { stroke: #53BDEB; }
.escribiendo { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); border-top-left-radius: 0; background: #fff; box-shadow: 0 1px .5px rgba(11,20,26,.13); transition: opacity 200ms ease; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; opacity: .4; animation: tecleo 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes tecleo { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.ficha { align-self: center; display: flex; align-items: center; gap: var(--e-2); margin-top: 4px; padding: 5px 11px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--c-laton); font-size: 12px; color: #111B21; transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.ficha i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-laton); }
.msg.nuevo, .escribiendo.nuevo, .ficha.nuevo { animation: entra-msg 360ms var(--ease-out) both; }
@keyframes entra-msg { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.wa-barra { display: flex; gap: 6px; align-items: center; padding: 6px 8px 14px; background: #EFEAE2; }
.wa-input { flex: 1; display: flex; align-items: center; gap: var(--e-2); padding: 9px 12px; border-radius: 22px; background: #fff; font-size: 14px; color: #8696A0; }
.wa-input svg { flex: none; width: 20px; height: 20px; color: #54656F; }
.wa-mic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #00A884; color: #fff; }
.wa-mic svg { width: 20px; height: 20px; }

/* Línea temporal (solo en la escena fijada) */
.demo2-linea { display: none; position: relative; z-index: var(--z-1); width: 100%; max-width: 46rem; margin-inline: auto; }
.d2-linea-riel { height: 2px; overflow: hidden; border-radius: 2px; background: var(--c-borde-osc); }
.d2-linea-riel i { display: block; height: 100%; background: var(--c-laton-claro); transform-origin: left; transform: scaleX(0); }
.demo2-linea ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .35rem; font-size: .8125rem; text-align: center; color: var(--c-texto-osc); }
.demo2-linea li { transition: opacity 400ms ease; }
.demo2-linea li b { display: block; font-weight: 600; color: var(--c-laton-claro); }
.demo2-linea li.oculto { opacity: .35; }

/* Pruébalo tú */
.demo2-prueba { position: relative; z-index: var(--z-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-3) var(--e-4); transition: opacity 500ms ease, transform 600ms var(--ease-suave); }
.chat-prueba { width: 100%; font-size: clamp(.875rem, .8rem + .25vw, 1.0625rem); font-weight: 500; text-align: center; }
.chips-chat { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.chips-chat button {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; padding: .55rem 1.1rem;
  border: 1px solid var(--c-borde-osc); border-radius: var(--r-pill); background: rgba(250,250,250,.06); color: var(--c-fondo);
  font-size: clamp(.875rem, .8rem + .25vw, 1rem); font-weight: 500;
  transition: transform var(--d-rapida) var(--ease-out), background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.chips-chat button svg { width: 18px; height: 18px; fill: none; stroke: var(--c-laton-claro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chips-chat button:active { transform: scale(.95); }
.chips-chat button:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .chips-chat button:not(:disabled):hover { background: rgba(138,106,74,.14); border-color: var(--c-laton-claro); } }

/* Escena fijada (escritorio con movimiento y alto suficiente: html.demo-fijada) */
/* Al soltarse la escena, el fondo negro sigue 4rem: abajo queda el mismo aire que arriba (5.25rem) sin quitar alto a la escena */
.demo-fijada .demo2 { padding-bottom: 4rem; }
.demo-fijada .demo-pista { height: 420vh; }
.demo-fijada .demo2-fijo { position: sticky; top: 0; height: 100vh; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: var(--e-5); padding-block: 5.25rem 1.25rem; overflow: hidden; }
.demo-fijada .demo2-cab h2 { max-width: 30ch; margin-top: .6rem; font-size: clamp(1.5rem, .7rem + 1.7vw, 2.75rem); }
.demo-fijada .demo2-cab .nota { display: none; }
.demo-fijada .demo2-escena { min-height: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "izq movil der"; gap: clamp(1.5rem, 1rem + 4vw, 6rem); align-items: center; }
.demo-fijada .demo2-hilos { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.demo2-hilos path { fill: none; stroke: rgba(138,106,74,.55); stroke-width: 1.25; stroke-dasharray: 4 7; transition: opacity 500ms ease; }
.demo2-hilos circle { fill: var(--c-laton-claro); transition: opacity 400ms ease; }
.demo2-hilos .apagado { opacity: 0; }
.demo-fijada .movil { width: auto; height: 100%; max-height: 46rem; will-change: transform; }
.demo-fijada .demo2-lado { align-content: center; width: 100%; max-width: 19rem; }
.demo-fijada .demo2-lado.izq { justify-self: end; }
.demo-fijada .demo2-lado.der { justify-self: start; }
.demo-fijada .izq .lado-tit { text-align: right; }
.demo-fijada .izq .d2-card.oculto { opacity: 0; transform: translateX(-36px) scale(.96); }
.demo-fijada .der .d2-card.oculto { opacity: 0; transform: translateX(36px) scale(.96); }
.demo-fijada .d2-ok.oculto .trazo-ok { stroke-dashoffset: 1; }
.demo-fijada .msg.oculto, .demo-fijada .ficha.oculto, .demo-fijada .escribiendo.oculto { position: absolute; visibility: hidden; opacity: 0; transform: scale(.82) translateY(6px); }
.demo-fijada .demo2-linea { display: block; }
.demo-fijada .demo2-prueba { gap: .4rem .75rem; }
.demo-fijada .demo2-prueba:not(.lista) { opacity: .25; transform: translateY(8px); pointer-events: none; }
@media (min-width: 80em) { .demo-fijada .demo2-lado { max-width: 25rem; } }

/* ==========================================================================
   Cómo trabajamos: línea de tiempo
   ========================================================================== */
.zigzag { position: relative; list-style: none; max-width: 34rem; margin: var(--e-bloque) auto 0; }
.zigzag::before, .zigzag::after { content: ""; position: absolute; left: 1.125rem; top: 0; bottom: 0; width: 1px; background: var(--c-borde); }
.zigzag::after { background: var(--c-tinta); transform-origin: top; transform: scaleY(var(--p, 1)); }
.paso { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0 var(--e-4); align-items: start; padding-block: .6rem; }
.marca-paso { position: relative; z-index: var(--z-1); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-top: .2rem; border-radius: 50%; background: var(--c-fondo); border: 1px solid var(--c-borde); transition: border-color 300ms ease; }
.marca-paso i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-texto-osc); transition: background-color 300ms ease; }
.paso.hecho .marca-paso { border-color: var(--c-tinta); }
.paso.hecho .marca-paso i { background: var(--c-tinta); }
.paso:last-child.hecho .marca-paso i { background: var(--c-laton); }
.cuando { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 2.25rem; margin-top: .2rem; }
.cuando .lbl { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-texto-3); }
.tarjeta-paso { grid-column: 2; grid-row: 2; padding-top: .25rem; }
.paso h3 { font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); }
.paso p { margin-top: var(--e-2); font-size: var(--t-base); line-height: 1.6; color: var(--c-texto-3); }
@media (min-width: 60em) {
  .zigzag { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.2vw, 2rem); max-width: none; }
  .zigzag::before, .zigzag::after { left: 0; right: 0; top: 1.125rem; bottom: auto; width: auto; height: 1px; }
  .zigzag::after { transform-origin: left; transform: scaleX(var(--p, 1)); }
  .paso { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 0; }
  .marca-paso, .cuando { margin-top: 0; }
  .tarjeta-paso { padding-top: 0; }
}

/* ==========================================================================
   Para quién es: tira de fotos de sectores y explorador
   ========================================================================== */
.galeria-tira { position: relative; margin-top: var(--e-bloque); padding-bottom: var(--e-7); }
.galeria-ventana { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.galeria-pista { --hueco: clamp(.75rem, .5rem + .8vw, 1.25rem); display: flex; gap: var(--hueco); width: max-content; animation: galeria-corre 30s linear infinite; }
.galeria-pista figure { position: relative; flex: none; width: clamp(15rem, 10rem + 16vw, 24rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-xl); background: var(--c-superficie); }
.galeria-pista img { width: 100%; height: 100%; object-fit: cover; }
.galeria-pista .foco-izq img { object-position: 25% 50%; }
.galeria-pista .foco-der img { object-position: 80% 50%; }
.galeria-pista figcaption { position: absolute; left: var(--e-4); bottom: var(--e-4); padding: .4rem .8rem; border-radius: var(--r-pill); background: rgba(250,250,250,.92); font-size: var(--t-sm); font-weight: 500; color: var(--c-tinta); }
@keyframes galeria-corre { to { transform: translateX(calc(-50% - var(--hueco) / 2)); } }
/* solo en ordenador: se para al pasar el ratón */
@media (hover: hover) and (pointer: fine) { .galeria-tira:hover .galeria-pista { animation-play-state: paused; } }

.sector-explorador { margin-top: var(--e-bloque); text-align: center; }
.sector-pregunta { font-size: clamp(1.125rem, 1rem + .5vw, 1.625rem); font-weight: 600; letter-spacing: -.01em; }
.sector-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: var(--e-4); }
.sector-tabs button {
  min-height: 2.75rem; padding: .55rem 1.35rem; border: 1px solid var(--c-borde); border-radius: var(--r-pill); background: var(--c-fondo);
  font-size: clamp(.9375rem, .85rem + .35vw, 1.25rem); font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform var(--d-rapida) var(--ease-out);
}
.sector-tabs button:active { transform: scale(.96); }
.sector-tabs button[aria-selected="true"] { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-fondo); }
@media (hover: hover) and (pointer: fine) { .sector-tabs button[aria-selected="false"]:hover { border-color: var(--acento); } }
.sector-panel { margin-top: var(--e-5); padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); border-radius: var(--r-xl); background: var(--c-fondo); border: 1px solid var(--c-borde); }
.sector-panel h3 { font-size: clamp(1.5rem, 1rem + 1.8vw, 3.25rem); letter-spacing: -.03em; }
.sector-panel h3 span { display: inline-block; color: var(--acento); }
.sector-fugas { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.sector-fugas > div { padding: clamp(1.25rem, 1rem + 1vw, 2.25rem); border-radius: var(--r-lg); background: var(--c-superficie); }
.sector-fugas .fase { display: block; font-size: clamp(.75rem, .7rem + .2vw, .9375rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.sector-fugas p { margin-top: .6rem; font-size: clamp(1rem, .9rem + .4vw, 1.375rem); line-height: 1.5; color: var(--c-texto-2); }
.sector-panel h3 span, .sector-fugas p { transition: opacity 200ms ease, transform 260ms var(--ease-out); }
.sector-panel.cambiando h3 span, .sector-panel.cambiando .sector-fugas p { opacity: 0; transform: translateY(6px); }
@media (min-width: 60em) {
  .sector-fugas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Paquetes
   ========================================================================== */
.bandeja { display: grid; gap: var(--e-3); max-width: 34rem; margin: var(--e-bloque) auto 0; padding: var(--e-3); border-radius: var(--r-xl); background: var(--c-superficie); }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.75rem var(--e-5) var(--e-5); border-radius: var(--r-xl); }
.plan.destacado { order: -1; background: var(--c-fondo); box-shadow: var(--sombra-2); outline: 1.5px solid var(--c-laton); outline-offset: -1.5px; }
.cab-plan { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); }
.ic-plan { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-tinta); color: var(--c-fondo); }
.ic-plan .icono { width: 22px; height: 22px; color: inherit; }
.plan.destacado .ic-plan { background: var(--c-laton); color: var(--c-tinta); }
.plan .rec { padding: .3rem .65rem; border-radius: var(--r-pill); border: 1px solid var(--c-laton); font-size: var(--t-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.plan h3 { margin-top: var(--e-5); font-size: var(--t-h3); }
.plan .para { margin-top: .4rem; font-size: var(--t-base); line-height: 1.5; color: var(--c-texto-2); }
.plan .inversion { margin-top: var(--e-5); font-size: 1.75rem; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.plan .inversion small { display: block; margin-top: .35rem; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; color: var(--c-texto-3); }
.plan .btn { width: 100%; justify-content: space-between; margin-top: var(--e-5); }
.plan:not(.destacado) .btn { --bg: var(--c-fondo); --fg: var(--c-tinta); --bg-hover: var(--c-superficie-2); }
.plan:not(.destacado) .btn .flecha { background: var(--c-tinta); color: var(--c-fondo); }
.incluye { margin-top: var(--e-5); padding-top: 1.25rem; border-top: 1px solid var(--c-borde); }
.plan.destacado .incluye { border-color: var(--c-superficie); }
.incluye > p { font-size: var(--t-sm); font-weight: 600; }
.plan ul { list-style: none; display: grid; gap: .6rem; margin-top: .85rem; }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: .7rem; font-size: var(--t-md); line-height: 1.45; }
.plan li svg { width: 16px; height: 16px; margin-top: .25rem; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.garantia-plan { margin-top: 1.25rem; padding: .75rem .9rem; border-radius: var(--r-md); background: rgba(255,255,255,.6); font-size: .9375rem; line-height: 1.45; }
.plan.destacado .garantia-plan { background: var(--c-superficie); }
.garantia-plan b { display: block; margin-bottom: .2rem; font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.planes-nota { max-width: 44rem; margin: var(--e-6) auto 0; text-align: center; }
@media (min-width: 60em) {
  .bandeja { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .plan.destacado { order: 0; }
  .plan .para { min-height: 3em; }
}

/* ==========================================================================
   Garantía y plazas
   ========================================================================== */
.garantia { padding-inline: clamp(.5rem, .25rem + 1vw, 1rem); }
.garantia-tarjeta { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); border-radius: var(--r-2xl); background: var(--c-tinta); }
.garantia-grid { display: grid; justify-items: center; gap: var(--e-6); text-align: center; }
.garantia h2 { max-width: 22ch; margin: 1.25rem auto 0; font-size: clamp(2rem, .8rem + 4vw, 5.5rem); }
.garantia .texto { display: grid; gap: var(--e-4); max-width: 60rem; margin: var(--e-5) auto 0; font-size: clamp(1.0625rem, .95rem + .45vw, 1.5rem); line-height: 1.6; color: var(--c-texto-osc); }
.garantia .texto strong { font-weight: 600; color: var(--c-fondo); }
.garantia .condicion { padding: var(--e-4) 1.25rem; border-radius: var(--r-md); background: var(--c-tinta-2); border: 1px solid var(--c-borde-osc); color: var(--c-fondo); }
.garantia .btn { margin-top: 2.25rem; }
.plazas-banda { display: grid; justify-items: center; gap: var(--e-2); margin-top: var(--e-bloque); padding: 1.25rem var(--e-5); border-radius: var(--r-lg); background: var(--c-tinta-2); border: 1px solid var(--c-borde-osc); text-align: center; }
.plazas-banda .tres { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--acento); }
.plazas-banda h3 { font-size: 1.125rem; }
.plazas-banda p { max-width: 44rem; margin: .25rem auto 0; font-size: var(--t-base); color: var(--c-texto-osc); }
.plazas-banda .disponibles { padding: var(--e-2) .9rem; border-radius: var(--r-pill); border: 1px solid var(--c-borde-osc); font-size: .8125rem; white-space: nowrap; }

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */
.faq { display: grid; gap: .6rem; max-width: 82rem; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; }
.faq details { border-radius: var(--r-lg); background: var(--c-fondo); border: 1px solid var(--c-borde); transition: background-color 200ms ease; }
.faq details[open] { background: var(--c-superficie); border-color: transparent; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-5); padding: var(--e-5) 1.25rem var(--e-5) var(--e-5);
  list-style: none; cursor: pointer; font-size: clamp(1.0625rem, .95rem + .45vw, 1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .mas { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-superficie); transition: background-color 200ms ease, transform 250ms var(--ease-out); }
.faq .mas::before, .faq .mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--c-tinta); transform: translate(-50%, -50%); }
.faq .mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .mas { background: var(--c-tinta); transform: rotate(45deg); }
.faq details[open] .mas::before, .faq details[open] .mas::after { background: var(--c-fondo); }
.faq .resp { max-width: 64rem; padding: 0 var(--e-5) 1.4rem; font-size: var(--t-md); color: var(--c-texto-2); }
@media (min-width: 40em) { .faq .resp { padding-right: var(--e-8); } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height var(--d-media) var(--ease-out), content-visibility var(--d-media) allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ==========================================================================
   Llamada final
   ========================================================================== */
.final { padding-bottom: var(--e-seccion); text-align: center; }
.final h2 { max-width: 20ch; margin: 1.25rem auto 0; font-size: clamp(2.25rem, .8rem + 5vw, 7rem); }
.final p { max-width: var(--max-texto); margin: var(--e-5) auto 0; font-size: var(--t-lg); line-height: 1.55; color: var(--c-texto-2); }
.final .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-top: 2.5rem; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { padding: 0 clamp(.5rem, .25rem + 1vw, 1rem) clamp(.5rem, .25rem + 1vw, 1rem); }
.pie-tarjeta { overflow: hidden; padding-top: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); border-radius: var(--r-2xl); background: var(--c-tinta); color: var(--c-texto-osc); font-size: .9375rem; }
.pie-grid { display: grid; justify-items: center; gap: var(--e-5); text-align: center; }
.pie .marca { min-height: 2.75rem; }
.pie .eslogan { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; color: var(--c-fondo); }
.pie .descriptor { margin-top: .4rem; }
.pie h3 { margin-bottom: var(--e-2); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texto-osc); }
.pie ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--e-5); }
.pie ul a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-fondo); text-decoration: none; }
.pie ul a:hover { text-decoration: underline; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-6); margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--c-borde-osc); font-size: var(--t-xs); text-align: center; }
@media (min-width: 60em) {
  /* Marca a la izquierda, enlaces en columnas a la derecha */
  .pie-grid { grid-template-columns: 2fr 1fr 1fr; justify-items: start; gap: var(--e-6); text-align: left; }
  .pie ul { flex-direction: column; }
  .pie ul a { min-height: 2.25rem; }
  .pie-legal { justify-content: space-between; text-align: left; }
}
.pie-gigante { margin: var(--e-5) 0 -.06em; font-size: clamp(4rem, 1rem + 15vw, 15rem); font-weight: 700; line-height: .78; letter-spacing: .06em; text-align: center; white-space: nowrap; color: var(--c-tinta-2); user-select: none; }

/* ==========================================================================
   WhatsApp flotante y aviso de cookies
   ========================================================================== */
.wa-flotante {
  position: fixed; right: max(var(--e-4), env(safe-area-inset-right)); bottom: max(var(--e-4), env(safe-area-inset-bottom)); z-index: var(--z-flotante);
  display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
  border-radius: var(--r-pill); background: var(--c-tinta); color: var(--c-fondo); box-shadow: var(--sombra-flotante);
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  transition: transform var(--d-rapida) var(--ease-out), opacity 250ms ease, visibility 0s linear 0s;
}
.wa-flotante .wa-logo { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; }
.wa-flotante .wa-logo svg { width: 28px; height: 28px; color: var(--c-wa); }
.wa-flotante .txt { display: none; }
.wa-flotante:active { transform: scale(.96); }
.wa-flotante.retirado { opacity: 0; visibility: hidden; transform: translateY(12px); transition: transform 250ms ease, opacity 250ms ease, visibility 0s linear 250ms; }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { background: var(--c-tinta-2); } }
@media (min-width: 40em) {
  .wa-flotante { gap: .6rem; width: auto; padding: 0 1.2rem 0 .65rem; }
  .wa-flotante .txt { display: inline; }
}

.cookies {
  position: fixed; left: max(var(--e-4), env(safe-area-inset-left)); bottom: max(var(--e-4), env(safe-area-inset-bottom)); z-index: var(--z-modal);
  width: min(26rem, calc(100% - 2rem)); padding: 1.25rem;
  border-radius: var(--r-lg); background: var(--c-fondo); border: 1px solid var(--c-borde); box-shadow: var(--sombra-3);
  font-size: .9375rem; line-height: 1.5;
}
.cookies .acc { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.cookies .acc .btn { flex: 1; min-height: 2.75rem; padding: .4rem var(--e-4); font-size: .9375rem; }

/* ==========================================================================
   Movimiento reducido: todo estático y completo
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .nav-flotante.escondido { transform: translateX(-50%); }
  .orb-esfera, .galeria-pista, .escribiendo i { animation: none; }
  .galeria-pista > [aria-hidden="true"] { display: none; }
  .galeria-ventana { overflow-x: auto; }
  .tit-listo .w > span { transform: none; transition: opacity 300ms ease; }
  .msg, .ficha, .d2-card { transition: opacity 200ms ease; }
}