/* Plan Mayor · sitio web
   Marca: logotipo «Plan Mayor» (lettering Forma) en la web; isotipo P con ojos solo en la apertura, favicon e ícono.
   Paleta Nexo: cobalto, marfil, lima y tinta. Titulares Gantari, texto Atkinson Hyperlegible Next (OFL). */

@font-face { font-family: "Gantari"; src: url("assets/fonts/Gantari-VF.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("assets/fonts/AtkinsonHyperlegibleNext-VF.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --cobalto: #263BCB; --cobalto-hondo: #1E30B0; --tinta: #121C5C; --marfil: #F4F2E9; --marfil-2: #ECE9DC; --lima: #DDE96B; --blanco: #FFFFFF;
  --texto: #1A2563; --texto-suave: #4A5280; --linea: rgba(38, 59, 203, .16); --linea-clara: rgba(244, 242, 233, .22);
  --titular: "Gantari", system-ui, sans-serif; --lectura: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --salida: cubic-bezier(.16, 1, .3, 1); --suave: cubic-bezier(.65, 0, .35, 1); --pausada: cubic-bezier(.22, .61, .36, 1);
  --cab: 5.25rem; --margen: clamp(1.25rem, 4.4vw, 4rem); --radio: clamp(1.375rem, 2.4vw, 2.125rem);
}

/* ---------- base ---------- */
/* Escritorio a la escala que Manuel prefirió (equivale al zoom de 90 %): los tamaños fijos están en rem
   y bajan con la raíz; lo proporcional al ancho o al alto de la pantalla no cambia. En móvil la raíz queda en 16 px. */
@media (min-width: 961px) { html { font-size: 90%; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) - 0.5rem); }
body { margin: 0; background: var(--marfil); color: var(--texto); font: 400 1.0625rem/1.6 var(--lectura); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--titular); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; border-radius: 0.375rem; }
::selection { background: var(--lima); color: var(--tinta); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.saltar { position: fixed; left: 0.75rem; top: -60px; z-index: 300; background: var(--lima); color: var(--tinta); padding: 0.625rem 1rem; border-radius: 999px; font-weight: 700; transition: top .3s var(--salida); }
.saltar:focus { top: 0.75rem; }
.contenedor { width: min(90rem, 100% - 2 * var(--margen)); margin-inline: auto; }
.etiqueta { font: 700 .8125rem/1.2 var(--lectura); letter-spacing: .16em; text-transform: uppercase; }
.titulo { font-size: clamp(2.5rem, 6.2vw, 5.6rem); }
.num { font: 800 .9375rem/1 var(--titular); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

@view-transition { navigation: auto; }
.logo svg { view-transition-name: logotipo; }

/* ---------- botones ---------- */
.boton { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.375rem; padding: 0 1.625rem; border-radius: 999px; font: 700 1rem/1 var(--lectura); white-space: nowrap; isolation: isolate; overflow: hidden; transition: color .45s var(--salida), box-shadow .45s var(--salida), transform .45s var(--salida); }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .55s var(--salida); }
.boton:hover::before, .boton:focus-visible::before { transform: none; }
.boton:active { transform: scale(.97); }
.boton-lima { background: var(--lima); color: var(--tinta); }
.boton-lima::before { background: var(--marfil); }
.boton-linea { box-shadow: inset 0 0 0 1.5px currentColor; }
.boton-linea::before { background: currentColor; }
[data-tema="cobalto"] .boton-linea:hover, [data-tema="tinta"] .boton-linea:hover, .menu-movil .boton-linea:hover { color: var(--cobalto); }
[data-tema="marfil"] .boton-linea:hover { color: var(--marfil); }
.boton-linea:hover::before { background: var(--marfil); }
[data-tema="marfil"] .boton-linea:hover::before { background: var(--cobalto); }
.flecha { width: 1rem; height: 1rem; flex: none; background: currentColor; transition: transform .45s var(--salida);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.boton:hover .flecha { transform: translateX(0.25rem); }

/* ---------- apertura ---------- */
.apertura { display: none; }
.con-apertura .apertura { display: block; position: fixed; inset: 0; z-index: 200; background: var(--cobalto); animation: seguro-apertura 0s 12s forwards; }
.con-apertura body { overflow: hidden; }
.apertura-escena { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura-saltar { position: absolute; right: max(var(--margen), env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom)); color: var(--marfil); font: 700 .875rem/1 var(--lectura); letter-spacing: .04em; padding: 0.75rem 1.125rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linea-clara); opacity: 0; animation: aparece .6s .9s var(--salida) forwards; transition: background .3s; }
.apertura-saltar:hover { background: rgba(244, 242, 233, .12); }
.apertura.saliendo { transition: opacity .7s var(--pausada) .25s; opacity: 0; pointer-events: none; }
@keyframes seguro-apertura { to { visibility: hidden; } }
@keyframes aparece { to { opacity: 1; } }

/* ---------- cabecera ---------- */
.cabecera-in > :not(.logo) { transition: opacity .7s var(--pausada) .15s, color .45s var(--salida), transform .45s var(--salida); }
.con-apertura .cabecera-in > :not(.logo) { opacity: 0; transition: none; }
.con-apertura .logo svg { opacity: 0; }
.traspaso .cabecera { z-index: 210; }
.traspaso .logo svg { opacity: 1; }
.cabecera { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--marfil); transition: transform .6s var(--salida), color .45s var(--pausada); }
.cabecera::before { content: ""; position: absolute; inset: 0; background: var(--fondo-cab, transparent); backdrop-filter: blur(0.875rem) saturate(1.3); -webkit-backdrop-filter: blur(0.875rem) saturate(1.3); opacity: 0; transition: opacity .45s var(--pausada), background-color .45s var(--pausada); }
.cabecera.con-fondo::before { opacity: 1; }
.cabecera.oculta { transform: translateY(-100%); }
.cabecera[data-tema="cobalto"] { --fondo-cab: rgba(38, 59, 203, .82); }
.cabecera[data-tema="foto"] { --fondo-cab: rgba(18, 28, 92, .35); }
.cabecera[data-tema="tinta"] { --fondo-cab: rgba(18, 28, 92, .84); }
.cabecera[data-tema="marfil"] { --fondo-cab: rgba(244, 242, 233, .86); color: var(--cobalto); }
.cabecera[data-tema="marfil"].con-fondo { box-shadow: 0 1px 0 var(--linea); }
.cabecera-in { position: relative; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); height: var(--cab); padding-inline: var(--margen); max-width: calc(90rem + 2 * var(--margen)); margin-inline: auto; }
.logo { display: block; flex: none; }
.logo svg { height: clamp(1.5rem, 2.2vw, 1.875rem); width: auto; transform-origin: 0 0; }
.nav { display: flex; gap: clamp(1.125rem, 2.4vw, 2.25rem); margin-left: auto; font: 700 .9375rem/1 var(--lectura); }
.nav a { position: relative; padding: 0.5rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--salida); }
.nav a:hover::after, .nav a.activo::after { transform: scaleX(1); transform-origin: left; }
.cabecera-cta { min-height: 2.875rem; padding: 0 1.25rem; }
.cabecera[data-tema="marfil"] .cabecera-cta { background: var(--cobalto); color: var(--marfil); }
.cabecera[data-tema="marfil"] .cabecera-cta::before { background: var(--tinta); }
.menu-boton { display: none; width: 2.875rem; height: 2.875rem; border-radius: 50%; position: relative; margin-left: auto; box-shadow: inset 0 0 0 1.5px currentColor; }
.menu-boton span { position: absolute; left: 0.875rem; right: 0.875rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--salida); }
.menu-boton span:first-child { top: 1.1875rem; } .menu-boton span:last-child { top: 1.5625rem; }
.menu-abierto .menu-boton span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-abierto .menu-boton span:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu-movil { position: fixed; inset: 0; z-index: 90; background: var(--cobalto); color: var(--marfil); display: flex; flex-direction: column; justify-content: center; gap: 2.25rem; padding: calc(var(--cab) + 1.25rem) var(--margen) 2.5rem; clip-path: inset(0 0 100% 0); transition: clip-path .75s var(--suave); }
.menu-movil[hidden] { display: flex; visibility: hidden; }
.menu-abierto .menu-movil { clip-path: inset(0); visibility: visible; }
.menu-movil nav { display: grid; gap: 0.375rem; }
.menu-movil nav a, .menu-movil > .boton { opacity: 0; transform: translateY(1.875rem); transition: opacity .6s var(--salida), transform .8s var(--salida); transition-delay: calc(var(--i) * 60ms + 200ms); }
.menu-movil nav a { font: 800 clamp(2.2rem, 10vw, 3.4rem)/1.1 var(--titular); letter-spacing: -0.03em; }
.menu-movil > .boton { align-self: flex-start; }
.menu-abierto .menu-movil nav a, .menu-abierto .menu-movil > .boton { opacity: 1; transform: none; }
.menu-abierto .cabecera { color: var(--marfil); }
.menu-abierto .cabecera::before { opacity: 0; }
.menu-abierto .cabecera-cta { visibility: hidden; }

/* ---------- portada ---------- */
.hero { position: relative; background: var(--cobalto); color: var(--marfil); min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--cab) + clamp(1rem, 3vw, 2.5rem)); overflow: clip; }
.hero-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 5.5rem); align-items: center; }
.hero-texto { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); align-content: center; }
.hero-texto .etiqueta { color: var(--lima); }
.hero-titulo { font-size: clamp(3.4rem, 10vw, 9.6rem); line-height: .9; letter-spacing: -0.045em; }
.linea { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.linea > span { display: block; white-space: nowrap; }
.hero-bajada { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; max-width: 34ch; color: rgba(244, 242, 233, .9); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-foto { position: relative; margin: 0; align-self: center; }
.hero-foto-marco { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 1 / 1.1; background: var(--cobalto-hondo); }
.hero-foto :is(img, video) { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
/* montaje de video sobre la foto: entra con un fundido cuando ya está reproduciendo */
.hero-video { position: absolute; inset: 0; opacity: 0; }
.hero-video.en-marcha { opacity: 1; }
.sello { position: absolute; left: clamp(-28px, -2vw, -12px); bottom: clamp(1.25rem, 3vw, 2.5rem); display: inline-flex; align-items: center; gap: 0.625rem; background: var(--lima); color: var(--tinta); font: 700 .875rem/1 var(--lectura); padding: 0.8125rem 1.125rem; border-radius: 999px; box-shadow: 0 1.125rem 2.5rem -18px rgba(18, 28, 92, .6); }
.sello i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cobalto); animation: latido 2.4s var(--pausada) infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(38, 59, 203, .45); } 50% { box-shadow: 0 0 0 0.4375rem rgba(38, 59, 203, 0); } }
.hero-pie { display: flex; justify-content: space-between; align-items: center; padding-block: clamp(1.375rem, 3vw, 2.25rem); font: 700 .8125rem/1 var(--lectura); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 242, 233, .75); }
.bajar { display: inline-flex; align-items: center; gap: 0.75rem; }
.bajar i { width: 1.5px; height: 1.875rem; background: rgba(244, 242, 233, .35); position: relative; overflow: hidden; }
.bajar i::after { content: ""; position: absolute; inset: 0; background: var(--lima); transform: translateY(-100%); animation: baja 2.2s var(--suave) infinite; }
@keyframes baja { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
/* entrada de la portada (después de la apertura) */
.js .hero-entra { opacity: 0; transform: translateY(1.625rem); transition: opacity 1s var(--salida), transform 1.2s var(--salida); transition-delay: calc(var(--d) * 90ms + 200ms); }
.js .linea > span { transform: translateY(105%); transition: transform 1.25s var(--salida); }
.js .linea + .linea > span { transition-delay: .09s; }
.js .hero-foto-marco { clip-path: inset(100% 0 0 0 round var(--radio)); transition: clip-path 1.5s var(--suave) .15s; }
.js .hero-foto :is(img, video) { transform: scale(1.22); transition: transform 2.2s var(--salida) .15s; }
.js .hero-video { transition: transform 2.2s var(--salida) .15s, opacity 1.4s var(--suave); }
.hero-lista .hero-entra { opacity: 1; transform: none; }
.hero-lista .linea > span { transform: none; }
.hero-lista .hero-foto-marco { clip-path: inset(0 0 0 0 round var(--radio)); }
.hero-lista .hero-foto :is(img, video) { transform: scale(1.06); }

/* ---------- cinta ---------- */
.cinta { background: var(--lima); color: var(--cobalto); overflow: hidden; padding-block: clamp(0.875rem, 1.6vw, 1.375rem); }
.cinta-pista { display: flex; align-items: center; gap: clamp(1.375rem, 3vw, 2.75rem); width: max-content; animation: cinta 46s linear infinite; font: 800 clamp(1.25rem, 2.4vw, 2rem)/1 var(--titular); letter-spacing: -0.02em; white-space: nowrap; }
.cinta-pista i { width: .42em; height: .42em; border-radius: 50%; background: var(--cobalto); flex: none; }
@keyframes cinta { to { transform: translateX(calc(-50% - clamp(0.6875rem, 1.5vw, 1.375rem))); } }

/* ---------- reveal ---------- */
.js .revela { opacity: 0; transform: translateY(2.125rem); transition: opacity 1s var(--salida), transform 1.2s var(--salida); transition-delay: calc(var(--d, 0) * 100ms); }
.js .revela.visible { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }
/* títulos que entran palabra por palabra detrás de una máscara */
.js .dividido { opacity: 1; transform: none; }
.dividido .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.dividido .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.15s var(--salida); transition-delay: calc(var(--k) * 42ms); }
.dividido.visible .w > span { transform: none; }

/* ---------- nuestra mirada ---------- */
.mirada { padding-block: clamp(6rem, 14vw, 12.5rem); }
.mirada-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); gap: clamp(1.75rem, 6vw, 6.875rem); align-items: end; }
.mirada .etiqueta { grid-column: 1 / -1; color: var(--cobalto); }
.manifiesto { font: 700 clamp(1.85rem, 4.3vw, 4.25rem)/1.12 var(--titular); letter-spacing: -0.03em; color: var(--tinta); }
.manifiesto .p { opacity: .16; transition: opacity .5s var(--pausada); }
.manifiesto .p.on { opacity: 1; }
.mirada-foto { margin: 0; }
.mirada-foto .marco, .piloto-foto .marco { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; }
.mirada-foto img, .piloto-foto img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.mirada-foto figcaption { margin-top: 0.875rem; font-size: .9375rem; color: var(--texto-suave); }

/* ---------- pilares (tarjetas que se apilan) ---------- */
.pilares { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(6rem, 12vw, 11.25rem); }
.seccion-cabeza { display: grid; gap: 1.125rem; margin-bottom: clamp(2.5rem, 6vw, 5.5rem); max-width: 61.25rem; }
.seccion-cabeza .etiqueta { color: var(--cobalto); }
[data-tema="cobalto"] .seccion-cabeza .etiqueta, [data-tema="tinta"] .seccion-cabeza .etiqueta, .piloto .etiqueta, .cierre .etiqueta { color: var(--lima); }
.seccion-cabeza .titulo { color: inherit; }
.pilares .titulo, .empezar .titulo, .preguntas .titulo { color: var(--cobalto); }
.pilas { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
.pila { position: sticky; top: calc(var(--cab) + 1rem + var(--i) * 1.625rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 4rem); align-items: stretch; min-height: min(78vh, 40rem); padding: clamp(1.375rem, 3.4vw, 3rem); border-radius: calc(var(--radio) + 0.375rem); transform: scale(var(--s, 1)); transform-origin: 50% 0; box-shadow: 0 -1px 0 rgba(18, 28, 92, .04), 0 1.875rem 3.75rem -40px rgba(18, 28, 92, .45); }
.pila::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tinta); opacity: calc((1 - var(--s, 1)) * 4.5); pointer-events: none; }
.pila-blanca { background: var(--blanco); color: var(--tinta); }
.pila-lima { background: var(--lima); color: var(--tinta); }
.pila-cobalto { background: var(--cobalto); color: var(--marfil); }
.pila-texto { min-width: 0; container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(0.25rem, 1vw, 0.75rem); }
.pila h3 { font-size: clamp(2.2rem, 14cqw, 6.6rem); letter-spacing: -0.045em; }
.pila p { font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); max-width: 32ch; }
.pila .num { display: inline-flex; width: 3.25rem; height: 3.25rem; border-radius: 50%; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px currentColor; }
.pila-foto { margin: 0; border-radius: var(--radio); overflow: hidden; min-height: 16.25rem; }
.pila-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--s-img, 0) * .12)); transition: transform 1.4s var(--salida); }
.pila:hover .pila-foto img { transform: scale(1.03); }

/* ---------- producto ---------- */
.producto { background: var(--tinta); color: var(--marfil); padding-block: clamp(6rem, 12vw, 11.25rem); }
.producto-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 6vw, 7.5rem); }
.producto .titulo { color: var(--marfil); }
.paso { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 1.125rem; max-width: 30rem; opacity: .28; transition: opacity .6s var(--pausada); }
.paso.activo { opacity: 1; }
.paso .num { color: var(--lima); }
.paso h3 { font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -0.035em; }
.paso p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: rgba(244, 242, 233, .85); }
.producto-pasos .seccion-cabeza { margin-bottom: 0; }
.pasos-puntos { display: none; }
.producto-movil { position: sticky; top: calc(50vh - min(37vh, 22.5rem)); align-self: start; display: grid; justify-items: center; gap: 1rem; }
.telefono { width: min(100%, 22.5rem, 37vh); aspect-ratio: 9 / 19.2; border-radius: 13% / 6.2%; padding: 3.2%; background: #0B1240; box-shadow: 0 0 0 1.5px rgba(244, 242, 233, .14), 0 3.125rem 5.625rem -40px rgba(0, 0, 0, .7), 0 0 7.5rem -30px rgba(38, 59, 203, .7); }
.pantalla { container-type: inline-size; position: relative; height: 100%; border-radius: 10.5% / 5%; overflow: hidden; background: var(--marfil); color: var(--tinta); display: flex; flex-direction: column; }
.producto-nota { font-size: .8125rem; color: rgba(244, 242, 233, .6); letter-spacing: .06em; }
/* interfaz dentro del teléfono: todo en unidades del contenedor para escalar parejo */
.app-estado { display: flex; justify-content: space-between; align-items: center; padding: 5cqw 7cqw 2cqw; font: 700 3.6cqw/1 var(--lectura); }
.app-senal { display: inline-flex; gap: 1cqw; align-items: flex-end; }
.app-senal i { width: 1.2cqw; background: var(--tinta); border-radius: 1px; }
.app-senal i:nth-child(1) { height: 1.6cqw; } .app-senal i:nth-child(2) { height: 2.4cqw; } .app-senal i:nth-child(3) { height: 3.2cqw; }
.app-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 6cqw 4cqw; color: var(--cobalto); }
.app-logo { height: 5.2cqw; width: auto; }
.app-avatar { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--cobalto); color: var(--marfil); display: grid; place-items: center; font: 700 3.2cqw/1 var(--lectura); }
.vistas { position: relative; flex: 1; }
.vista { position: absolute; inset: 0; padding: 0 6cqw; opacity: 0; transform: translateY(5cqw); transition: opacity .55s var(--pausada), transform .8s var(--salida); pointer-events: none; }
.vista.activa { opacity: 1; transform: none; pointer-events: auto; }
.app-saludo { font: 700 3.6cqw/1.2 var(--lectura); color: var(--texto-suave); }
.app-titulo { font-size: 8.6cqw; letter-spacing: -0.04em; color: var(--cobalto); margin: 1.5cqw 0 5cqw; }
.burbuja { font-size: 3.5cqw; line-height: 1.4; padding: 3.4cqw 4cqw; border-radius: 4.5cqw; max-width: 86%; }
.burbuja.yo { justify-self: end; background: var(--cobalto); color: var(--marfil); border-bottom-right-radius: 1.2cqw; }
.burbuja.pm { justify-self: start; background: var(--blanco); border-bottom-left-radius: 1.2cqw; }
.burbuja.pm b { display: block; font: 800 3cqw/1 var(--titular); color: var(--cobalto); margin-bottom: 1.8cqw; letter-spacing: 0; }
.app-nota { font-size: 2.7cqw; color: var(--texto-suave); margin-top: 4cqw; }
.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5cqw; padding: 3cqw 5cqw 6cqw; background: var(--marfil); }
.app-tabs button { font: 700 3.1cqw/1 var(--lectura); padding: 3cqw 0; border-radius: 9cqw; color: var(--texto-suave); transition: background .45s var(--pausada), color .45s var(--pausada); }
.app-tabs button.activa { background: var(--cobalto); color: var(--marfil); }

/* pantallas del caso de Elena */
.caso { font-size: 1rem; line-height: 1.55; color: rgba(244, 242, 233, .72); max-width: 44ch; }
.app-sub { font: 700 2.7cqw/1 var(--lectura); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); margin: 5.4cqw 0 2.6cqw; }
.escala { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.4cqw; }
.escala i { height: 3.4cqw; border-radius: 2cqw; background: var(--marfil-2); }
.escala i.on { background: var(--cobalto); }
.escala i.aqui { background: var(--lima); box-shadow: inset 0 0 0 .55cqw var(--cobalto); }
.escala-txt { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin-top: 2.8cqw; font-size: 3.5cqw; }
.escala-txt span { color: var(--texto-suave); font-size: 2.9cqw; }
.atencion { list-style: none; margin: 0; padding: 0; display: grid; gap: 2cqw; }
.atencion li { display: flex; align-items: center; gap: 2.8cqw; background: var(--blanco); border-radius: 3.6cqw; padding: 3.2cqw 3.6cqw; font-size: 3.4cqw; }
.atencion li::before { content: ""; flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 .6cqw var(--cobalto); }
.nivel { margin-top: 3.4cqw; }
.nivel-tag { display: inline-block; margin-bottom: 1.6cqw; padding: 1.5cqw 2.4cqw; border-radius: 9cqw; background: var(--cobalto); color: var(--marfil); font: 700 2.5cqw/1 var(--lectura); letter-spacing: .1em; text-transform: uppercase; }
.nivel-tag.lima { background: var(--lima); color: var(--tinta); }
.nivel-tag.claro { background: var(--marfil-2); color: var(--cobalto); }
.persona { display: flex; align-items: center; gap: 3cqw; background: var(--blanco); border-radius: 4cqw; padding: 3cqw; }
.persona .ini { flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; background: var(--cobalto); color: var(--marfil); font: 700 3.1cqw/1 var(--lectura); }
.persona .ini.lima { background: var(--lima); color: var(--tinta); }
.persona .ini.tinta { background: var(--tinta); }
.persona strong { display: block; font-size: 3.5cqw; line-height: 1.25; }
.persona small { display: block; font-size: 2.9cqw; line-height: 1.3; color: var(--texto-suave); }
.vista .burbuja.pm { margin-top: 3.6cqw; max-width: 100%; }
.dimensiones { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin: 3cqw 0 3.6cqw; }
.dimensiones span { font: 700 2.8cqw/1 var(--lectura); padding: 2cqw 2.8cqw; border-radius: 9cqw; color: var(--cobalto); box-shadow: inset 0 0 0 .4cqw var(--linea); }
.dimensiones span.on { background: var(--cobalto); color: var(--marfil); box-shadow: none; }
.plan-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; }
.plan-tareas li { display: grid; gap: .8cqw; background: var(--blanco); border-radius: 4cqw; padding: 3.4cqw; }
.plan-tareas strong { font-size: 3.5cqw; line-height: 1.25; }
.plan-tareas small { font-size: 2.9cqw; color: var(--texto-suave); }
.estados { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 1.8cqw; }
.estados button { font: 700 2.6cqw/1 var(--lectura); padding: 1.9cqw 2.5cqw; border-radius: 9cqw; color: var(--texto-suave); box-shadow: inset 0 0 0 .4cqw var(--linea); transition: background .35s var(--pausada), color .35s var(--pausada), box-shadow .35s; }
.estados button[aria-pressed="true"] { background: var(--cobalto); color: var(--marfil); box-shadow: none; }
.estados button:nth-child(3)[aria-pressed="true"] { background: var(--lima); color: var(--tinta); }
.cuenta-mes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 4cqw; }
.cuenta-mes div { background: var(--blanco); border-radius: 4cqw; padding: 4.4cqw 2cqw; text-align: center; }
.cuenta-mes strong { display: block; font: 800 9.4cqw/1 var(--titular); letter-spacing: -0.03em; color: var(--cobalto); }
.cuenta-mes small { display: block; margin-top: 1.6cqw; font-size: 2.8cqw; color: var(--texto-suave); }

/* ---------- ventana (foto que se abre con el scroll) ---------- */
.ventana { height: 240vh; background: var(--marfil); --v: 1; --t: 0; }
.ventana-fija { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ventana-foto { position: absolute; inset: 0; margin: 0; clip-path: inset(calc(var(--v) * 26%) calc(var(--v) * 30%) round calc(var(--v) * 2.75rem + 0px)); }
.ventana-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--v) * .18)); }
.ventana-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 28, 92, 0) 30%, rgba(18, 28, 92, .78) 100%), linear-gradient(90deg, rgba(18, 28, 92, .45), rgba(18, 28, 92, 0) 60%); opacity: calc(1 - var(--v)); }
.ventana-texto { position: absolute; inset: auto 0 clamp(2.5rem, 8vh, 6rem); color: var(--marfil); display: grid; gap: 1.125rem; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 2.5rem)); }
.ventana-texto h2 { font-size: clamp(2.6rem, 7.2vw, 7.4rem); letter-spacing: -0.045em; max-width: 13ch; }
.ventana-texto em { font-style: normal; color: var(--lima); }
.ventana-texto p { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); max-width: 36ch; color: rgba(244, 242, 233, .88); }

/* ---------- primeros pasos ---------- */
.empezar { padding-block: clamp(6rem, 13vw, 12.5rem); }
.seccion-cabeza.dos { max-width: none; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: clamp(1.25rem, 5vw, 5rem); }
.seccion-cabeza.dos > div { display: grid; gap: 1.125rem; }
.seccion-cabeza.dos > p { font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); color: var(--texto-suave); max-width: 34ch; }
.ruta { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); --p: 0; }
.ruta-linea { position: absolute; left: 1.75rem; right: 1.75rem; top: 1.75rem; height: 2px; background: var(--linea); }
.ruta-linea span { position: absolute; inset: 0; background: var(--cobalto); transform: scaleX(var(--p)); transform-origin: left; }
.ruta-paso { position: relative; display: grid; gap: 0.875rem; align-content: start; padding-top: 0; }
.ruta-num { width: 3.625rem; height: 3.625rem; border-radius: 50%; display: grid; place-items: center; background: var(--marfil); color: var(--cobalto); box-shadow: inset 0 0 0 2px var(--cobalto); font: 800 1.375rem/1 var(--titular); margin-bottom: 1.125rem; transition: background .5s var(--pausada), color .5s var(--pausada); }
.ruta-paso.encendido .ruta-num { background: var(--cobalto); color: var(--marfil); }
.ruta-paso h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--tinta); letter-spacing: -0.03em; }
.ruta-paso p { color: var(--texto-suave); max-width: 30ch; }
.ruta-tag { justify-self: start; margin-top: 0.5rem; font: 700 .75rem/1 var(--lectura); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalto); background: var(--marfil-2); padding: 0.5625rem 0.75rem; border-radius: 999px; }

/* ---------- piloto ---------- */
.piloto { background: var(--cobalto); color: var(--marfil); padding-block: clamp(6rem, 13vw, 12.5rem); overflow: clip; }
.piloto-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .8fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: center; }
.piloto-texto { display: grid; gap: 1.375rem; justify-items: start; }
.piloto .titulo { font-size: clamp(2.5rem, 5vw, 4.6rem); }
.piloto-texto p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: rgba(244, 242, 233, .88); max-width: 40ch; }
.piloto-datos { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.dato strong { display: flex; align-items: baseline; gap: .04em; font: 800 clamp(5rem, 11vw, 10.5rem)/.85 var(--titular); letter-spacing: -0.05em; color: var(--lima); font-variant-numeric: tabular-nums; }
.dato strong small { font-size: .45em; letter-spacing: 0; }
.dato p { margin-top: 0.625rem; font-size: 1.0625rem; color: rgba(244, 242, 233, .85); }
.piloto .nota { font-size: .875rem; color: rgba(244, 242, 233, .65); border-top: 1px solid var(--linea-clara); padding-top: 1rem; }
.piloto-foto { margin: 0; }
.piloto-foto .marco { aspect-ratio: 3 / 4; }

/* ---------- preguntas ---------- */
.preguntas { padding-block: clamp(6rem, 12vw, 11.25rem); }
.preguntas-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 6vw, 6.875rem); align-items: start; }
.preguntas .seccion-cabeza { position: sticky; top: calc(var(--cab) + 2.5rem); }
.acordeon { border-top: 1.5px solid var(--linea); }
.acordeon details { border-bottom: 1.5px solid var(--linea); }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(1.375rem, 2.6vw, 2rem) 0; cursor: pointer; font: 800 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--titular); letter-spacing: -0.02em; color: var(--tinta); transition: color .3s; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--cobalto); }
.acordeon summary i { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cobalto); transition: background .4s var(--pausada), transform .6s var(--salida); }
.acordeon summary i::before, .acordeon summary i::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; top: 1.1875rem; height: 2px; border-radius: 2px; background: var(--cobalto); transition: transform .6s var(--salida), background .3s; }
.acordeon summary i::after { transform: rotate(90deg); }
.acordeon details.abierto summary i { background: var(--cobalto); transform: rotate(180deg); }
.acordeon details.abierto summary i::before, .acordeon details.abierto summary i::after { background: var(--marfil); }
.acordeon details.abierto summary i::after { transform: rotate(0); }
.respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--salida); }
.respuesta > p { overflow: hidden; min-height: 0; font-size: 1.0625rem; color: var(--texto-suave); max-width: 58ch; opacity: 0; transition: opacity .5s var(--pausada); }
details.abierto .respuesta { grid-template-rows: 1fr; }
details.abierto .respuesta > p { opacity: 1; padding-bottom: 1.75rem; }
.sin-js details[open] .respuesta { grid-template-rows: 1fr; }
.sin-js details[open] .respuesta > p { opacity: 1; padding-bottom: 1.75rem; }

/* ---------- cierre ---------- */
.cierre { position: relative; background: var(--cobalto); color: var(--marfil); overflow: clip; padding-block: clamp(7.5rem, 16vw, 15rem); isolation: isolate; }
.cierre-foto { position: absolute; inset: -12% 0; z-index: -1; }
.cierre-foto img { width: 100%; height: 100%; object-fit: cover; }
.cierre-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(38, 59, 203, .96) 20%, rgba(38, 59, 203, .7) 55%, rgba(38, 59, 203, .3)); }
.cierre-in { display: grid; gap: 1.625rem; justify-items: start; }
.cierre-titulo { font-size: clamp(3rem, 8.4vw, 8.4rem); letter-spacing: -0.045em; max-width: 12ch; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- pie ---------- */
.pie { background: var(--tinta); color: var(--marfil); padding-block: clamp(4rem, 8vw, 6.875rem) 2rem; overflow: clip; }
.pie-arriba { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.pie-lema { font: 800 clamp(1.75rem, 3.4vw, 3rem)/1 var(--titular); letter-spacing: -0.03em; color: var(--lima); }
.pie nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-weight: 700; }
.pie nav a { opacity: .8; transition: opacity .3s; }
.pie nav a:hover { opacity: 1; }
.pie-logo { display: block; margin-block: clamp(3rem, 7vw, 6rem) clamp(1.75rem, 4vw, 3rem); }
.pie-logo svg { width: 100%; height: auto; }
.pie-abajo { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; font-size: .9375rem; color: rgba(244, 242, 233, .75); border-top: 1px solid var(--linea-clara); padding-top: 1.375rem; }
.ver-apertura { font-weight: 700; color: var(--marfil); text-decoration: underline; text-decoration-color: var(--lima); text-underline-offset: 0.25rem; text-decoration-thickness: 2px; }
.pie-nota { margin-top: 1rem; font-size: .8125rem; color: rgba(244, 242, 233, .5); }

/* ---------- diálogo ---------- */
.dialogo { width: min(35rem, 100% - 2rem); border: 0; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radio); background: var(--marfil); color: var(--texto); box-shadow: 0 2.5rem 6.25rem -30px rgba(18, 28, 92, .6); opacity: 0; transform: translateY(1.5rem) scale(.98); transition: opacity .45s var(--pausada), transform .6s var(--salida), overlay .45s allow-discrete, display .45s allow-discrete; }
.dialogo[open] { opacity: 1; transform: none; }
@starting-style { .dialogo[open] { opacity: 0; transform: translateY(1.5rem) scale(.98); } }
.dialogo::backdrop { background: rgba(18, 28, 92, 0); backdrop-filter: blur(0); transition: background .45s, backdrop-filter .45s, overlay .45s allow-discrete, display .45s allow-discrete; }
.dialogo[open]::backdrop { background: rgba(18, 28, 92, .55); backdrop-filter: blur(0.375rem); }
@starting-style { .dialogo[open]::backdrop { background: rgba(18, 28, 92, 0); backdrop-filter: blur(0); } }
.dialogo .etiqueta { color: var(--cobalto); }
.dialogo h2 { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--cobalto); margin: 0.875rem 0 1rem; }
.dialogo p { color: var(--texto-suave); }
.dialogo ul { padding-left: 1.1em; margin: 1rem 0; display: grid; gap: 0.375rem; }
.dialogo-nota { font-size: .875rem; margin: 1.125rem 0 1.5rem; padding: 0.875rem 1rem; border-radius: 0.875rem; background: var(--marfil-2); }
.dialogo-cerrar { position: absolute; right: 1rem; top: 1rem; width: 2.625rem; height: 2.625rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--cobalto); box-shadow: inset 0 0 0 1.5px var(--linea); transition: background .3s, transform .5s var(--salida); }
.dialogo-cerrar:hover { background: var(--marfil-2); transform: rotate(90deg); }

/* ---------- adaptable ---------- */
@media (max-width: 1100px) {
  .piloto-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .piloto-foto { display: none; }
}
@media (max-width: 960px) {
  :root { --cab: 4.5rem; }
  .nav, .cabecera-cta { display: none; }
  .menu-boton { display: block; }
  .hero-in { grid-template-columns: 1fr; align-content: start; gap: 2rem; }
  .hero-foto { width: 100%; }
  .hero-foto-marco { aspect-ratio: 4 / 3.4; }
  .sello { left: 0.75rem; bottom: 0.75rem; }
  .mirada-in { grid-template-columns: 1fr; }
  .mirada-foto { max-width: 26.25rem; }
  .pila { grid-template-columns: 1fr; min-height: auto; top: calc(var(--cab) + 0.625rem + var(--i) * 1rem); }
  .pila-texto { gap: 1.25rem; }
  .pila-foto { height: 38vh; min-height: 13.75rem; }
  .producto-in { display: flex; flex-direction: column; gap: 0; }
  .producto-pasos { display: contents; }
  .producto-pasos .seccion-cabeza { order: 0; margin-bottom: 1.75rem; }
  .producto-movil { order: 1; position: static; }
  .telefono { width: min(58vw, 16.875rem); }
  .producto-nota { display: none; }
  .pasos-lista { order: 2; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 1.625rem calc(-1 * var(--margen)) 0; padding: 0 var(--margen) 0.25rem; scroll-padding-inline: var(--margen); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pasos-lista::-webkit-scrollbar { display: none; }
  .paso { flex: 0 0 min(84%, 23.75rem); min-height: 0; max-width: none; scroll-snap-align: center; justify-content: flex-start; gap: 0.625rem; padding: 1.375rem; border-radius: 1.375rem; background: rgba(244, 242, 233, .06); box-shadow: inset 0 0 0 1px rgba(244, 242, 233, .12); opacity: .5; transition: opacity .5s var(--pausada), background .5s var(--pausada); }
  .paso.activo { opacity: 1; background: rgba(244, 242, 233, .1); }
  .paso h3 { font-size: 1.65rem; }
  .paso p { font-size: 1rem; }
  .pasos-puntos { order: 3; display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.125rem; }
  .pasos-puntos i { width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: rgba(244, 242, 233, .3); transition: width .5s var(--salida), background .5s; }
  .pasos-puntos i.activo { width: 1.625rem; background: var(--lima); }
  .ventana { height: 200vh; }
  .ventana-foto { clip-path: inset(calc(var(--v) * 22%) calc(var(--v) * 10%) round calc(var(--v) * 1.75rem)); }
  .seccion-cabeza.dos { grid-template-columns: 1fr; }
  .ruta { grid-template-columns: 1fr; gap: 2.5rem; padding-left: 5.125rem; }
  .ruta-linea { left: 1.75rem; right: auto; top: 1.75rem; bottom: 1.75rem; width: 2px; height: auto; }
  .ruta-linea span { transform: scaleY(var(--p)); transform-origin: top; }
  .ruta-num { position: absolute; left: -82px; top: 0; margin: 0; }
  .preguntas-in { grid-template-columns: 1fr; }
  .preguntas .seccion-cabeza { position: static; margin-bottom: 0.5rem; }
}
@media (max-width: 640px) {
  .piloto-in { grid-template-columns: 1fr; }
  .hero-pie span:first-child { display: none; }
  .hero-pie { justify-content: flex-end; }
  .boton { min-height: 3.25rem; padding: 0 1.375rem; }
  .pie-abajo { flex-direction: column; align-items: flex-start; }
}
@media (max-height: 560px) and (max-width: 960px) {
  .producto-movil { position: static; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dividido .w > span { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .revela, .js .hero-entra { opacity: 1; transform: none; }
  .js .linea > span { transform: none; }
  .js .hero-foto-marco { clip-path: inset(0 round var(--radio)); }
  .cinta-pista { animation: none; }
  .ventana { height: auto; }
  .ventana-fija { position: relative; height: 90svh; }
  .ventana-foto { clip-path: none; }
  .ventana-foto::after { opacity: 1; }
  .ventana-texto { opacity: 1; transform: none; }
  .manifiesto .p { opacity: 1; }
  .pila { position: relative; top: auto; transform: none; }
}