/* La landing de Sociorro: un recorrido por el espacio en el que tu negocio pasa
   del caos a la órbita. Oscura y cálida (cielo con estrellas, nebulosas y un
   planeta), con etiquetas HUD y brillo neón, en los colores de la marca. Nada de
   rojo: terracota y ámbar para lo que brilla. Primero el celular.

   Orden: 1) tokens y fuente · 2) base · 3) compartido con las páginas por giro,
   función y guías (barra, menú, botones, formulario, pie, guía) · 4) portada ·
   5) subpáginas y calculadora · 6) movimiento reducido. */

/* ============ 1. Tokens y fuente ============ */
/* Bricolage Grotesque (licencia OFL, landing/fuentes/OFL.txt), solo latina, con
   ejes de grosor y de tamaño óptico: en titulares grandes se pone más expresiva. */
@font-face {
  font-family: "Bricolage";
  src: url("/l/fuentes/bricolage-grotesque-v1.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Mientras llega, Arial ajustada a sus medidas (medido en Chrome: el titular
   mide lo mismo con una que con otra), así nada brinca al cargar. */
@font-face {
  font-family: "Bricolage respaldo";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 98%;
  ascent-override: 94%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --noche: #0E0B09;
  --noche-2: #17120F;
  --noche-3: #211A15;
  --noche-4: #2A211B;
  --linea: rgba(245, 225, 200, .09);
  --linea-2: rgba(245, 225, 200, .16);
  --arena: #F5EFE0;
  --arena-2: #D9CCB8;
  --arena-3: #9C8E7C;
  --terracota: #D07A58;
  --terracota-brillo: #FF9E6E;
  --ambar: #E8B65E;
  --olivo: #A9BD86;
  --whatsapp: #25D366;
  /* Las series de las gráficas, las mismas validadas para daltonismo del panel. */
  --serie-a: #4F86CC;
  --serie-b: #D07A58;
  --radio: 18px;
  --titular: "Bricolage", "Bricolage respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --suave: cubic-bezier(.2, .7, .2, 1);
  --sombra-alta: 0 40px 80px -34px rgba(0, 0, 0, .9);
  --alto-barra: 68px;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

/* ============ 2. Base ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--noche); color: var(--arena);
  font: 16px/1.6 var(--texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: rgba(255, 158, 110, .35); color: var(--arena); }
a { color: var(--ambar); }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titular); line-height: 1.06; letter-spacing: -.025em; font-weight: 750; }
h2 { font-size: clamp(2.15rem, 6.8vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 18px; text-wrap: balance; }
h3 { font-size: 1.18rem; }
h4 { font-size: 1.04rem; }
p { margin: 0 0 12px; color: var(--arena-2); text-wrap: pretty; }
b { color: var(--arena); }
:focus-visible { outline: 2px solid var(--terracota-brillo); outline-offset: 3px; border-radius: 6px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Fondo: el espacio ----------
   El cielo vivo (estrellas en 3 profundidades, Vía Láctea, nebulosas, fugaces, el
   "despegue" y el festejo) lo pinta landing.js en <canvas class="cielo">. Sin JS
   quedan estas nebulosas en degradado y las estrellas de CSS. */
.fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60vmax 40vmax at 78% -5%, rgba(208, 122, 88, .24), transparent 60%),
    radial-gradient(50vmax 35vmax at -10% 40%, rgba(232, 182, 94, .08), transparent 60%),
    radial-gradient(55vmax 40vmax at 70% 95%, rgba(74, 62, 140, .10), transparent 65%),
    var(--noche);
}
.cielo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cielo-vivo .estrellas { display: none; }
.fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, var(--noche) 95%); }
.estrellas, .estrellas.lejos { position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent;
  box-shadow:
    12vw 8vh #fff, 33vw 18vh #f3e3c9, 52vw 6vh #fff, 71vw 22vh #ffd9b0, 88vw 12vh #fff, 8vw 36vh #fff, 27vw 47vh #ffd9b0,
    46vw 33vh #fff, 64vw 41vh #f3e3c9, 93vw 38vh #fff, 17vw 63vh #fff, 39vw 72vh #f3e3c9, 58vw 66vh #fff, 77vw 59vh #ffd9b0,
    96vw 70vh #fff, 5vw 88vh #f3e3c9, 24vw 94vh #fff, 49vw 86vh #fff, 69vw 92vh #ffd9b0, 85vw 84vh #fff;
  animation: titilar 5s ease-in-out infinite; }
.estrellas.lejos { transform: translate(3vw, 4vh) scale(.6); opacity: .6; animation-delay: -2.5s; }
@keyframes titilar { 50% { opacity: .35; } }

/* ---------- Pantalla de carga (solo con JS) ---------- */
.carga { display: none; }
.js .carga { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; background: var(--noche); transition: opacity .45s ease, visibility .45s; }
.js .carga.fuera { opacity: 0; visibility: hidden; }
.carga-centro { width: min(320px, 80vw); display: grid; gap: 10px; }
.carga-num { font: 800 clamp(3.6rem, 18vw, 6rem)/1 var(--mono); color: var(--arena); letter-spacing: -.04em; text-shadow: 0 0 24px rgba(255, 158, 110, .35); }
.carga-num small { font-size: .35em; color: var(--terracota-brillo); margin-left: 4px; }
.carga-barra { height: 3px; background: var(--noche-3); border-radius: 3px; overflow: hidden; }
.carga-barra i { display: block; height: 100%; width: var(--avance, 0%); background: linear-gradient(90deg, var(--terracota), var(--ambar)); box-shadow: 0 0 12px var(--terracota-brillo); }

/* ---------- Etiquetas HUD ---------- */
.hud { font: 600 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--terracota-brillo); margin: 0 0 14px; }
.hud::before { content: "▍"; margin-right: 6px; color: var(--ambar); animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
/* Lo que la gente busca en Google, dicho en claro arriba del titular. */
.clave { margin: -6px 0 16px; font-size: clamp(.92rem, 3.2vw, 1.05rem); font-weight: 650; color: var(--arena-2); max-width: 46ch; }

/* ============ 3. Compartido ============ */
/* ---------- Barra de arriba ----------
   El vidrio va en ::before y no en la barra: un backdrop-filter en la barra haría
   que la hoja del menú (position: fixed) se midiera contra ella y no contra la
   pantalla. */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top)); isolation: isolate; transition: padding .3s var(--suave); }
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14, 11, 9, .72);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--linea); }
.barra.compacta { padding-block: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--arena); text-decoration: none; font: 800 1.14rem var(--titular); letter-spacing: -.01em; }
.menu { display: none; margin-left: auto; gap: 24px; }
.menu a { position: relative; padding: 6px 0; color: var(--arena-2); text-decoration: none; font-size: .92rem; font-weight: 600; transition: color .2s; }
.menu a:hover, .menu a.actual { color: var(--arena); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--terracota), var(--ambar)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--suave); }
.menu a.actual::after, .menu a:hover::after { transform: scaleX(1); }
.barra .boton.chico { margin-left: auto; }
.avance-lectura { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--terracota), var(--ambar)); box-shadow: 0 0 10px var(--terracota-brillo); pointer-events: none; }

/* El menú del celular: un <details> (abre y cierra aunque no haya JS). */
.menu-movil > summary { list-style: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linea-2); background: rgba(23, 18, 15, .6); }
.menu-movil > summary::-webkit-details-marker { display: none; }
.hamburguesa { display: grid; gap: 4px; width: 18px; }
.hamburguesa i { height: 2px; border-radius: 2px; background: var(--arena); transition: transform .25s var(--suave), opacity .2s; }
.menu-movil[open] .hamburguesa i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-movil[open] .hamburguesa i:nth-child(2) { opacity: 0; }
.menu-movil[open] .hamburguesa i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-hoja { position: fixed; left: 0; right: 0; top: var(--alto-barra); bottom: 0; z-index: 29; overflow: auto; display: grid; align-content: start; gap: 2px;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); background: rgba(14, 11, 9, .97); animation: hoja .35s var(--suave); }
@keyframes hoja { from { opacity: 0; transform: translateY(-10px); } }
.menu-hoja > a { display: flex; align-items: baseline; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--linea); color: var(--arena); text-decoration: none;
  font: 750 1.55rem/1.15 var(--titular); letter-spacing: -.025em; }
.menu-hoja > a small { font: 600 .72rem var(--mono); color: var(--terracota-brillo); letter-spacing: .14em; }
.menu-hoja-botones { display: grid; gap: 10px; margin-top: 20px; }
html.menu-abierto { overflow: hidden; }
html.menu-abierto .guia { visibility: hidden; }
@media (min-width: 860px) {
  .menu { display: flex; }
  .menu-movil { display: none; }
  .barra .boton.chico { margin-left: 0; }
  .barra { padding: 14px 40px; }
  .barra.compacta { padding-block: 9px; }
}

/* ---------- Botones ---------- */
.boton { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid transparent; font: 700 1rem/1.2 var(--titular); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--terracota), #E69A62); color: #1A110C;
  box-shadow: 0 0 0 1px rgba(255, 158, 110, .35), 0 10px 30px -10px rgba(255, 158, 110, .65); transition: transform .2s var(--suave), box-shadow .25s ease, border-color .2s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 158, 110, .55), 0 16px 40px -10px rgba(255, 158, 110, .85); }
.boton:active { transform: translateY(0) scale(.98); }
.boton:disabled { opacity: .6; cursor: progress; }
.boton.fantasma { background: rgba(23, 18, 15, .35); color: var(--arena); border-color: rgba(245, 225, 200, .25); box-shadow: none; }
.boton.fantasma:hover { border-color: var(--terracota-brillo); }
.boton.chico { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.boton.whatsapp { background: var(--whatsapp); color: #062B14; box-shadow: 0 10px 30px -12px rgba(37, 211, 102, .7); margin-top: 8px; }
/* Un destello que cruza el botón principal de vez en cuando. */
.boton.brillo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-130%); animation: destello 5s ease-in-out 2.5s infinite; }
@keyframes destello { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* ---------- Secciones y piezas comunes ---------- */
main { position: relative; overflow-x: clip; }
.seccion { position: relative; max-width: 1240px; margin: 0 auto; padding: 84px 16px; scroll-margin-top: 70px; }
@media (min-width: 860px) { .seccion { padding: 128px 40px; } }
/* El número gigante en contorno detrás de cada sección de la portada. */
[data-num]::before { content: attr(data-num); position: absolute; z-index: -1; top: 34px; right: 6px; pointer-events: none;
  font: 800 clamp(7rem, 32vw, 21rem)/.8 var(--titular); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(245, 225, 200, .07); }
.seccion-cabeza { max-width: 780px; margin-bottom: 34px; }
.acento { color: var(--ambar); }
.bajada-seccion { margin-top: -4px; font-size: clamp(1.02rem, 3.4vw, 1.18rem); }
.rejilla { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 700px) { .rejilla.tres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { position: relative; padding: 22px; border-radius: var(--radio); border: 1px solid var(--linea);
  background: linear-gradient(160deg, rgba(33, 26, 21, .92), rgba(20, 16, 13, .92)); overflow: hidden; }
.tarjeta::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 158, 110, .45), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
/* La luz que sigue al cursor (landing.js pone --luz-x y --luz-y; solo con mouse). */
.tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(340px circle at var(--luz-x, 50%) var(--luz-y, 0%), rgba(255, 170, 120, .14), transparent 60%); }
.tarjeta:hover::after { opacity: 1; }
.tarjeta .icono { font-size: 1.8rem; display: block; margin-bottom: 12px; }
.tarjeta h3 { margin-bottom: 8px; }
.tarjeta p { margin: 0; font-size: .96rem; }
.dos { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lista-check { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.lista-check li { padding-left: 30px; position: relative; color: var(--arena-2); }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(169, 189, 134, .16); color: var(--olivo); font-weight: 800; font-size: .8rem; }

/* ---------- Revelar al bajar (solo con JS), escalonado ---------- */
.js .revela { opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .8s var(--suave), transform .8s var(--suave), filter .8s var(--suave); transition-delay: var(--retraso, 0s); }
.js .revela.visto { opacity: 1; transform: none; filter: none; }
:is(.rejilla, .ademas-rejilla, .lista-canales, .preguntas, .pasos) > .revela:nth-child(2) { --retraso: .07s; }
:is(.rejilla, .ademas-rejilla, .lista-canales, .preguntas, .pasos) > .revela:nth-child(3) { --retraso: .14s; }
:is(.rejilla, .ademas-rejilla, .lista-canales, .preguntas, .pasos) > .revela:nth-child(4) { --retraso: .21s; }
:is(.rejilla, .ademas-rejilla, .lista-canales, .preguntas, .pasos) > .revela:nth-child(5) { --retraso: .28s; }
:is(.rejilla, .ademas-rejilla, .lista-canales, .preguntas, .pasos) > .revela:nth-child(6) { --retraso: .35s; }
:is(.rejilla, .ademas-rejilla, .lista-canales, .preguntas, .pasos) > .revela:nth-child(n+7) { --retraso: .42s; }

/* ---------- Preguntas (portada y páginas) ---------- */
.preguntas { display: grid; gap: 10px; margin-top: 24px; max-width: 860px; }
.preguntas details { border: 1px solid var(--linea); border-radius: 16px; background: rgba(23, 18, 15, .85); padding: 0 18px; transition: border-color .3s, background-color .3s; }
.preguntas details[open] { border-color: rgba(255, 158, 110, .35); background: rgba(33, 26, 21, .9); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 700; position: relative; min-height: 44px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 0; top: 14px; font: 600 1.4rem var(--mono); color: var(--terracota-brillo); transition: transform .25s var(--suave); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-bottom: 16px; }
/* Abre suave donde el navegador ya lo sabe hacer; en los demás, abre igual. */
:is(.preguntas details, .comparar)::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--suave), content-visibility .4s allow-discrete; }
:is(.preguntas details, .comparar)[open]::details-content { block-size: auto; }

/* ---------- Empieza y el formulario ---------- */
.empieza-caja { position: relative; display: grid; gap: 34px; align-items: center; padding: 26px 18px; border-radius: 32px; border: 1px solid var(--linea-2); overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(208, 122, 88, .2), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, rgba(232, 182, 94, .1), transparent 60%),
    rgba(17, 13, 11, .84);
  box-shadow: var(--sombra-alta); }
@media (max-width: 599px) { .empieza-caja { padding: 24px 14px; border-radius: 26px; } .empieza-caja .formulario { padding: 16px; } }
@media (min-width: 900px) { .empieza-caja { grid-template-columns: 1fr 1fr; gap: 60px; padding: 56px; } }
.empieza-puntos { list-style: none; padding: 0; margin: 16px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.empieza-puntos li { padding: 6px 12px 6px 30px; position: relative; border-radius: 999px; border: 1px solid var(--linea-2); font-size: .9rem; color: var(--arena-2); background: rgba(14, 11, 9, .4); }
.empieza-puntos li::before { content: "✓"; position: absolute; left: 11px; color: var(--olivo); font-weight: 800; }
.formulario { position: relative; display: grid; gap: 14px; padding: 22px; border-radius: 24px; border: 1px solid var(--linea-2); background: rgba(14, 11, 9, .7); }
.formulario label { display: grid; gap: 6px; font-size: .88rem; font-weight: 650; color: var(--arena-2); }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px; font-weight: 500; color: var(--arena); background: var(--noche);
  border: 1px solid rgba(245, 225, 200, .18); border-radius: 12px; padding: 10px 12px; transition: border-color .2s, box-shadow .2s; }
.formulario textarea { min-height: 90px; resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--terracota-brillo); box-shadow: 0 0 0 3px rgba(255, 158, 110, .2); }
.dos-campos { display: grid; gap: 14px; }
@media (min-width: 600px) { .dos-campos { grid-template-columns: 1fr 1fr; } }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { min-height: 1.4em; margin: 0; font-weight: 650; }
.aviso-form.bien { color: var(--olivo); }
.aviso-form.ojo { color: var(--ambar); }
.letra-chica { font-size: .8rem; color: var(--arena-3); margin: 0; }
/* "¡Despegamos!": tapa el formulario cuando ya se mandó (landing.js). */
.despegamos { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center;
  border-radius: inherit; background: radial-gradient(80% 60% at 50% 30%, rgba(208, 122, 88, .25), transparent 70%), rgba(14, 11, 9, .97); }
.despegamos[hidden] { display: none; }
.despegamos svg { width: 76px; animation: despegar 1.4s var(--suave) both; }
.despegamos b { font: 800 clamp(1.8rem, 6vw, 2.4rem)/1.1 var(--titular); letter-spacing: -.03em; }
.despegamos p { margin: 0; max-width: 28ch; }
@keyframes despegar { 0% { transform: translateY(46px) scale(.8); opacity: 0; } 60% { transform: translateY(-10px); opacity: 1; } 100% { transform: none; } }
.flama { transform-box: fill-box; transform-origin: 50% 0; animation: flama .16s ease-in-out infinite alternate; }
@keyframes flama { to { transform: scaleY(.7); opacity: .8; } }

/* ---------- Pie: el horizonte y la marca gigante ---------- */
.pie { position: relative; overflow: hidden; display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 30px;
  padding: 90px 16px 0; color: var(--arena-3); }
.pie-horizonte { position: absolute; z-index: -1; left: 50%; top: 0; width: max(170vw, 1500px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, #2F1E15 0%, #160F0B 18%, #0F0B09 40%);
  box-shadow: 0 -1px 0 rgba(255, 210, 165, .55), 0 -10px 40px -6px rgba(255, 158, 110, .45), 0 -70px 140px -30px rgba(208, 122, 88, .4); }
.pie-ligas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; width: min(1100px, 100%); text-align: left; margin-bottom: 26px; }
@media (min-width: 860px) { .pie-ligas { grid-template-columns: repeat(4, 1fr); } }
.pie-ligas div { display: grid; gap: 8px; align-content: start; }
.pie-ligas b { color: var(--arena); font: 750 .98rem var(--titular); margin-bottom: 4px; }
.pie-ligas a { text-decoration: none; font-size: .9rem; color: var(--arena-2); transition: color .2s; }
.pie-ligas a:hover { color: var(--terracota-brillo); }
.pie-firma { display: grid; gap: 8px; justify-items: center; padding-top: 22px; border-top: 1px solid var(--linea); width: min(1100px, 100%); }
.pie .marca span { font-weight: 850; color: var(--arena); }
.pie nav { display: flex; gap: 18px; }
.pie nav a { color: var(--arena-2); }
.pie-gigante { margin: 26px 0 0; font: 800 clamp(4.6rem, 21vw, 17rem)/.78 var(--titular); letter-spacing: -.04em; white-space: nowrap; user-select: none;
  background: linear-gradient(180deg, rgba(245, 239, 224, .85), rgba(255, 158, 110, .35) 55%, rgba(245, 239, 224, 0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub .pie { margin-top: 10px; }

/* ---------- Asistontín (el SVG) ---------- */
.asistontin .ast-sombra { fill: rgba(0, 0, 0, .35); animation: sombra 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.asistontin .ast-todo { animation: flotar 4s ease-in-out infinite; }
.asistontin .ast-mano { transform-box: view-box; transform-origin: 150px 158px; animation: saludar 2.6s ease-in-out infinite; }
.asistontin .ast-ojo { transform-box: fill-box; transform-origin: center; animation: parpadeo 4.6s infinite; }
.asistontin .ast-ojos { filter: drop-shadow(0 0 5px #FFB36B); }
.asistontin .ast-antena { filter: drop-shadow(0 0 6px #E8B65E); animation: latido 1.8s ease-in-out infinite; }
.asistontin .ast-led { animation: latido 2.4s ease-in-out infinite; }
.asistontin .ast-oreja-izq { transform-box: view-box; transform-origin: 80px 90px; animation: oreja 6s ease-in-out infinite; }
.asistontin .ast-oreja-der { transform-box: view-box; transform-origin: 160px 90px; animation: oreja 6s ease-in-out infinite reverse; }
@keyframes flotar { 50% { transform: translateY(-9px); } }
@keyframes sombra { 50% { transform: scaleX(.86); opacity: .7; } }
@keyframes saludar { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } }
@keyframes parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes oreja { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-6deg); } 92% { transform: rotate(3deg); } }
@keyframes latido { 50% { opacity: .4; } }

/* ---------- Asistontín guía (abajo a la derecha) ---------- */
.guia { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: grid; justify-items: end; gap: 8px;
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.guia.activa { opacity: 1; transform: none; pointer-events: auto; }
.guia-boton { width: 78px; height: 78px; padding: 4px; border-radius: 50%; border: 1px solid rgba(255, 158, 110, .45); cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2A211B, #120E0B); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 24px -6px rgba(255, 158, 110, .55); }
.guia-boton .asistontin { width: 100%; height: 100%; }
.guia-globo { max-width: min(300px, calc(100vw - 110px)); background: var(--arena); color: #241A13; font-size: .9rem; font-weight: 600; line-height: 1.4;
  padding: 10px 14px; border-radius: 14px 14px 4px 14px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); transition: opacity .4s ease; }
.guia-globo:empty { display: none; }
/* En celular el globito tapa contenido: se calla solo al rato (landing.js). */
.guia-globo.callado { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .guia-boton { width: 64px; height: 64px; } }
.guia-panel { width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto; background: var(--noche-2); border: 1px solid rgba(255, 158, 110, .35);
  border-radius: 20px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.guia-panel[hidden] { display: none; }
.guia-panel-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.guia-cerrar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--arena); cursor: pointer; }
.guia-respuesta { background: var(--noche-3); border-radius: 14px; padding: 12px; color: var(--arena-2); font-size: .94rem; margin-bottom: 10px; }
.guia-respuesta:empty { display: none; }
.guia-preguntas { display: flex; flex-wrap: wrap; gap: 8px; }
.guia-preguntas button { min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(245, 225, 200, .2); background: transparent; color: var(--arena); font: inherit; font-size: .86rem; cursor: pointer; text-align: left; }
.guia-preguntas button:hover { border-color: var(--terracota-brillo); }

/* ---------- Página de "gracias" (sin JS) ---------- */
body.sencilla { display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: radial-gradient(60vmax 40vmax at 70% 0%, rgba(208, 122, 88, .25), transparent 60%), var(--noche); }
.caja-gracias { max-width: 480px; text-align: center; display: grid; gap: 10px; }
.caja-gracias h1 { font-size: 2.4rem; }

/* ============ 4. Portada ============ */
/* ---------- 01 · Despegue ---------- */
.hero { position: relative; min-height: calc(100svh - 64px); display: grid; align-items: center; gap: 8px; padding: 26px 16px 64px; max-width: 1240px; margin: 0 auto; }
.titulo { font-size: clamp(3.3rem, 15vw, 7rem); font-weight: 800; letter-spacing: -.035em; line-height: .94; margin-bottom: 22px; }
.titulo .linea { display: block; }
.neon { font-style: normal; color: var(--terracota-brillo);
  text-shadow: 0 0 6px rgba(255, 158, 110, .65), 0 0 22px rgba(255, 158, 110, .45), 0 0 60px rgba(208, 122, 88, .4); }
.bajada { font-size: clamp(1.02rem, 3.6vw, 1.22rem); max-width: 42ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.chips li { font: 600 .76rem var(--mono); letter-spacing: .05em; color: var(--arena-2); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 12px; background: rgba(23, 18, 15, .6); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--olivo); box-shadow: 0 0 10px var(--olivo); margin-right: 4px; animation: latido 1.6s ease-in-out infinite; }

/* Letras que aparecen una por una (las separa landing.js), sin partir palabras. */
.palabra { display: inline-block; white-space: nowrap; }
.js .letra { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(4deg); filter: blur(6px);
  animation: aparecer .7s var(--suave) forwards; animation-delay: calc(var(--i) * 32ms + .1s); animation-play-state: paused; }
/* "socorre." además deja pasar una ola de luz, letra por letra. */
.js .neon .letra { animation: aparecer .7s var(--suave) forwards, ola 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 32ms + .1s), calc(var(--i) * 70ms + 2.4s); animation-play-state: paused; }
/* Arrancan cuando se va la pantalla de carga, no debajo de ella. */
.js .listo-carga .letra { animation-play-state: running; }
@keyframes aparecer { to { opacity: 1; transform: none; filter: none; } }
@keyframes ola { 0%, 14%, 100% { color: var(--terracota-brillo); }
  7% { color: #FFE6D4; text-shadow: 0 0 8px #FFF3E8, 0 0 30px rgba(255, 158, 110, .95), 0 0 80px rgba(255, 158, 110, .6); } }

/* El faro: la sección a la que te llevó Asistontín se ilumina un momento. */
.faro .hud { animation: faro-hud 1.8s ease-out; }
@keyframes faro-hud { 30% { color: #FFE3CF; text-shadow: 0 0 12px rgba(255, 158, 110, .95), 0 0 34px rgba(255, 158, 110, .6); } }
[data-num].faro::before { animation: faro-num 1.9s ease-out; }
@keyframes faro-num { 30% { -webkit-text-stroke-color: rgba(255, 158, 110, .6); text-shadow: 0 0 60px rgba(255, 158, 110, .3); } }

/* La escena: el planeta, órbitas, Asistontín y los "satélites" con avisos. */
.hero-escena { position: relative; display: grid; justify-items: center; align-content: end; min-height: 400px; isolation: isolate; --mx: 0; --my: 0; }
/* El planeta bajo Asistontín: su horizonte, con atmósfera y un anillo. Solo CSS.
   La zona recorta y desvanece el planeta para que no tape la siguiente sección. */
.planeta-zona { position: absolute; z-index: -1; left: -60vw; right: -60vw; top: calc(100% - 150px); height: 360px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.planeta { position: absolute; left: 50%; top: 120px; width: min(165vw, 1020px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(255, 170, 120, .32), transparent 42%),
    radial-gradient(14% 4% at 34% 7%, rgba(20, 12, 8, .55), transparent 70%),
    radial-gradient(10% 3% at 63% 12%, rgba(20, 12, 8, .45), transparent 70%),
    radial-gradient(30% 3% at 52% 17%, rgba(255, 190, 140, .10), transparent 70%),
    linear-gradient(100deg, rgba(255, 190, 140, .10), transparent 42%, rgba(0, 0, 0, .35)),
    radial-gradient(circle at 50% 30%, #3B2519 0%, #22160F 38%, #120D0A 66%);
  box-shadow:
    0 -1px 0 rgba(255, 210, 165, .75),
    0 -8px 26px -4px rgba(255, 158, 110, .6),
    0 -46px 100px -18px rgba(208, 122, 88, .5); }
.planeta::after { content: ""; position: absolute; left: -24%; right: -24%; top: -3%; height: 17%; border-radius: 50%;
  border: 2px solid transparent; border-bottom-color: rgba(232, 182, 94, .55); border-top-color: rgba(232, 182, 94, .07);
  transform: rotate(-5deg); filter: drop-shadow(0 0 6px rgba(232, 182, 94, .5)); }
.hero-orbitas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-orbitas i { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 2.5; border: 1px solid rgba(255, 190, 140, .14); border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); }
.hero-orbitas i + i { width: 158%; border-style: dashed; opacity: .55; transform: translate(-50%, -42%) rotate(9deg); }
.hero-escena .asistontin { position: relative; z-index: 1; width: min(60vw, 320px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
  translate: calc(var(--mx) * -8px) calc(var(--my) * -6px); transition: translate .3s ease-out; }
.globo { position: relative; z-index: 2; background: var(--arena); color: #241A13; font-weight: 600; padding: 12px 16px; border-radius: 16px; max-width: 260px; margin-bottom: 6px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); }
.globo b { color: #8A4A30; }
.globo::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; background: var(--arena); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.satelites { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Cada satélite: su lugar, el paralaje del mouse (--prof) y al bajar se abre (--d). */
.satelite { position: absolute; --prof: 14; --dx: 0; --dy: 0;
  transform: translate(calc(var(--mx) * var(--prof) * 1px + var(--dx) * var(--p, 0) * 110px), calc(var(--my) * var(--prof) * 1px + var(--dy) * var(--p, 0) * 70px));
  transition: transform .3s ease-out; }
.sat-caja { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; white-space: nowrap;
  background: rgba(28, 22, 18, .74); border: 1px solid rgba(255, 210, 170, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05); animation: flotar 6s ease-in-out infinite; }
.sat-icono { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 158, 110, .14); font-size: 1.05rem; }
.sat-caja b { display: block; font-size: .82rem; line-height: 1.25; }
.sat-caja small { display: block; font-size: .7rem; color: var(--arena-3); }
.s1 { left: 0; top: 38%; --prof: 18; --dx: -1; --dy: -.4; }
.s2 { right: 0; top: 62%; --prof: 26; --dx: 1; --dy: .5; }
.s2 .sat-caja { animation-delay: -3s; }
.s3, .s4 { display: none; }
.js .satelite { opacity: 0; }
.js .listo-carga .satelite { opacity: 1; transition: opacity .9s ease 1.1s, transform .3s ease-out; }
.js .listo-carga .s2 { transition-delay: 1.4s, 0s; }
.js .listo-carga .s3 { transition-delay: 1.7s, 0s; }
.js .listo-carga .s4 { transition-delay: 2s, 0s; }
.nota-escena { position: absolute; z-index: 3; right: 0; bottom: -6px; margin: 0; font: 600 .62rem var(--mono); color: var(--arena-3); letter-spacing: .14em; text-transform: uppercase; }
.bajar { display: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr .95fr; padding: 32px 40px 96px; gap: 24px; }
  .hero-escena { min-height: 580px; }
  .hero-escena .asistontin { width: 360px; }
  .s1 { left: -4%; top: 20%; }
  .s2 { right: -6%; top: 8%; }
  .s3 { display: block; left: -8%; top: 60%; --prof: 10; --dx: -1.2; --dy: .3; }
  .s3 .sat-caja { animation-delay: -1.5s; }
  .s4 { display: block; right: -4%; top: 54%; --prof: 22; --dx: 1.1; --dy: .5; }
  .s4 .sat-caja { animation-delay: -4.5s; }
  .bajar { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; text-decoration: none;
    font: 600 .66rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--arena-3); }
  .bajar i { position: relative; width: 1px; height: 46px; background: linear-gradient(var(--linea-2), transparent); overflow: hidden; }
  .bajar i::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 12px; border-radius: 3px; background: var(--terracota-brillo); animation: bajar 2s var(--suave) infinite; }
}
@keyframes bajar { from { transform: translateY(-12px); } to { transform: translateY(46px); } }
/* Al bajar, el texto se va y los satélites se abren (inicio.js escribe --p). */
.hero.vivo .hero-texto { opacity: calc(1 - var(--p, 0) * 1.3); transform: translateY(calc(var(--p, 0) * -70px)); }
.hero.vivo .hero-escena { transform: translateY(calc(var(--p, 0) * 50px)); }

/* ---------- Marquesina ---------- */
.marquesina { position: relative; display: grid; gap: 10px; padding: 14px 0; margin: 4px -3vw 0; transform: rotate(-1.4deg); overflow: hidden;
  border-block: 1px solid var(--linea); background: rgba(17, 13, 11, .78);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta { display: flex; width: max-content; animation: cinta 46s linear infinite; font: 650 .8rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--arena-2); white-space: nowrap; }
.cinta.al-reves { animation-direction: reverse; animation-duration: 60s; color: var(--terracota-brillo); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- 02 · Del caos a la órbita ----------
   inicio.js escribe en .caos: --orden (0 revuelto → 1 en órbita), --titulo
   (cambio de frase) y data-etapa (qué tarjeta se ve). Sin JS: ya en órbita. */
.caos { position: relative; max-width: 1240px; margin: 0 auto; padding: 84px 16px; scroll-margin-top: 70px; --orden: 1; --titulo: 1; --abre: .62; }
@media (min-width: 900px) { .caos { --abre: 1; } }
.caos-escenario { display: grid; gap: 26px; }
.caos-titulo > span { display: block; }
.caos-titulo .despues { margin-top: 6px; }
.caos-tarjetas { display: grid; gap: 12px; margin-top: 24px; }
.caos-tarjetas .tarjeta { padding: 18px; }
@media (min-width: 760px) { .caos:not(.vivo) .caos-tarjetas { grid-template-columns: repeat(3, 1fr); } }
.caos-campo { position: relative; height: min(460px, 120vw); container-type: size; }
.anillo-caos { position: absolute; left: 50%; top: 50%; width: 72cqw; height: 84cqh; border-radius: 50%; translate: -50% -50%;
  border: 1px dashed rgba(255, 190, 140, .28); opacity: var(--orden); animation: girar 80s linear infinite; }
.nucleo { position: absolute; left: 50%; top: 50%; width: clamp(70px, 22cqw, 118px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  transform: translate(-50%, -50%) scale(calc(.45 + .55 * var(--orden))) rotate(calc(var(--orden) * 135deg));
  background: radial-gradient(circle at 40% 35%, #3B2519, #160F0B); opacity: calc(.35 + .65 * var(--orden));
  box-shadow: 0 0 0 1px rgba(255, 190, 140, .3), 0 0 calc(10px + 50px * var(--orden)) rgba(255, 158, 110, .5), 0 0 140px rgba(208, 122, 88, calc(.35 * var(--orden))); }
.nucleo svg { width: 64%; }
.pieza { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; padding: 6px 11px 6px 7px; border-radius: 999px; white-space: nowrap;
  font-size: .72rem; background: rgba(33, 26, 21, .94); border: 1px solid var(--linea-2); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
  transform: translate(-50%, -50%)
    translate(calc((var(--x0) * var(--abre) + (var(--x1) - var(--x0) * var(--abre)) * var(--orden)) * 1cqw), calc((var(--y0) * var(--abre) + (var(--y1) - var(--y0) * var(--abre)) * var(--orden)) * 1cqh))
    rotate(calc(var(--r0) * (1 - var(--orden)) * 1deg));
  border-color: rgba(255, 190, 140, calc(.12 + .3 * var(--orden))); }
.pieza em { font-style: normal; font-size: .95rem; margin-right: 6px; }
/* Del "¿cuánto vendí?" al "Ventas": el ancho de cada texto va de uno a otro. */
.pieza .duda, .pieza .orden { display: inline-block; overflow: hidden; vertical-align: middle; }
.pieza .duda { max-width: calc((1 - var(--orden)) * 13em); opacity: calc(1 - var(--orden) * 1.6); color: var(--arena-2); font-weight: 600; }
.pieza .orden { max-width: calc(var(--orden) * 8em); opacity: calc(var(--orden) * 1.6 - .6); color: var(--arena); }
@keyframes girar { to { rotate: 360deg; } }
@keyframes deriva { 50% { translate: 0 -7px; } }
@media (min-width: 900px) {
  .caos-escenario { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; }
  .caos-campo { height: 520px; }
  .pieza { font-size: .84rem; padding: 7px 13px 7px 8px; }
  .pieza em { font-size: 1.05rem; }
}
/* La versión que se queda fija al bajar. */
.caos.vivo { max-width: none; height: 300vh; padding: 0 16px; }
.caos.vivo .caos-escenario { position: sticky; top: 0; height: 100svh; max-width: 1240px; margin: 0 auto; padding: calc(var(--alto-barra) + 18px) 0 18px; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.caos.vivo .caos-campo { height: 100%; min-height: 0; }
.caos.vivo .pieza { animation: deriva 5s ease-in-out infinite; animation-delay: calc(var(--x0) * -.11s); }
.caos.vivo .caos-titulo { display: grid; }
.caos.vivo .caos-titulo > span { grid-area: 1 / 1; margin: 0; }
.caos.vivo .caos-titulo .antes { opacity: calc(1 - var(--titulo)); transform: translateY(calc(var(--titulo) * -14px)); }
.caos.vivo .caos-titulo .despues { opacity: var(--titulo); transform: translateY(calc((1 - var(--titulo)) * 14px)); }
.caos.vivo .caos-tarjetas { display: grid; margin-top: 12px; }
.caos.vivo .caos-tarjetas .tarjeta { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--suave), transform .5s var(--suave); }
.caos.vivo[data-etapa="1"] .tarjeta:nth-child(1),
.caos.vivo[data-etapa="2"] .tarjeta:nth-child(2),
.caos.vivo[data-etapa="3"] .tarjeta:nth-child(3) { opacity: 1; transform: none; }
.caos.vivo .caos-tarjetas .tarjeta p { font-size: .9rem; }
@media (max-width: 899px) {
  .caos.vivo { height: 260vh; }
  .caos.vivo h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .caos.vivo .caos-tarjetas .tarjeta { padding: 14px 16px; }
  .caos.vivo .caos-tarjetas .icono { display: inline; font-size: 1.1rem; margin-right: 6px; }
  .caos.vivo .caos-tarjetas h3 { display: inline; font-size: 1rem; }
  .caos.vivo .caos-tarjetas p { margin-top: 6px; }
  .caos.vivo[data-etapa="4"] .tarjeta:nth-child(3) { opacity: .3; transform: none; }
}
@media (min-width: 900px) {
  .caos.vivo .caos-escenario { grid-template-rows: none; align-content: center; }
  .caos.vivo .caos-campo { height: min(560px, 74svh); }
  /* En la computadora las tarjetas se juntan una debajo de otra y al final se apagan. */
  .caos.vivo .caos-tarjetas { gap: 10px; }
  .caos.vivo .caos-tarjetas .tarjeta { grid-area: auto; }
  .caos.vivo[data-etapa="2"] .tarjeta:nth-child(1),
  .caos.vivo[data-etapa="3"] .tarjeta:is(:nth-child(1), :nth-child(2)) { opacity: .55; transform: none; }
  .caos.vivo[data-etapa="4"] .tarjeta { opacity: .25; transform: none; }
}

/* ---------- 03 · El recorrido ---------- */
.tour-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 4px 16px; }
.tour-chips::-webkit-scrollbar { display: none; }
.tour-chips a { flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--linea-2); color: var(--arena-2); background: rgba(23, 18, 15, .6); font-weight: 650; font-size: .9rem; transition: background .25s, color .25s; }
.tour-chips a.actual { color: #1A110C; background: linear-gradient(135deg, var(--terracota), var(--ambar)); border-color: transparent; }
.tour-capitulos { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 6px 16px 18px; overscroll-behavior-x: contain; }
.tour-capitulos::-webkit-scrollbar { display: none; }
.capitulo { flex: 0 0 min(86%, 380px); scroll-snap-align: center; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 18px; }
.cap-num { display: block; margin-bottom: 6px; font: 800 .8rem var(--mono); letter-spacing: .2em; color: var(--terracota-brillo); }
.cap-texto h3 { font-size: clamp(1.4rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }
.cap-texto p { font-size: 1rem; }
.cap-texto .lista-check { margin-top: 12px; gap: 8px; font-size: .95rem; }
.pantalla-mini { height: 440px; }
.tour-telefono { display: none; }
@media (min-width: 900px) {
  .tour-chips { display: none; }
  .tour-capitulos { display: grid; gap: 56px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .capitulo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: center; }
  .pantalla-mini { height: 600px; }
  .cap-texto p { font-size: 1.1rem; max-width: 46ch; }
  /* Con JS: el celular se queda fijo y la pantalla cambia según el capítulo. */
  .tour.con-telefono { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 48px; }
  .tour.con-telefono .tour-capitulos { gap: 0; }
  .tour.con-telefono .capitulo { grid-template-columns: 1fr; min-height: 76vh; align-content: center; opacity: .28; transition: opacity .5s var(--suave); }
  .tour.con-telefono .capitulo.actual { opacity: 1; }
  .tour.con-telefono .pantalla-mini { display: none; }
  .tour.con-telefono .tour-telefono { display: block; justify-self: center; position: sticky; top: calc(50svh - 330px + var(--alto-barra) / 2); align-self: start; margin-top: 8vh; }
}
@media (min-width: 900px) and (max-height: 820px) { .tel-marco { scale: .84; transform-origin: top center; } .tour.con-telefono .tour-telefono { top: calc(var(--alto-barra) + 16px); } }
.tel-marco { position: relative; width: 320px; height: 650px; border-radius: 50px; padding: 11px; background: #0A0806; border: 1px solid rgba(245, 225, 200, .18);
  box-shadow: 0 0 0 7px #19130F, 0 0 0 8px rgba(245, 225, 200, .1), 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 90px -20px rgba(255, 158, 110, .45);
  transform: perspective(1400px) rotateY(calc(var(--mx, 0) * -7deg)) rotateX(calc(var(--my, 0) * 5deg)); transition: transform .4s ease-out; }
.tel-isla { position: absolute; z-index: 3; top: 22px; left: 50%; width: 94px; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.tel-pantalla { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: #14110E; }
.tel-pantalla .capa { position: absolute; inset: 0; opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .45s var(--suave), transform .6s var(--suave); }
.tel-pantalla .capa.actual { opacity: 1; transform: none; }
.tel-pantalla .app { border: 0; border-radius: 0; padding-top: 58px; padding-inline: 14px; font-size: .84rem; }
.tel-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.tel-puntos i { width: 6px; height: 6px; border-radius: 6px; background: var(--linea-2); transition: width .3s var(--suave), background .3s; }
.tel-puntos i.actual { width: 22px; background: var(--terracota-brillo); }

/* Las pantallas de ejemplo: el mismo aire del panel de verdad. */
.app { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px 12px 70px; overflow: hidden;
  background: #14110E; border: 1px solid var(--linea-2); border-radius: 26px; font-size: .8rem; color: var(--arena-2); box-shadow: var(--sombra-alta); }
.app-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.app-cabeza b { font: 750 1.06rem var(--titular); color: var(--arena); }
.app-ej { flex-shrink: 0; font: 600 .58rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--arena-3); border: 1px solid var(--linea-2); padding: 3px 7px; border-radius: 99px; }
.app-buscar { padding: 9px 12px; border-radius: 12px; background: #1E1A16; color: var(--arena-3); }
.app-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.app-lista li { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px; background: #1E1A16; }
.app-foto { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #2A231D; font-size: 1.15rem; }
.app-dato { flex: 1; min-width: 0; display: grid; }
.app-dato b { color: var(--arena); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dato small { color: var(--arena-3); font-size: .72rem; }
.app-etq { flex-shrink: 0; font-size: .66rem; font-weight: 700; padding: 4px 8px; border-radius: 99px; background: rgba(245, 225, 200, .08); color: var(--arena-2); }
.app-etq.ambar { background: rgba(232, 182, 94, .16); color: var(--ambar); }
.app-etq.olivo { background: rgba(169, 189, 134, .16); color: var(--olivo); }
.app-flotante { position: absolute; right: 14px; bottom: 76px; padding: 10px 15px; border-radius: 99px; font-weight: 800; color: #1A110C;
  background: linear-gradient(135deg, var(--terracota), #E69A62); box-shadow: 0 10px 24px -10px rgba(255, 158, 110, .8); }
.app-barra { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 11px 6px 16px; text-align: center; font-size: 1.05rem;
  background: #1E1A16; border-top: 1px solid var(--linea); }
.app-barra span { position: relative; opacity: .45; filter: grayscale(.6); }
.app-barra .actual { opacity: 1; filter: none; }
.app-barra .actual::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 3px; border-radius: 3px; transform: translateX(-50%); background: var(--terracota-brillo); }
.app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app-kpis span { display: grid; gap: 2px; padding: 9px 8px; border-radius: 12px; background: #1E1A16; font-size: .64rem; color: var(--arena-3); }
.app-kpis b { font: 800 .98rem var(--titular); color: var(--arena); letter-spacing: -.02em; }
.app-kpis .destaca { background: linear-gradient(160deg, rgba(169, 189, 134, .2), #1E1A16); }
.app-kpis .destaca b { color: var(--olivo); }
.app-grafica { padding: 12px; border-radius: 14px; background: #1E1A16; }
.app-barras { height: 118px; display: flex; align-items: flex-end; gap: 9px; border-bottom: 1px solid var(--linea); }
.app-barras > span { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 3px; }
.app-barras i { flex: 1; height: calc(var(--v) * 100%); border-radius: 4px 4px 1px 1px; background: var(--serie-a); transform-origin: bottom; }
.app-barras i.g { background: var(--serie-b); }
.js .app-barras i { transform: scaleY(.05); transition: transform .9s var(--suave); }
.js .activa .app-barras i { transform: none; }
.app-barras > span:nth-child(2) i { transition-delay: .06s; }
.app-barras > span:nth-child(3) i { transition-delay: .12s; }
.app-barras > span:nth-child(4) i { transition-delay: .18s; }
.app-barras > span:nth-child(5) i { transition-delay: .24s; }
.app-barras > span:nth-child(6) i { transition-delay: .3s; }
.app-leyenda { display: flex; gap: 14px; margin-top: 8px; font-size: .66rem; }
.app-leyenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--serie-a); }
.app-leyenda .g::before { background: var(--serie-b); }
.app-movs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app-movs li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #1E1A16; }
.app-movs b { color: var(--arena); }
.app-anuncio { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #1E1A16; }
.app-anuncio-cabeza { display: flex; gap: 10px; align-items: center; }
.app-anuncio-cabeza b { display: block; color: var(--arena); font-size: .86rem; }
.app-anuncio-cabeza small { color: var(--ambar); font-size: .7rem; font-weight: 650; }
.app-texto { margin: 0; min-height: 6.2em; font-size: .82rem; line-height: 1.5; color: var(--arena); }
.app-texto.escribiendo::after { content: "▍"; color: var(--terracota-brillo); animation: cursor 1s steps(1) infinite; }
.app-tags { margin: 0; color: #8DB3E8; font-size: .76rem; }
.app-estados { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app-estados li { padding: 9px 10px; border-radius: 12px; font-size: .74rem; font-weight: 650; }
.app-estados .ok { background: rgba(169, 189, 134, .14); color: var(--olivo); }
.app-estados .espera { background: rgba(232, 182, 94, .14); color: var(--ambar); }
.app-semana { padding: 10px 12px; border-radius: 14px; background: #1E1A16; }
.app-semana small { color: var(--arena-3); font-size: .66rem; }
.app-semana div { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 6px; text-align: center; font: 600 .68rem var(--mono); color: var(--arena-3); }
.app-semana span { display: grid; justify-items: center; gap: 5px; }
.app-semana i { width: 6px; height: 6px; border-radius: 50%; background: var(--linea-2); }
.app-semana i.si { background: var(--terracota-brillo); box-shadow: 0 0 6px var(--terracota-brillo); }
.app-wa { display: grid; gap: 6px; padding: 12px; border-radius: 16px; border: 1px solid rgba(37, 211, 102, .25); background: linear-gradient(160deg, rgba(37, 211, 102, .12), #1E1A16 70%); }
.app-wa small { color: var(--arena-3); font-size: .66rem; }
.app-wa p { margin: 0; padding: 9px 11px; border-radius: 12px 12px 12px 4px; background: #23302A; color: #E8F3EA; font-size: .78rem; line-height: 1.45; }
.app-wa-boton { justify-self: end; padding: 7px 12px; border-radius: 99px; background: var(--whatsapp); color: #062B14; font-weight: 800; font-size: .72rem; }
.app-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.etq { font-style: normal; font-size: .64rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.e1 { background: rgba(232, 182, 94, .18); color: var(--ambar); }
.e2 { background: rgba(79, 134, 204, .22); color: #8DB3E8; }
.e3 { background: rgba(169, 189, 134, .18); color: var(--olivo); }
.e4 { background: rgba(208, 122, 88, .22); color: var(--terracota-brillo); }
.app-ini { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--arena); font-weight: 800; font-size: .72rem;
  background: linear-gradient(135deg, #3B2A20, #2A211B); border: 1px solid var(--linea-2); }
.app-etqs { display: flex; gap: 4px; margin-top: 3px; }
.app-flujo { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #1E1A16; border: 1px solid rgba(169, 189, 134, .3); }
.app-switch { flex-shrink: 0; position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--olivo); }
.app-switch i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FDF8EE; }
.app-url { padding: 7px 10px; border-radius: 10px; background: #1E1A16; font: .64rem var(--mono); color: var(--arena-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tienda-cabeza { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.app-logo { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #1A110C; font: 800 1.1rem var(--titular);
  background: linear-gradient(135deg, var(--ambar), var(--terracota)); }
.app-catalogo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-catalogo > span { display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: #1E1A16; }
.app-catalogo em { font-style: normal; display: grid; place-items: center; height: 70px; margin-bottom: 4px; border-radius: 10px; font-size: 1.8rem;
  background: radial-gradient(circle at 50% 40%, #3A2C22, #221A15); }
.app-catalogo b { color: var(--arena); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-catalogo small { color: var(--ambar); font-weight: 750; }
.app-catalogo i { font-style: normal; margin-top: 4px; padding: 5px; border-radius: 99px; text-align: center; background: var(--whatsapp); color: #062B14; font-weight: 800; font-size: .6rem; }

/* "Y además…" */
.ademas { margin-top: 64px; }
.ademas-titulo { font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.ademas-rejilla { display: grid; gap: 12px; }
@media (min-width: 700px) { .ademas-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ademas-rejilla { grid-template-columns: repeat(3, 1fr); } }
.tarjeta.mini { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.tarjeta.mini .icono { flex-shrink: 0; width: 46px; height: 46px; margin: 0; display: grid; place-items: center; border-radius: 14px; font-size: 1.45rem; background: rgba(255, 158, 110, .1); }
.tarjeta.mini h4 { margin-bottom: 4px; }
.tarjeta.mini p { font-size: .92rem; }

/* ---------- 04 · El asistente ---------- */
.chat-demo { justify-self: center; width: 100%; max-width: 460px; display: grid; overflow: hidden; border-radius: 28px; border: 1px solid var(--linea-2);
  background: linear-gradient(180deg, rgba(30, 24, 20, .94), rgba(18, 14, 11, .95)); box-shadow: var(--sombra-alta), 0 0 80px -30px rgba(255, 158, 110, .35); }
.chat-cabeza { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea); background: rgba(14, 11, 9, .5); }
.chat-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #1E1A16; border: 1px solid rgba(255, 158, 110, .35); }
.chat-avatar svg { width: 24px; height: 24px; }
.chat-cabeza b { display: block; line-height: 1.15; font-family: var(--titular); }
.chat-cabeza small { font-size: .74rem; color: var(--olivo); }
.chat-cabeza .punto { width: 6px; height: 6px; }
.chat-cuerpo { display: grid; align-content: start; gap: 10px; padding: 16px; }
.burbuja { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; }
.burbuja.yo { justify-self: end; background: rgba(208, 122, 88, .22); border: 1px solid rgba(255, 158, 110, .3); border-bottom-right-radius: 4px; }
.burbuja.ia { justify-self: start; background: var(--noche-3); border: 1px solid var(--linea); border-bottom-left-radius: 4px; color: var(--arena-2); }
.burbuja.hecho { color: var(--arena); background: rgba(169, 189, 134, .1); border-color: rgba(169, 189, 134, .35); }
.foto-demo { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; font-size: 2.4rem; margin-bottom: 6px;
  background: radial-gradient(circle at 50% 40%, #4a3426, #1E1712); }
.escribiendo { display: none; justify-self: start; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--noche-3); border: 1px solid var(--linea); }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--arena-3); animation: brinco 1s ease-in-out infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
.escribiendo.mostrar { display: inline-flex; }
@keyframes brinco { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .5; } }
.propuesta-demo { justify-self: start; width: min(100%, 330px); padding: 14px; border-radius: 16px; background: var(--noche-2); border: 1px solid var(--linea); border-left: 4px solid var(--serie-a); display: grid; gap: 10px; }
.propuesta-demo .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.propuesta-demo .cifras span { display: grid; font-size: .72rem; color: var(--arena-3); background: var(--noche-3); border-radius: 10px; padding: 6px 8px; }
.propuesta-demo .cifras b { font: 800 1.05rem var(--titular); color: var(--arena); }
.propuesta-demo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: .9rem; color: var(--arena-2); }
.botones-demo { display: flex; justify-content: flex-end; gap: 8px; }
.botones-demo span { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--linea); font-weight: 700; font-size: .88rem; transition: transform .15s, box-shadow .3s; }
.botones-demo .si { background: var(--terracota); color: #1A110C; border-color: transparent; }
.propuesta-demo.presionado .si { transform: scale(.93); box-shadow: 0 0 0 5px rgba(255, 158, 110, .3); }
.chat-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; border-top: 1px solid var(--linea); }
.repetir { min-height: 40px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--linea-2); background: transparent; color: var(--arena); font: inherit; font-size: .86rem; cursor: pointer; }
.repetir:hover { border-color: var(--terracota-brillo); }
.nota-demo { margin: 0 0 0 auto; font: .72rem var(--mono); color: var(--arena-3); }
/* La plática que corre sola (inicio.js va quitando .oculto). */
.chat-demo .oculto { display: none !important; }
.chat-demo .entra { animation: entra .45s var(--suave) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- 05 · Tus canales ---------- */
.sistema { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.sistema::before { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 158, 110, .32), transparent 70%); filter: blur(24px); }
.sol { position: absolute; left: 50%; top: 50%; width: 22cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #3B2519, #160F0B);
  box-shadow: 0 0 0 1px rgba(255, 190, 140, .3), 0 0 40px rgba(255, 158, 110, .45), 0 0 120px rgba(208, 122, 88, .35); }
.sol svg { width: 64%; animation: girar 30s linear infinite; }
.orbita { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; border: 1px dashed rgba(245, 225, 200, .18); animation: girar 70s linear infinite; }
.orbita.o1 { width: 54cqw; }
.orbita.o2 { width: 86cqw; border: 1px solid rgba(245, 225, 200, .08); animation-duration: 110s; animation-direction: reverse; }
/* Cada cuerpo en su ángulo; el astro gira al revés para quedarse derecho. */
.cuerpo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.o1 .cuerpo { --r: 27cqw; }
.o2 .cuerpo { --r: 43cqw; }
.astro { position: absolute; left: 0; top: 0; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; animation: girar 70s linear infinite reverse; }
.o2 .astro { animation-duration: 110s; animation-direction: normal; }
.astro em { font-style: normal; width: 13cqw; max-width: 60px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: clamp(1rem, 5.6cqw, 1.6rem);
  background: radial-gradient(circle at 35% 30%, #46342A, #1A130F);
  box-shadow: inset -5px -7px 14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 210, 170, .18), 0 0 26px -6px rgba(255, 158, 110, .5); }
.astro small { font: 650 .64rem var(--mono); letter-spacing: .06em; color: var(--arena-2); background: rgba(14, 11, 9, .75); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.sistema:hover :is(.orbita, .astro, .sol svg) { animation-play-state: paused; }
.lista-canales { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.lista-canales li { display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linea); background: rgba(23, 18, 15, .72); }
.lista-canales .ico { font-size: 1.4rem; line-height: 1.2; }
.lista-canales p { margin: 4px 0 0; font-size: .92rem; }
.modo { display: inline-block; margin-left: 4px; padding: 3px 8px; border-radius: 99px; vertical-align: 2px; font: 700 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.modo.solo { background: rgba(169, 189, 134, .16); color: var(--olivo); }
.modo.tu { background: rgba(232, 182, 94, .16); color: var(--ambar); }

/* ---------- 06 · Tú decides ---------- */
.cabina { position: relative; padding: 8px; border-radius: 28px; border: 1px solid var(--linea-2); box-shadow: var(--sombra-alta);
  background: linear-gradient(180deg, rgba(33, 26, 21, .88), rgba(17, 13, 11, .92)); }
.cabina-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font: 650 .7rem var(--mono); text-transform: uppercase; letter-spacing: .22em; color: var(--arena-3); }
.leds { display: flex; gap: 6px; }
.leds i { width: 8px; height: 8px; border-radius: 50%; background: var(--olivo); box-shadow: 0 0 8px var(--olivo); animation: latido 2s ease-in-out infinite; }
.leds i:nth-child(2) { background: var(--ambar); box-shadow: 0 0 8px var(--ambar); animation-delay: .4s; }
.leds i:nth-child(3) { animation-delay: .8s; }
.interruptores { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 700px) { .interruptores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .interruptores { grid-template-columns: repeat(3, 1fr); } }
.interruptores li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 16px; border-radius: 20px; background: rgba(14, 11, 9, .55); border: 1px solid var(--linea); }
.interruptores b { display: block; font: 750 1.06rem/1.2 var(--titular); margin-bottom: 4px; }
.interruptores small { display: block; color: var(--arena-2); font-size: .88rem; line-height: 1.45; }
.estado { display: block; margin-bottom: 3px; font: 700 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--olivo); }
.switch.apagado + div .estado { color: var(--ambar); }
.switch { flex-shrink: 0; position: relative; width: 50px; height: 28px; margin-top: 2px; border-radius: 99px; background: rgba(169, 189, 134, .92);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 18px -4px var(--olivo); transition: background .4s, box-shadow .4s; }
.switch i { position: absolute; top: 3px; left: 25px; width: 22px; height: 22px; border-radius: 50%; background: #FDF8EE; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transition: left .45s var(--suave); }
.switch.apagado { background: #2A231D; border: 1px solid var(--linea-2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.switch.apagado i { left: 3px; top: 2px; background: var(--arena-3); }
/* Al aparecer, los interruptores se prenden uno por uno. */
.js .cabina:not(.visto) .switch:not(.apagado) { background: #2A231D; box-shadow: none; }
.js .cabina:not(.visto) .switch:not(.apagado) i { left: 3px; }
.interruptores li:nth-child(2) .switch, .interruptores li:nth-child(2) .switch i { transition-delay: .5s; }
.interruptores li:nth-child(3) .switch, .interruptores li:nth-child(3) .switch i { transition-delay: .7s; }
.interruptores li:nth-child(4) .switch, .interruptores li:nth-child(4) .switch i { transition-delay: .9s; }
.interruptores li:nth-child(6) .switch, .interruptores li:nth-child(6) .switch i { transition-delay: 1.1s; }

/* ---------- 07 · Cómo empezar ---------- */
.trayecto { position: relative; --p: 1; }
.ruta { position: absolute; left: 21px; top: 22px; bottom: 70px; width: 2px; background: repeating-linear-gradient(180deg, rgba(245, 225, 200, .2) 0 6px, transparent 6px 12px); }
.ruta-llena { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p)); background: linear-gradient(180deg, var(--terracota), var(--ambar)); box-shadow: 0 0 12px var(--terracota-brillo); }
/* El cohete va en la punta de la línea, sin taparse con los números de los extremos. */
.cohete { position: absolute; z-index: 1; left: 50%; top: calc(40px + var(--p) * (100% - 80px)); width: 34px; height: 34px; translate: -50% -50%; rotate: 180deg; filter: drop-shadow(0 0 10px rgba(255, 158, 110, .7)); }
.cohete svg { display: block; width: 100%; height: 100%; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 38px; position: relative; }
.pasos li { display: flex; gap: 18px; align-items: flex-start; }
.paso-num { flex-shrink: 0; position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 800 1.1rem var(--mono); color: #1A110C;
  background: linear-gradient(135deg, var(--terracota), var(--ambar)); box-shadow: 0 0 22px -4px rgba(255, 158, 110, .6); transition: background .4s, color .4s, box-shadow .4s; }
.pasos li > div { transition: opacity .4s; }
.pasos b { display: block; font: 750 1.32rem/1.2 var(--titular); margin-bottom: 4px; }
.pasos p { margin: 0; }
.como.vivo .pasos li:not(.encendido) .paso-num { background: var(--noche-3); color: var(--arena-3); box-shadow: 0 0 0 1px var(--linea-2); }
.como.vivo .pasos li:not(.encendido) > div { opacity: .45; }
@media (min-width: 860px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .pasos li { flex-direction: column; align-items: center; text-align: center; }
  .paso-num { width: 58px; height: 58px; font-size: 1.3rem; border-radius: 18px; }
  .ruta { left: 16.67%; right: 16.67%; top: 28px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(245, 225, 200, .2) 0 6px, transparent 6px 12px); }
  .ruta-llena { transform-origin: left; transform: scaleX(var(--p)); }
  .cohete { left: calc(50px + var(--p) * (100% - 100px)); top: 50%; rotate: 90deg; width: 40px; height: 40px; }
}

/* ---------- 08 · Para tu giro ---------- */
.rejilla.giros { grid-template-columns: repeat(2, 1fr); }
/* 8 giros + "¿Otro giro?": en el celular la última ocupa el renglón completo; en la compu, 3 × 3. */
.tarjeta.giro.otro { grid-column: 1 / -1; }
@media (min-width: 700px) { .rejilla.giros { grid-template-columns: repeat(3, 1fr); } .tarjeta.giro.otro { grid-column: auto; } }
.tarjeta.giro { display: grid; gap: 4px; justify-items: start; align-content: start; padding: 20px 18px; text-decoration: none; color: var(--arena); transition: transform .35s var(--suave), border-color .3s; }
.tarjeta.giro:hover { transform: translateY(-5px); border-color: rgba(255, 158, 110, .45); }
.tarjeta.giro .icono { position: relative; width: 58px; height: 58px; margin-bottom: 10px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem;
  background: radial-gradient(circle at 35% 30%, #4A3528, #1A120D 70%);
  box-shadow: inset -6px -8px 16px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 210, 170, .14), 0 0 28px -8px rgba(255, 158, 110, .5); }
.tarjeta.giro .icono::after { content: ""; position: absolute; inset: 38% -24%; border-radius: 50%; border: 1px solid rgba(232, 182, 94, .4); transform: rotate(-18deg); }
.tarjeta.giro h3 { margin: 0; font-size: 1.04rem; }
.tarjeta.giro.otro { border-style: dashed; border-color: rgba(255, 158, 110, .3); background: rgba(14, 11, 9, .45); }
.ir { font: 600 .76rem var(--mono); letter-spacing: .04em; color: var(--terracota-brillo); margin-top: 6px; }

/* ---------- 09 · Planes ---------- */
.elegidor { display: grid; gap: 12px; margin-bottom: 30px; padding: 18px; border-radius: 22px; border: 1px dashed rgba(255, 158, 110, .38); background: rgba(14, 11, 9, .6); }
.elegidor[hidden] { display: none; }
.elegidor-titulo { margin: 0; }
.elegidor-titulo b { font: 800 1.2rem var(--titular); margin-right: 6px; }
.elegidor-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea-2); background: rgba(23, 18, 15, .7);
  color: var(--arena-2); font-weight: 650; font-size: .92rem; transition: background .2s, color .2s, border-color .2s; }
.opcion input:checked + span { color: #1A110C; background: linear-gradient(135deg, var(--terracota), var(--ambar)); border-color: transparent; }
.opcion input:focus-visible + span { outline: 2px solid var(--terracota-brillo); outline-offset: 3px; }
.elegidor-productos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 650; font-size: .92rem; color: var(--arena-2); }
.elegidor-productos select { min-height: 44px; font: inherit; font-size: 16px; color: var(--arena); background: var(--noche); border: 1px solid var(--linea-2); border-radius: 12px; padding: 8px 12px; }
@media (max-width: 520px) { .opcion span { padding: 8px 12px; font-size: .86rem; } }
.elegidor-resultado { margin: 0; min-height: 1.6em; font-weight: 650; color: var(--arena); }
.elegidor-resultado b { color: var(--olivo); }
.rejilla.planes { align-items: stretch; }
@media (min-width: 900px) { .rejilla.planes { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 24px 26px; border-radius: 26px; border: 1px solid var(--linea-2);
  background: linear-gradient(170deg, rgba(36, 28, 23, .92), rgba(17, 13, 11, .94)); transition: transform .45s var(--suave), box-shadow .45s, border-color .45s; }
.plan.recomendado { border-color: rgba(255, 158, 110, .3); box-shadow: 0 30px 70px -30px rgba(255, 158, 110, .45); }
/* Un borde que gira en órbita alrededor del plan recomendado. */
.plan.recomendado::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(255, 158, 110, .15) 0 55%, var(--terracota-brillo) 75%, var(--ambar) 85%, rgba(255, 158, 110, .15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borde-orbita 6s linear infinite; }
@keyframes borde-orbita { to { --ang: 360deg; } }
.plan.te-conviene { transform: translateY(-6px); border-color: rgba(169, 189, 134, .7); box-shadow: 0 0 0 1px rgba(169, 189, 134, .45), 0 30px 70px -30px rgba(169, 189, 134, .5); }
.plan.te-conviene::after { content: "✓ Te conviene"; position: absolute; top: -12px; right: 22px; padding: 5px 12px; border-radius: 999px; background: var(--olivo); color: #14200A;
  font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sello { position: absolute; top: -12px; left: 22px; font: 700 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--ambar); color: #1A110C; }
.plan h3 { font-size: 1.75rem; font-weight: 800; }
.para-quien { margin: 0; min-height: 3em; }
.precio { margin: 4px 0; }
.precio b { font: 800 clamp(2.7rem, 9vw, 3.4rem)/1 var(--titular); letter-spacing: -.03em; }
.precio span { color: var(--arena-3); font-size: .9rem; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.plan .topes li { font-weight: 650; color: var(--arena); }
.plan .topes li::before, .plan .incluye li::before { content: "✓ "; color: var(--olivo); font-weight: 800; }
.plan .incluye { padding-top: 12px; border-top: 1px dashed var(--linea-2); font-size: .94rem; }
.plan .incluye li { color: var(--arena-2); }
.no-incluye { font-size: .84rem; color: var(--arena-3); margin: 0; }
.plan .boton { margin-top: auto; }
.comparar { margin-top: 26px; border: 1px solid var(--linea-2); border-radius: 22px; background: rgba(14, 11, 9, .62); }
.comparar > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 14px 20px; font: 750 1.06rem var(--titular); }
.comparar > summary::-webkit-details-marker { display: none; }
.comparar > summary::after { content: "+"; font: 600 1.4rem var(--mono); color: var(--terracota-brillo); transition: transform .25s var(--suave); }
.comparar[open] > summary::after { transform: rotate(45deg); }
.tabla-comparar-wrap { overflow-x: auto; padding: 0 8px 14px; }
.tabla-comparar { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-comparar th, .tabla-comparar td { padding: 10px 8px; text-align: center; border-top: 1px solid var(--linea); }
.tabla-comparar tbody th { text-align: left; font-weight: 600; color: var(--arena-2); }
.tabla-comparar thead th { border-top: 0; vertical-align: bottom; font: 750 1.02rem var(--titular); color: var(--arena); }
.tabla-comparar thead small { display: block; font: 600 .72rem var(--mono); color: var(--arena-3); }
.tabla-comparar .grupo th { padding-top: 18px; text-align: left; font: 700 .68rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-brillo); }
.tabla-comparar .si { color: var(--olivo); font-weight: 800; }
.tabla-comparar .no { color: var(--arena-3); }
.tabla-comparar :is(td, thead th):nth-child(3) { background: rgba(255, 158, 110, .05); }
@media (max-width: 520px) { .tabla-comparar { font-size: .78rem; } .tabla-comparar th, .tabla-comparar td { padding: 9px 4px; } }

/* ---------- 10 · Preguntas ---------- */
.preguntas-rejilla { display: grid; gap: 10px; }
.preguntas-lado .boton { margin-top: 6px; }
.preguntas-lado .boton[hidden] { display: none; }
@media (min-width: 900px) {
  .preguntas-rejilla { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .preguntas-lado { position: sticky; top: calc(var(--alto-barra) + 40px); }
  .preguntas-rejilla .preguntas { margin-top: 0; }
}

/* ---------- La telemetría del costado ---------- */
.telemetria { display: none; }
@media (min-width: 1360px) {
  .telemetria { position: fixed; z-index: 20; right: 20px; top: 50%; translate: 0 -50%; display: grid; gap: 4px; counter-reset: tele; opacity: 0; pointer-events: none; transition: opacity .4s; }
  .telemetria.activa { opacity: 1; pointer-events: auto; }
  .telemetria a { counter-increment: tele; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 24px; text-decoration: none; color: var(--arena-3);
    font: 600 .66rem var(--mono); letter-spacing: .14em; }
  .telemetria a::before { content: ""; order: 1; width: 14px; height: 1px; background: currentColor; transition: width .3s var(--suave); }
  .telemetria a::after { content: counter(tele, decimal-leading-zero); order: 2; width: 20px; text-align: right; }
  .telemetria span { order: 0; opacity: 0; translate: 6px 0; text-transform: uppercase; color: var(--arena-2); transition: opacity .25s, translate .25s; }
  .telemetria a:hover span, .telemetria a:focus-visible span, .telemetria a.actual span { opacity: 1; translate: 0; }
  .telemetria a.actual { color: var(--terracota-brillo); }
  .telemetria a.actual::before { width: 30px; }
}

/* ============ 5. Subpáginas y calculadora ============ */
.pagina { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.pagina-cabeza { position: relative; padding: 44px 0 30px; }
.pagina-cabeza h1 { font-size: clamp(2.3rem, 8.4vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-bottom: 16px; text-wrap: balance; }
.pagina-cabeza .bajada { max-width: 60ch; }
.pagina-cabeza .acciones { margin-bottom: 0; }
/* Un planetita detrás de la cabecera, de la misma familia que el de la portada. */
.pagina-cabeza::after { content: ""; position: absolute; z-index: -1; right: -150px; top: -40px; width: 320px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .75;
  background: radial-gradient(circle at 35% 30%, #4A3326, #160F0B 62%);
  box-shadow: inset -30px -40px 60px rgba(0, 0, 0, .6), 0 0 70px -10px rgba(255, 158, 110, .35), 0 0 0 1px rgba(255, 210, 170, .08); }
@media (min-width: 900px) { .pagina-cabeza::after { right: -260px; top: -20px; width: 440px; } }
.migas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--arena-3); margin-bottom: 18px; }
.migas a { color: var(--arena-2); text-decoration: none; }
.migas a:hover { color: var(--terracota-brillo); }
.sutil { color: var(--arena-3); font-size: .9rem; }
.pagina-cuerpo { display: grid; gap: 14px; padding-bottom: 40px; }
.bloque { padding: 22px; border-radius: var(--radio); border: 1px solid var(--linea); background: rgba(20, 16, 13, .82); scroll-margin-top: 80px; }
.bloque h2 { font-size: clamp(1.45rem, 4.8vw, 2rem); letter-spacing: -.03em; margin-bottom: 12px; }
.bloque p:last-child { margin-bottom: 0; }
.bloque a { color: var(--ambar); }
.bloque .lista-check { margin-top: 10px; }
.indice { padding: 18px 22px; border-radius: var(--radio); border: 1px dashed rgba(255, 158, 110, .35); background: rgba(14, 11, 9, .6); }
.indice ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.indice a { color: var(--arena-2); }
.relacionadas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.relacionadas.grandes { grid-template-columns: 1fr; }
@media (min-width: 700px) { .relacionadas.grandes { grid-template-columns: 1fr 1fr; } }
.tarjeta.relacionada { display: grid; gap: 6px; text-decoration: none; color: var(--arena); padding: 18px; transition: transform .3s var(--suave); }
.tarjeta.relacionada:hover { transform: translateY(-3px); }
.tarjeta.relacionada .icono { font-size: 1.5rem; margin: 0; }
/* Las guías se leen como artículo: renglones cómodos y aire entre secciones
   (sus títulos ya traen su número: "1. Un perfil…"). */
.pagina-guia .bloque.revela { padding: 10px 0 26px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--linea); }
.pagina-guia .bloque.revela > h2::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--terracota), var(--ambar)); }
.pagina-guia .bloque.revela :is(p, li) { font-size: 1.06rem; line-height: 1.75; max-width: 68ch; }
@media (min-width: 1100px) {
  .pagina.pagina-guia { max-width: 1140px; }
  .pagina-guia .pagina-cabeza { max-width: 860px; }
  .pagina-guia .pagina-cuerpo { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 56px; }
  .pagina-guia .pagina-cuerpo > * { grid-column: 1; }
  .pagina-guia .pagina-cuerpo > .indice { grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: calc(var(--alto-barra) + 24px); }
}

/* La calculadora */
.calc { display: grid; gap: 18px; }
@media (min-width: 760px) { .calc { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.calculadora { display: grid; gap: 14px; }
.calculadora label { display: grid; gap: 6px; font-size: .88rem; font-weight: 650; color: var(--arena-2); }
.calculadora input, .calculadora select { width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--arena); background: var(--noche);
  border: 1px solid rgba(245, 225, 200, .18); border-radius: 12px; padding: 10px 12px; }
.calculadora input:focus, .calculadora select:focus { outline: none; border-color: var(--terracota-brillo); box-shadow: 0 0 0 3px rgba(255, 158, 110, .2); }
@media (min-width: 600px) { .calculadora .dos-campos { grid-template-columns: 1fr 1fr; } }
.resultado { padding: 18px; border-radius: 18px; background: rgba(14, 11, 9, .75); border: 1px solid rgba(255, 158, 110, .3); display: grid; gap: 12px; scroll-margin-top: 90px; }
.resultado-grande { display: grid; gap: 2px; }
.resultado-grande small { font: 600 .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-brillo); }
.resultado-grande b { font: 800 clamp(2.4rem, 9vw, 3.2rem)/1.05 var(--titular); letter-spacing: -.04em; color: var(--arena); }
.resultado-grande span { color: var(--arena-3); font-size: .9rem; }
.desglose { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.desglose li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linea); color: var(--arena-2); }
.desglose b { color: var(--arena); }
.actual-calc { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(232, 182, 94, .1); color: var(--arena); }
.aviso-calc { margin: 0; color: var(--ambar); font-weight: 650; }

/* ---------- En pantallas táctiles: menos vidrio (cuida la batería) ---------- */
@media (pointer: coarse) {
  .sat-caja { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(28, 22, 18, .94); }
  .js .revela { filter: none; }
}

/* ============ 6. Sin movimiento para quien lo pide ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revela, .js .letra, .js .satelite { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .carga { display: none; }
  .js .app-barras i { transform: none; }
}