/* ==========================================================================
   GIRAPON · estilos.css
   Mobile-first. Todo está pensado para que la máquina entre en pantalla
   y se pueda girar con una sola mano.

   Índice
   00 · Tokens y reset          07 · Sección clara y didáctica
   01 · Tipografía y utilidades 08 · Series y panel
   02 · Logo                    09 · Mi colección
   03 · Botones y formularios   10 · Reciclá tu cápsula
   04 · Barra superior          11 · Dónde girar
   05 · Hero                    12 · B2B
   06 · Simulador               13 · FAQ y pie
                                14 · Movimiento reducido
   ========================================================================== */

/* ==========================================================================
   00 · TOKENS Y RESET
   ========================================================================== */
:root{
  /* Paleta de marca */
  --rosa:#FF2D78;
  --violeta:#241847;
  --cian:#3EE6E0;
  --amarillo:#FFD23F;
  --tinta:#1A1038;
  --papel:#F7F5FB;

  /* Derivados accesibles (contraste AA verificado) */
  --rosa-texto:#D6004F;      /* rosa legible sobre fondos claros */
  --rosa-suave:#FF7FAB;      /* rosa legible sobre violeta */
  --cian-texto:#0E7C78;      /* cian legible sobre fondos claros */
  --violeta-hondo:#150B2E;
  --violeta-medio:#2E1B57;
  --tinta-70:rgba(26,16,56,.72);
  --tinta-55:rgba(26,16,56,.66);   /* 4,9:1 sobre --papel */
  --blanco-80:rgba(255,255,255,.82);
  --blanco-60:rgba(255,255,255,.62);

  /* Tipografía */
  --tipo-titulo:"Baloo 2", "Nunito Sans", system-ui, sans-serif;
  --tipo-texto:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Métricas */
  --caja:1180px;
  --radio:20px;
  --radio-g:30px;
  --barra-alto:64px;

  /* Sombras */
  --sombra-suave:0 12px 34px rgba(26,16,56,.12);
  --sombra-media:0 18px 46px rgba(10,4,28,.34);
  --sombra-neon:0 0 34px rgba(255,45,120,.42);

  --transicion:.28s cubic-bezier(.4,0,.2,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--barra-alto) + 10px);
}

body{
  margin:0;
  font-family:var(--tipo-texto);
  font-size:clamp(16px,.95rem + .2vw,17.5px);
  line-height:1.62;
  color:var(--papel);
  background:var(--violeta-hondo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* nunca scroll horizontal */
}

/* Con una ventana abierta se traba el scroll de la página. En iOS
   overflow:hidden en el body no alcanza, hay que fijarlo; el `top` lo
   pone el JS con la posición guardada y la devuelve al cerrar. */
body.sin-scroll{
  position:fixed; left:0; right:0; width:100%; overflow:hidden;
}

/* Guardia general: los items de grilla/flex tienen min-width:auto por defecto
   y cualquier hijo ancho (una imagen, un carrusel) ensancharía la página entera. */
.b2b-isla > *, .donde > *, .caja--reciclar > *, .b2b-contacto > *,
.explica > *, .panel__cabecera > *, .loc > *{ min-width:0; }

[hidden]{ display:none !important; }

img,svg,canvas{ max-width:100%; }
img{ height:auto; display:block; }

h1,h2,h3,h4{ font-family:var(--tipo-titulo); font-weight:800; line-height:1.08; margin:0; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }

/* Foco visible con doble aro: legible sobre claro y sobre oscuro */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--violeta-hondo), 0 0 0 6px var(--cian);
  border-radius:6px;
}
.sec--claro :focus-visible,
.sec--b2b :focus-visible{ box-shadow:0 0 0 3px var(--papel), 0 0 0 6px var(--rosa-texto); }

/* Salto al contenido */
.saltar{
  position:absolute; left:12px; top:-100px; z-index:999;
  background:var(--cian); color:var(--tinta);
  padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
  transition:top .2s;
}
.saltar:focus{ top:12px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Aviso cuando el navegador tiene JavaScript apagado */
.sin-js{
  margin:0; padding:calc(var(--barra-alto) + 18px) 20px 18px;
  background:var(--amarillo); color:var(--tinta);
  font-weight:700; text-align:center;
}
.sin-js a{ color:#8A2E5C; }


/* ==========================================================================
   01 · TIPOGRAFÍA Y UTILIDADES
   ========================================================================== */
.caja{
  width:min(100% - 36px, var(--caja));
  margin-inline:auto;
}
.caja--angosta{ width:min(100% - 36px, 780px); }

.sec{ padding:clamp(58px,9vw,110px) 0; position:relative; }
.sec--claro{ background:var(--papel); color:var(--tinta); }
.sec--oscuro{ background:linear-gradient(180deg,var(--violeta) 0%,var(--violeta-hondo) 100%); }

.sec__cabecera{ margin-bottom:clamp(28px,4vw,48px); max-width:62ch; }
.sec__cabecera--centro{ margin-inline:auto; text-align:center; }

.sec__kicker{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cian); margin:0 0 .6em;
}
.sec--claro .sec__kicker{ color:var(--rosa-texto); }
.sec__kicker--b2b{ color:var(--cian); }

.sec__titulo{
  font-size:clamp(2rem,1.3rem + 3.4vw,3.5rem);
  letter-spacing:-.015em;
  margin:0 0 .45em;
  text-wrap:balance;
}
.sec__titulo em{ font-style:normal; color:var(--rosa); }
.sec--claro .sec__titulo em{ color:var(--rosa-texto); }

.sec__bajada{
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  color:var(--blanco-80);
  max-width:56ch;
}
.sec--claro .sec__bajada{ color:var(--tinta-70); }
.sec__cabecera--centro .sec__bajada{ margin-inline:auto; }

.bloque{ margin-top:clamp(46px,7vw,86px); }
.bloque__titulo{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  margin:0 0 .3em;
}
.bloque__bajada{ color:var(--tinta-70); max-width:54ch; margin-bottom:1.6em; }
.sec--oscuro .bloque__bajada{ color:var(--blanco-80); }

/* Revelado al scrollear (solo si hay JS: si no, todo se ve igual) */
.js [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .68s ease, transform .68s cubic-bezier(.2,.7,.3,1);
}
.js [data-reveal].esta-visible{ opacity:1; transform:none; }

/* Barra de progreso genérica (ojo: NO llamarla .barra, eso es la barra superior) */
.progreso{
  display:block; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(26,16,56,.14); flex:1;
}
.sec--oscuro .progreso,.sec--sim .progreso{ background:rgba(255,255,255,.16); }
.progreso > span{
  display:block; height:100%; border-radius:99px;
  background:var(--rosa); transition:width .6s cubic-bezier(.3,.8,.3,1);
}


/* ==========================================================================
   02 · LOGO — la O es la cápsula
   ========================================================================== */
.logo{
  display:inline-flex; align-items:center; gap:.01em;
  font-family:var(--tipo-titulo); font-weight:800;
  font-size:1.42rem; letter-spacing:.005em; line-height:1;
  color:#fff; text-decoration:none;
}
.logo__txt{ display:inline-block; }
.logo__cap{
  width:.84em; height:.84em; margin:0 .015em -.055em;
  flex:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.logo--gigante{ font-size:clamp(3.1rem,1.4rem + 9vw,6.6rem); }
.logo--gigante .logo__cap{ filter:drop-shadow(0 6px 26px rgba(255,45,120,.65)); }
.logo--mini{ font-size:.62rem; color:var(--violeta); }
.logo--pie{ font-size:2rem; }


/* ==========================================================================
   03 · BOTONES Y FORMULARIOS
   ========================================================================== */
.btn{
  --btn-bg:var(--rosa);
  --btn-fg:var(--tinta);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:.78em 1.5em;
  border:0; border-radius:99px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--tipo-titulo); font-weight:800; font-size:1.04rem; line-height:1;
  text-decoration:none; text-align:center;
  transition:transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
  box-shadow:0 8px 22px rgba(255,45,120,.34);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,45,120,.44); }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }

.btn--grande{ min-height:60px; font-size:1.16rem; padding:.85em 1.9em; width:100%; }
@media (min-width:560px){ .btn--grande{ width:auto; min-width:230px; } }

.btn--cian{ --btn-bg:var(--cian); box-shadow:0 8px 22px rgba(62,230,224,.32); }
.btn--cian:hover{ box-shadow:0 12px 30px rgba(62,230,224,.42); }

.btn--fantasma{
  --btn-bg:transparent; --btn-fg:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.34);
}
.btn--fantasma:hover{ --btn-bg:rgba(255,255,255,.09); box-shadow:inset 0 0 0 2px var(--cian); }
.sec--claro .btn--fantasma{ --btn-fg:var(--tinta); box-shadow:inset 0 0 0 2px rgba(26,16,56,.24); }

.btn--tenue{
  --btn-bg:rgba(255,255,255,.1); --btn-fg:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.btn--tenue:hover{ --btn-bg:rgba(255,255,255,.18); }
.sec--claro .btn--tenue{ --btn-bg:rgba(26,16,56,.07); --btn-fg:var(--tinta); box-shadow:inset 0 0 0 1.5px rgba(26,16,56,.2); }

/* Pulso del botón principal del hero */
.btn__pulso{
  position:absolute; inset:0; border-radius:99px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,45,120,.65);
  animation:pulsoBoton 2.6s ease-out infinite;
}
@keyframes pulsoBoton{
  0%{ box-shadow:0 0 0 0 rgba(255,45,120,.55); }
  70%{ box-shadow:0 0 0 20px rgba(255,45,120,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,45,120,0); }
}

.btn-mini{
  display:inline-flex; align-items:center; gap:.4em;
  min-height:40px; padding:.4em .95em;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:99px;
  font-size:.88rem; font-weight:700;
  transition:background var(--transicion);
}
.btn-mini:hover{ background:rgba(255,255,255,.16); }

.chip{
  min-height:44px; padding:.5em 1.1em;
  background:rgba(255,255,255,.07); color:#fff;
  border:1.5px solid rgba(255,255,255,.2); border-radius:99px;
  font-weight:700; font-size:.94rem;
  transition:all var(--transicion);
}
.chip:hover{ border-color:var(--cian); }
.chip.esta-activo{ background:var(--rosa); border-color:var(--rosa); color:var(--tinta); }

/* --- Formularios --- */
.form{ display:grid; gap:14px; }
.campo{ display:grid; gap:6px; }
.campo label{ font-size:.86rem; font-weight:700; opacity:.9; }
.campo input,.campo select,.campo textarea{
  width:100%; min-height:52px; padding:.7em .95em;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.22); border-radius:14px;
  color:#fff; transition:border-color var(--transicion), background var(--transicion);
}
.campo textarea{ min-height:96px; resize:vertical; }
.campo input::placeholder,.campo textarea::placeholder{ color:rgba(255,255,255,.42); }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--cian); background:rgba(255,255,255,.12);
}
.campo select option{ background:var(--violeta); color:#fff; }

.sec--claro .campo input,.sec--claro .campo select,.sec--claro .campo textarea{
  background:#fff; border-color:rgba(26,16,56,.18); color:var(--tinta);
}
.sec--claro .campo input::placeholder{ color:rgba(26,16,56,.4); }

/* Trampa antispam: tiene que ser invisible pero existir en el formulario.
   No se usa display:none porque algunos bots lo detectan. */
.trampa{
  position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

.form__estado{
  margin:0; padding:.75em 1em; border-radius:12px; font-size:.92rem; font-weight:700;
}
.form__estado.es-ok{ background:rgba(62,230,224,.16); color:var(--cian); }
.form__estado.es-error{ background:rgba(255,45,120,.16); color:var(--rosa-suave); }
.form__legal{ font-size:.78rem; color:var(--blanco-60); margin:0; }

@media (min-width:560px){
  .form--b2b{ grid-template-columns:1fr 1fr; }
  .form--b2b .campo{ grid-column:1/-1; }
  .form--b2b .campo--mitad{ grid-column:auto; }
  .form--b2b button,.form--b2b .form__estado{ grid-column:1/-1; }
}


/* ==========================================================================
   04 · BARRA SUPERIOR
   ========================================================================== */
.barra{
  position:fixed; inset:0 0 auto; z-index:100;
  height:var(--barra-alto);
  transition:background var(--transicion), box-shadow var(--transicion), backdrop-filter var(--transicion);
}
.barra.esta-solida{
  background:rgba(21,11,46,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.34);
}
/* Con el menú abierto hay que sacar el backdrop-filter: mientras esté activo
   la barra es bloque contenedor de sus hijos position:fixed y el menú a pantalla
   completa quedaba aplastado adentro de los 64 px de la barra. */
.barra.menu-abierto,
.barra.menu-abierto.esta-solida{
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
.barra__caja{
  width:min(100% - 26px,var(--caja)); height:100%;
  margin-inline:auto; display:flex; align-items:center; gap:14px;
}
.barra .logo{ font-size:1.3rem; z-index:2; min-height:44px; padding-right:6px; }

.menu{ display:none; margin-left:auto; }
.menu a{
  padding:.45em .72em; border-radius:99px;
  font-weight:700; font-size:.94rem; text-decoration:none; color:var(--blanco-80);
  transition:color var(--transicion), background var(--transicion);
}
.menu a:hover{ color:#fff; background:rgba(255,255,255,.09); }
.menu a.esta-activo{ color:var(--cian); }
.menu__b2b{ color:var(--blanco-60) !important; }

.barra__acciones{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-left:auto; }

.btn-sonido{
  display:inline-flex; align-items:center; gap:.4em;
  min-height:44px; min-width:44px; padding:.35em .8em;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:99px;
  font-size:.82rem; font-weight:800;
  transition:all var(--transicion);
}
.btn-sonido:hover{ background:rgba(255,255,255,.2); }
.btn-sonido__icono{ display:block; width:19px; height:19px; }
.btn-sonido__icono svg{ width:100%; height:100%; display:block; }
.btn-sonido .ico-cruz{ display:none; }
.btn-sonido.esta-mudo{ color:var(--rosa-suave); border-color:rgba(255,45,120,.45); }
.btn-sonido.esta-mudo .ico-ondas{ display:none; }
.btn-sonido.esta-mudo .ico-cruz{ display:block; }
.btn-sonido__txt{ display:none; }
@media (min-width:420px){ .btn-sonido__txt{ display:inline; } }

.hamburguesa{
  display:grid; place-content:center; gap:5px;
  width:46px; height:46px; padding:0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
}
.hamburguesa span{
  display:block; width:20px; height:2.5px; border-radius:2px; background:#fff;
  transition:transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Menú desplegado en celular */
.menu.esta-abierto{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  position:fixed; inset:0; z-index:1;
  padding:calc(var(--barra-alto) + 22px) 26px 40px;
  background:linear-gradient(160deg,var(--violeta) 0%,var(--violeta-hondo) 100%);
}
.menu.esta-abierto a{
  font-family:var(--tipo-titulo); font-size:1.7rem; color:#fff;
  padding:.35em .5em; border-bottom:1px solid rgba(255,255,255,.09);
  border-radius:0;
}
/* A pantalla completa el gris del B2B se leía como "deshabilitado". */
.menu.esta-abierto .menu__b2b{ color:var(--blanco-80) !important; }

@media (min-width:940px){
  .hamburguesa{ display:none; }
  .menu{ display:flex; align-items:center; gap:0; margin-left:auto; }
  .menu a{ padding:.45em .6em; font-size:.9rem; }
  .barra__acciones{ margin-left:10px; }
}
@media (min-width:1120px){
  .menu{ gap:2px; }
  .menu a{ padding:.45em .72em; font-size:.94rem; }
}


/* ==========================================================================
   05 · HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:calc(var(--barra-alto) + 46px) 0 60px;
  background:
    radial-gradient(120% 80% at 50% -10%, #4A2A7E 0%, transparent 60%),
    radial-gradient(90% 60% at 88% 22%, rgba(255,45,120,.30) 0%, transparent 62%),
    radial-gradient(80% 60% at 6% 46%, rgba(62,230,224,.22) 0%, transparent 60%),
    linear-gradient(175deg,var(--violeta) 0%,var(--violeta-hondo) 100%);
}
/* Trama de puntos sutil */
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:26px 26px; opacity:.5;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}

.hero__caja{
  position:relative; z-index:2;
  width:min(100% - 36px,var(--caja)); margin-inline:auto; text-align:center;
}

.hero__tag{
  display:inline-block; margin:0 0 20px;
  padding:.42em 1.15em; border-radius:99px;
  background:rgba(62,230,224,.12); border:1px solid rgba(62,230,224,.42);
  color:var(--cian); font-weight:800; font-size:.84rem; letter-spacing:.16em; text-transform:uppercase;
}

.hero__titulo{ margin:0 0 22px; }
.hero__claim{
  display:block; margin-top:14px;
  font-size:clamp(1.6rem,1rem + 3.1vw,2.9rem);
  line-height:1.08; color:#fff; text-wrap:balance;
}
.hero__claim em{ font-style:normal; color:var(--cian); }

.hero__bajada{
  max-width:56ch; margin:0 auto 30px;
  color:var(--blanco-80); font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
}

.hero__botones{
  display:flex; flex-direction:column; gap:12px; align-items:center;
  margin-bottom:clamp(44px,7vw,72px);
}
@media (min-width:560px){ .hero__botones{ flex-direction:row; justify-content:center; } }

/* Foto de la isla con marco de luz rosa */
.hero__isla{ margin:0 auto; max-width:920px; }
.marco{
  position:relative; border-radius:var(--radio-g); padding:8px;
  background:linear-gradient(150deg,rgba(255,45,120,.85),rgba(62,230,224,.55));
  box-shadow:0 0 60px rgba(255,45,120,.45), 0 28px 70px rgba(0,0,0,.5);
}
.marco img{ border-radius:calc(var(--radio-g) - 6px); width:100%; }
.marco__luz{
  position:absolute; inset:-14%; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,45,120,.42),transparent 70%);
  filter:blur(26px);
}
.hero__isla figcaption{
  margin-top:14px; font-size:.9rem; color:var(--blanco-60);
}

/* Cápsulas flotando con parallax */
.hero__cielo{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.flota{ position:absolute; display:block; opacity:.9; }
.flota svg{ width:100%; height:100%; display:block; }
.flota--1{ left:4%;  top:16%; width:52px;  animation:flotar 7s ease-in-out infinite; }
.flota--2{ right:6%; top:11%; width:38px;  animation:flotar 9s ease-in-out infinite .8s; }
.flota--3{ left:12%; top:58%; width:70px;  opacity:.42; animation:flotar 11s ease-in-out infinite .4s; }
.flota--4{ right:9%; top:52%; width:88px;  opacity:.5;  animation:flotar 13s ease-in-out infinite 1.2s; }
.flota--5{ left:76%; top:30%; width:28px;  animation:flotar 8s ease-in-out infinite .3s; }
.flota--6{ left:30%; top:8%;  width:24px;  opacity:.55; animation:flotar 10s ease-in-out infinite 1.6s; }
/* En celular van pegadas a los bordes y bien tenues: nunca sobre el texto */
@media (max-width:760px){
  .flota--1{ left:-5%;  top:11%; width:44px; opacity:.34; }
  .flota--2{ right:-4%; top:6%;  width:34px; opacity:.34; }
  .flota--3{ left:-8%;  top:50%; width:64px; opacity:.16; }
  .flota--4{ right:-9%; top:41%; width:78px; opacity:.18; }
  .flota--5{ left:88%;  top:23%; width:22px; opacity:.28; }
  .flota--6{ left:4%;   top:3%;  width:20px; opacity:.26; }
}
@keyframes flotar{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-18px) rotate(8deg); }
}
/* El parallax pisa el transform, así que la flotación va en el hijo */
[data-parallax] svg{ animation:inherit; }

.hero__resplandor{
  position:absolute; left:50%; top:34%; width:min(660px,90vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,45,120,.34),transparent 70%);
  filter:blur(40px);
}

.hero__bajar{
  position:relative; z-index:2;
  display:grid; place-items:center;
  width:46px; height:46px; margin:34px auto 0;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.3);
}
.hero__bajar span{
  width:11px; height:11px; margin-top:-4px;
  border-right:2.5px solid var(--cian); border-bottom:2.5px solid var(--cian);
  transform:rotate(45deg);
  animation:bajarFlecha 1.9s ease-in-out infinite;
}
@keyframes bajarFlecha{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(3px,3px); } }


/* ==========================================================================
   06 · SIMULADOR
   ========================================================================== */
.sec--sim{
  background:
    radial-gradient(85% 55% at 50% 0%,rgba(255,45,120,.20),transparent 62%),
    radial-gradient(70% 50% at 12% 76%,rgba(62,230,224,.14),transparent 60%),
    linear-gradient(180deg,var(--violeta-hondo) 0%,#0C0620 100%);
  overflow:hidden;
}

.sim__paso-num{
  display:flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--tipo-titulo); font-size:1.24rem; margin:0 0 22px;
}
.vitrina__swipe{
  margin:2px 0 0; text-align:center; font-size:.82rem; color:var(--blanco-60);
}
@media (min-width:760px){ .vitrina__swipe{ display:none; } }
.sim__paso-num span{
  display:grid; place-items:center; width:32px; height:32px;
  background:var(--rosa); color:var(--tinta); border-radius:50%; font-size:1rem;
}

/* --- Vitrina de series --- */
.vitrina__grilla{
  /* Celular: carrusel horizontal con snap, para no comerse la pantalla */
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 14px; margin-inline:-4px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.vitrina__grilla > *{ flex:0 0 min(64vw,240px); scroll-snap-align:center; }
.vitrina__grilla::-webkit-scrollbar{ height:6px; }
.vitrina__grilla::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:99px; }
@media (min-width:760px){
  .vitrina__grilla{
    display:grid; gap:16px; overflow:visible; padding:0; margin-inline:auto;
    grid-template-columns:repeat(3,1fr);
    max-width:900px;
  }
  .vitrina__grilla > *{ flex:none; }
}
.vit-carta{
  position:relative; display:block; width:100%; padding:0;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--radio-g); overflow:hidden; text-align:left; color:#fff;
  transition:transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.vit-carta:hover{ transform:translateY(-6px); border-color:var(--rosa); box-shadow:0 22px 46px rgba(255,45,120,.3); }
.vit-carta__poster{ display:block; aspect-ratio:3/4; overflow:hidden; }
.vit-carta__poster svg{ width:100%; height:100%; display:block; }
.vit-carta__pie{ display:block; padding:16px 18px 20px; }
.vit-carta__nombre{ display:block; font-family:var(--tipo-titulo); font-size:1.24rem; }
.vit-carta__dato{ display:block; font-size:.88rem; color:var(--cian); font-weight:700; }
.vit-carta__cta{
  position:absolute; right:14px; top:14px;
  padding:.4em .9em; border-radius:99px;
  background:var(--rosa); color:var(--tinta);
  font-family:var(--tipo-titulo); font-size:.86rem;
  opacity:0; transform:translateY(-6px); transition:all var(--transicion);
}
.vit-carta:hover .vit-carta__cta,.vit-carta:focus-visible .vit-carta__cta{ opacity:1; transform:none; }

/* ==========================================================================
   PANEL DE LA SERIE
   En celular va arriba de la máquina; en escritorio ocupa la columna de la
   derecha, que antes quedaba vacía.
   ========================================================================== */
.juego{ display:grid; gap:20px; justify-items:center; }

.juego__panel{
  width:100%; max-width:460px;
  padding:20px 20px 22px;
  border-radius:var(--radio-g);
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.13);
}
.juego__serie{
  margin:0 0 14px; font-family:var(--tipo-titulo); font-weight:800;
  font-size:1.32rem; line-height:1.1; color:#fff;
}
.juego__serie span{
  display:block; font-family:var(--tipo-texto); font-size:.72rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cian);
}
.juego__prog{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.juego__prog .progreso{ height:10px; }
.juego__contador{
  margin:0; font-weight:800; font-size:.88rem; color:var(--cian);
  white-space:nowrap; flex:none;
}
.juego__contador.esta-completa{ color:var(--amarillo); }

/* ==========================================================================
   LA MÁQUINA
   Réplica de una expendedora de gashapon real. Todo está posicionado en
   porcentajes sobre un lienzo de 340 × 590 (la proporción del mueble real,
   ~0,58), así que escala perfecto en cualquier pantalla.

   De arriba abajo: tapa con cerradura · vitrina acrílica con tiras LED y el
   póster de la serie · junta · panel del mecanismo con display, perilla y
   chapa de QR · tapa redonda de retiro · zócalo.
   ========================================================================== */
.maquina{
  --alto:min(62vh,510px);
  --alto:min(62svh,510px);
  --hueso:#EFEDE7;      /* plástico ABS del mueble */
  --hueso-2:#DCD8CE;
  --panel:#E9E6DE;
  position:relative;
  width:min(340px,86vw,calc(var(--alto) * .5763));
  aspect-ratio:34/59;
  margin:0 auto;
  container-type:inline-size;
  perspective:900px;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6));
}
/* Resplandor rosa detrás del mueble */
.maquina::before{
  content:''; position:absolute; inset:-8% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,45,120,.34),transparent 72%);
  filter:blur(28px);
}
.maquina.esta-girando{ animation:sacudirMaquina .5s cubic-bezier(.36,.07,.19,.97); }
.maquina.esta-sacudida{ animation:golpeMaquina .5s ease-out; }
@keyframes sacudirMaquina{
  0%,100%{ transform:translateX(0) rotate(0); }
  15%{ transform:translateX(-3px) rotate(-.4deg); }
  35%{ transform:translateX(3px) rotate(.4deg); }
  55%{ transform:translateX(-2px) rotate(-.25deg); }
  78%{ transform:translateX(2px) rotate(.25deg); }
}
@keyframes golpeMaquina{
  0%{ transform:translateY(0); } 30%{ transform:translateY(3px); } 100%{ transform:translateY(0); }
}

/* Las capas decorativas nunca se comen los toques de la perilla o de la tapa */
.mq__cuerpo,.mq__tapa,.mq__vitrina,.mq__junta,.mq__panel,
.mq__display,.mq__cerradura,.mq__qr,.mq__marca,.mq__zocalo,.mq__cartel{
  pointer-events:none;
}

/* --- Mueble --- */
.mq__cuerpo{
  position:absolute; inset:0; z-index:0;
  border-radius:5% 5% 2.6% 2.6% / 3% 3% 1.5% 1.5%;
  background:linear-gradient(100deg,#FBFAF7 0%,var(--hueso) 26%,#E6E3DB 68%,var(--hueso-2) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset -7px 0 16px rgba(90,84,70,.16),
    inset 7px 0 14px rgba(255,255,255,.5),
    inset 0 -8px 18px rgba(90,84,70,.14);
}

/* Tapa de arriba, con la cerradura del mueble */
.mq__tapa{
  position:absolute; left:0; top:0; width:100%; height:6.6%; z-index:2;
  border-radius:5% 5% 0 0 / 26% 26% 0 0;
  background:linear-gradient(180deg,#F6F4EF 0%,#E4E1D8 62%,#D2CEC3 100%);
  box-shadow:inset 0 1px 0 #fff, 0 2px 3px rgba(90,84,70,.2);
}
.mq__tapa i{
  position:absolute; left:50%; top:50%; width:4.6%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#F2F1EE,#9E988C 62%,#6E6759);
  box-shadow:inset 0 0 0 .8px rgba(60,55,45,.5), 0 1px 1px rgba(255,255,255,.6);
}
.mq__tapa i::after{
  content:''; position:absolute; left:50%; top:32%; width:12%; height:44%;
  transform:translateX(-50%); border-radius:1px; background:#4A4438;
}

/* --- Vitrina acrílica con el póster --- */
.mq__vitrina{
  position:absolute; left:3.5%; top:6.6%; width:93%; height:46.4%; z-index:2;
  border-radius:2.4%/1.6%;
  background:linear-gradient(180deg,#F7FAFF 0%,#E9EFF7 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 3px 8px rgba(120,140,170,.28),
    0 2px 5px rgba(90,84,70,.22);
  overflow:hidden;
}
/* Las dos tiras LED verticales: el detalle que más identifica a estas máquinas */
.mq__luz{
  position:absolute; top:4%; width:2.9%; height:92%; border-radius:99px;
  background:linear-gradient(180deg,#FFFFFF,#DCEBFF 45%,#FFFFFF);
  box-shadow:0 0 9px rgba(190,225,255,.95), 0 0 20px rgba(150,200,255,.6);
}
.mq__luz--izq{ left:3.4%; }
.mq__luz--der{ right:3.4%; }
/* Reflejo del acrílico, por encima de todo */
.mq__acrilico{
  position:absolute; inset:0; border-radius:2.4%/1.6%;
  background:linear-gradient(112deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 13%,
             transparent 26%,transparent 74%,rgba(255,255,255,.2) 92%);
}

/* El póster de la serie */
.mq__poster{
  position:absolute; left:9.5%; top:3%; width:81%; height:58%;
  display:flex; flex-direction:column;
  border-radius:1.5%;
  background:linear-gradient(170deg,#241847 0%,#150B2E 62%,#1E1140 100%);
  box-shadow:0 1px 4px rgba(30,25,15,.35);
  overflow:hidden;
}

/* --- Junta entre módulos --- */
.mq__junta{
  position:absolute; left:0; top:53%; width:100%; height:3.4%; z-index:2;
  background:linear-gradient(180deg,#D6D2C7 0%,#EDEAE3 40%,#DFDBD1 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.85), inset 0 -2px 4px rgba(90,84,70,.2);
}

/* --- Panel del mecanismo --- */
.mq__panel{
  position:absolute; left:0; top:56.4%; width:100%; height:43.6%; z-index:1;
  border-radius:0 0 2.6% 2.6% / 0 0 1.5% 1.5%;
  background:linear-gradient(103deg,#F4F2ED 0%,var(--panel) 30%,#E1DED5 72%,#D5D1C6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* --- Display de segmentos --- */
.mq__display{
  position:absolute; left:8.5%; top:59.4%; width:20%; height:7.6%; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2%;
  border-radius:12%/24%;
  background:linear-gradient(180deg,#A8202C 0%,#79121C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(60,20,20,.4);
}
.mq__display__vidrio{
  display:grid; place-items:center;
  width:82%; height:56%; border-radius:8%/16%;
  background:#180A0C; box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.mq__display__vidrio b{
  font-family:ui-monospace,"Courier New",monospace; font-weight:700;
  font-size:clamp(6px,3.4cqw,12px); letter-spacing:.06em;
  color:#FF4230; text-shadow:0 0 5px rgba(255,66,48,.95);
}
.mq__display u{
  font-size:clamp(3.4px,1.5cqw,5.5px); letter-spacing:.08em;
  color:rgba(255,255,255,.82); text-decoration:none; font-weight:800;
}

/* Cerradura del panel */
.mq__cerradura{
  position:absolute; left:12%; top:70.5%; width:4.4%; aspect-ratio:1; z-index:3;
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#EFEEEA,#9E988C 60%,#6B6456);
  box-shadow:inset 0 0 0 .8px rgba(60,55,45,.5);
}
.mq__cerradura::after{
  content:''; position:absolute; left:50%; top:30%; width:14%; height:44%;
  transform:translateX(-50%); border-radius:1px; background:#453F34;
}

/* ==========================================================================
   LA PERILLA
   Bisel metálico embutido y disco con barra de agarre, igual que el original.
   El aro rosa exterior es el gesto propio de GIRAPON.
   ========================================================================== */
.perilla{
  position:absolute; left:34%; top:59%; width:32%; aspect-ratio:1; z-index:6;
  border-radius:50%;
  touch-action:none;                /* clave: sin esto la página scrollea al girar */
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
  /* En el celular, un arrastre largo arranca una selección o el menú de
     "copiar imagen" si no se apagan a mano. */
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  transition:transform .2s;
}
.perilla.esta-agarrada{ cursor:grabbing; transform:scale(1.05); }
.perilla[aria-disabled="true"]{ pointer-events:none; }

/* Hueco embutido en el panel */
.perilla__sombra{
  position:absolute; inset:-9%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#D8D4CA,#C6C1B5);
  box-shadow:
    inset 0 3px 6px rgba(80,74,60,.45),
    inset 0 -2px 3px rgba(255,255,255,.7),
    0 1px 0 rgba(255,255,255,.8);
}
/* Aro rosa: el gesto icónico de la isla */
.perilla__aro{
  position:absolute; inset:-3%; border-radius:50%;
  background:radial-gradient(closest-side,transparent 71%,#FF5C95 72%,var(--rosa) 82%,#D9105F 100%);
  filter:drop-shadow(0 0 7px rgba(255,45,120,.75));
}
/* Marcas grabadas alrededor del aro */
.perilla__marcas{
  position:absolute; inset:-3%; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.75) 0deg .9deg, transparent .9deg 12deg);
  -webkit-mask:radial-gradient(closest-side,transparent 74%,#000 75%,#000 80%,transparent 81%);
          mask:radial-gradient(closest-side,transparent 74%,#000 75%,#000 80%,transparent 81%);
  opacity:.7;
}
/* Arco cian que se llena mientras girás */
.perilla__pista{
  position:absolute; inset:-3%; border-radius:50%;
  background:conic-gradient(from -165deg,var(--cian) calc(var(--avance,0) * 330deg),transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent 83%,#000 84%,#000 96%,transparent 97%);
          mask:radial-gradient(closest-side,transparent 83%,#000 84%,#000 96%,transparent 97%);
  filter:drop-shadow(0 0 6px rgba(62,230,224,.95));
}
/* Bisel metálico */
.perilla__bisel{
  position:absolute; inset:9%; border-radius:50%;
  background:conic-gradient(from 210deg,
    #8E877B 0deg, #CFC9BC 60deg, #A79F92 130deg, #6F685B 200deg,
    #BDB6A8 275deg, #8E877B 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 3px 5px rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(50,45,35,.5),
    0 1px 2px rgba(60,55,45,.4);
}
/* Disco blanco: es lo único que gira */
.perilla__disco{
  position:absolute; inset:21%; border-radius:50%;
  background:radial-gradient(circle at 38% 28%,#FFFFFF 0%,#F1EFE9 42%,#DAD6CC 78%,#C4BFB3 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(90,84,70,.28),
    0 2px 5px rgba(50,45,35,.4);
  will-change:transform;
}
/* Barra de agarre en relieve, de lado a lado */
.perilla__barra{
  position:absolute; left:50%; top:9%; width:19%; height:82%;
  transform:translateX(-50%); border-radius:99px;
  background:linear-gradient(90deg,#C9C4B8 0%,#FDFCF9 32%,#F0EDE6 62%,#BEB8AB 100%);
  box-shadow:
    0 1px 2px rgba(70,64,52,.45),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(90,84,70,.3);
}
/* Punto indicador fijo arriba del bisel */
.perilla__indicador{
  position:absolute; left:50%; top:4.5%; width:7%; aspect-ratio:1;
  transform:translateX(-50%); border-radius:50%;
  background:#FFF; box-shadow:0 0 0 1px rgba(90,84,70,.45), 0 0 5px rgba(255,255,255,.8);
}
/* Guía punteada que invita a arrastrar */
.perilla__guia{
  position:absolute; inset:-15%; border-radius:50%;
  border:2px dashed rgba(62,230,224,.55);
  animation:rotarGuia 10s linear infinite;
  opacity:0; transition:opacity .3s;
}
/* Dedo que da la vuelta alrededor de la perilla */
.perilla__dedo{
  position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1;
  margin:-15% 0 0 -15%;
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.perilla__dedo svg{ width:100%; height:100%; display:block; }

/* Las pistas solo aparecen cuando la máquina está lista para girar */
.sim[data-estado="lista"] .perilla__guia{ opacity:1; }
.sim[data-estado="lista"] .perilla__aro{ animation:latirAro 2s ease-in-out infinite; }
.sim[data-estado="lista"] .perilla__dedo{ animation:orbitarDedo 3.4s cubic-bezier(.5,0,.5,1) infinite; }
.perilla.esta-agarrada .perilla__guia,
.perilla.esta-agarrada .perilla__dedo{ opacity:0 !important; animation:none !important; }
@keyframes rotarGuia{ to{ transform:rotate(360deg); } }
@keyframes latirAro{
  0%,100%{ filter:drop-shadow(0 0 7px rgba(255,45,120,.7)); }
  50%    { filter:drop-shadow(0 0 16px rgba(255,45,120,1)); }
}
/* El doble rotate mantiene el dedo derecho mientras da la vuelta */
@keyframes orbitarDedo{
  0%      { transform:rotate(-25deg) translateY(-142%) rotate(25deg); opacity:0; }
  10%     { opacity:1; }
  62%     { transform:rotate(288deg) translateY(-142%) rotate(-288deg); opacity:1; }
  78%,100%{ transform:rotate(288deg) translateY(-142%) rotate(-288deg); opacity:0; }
}
.perilla.esta-lista .perilla__aro{ animation:aroCompleto .5s ease-out infinite alternate; }
@keyframes aroCompleto{ to{ filter:drop-shadow(0 0 20px rgba(62,230,224,1)); } }

/* Cartel tipo sticker sobre la vitrina, apuntando a la perilla */
.mq__cartel{
  position:absolute; left:50%; top:52.8%; z-index:7;
  padding:.3em .75em; border-radius:99px;
  background:var(--rosa); color:#fff;
  font-family:var(--tipo-titulo); font-weight:800;
  font-size:clamp(6px,3cqw,11px); letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 2px 6px rgba(120,10,55,.45);
  transform:translate(-50%,0) rotate(-4deg);
  opacity:0; transition:opacity .3s;
}
.mq__cartel::after{
  content:''; position:absolute; left:50%; bottom:-.62em;
  border:.35em solid transparent; border-top-color:var(--rosa);
  transform:translateX(-50%);
}
.sim[data-estado="lista"] .mq__cartel{ opacity:1; animation:saltarCartel 1.8s ease-in-out infinite; }
@keyframes saltarCartel{
  0%,100%{ transform:translate(-50%,0) rotate(-4deg); }
  50%    { transform:translate(-50%,-22%) rotate(-4deg); }
}

/* --- Chapa metálica con el QR --- */
.mq__qr{
  position:absolute; left:74%; top:61%; width:19%; height:15.5%; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4%;
  padding:6% 4%;
  border-radius:6%/8%;
  background:linear-gradient(145deg,#DEDBD4 0%,#C4C0B7 48%,#D6D2CA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(70,64,52,.4);
}
.mq__qr svg{ width:60%; height:auto; display:block; border-radius:2px; }
.mq__qr b{
  font-family:var(--tipo-titulo); font-weight:800; line-height:1;
  font-size:clamp(4.4px,2.1cqw,7.5px); color:#5A5346; letter-spacing:.04em;
}
.mq__qr__tornillo{
  position:absolute; width:7%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#F0EEE9,#8E877B);
  box-shadow:inset 0 0 0 .6px rgba(60,55,45,.45);
}
.mq__qr__tornillo--a{ left:5%; top:4%; }
.mq__qr__tornillo--b{ right:5%; top:4%; }
.mq__qr__tornillo--c{ left:5%; bottom:4%; }
.mq__qr__tornillo--d{ right:5%; bottom:4%; }

/* ==========================================================================
   TAPA DE RETIRO
   Redonda como la de "PUSH" de las máquinas reales, con el centro ahumado
   para ver la cápsula que cayó.
   ========================================================================== */
.mq__puerta{
  position:absolute; left:10%; top:79%; width:30%; aspect-ratio:1; z-index:5;
  padding:0; border:0; border-radius:50%;
  background:radial-gradient(circle at 42% 30%,#FCFDFF 0%,#E7EDF6 52%,#C9D3E2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -3px 6px rgba(90,100,120,.28),
    0 2px 5px rgba(70,64,52,.4);
  transform-origin:50% 8%;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}
/* Hueco ahumado: acá se ve caer la cápsula */
.mq__puerta__hueco{
  position:absolute; inset:13%; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 34%,#4A4258 0%,#241B33 58%,#140D22 100%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.85), inset 0 -2px 4px rgba(255,255,255,.14);
}
/* Chapa con la flecha, sobre el vidrio */
.mq__puerta__chapa{
  position:absolute; left:50%; top:8%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7%;
  width:58%; padding:6% 0 5%;
  border-radius:22%/26%;
  background:linear-gradient(180deg,rgba(155,20,32,.94),rgba(120,12,24,.94));
  box-shadow:0 1px 3px rgba(60,10,16,.5), inset 0 1px 0 rgba(255,255,255,.28);
  transition:background .3s;
}
.mq__puerta__flecha{
  width:26%; aspect-ratio:1.5/1;
  clip-path:polygon(50% 100%,0 0,100% 0);
  background:#fff;
}
.mq__puerta__chapa b{
  font-family:var(--tipo-titulo); font-weight:800; color:#fff;
  font-size:clamp(4.6px,2.3cqw,8px); letter-spacing:.08em; line-height:1;
}
/* Cuando cayó una cápsula la tapa se enciende y se puede tocar */
.mq__puerta:not(:disabled){ cursor:pointer; }
.mq__puerta.esta-cargada{ animation:palpitarPuerta 1.5s ease-in-out infinite; }
.mq__puerta.esta-cargada .mq__puerta__chapa{
  background:linear-gradient(180deg,rgba(62,230,224,.96),rgba(28,176,172,.96));
}
.mq__puerta.esta-cargada .mq__puerta__chapa b{ color:var(--tinta); }
.mq__puerta.esta-cargada .mq__puerta__flecha{ background:var(--tinta); }
@keyframes palpitarPuerta{
  0%,100%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 2px 5px rgba(70,64,52,.4),0 0 0 0 rgba(62,230,224,.75); }
  60%    { box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 2px 5px rgba(70,64,52,.4),0 0 0 11px rgba(62,230,224,0); }
}
.mq__puerta.esta-golpeada{ animation:golpePuerta .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes golpePuerta{
  0%{ transform:rotateX(0); }
  26%{ transform:rotateX(-26deg); }
  55%{ transform:rotateX(9deg); }
  78%{ transform:rotateX(-3deg); }
  100%{ transform:rotateX(0); }
}
.mq__puerta.se-abre{ animation:abrirPuerta .45s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes abrirPuerta{ to{ transform:rotateX(-62deg); } }

/* La cápsula que cae, adentro del hueco de la tapa */
.capsula-vuelo{
  position:absolute; left:50%; top:-60%; width:52%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  padding:0; border:0; background:transparent; pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
.capsula-vuelo svg{ width:100%; height:100%; display:block; }

/* --- Marca y zócalo --- */
.mq__marca{ position:absolute; right:7%; top:87%; z-index:3; opacity:.62; }
.mq__zocalo{
  position:absolute; left:6%; right:6%; bottom:1.4%; height:.9%; z-index:3;
  border-radius:99px; background:var(--rosa);
  box-shadow:0 0 10px var(--rosa),0 0 24px rgba(255,45,120,.75);
}

/* ==========================================================================
   EL PÓSTER · miniaturas de la serie
   En color las que ya conseguiste, en sombra blanco y negro las que faltan.
   ========================================================================== */
.pos-cabecera{
  padding:5% 6% 3%;
  background:linear-gradient(180deg,rgba(255,45,120,.22),transparent);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pos-serie{
  display:block; font-size:clamp(4px,1.9cqw,7px); font-weight:800;
  letter-spacing:.22em; color:var(--cian);
}
.pos-nombre{
  display:block; font-family:var(--tipo-titulo); font-weight:800; color:#fff;
  font-size:clamp(8px,4.2cqw,16px); line-height:1.05;
}
/* Las seis en una fila: el póster ahora comparte la vitrina con el depósito */
.pos-grilla{
  flex:1; display:grid; grid-template-columns:repeat(6,1fr); gap:2.4%;
  padding:4% 5%; align-content:center;
}
.pos-fig{
  position:relative; display:block; aspect-ratio:4/5; border-radius:14%;
  background:linear-gradient(170deg,#FFFFFF,#E9E6F2);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  overflow:hidden;
}
.pos-fig svg{ width:100%; height:100%; display:block; }
/* Las que faltan: sombra en blanco y negro */
.pos-fig.me-falta{ background:linear-gradient(170deg,#DAD6E4,#C3BED2); }
.pos-fig.me-falta svg{ filter:grayscale(1) brightness(.24); opacity:.9; }
.pos-fig.me-falta::after{
  content:'?'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--tipo-titulo); font-weight:800; color:var(--rosa);
  font-size:clamp(7px,3cqw,13px); text-shadow:0 1px 2px rgba(255,255,255,.65);
}
.pos-fig.la-tengo{ box-shadow:0 0 0 1.5px var(--rosa), 0 1px 3px rgba(0,0,0,.4); }
.pos-fig.la-tengo.es-secreta{
  box-shadow:0 0 0 1.6px var(--amarillo), 0 0 8px rgba(255,210,63,.75);
  background:linear-gradient(170deg,#FFF8E2,#FFE9A8);
}
.pos-fig__estrella{
  position:absolute; right:5%; top:3%; font-style:normal;
  font-size:clamp(5px,2.6cqw,10px); color:var(--amarillo);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.pos-fig.recien{ animation:posFigNueva .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes posFigNueva{
  0%{ transform:scale(.6) rotate(-8deg); } 60%{ transform:scale(1.14) rotate(3deg); }
  100%{ transform:scale(1) rotate(0); }
}
.pos-pie{
  display:flex; align-items:center; justify-content:space-between; gap:4%;
  padding:2.5% 6% 4%;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:clamp(3.6px,1.75cqw,6.5px); font-weight:800; letter-spacing:.06em;
  color:rgba(255,255,255,.6);
}
.pos-pie strong{ color:var(--cian); font-size:1.35em; }

/* ==========================================================================
   DEPÓSITO DE CÁPSULAS
   Se ve abajo del póster, adentro de la misma vitrina. No hay física: las
   cápsulas están quietas y solo se agitan un momento cuando girás.
   ========================================================================== */
.mq__deposito{
  position:absolute; left:9.5%; top:63%; width:81%; height:34%;
  border-radius:2%/4%; overflow:hidden;
  background:linear-gradient(180deg,#1B1233 0%,#241847 42%,#150B2E 100%);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.75), inset 0 -2px 4px rgba(255,255,255,.08);
}
.dep-cap{
  position:absolute; width:15%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.dep-cap svg{ width:100%; height:100%; display:block; }
/* Sacudón corto cuando cae una cápsula. Termina y se queda quieto. */
.mq__deposito.esta-agitado .dep-cap{
  animation:agitarCap .62s cubic-bezier(.36,.07,.19,.97) var(--d,0ms);
}
@keyframes agitarCap{
  0%,100%{ transform:translate(-50%,-50%) rotate(var(--r,0deg)); }
  20%{ transform:translate(-50%,-64%) rotate(calc(var(--r,0deg) + 18deg)); }
  45%{ transform:translate(-44%,-48%) rotate(calc(var(--r,0deg) - 14deg)); }
  70%{ transform:translate(-54%,-56%) rotate(calc(var(--r,0deg) + 8deg)); }
}
.dep-cap.se-va{ animation:salirCap .7s cubic-bezier(.45,.05,.75,.6) forwards; }
@keyframes salirCap{
  0%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,120%) rotate(calc(var(--r,0deg) + 200deg)); }
}

/* ==========================================================================
   TIRA DE FIGURAS de la serie
   En color las que tenés, en sombra las que faltan.
   ========================================================================== */
.juego__tira{
  display:grid; grid-template-columns:repeat(6,1fr); gap:7px;
  margin:0 0 16px;
}
.tira-item{ display:block; }
.tira-nombre{
  display:none; margin-top:5px; text-align:center;
  font-size:.72rem; font-weight:700; line-height:1.15; color:var(--blanco-60);
}
.tira-item.la-tengo .tira-nombre{ color:#fff; }
.tira-fig{
  position:relative; display:block; aspect-ratio:4/5; border-radius:12px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.tira-fig svg{ width:100%; height:100%; display:block; }
.tira-item.me-falta .tira-fig{ background:rgba(255,255,255,.03); }
.tira-item.me-falta .tira-fig svg{ filter:grayscale(1) brightness(.34); opacity:.8; }
.tira-item.me-falta .tira-fig::after{
  content:'?'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--tipo-titulo); font-weight:800; font-size:1.3rem;
  color:var(--rosa); opacity:.9;
}
.tira-item.la-tengo .tira-fig{ border-color:var(--rosa); background:rgba(255,45,120,.12); }
.tira-item.la-tengo.es-secreta .tira-fig{
  border-color:var(--amarillo); background:rgba(255,210,63,.14);
  box-shadow:0 0 12px rgba(255,210,63,.4);
}
.tira-fig__estrella{
  position:absolute; right:4%; top:2%; font-style:normal; font-size:.62rem;
  color:var(--amarillo);
}
.tira-item.recien .tira-fig{ animation:posFigNueva .9s cubic-bezier(.34,1.56,.64,1); }

/* Nota bajo la máquina */
.juego__nota{
  margin:14px auto 0; max-width:34ch; text-align:center;
  font-size:.86rem; color:var(--blanco-60);
}

/* --- Ayuda y acciones --- */
.juego__ayuda{
  display:block; margin:4px auto 0; max-width:38ch; text-align:center;
  font-size:.96rem; color:var(--blanco-80); min-height:2.4em;
}
@keyframes palpitar{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} }

/* --- Escritorio: máquina a la izquierda, panel de la serie a la derecha --- */
@media (min-width:900px){
  .maquina{
    --alto:min(74vh,620px);
    --alto:min(74svh,620px);
    width:min(400px,36vw,calc(var(--alto) * .5763));
  }
  .juego{
    grid-template-columns:auto minmax(320px,420px);
    gap:22px 48px;
    align-items:center; justify-content:center; justify-items:stretch;
  }
  .maquina{ grid-column:1; grid-row:1/3; }
  .juego__panel{ grid-column:2; grid-row:1; max-width:none; padding:26px 26px 28px; }
  .juego__ayuda{ grid-column:2; grid-row:2; margin:0; max-width:none; text-align:left; }
  .juego__serie{ font-size:1.6rem; }
  /* Dos filas de tres, con el nombre debajo de cada figura */
  .juego__tira{ grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
  .tira-nombre{ display:block; }
  .sim[data-estado="enBandeja"] .juego__ayuda{ margin-inline:0; }
}

/* --- REVELACIÓN --- */
.revelacion{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:18px;
  background:rgba(9,4,22,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s;
  overflow-y:auto;
}
.revelacion.esta-abierta{ opacity:1; }
.revelacion__confeti{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}
.revelacion__panel{
  position:relative; z-index:2;
  width:min(100%,470px);
  background:linear-gradient(165deg,#2E1B57 0%,#150B2E 100%);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radio-g);
  padding:22px 22px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:translateY(18px) scale(.96);
  transition:transform .42s cubic-bezier(.2,.9,.3,1);
}
.revelacion.esta-abierta .revelacion__panel{ transform:none; }
.revelacion__cerrar{
  position:absolute; right:12px; top:12px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:1.5rem; line-height:1;
}

.revelacion__escena{
  position:relative; width:min(268px,70vw); aspect-ratio:1;
  margin:2px auto 10px;
}
/* Foco de escenario: sin esto las figuras oscuras se pierden contra el panel */
.revelacion__escena::before{
  content:''; position:absolute; inset:2%; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,.05) 58%,transparent 74%),
    radial-gradient(closest-side at 50% 88%,rgba(62,230,224,.22),transparent 62%);
}
.revelacion__panel:has(.ficha.es-secreta) .revelacion__escena::before{
  background:
    radial-gradient(closest-side,rgba(255,230,150,.34),rgba(255,210,63,.1) 58%,transparent 74%),
    radial-gradient(closest-side at 50% 88%,rgba(255,210,63,.3),transparent 62%);
}
.apertura{ position:absolute; inset:0; perspective:700px; }
.apertura__mitad{
  position:absolute; inset:0; display:block;
  transition:transform .58s cubic-bezier(.3,.9,.4,1), opacity .58s;
}
.apertura__mitad svg{ width:100%; height:100%; display:block; }
.apertura__mitad--sup{ clip-path:inset(0 0 50% 0); }
.apertura__mitad--inf{ clip-path:inset(50% 0 0 0); }
.apertura.esta-abierta .apertura__mitad--sup{ transform:translateY(-64%) rotateX(-78deg) scale(.86); opacity:0; }
.apertura.esta-abierta .apertura__mitad--inf{ transform:translateY(60%) rotateX(64deg) scale(.86); opacity:0; }

.apertura__fogonazo{
  position:absolute; inset:12%; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side,#fff,rgba(255,210,63,.7) 40%,transparent 72%);
}
.apertura.esta-abierta .apertura__fogonazo{ animation:fogonazo .55s ease-out; }
@keyframes fogonazo{
  0%{ opacity:0; transform:scale(.4); }
  25%{ opacity:1; transform:scale(1.15); }
  100%{ opacity:0; transform:scale(1.6); }
}

.apertura__destellos{ position:absolute; inset:0; pointer-events:none; }
.destello{
  position:absolute; left:50%; top:50%;
  width:9px; height:9px; border-radius:50%;
  background:var(--col); box-shadow:0 0 12px var(--col);
  opacity:0;
  animation:destellar .85s cubic-bezier(.2,.7,.3,1) var(--dem) forwards;
}
@keyframes destellar{
  0%  { opacity:0; transform:translate(-50%,-50%) rotate(var(--ang)) translateX(6px) scale(.3); }
  22% { opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) scale(.15); }
}

.revelacion__figura{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform:scale(.15);
}
.revelacion__figura svg{ width:100%; height:100%; }
.revelacion__figura.esta-visible{ animation:salirFigura .68s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes salirFigura{
  0%  { opacity:0; transform:scale(.15) translateY(22px); }
  58% { opacity:1; transform:scale(1.16) translateY(-8px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}

.ficha{
  text-align:center; opacity:0; transform:translateY(14px);
  transition:opacity .4s, transform .4s;
}
.ficha.esta-visible{ opacity:1; transform:none; }
.ficha__rareza{
  display:inline-block; margin:0 0 8px; padding:.3em .95em;
  border-radius:99px; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(62,230,224,.18); color:var(--cian); border:1px solid rgba(62,230,224,.4);
}
.ficha__rareza.es-rara{ background:rgba(185,139,232,.2); color:#D4B8F5; border-color:rgba(185,139,232,.45); }
.ficha__rareza.es-secreta{
  background:rgba(255,210,63,.2); color:var(--amarillo); border-color:rgba(255,210,63,.55);
  animation:brilloSecreta 1.6s ease-in-out infinite;
}
@keyframes brilloSecreta{ 0%,100%{ box-shadow:0 0 0 rgba(255,210,63,0);} 50%{ box-shadow:0 0 22px rgba(255,210,63,.65);} }

.ficha__nombre{ font-size:clamp(1.6rem,1.2rem + 1.8vw,2.2rem); margin:0 0 4px; }
.ficha__serie{ margin:0 0 12px; font-size:.9rem; color:var(--cian); font-weight:700; }
.ficha__desc{ margin:0 0 14px; color:var(--blanco-80); font-size:.98rem; }
.ficha__aviso{
  margin:0 0 8px; padding:.55em 1em; border-radius:12px;
  font-weight:800; font-size:.94rem;
}
.ficha__aviso.es-nueva{ background:rgba(62,230,224,.15); color:var(--cian); }
.ficha__aviso.es-repetida{ background:rgba(255,138,61,.16); color:#FFB37A; }
.ficha__aviso.es-completa{ background:rgba(255,210,63,.18); color:var(--amarillo); }
.ficha__progreso{ margin:0 0 18px; font-size:.9rem; color:var(--blanco-60); }
.ficha__botones{ display:grid; gap:10px; }

/* Tratamiento especial de las secretas */
.ficha.es-secreta{ position:relative; }
.revelacion__panel:has(.ficha.es-secreta){
  border-color:var(--amarillo);
  box-shadow:0 0 44px rgba(255,210,63,.5),0 30px 80px rgba(0,0,0,.7);
}
.revelacion__panel:has(.ficha.es-secreta)::before{
  content:''; position:absolute; inset:0; border-radius:var(--radio-g); pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,210,63,.28) 48%,transparent 62%);
  background-size:280% 100%;
  animation:barridoOro 2.6s ease-in-out infinite;
}
@keyframes barridoOro{ 0%{ background-position:180% 0; } 100%{ background-position:-80% 0; } }


/* ==========================================================================
   07 · SECCIÓN CLARA · didáctica
   ========================================================================== */
.explica{
  display:grid; gap:26px; margin-bottom:10px;
}
@media (min-width:820px){ .explica{ grid-template-columns:1.15fr 1fr; gap:44px; align-items:center; } }
.explica__grande{
  font-size:clamp(1.16rem,1rem + .9vw,1.5rem); line-height:1.5;
  color:var(--tinta); margin:0;
}
.explica__grande strong{ color:var(--rosa-texto); }
.explica__puntos{ display:grid; gap:16px; }
.explica__puntos li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; border-radius:var(--radio);
  background:#fff; box-shadow:var(--sombra-suave);
  color:var(--tinta-70); font-size:.98rem;
}
.explica__txt{ display:block; }
.explica__puntos strong{ color:var(--tinta); }
.explica__ico{ font-size:1.4rem; line-height:1.2; }

/* --- 3 pasos --- */
.pasos{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.paso{
  position:relative; padding:24px 22px 26px;
  background:#fff; border-radius:var(--radio-g); box-shadow:var(--sombra-suave);
  overflow:hidden;
}
.paso__numero{
  position:absolute; right:18px; top:14px;
  font-family:var(--tipo-titulo); font-size:3.4rem; line-height:1;
  color:rgba(255,45,120,.2);
}
.paso__arte{ display:block; margin-bottom:12px; text-align:center; }
.paso-svg{ width:100%; max-width:230px; height:auto; display:block; margin-inline:auto; }
.paso__titulo{ font-size:1.28rem; margin:0 0 .35em; color:var(--tinta); }
.paso__texto{ margin:0; color:var(--tinta-70); font-size:.96rem; }

/* Las ilustraciones se animan cuando la tarjeta entra en pantalla */
.paso-svg .paso-haz,
.paso-svg .paso-perilla,.paso-svg .paso-aro,
.paso-svg .paso-mitad-sup,.paso-svg .paso-mitad-inf,
.paso-svg .paso-figura,.paso-svg .paso-chispas{
  transform-box:view-box; transform-origin:100px 80px;
}
.paso-svg .paso-haz{ opacity:0; transform-origin:50px 46px; }
.paso.esta-visible .paso-svg .paso-haz{ animation:escanear 2.4s ease-in-out .3s infinite; }
@keyframes escanear{
  0%{ opacity:0; transform:translateY(0); }
  12%{ opacity:.9; }
  50%{ opacity:.9; transform:translateY(58px); }
  88%{ opacity:0; transform:translateY(58px); }
  100%{ opacity:0; transform:translateY(0); }
}
.paso.esta-visible .paso-perilla{ animation:girarPasoPerilla 2.8s cubic-bezier(.5,0,.3,1) .4s infinite; transform-origin:100px 80px; }
@keyframes girarPasoPerilla{ 0%,12%{ transform:rotate(0); } 55%,100%{ transform:rotate(330deg); } }
.paso.esta-visible .paso-aro{ animation:llenarAro 2.8s cubic-bezier(.5,0,.3,1) .4s infinite; }
@keyframes llenarAro{ 0%,12%{ stroke-dasharray:0 314; } 55%,100%{ stroke-dasharray:236 78; } }

.paso.esta-visible .paso-mitad-sup{ animation:abrirSup 2.9s ease-in-out .5s infinite; }
.paso.esta-visible .paso-mitad-inf{ animation:abrirInf 2.9s ease-in-out .5s infinite; }
.paso.esta-visible .paso-figura{ animation:salirPasoFigura 2.9s cubic-bezier(.34,1.56,.64,1) .5s infinite; transform-origin:100px 100px; }
.paso.esta-visible .paso-chispas{ animation:chispear 2.9s ease-out .5s infinite; transform-origin:100px 80px; }
@keyframes abrirSup{ 0%,22%{ transform:translateY(0);} 46%,88%{ transform:translateY(-26px);} 100%{ transform:translateY(0);} }
@keyframes abrirInf{ 0%,22%{ transform:translateY(0);} 46%,88%{ transform:translateY(22px);} 100%{ transform:translateY(0);} }
@keyframes salirPasoFigura{ 0%,24%{ opacity:0; transform:scale(.3);} 52%{ opacity:1; transform:scale(1.06);} 60%,88%{ opacity:1; transform:scale(1);} 100%{ opacity:0; transform:scale(.3);} }
@keyframes chispear{ 0%,26%{ opacity:0; transform:scale(.6);} 48%{ opacity:1; transform:scale(1.1);} 78%,100%{ opacity:0; transform:scale(1.3);} }
.paso-figura{ opacity:0; }
.paso-chispas{ opacity:0; }

/* --- Línea de tiempo --- */
.historia{
  position:relative; display:grid; gap:6px;
  padding-left:28px;
}
.historia::before{
  content:''; position:absolute; left:9px; top:14px; bottom:14px; width:3px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--rosa),var(--cian));
  opacity:.5;
}
.hito{ position:relative; }
.hito__cabeza{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  width:100%; padding:16px 18px; text-align:left;
  background:#fff; border:0; border-radius:var(--radio);
  box-shadow:var(--sombra-suave);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.hito__cabeza:hover{ transform:translateX(3px); box-shadow:0 14px 30px rgba(26,16,56,.15); }
.hito__punto{
  position:absolute; left:-27px; top:26px;
  width:15px; height:15px; border-radius:50%;
  background:var(--rosa); border:3px solid var(--papel);
  box-shadow:0 0 0 2px rgba(255,45,120,.35);
}
.hito__anio{
  font-family:var(--tipo-titulo); font-size:1.05rem; color:var(--rosa-texto);
  min-width:4.2em;
}
.hito__titulo{ font-family:var(--tipo-titulo); font-size:1.06rem; color:var(--tinta); line-height:1.15; }
.hito__mas{
  position:relative; width:16px; height:16px; flex:none;
}
.hito__mas::before,.hito__mas::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--rosa-texto);
  border-radius:2px; transition:transform var(--transicion);
}
.hito__mas::before{ width:14px; height:2.5px; transform:translate(-50%,-50%); }
.hito__mas::after{ width:2.5px; height:14px; transform:translate(-50%,-50%); }
.hito__cabeza[aria-expanded="true"] .hito__mas::after{ transform:translate(-50%,-50%) scaleY(0); }

.hito__cuerpo{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.hito__cuerpo.esta-abierto{ grid-template-rows:1fr; }
.hito__texto{ overflow:hidden; }
.hito__texto p{
  margin:0; padding:14px 20px 20px;
  color:var(--tinta-70); font-size:.97rem;
}

/* --- Glosario --- */
/* En celular van de a dos: seis tarjetas de ancho completo eran un scroll eterno. */
.glosario{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));
}
.glos__carta{
  position:relative; display:block; width:100%; aspect-ratio:1/1.22;
  padding:0; border:0; background:transparent;
  perspective:1000px;
}
@media (min-width:560px){
  .glosario{ gap:14px; grid-template-columns:repeat(3,1fr); }
  .glos__carta{ aspect-ratio:1/.9; }
}
/* Las seis juntas en una fila, para que "Repetida" no caiga sola abajo */
@media (min-width:1000px){
  .glosario{ gap:12px; grid-template-columns:repeat(6,1fr); }
  .glos__carta{ aspect-ratio:1/1.12; }
  .glos__cara{ padding:16px 12px; }
  .glos-icono{ width:44px; height:44px; }
  .glos__termino{ font-size:1.02rem; }
  .glos__texto{ font-size:.8rem; line-height:1.42; }
  .glos__pista{ font-size:.66rem; }
}
.glos__cara{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:14px 12px; border-radius:var(--radio-g);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.3,.8,.3,1);
  text-align:center;
}
.glos__cara--frente{
  background:#fff; box-shadow:var(--sombra-suave); color:var(--tinta);
  transform:rotateY(0deg);
}
.glos__cara--dorso{
  background:linear-gradient(155deg,var(--violeta) 0%,var(--violeta-hondo) 100%);
  color:#fff; transform:rotateY(180deg);
  box-shadow:0 14px 34px rgba(26,16,56,.3);
}
.glos__carta:hover .glos__cara--frente,
.glos__carta.esta-dada-vuelta .glos__cara--frente{ transform:rotateY(-180deg); }
.glos__carta:hover .glos__cara--dorso,
.glos__carta.esta-dada-vuelta .glos__cara--dorso{ transform:rotateY(0deg); }

.glos-icono{ width:40px; height:40px; }
.glos__termino{ font-family:var(--tipo-titulo); font-weight:800; font-size:1.04rem; line-height:1.1; }
.glos__pista{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rosa-texto); font-weight:800;
}
.glos__texto{ font-size:.78rem; line-height:1.42; color:var(--blanco-80); }
@media (min-width:560px){
  .glos__cara{ padding:20px; }
  .glos-icono{ width:52px; height:52px; }
  .glos__termino{ font-size:1.24rem; }
  .glos__pista{ font-size:.74rem; }
  .glos__texto{ font-size:.92rem; line-height:1.5; }
}
.glos__texto em{ color:var(--cian); font-style:normal; font-weight:700; }


/* ==========================================================================
   08 · SERIES
   ========================================================================== */
.filtros{
  display:flex; gap:9px; margin-bottom:22px;
  overflow-x:auto; padding-bottom:4px; scrollbar-width:none;
}
.filtros::-webkit-scrollbar{ display:none; }
.filtros .chip{ flex:none; }
@media (min-width:620px){ .filtros{ flex-wrap:wrap; overflow:visible; } }

/* Dos columnas en celular: seis pósters de ancho completo eran demasiado scroll. */
.series-grilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:620px){
  .series-grilla{ gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
}
.serie-carta__btn{
  display:block; width:100%; padding:0; text-align:left;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.13);
  border-radius:var(--radio-g); overflow:hidden; color:#fff;
  transition:transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.serie-carta__btn:hover{
  transform:translateY(-6px); border-color:var(--rosa);
  box-shadow:0 22px 46px rgba(255,45,120,.28);
}
/* 6/7 es la proporción de la lámina oficial (480x560): así entra entera,
   sin recortarle el título arriba ni el precio abajo. */
.serie-carta__poster{ position:relative; display:block; aspect-ratio:6/7; overflow:hidden; }
.serie-carta__poster svg{ width:100%; height:100%; display:block; }
.serie-carta__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Va abajo y no arriba: las láminas oficiales tienen el título y las figuras
   en la parte de arriba, y abajo la franja legal. Ahí no tapa nada. */
.badge{
  position:absolute; left:9px; bottom:9px;
  padding:.3em .7em; border-radius:99px;
  font-family:var(--tipo-titulo); font-size:.72rem; font-weight:800;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.badge--nueva{ background:var(--cian); color:var(--tinta); }
.badge--ultimas{ background:var(--amarillo); color:var(--tinta); }
.badge--pronto{ background:rgba(21,11,46,.9); color:#fff; border:1px solid rgba(255,255,255,.3); }

.serie-carta__info{ display:block; padding:12px 13px 15px; }
@media (min-width:620px){ .serie-carta__info{ padding:16px 18px 20px; } }
.serie-carta__linea{
  display:inline-block; margin-bottom:6px; padding:.22em .7em;
  border-radius:99px;
  background:rgba(255,255,255,.12);
  background:color-mix(in srgb,var(--c) 22%,transparent);
  color:var(--c); font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);
  border-color:color-mix(in srgb,var(--c) 45%,transparent);
}
.serie-carta__nombre{
  display:block; font-family:var(--tipo-titulo); font-size:1.06rem; line-height:1.12; margin-bottom:4px;
}
.serie-carta__meta{ display:block; font-size:.76rem; color:var(--blanco-60); }
@media (min-width:620px){
  .serie-carta__nombre{ font-size:1.28rem; }
  .serie-carta__meta{ font-size:.85rem; }
}
.serie-carta__meta--tenue{ margin-top:8px; font-style:italic; }
.serie-carta__licencia{
  display:block; margin-top:8px; font-size:.74rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blanco-60);
}
.badge--arranque{ background:var(--cian); color:var(--tinta); }
.sec__nota{
  margin-top:12px; font-size:.86rem; color:var(--blanco-60);
  border-left:3px solid rgba(255,255,255,.2); padding-left:12px; max-width:52ch;
}
.serie-carta__prog{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.serie-carta__pct{ font-size:.78rem; font-weight:800; color:var(--cian); flex:none; }

/* --- Panel de la serie --- */
.panel{
  position:fixed; inset:0; z-index:180;
  display:grid; place-items:end center;
  background:rgba(9,4,22,.8);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .28s;
}
.panel.esta-abierto{ opacity:1; }
.panel__caja{
  position:relative;
  width:min(100%,900px); max-height:92vh; max-height:92svh; overflow-y:auto;
  padding:26px 20px 34px;
  background:linear-gradient(170deg,#2E1B57 0%,#150B2E 100%);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:var(--radio-g) var(--radio-g) 0 0;
  transform:translateY(30px); transition:transform .34s cubic-bezier(.2,.9,.3,1);
  -webkit-overflow-scrolling:touch;
}
.panel.esta-abierto .panel__caja{ transform:none; }
@media (min-width:820px){
  .panel{ place-items:center; padding:24px; }
  .panel__caja{ border-radius:var(--radio-g); padding:30px 32px 36px; }
}
.panel__cerrar{
  position:sticky; float:right; top:0; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:1.6rem; line-height:1;
}
.panel__cabecera{ display:grid; gap:20px; margin-bottom:28px; }
@media (min-width:660px){ .panel__cabecera{ grid-template-columns:210px 1fr; gap:26px; } }
/* Misma proporción que la lámina oficial: entra entera, sin recorte. */
.panel__poster{ border-radius:var(--radio); overflow:hidden; aspect-ratio:6/7; }
.panel__poster svg{ width:100%; height:100%; display:block; }
.panel__linea{
  margin:0 0 4px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cian); font-weight:800;
}
.panel__nombre{ font-size:clamp(1.7rem,1.3rem + 1.8vw,2.4rem); margin:0 0 .3em; }
.panel__copete{ color:var(--blanco-80); font-size:.98rem; }
.panel__prog{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.9rem; }
.panel__prog strong{ color:var(--cian); }
.panel__fichas{
  display:grid; gap:8px; margin:18px 0;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
}
.panel__fichas li{
  padding:10px 14px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.panel__fichas span{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blanco-60);
}
.panel__fichas strong{ display:block; font-size:.98rem; color:#fff; }
.panel__pronto{
  display:inline-block; padding:.5em 1em; border-radius:12px;
  background:rgba(255,255,255,.08); font-size:.92rem; color:var(--blanco-80);
}

/* --- Grilla de figuras --- */
.fig-grilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(46%,150px),1fr));
}
@media (min-width:660px){
  .fig-grilla{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
.fig-grilla--chica{ grid-template-columns:repeat(auto-fill,minmax(min(30%,116px),1fr)); }

.fig-slot{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  padding:14px 10px 16px; border-radius:var(--radio);
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1);
  transition:transform var(--transicion), border-color var(--transicion);
}
.sec--claro .fig-slot{ background:#fff; border-color:rgba(26,16,56,.08); box-shadow:var(--sombra-suave); }
.fig-slot:hover{ transform:translateY(-4px); }
.fig-slot__arte{ position:relative; display:block; width:78px; height:98px; margin-bottom:6px; }
/* Foco suave: hace legibles las figuras de paleta oscura */
.fig-slot__arte::before{
  content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:104%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 72%);
}
.sec--claro .fig-slot__arte::before{
  background:radial-gradient(closest-side,rgba(26,16,56,.07),transparent 72%);
}
.fig-slot.es-silueta .fig-slot__arte::before{ opacity:.4; }
.fig-slot__arte svg{ width:100%; height:100%; display:block; }
.fig-slot.es-silueta .fig-slot__arte svg{ filter:brightness(0) saturate(0); opacity:.2; }
.sec--claro .fig-slot.es-silueta .fig-slot__arte svg{ opacity:.14; }
.fig-slot__interrogante{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--tipo-titulo); font-size:2.6rem; color:var(--rosa); opacity:.85;
}
.fig-slot__repes{
  position:absolute; right:-2px; top:-2px;
  min-width:24px; padding:.1em .4em; border-radius:99px;
  background:var(--amarillo); color:var(--tinta);
  font-family:var(--tipo-titulo); font-size:.78rem; font-weight:800;
}
.fig-slot__nombre{ font-family:var(--tipo-titulo); font-size:.98rem; line-height:1.15; }
.fig-slot__rareza{ font-size:.74rem; font-weight:800; color:var(--cian); letter-spacing:.04em; }
.sec--claro .fig-slot__rareza{ color:var(--cian-texto); }
.fig-slot.es-rara .fig-slot__rareza{ color:#D4B8F5; }
.sec--claro .fig-slot.es-rara .fig-slot__rareza{ color:#6B3FA8; }
.fig-slot.es-secreta .fig-slot__rareza{ color:var(--amarillo); }
.sec--claro .fig-slot.es-secreta .fig-slot__rareza{ color:#96700A; }
.fig-slot.es-secreta.esta-conseguida{
  border-color:rgba(255,210,63,.6);
  box-shadow:0 0 22px rgba(255,210,63,.28);
}
.fig-slot__desc{ margin-top:6px; font-size:.8rem; color:var(--blanco-60); line-height:1.4; }
.sec--claro .fig-slot__desc{ color:var(--tinta-55); }
.fig-slot.es-silueta .fig-slot__nombre{ opacity:.55; }


/* ==========================================================================
   10 · RECICLÁ TU CÁPSULA
   ========================================================================== */
.sec--reciclar{
  background:
    radial-gradient(80% 60% at 84% 22%,rgba(62,230,224,.24),transparent 62%),
    linear-gradient(180deg,#0C0620 0%,var(--violeta) 100%);
  overflow:hidden;
}
.caja--reciclar{ display:grid; gap:36px; align-items:center; }
@media (min-width:880px){ .caja--reciclar{ grid-template-columns:1.15fr .85fr; gap:56px; } }

.rec__bajada{ color:var(--blanco-80); font-size:1.06rem; max-width:52ch; }
.rec__bajada strong{ color:var(--cian); }

.rec__panel{
  margin-top:26px; padding:20px 22px; border-radius:var(--radio-g);
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14);
  text-align:center;
}
.rec__aviso{
  margin:12px 0 0; padding:0; max-height:0; overflow:hidden;
  border-radius:12px; background:rgba(255,210,63,.18); color:var(--amarillo);
  font-weight:800; text-align:center;
  transition:max-height .4s, padding .4s;
}
.rec__aviso.esta-visible{ max-height:6em; padding:.8em 1.1em; }
.rec__nota{ margin:14px 0 0; font-size:.85rem; color:var(--blanco-60); }
/* Va después de .rec__nota: si no, la clase base le pisa los márgenes automáticos */
.rec__nota--grande{
  margin:0 auto; max-width:32ch;
  font-size:1.02rem; line-height:1.45; color:#fff; font-weight:700;
}

/* --- El tótem con el tubo --- */
.rec__totem{ display:grid; place-items:center; }
.totem{
  position:relative; width:min(290px,84vw);
  display:flex; flex-direction:column; align-items:center;
  padding:22px 18px 26px;
  border-radius:34px 34px 18px 18px;
  background:linear-gradient(170deg,#3A2470 0%,#1B0F3C 100%);
  border:1.5px solid rgba(255,255,255,.15);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.totem__cabeza{ display:block; width:96px; margin-bottom:14px; }
.totem__cabeza svg{ width:100%; display:block; filter:drop-shadow(0 0 20px rgba(62,230,224,.6)); }
/* Rótulo afuera de la boca: adentro se desbordaba. */
.totem__rotulo{
  margin-bottom:8px; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cian);
}
/* Fila que contiene la boca y la cápsula que se arrastra */
.totem__fila{
  position:relative; display:flex; justify-content:center; align-items:center;
  width:100%; min-height:104px; margin-bottom:8px;
}
/* Puerto de devolución: redondo, porque lo que entra es una esfera */
.totem__boca{
  position:relative; display:block;
  width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 50% 28%,#231738 0%,#0B0518 72%);
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.95),
    inset 0 -2px 4px rgba(255,255,255,.1),
    0 0 0 3px var(--cian),
    0 0 20px rgba(62,230,224,.55);
  transition:box-shadow .2s;
}
/* Aro interior del puerto */
.totem__boca i{
  position:absolute; inset:20%; border-radius:50%;
  background:rgba(62,230,224,.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1.5px rgba(62,230,224,.28);
}
/* El tubo: las cápsulas se apilan desde abajo, cada una en su altura */
.totem__tubo{
  position:relative; display:block;
  width:62px; height:216px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.16));
  border:2px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 22px rgba(0,0,0,.5), 0 0 24px rgba(62,230,224,.2);
  overflow:hidden;
  transition:box-shadow .3s;
}
.totem__tubo.esta-lleno{ box-shadow:inset 0 0 22px rgba(0,0,0,.5),0 0 34px rgba(255,210,63,.75); }
.tubo__cap{
  position:absolute; left:50%; bottom:var(--b,2%);
  width:62%; aspect-ratio:1;
  transform:translate(-50%,0) rotate(var(--r,0deg));
}
.tubo__cap svg{ width:100%; height:100%; display:block; }
/* Cae desde arriba y se apoya sobre las que ya están */
.tubo__cap.cae{ animation:caerEnTubo .62s cubic-bezier(.34,1.42,.64,1) both; }
@keyframes caerEnTubo{
  0%  { transform:translate(-50%,-230px) rotate(0deg); opacity:0; }
  22% { opacity:1; }
  68% { transform:translate(-50%,9px) rotate(var(--r,0deg)); opacity:1; }
  100%{ transform:translate(-50%,0) rotate(var(--r,0deg)); opacity:1; }
}
/* Se retira el lote: caen por abajo */
.tubo__cap.se-retira{ animation:vaciarTubo .5s cubic-bezier(.5,0,.75,.6) both; }
@keyframes vaciarTubo{
  to{ transform:translate(-50%,110px) rotate(var(--r,0deg)); opacity:0; }
}
.totem__pie{
  margin-top:14px; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  color:var(--cian); text-align:center;
}

/* ==========================================================================
   CÁPSULA ARRASTRABLE
   Se agarra y se suelta adentro de la boca del tótem.
   ========================================================================== */
.totem__capsula{
  position:absolute; left:calc(50% + 88px); top:50%;
  width:48px; height:48px; padding:0; border:0; background:transparent;
  transform:translate(-50%,-50%);
  cursor:grab; touch-action:none;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.6));
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  animation:flotarCap 2.4s ease-in-out infinite;
}
.totem__capsula svg{ width:100%; height:100%; display:block; pointer-events:none; }
.totem__capsula.se-arrastra{ cursor:grabbing; animation:none; z-index:5; }
.totem__capsula.se-arrastra svg{ transform:scale(1.12); }
@keyframes flotarCap{
  0%,100%{ transform:translate(-50%,-50%) rotate(-6deg); }
  50%    { transform:translate(-50%,-58%) rotate(6deg); }
}
.totem__pista{
  position:absolute; left:calc(50% + 74px); top:calc(50% + 40px); transform:translateX(-50%);
  padding:.24em .66em; border-radius:99px; white-space:nowrap;
  background:var(--cian); color:var(--tinta);
  font-family:var(--tipo-titulo); font-weight:800; font-size:.72rem;
  box-shadow:0 4px 10px rgba(62,230,224,.4);
  transition:opacity .25s;
}
.totem__capsula.se-arrastra ~ .totem__pista{ opacity:0; }
/* La boca se ilumina cuando la cápsula está encima */
.totem__boca.esta-lista{
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.95),
    0 0 0 4px var(--amarillo),
    0 0 30px rgba(255,210,63,.9);
}
.totem__boca.esta-lista i{
  background:rgba(255,210,63,.2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1.5px rgba(255,210,63,.6);
}


/* ==========================================================================
   11 · DÓNDE GIRAR
   ========================================================================== */
.donde{ display:grid; gap:28px; margin-bottom:34px; }
@media (min-width:760px){ .donde{ grid-template-columns:250px 1fr; gap:44px; align-items:center; } }

.donde__mapa{ display:grid; justify-items:center; }
.mapa{ width:auto; height:min(380px,46vh); max-width:70vw; }
@media (min-width:760px){ .mapa{ height:400px; max-width:100%; } }
.mapa__pais{
  fill:rgba(255,255,255,.08);
  stroke:rgba(62,230,224,.7); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
}
.mapa-punto__halo{
  fill:var(--rosa); opacity:.25;
  transform-box:fill-box; transform-origin:center;
  animation:latirPunto 2.6s ease-out var(--dem) infinite;
}
.mapa-punto__centro{ fill:var(--rosa); }
.mapa-punto{ cursor:pointer; }
/* El punto dibujado mide 6 px: el círculo que se toca es este, invisible.
   Va primero en el SVG para no tapar el rótulo. */
.mapa-punto__toque{ fill:transparent; }
.mapa-punto__rotulo{ opacity:0; transition:opacity .18s; pointer-events:none; }
.mapa-punto:hover .mapa-punto__rotulo,
.mapa-punto:focus .mapa-punto__rotulo,
.mapa-punto:focus-visible .mapa-punto__rotulo,
.mapa-punto.esta-activo .mapa-punto__rotulo{ opacity:1; }
.mapa-punto:hover .mapa-punto__centro,
.mapa-punto.esta-activo .mapa-punto__centro{ r:7; }
.mapa-punto__caja{ fill:var(--tinta); stroke:var(--cian); stroke-width:1.2; }
.mapa-punto__texto{
  font-family:var(--tipo-texto); font-size:11px; font-weight:800; fill:#fff;
}
.mapa-punto.es-abierta .mapa-punto__halo,
.mapa-punto.es-abierta .mapa-punto__centro{ fill:var(--cian); }
@keyframes latirPunto{
  0%{ transform:scale(.45); opacity:.6; }
  70%,100%{ transform:scale(1.6); opacity:0; }
}
.rec__totem .rec__aviso{ margin:16px auto 0; width:min(290px,84vw); text-align:center; }

.mapa__nota{ margin:12px 0 0; font-size:.76rem; color:var(--blanco-60); text-align:center; }

.locaciones{ display:grid; gap:10px; margin-bottom:26px; }
.loc{
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:center;
  padding:14px 18px; border-radius:var(--radio);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
}
.loc__estado{
  grid-row:1/4; align-self:center;
  padding:.3em .8em; border-radius:99px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.loc__estado.es-abierta{ background:rgba(62,230,224,.2); color:var(--cian); }
.loc__estado.es-pronto{ background:rgba(255,255,255,.1); color:var(--blanco-60); }
.loc__nombre{ font-family:var(--tipo-titulo); font-size:1.08rem; }
.loc__zona{ font-size:.82rem; color:var(--cian); font-weight:700; }
.loc__detalle{ font-size:.84rem; color:var(--blanco-60); }

.proximamente{
  padding:28px 24px 30px; border-radius:var(--radio-g);
  background:linear-gradient(160deg,rgba(255,45,120,.16),rgba(62,230,224,.08));
  border:1.5px solid rgba(255,255,255,.16);
}
.proximamente h3{ font-size:1.5rem; margin:0 0 .4em; }
.proximamente > p{ color:var(--blanco-80); font-size:.98rem; max-width:56ch; }
@media (min-width:760px){
  .proximamente{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; padding:34px 34px 36px; }
  .proximamente h3{ grid-column:1; margin-bottom:.3em; }
  .proximamente > p{ grid-column:1; margin:0; }
  .proximamente .form{ grid-column:2; grid-row:1/3; }
}


/* ==========================================================================
   12 · B2B
   ========================================================================== */
.sec--b2b{
  background:linear-gradient(180deg,#0F0A22 0%,#161029 100%);
  border-top:1px solid rgba(255,255,255,.09);
}
.sec--b2b .sec__titulo{ font-size:clamp(1.8rem,1.2rem + 2.8vw,3rem); }

.cifras{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin-bottom:38px;
}
@media (min-width:720px){ .cifras{ grid-template-columns:repeat(4,1fr); } }
.cifras li{
  padding:20px 16px; border-radius:var(--radio);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  text-align:center;
}
.cifras strong{
  display:block; font-family:var(--tipo-titulo);
  font-size:clamp(1.9rem,1.3rem + 2.2vw,2.7rem); line-height:1; color:var(--cian);
  white-space:nowrap;
}
/* La unidad va chica y en la misma línea que el número. */
.cifras strong i{ font-style:normal; font-size:.46em; margin-left:.14em; letter-spacing:.01em; }
/* Ojo: solo el <span> hijo directo del <li> es la etiqueta.
   Sin el ">" esta regla también pisaba el número de adentro del <strong>. */
.cifras li > span{ display:block; margin-top:6px; font-size:.84rem; color:var(--blanco-60); }

.b2b-isla{ display:grid; gap:16px; margin-bottom:10px; }
@media (min-width:820px){ .b2b-isla{ grid-template-columns:1fr 1fr; } }
/* Sin esto el plano de 880 px estira la celda y ensancha toda la página. */
.b2b-isla > *{ min-width:0; }
.b2b-plano{
  margin:0; padding:12px; border-radius:var(--radio);
  background:#fff; box-shadow:var(--sombra-media);
}
/* El plano entra completo y se puede abrir en grande para leer las cotas. */
.b2b-plano__marco{
  position:relative; display:block; border-radius:10px; overflow:hidden;
  background:#fff;
}
.b2b-plano__marco img{
  display:block; width:100%; height:auto;
  transition:transform var(--transicion);
}
.b2b-plano__marco:hover img{ transform:scale(1.03); }
.b2b-plano__lupa{
  position:absolute; right:10px; bottom:10px;
  padding:.34em .9em; border-radius:99px;
  background:var(--rosa); color:var(--tinta);
  font-family:var(--tipo-titulo); font-weight:800; font-size:.8rem;
  box-shadow:0 4px 12px rgba(26,16,56,.28);
}
.b2b-plano figcaption{
  margin-top:10px; font-size:.82rem; font-weight:700; color:var(--tinta-55); text-align:center;
}

.bloque__titulo--b2b{ color:#fff; }

.formatos{ display:grid; gap:16px; }
@media (min-width:820px){ .formatos{ grid-template-columns:repeat(3,1fr); } }
/* Columna flex: las fichas y el botón quedan alineados entre las tres tarjetas */
.formato{
  display:flex; flex-direction:column;
  padding:24px 22px 26px; border-radius:var(--radio-g);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition:border-color var(--transicion), transform var(--transicion);
}
.formato > p{ margin-bottom:0; }
.formato__datos{ margin-top:auto; }
.formato:hover{ border-color:var(--cian); transform:translateY(-4px); }
.formato h4{ font-size:1.3rem; margin:0 0 .25em; }
.formato__medida{
  margin:0 0 .9em; font-size:.86rem; font-weight:800; color:var(--cian);
  letter-spacing:.02em;
}
.formato > p{ color:var(--blanco-80); font-size:.94rem; }
.formato__datos{ display:flex; flex-wrap:wrap; gap:6px; padding-top:14px; }
.formato__datos li{
  padding:.28em .75em; border-radius:99px;
  background:rgba(255,255,255,.08); font-size:.78rem; font-weight:700; color:var(--blanco-80);
}
.formato__letra{
  display:inline-grid; place-items:center;
  width:34px; height:34px; margin-bottom:10px;
  border-radius:50%; background:var(--rosa); color:var(--tinta);
  font-family:var(--tipo-titulo); font-weight:800; font-size:1.1rem;
}
.formato__ver{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:48px; margin-top:16px; padding:.5em .95em;
  background:rgba(62,230,224,.1); color:var(--cian);
  border:1.5px solid rgba(62,230,224,.35); border-radius:99px;
  font-family:var(--tipo-titulo); font-weight:800; font-size:.94rem;
  transition:background var(--transicion);
}
.formato__ver:hover{ background:rgba(62,230,224,.2); }
.formato__lupa{
  position:relative; width:16px; height:16px; flex:none;
}
.formato__lupa::before{
  content:''; position:absolute; left:0; top:0; width:11px; height:11px;
  border:2.2px solid var(--cian); border-radius:50%;
}
.formato__lupa::after{
  content:''; position:absolute; right:0; bottom:0; width:7px; height:2.2px;
  background:var(--cian); border-radius:2px; transform:rotate(45deg);
}

/* ==========================================================================
   VISOR DE PLANOS
   Las láminas técnicas son anchas: adentro del visor se pueden desplazar.
   ========================================================================== */
.visor{
  position:fixed; inset:0; z-index:220;
  display:grid; place-items:center; padding:0;
  background:rgba(6,3,16,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .26s;
}
.visor.esta-abierto{ opacity:1; }
.visor__caja{
  display:flex; flex-direction:column;
  width:100%; height:100%;
  /* min-width:0 es lo que impide que el plano ancho estire la caja y se
     lleve el botón de cerrar fuera de la pantalla. */
  min-width:0; max-width:min(1400px,100vw);
  max-height:100vh; max-height:100svh;
}
.visor__barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; flex:none; min-width:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(21,11,46,.9);
}
.visor__titulo{
  margin:0; min-width:0; font-family:var(--tipo-titulo); font-weight:800;
  font-size:clamp(.9rem,.82rem + .5vw,1.2rem); line-height:1.25; color:#fff;
}
.visor__cerrar{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:1.6rem; line-height:1;
}
.visor__cuerpo{
  flex:1; min-width:0; min-height:0;
  overflow:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px;
}
.visor__cuenta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin:0 0 10px; font-size:.8rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cian);
}
/* Los planos son anchos: en el celular hay que avisar que se desplazan. */
.visor__deslizar{
  font-size:.72rem; letter-spacing:.04em; text-transform:none;
  font-weight:700; color:var(--blanco-60);
}
@media (min-width:900px){ .visor__deslizar{ display:none; } }
.visor__lamina{ margin:0 0 22px; min-width:0; }
.visor__lamina img{
  display:block; width:min(1400px,190vw); max-width:none; height:auto;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  background:#fff;
}
.visor__lamina figcaption{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  margin-top:10px; font-size:.84rem; color:var(--blanco-60);
  position:sticky; left:0; width:min(100%,100vw);
}
.visor__lamina figcaption a{ min-height:32px; display:inline-flex; align-items:center; }
.visor__lamina figcaption a{ color:var(--cian); }
@media (min-width:900px){
  .visor__lamina img{ width:100%; }
}

.b2b-descargas{ display:flex; flex-wrap:wrap; gap:10px; }

.requisitos{ display:grid; gap:14px; }
@media (min-width:640px){ .requisitos{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .requisitos{ grid-template-columns:repeat(3,1fr); } }
.requisitos li{
  padding:20px 20px 22px; border-radius:var(--radio);
  background:rgba(255,255,255,.04); border-left:3px solid var(--rosa);
}
.requisitos h4{ font-size:1.08rem; margin:0 0 .3em; }
.requisitos p{ margin:0; font-size:.9rem; color:var(--blanco-60); }

.b2b-montaje{ margin:38px 0 0; }
.b2b-montaje img{ border-radius:var(--radio-g); box-shadow:var(--sombra-media); width:100%; }
.b2b-montaje figcaption{ margin-top:10px; font-size:.82rem; color:var(--blanco-60); text-align:center; }

.b2b-contacto{
  display:grid; gap:28px; margin-top:44px;
  padding:30px 24px 34px; border-radius:var(--radio-g);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
}
@media (min-width:880px){ .b2b-contacto{ grid-template-columns:.85fr 1.15fr; gap:44px; padding:38px 36px 40px; } }
.b2b-contacto h3{ font-size:1.8rem; margin:0 0 .4em; }
.b2b-contacto__texto p{ color:var(--blanco-80); font-size:.96rem; }
.b2b-contacto__mail{ margin-top:14px; font-size:.9rem; }
.b2b-contacto__mail a{ display:inline-block; padding:.3em 0; color:var(--cian); }
.b2b-contacto__isla{
  margin:22px 0 10px; max-width:340px;
}
.isla-mini{ width:100%; height:auto; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); }



/* ==========================================================================
   13 · FAQ Y PIE
   ========================================================================== */
.faqs{ display:grid; gap:10px; }
.faq__h{ margin:0; font-size:1rem; }
.faq__cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:20px 22px; text-align:left;
  background:#fff; border:0; border-radius:var(--radio);
  box-shadow:var(--sombra-suave);
  font-family:var(--tipo-titulo); font-size:1.1rem; font-weight:800; color:var(--tinta);
  transition:box-shadow var(--transicion);
}
.faq__cabeza:hover{ box-shadow:0 14px 30px rgba(26,16,56,.14); }
.faq__mas{ position:relative; width:18px; height:18px; flex:none; }
.faq__mas::before,.faq__mas::after{
  content:''; position:absolute; left:50%; top:50%;
  background:var(--rosa-texto); border-radius:2px; transition:transform var(--transicion);
}
.faq__mas::before{ width:16px; height:2.6px; transform:translate(-50%,-50%); }
.faq__mas::after{ width:2.6px; height:16px; transform:translate(-50%,-50%); }
.faq__cabeza[aria-expanded="true"] .faq__mas::after{ transform:translate(-50%,-50%) scaleY(0); }

.faq__cuerpo{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq__cuerpo.esta-abierto{ grid-template-rows:1fr; }
.faq__texto{ overflow:hidden; }
.faq__texto p{ margin:0; padding:6px 24px 22px; color:var(--tinta-70); font-size:.98rem; }

.pie{
  background:linear-gradient(180deg,var(--violeta-hondo) 0%,#0A0418 100%);
  padding:clamp(48px,7vw,80px) 0 30px;
  border-top:1px solid rgba(255,255,255,.09);
}
.pie__grilla{ display:grid; gap:36px; }
@media (min-width:820px){ .pie__grilla{ grid-template-columns:1.1fr .8fr 1.1fr; gap:44px; } }
.pie__tag{
  margin:12px 0 8px; color:var(--cian);
  font-weight:800; letter-spacing:.1em; font-size:.86rem;
}
.pie__desc{ color:var(--blanco-60); font-size:.92rem; max-width:32ch; }
.pie__redes{ display:flex; gap:10px; margin-top:16px; }
.pie__redes a{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em 1em; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  text-decoration:none; font-size:.86rem; font-weight:700;
  transition:background var(--transicion), border-color var(--transicion);
}
.pie__redes a:hover{ background:rgba(255,45,120,.22); border-color:var(--rosa); }
.pie__redes svg{ width:19px; height:19px; }

.pie h3{ font-size:1.05rem; margin:0 0 .7em; }
.pie__nav{ display:flex; flex-direction:column; gap:2px; }
.pie__nav a{
  padding:.3em 0; color:var(--blanco-60); text-decoration:none; font-size:.92rem;
  transition:color var(--transicion);
}
.pie__nav a:hover{ color:var(--cian); }
.pie__news p{ color:var(--blanco-60); font-size:.9rem; }
.pie__contacto{ margin-top:26px; }
.pie__contacto p{ font-size:.88rem; color:var(--blanco-60); margin:0 0 .3em; }
.pie__contacto a{ display:inline-block; padding:.3em 0; color:var(--cian); }

.pie__legal{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  font-size:.78rem; color:var(--blanco-60);
}
.pie__legal-txt{ max-width:80ch; line-height:1.6; }


/* ==========================================================================
   14 · MOVIMIENTO REDUCIDO
   Si el sistema lo pide, todo se queda quieto pero nada deja de funcionar.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .paso-figura,.paso-chispas{ opacity:1; }
  .tubo__cap{ transition:none; }
  .perilla__flecha{ display:none; }
  .btn__pulso{ display:none; }
}

/* Contenedor de consultas para los textos chicos de la máquina */
.maquina{ container-type:inline-size; }