/* ══════════════════════════════════════════════════════════════
   ISAA · Sistema de diseño
   Tokens y reglas tomados del ISAA Brand Book v2.0 (junio 2026).
   Compromiso de tema único: el neumorfismo de ISAA depende del
   fondo claro #EEEEF4. Una inversión a oscuro rompería la marca,
   así que la página pinta todos sus colores de forma explícita.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Sólidos · tokens [BB] */
  --bg:#EEEEF4;
  --muted:#E6E7EC;
  --border:#DBDCE3;
  --fg:#1B1E2C;
  --mfg:#636680;
  --primary:#3994EF;   /* idéntico en el design system */
  --destructive:#EA3E3E; /* nuevo en el design system · error y alerta */
  --secondary:#35D46F;
  --accent:#624DCB;

  /* Código funcional fijo [BB] */
  --c-azul:#2563EB;
  /* Colores del logotipo — no son tokens del sistema [T14] */
  --logo-wordmark:#0075BE;
  --logo-simbolo:#4DC0DF;
  --c-verde:#16A34A;
  --c-morado:#7C3AED;
  --c-teal:#0D9488;
  --c-naranja:#FF9500;
  /* Variantes de texto [T33]. Los tokens de arriba se quedan para
     fondos, chips y gradientes; estos son para cuando el color
     carga texto. Pasan AA 4.5:1 sobre --bg y sobre --muted. */
  --primary-txt:#0F68C0;
  --secondary-txt:#247644;
  --c-naranja-txt:#985800;
  --c-morado-txt:#7631EC;
  --c-verde-txt:#0F7234;
  --c-teal-txt:#0B6F68;
  --c-azul-txt:#1555E4;

  /* Familia de gradientes [BB] · 135° */
  --g-azul:linear-gradient(135deg,#1D4ED8 0%,#2563EB 50%,#0EA5E9 100%);
  --g-teal:linear-gradient(135deg,#0F766E,#14B8A6);
  --g-violeta:linear-gradient(135deg,#6D28D9,#4F46E5);
  --g-verde:linear-gradient(135deg,#047857,#10B981);
  --g-navy:linear-gradient(145deg,#1A1A2E 0%,#16213E 55%,#0F3460 100%);

  /* Elevación · neumorfismo [BB] sombra dual */
  --e1:-6px -6px 16px rgba(255,255,255,.7), 6px 6px 16px rgba(163,177,198,.30);
  --e2:-8px -8px 24px rgba(255,255,255,.8), 12px 12px 30px rgba(163,177,198,.45);
  --inset:inset -4px -4px 10px rgba(255,255,255,.8), inset 4px 4px 10px rgba(163,177,198,.40);
  /* Elevación sobre fondo oscuro, foto o video.
     El neumorfismo supone la plancha clara #EEEEF4: la luz viene de
     arriba-izquierda porque hay superficie que la refleje. Sobre
     video o navy no la hay, y ese desplazamiento se lee como una
     mancha blanca en la esquina. Aquí el halo va centrado —sigue
     siendo dual, claro y oscuro— pero sin dirección. */
  --e-over:0 0 22px rgba(255,255,255,.13), 0 8px 26px rgba(27,30,44,.45);
  --e-over-2:0 0 30px rgba(255,255,255,.20), 0 14px 34px rgba(27,30,44,.55);
  --e1-dark:0 0 20px rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.32);

  /* Geometría */
  --container:1160px;
  --pad:40px;
  --r:16px;
  --r-sm:12px;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── Nulshock Bd · solo cifras [BB · Toolkit #36-#41-#51] ─────
   La fuente NO vive en el repo: es de pago y esto es público (.gitignore
   bloquea *.otf y *.woff2). Se sube al hosting en assets/fonts/.
   Si el archivo falta, cada cifra cae en Inter y no se rompe nada.
   Solo cifras: Nulshock no tiene minúsculas reales — en una frase larga
   el titular se leería todo en mayúsculas y un 52% más ancho. */
@font-face{
  font-family:Nulshock;
  src:url("fonts/nulshock-bd.woff2") format("woff2"),
      url("fonts/nulshock-bd.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Tipografía ─────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
.lnk{color:var(--primary-txt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lnk:hover{text-decoration-thickness:2px}
.lnk:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}

.h1{font-size:clamp(36px,4.4vw,60px);line-height:1.06;font-weight:800;letter-spacing:-.02em}
.h2{font-size:clamp(28px,3.4vw,46px);line-height:1.07;font-weight:700;letter-spacing:-.02em}
.h3{font-size:clamp(22px,2.1vw,28px);line-height:1.36;font-weight:600;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--mfg)}
.body{font-size:16px;line-height:1.55;color:var(--mfg)}
.card-t{font-size:22px;line-height:1.36;font-weight:600;letter-spacing:-.01em}
.overline{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tnum{font-variant-numeric:tabular-nums}

/* La regla del titular [BB]: la segunda cláusula en Primary */
.hl{color:var(--primary-txt)}

/* ── Estructura ─────────────────────────────────────────────── */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:clamp(64px,7vw,96px)}
.sec--muted{background:var(--muted)}
/* Primera sección de una página sin hero: despeja la nav fija. */
.sec--primera{padding-top:clamp(116px,11vw,152px)}
.sec--navy{background:var(--g-navy);color:#fff}
/* Sobre navy, la segunda cláusula usa --primary: --primary-txt está pensado para
   el fondo claro y ahí no contrasta. El texto de apoyo va en blanco translúcido. */
.sec--navy:not(.cta) .hl{color:var(--primary)}
.sec--navy:not(.cta) .lead{color:rgba(255,255,255,.8)}
.head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:clamp(48px,6vw,72px)}
.head .h2{max-width:900px}
.head .lead{max-width:620px}
.head .btn{margin-top:12px}

/* ── Componentes ────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:999px;
  background:var(--muted);box-shadow:var(--inset);
  font-size:13px;font-weight:600;color:var(--mfg);
  letter-spacing:.01em;
}
.chip--glass{background:rgba(255,255,255,.16);box-shadow:none;color:#fff;backdrop-filter:blur(6px)}
.chip--solid{box-shadow:none;color:#fff}
.chip--flat{box-shadow:none;background:var(--bg)}
.rotulo{font-size:13px;font-weight:600;color:var(--mfg);letter-spacing:.01em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;border:0;
  font:600 16px/1.5 Inter,sans-serif;letter-spacing:-.01em;
  cursor:pointer;transition:box-shadow .25s ease,filter .25s ease;
}
.btn--primary{background:var(--g-azul);color:#fff;box-shadow:var(--e1)}
.btn--primary:hover{box-shadow:var(--e2);filter:saturate(1.12)}
.btn--secondary{background:var(--bg);color:var(--primary-txt);box-shadow:var(--e1)}
.btn--secondary:hover{box-shadow:var(--e2)}
.btn--light{background:#fff;color:var(--fg);box-shadow:var(--e-over)}
.btn--light:hover{filter:brightness(.97)}
.btn--full{width:100%}
/* Donde no hay plancha clara debajo, la elevación se centra. */
.hero .btn,
.nav[data-solid="false"] .btn,
.sec--navy .btn,
.cta .btn{box-shadow:var(--e-over)}
.hero .btn:hover,
.nav[data-solid="false"] .btn:hover,
.sec--navy .btn:hover,
.cta .btn:hover{box-shadow:var(--e-over-2)}

.btn:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

.card{background:var(--bg);border-radius:var(--r);box-shadow:var(--e1);padding:32px}
.card--navy{background:rgba(255,255,255,.06);box-shadow:var(--e1-dark)}

.ico{
  width:48px;height:48px;border-radius:var(--r-sm);
  display:grid;place-items:center;flex:none;
}
.ico svg{width:26px;height:26px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:56px;height:56px}
.ico--lg svg{width:30px;height:30px}

.check{width:20px;height:20px;border-radius:999px;background:var(--c-verde);display:grid;place-items:center;flex:none}
.check svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;color:var(--fg)}

/* ── Slots de fotografía ────────────────────────────────────── */
/* En isaa.io sustituye cada .photo por <img> o background-image.
   Aquí van como slots porque el visor de Artifacts bloquea
   imágenes externas. Los tonos son los del registro emocional [BB]. */
.photo{position:relative;overflow:hidden;background:var(--muted);background-size:cover;background-position:center}
.photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo--warm{background-image:url(img/tono-warm.jpg)}
.photo--sofa{background-image:url(img/tono-sofa.jpg)}
.photo--desk{background-image:url(img/tono-desk.jpg)}

/* ── Nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-block:18px;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__links{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav__links a{position:relative;padding-block:4px;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:currentColor;opacity:.5;transition:right .3s ease}
.nav__links a:hover::after{right:0}
.nav .btn{padding:11px 22px;font-size:15px}

/* Estado sobre el hero */
.nav[data-solid="false"]{color:#fff}
.nav[data-solid="false"] .wordmark{color:#fff}
.nav[data-solid="false"] .mark{color:#fff}
/* Estado tras el hero */
.nav[data-solid="true"]{background:var(--bg);box-shadow:0 6px 22px rgba(27,30,44,.10);padding-block:12px;color:var(--fg)}

.brand{display:flex;align-items:center;gap:10px}
.mark{width:34px;height:34px;flex:none;color:var(--logo-simbolo)}
.wordmark{display:block;width:94px;color:var(--logo-wordmark)}
.wordmark svg{display:block;width:100%;height:auto}

/* ── Splash · el latido del smiley [BB] ─────────────────────── */
.splash{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;gap:20px;
  transition:opacity .5s ease,visibility .5s ease;
}
.splash[hidden]{opacity:0;visibility:hidden;display:grid}
.splash__mark{width:74px;height:74px;color:var(--logo-simbolo);animation:heartbeat 1.4s ease-in-out infinite}
.splash__txt{font-size:14px;color:var(--mfg);text-align:center}
@keyframes heartbeat{
  0%{transform:scale(1)} 14%{transform:scale(1.15)}
  28%{transform:scale(1)} 42%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{min-height:min(820px,100vh);display:flex;align-items:center;padding-block:168px 88px;color:#fff}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--fg)}
/* El video va detrás del velo (::before, z-index 1). El póster cubre
   el hueco mientras carga y se queda fijo con prefers-reduced-motion
   y en pantallas chicas, donde no se descarga el video. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(15,20,34,.86) 0%,rgba(20,26,42,.66) 46%,rgba(20,26,42,.34) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero .h1{color:#fff}
.hero .lead{color:rgba(255,255,255,.86);max-width:520px}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero__stats{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);
  margin-top:clamp(56px,8vw,96px);
}
.stat{display:flex;flex-direction:column;gap:4px;padding-left:clamp(20px,3vw,40px);border-left:1px solid rgba(255,255,255,.24)}
.stat:first-child{padding-left:0;border-left:0}
/* Nulshock solo en el dígito: «min» y «Siempre» son texto y van en Inter. */
.cifra{font-family:Nulshock,Inter,sans-serif;font-weight:700;letter-spacing:0}
.stat__n{font-size:clamp(30px,3.2vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.stat__l{font-size:15px;color:rgba(255,255,255,.78)}

/* ── Dolores · marquee sobre el titular ─────────────────────── */
.pains{min-height:740px;display:grid;place-items:center;overflow:hidden;padding-block:80px}
.pains__title{position:relative;z-index:1;text-align:center;max-width:900px;padding-inline:var(--pad)}
.marquee{position:absolute;left:0;right:0;z-index:2;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee--a{top:19%}
.marquee--b{bottom:19%}
.mq__track{display:flex;gap:20px;padding-right:20px;flex:none;animation:slide 46s linear infinite}
.marquee--b .mq__track{animation-direction:reverse}
/* La fila recorta con overflow:hidden; sin aire vertical se come la sombra dual
   de las tarjetas (--e1 llega a ~22px). El margen negativo deja todo en su sitio. */
.pains .marquee{padding-block:28px;margin-block:-28px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pain{
  display:flex;align-items:stretch;gap:0;flex:none;width:400px;height:96px;
  background:var(--bg);border-radius:var(--r);box-shadow:var(--e1);overflow:hidden;
}
.pain .photo{width:88px;flex:none}
.pain span{display:flex;align-items:center;padding:16px 20px;font-size:15px;line-height:1.35;font-weight:500}

/* ── Círculo · split 50/50 ──────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:720px;background:var(--muted)}
.split__media{position:relative;min-height:460px}
.split__body{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(40px,6vw,80px);max-width:620px}
.split__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* ── Pilares ────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pillar{display:flex;flex-direction:column;gap:20px;padding:40px}
.pillar__head{display:flex;align-items:center;gap:16px}
.pillar__ben{display:flex;flex-direction:column;gap:14px}
.pillar__ben div{display:flex;flex-direction:column;gap:4px}
.pillar__ben .overline{font-size:11px;color:var(--mfg)}
.pillar__feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:auto;padding-top:12px}
/* Con tres pills, 2×2 dejaba media fila vacía: esa tarjeta va en una sola columna. */
.pillar__feats:has(> :nth-child(3):last-child){grid-template-columns:1fr}
/* Pill plana [Toolkit #20]: tile de icono a color, sin caja ni sombra — el color
   lo da la función, no la tarjeta. El tile es la única superficie con radio. */
.pfeat{
  display:flex;align-items:center;gap:12px;min-width:0;padding:6px 0;
  font-size:13px;line-height:1.35;font-weight:500;color:var(--mfg);
}
.pfeat__ic{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center}
.pfeat__ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pfeat__t{min-width:0}

/* ── Testimonios ────────────────────────────────────────────── */
.masonry{columns:2;column-gap:24px}
.masonry .card{break-inside:avoid;margin-bottom:24px;display:block}
.masonry>*:first-child{margin-top:0}
.quote{font-size:18px;line-height:1.55;color:rgba(255,255,255,.9);margin:12px 0 24px}
.mk{font-size:46px;line-height:1;font-weight:800;color:rgba(255,255,255,.14)}
.who{display:flex;align-items:center;gap:12px}
.who__av{width:44px;height:44px;border-radius:999px;flex:none;background:linear-gradient(140deg,#3D4B66,#243049)}
.who__n{font-size:16px;font-weight:600}
.who__r{font-size:14px;color:rgba(255,255,255,.62)}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}

/* ── Compatibilidad + confianza ─────────────────────────────── */
/* La lista es el titular visual: dos filas a tamaño de display que se cruzan. */
.universo{padding-block:clamp(72px,8vw,112px)}
/* El titular cede el tamaño a la lista, que es la que habla aquí. */
.universo .h2{font-size:clamp(22px,2.3vw,32px);line-height:1.2}
/* Subtítulo a 15px: la jerarquía la marca el titular, no dos líneas del mismo tamaño. */
.universo__sub{max-width:620px;margin:0 auto;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}
.universo .marquee{position:relative;top:auto;bottom:auto}
/* Las dos filas son una sola zona de hover: frenan juntas (isaa.js). */
.universo__lista{position:relative}
/* Inter baja ~0.24em bajo la línea: con line-height 1.1 la fila recortaba la «g». */
.universo .marquee + .marquee{margin-top:clamp(-18px,-1.2vw,-6px)}
.universo .mq__track{--hueco:clamp(40px,5vw,72px);align-items:center;gap:var(--hueco);padding-right:var(--hueco);animation-duration:52s}
.mq__item{display:flex;align-items:center;gap:var(--hueco);flex:none;transition:opacity .35s ease}
.universo b{
  font-size:clamp(38px,6.2vw,92px);line-height:1.32;font-weight:800;letter-spacing:-.02em;
  color:#fff;white-space:nowrap;flex:none;
}
.mq__ic{
  width:clamp(38px,3.4vw,48px);height:clamp(38px,3.4vw,48px);flex:none;align-self:center;
  border-radius:16px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;
}
.mq__ic svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Las dos filas en blanco. Al apuntar a una palabra, esa se queda en blanco y las
   demás bajan; la lista, además, frena (isaa.js). */
.universo__lista:has(.mq__item:hover) .mq__item{opacity:.22}
.universo__lista:has(.mq__item:hover) .mq__item:hover{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Planes ─────────────────────────────────────────────────── */
/* Cuadro de planes [Términos 8.1] con la plancha del sistema: el precio en tabular,
   la separación por hairline y, en angosto, se desliza antes que apretar columnas. */
.cuadro{padding:8px 0;overflow-x:auto;margin-bottom:clamp(32px,4vw,48px)}
.cuadro table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.cuadro th,.cuadro td{padding:18px 24px;vertical-align:top;border-bottom:1px solid var(--border)}
.cuadro thead th{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mfg);padding-block:14px}
.cuadro tbody th{width:26%;font-size:16px;font-weight:600;color:var(--fg);line-height:1.35}
.cuadro tbody th span{display:block;font-size:13px;font-weight:500;color:var(--mfg);margin-top:2px}
.cuadro td{font-size:15px;line-height:1.55;color:var(--mfg)}
.cuadro__p{width:22%;font-family:Nulshock,Inter,sans-serif;font-size:21px;font-weight:700;color:var(--fg);letter-spacing:0;white-space:nowrap}
/* «MXN al mes» es texto: Inter, no Nulshock. */
.cuadro__p i{font-family:Inter,sans-serif;font-style:normal;font-size:13px;font-weight:500;letter-spacing:0;color:var(--mfg)}
.cuadro tbody tr:last-child th,.cuadro tbody tr:last-child td{border-bottom:0}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:20px;padding:40px;position:relative}
.plan--best{outline:2px solid var(--primary);outline-offset:-2px}
.plan__tag{position:absolute;top:-14px;right:24px;padding:7px 16px;border-radius:999px;background:var(--g-azul);color:#fff;font-size:13px;font-weight:700;box-shadow:var(--e1)}
.plan__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan__price b{font-family:Nulshock,Inter,sans-serif;font-size:clamp(38px,4.2vw,52px);font-weight:700;letter-spacing:0;line-height:1}
.plan__price i{font-style:normal;font-size:16px;font-weight:500;color:var(--mfg)}
.plan hr{border:0;border-top:1px solid var(--border);margin:0}
.plan .list{margin-top:4px}
.plan .list li{font-size:15px}
.plan__foot{margin-top:auto;padding-top:8px}

/* ── Pasos ──────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;position:relative}
.step .ico{margin-bottom:4px}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq__cat{margin:44px 0 4px;display:flex}
.faq__cat:first-child{margin-top:0}
.q{background:var(--bg);border-radius:var(--r);box-shadow:var(--e1);overflow:hidden}
.q summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 32px;font-size:18px;font-weight:600;letter-spacing:-.01em;
}
.q summary::-webkit-details-marker{display:none}
.q summary:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.q__x{width:20px;height:20px;flex:none;color:var(--primary);transition:transform .3s ease}
.q[open] .q__x{transform:rotate(135deg)}
.q__a{padding:0 32px 26px;font-size:16px;line-height:1.6;color:var(--mfg);max-width:64ch}

/* ── CTA final + footer ─────────────────────────────────────── */
.cta{padding-block:clamp(72px,9vw,120px);text-align:center}
.cta__in{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px}
.cta .h2{color:#fff}
.cta .lead{color:rgba(255,255,255,.8)}
.cta__mark{width:64px;height:64px;color:#fff}
/* Si el CTA sigue a una sección navy, dos navy seguidos no respiran: el CTA va
   sobre la plancha clara, entre esa sección y el footer. Hoy pasa en Inicio y en
   Cómo funciona; en las demás páginas el CTA sigue navy. */
.sec--navy + .cta{background:var(--bg);color:var(--fg)}
.sec--navy + .cta .h2{color:var(--fg)}
.sec--navy + .cta .lead{color:var(--mfg)}
.sec--navy + .cta .cta__mark{color:var(--logo-simbolo)}
.sec--navy + .cta .btn{box-shadow:var(--e1)}
.sec--navy + .cta .btn:hover{box-shadow:var(--e2)}
.cta:hover .cta__mark{animation:heartbeat 1.4s ease-in-out infinite}

.foot{padding-block:80px 48px}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.foot h4{font-size:17px;font-weight:600;margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.foot a{font-size:16px;color:rgba(255,255,255,.7);transition:color .2s}
.foot a:hover{color:#fff}
.foot__rule{border:0;border-top:1px solid rgba(255,255,255,.12);margin:56px 0 32px}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.65)}

/* Redes del footer. Sin tamaño explícito el SVG hereda el ancho del
   contenedor y se pinta a pantalla completa. */
.foot__redes{display:flex;gap:12px;margin-top:40px}
.foot__redes a{
  width:42px;height:42px;flex:none;border-radius:var(--r);
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);
  transition:background .25s ease,color .25s ease;
}
.foot__redes a:hover{background:rgba(255,255,255,.16);color:#fff}
.foot__redes a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.foot__redes svg{width:20px;height:20px;flex:none;fill:currentColor}

/* ── Tarjeta flotante ───────────────────────────────────────── */
.float{
  position:fixed;right:24px;bottom:24px;z-index:55;width:340px;
  /* Es fija: pasa sobre la plancha clara y sobre el footer navy. La luz blanca de
     --e2 ahí se lee como un halo: la luz va por dentro (filo superior) y la
     sombra, oscura y centrada. Dual, sin halo. */
  background:var(--bg);border-radius:var(--r);padding:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 36px rgba(27,30,44,.30), 0 3px 8px rgba(27,30,44,.14);
  display:flex;flex-direction:column;gap:12px;
  transform:translateY(140%);transition:transform .6s cubic-bezier(.2,.8,.25,1);
}
.float[data-in="true"]{transform:translateY(0)}
.float[hidden]{display:none}
[hidden]{display:none!important}
.float__x{position:absolute;top:14px;right:14px;width:26px;height:26px;border:0;border-radius:999px;background:var(--muted);color:var(--mfg);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
.float__x:hover{color:var(--fg)}
.float b{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}

/* ── Reveal ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv[data-in="true"]{opacity:1;transform:none}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:980px){
  :root{--pad:24px}
  .grid2,.grid3,.steps,.foot__cols{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split__media{min-height:340px}
  .masonry{columns:1}
  .nav__links{display:none}
  .float{right:16px;left:16px;width:auto;bottom:16px}
  .hero{padding-block:118px 64px}
  .hero__stats{margin-top:48px}
  .pains{min-height:660px}
  .marquee--a{top:12%}
  .marquee--b{bottom:12%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .mq__track{animation:none}
  .marquee{overflow-x:auto}
}

/* ══════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES · Nosotros · Cómo funciona · Blog
   Componentes que no existían en la home. Mismo sistema:
   nivel 1 = sombra dual, radio 16px mínimo, cuerpo en Muted FG.
   ══════════════════════════════════════════════════════════════ */

/* ── Página activa en la nav ────────────────────────────────── */
.nav__links a[aria-current="page"]{font-weight:600}
.nav__links a[aria-current="page"]::after{right:0;opacity:.9}

/* ── Hero de página interior ────────────────────────────────── */
/* Fondo Background, no foto a sangre: el hero a sangre es de la
   home. Aquí la foto es una superficie elevada más. [§7.1] */
.hero-p{padding-block:clamp(116px,11vw,152px) clamp(56px,6vw,80px)}
.hero-p__in{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:clamp(40px,6vw,72px);align-items:center}
.hero-p .h1,.hero-c .h1{font-size:clamp(31px,3.4vw,48px)}
.hero-p__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero-p__media{border-radius:var(--r);box-shadow:var(--e1);aspect-ratio:4/5;max-height:560px}

/* Variante centrada · Cómo funciona y Blog [§8.1 §9.1] */
.hero-c{padding-block:clamp(116px,11vw,152px) clamp(44px,4.5vw,60px);text-align:center}
.hero-c__in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}

/* ── Banda de fotografía de ancho de contenedor [§7.2] ─────── */
.band{height:clamp(220px,26vw,340px);border-radius:var(--r);box-shadow:var(--e1);margin-bottom:clamp(48px,6vw,72px)}

/* ── Bloque de texto alineado a la izquierda ───────────────── */
.blk{max-width:760px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(40px,5vw,56px)}

/* ── Tarjeta con chip de color por título [§7.2] ───────────── */
.grid3--even{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tcard{display:flex;flex-direction:column;gap:16px;padding:32px}
/* El rótulo que titula una tarjeta va en azul; los de sección siguen en --mfg. */
.tcard .rotulo{color:var(--primary-txt)}

/* ── En qué creemos · numeral grande [§7.3] ────────────────── */
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.belief{display:flex;flex-direction:column;gap:14px;padding:40px}
.belief__n{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--primary-txt)}

/* ── Por qué confiar · filas horizontales [§7.4] ───────────── */
.rows{display:flex;flex-direction:column;gap:12px}
.row{
  display:flex;align-items:center;gap:24px;
  background:var(--bg);border-radius:var(--r);box-shadow:var(--e1);
  padding:28px 32px;transition:box-shadow .3s ease;
}
.row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row__t{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.row .chip{flex:none}

/* ── Split titular / párrafos [§8.3] ───────────────────────── */
.split-t{display:grid;grid-template-columns:minmax(0,460px) minmax(0,540px);gap:clamp(40px,6vw,72px);justify-content:space-between;align-items:start}
.split-t__body{display:flex;flex-direction:column;gap:20px}

/* ── Funcionalidades [§8.2] · frase y nota ─────────────────── */
.feat__d{font-size:18px;line-height:1.55;color:var(--mfg)}

.feat__note{text-align:center;margin-top:56px;font-size:16px;color:var(--mfg)}

/* ── Blog · filtros [§9.2] ─────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:clamp(48px,6vw,72px)}
.filters .chip{cursor:default}
.filters .chip[data-on="true"]{background:var(--g-azul);color:#fff;box-shadow:var(--e1)}

/* ── Blog · tarjetas de artículo [§9.3] ────────────────────── */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post{
  background:var(--bg);border-radius:var(--r);box-shadow:var(--e1);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s ease;
}
.post:hover{box-shadow:var(--e2)}
.post__ph{aspect-ratio:16/10}
.post__body{padding:32px;display:flex;flex-direction:column;gap:12px;flex:1}
.post__t{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.36}
.post__meta{margin-top:auto;padding-top:8px;font-size:14px;color:var(--mfg)}
.post .chip{align-self:flex-start}

/* ── Blog · newsletter [§9.4] ──────────────────────────────── */
.news{max-width:620px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.news__form{display:flex;flex-wrap:wrap;gap:12px;width:100%;justify-content:center;margin-top:4px}
.news__in{
  flex:1;min-width:240px;padding:14px 24px;border:0;border-radius:999px;
  background:var(--bg);box-shadow:var(--inset);
  font:500 16px/1.5 Inter,sans-serif;color:var(--fg);
}
.news__in::placeholder{color:var(--mfg)}
.news__in:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.news__note{font-size:13px;color:var(--mfg)}

/* ── Responsive de las páginas interiores ──────────────────── */
@media (max-width:980px){
  .hero-p__in,.beliefs,.grid3--even,.split-t,.posts{grid-template-columns:1fr}
  .hero-p__media{aspect-ratio:4/3;max-height:none}
  .row{flex-wrap:wrap;gap:16px}
  .row__body{flex-basis:100%;order:2}
  .row .chip{order:1;margin-left:auto}
}

/* ══════════════════════════════════════════════════════════════
   MENÚ MÓVIL
   Con una sola página de anclas los links podían simplemente
   ocultarse. Con cuatro páginas eso deja el sitio sin navegación
   en teléfono: hace falta el desplegable.
   ══════════════════════════════════════════════════════════════ */

.burger{display:none}
.menu{display:none}

@media (max-width:980px){
  .burger{
    display:grid;place-items:center;flex:none;
    width:44px;height:44px;border:0;border-radius:var(--r);
    background:transparent;color:inherit;cursor:pointer;
  }
  .burger svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
  .burger:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
  .burger .burger__x{display:none}
  .burger[aria-expanded="true"] .burger__b{display:none}
  .burger[aria-expanded="true"] .burger__x{display:block}

  /* El panel es una superficie más: nivel 2, radio 16, sombra dual.
     Sobre el hero oscuro sigue siendo una tarjeta clara. */
  .menu{
    display:flex;flex-direction:column;gap:4px;
    margin-top:14px;padding:12px;
    background:var(--bg);border-radius:var(--r);box-shadow:var(--e2);
  }
  .menu[hidden]{display:none}
  .menu a{
    padding:14px 18px;border-radius:var(--r);
    font-size:17px;font-weight:500;color:var(--fg);
  }
  .menu a[aria-current="page"]{
    font-weight:600;background:var(--muted);box-shadow:var(--inset);
  }
  .nav__in .btn{padding:11px 18px}
}

/* ══════════════════════════════════════════════════════════════
   PÁGINAS LEGALES
   Documento de texto corrido, sin adornos. Mismo sistema.
   ══════════════════════════════════════════════════════════════ */

.legal{max-width:760px;margin:0 auto}
.legal h2{
  font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.3;
  margin-top:48px;margin-bottom:12px;
}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:16px;line-height:1.65;color:var(--mfg);margin-bottom:14px}
/* La tabla de planes de la cláusula 8.1 de los Términos. En pantallas angostas
   se desliza en horizontal antes que apretar las columnas. */
.legal__tabla{margin:0 0 18px;overflow-x:auto}
.legal__tabla table{width:100%;min-width:560px;border-collapse:collapse;text-align:left}
.legal__tabla th,.legal__tabla td{padding:14px 16px;vertical-align:top;font-size:15px;line-height:1.55;border-bottom:1px solid var(--border)}
.legal__tabla thead th{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}
.legal__tabla tbody th{font-weight:600;color:var(--fg);width:30%}
.legal__tabla td{color:var(--mfg)}
.legal__tabla tbody tr:last-child th,.legal__tabla tbody tr:last-child td{border-bottom:0}

/* Las viñetas de los documentos legales — definiciones, categorías de datos. */
.legal__lista{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.legal__lista li{font-size:16px;line-height:1.65;color:var(--mfg)}
.legal__meta{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);font-size:14px;color:var(--mfg)}
/* ══════════════════════════════════════════════════════════════
   PRECIOS · Gratis + calculadora
   Con cobro por persona, tres tarjetas fijas ya no representan
   el modelo: el total depende de cuánta gente cuidas.
   ══════════════════════════════════════════════════════════════ */

/* ── «Cómo se suma» ─────────────────────────────────────────── */
/* Dos columnas: a la izquierda el argumento y la aritmética, a la derecha la
   decisión. La calculadora es la única superficie elevada de la sección — es lo
   único con lo que se interactúa; lo demás va plano. */
.suma{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,72px);align-items:start}
.suma__texto{display:flex;flex-direction:column}
.suma__texto .blk{margin-bottom:clamp(28px,3vw,40px)}
/* Lo que no cambia con el precio: dos hechos con icono, planos, bajo la aritmética. */
.hechos{margin-top:36px;padding-top:32px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:24px}
.hecho{display:flex;flex-direction:column;gap:6px}
.hecho b{font-size:16px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.hecho p{font-size:15px;line-height:1.55;color:var(--mfg)}
.suma__panel{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.suma__cta .btn{width:100%}
/* El plan Gratis: alternativa, no oferta principal. Plancha plana, sin relieve. */
/* El plan Gratis: alternativa, no oferta principal. Sin palomitas —ya están arriba—:
   sus límites caben en un renglón. */
.gratis{background:var(--bg);border-radius:var(--r);padding:26px 32px;margin-bottom:clamp(28px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.gratis__cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.gratis__n{font-family:Nulshock,Inter,sans-serif;font-size:28px;font-weight:700;letter-spacing:0;line-height:1;color:var(--fg)}
.gratis__d{font-size:15px;line-height:1.55;color:var(--mfg)}
.gratis__lim{font-size:14px;line-height:1.6;color:var(--mfg);padding-top:10px;border-top:1px solid var(--border)}

.calc{display:flex;flex-direction:column;gap:18px;padding:40px}
.calc__q{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--fg)}
.calc__sel{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px}
.calc__n{
  min-width:48px;height:48px;padding:0 14px;flex:none;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--muted);box-shadow:var(--inset);
  font:600 16px/1 Inter,sans-serif;color:var(--mfg);
  transition:color .2s ease,box-shadow .2s ease,background .2s ease;
}
.calc__n:hover{color:var(--fg)}
.calc__n[aria-pressed="true"]{background:var(--g-azul);color:#fff;box-shadow:var(--e1)}
.calc__n:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

.calc__out{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin-top:4px;padding:28px;border-radius:var(--r);
  background:var(--muted);box-shadow:var(--inset);
}
.calc__col{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc__cifra{font-family:Nulshock,Inter,sans-serif;font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:0;line-height:1}
.calc__col--anual .calc__cifra{color:var(--primary-txt)}
.calc__pie{font-size:14px;line-height:1.45;color:var(--mfg)}
.calc hr{border:0;border-top:1px solid var(--border);margin:0}
.calc .list li{font-size:15px}
.calc__nota{font-size:13px;line-height:1.5;color:var(--mfg)}

@media (max-width:980px){
  .suma{grid-template-columns:1fr}
  .suma__panel{position:static}
  .calc__sel{grid-template-columns:repeat(2,auto)}
  .calc__out{grid-template-columns:1fr;gap:20px}
}

/* ── Desglose de precios [precios.html] ─────────────────────── */
/* Explica por qué dos personas no cuestan el doble que una. */
.desglose{display:flex;flex-direction:column;margin-top:clamp(20px,2.4vw,32px)}
/* Lo que pasa si te vas, junto a lo que pagas (vino de Inicio el 18 de septiembre). */
.desglose__salida{max-width:640px;margin-top:36px;padding:0;background:none;box-shadow:none}
.desglose__fila{
  display:grid;grid-template-columns:1fr auto auto;gap:8px 20px;align-items:baseline;
  padding:20px 4px;border-bottom:1px solid var(--border);
}
.desglose__q{font-size:16px;line-height:1.4;color:var(--mfg)}
.desglose__n{font-family:Nulshock,Inter,sans-serif;font-size:26px;font-weight:700;letter-spacing:0;line-height:1;color:var(--fg)}
.desglose__u{font-size:14px;color:var(--mfg)}
.desglose__fila--total{border-bottom:0;border-top:1px solid var(--border);padding-top:24px}
.desglose__fila--total .desglose__q{color:var(--fg);font-weight:600}
.desglose__fila--total .desglose__n{color:var(--primary-txt)}
@media (max-width:640px){
  .desglose__fila{grid-template-columns:1fr auto}
  .desglose__u{grid-column:2;text-align:right}
}

/* ══════════════════════════════════════════════════════════════
   Cómo funciona · teléfono 3D (como-funciona.html)
   Un escenario sticky; el teléfono es CSS 3D puro —frente, dorso y
   un canto hecho de capas— y las pantallas son las del design
   system. isaa.js (bloque cf3d) lo mueve según el scroll.
   Todo vive bajo .cf3d: no afecta a ninguna otra página.
   ══════════════════════════════════════════════════════════════ */
@property --tinte{syntax:'<color>';inherits:true;initial-value:rgba(37,99,235,0)}

.cf3d{position:relative;height:calc((var(--pasos,7) + 1.6) * 100vh);background:var(--bg)}
.cf3d__stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  --tinte:rgba(37,99,235,0);transition:--tinte .7s ease;
}

/* Titular de entrada, arriba: se va mientras el teléfono sube. */
.cf3d__intro{
  position:absolute;left:50%;top:calc(72px + 17vh);z-index:3;
  width:min(760px,calc(100% - 32px));transform:translate(-50%,0);
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
}
.cf3d__intro .h1{font-size:clamp(31px,3.4vw,48px)}

/* Escena 3D */
.cf3d__escena{position:absolute;inset:0;z-index:2;perspective:1900px;perspective-origin:50% 45%;pointer-events:none}
/* El pozo: la plancha hundida del sistema, teñida con el color funcional del paso. */
.cf3d__pozo{
  position:absolute;left:50%;top:50%;width:min(68vh,640px);aspect-ratio:1;border-radius:50%;
  background:var(--tinte);box-shadow:var(--inset);transform:translate(-50%,-50%);
}
/* El teléfono va a su tamaño real (410×864) y se escala dentro del transform. */
.cf3d__tel{
  position:absolute;left:50%;top:50%;width:410px;height:864px;margin:-432px 0 0 -205px;
  transform-style:preserve-3d;will-change:transform;
}
.cf3d__frente,.cf3d__dorso,.cf3d__canto{position:absolute;inset:0;border-radius:56px}
.cf3d__canto{background:#2a2e39}
.cf3d__frente{
  background:#15171e;box-shadow:inset 0 0 0 2px #3c4150;
  transform:translateZ(10px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.cf3d__pantalla{position:absolute;inset:10px;border-radius:46px;overflow:hidden;background:#F1F2F6}
/* Capturas de la plataforma a 390×816: la pantalla mide 390×844 y los 28px de arriba
   quedan libres como barra de estado, para que las esquinas no corten contenido. */
.cf3d__f{position:absolute;left:0;top:28px;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:top;pointer-events:none;opacity:0}
.cf3d__f[data-on]{opacity:1}
/* Reflejo que corre con el giro. */
.cf3d__brillo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.28) 48%,rgba(255,255,255,0) 60%);
  background-size:300% 100%;background-position:var(--brillo,50%) 0;
}
.cf3d__dorso{
  transform:rotateY(180deg) translateZ(10px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(160deg,#30343f 0%,#1d2029 100%);box-shadow:inset 0 0 0 2px #454a5a;
  display:grid;place-items:center;
}
.cf3d__logo{
  width:112px;height:112px;background:var(--logo-simbolo);
  -webkit-mask:url("img/simbolo.svg") center/contain no-repeat;mask:url("img/simbolo.svg") center/contain no-repeat;
}

/* Texto de cada paso: del lado contrario al teléfono. */
.cf3d__pasos{position:absolute;inset:0;z-index:3;list-style:none;margin:0;padding:0;pointer-events:none}
.cf3d__paso{
  position:absolute;top:50%;width:min(420px,34vw);
  display:flex;flex-direction:column;gap:14px;opacity:0;will-change:opacity,transform;
}
.cf3d__paso[data-lado="izq"]{left:max(48px,calc(50% - 540px))}
.cf3d__paso[data-lado="der"]{right:max(104px,calc(50% - 540px))}
.cf3d__paso .card-t{font-size:clamp(28px,2.8vw,40px);line-height:1.12;font-weight:700;letter-spacing:-.02em}
.cf3d__paso .list{margin-top:6px}
.cf3d__paso .list li{font-size:16px}

/* Riel de navegación entre pasos. */
.cf3d__riel{position:absolute;right:32px;top:50%;z-index:4;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;transition:opacity .4s ease}
.cf3d__riel button{
  width:38px;height:38px;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg);box-shadow:var(--e1);color:var(--mfg);
  font:700 12px/1 Inter,sans-serif;letter-spacing:.02em;transition:box-shadow .25s ease,color .25s ease;
}
.cf3d__riel button:hover{box-shadow:var(--e2);color:var(--fg)}
.cf3d__riel button[aria-current="step"]{background:var(--g-azul);color:#fff}
.cf3d__riel button:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.cf3d__nota{padding-block:40px}
.cf3d__nota .feat__note{margin-top:0}

@media (max-width:820px){
  .cf3d__intro{top:calc(72px + 4vh)}
  .cf3d__pozo{width:min(52vh,86vw)}
  .cf3d__paso,
  .cf3d__paso[data-lado="izq"],
  .cf3d__paso[data-lado="der"]{
    left:16px;right:16px;top:auto;bottom:4vh;width:auto;gap:8px;padding:20px 22px;
    border-radius:var(--r);background:var(--bg);box-shadow:var(--e1);
  }
  .cf3d__paso .card-t{font-size:24px}
  .cf3d__paso .feat__d{font-size:16px}
  /* En teléfono no caben las listas junto al teléfono: el paso muestra título y frase. */
  .cf3d__paso .list{display:none}
  .cf3d__riel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cf3d__stage{transition:none}
}