/* =====================================================================
   LANDING · landing.css
   ---------------------------------------------------------------------
   Misma paleta que el test (crema + naranja-rojo + amarillo + teal),
   estructura inspirada en duolingo.com: hero con personaje grande,
   cinta que se desplaza, bloques alternados con ilustración animada,
   botones "3D" con borde inferior, todo con animaciones al hacer scroll.
   ===================================================================== */
:root {
  --crema: #F4EFE6; --crema-claro: #FBF8F2;
  --tinta: #1F1B17; --tinta-suave: #7A6F63;
  --naranja: #F4521F; --naranja-oscuro: #C93F14; --naranja-suave: #FFE3D8;
  --amarillo: #F6C453; --amarillo-oscuro: #D9A52E; --amarillo-suave: #FFF1CC;
  --menta: #BDDFD2; --teal: #3FB8A5; --teal-oscuro: #2E9483;
  --negro: #171411; --blanco: #FFFFFF; --borde: #E6DCCB;
  --gorro: #2F2B36; --gorro-claro: #4E4858; --gorro-oscuro: #17151B;   /* birrete */
  --borla: #2B6BE8; --borla-oscuro: #1B4DB8;                             /* la borla azul */
  --sombra: 0 2px 4px rgba(60,40,20,.05), 0 12px 26px rgba(60,40,20,.10);
  --sombra-flotante: 0 24px 50px rgba(60,40,20,.18);
  --fuente: "Nunito", system-ui, sans-serif;
  --fuente-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --ancho: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h, 70px) + 10px); }
body { padding-top: var(--nav-h, 70px); }
body {
  margin: 0; font-family: var(--fuente); color: var(--tinta); font-weight: 700; line-height: 1.5;
  background-color: var(--crema);
  background-image: radial-gradient(rgba(31,27,23,.09) 1px, transparent 1px);
  background-size: 18px 18px;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.acento { color: var(--naranja); }
img { max-width: 100%; }

/* Blobs de color de fondo */
.blob { position: fixed; border-radius: 50%; filter: blur(2px); z-index: -1; pointer-events: none; animation: blob-flota 14s ease-in-out infinite; }
.blob-1 { width: 520px; height: 520px; right: -180px; top: -200px; background: var(--amarillo-suave); opacity: .9; }
.blob-2 { width: 420px; height: 420px; left: -200px; top: 55vh; background: var(--menta); opacity: .55; animation-delay: -5s; }
.blob-3 { width: 480px; height: 480px; right: -220px; top: 140vh; background: var(--naranja-suave); opacity: .7; animation-delay: -9s; }
@keyframes blob-flota { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-18px, 22px) scale(1.05); } }

/* ---------- Botones "3D" (borde inferior que se hunde al tocar) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 26px; border-radius: 16px; border: none; cursor: pointer; white-space: nowrap;
  border-bottom: 5px solid rgba(0,0,0,.25); box-shadow: var(--sombra);
  transition: transform .08s ease, border-bottom-width .08s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-naranja { background: linear-gradient(180deg, #FF7A4D, var(--naranja)); color: var(--blanco); border-bottom-color: var(--naranja-oscuro); }
.btn-negro { background: var(--negro); color: var(--blanco); border-bottom-color: #000; }
.btn-borde { background: var(--blanco); color: var(--naranja); border: 2px solid var(--borde); border-bottom: 5px solid var(--borde); }
.btn-grande { font-size: 1.05rem; padding: 16px 30px; }
.btn-chico { font-size: .85rem; padding: 10px 16px; border-radius: 12px; border-bottom-width: 4px; }
.pulsar { animation: pulsar 2.2s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: var(--sombra); } 50% { box-shadow: 0 0 0 10px rgba(244,82,31,.16), var(--sombra); } }

/* ---------- Nav de vidrio ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(251,248,242,.75); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 20px rgba(60,40,20,.06); }
.nav-inner { max-width: var(--ancho); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 700; }
.logo-mate { font-size: 1.5rem; display: inline-block; animation: bob 3.2s ease-in-out infinite; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; font-weight: 800; color: var(--tinta-suave); }
.nav-links a { position: relative; padding: 4px 0; transition: color .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--naranja); transform: scaleX(0); transition: transform .2s ease; }
.nav-links a:hover { color: var(--tinta); } .nav-links a:hover::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; row-gap: 6px; }
  .nav .btn-chico { margin-left: auto; }
  /* segunda fila con los mismos links de la compu; se desliza con el dedo si no entran */
  .nav-links { order: 3; flex: 0 0 100%; margin-left: 0; gap: 18px; font-size: .82rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 2px 4px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 28px; }
  .nav .nav-inner .btn-chico { margin-left: auto; }
  .nav-links a { flex: none; padding: 6px 0; }
}

/* ---------- Hero ---------- */
.hero { padding: 56px 20px 40px; }
.hero-inner { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.hero-escena { position: relative; min-height: 520px; padding-bottom: 70px; display: flex; align-items: center; justify-content: center; }
.hero-texto { animation: entrar .7s cubic-bezier(.34,1.3,.64,1) both .15s; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 18px; }
.eyebrow .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 0 4px rgba(244,82,31,.2); animation: pulso-punto 1.8s ease-in-out infinite; }
@keyframes pulso-punto { 0%, 100% { box-shadow: 0 0 0 3px rgba(244,82,31,.2); } 50% { box-shadow: 0 0 0 7px rgba(244,82,31,.08); } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); margin-bottom: 18px; }
.hero .sub { font-size: 1.15rem; color: var(--tinta-suave); max-width: 520px; margin-bottom: 26px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-pills li { font-size: .82rem; font-weight: 800; background: var(--blanco); border-radius: 99px; padding: 6px 12px; border-bottom: 3px solid var(--borde); box-shadow: var(--sombra); }
@keyframes entrar { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .hero { padding-top: 28px; }
  .hero-inner { grid-template-columns: 1fr; gap: 12px; }
  .hero-escena { order: 2; min-height: 420px; padding-bottom: 80px; }
  .hero-texto { order: 1; text-align: center; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero-botones, .hero-pills { justify-content: center; }
  .eyebrow { justify-content: center; }
}

/* ---------- Kiro (el birrete con cara), en tres tamaños ---------- */
.kiro-marco { position: relative; --escala: 3.6; width: calc(76px * var(--escala)); height: calc(84px * var(--escala)); animation: entrar-kiro .8s cubic-bezier(.34,1.5,.64,1) both; }
.kiro-marco.mediano { --escala: 2.2; }
.kiro-marco.chico { --escala: 1.5; }
.kiro-marco .kiro-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.kiro-marco .kiro-img { opacity: 0; } .kiro-marco .kiro-img.ok { opacity: 1; }
.kiro-marco .kiro-img.ok + .kiro { visibility: hidden; }   /* si hay imagen, el CSS se esconde */
@keyframes entrar-kiro { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.kiro { position: absolute; left: 0; top: 0; width: 76px; height: 84px; transform: scale(var(--escala)); transform-origin: top left; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

.kiro-cuerpo {
  position: absolute; bottom: 8px; left: 12px; width: 52px; height: 46px;
  background: radial-gradient(circle at 35% 25%, var(--gorro-claro), var(--gorro) 55%, var(--gorro-oscuro));
  border-radius: 12px 12px 26px 26px / 10px 10px 30px 30px;
  box-shadow: inset -4px -5px 0 rgba(0,0,0,.28), 0 4px 10px rgba(20,15,30,.28);
  transform-origin: bottom center;
}
/* La tabla del birrete: un cuadrado visto en perspectiva (rombo) con grosor, y el botón del centro */
.kiro-yerba { position: absolute; top: -8px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gorro-oscuro); box-shadow: 0 0 0 1.5px var(--gorro-claro); z-index: 3; }
.kiro-yerba::before { content: ""; position: absolute; left: -34px; top: -10px; width: 76px; height: 27px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(135deg, #5B5566, var(--gorro) 55%, #26232C); z-index: -1; }
.kiro-yerba::after { content: ""; position: absolute; left: -34px; top: -5px; width: 76px; height: 27px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--gorro-oscuro); z-index: -2; }
/* La borla: cordón que cuelga del botón hacia la derecha, con nudo dorado y fleco */
.kiro-bombilla { position: absolute; top: 25px; left: 37px; width: 3px; height: 30px; background: var(--borla); border-radius: 2px; transform: rotate(-82deg); transform-origin: top center; z-index: 4; animation: borla 3.4s ease-in-out infinite; }
.kiro-bombilla::before { content: ""; position: absolute; top: 100%; left: -2px; width: 7px; height: 5px; margin-top: -1px; background: var(--amarillo); border-radius: 2px; transform: rotate(82deg); transform-origin: top center; }
.kiro-bombilla::after { content: ""; position: absolute; top: 100%; left: -3.5px; width: 10px; height: 16px; background: linear-gradient(180deg, var(--borla) 25%, var(--borla-oscuro)); border-radius: 3px 3px 5px 5px; transform: rotate(82deg) translateY(3px); transform-origin: top center; }
@keyframes borla { 0%, 100% { transform: rotate(-82deg); } 50% { transform: rotate(-76deg); } }

/* Ojos grandes con blanco y pupila (el "baby schema" que usa Duolingo) */
.kiro-ojo { position: absolute; top: 12px; width: 15px; height: 17px; background: var(--blanco); border-radius: 50%; overflow: hidden; transition: height .15s ease, transform .15s ease; }
.kiro-ojo.izq { left: 9px; } .kiro-ojo.der { right: 9px; }
.kiro-pupila { position: absolute; left: 4px; top: 5px; width: 7px; height: 8px; background: var(--tinta); border-radius: 50%; transition: transform .2s ease; }
.kiro-pupila::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 3px; background: var(--blanco); border-radius: 50%; }
.kiro-ceja { position: absolute; top: 6px; width: 12px; height: 3px; background: #8E8899; border-radius: 3px; transition: transform .2s ease; }
.kiro-ceja.izq { left: 10px; transform: rotate(-8deg); } .kiro-ceja.der { right: 10px; transform: rotate(8deg); }
.kiro-boca { position: absolute; top: 31px; left: 50%; width: 12px; height: 6px; border: 3px solid var(--crema); border-top: none; border-radius: 0 0 12px 12px; transform: translateX(-50%); transition: width .15s ease, height .15s ease; }

.kiro-brazo { position: absolute; top: 50px; width: 20px; height: 8px; background: var(--gorro); border-radius: 99px; transform-origin: center; transition: transform .25s cubic-bezier(.34,1.56,.64,1); z-index: 1; }
.kiro-brazo.izq { left: 0; transform: rotate(20deg); }
.kiro-brazo.der { right: 0; transform: rotate(-20deg); }
.kiro-pie { position: absolute; bottom: 0; width: 22px; height: 11px; background: var(--naranja); border-radius: 8px 10px 6px 6px; box-shadow: 0 2px 0 var(--naranja-oscuro); }
.kiro-pie.izq { left: 15px; } .kiro-pie.der { right: 15px; }
/* Expresiones */
.kiro.parpadea .kiro-ojo { height: 3px; transform: translateY(8px); }
.kiro.saluda .kiro-brazo.der { animation: saludar .9s ease-in-out; }
@keyframes saludar { 0%, 100% { transform: rotate(-20deg); } 25%, 75% { transform: rotate(-80deg) translateY(-8px); } 50% { transform: rotate(-60deg) translateY(-8px); } }
.kiro.feliz .kiro-ojo { height: 9px; transform: translateY(6px); }
.kiro.feliz .kiro-boca { width: 22px; height: 11px; }
.kiro.celebrar .kiro-boca { width: 22px; height: 12px; }
.kiro.celebrar .kiro-brazo.izq { transform: rotate(-60deg) translateY(-6px); }
.kiro.celebrar .kiro-brazo.der { transform: rotate(60deg) translateY(-6px); }
.kiro.sorprendido .kiro-boca { width: 9px; height: 9px; border: 3px solid var(--crema); border-radius: 50%; }
.kiro.sorprendido .kiro-ceja.izq { transform: rotate(-14deg) translateY(-3px); }
.kiro.sorprendido .kiro-ceja.der { transform: rotate(14deg) translateY(-3px); }

/* Globo de Kiro en el hero */
.globo { position: absolute; left: 50%; top: calc(100% + 16px); translate: -50% 0; width: max-content; max-width: 320px; background: var(--blanco); border-radius: 16px; padding: 12px 16px; font-size: .95rem; font-weight: 800; box-shadow: var(--sombra); z-index: 3; animation: entrar .5s cubic-bezier(.34,1.3,.64,1) both .9s; }
.globo::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top: none; border-bottom-color: var(--blanco); }
.globo.cambia { animation: globo-cambia .4s ease; }
@keyframes globo-cambia { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }

/* Íconos 3D orbitando */
.orbita { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 3.6rem; animation: orb-flota 4s ease-in-out infinite, entrar .6s cubic-bezier(.34,1.5,.64,1) both; }
.orb .i3d img { width: 1em; height: 1em; }
.orb.o1 { left: 4%; top: 8%; animation-delay: 0s, .3s; }
.orb.o2 { right: 6%; top: 4%; animation-delay: -1s, .45s; }
.orb.o3 { right: 0; top: 26%; animation-delay: -2s, .6s; }
.orb.o4 { left: -2%; top: 40%; animation-delay: -3s, .75s; }
.orb.o5 { right: -6%; top: 54%; animation-delay: -1.5s, .9s; }
.orb.o6 { left: -6%; top: 58%; animation-delay: -2.5s, 1.05s; }
@keyframes orb-flota { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -14px; rotate: 5deg; } }
@media (max-width: 860px) { .hero .kiro-marco { --escala: 2.6; } .orb { width: 56px; height: 56px; font-size: 2.5rem; } .globo { font-size: .85rem; max-width: 260px; } }

/* ---------- Cinta de carreras ---------- */
.cinta { padding: 18px 0 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cinta-fila { overflow: hidden; margin-bottom: 10px; }
.cinta-pista { display: flex; gap: 10px; width: max-content; animation: cinta 38s linear infinite; }
.cinta-fila.reversa .cinta-pista { animation-direction: reverse; animation-duration: 44s; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-item { display: flex; align-items: center; gap: 8px; background: var(--blanco); border-radius: 99px; padding: 8px 16px 8px 10px; font-size: .9rem; font-weight: 800; border-bottom: 3px solid var(--borde); box-shadow: var(--sombra); white-space: nowrap; }
.cinta-item .i3d { font-size: 1.3rem; }
@keyframes cinta { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Bloques alternados ---------- */
.bloque { padding: 70px 20px; }
.bloque-inner { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.bloque.invertido .bloque-texto { order: 2; }
.bloque.invertido .bloque-ilus { order: 1; }
.bloque h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 16px; }
.bloque p { font-size: 1.1rem; color: var(--tinta-suave); }
.bloque p strong { color: var(--tinta); }
.bloque-ilus { display: flex; justify-content: center; }
.lista-check { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.lista-check li { position: relative; padding-left: 30px; font-weight: 800; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: var(--blanco); font-size: .8rem; display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .bloque { padding: 44px 20px; }
  .bloque-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .bloque.invertido .bloque-texto { order: 1; } .bloque.invertido .bloque-ilus { order: 2; }
  .lista-check { text-align: left; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* Aparecer al hacer scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.bloque-ilus.reveal { transform: translateY(28px) scale(.94); }

/* ---------- Celular de mentira ---------- */
.celu { width: 280px; height: 560px; border-radius: 40px; background: #1F1B17; padding: 12px; box-shadow: var(--sombra-flotante), inset 0 0 0 2px #3a332c; position: relative; flex-shrink: 0; }
.celu::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; background: #000; border-radius: 99px; z-index: 3; }
.celu-pantalla { width: 100%; height: 100%; border-radius: 30px; background: var(--crema); background-image: radial-gradient(rgba(31,27,23,.08) 1px, transparent 1px); background-size: 14px 14px; padding: 52px 14px 14px; overflow: hidden; position: relative; display: flex; flex-direction: column; gap: 10px; }
.celu.oscuro .celu-pantalla { background: #2A231C; background-image: none; color: var(--blanco); }
.celu-cab { display: flex; align-items: center; gap: 10px; font-size: .78rem; line-height: 1.2; }
.celu-cab small { display: block; color: var(--tinta-suave); font-size: .7rem; }
.celu-num { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, #FF7A4D, var(--naranja)); color: var(--blanco); font-family: var(--fuente-titulo); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid var(--naranja-oscuro); flex-shrink: 0; }
.pill-xp { margin-left: auto; font-size: .72rem; font-weight: 900; background: linear-gradient(180deg, #FFF6E0, #FFE9B8); color: #C98A12; border-radius: 99px; padding: 4px 9px; border-bottom: 2px solid #E9C98A; }
.pill-xp.grande { font-size: 1.05rem; padding: 8px 16px; margin: 0; }
.pill-racha { font-size: 1.05rem; font-weight: 900; background: linear-gradient(180deg, #FFE7DA, #FFD0B8); color: var(--naranja-oscuro); border-radius: 99px; padding: 8px 16px; border-bottom: 2px solid #F0B79A; }
.celu-pie { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; }
.chip { font-size: .72rem; font-weight: 900; padding: 8px 12px; border-radius: 12px; background: var(--blanco); border-bottom: 3px solid var(--borde); }
.chip.rojo { color: var(--naranja); } .chip.verde { color: var(--teal-oscuro); }

/* Mazo de cartas que se deslizan solas */
.mazo { position: relative; flex: 1; min-height: 300px; }
.carta { position: absolute; inset: 0; background: var(--blanco); border-radius: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; border-bottom: 4px solid var(--borde); transform-origin: bottom center; }
.carta .i3d { font-size: 4rem; }
.carta b { font-family: var(--fuente-titulo); font-size: 1.1rem; line-height: 1.15; }
.carta.atras { transform: scale(.94) translateY(12px); opacity: .7; }
.carta.atras2 { transform: scale(.88) translateY(24px); opacity: .4; }
.carta.sale-der { animation: sale-der .7s cubic-bezier(.4,0,.6,1) forwards; }
.carta.sale-izq { animation: sale-izq .7s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes sale-der { 0% { transform: translateX(0) rotate(0); } 100% { transform: translateX(140%) rotate(18deg); opacity: 0; } }
@keyframes sale-izq { 0% { transform: translateX(0) rotate(0); } 100% { transform: translateX(-140%) rotate(-18deg); opacity: 0; } }
.carta .sello { position: absolute; top: 18px; padding: 4px 10px; border: 3px solid; border-radius: 8px; font-family: var(--fuente-titulo); font-size: 1rem; letter-spacing: .1em; transform: rotate(-12deg); opacity: 0; }
.carta.sale-der .sello.si { opacity: 1; left: 14px; color: var(--teal); border-color: var(--teal); }
.carta.sale-izq .sello.no { opacity: 1; right: 14px; color: var(--naranja); border-color: var(--naranja); transform: rotate(12deg); }

/* Hexágono RIASEC */
.hexa-marco { width: 340px; max-width: 100%; }
.hexa { width: 100%; height: auto; overflow: visible; }
.hexa-borde { fill: rgba(255,255,255,.7); stroke: var(--borde); stroke-width: 3; }
.hexa-perfil { fill: rgba(244,82,31,.18); stroke: var(--naranja); stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1s cubic-bezier(.34,1.4,.64,1) .8s; }
.visible .hexa-perfil { transform: scale(1); }
.nodo circle { fill: var(--blanco); stroke: var(--borde); stroke-width: 3; transition: fill .3s ease, stroke .3s ease; }
.nodo text { text-anchor: middle; font-family: var(--fuente-titulo); font-size: 22px; font-weight: 700; fill: var(--tinta-suave); transition: fill .3s ease; }
.nodo.on circle { fill: var(--naranja); stroke: var(--naranja-oscuro); }
.nodo.on text { fill: var(--blanco); }
.nodo circle { transition: fill .3s ease, stroke .3s ease, r .35s cubic-bezier(.34,1.56,.64,1); }
.nodo.on circle { r: 31; }
@keyframes nodo-pop { 50% { transform: scale(1.18); } }
.hexa-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.hexa-leyenda span { font-size: .72rem; font-weight: 900; background: var(--blanco); border-radius: 99px; padding: 4px 10px; border-bottom: 2px solid var(--borde); color: var(--tinta-suave); transition: background .3s ease, color .3s ease; }
.hexa-leyenda span.on { background: var(--naranja); color: var(--blanco); border-bottom-color: var(--naranja-oscuro); }

/* Motivación: XP, racha, toasts */
.motivacion { display: flex; align-items: flex-end; gap: 16px; }
.moti-tarjeta { width: 300px; background: var(--blanco); border-radius: 22px; padding: 16px; box-shadow: var(--sombra); border-bottom: 4px solid var(--borde); }
.moti-fila { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.moti-barra { height: 14px; background: #F1EAE0; border-radius: 99px; overflow: hidden; }
.moti-relleno { width: 0; height: 100%; background: linear-gradient(90deg, #FFD36B, var(--amarillo)); border-radius: 99px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.toasts { display: grid; gap: 8px; margin-top: 12px; min-height: 130px; }
.toast-demo { background: var(--tinta); color: var(--blanco); border-radius: 12px; padding: 8px 12px; font-size: .85rem; font-weight: 800; animation: toast-sube .5s cubic-bezier(.34,1.56,.64,1) both; }
.toast-demo.combo { background: linear-gradient(90deg, var(--naranja), #FF7A4D); }
.toast-demo.bonus { background: linear-gradient(90deg, var(--teal-oscuro), var(--teal)); }
@keyframes toast-sube { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: none; } }
@media (max-width: 560px) { .motivacion { flex-direction: column; align-items: center; } .moti-tarjeta { width: 100%; max-width: 320px; } }

/* Informe (celu oscuro) */
.informe-sobre { font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--amarillo); }
.informe-codigo { display: flex; gap: 8px; }
.informe-codigo span { width: 44px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--blanco); background: var(--naranja); border-bottom: 4px solid var(--naranja-oscuro); transform: scale(0); }
.informe-codigo span:nth-child(2) { background: var(--amarillo); border-bottom-color: var(--amarillo-oscuro); color: var(--tinta); }
.informe-codigo span:nth-child(3) { background: var(--teal); border-bottom-color: var(--teal-oscuro); }
.visible .informe-codigo span { animation: revelar .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.visible .informe-codigo span:nth-child(1) { animation-delay: .4s; } .visible .informe-codigo span:nth-child(2) { animation-delay: .55s; } .visible .informe-codigo span:nth-child(3) { animation-delay: .7s; }
@keyframes revelar { 0% { transform: scale(0) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } }
.informe-nombres { font-size: .72rem; color: rgba(255,255,255,.7); }
.informe-titulo { font-family: var(--fuente-titulo); font-size: 1.5rem; line-height: 1.1; }
.informe-texto { font-size: .74rem; color: rgba(255,255,255,.7); }
.informe-barras { display: grid; gap: 7px; }
.ib { display: grid; grid-template-columns: 16px 1fr 24px; align-items: center; gap: 8px; font-size: .74rem; }
.ib b { font-family: var(--fuente-titulo); }
.ib > div { height: 9px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
.ib i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amarillo), var(--naranja)); border-radius: 99px; transition: width 1.1s cubic-bezier(.4,0,.2,1) .6s; }
.ib:nth-child(2) i { background: linear-gradient(90deg, #FF7A4D, var(--naranja)); }
.ib:nth-child(3) i { background: linear-gradient(90deg, #6ED3C2, var(--teal)); }
.visible .ib i { width: var(--w); }
.ib small { text-align: right; color: rgba(255,255,255,.7); }
.informe-carreras { display: grid; gap: 6px; }
.informe-carreras div { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.08); border-radius: 10px; padding: 7px 10px; font-size: .72rem; opacity: 0; transform: translateX(16px); transition: opacity .5s ease, transform .5s ease; }
.visible .informe-carreras div { opacity: 1; transform: none; }
.visible .informe-carreras div:nth-child(1) { transition-delay: 1s; } .visible .informe-carreras div:nth-child(2) { transition-delay: 1.15s; }
.visible .informe-carreras div:nth-child(3) { transition-delay: 1.3s; } .visible .informe-carreras div:nth-child(4) { transition-delay: 1.45s; }
.informe-carreras b { color: var(--amarillo); }

/* Celu claro de "por dentro" */
.opcion { border-radius: 14px; padding: 12px; font-size: .8rem; font-weight: 900; text-align: center; border-bottom: 4px solid; }
.opcion.amarilla { background: var(--amarillo); border-bottom-color: var(--amarillo-oscuro); }
.opcion.teal { background: var(--teal); border-bottom-color: var(--teal-oscuro); color: var(--blanco); }
.chips-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-mini span { font-size: .66rem; font-weight: 800; background: var(--blanco); border-radius: 99px; padding: 4px 9px; border-bottom: 2px solid var(--borde); color: var(--tinta-suave); }
.chips-mini .nuevo { background: var(--naranja-suave); color: var(--naranja); border-bottom-color: #F0B79A; }
.btn-mini { background: linear-gradient(180deg, #FF7A4D, var(--naranja)); color: var(--blanco); border-radius: 14px; padding: 12px; text-align: center; font-family: var(--fuente-titulo); border-bottom: 4px solid var(--naranja-oscuro); }
.palabras-mini b { display: block; font-size: .8rem; margin-bottom: 6px; }
.palabras-mini div { display: flex; flex-wrap: wrap; gap: 6px; }
.palabras-mini span { font-size: .7rem; font-weight: 800; background: var(--blanco); border-radius: 99px; padding: 5px 10px; border-bottom: 2px solid var(--borde); }
.palabras-mini span.on.rojo { background: var(--naranja); color: var(--blanco); border-bottom-color: var(--naranja-oscuro); }
.palabras-mini span.on.teal { background: var(--teal); color: var(--blanco); border-bottom-color: var(--teal-oscuro); }

/* ---------- Secciones genéricas ---------- */
.seccion { padding: 70px 20px; }
.seccion-inner { max-width: var(--ancho); margin: 0 auto; }
.titulo-seccion { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 28px; }

/* Cómo funciona */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.paso { background: linear-gradient(180deg, #FFFFFF, #FBF8F2); border-radius: 22px; padding: 22px; box-shadow: var(--sombra); border-bottom: 4px solid var(--borde); transition: transform .25s ease, box-shadow .25s ease; }
.paso:hover { transform: translateY(-6px); box-shadow: var(--sombra-flotante); }
.paso:nth-child(2) { transition-delay: .1s; } .paso:nth-child(3) { transition-delay: .2s; }
.paso-num { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--tinta); margin-bottom: 14px; border-bottom: 5px solid; box-shadow: var(--sombra); }
.paso-num.amarillo { background: linear-gradient(180deg, #FFD36B, var(--amarillo)); border-bottom-color: var(--amarillo-oscuro); }
.paso-num.naranja-claro { background: linear-gradient(180deg, #FFB07A, #F58A4C); border-bottom-color: #D3672B; }
.paso-num.teal { background: linear-gradient(180deg, #6ED3C2, var(--teal)); border-bottom-color: var(--teal-oscuro); color: var(--blanco); }
.paso-num.naranja { background: linear-gradient(180deg, #FF7A4D, var(--naranja)); border-bottom-color: var(--naranja-oscuro); color: var(--blanco); width: 70px; height: 70px; font-size: 1.9rem; margin: 0; flex-shrink: 0; }
.paso h3 { font-size: 1.3rem; margin-bottom: 6px; }
.paso p { color: var(--tinta-suave); font-size: .95rem; }
.pasos-lineas { width: 100%; height: 90px; display: block; }
.pasos-lineas path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.2s ease .2s; }
.pasos-lineas.visible path { stroke-dashoffset: 0; }
.paso-final { max-width: 760px; margin: 0 auto; display: flex; gap: 22px; align-items: flex-start; background: linear-gradient(160deg, #FFFDF6, #FFF1E8); border: 2px solid #F8B9A0; border-radius: 26px; padding: 26px; box-shadow: 0 0 0 6px rgba(244,82,31,.08), var(--sombra); }
.paso-final h3 { font-size: 1.7rem; margin-bottom: 6px; }
.paso-final p { color: var(--tinta-suave); margin-bottom: 14px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas span { font-size: .82rem; font-weight: 800; color: var(--naranja); background: var(--naranja-suave); border-radius: 99px; padding: 6px 12px; }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } .pasos-lineas { display: none; } .paso-final { flex-direction: column; margin-top: 18px; } }

/* Por dentro */
.dentro-cab { margin-bottom: 30px; }
.dentro-cab p { color: var(--tinta-suave); font-size: 1.05rem; }
.dentro-celus { position: relative; display: flex; justify-content: center; align-items: center; min-height: 620px; }
.dentro-img { max-height: 620px; z-index: 1; }
.dentro-img ~ .celu { display: none; }
.dentro-celus.sin-img .celu { display: block; }





.dentro-celus { display: block; min-height: 0; height: calc(640px * var(--ds, 1)); }
.dentro-stage { position: absolute; left: 50%; top: 0; width: 640px; height: 640px; margin-left: -320px; transform: scale(var(--ds, 1)); transform-origin: top center; display: flex; justify-content: center; align-items: center; }

/* Números */
.numeros { padding: 10px 20px 60px; }
.numeros-inner { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.numero { background: var(--tinta); color: var(--blanco); border-radius: 22px; padding: 22px; text-align: center; box-shadow: var(--sombra); }
.numero b { display: block; font-family: var(--fuente-titulo); font-size: 3rem; line-height: 1; color: var(--amarillo); }
.numero > span:not(.numero-ico) { font-size: .85rem; font-weight: 800; color: rgba(255,255,255,.75); }
@media (max-width: 640px) { .numeros-inner { grid-template-columns: 1fr 1fr; } }

/* Comparación */
.comparacion { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: center; }
.comp-tarjeta { border-radius: 22px; padding: 24px; }
.comp-tarjeta.vieja { background: #ECE5D8; border: 2px dashed #CFC4B2; color: var(--tinta-suave); }
.comp-tarjeta.nueva { background: linear-gradient(160deg, #FFFDF6, #FFF1E8); border: 2px solid #F8B9A0; box-shadow: var(--sombra); transition-delay: .1s; }
.comp-titulo { font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.comp-tarjeta.nueva .comp-titulo { color: var(--naranja); }
.comp-tarjeta ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.comp-tarjeta li { position: relative; padding-left: 28px; font-weight: 800; }
.comp-tarjeta.vieja li::before { content: "✕"; position: absolute; left: 0; color: #A89C8B; }
.comp-tarjeta.nueva li::before { content: "✓"; position: absolute; left: 0; color: var(--naranja); }
.comp-kiro { display: flex; justify-content: center; transition-delay: .2s; }
@media (max-width: 860px) { .comparacion { grid-template-columns: 1fr; } }

/* Precio / lista de espera */
.precio { padding: 50px 20px 80px; }
.precio-inner { max-width: 720px; margin: 0 auto; background: linear-gradient(180deg, #FFFFFF, #FBF8F2); border-radius: 30px; padding: 44px 30px; text-align: center; box-shadow: var(--sombra-flotante); border-bottom: 6px solid var(--borde); position: relative; }
.badge-off { display: inline-block; background: linear-gradient(180deg, #FF7A4D, var(--naranja)); color: var(--blanco); font-family: var(--fuente-titulo); font-size: 1rem; padding: 8px 18px; border-radius: 99px; border-bottom: 4px solid var(--naranja-oscuro); transform: rotate(-3deg); margin-bottom: 18px; animation: badge-bailar 2.4s ease-in-out infinite; }
@keyframes badge-bailar { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) scale(1.04); } }
.precio h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 10px; }
.precio > .precio-inner > p { color: var(--tinta-suave); font-size: 1.05rem; margin-bottom: 22px; }
@keyframes temblar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.form-nota { font-size: .85rem; color: var(--tinta-suave); }
.form-nota.ok { color: var(--teal-oscuro); font-weight: 900; }
.form-mini { font-size: .78rem; color: var(--tinta-suave); margin-top: 14px; opacity: .8; }
@media (max-width: 560px) { .precio-inner { padding: 34px 20px; } }

/* ---------- Desde el celu, donde quieras: escena flotante (como "aprende en cualquier lugar" de Duolingo) ---------- */
.donde { padding: 60px 0 0; background: linear-gradient(180deg, transparent, var(--amarillo-suave) 18%, #FFE9C2 60%, var(--amarillo-suave)); }
.donde-cab { text-align: center; padding: 0 20px; max-width: 640px; margin: 0 auto 10px; }
.donde-cab h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 12px; }
.donde-cab p { color: var(--tinta-suave); font-size: 1.1rem; }
.donde-escena { position: relative; width: 100%; overflow: hidden; height: 600px; }
.donde-stage { position: absolute; left: 50%; top: 0; width: 1200px; height: 600px; transform-origin: top center; transform: translateX(-50%) scale(var(--s, 1)); }
.flota { position: absolute; left: var(--x); top: var(--y); will-change: transform; }
.flota-in { animation: flotar 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
/* Celulares chicos, inclinados */
.celu-mini { width: 150px; height: 300px; border-radius: 26px; background: #1F1B17; padding: 8px; box-shadow: 0 30px 50px rgba(60,40,20,.22), inset 0 0 0 2px #3a332c; transform: rotate(var(--rz, 0deg)); position: relative; }
.celu-mini::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 48px; height: 13px; background: #000; border-radius: 99px; z-index: 3; }
.celu-mini-pantalla { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; padding: 34px 12px 12px; display: flex; flex-direction: column; gap: 9px; background: var(--crema); }
.celu-mini-pantalla.tema-b { background: #FFF6E3; }
.celu-mini-pantalla.tema-c { background: #2A231C; }
.mb { display: block; height: 12px; border-radius: 99px; background: #E6DCCB; }
.mb.mb-larga { width: 100%; } .mb.mb-corta { width: 55%; }
.mb.mb-bloque { height: 34px; border-radius: 12px; }
.mb.naranja { background: var(--naranja); } .mb.amarillo { background: var(--amarillo); } .mb.teal { background: var(--teal); }
.mb.clara { background: rgba(255,255,255,.18); }
.mb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-ico { aspect-ratio: 1; background: var(--blanco); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border-bottom: 3px solid var(--borde); }
.mb-codigo { display: flex; gap: 6px; }
.mb-codigo i { width: 30px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--fuente-titulo); color: var(--blanco); }
.mb-codigo .n { background: var(--naranja); } .mb-codigo .a { background: var(--amarillo); color: var(--tinta); } .mb-codigo .t { background: var(--teal); }
.mb-barra { display: block; height: 10px; border-radius: 99px; background: #E6DCCB; overflow: hidden; }
.mb-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--amarillo), var(--naranja)); border-radius: 99px; }
/* Kiro se asoma por la pantalla (entra desde abajo, saluda y se va) */
.kiro-slot { position: absolute; left: 50%; bottom: 0; --escala: 1.6; width: calc(76px * var(--escala)); height: calc(84px * var(--escala)); transform: translateX(-50%) translateY(115%); transition: transform .65s cubic-bezier(.34,1.35,.64,1); z-index: 4; }
.celu-mini.con-kiro .kiro-slot { transform: translateX(-50%) translateY(6%); }
.kiro-slot .kiro { animation: none; }
/* Cubos con letra (cara + lado, look isométrico) */
.cubo { width: 74px; height: 74px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulo); font-size: 2rem; color: var(--blanco); transform: rotate(var(--rz, 0deg)); border-bottom: 10px solid rgba(0,0,0,.22); border-right: 8px solid rgba(0,0,0,.14); box-shadow: 0 18px 30px rgba(60,40,20,.18); }
.cubo.naranja { background: var(--naranja); } .cubo.amarillo { background: var(--amarillo); color: var(--tinta); } .cubo.teal { background: var(--teal); }
.cubo.rosa { background: #E0567A; } .cubo.violeta { background: #8E6BD6; } .cubo.menta { background: var(--menta); color: var(--tinta); }
.adorno { font-size: 3.4rem; display: inline-block; filter: drop-shadow(0 14px 18px rgba(60,40,20,.2)); }
.adorno .i3d img { width: 1em; height: 1em; }
.gema { display: block; width: 26px; height: 40px; background: linear-gradient(160deg, #6ED3C2, var(--teal) 55%, var(--teal-oscuro)); clip-path: polygon(50% 0, 100% 30%, 80% 100%, 20% 100%, 0 30%); transform: rotate(var(--rz, 0deg)); }
.gema.chica { width: 18px; height: 28px; }
@media (max-width: 760px) { .donde { padding-top: 44px; } .donde-cab p { font-size: 1rem; } }

/* Footer */
.pie { padding: 30px 20px 50px; border-top: 1px solid var(--borde); }
.pie-inner { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 14px; text-align: center; }
.pie-logo { font-family: var(--fuente-titulo); font-size: 1.1rem; }
.pie-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: .88rem; font-weight: 800; color: var(--tinta-suave); }
.pie-nota { font-size: .78rem; color: var(--tinta-suave); max-width: 560px; margin: 0 auto; }

/* =====================================================================
   DOPAMINA: XP por explorar, logros, Kiro compañero, palabras que
   saltan, tilt 3D, destellos en los clicks, brillo en los botones,
   cohete para volver arriba, flotantes "+10 XP".
   ===================================================================== */

/* --- XP en la nav + barra de progreso de la página --- */
.nav-xp { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: .85rem; background: linear-gradient(180deg, #FFF6E0, #FFE9B8); color: #C98A12; border-radius: 99px; padding: 6px 12px; border-bottom: 3px solid #E9C98A; box-shadow: 0 4px 14px rgba(242,177,52,.25); position: relative; cursor: default; user-select: none; }
.nav-xp.salta { animation: salto .45s cubic-bezier(.34,1.56,.64,1); }
.nav-xp-rayo { display: inline-block; }
.nav-xp.salta .nav-xp-rayo { animation: rayo .45s ease; }
@keyframes salto { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes rayo { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-20deg) scale(1.4); } 60% { transform: rotate(15deg) scale(1.2); } }
.nav-progreso { height: 4px; background: rgba(31,27,23,.06); }
.nav-progreso-relleno { height: 100%; width: 0; background: linear-gradient(90deg, var(--amarillo), var(--naranja)); border-radius: 0 99px 99px 0; transition: width .15s linear; box-shadow: 0 0 10px rgba(244,82,31,.5); }
@media (max-width: 760px) { .nav-xp { margin-left: auto; } .nav .btn-chico { margin-left: 0; } }
@media (max-width: 420px) { .nav .btn-chico { padding: 10px 10px; font-size: .72rem; } }

/* --- Destellos dorados (aparecen alrededor del XP y de los botones) --- */
.destello { position: fixed; width: 10px; height: 10px; pointer-events: none; z-index: 95; color: var(--amarillo); font-size: 1rem; line-height: 1; animation: destello .7s ease-out forwards; }
@keyframes destello { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(180deg); opacity: 0; } }

/* --- Flotante "+10 XP" que sube y se desvanece --- */
.flotante { position: fixed; z-index: 96; pointer-events: none; font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--naranja); text-shadow: 0 2px 0 var(--blanco), 0 4px 12px rgba(244,82,31,.3); animation: flotante 1s cubic-bezier(.2,.8,.3,1) forwards; transform: translate(-50%, -50%); }
@keyframes flotante { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0; } }

/* --- Logros (tarjetas que entran por arriba a la derecha) --- */
.logros { position: fixed; top: 76px; right: 16px; z-index: 97; display: grid; gap: 10px; pointer-events: none; max-width: calc(100vw - 32px); }
.logro { display: flex; align-items: center; gap: 12px; background: var(--tinta); color: var(--blanco); border-radius: 18px; padding: 12px 16px; box-shadow: var(--sombra-flotante); border-bottom: 4px solid #000; animation: logro-entra .55s cubic-bezier(.34,1.56,.64,1) both, logro-sale .4s ease-in 3.6s forwards; min-width: 240px; }
.logro-ico { font-size: 2rem; line-height: 1; }
.logro-ico .i3d img { width: 1em; height: 1em; }
.logro-titulo { font-family: var(--fuente-titulo); font-size: 1.05rem; line-height: 1.1; color: var(--amarillo); }
.logro-texto { font-size: .8rem; font-weight: 800; color: rgba(255,255,255,.8); }
@keyframes logro-entra { 0% { transform: translateX(120%) rotate(6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes logro-sale { 100% { transform: translateX(120%); opacity: 0; } }
@media (max-width: 560px) { .logros { top: auto; bottom: 16px; left: 16px; right: auto; } .logro { min-width: 0; } }

/* --- Kiro compañero, abajo a la derecha --- */
.compa { position: fixed; right: 18px; bottom: 18px; z-index: 94; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transform: translateY(140%); transition: transform .6s cubic-bezier(.34,1.4,.64,1); cursor: pointer; }
.compa.visible { transform: none; }
.compa .kiro-marco { --escala: 1.3; animation: none; }
.compa.rebota .kiro-marco { animation: compa-rebote .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes compa-rebote { 0% { transform: translateY(0); } 30% { transform: translateY(4px) scale(1.05, .92); } 60% { transform: translateY(-22px); } 100% { transform: translateY(0); } }
.compa-globo { background: var(--blanco); color: var(--tinta); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: .88rem; font-weight: 800; box-shadow: var(--sombra); max-width: 240px; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.4,.64,1); }
.compa-globo.visible { opacity: 1; transform: none; }
@media (max-width: 560px) { .compa { right: 10px; bottom: 10px; } .compa .kiro-marco { --escala: 1; } .compa-globo { font-size: .8rem; max-width: 200px; } }

/* --- Palabras de los títulos que saltan al aparecer --- */
.w { display: inline-block; opacity: 0; transform: translateY(20px) rotate(4deg); }
.w-lista .w, .visible .w { animation: palabra .55s cubic-bezier(.34,1.5,.64,1) forwards; animation-delay: calc(var(--i) * 70ms + .1s); }
@keyframes palabra { 0% { opacity: 0; transform: translateY(20px) rotate(4deg); } 100% { opacity: 1; transform: none; } }
.w:hover { animation: palabra-hover .4s ease; color: var(--naranja); }
@keyframes palabra-hover { 30% { transform: translateY(-6px) rotate(-3deg) scale(1.08); } }

/* --- Tilt 3D (las tarjetas se inclinan siguiendo el mouse) --- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .15s ease, box-shadow .25s ease; }
.tilt.reveal { transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.tilt.reveal.visible { transition: transform .15s ease, box-shadow .25s ease, opacity .7s; }
.paso.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }

/* --- Íconos 3D en pasos y números --- */
.paso { position: relative; overflow: hidden; }
.paso-ico { position: absolute; right: 14px; top: 12px; font-size: 3rem; line-height: 1; opacity: .95; animation: orb-flota 4s ease-in-out infinite; }
.paso-ico .i3d img { width: 1em; height: 1em; }
.paso-final { position: relative; overflow: hidden; }
.paso-ico.grande { right: 22px; top: 18px; font-size: 4.2rem; opacity: .35; }
.numero { position: relative; overflow: hidden; }
.numero-ico { position: absolute; right: 10px; top: 8px; font-size: 2.4rem; line-height: 1; opacity: .9; animation: orb-flota 4s ease-in-out infinite; }
.numero-ico .i3d img { width: 1em; height: 1em; }
.numeros.visible .numero b { animation: salto .5s cubic-bezier(.34,1.56,.64,1) 1.2s; }
.visible .paso-num { animation: num-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.paso:nth-child(2) .paso-num { animation-delay: .15s; } .paso:nth-child(3) .paso-num { animation-delay: .3s; }
@keyframes num-pop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }

/* --- Brillo que barre los botones principales --- */
.btn-naranja, .btn-negro { position: relative; overflow: hidden; }
.btn-naranja::after, .btn-negro::after { content: ""; position: absolute; top: -50%; left: -80%; width: 40%; height: 200%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: brillo 3.2s ease-in-out infinite; }
@keyframes brillo { 0%, 60% { left: -80%; } 100% { left: 160%; } }
.btn:hover { animation: btn-hover .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes btn-hover { 40% { transform: translateY(-4px) scale(1.04); } }
.btn.apretado { animation: btn-apretado .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes btn-apretado { 30% { transform: scale(.92); } 70% { transform: scale(1.06); } }

/* --- Items de la comparación entran uno por uno --- */
.comp-tarjeta li { opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.64,1); }
.comp-tarjeta.visible li { opacity: 1; transform: none; }
.comp-tarjeta.visible li:nth-child(1) { transition-delay: .2s; } .comp-tarjeta.visible li:nth-child(2) { transition-delay: .35s; }
.comp-tarjeta.visible li:nth-child(3) { transition-delay: .5s; } .comp-tarjeta.visible li:nth-child(4) { transition-delay: .65s; }
.comp-tarjeta.nueva li::before { transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1); transition-delay: inherit; }
.comp-tarjeta.nueva.visible li::before { transform: scale(1); }
.comp-tarjeta.nueva.visible li::before { transition-delay: .5s; }
.lista-check li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; }
.visible .lista-check li { opacity: 1; transform: none; }
.visible .lista-check li:nth-child(2) { transition-delay: .15s; } .visible .lista-check li:nth-child(3) { transition-delay: .3s; }

/* --- Hexágono: el nodo encendido brilla --- */
.nodo.on circle { filter: drop-shadow(0 0 10px rgba(244,82,31,.7)); }
.hexa-perfil { animation: hexa-late 3s ease-in-out infinite 1.8s; }
@keyframes hexa-late { 0%, 100% { fill: rgba(244,82,31,.18); } 50% { fill: rgba(244,82,31,.32); } }

/* --- Pills del hero: entran una por una --- */
.hero-pills li { animation: entrar .5s cubic-bezier(.34,1.4,.64,1) both; }
.hero-pills li:nth-child(1) { animation-delay: .7s; } .hero-pills li:nth-child(2) { animation-delay: .85s; } .hero-pills li:nth-child(3) { animation-delay: 1s; }
.hero-botones .btn { animation: entrar .6s cubic-bezier(.34,1.4,.64,1) both; }
.hero-botones .btn:nth-child(1) { animation-delay: .45s; } .hero-botones .btn:nth-child(2) { animation-delay: .6s; }
.orb.o7 { left: 22%; top: -4%; animation-delay: -.5s, 1.2s; font-size: 2.4rem; }
.orb.o8 { right: 26%; top: -6%; animation-delay: -3.2s, 1.35s; font-size: 2.2rem; }
.orb.o9 { left: 36%; top: -8%; animation-delay: -1.8s, 1.5s; font-size: 2.6rem; }

/* --- Cinta: los items saltan al pasar el mouse --- */
.cinta-item { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; cursor: default; }
.cinta-item:hover { transform: translateY(-6px) rotate(-3deg) scale(1.06); box-shadow: var(--sombra-flotante); }

/* --- Celulares de las demos: se inclinan con el mouse --- */
.bloque-ilus .celu { transition: transform .2s ease; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* --- Cohete para volver arriba --- */
.cohete { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; background: var(--blanco); border: 2px solid var(--borde); border-bottom-width: 5px; border-radius: 99px; padding: 10px 18px; font: inherit; font-weight: 900; color: var(--tinta); cursor: pointer; box-shadow: var(--sombra); transition: transform .15s ease; }
.cohete:hover { transform: translateY(-3px); }
.cohete .i3d { font-size: 1.5rem; transition: transform .2s ease; }
.cohete:hover .i3d { transform: translateY(-3px) rotate(-10deg); }
.cohete.despega .i3d { animation: despegar .9s cubic-bezier(.5,0,.8,.2) forwards; }
@keyframes despegar { 0% { transform: translateY(0); } 15% { transform: translateY(4px) rotate(-6deg); } 100% { transform: translateY(-120vh) rotate(-8deg); opacity: 0; } }

/* --- Emojis que suben cuando tocás a Kiro --- */
.emoji-sube { position: fixed; z-index: 96; pointer-events: none; font-size: 1.8rem; line-height: 1; animation: emoji-sube 1.1s cubic-bezier(.2,.8,.3,1) forwards; transform: translate(-50%, -50%); }
.emoji-sube .i3d img { width: 1em; height: 1em; }
@keyframes emoji-sube { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { transform: translate(calc(-50% + var(--dx)), -200%) scale(.9) rotate(var(--rot)); opacity: 0; } }

/* El tilt convive con el reveal: escondido antes de aparecer, inclinable después */
.tilt.reveal:not(.visible) { transform: translateY(28px); }
.tilt.reveal.visible { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.paso.tilt.reveal.visible:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }

/* Confeti */
.confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* Íconos 3D (mismo helper que el test) */
.i3d { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; position: relative; }
.i3d img { width: 1.15em; height: 1.15em; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60,40,20,.25)); }
.i3d .i3d-fb { display: inline; } .i3d.ok .i3d-fb { display: none; }

/* Menos animación si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 860px) { .orb.o7 { top: 6%; left: 14%; } .orb.o9 { top: 2%; left: 34%; } .orb.o8 { top: 4%; right: 26%; } }

/* ---------- Preguntas frecuentes ---------- */
.faq-lista { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item { background: linear-gradient(180deg, #FFFFFF, #FBF8F2); border-radius: 18px; box-shadow: var(--sombra); border-bottom: 4px solid var(--borde); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font-family: var(--fuente-titulo); font-size: 1.1rem; position: relative; -webkit-tap-highlight-color: transparent; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 10px; background: var(--naranja-suave); color: var(--naranja); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--naranja); color: var(--blanco); }
.faq-item p { padding: 0 22px 18px; color: var(--tinta-suave); font-size: .98rem; animation: entrar .35s ease both; }
.faq-item:hover { border-bottom-color: #F0B79A; }
.faq .titulo-seccion { text-align: center; }

/* ---------- Las once partes ---------- */
.partes-cab { text-align: center; max-width: 680px; margin: 0 auto 30px; }
.partes-cab .titulo-seccion { margin-bottom: 12px; }
.partes-cab p { color: var(--tinta-suave); font-size: 1.1rem; }
.partes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.parte { position: relative; background: linear-gradient(180deg, #FFFFFF, #FBF8F2); border-radius: 22px; padding: 18px 18px 16px; box-shadow: var(--sombra); border-bottom: 4px solid var(--borde); display: flex; flex-direction: column; gap: 6px; min-height: 190px; }
.parte-num { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 9px; background: var(--crema); color: var(--tinta-suave); font-family: var(--fuente-titulo); font-size: .95rem; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid var(--borde); }
.parte-ico { font-size: 2.8rem; line-height: 1; display: inline-block; margin-bottom: 4px; animation: orb-flota 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
.parte-ico .i3d img { width: 1em; height: 1em; }
.parte:nth-child(2n) .parte-ico { animation-delay: -1.3s; } .parte:nth-child(3n) .parte-ico { animation-delay: -2.6s; }
.parte h3 { font-size: 1.15rem; line-height: 1.15; }
.parte p { color: var(--tinta-suave); font-size: .88rem; line-height: 1.4; flex: 1; }
.parte-min { align-self: flex-start; font-size: .72rem; font-weight: 900; background: var(--amarillo-suave); color: #B07A12; border-radius: 99px; padding: 4px 10px; border-bottom: 2px solid #E9C98A; }
.parte:hover { border-bottom-color: var(--naranja); }
.parte:hover .parte-num { background: var(--naranja); color: var(--blanco); border-bottom-color: var(--naranja-oscuro); }
.parte.final { background: linear-gradient(160deg, #FFF7F3, #FFE3D8); border: 2px solid #F8B9A0; border-bottom-width: 4px; }
.parte.final .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 1000px) { .partes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .partes-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .parte { padding: 14px; min-height: 0; } .parte-ico { font-size: 2.2rem; } .parte h3 { font-size: 1rem; } .parte p { font-size: .8rem; } }
@media (max-width: 360px) { .partes-grid { grid-template-columns: 1fr; } }

/* ---------- Todo el texto entra progresivo (palabra por palabra, suave) ---------- */
.w2 { display: inline-block; opacity: 0; transform: translateY(6px); }
.w-lista .w2, .visible .w2 { animation: palabra-suave .45s ease forwards; animation-delay: calc(var(--i) * 18ms + var(--base, .15s)); }
@keyframes palabra-suave { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.faq-item[open] p .w2 { animation: palabra-suave .35s ease forwards; animation-delay: calc(var(--i) * 12ms); }
.faq-item:not([open]) p .w2 { animation: none; opacity: 0; }

/* ---------- "Así se ve por dentro": derechos → inclinados, y la pantalla vive ---------- */
.celu.inclinado-izq { z-index: 2; }
.dentro-celus .celu { transform: rotate(0) translateX(0); transition: transform .9s cubic-bezier(.34,1.3,.64,1) .55s; }
.dentro-celus.visible .celu.inclinado-izq { transform: rotate(-6deg) translateX(30px); }
.dentro-celus.visible .celu.inclinado-der { transform: rotate(6deg) translateX(-30px) translateY(20px); }
.dentro-celus.visible:hover .celu { transition-delay: 0s; transition-duration: .5s; }
.dentro-celus.visible:hover .celu.inclinado-izq { transform: rotate(-9deg) translateX(10px) translateY(-6px); }
.dentro-celus.visible:hover .celu.inclinado-der { transform: rotate(9deg) translateX(-10px) translateY(14px); }
/* Barra de estado: hora, señal, wifi, batería */
.celu-status { position: absolute; top: 14px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 900; color: var(--tinta); z-index: 2; pointer-events: none; }
.celu.oscuro .celu-status { color: var(--blanco); }
.celu-status .st-der { display: flex; align-items: center; gap: 5px; }
.st-senal { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.st-senal i { display: block; width: 3px; background: currentColor; border-radius: 1px; height: 4px; }
.st-senal i:nth-child(2) { height: 6px; } .st-senal i:nth-child(3) { height: 8px; } .st-senal i:nth-child(4) { height: 10px; opacity: .35; }
.st-wifi { width: 14px; height: 10px; display: inline-block; }
.st-bat { position: relative; width: 24px; height: 11px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1.5px; }
.st-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 1px; opacity: .5; }
.st-bat i { display: block; height: 100%; width: var(--bat, 78%); background: var(--teal); border-radius: 2px; transition: width 1.5s ease; }
.celu.oscuro .st-bat i { background: var(--amarillo); }
.st-bat.carga i { animation: bat-carga 3s ease-in-out infinite; }
@keyframes bat-carga { 0% { width: 35%; } 100% { width: 92%; } }
/* La pantalla del celular claro "juega sola" */
.opcion { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; position: relative; }
.opcion.elegida { transform: scale(1.04); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 6px var(--naranja); }
.opcion.elegida::after { content: "✓"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--blanco); color: var(--naranja); font-size: .75rem; display: flex; align-items: center; justify-content: center; animation: nodo-pop .35s cubic-bezier(.34,1.56,.64,1); }
.chips-mini span, .palabras-mini span { transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.palabras-mini span.on { transform: scale(1.06); }
.chips-mini .nuevo.pop { animation: salto .45s cubic-bezier(.34,1.56,.64,1); }
.btn-mini { transition: transform .1s ease; }
.btn-mini.toca { transform: scale(.95) translateY(2px); }
.informe-carreras div b { transition: color .3s ease; }
.informe-carreras div.sube { animation: salto .45s cubic-bezier(.34,1.56,.64,1); }
.informe-carreras div.sube b { color: var(--blanco); }

/* ---------- "Por qué es distinto": tachado, VS y sello ---------- */
.comparacion { position: relative; }
.comp-tarjeta.vieja.visible li { transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.64,1), color .4s ease; }
.comp-tarjeta.vieja.visible li:nth-child(1) { color: #A89C8B; transition-delay: .2s, .2s, 1.2s; }
.comp-tarjeta.vieja.visible li:nth-child(2) { color: #A89C8B; transition-delay: .35s, .35s, 1.4s; }
.comp-tarjeta.vieja.visible li:nth-child(3) { color: #A89C8B; transition-delay: .5s, .5s, 1.6s; }
.comp-tarjeta.vieja.visible li:nth-child(4) { color: #A89C8B; transition-delay: .65s, .65s, 1.8s; }
.comp-tarjeta.vieja.visible { animation: vieja-cae .6s ease 1.9s both; }
@keyframes vieja-cae { 0% { rotate: 0deg; } 60% { rotate: -2.5deg; } 100% { rotate: -1.5deg; } }
.comp-tarjeta.vieja { position: relative; z-index: 3; }
.comp-vs { position: absolute; right: -47px; top: 50%; transform: translateY(-50%) scale(0); width: 58px; height: 58px; border-radius: 50%; background: var(--tinta); color: var(--amarillo); font-family: var(--fuente-titulo); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--crema), var(--sombra-flotante); z-index: 3; }
.comparacion.vs-visible .comp-vs { animation: vs-pop .6s cubic-bezier(.34,1.56,.64,1) .3s forwards; }
@keyframes vs-pop { 0% { transform: translateY(-50%) scale(0) rotate(-30deg); } 100% { transform: translateY(-50%) scale(1) rotate(-8deg); } }
.comp-tarjeta.nueva { position: relative; overflow: visible; }
.comp-tarjeta.nueva.visible { animation: nueva-brilla 2.4s ease-in-out 2s infinite; }
@keyframes nueva-brilla { 0%, 100% { box-shadow: var(--sombra); } 50% { box-shadow: 0 0 0 8px rgba(244,82,31,.14), var(--sombra-flotante); } }
.comp-sello { position: absolute; top: -14px; right: 18px; padding: 4px 12px; border: 4px solid var(--naranja); color: var(--naranja); background: rgba(255,255,255,.95); border-radius: 10px; font-family: var(--fuente-titulo); font-size: 1.1rem; letter-spacing: .14em; transform: rotate(8deg) scale(3); opacity: 0; z-index: 2; }
.comp-tarjeta.nueva.visible .comp-sello { animation: sello-cae .45s cubic-bezier(.2,.9,.3,1.2) 2.1s forwards; }
@keyframes sello-cae { 0% { transform: rotate(8deg) scale(3); opacity: 0; } 100% { transform: rotate(8deg) scale(1); opacity: 1; } }
.comp-kiro.visible .kiro { animation: kiro-salta .7s cubic-bezier(.36,.07,.19,.97) 2.2s 2; }
@keyframes kiro-salta { 0%, 100% { translate: 0 0; } 30% { translate: 0 3px; } 60% { translate: 0 -16px; } }
@media (max-width: 860px) { .comp-vs { display: none; } }

/* Más tildes en la lista del informe: entran en cascada */
.visible .lista-check li:nth-child(4) { transition-delay: .45s; } .visible .lista-check li:nth-child(5) { transition-delay: .6s; }
.visible .lista-check li:nth-child(6) { transition-delay: .75s; } .visible .lista-check li:nth-child(7) { transition-delay: .9s; }
.lista-check li::before { transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.visible .lista-check li::before { transform: scale(1); transition-delay: inherit; }
/* Nada puede ensanchar la página en el celu (íconos que orbitan, globo, cubos) */
html { overflow-x: hidden; }
.hero, .cinta, .donde { overflow-x: clip; }
.globo { max-width: min(320px, calc(100vw - 40px)); }
.eyebrow { flex-wrap: wrap; column-gap: 5px; row-gap: 2px; }
.eyebrow .punto { margin-right: 4px; }

/* Tachado del "test de siempre" (text-decoration: sirve aunque el ítem ocupe dos líneas) */
.comp-tarjeta.vieja li { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: transparent; transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.64,1), color .4s ease, text-decoration-color .45s ease; }
.comp-tarjeta.vieja.visible li { text-decoration-color: rgba(201,72,58,.8); }
.comp-tarjeta.vieja.visible li:nth-child(1) { transition-delay: .2s, .2s, 1.2s, .9s; } .comp-tarjeta.vieja.visible li:nth-child(2) { transition-delay: .35s, .35s, 1.4s, 1.1s; }
.comp-tarjeta.vieja.visible li:nth-child(3) { transition-delay: .5s, .5s, 1.6s, 1.3s; } .comp-tarjeta.vieja.visible li:nth-child(4) { transition-delay: .65s, .65s, 1.8s, 1.5s; }

/* =====================================================================
   CELULAR: ajustes para que cada sección se vea bien en pantallas chicas
   ===================================================================== */
@media (max-width: 760px) {
  /* Fondo: blobs más chicos y suaves para que no tapen el contenido */
  .blob-1 { width: 300px; height: 300px; right: -120px; top: -120px; opacity: .7; }
  .blob-2 { width: 260px; height: 260px; left: -140px; opacity: .4; }
  .blob-3 { width: 280px; height: 280px; right: -160px; opacity: .5; }
  /* Nav compacta */
  .nav-inner { padding: 10px 14px; gap: 12px; }
  .logo { font-size: 1.25rem; }
  /* Hero: título, botones a todo el ancho, escena más baja */
  .hero { padding: 22px 16px 10px; }
  .hero h1 { font-size: 2.15rem; }
  .hero .sub { font-size: 1.02rem; margin-bottom: 20px; }
  .hero-botones { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; }
  .hero-botones .btn { width: 100%; }
  .hero-escena { min-height: 360px; padding-bottom: 76px; margin-top: 6px; }
  .globo { font-size: .82rem; padding: 10px 14px; }
  .cinta { padding-top: 6px; }
  /* Secciones más compactas */
  .seccion { padding: 44px 16px; }
  .bloque { padding: 40px 16px; }
  .titulo-seccion { font-size: 1.9rem; margin-bottom: 18px; }
  .bloque h2 { font-size: 1.9rem; }
  .bloque p, .partes-cab p, .donde-cab p, .dentro-cab p { font-size: 1rem; }
  /* Cómo funciona: pasos horizontales (número a la izquierda, texto a la derecha) */
  .pasos { gap: 12px; }
  .paso { display: grid; grid-template-columns: 54px 1fr; column-gap: 14px; align-items: start; padding: 16px 16px 14px; }
  .paso .paso-num { width: 54px; height: 54px; font-size: 1.4rem; margin: 0; grid-row: 1 / span 2; }
  .paso h3 { font-size: 1.15rem; margin: 6px 0 2px; }
  .paso p { font-size: .9rem; padding-right: 36px; }
  .paso-ico { font-size: 2.2rem; right: 10px; top: 10px; }
  .paso-final { padding: 20px 18px; gap: 14px; margin-top: 14px; }
  .paso-final .paso-num { width: 54px; height: 54px; font-size: 1.5rem; }
  .paso-final h3 { font-size: 1.4rem; }
  .paso-ico.grande { font-size: 3rem; right: 14px; top: 12px; }
  .etiquetas span { font-size: .78rem; }
  /* Por dentro */
  .dentro-cab { margin-bottom: 14px; text-align: center; }
  /* Por qué es distinto */
  .comparacion { gap: 14px; }
  .comp-tarjeta { padding: 18px 16px; }
  .comp-tarjeta li { font-size: .92rem; padding-left: 26px; }
  .comp-tarjeta ul { gap: 8px; }
  .comp-sello { font-size: .95rem; top: -12px; right: 12px; padding: 3px 10px; border-width: 3px; }
  .comp-kiro { margin-top: -6px; }
  /* Listas con tilde */
  .lista-check li { font-size: .95rem; }
  /* Las once partes: carrusel horizontal con deslizamiento */
  .partes-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 18px; margin: 0 -16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .partes-grid::-webkit-scrollbar { display: none; }
  .parte { flex: 0 0 236px; scroll-snap-align: center; min-height: 0; padding: 16px; transition-delay: 0s !important; }
  .parte-ico { font-size: 2.6rem; }
  .parte h3 { font-size: 1.05rem; }
  .parte p { font-size: .85rem; }
  .partes-cab { margin-bottom: 6px; }
  .partes-pista { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: .78rem; font-weight: 900; color: var(--tinta-suave); margin-top: 4px; }
  .partes-pista i { display: inline-block; font-style: normal; animation: pista-desliza 1.4s ease-in-out infinite; }
  @keyframes pista-desliza { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  /* Motivación */
  .motivacion { gap: 8px; }
  /* Números: ícono arriba del número */
  .numeros { padding: 0 16px 40px; }
  .numeros-inner { gap: 10px; }
  .numero { padding: 16px 10px; }
  .numero span.numero-ico { position: static; display: block; font-size: 2rem; margin-bottom: 4px; }
  .numero b { font-size: 2.4rem; }
  .numero > span:not(.numero-ico) { font-size: .78rem; }
  /* Donde quieras */
  .donde { padding-top: 40px; }
  /* FAQ */
  .faq-item summary { font-size: 1rem; padding: 15px 50px 15px 16px; }
  .faq-item p { padding: 0 16px 16px; font-size: .92rem; }
  /* Lista de espera */
  .precio { padding: 30px 16px 60px; }
  .precio-inner { padding: 30px 18px; border-radius: 24px; }
  .badge-off { font-size: .9rem; }
  .precio h2 { font-size: 1.7rem; }
  /* Kiro compañero: más chico y su globo más angosto */
  .compa { right: 8px; bottom: 8px; gap: 4px; }
  .compa .kiro-marco { --escala: .95; }
  .compa-globo { font-size: .76rem; padding: 8px 10px; max-width: 190px; }
  /* Cohete */
  .cohete { font-size: .9rem; }
}
@media (min-width: 761px) { .partes-pista { display: none; } }
/* Las palabras (inline-block) también llevan el tachado, si no queda punteado */
.comp-tarjeta.vieja li .w2 { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: transparent; transition: text-decoration-color .45s ease; transition-delay: inherit; }
.comp-tarjeta.vieja.visible li .w2 { text-decoration-color: rgba(201,72,58,.8); }

/* ---------- Precio y compra ---------- */
.precio-titulo { text-align: center; margin-bottom: 6px; }
.precio-sub { text-align: center; color: var(--tinta-suave); font-size: 1.05rem; margin-bottom: 22px; }
.precio .precio-inner { max-width: 720px; text-align: center; }
.precio-monto { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 18px; }
.precio-antes { font-size: .9rem; font-weight: 800; color: var(--tinta-suave); }
.precio-antes s { text-decoration-thickness: 2px; text-decoration-color: var(--naranja); }
.precio-num { font-family: var(--fuente-titulo); font-size: clamp(3rem, 8vw, 4.4rem); line-height: 1; color: var(--tinta); letter-spacing: -.02em; }
.precio-nota { font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.precio-incluye { text-align: left; background: var(--crema); border-radius: 18px; padding: 16px 18px; margin-bottom: 20px; border-bottom: 3px solid var(--borde); }
.precio-incluye-titulo { font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja); margin-bottom: 10px; text-align: center; }
.lista-check.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 0; }
.lista-check.dos-columnas li { font-size: .92rem; font-weight: 700; }
.lista-check.dos-columnas li strong { font-weight: 900; }
.btn-comprar { width: 100%; max-width: 420px; font-size: 1.1rem; }
.btn-comprar:disabled { opacity: .7; cursor: wait; animation: none; }
.pago-aviso { background: var(--naranja-suave); color: var(--naranja-oscuro); border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: .9rem; margin: 0 auto 14px; max-width: 720px; text-align: center; animation: entrar .4s ease both; }
@media (max-width: 640px) { .lista-check.dos-columnas { grid-template-columns: 1fr; } .precio-incluye { padding: 14px; } }

/* ---------- Probá una parte gratis ---------- */
.prueba-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.prueba-texto .titulo-seccion { margin-bottom: 12px; }
.prueba-texto > p { font-size: 1.1rem; color: var(--tinta-suave); }
.prueba-texto > p strong { color: var(--tinta); }
.prueba-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.prueba-celu { display: flex; justify-content: center; }
.celu.demo { width: 340px; height: 690px; }
.celu.demo .celu-pantalla { padding: 0; gap: 0; background: var(--crema); }
.celu.demo .celu-status, .celu.demo::before { display: none; }
.celu.demo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--crema); }
.prueba-play { position: absolute; inset: 0; border: 0; background: radial-gradient(circle at 50% 40%, #FFF6E8, var(--crema)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: inherit; color: var(--tinta); -webkit-tap-highlight-color: transparent; }
.prueba-play-ico { font-size: 5rem; line-height: 1; animation: orb-flota 4s ease-in-out infinite; }
.prueba-play-ico .i3d img { width: 1em; height: 1em; }
.prueba-play b { font-family: var(--fuente-titulo); font-size: 1.5rem; }
.prueba-play small { font-weight: 800; color: var(--tinta-suave); }
.prueba-play::after { content: "▶"; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, #FF7A4D, var(--naranja)); color: var(--blanco); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; padding-left: 4px; margin-top: 10px; border-bottom: 5px solid var(--naranja-oscuro); box-shadow: var(--sombra); animation: pulsar 2.2s ease-in-out infinite; }
.prueba-play:hover::after { filter: brightness(1.06); }
@media (max-width: 860px) {
  .prueba-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .prueba-texto .lista-check { text-align: left; max-width: 360px; margin-left: auto; margin-right: auto; }
  .prueba-botones { justify-content: center; }
  .prueba-celu { display: none; }   /* en el celu la prueba se abre a pantalla completa */
}

/* ---------- Escena "donde quieras" en el celu: se reacomoda en un escenario angosto y entra entera ---------- */
@media (max-width: 760px) {
  .donde-stage { width: 620px; height: 800px; }
  .donde-stage .flota:nth-child(1) { --x: 5%; --y: 6%; }     /* celu 1 */
  .donde-stage .flota:nth-child(2) { --x: 58%; --y: 4%; }    /* celu 2 */
  .donde-stage .flota:nth-child(3) { --x: 8%; --y: 54%; }    /* celu 3 */
  .donde-stage .flota:nth-child(4) { --x: 60%; --y: 52%; }   /* celu 4 */
  .donde-stage .flota:nth-child(5) { --x: 45%; --y: 0%; }    /* R */
  .donde-stage .flota:nth-child(6) { --x: 37%; --y: 30%; }   /* I */
  .donde-stage .flota:nth-child(7) { --x: 41%; --y: 64%; }   /* A */
  .donde-stage .flota:nth-child(8) { --x: 1%; --y: 42%; }    /* S */
  .donde-stage .flota:nth-child(9) { --x: 83%; --y: 36%; }   /* E */
  .donde-stage .flota:nth-child(10) { --x: 45%; --y: 90%; }  /* C */
  .donde-stage .flota:nth-child(11) { --x: 24%; --y: 43%; }  /* fuego */
  .donde-stage .flota:nth-child(12) { --x: 72%; --y: 44%; }  /* estrella */
  .donde-stage .flota:nth-child(13) { --x: 2%; --y: 92%; }   /* rayo */
  .donde-stage .flota:nth-child(14) { --x: 86%; --y: 90%; }  /* trofeo */
  .donde-stage .flota:nth-child(15) { --x: 47%; --y: 48%; }  /* gema */
  .donde-stage .flota:nth-child(16) { --x: 30%; --y: 97%; }  /* gema chica */
  .donde-stage .flota:nth-child(17) { --x: 92%; --y: 4%; }   /* gema */
}
/* Los dolores del test de siempre: legibles (se tachan finito) y con las X en rojo */
.comp-tarjeta.vieja li::before { color: #C9483A; font-weight: 900; }
.comp-tarjeta.vieja li strong { color: var(--tinta); }
.comp-tarjeta.vieja.visible li:nth-child(n) { color: #6E6458; }
.comp-tarjeta.vieja li, .comp-tarjeta.vieja li .w2 { text-decoration-thickness: 2px; }
.comp-tarjeta.vieja.visible li, .comp-tarjeta.vieja.visible li .w2 { text-decoration-color: rgba(201,72,58,.5); }

/* ---------- Sin JavaScript: todo visible igual (las animaciones son un extra) ---------- */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .w, .no-js .w2 { opacity: 1; transform: none; }

/* ---------- Consentimiento antes de comprar ---------- */
.consentimiento { display: flex; align-items: flex-start; gap: 10px; text-align: left; max-width: 560px; margin: 0 auto 14px; padding: 12px 14px; background: var(--crema); border-radius: 14px; border-bottom: 3px solid var(--borde); cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--tinta); line-height: 1.4; }
.consentimiento input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--naranja); cursor: pointer; }
.consentimiento a { color: var(--naranja); text-decoration: underline; }
.consentimiento.marcado { background: #FFF7F3; border-bottom-color: #F0B79A; }
.btn-comprar:disabled { opacity: .45; cursor: not-allowed; animation: none; filter: none; transform: none; }
.btn-comprar:disabled::after { display: none; }

/* ---------- Para madres y padres ---------- */
.padres { background: linear-gradient(180deg, transparent, #FBF8F2 20%, #FBF8F2 80%, transparent); }
.padres-cab { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.padres-cab .titulo-seccion { margin-bottom: 10px; }
.padres-cab p { color: var(--tinta-suave); font-size: 1.05rem; }
.padres-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.padres-item { position: relative; background: linear-gradient(180deg, #FFFFFF, #FBF8F2); border-radius: 22px; padding: 22px 22px 20px 22px; box-shadow: var(--sombra); border-bottom: 4px solid var(--borde); }
.padres-ico { font-size: 2.4rem; line-height: 1; display: inline-block; margin-bottom: 8px; }
.padres-ico .i3d img { width: 1em; height: 1em; }
.padres-item h3 { font-size: 1.25rem; margin-bottom: 8px; }
.padres-item p { color: var(--tinta-suave); font-size: .95rem; line-height: 1.5; }
.padres-item p strong { color: var(--tinta); }
.padres-item a { color: var(--naranja); text-decoration: underline; font-weight: 800; }
.padres-pie { text-align: center; margin-top: 20px; color: var(--tinta-suave); font-size: .95rem; }
.padres-pie a { color: var(--naranja); font-weight: 800; text-decoration: underline; }
@media (max-width: 760px) { .padres-grid { grid-template-columns: 1fr; gap: 12px; } .padres-item { padding: 18px 16px; } }

/* ---------- Contacto: botón flotante y línea del footer ---------- */
.contacto-flotante { position: fixed; left: 18px; bottom: 18px; z-index: 93; display: flex; align-items: center; gap: 8px; background: var(--blanco); color: var(--tinta); border-radius: 99px; padding: 8px 14px 8px 8px; box-shadow: var(--sombra-flotante); border-bottom: 4px solid var(--borde); font-weight: 900; font-size: .9rem; text-decoration: none; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.contacto-flotante:hover { transform: translateY(-3px) scale(1.03); }
.contacto-ico { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, #FF7A4D, var(--naranja)); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.contacto-ico .i3d img { width: 1em; height: 1em; }
@media (max-width: 560px) { .contacto-flotante { left: 10px; bottom: 10px; padding: 6px; } .contacto-texto { display: none; } }
.pie-legal { font-size: .82rem; }
.pie-colegios { font-size: .92rem; font-weight: 800; color: var(--tinta-suave); }
.pie-colegios a { color: var(--naranja); text-decoration: underline; }

/* ---------- Páginas legales (privacidad / términos) ---------- */
.pagina-legal { background-color: var(--crema); }
.legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.legal-eyebrow { font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja); margin-bottom: 10px; }
.legal h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin-bottom: 8px; }
.legal-fecha { color: var(--tinta-suave); font-size: .88rem; margin-bottom: 22px; }
.legal-resumen { background: linear-gradient(160deg, #FFFDF6, #FFF1E8); border: 2px solid #F8B9A0; border-radius: 18px; padding: 16px 18px; margin-bottom: 26px; font-size: .98rem; line-height: 1.5; }
.legal h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.legal p, .legal li { font-size: .98rem; line-height: 1.6; color: var(--tinta); font-weight: 600; }
.legal p { margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin: 0 0 12px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--naranja); text-decoration: underline; font-weight: 800; }
.legal strong { font-weight: 900; }
.legal-contacto { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--borde); color: var(--tinta-suave); }

/* ---------- Pie: los links se ven como botones ---------- */
.pie-links { gap: 10px; }
.pie-links a { display: inline-block; padding: 8px 15px; border-radius: 999px; background: var(--blanco); color: var(--tinta); border: 2px solid var(--borde); border-bottom-width: 4px; font-weight: 800; transition: transform .15s ease, border-color .15s ease, color .15s ease; }
.pie-links a:hover { color: var(--naranja); border-color: var(--naranja); transform: translateY(-2px); }
.pie-links a:active { transform: translateY(1px); border-bottom-width: 2px; }
.pie-legal a { font-size: .8rem; padding: 6px 13px; background: transparent; color: var(--tinta-suave); }

/* ---------- Contacto (mail) ---------- */
.contacto .titulo-seccion, .contacto-sub { text-align: center; }
.contacto-sub { max-width: 560px; margin: -10px auto 26px; color: var(--tinta-suave); font-size: 1.05rem; }
.contacto-caja { position: relative; max-width: 720px; margin: 0 auto; background: var(--blanco); border-radius: 28px; border-bottom: 6px solid var(--borde); box-shadow: var(--sombra-flotante); padding: 30px 26px; text-align: center; }
.contacto-caja-ico { display: inline-block; font-size: 3rem; margin-bottom: 4px; }
.contacto-caja-ico .i3d img { width: 1em; height: 1em; }
.contacto-mail { display: block; font-family: var(--fuente-titulo); font-size: clamp(1.35rem, 5vw, 2.1rem); font-weight: 700; color: var(--naranja); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; word-break: break-all; margin-bottom: 18px; }
.contacto-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
.contacto-botones .btn { font-size: .95rem; padding: 12px 20px; }
.contacto-temas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.contacto-temas li { display: flex; gap: 10px; align-items: flex-start; background: var(--crema, #F4EFE6); border-radius: 16px; padding: 12px 14px; }
.contacto-temas li > span { font-size: 1.4rem; line-height: 1.2; }
.contacto-temas b { display: block; font-size: .95rem; }
.contacto-temas small { color: var(--tinta-suave); font-size: .85rem; font-weight: 700; }
@media (max-width: 640px) { .contacto-temas { grid-template-columns: 1fr; } .contacto-caja { padding: 24px 16px; } .contacto-botones .btn { flex: 1 1 100%; } }

/* ---------- Colegios e instituciones ---------- */
.colegios { padding-top: 10px; }
.colegios-caja { position: relative; max-width: 880px; margin: 0 auto; display: flex; gap: 26px; align-items: center; background: linear-gradient(135deg, #FFF3C4, #FFE0CC); border-radius: 28px; border-bottom: 6px solid #F0C9A8; padding: 34px 30px; }
.colegios-ico { flex: none; font-size: 5.5rem; }
.colegios-ico .i3d img { width: 1em; height: 1em; }
.colegios-texto .titulo-seccion { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 12px; }
.colegios-texto p { margin: 0 0 10px; font-size: 1.02rem; }
.colegios-pide { font-weight: 900; margin-top: 14px !important; }
.colegios-texto .lista-check { margin: 8px 0 20px; }
.colegios-texto .btn { display: inline-block; }
@media (max-width: 700px) { .colegios-caja { flex-direction: column; text-align: center; padding: 28px 18px; } .colegios-ico { font-size: 4rem; } .colegios-texto .lista-check { text-align: left; } .colegios-texto .btn { width: 100%; box-sizing: border-box; } }