/* ================================================================
   FRAN96MC.ES — PORTADA "AULA DIGITAL"
   Hoja 2/2: interfaz — barra, héroe, tarjetas, zonas de scroll,
   carrusel, comunidad, pie, gate de acceso y transición warp.
   ================================================================ */

/* ----------------------------------------------------------------
   1) UTILIDADES PIXEL
   ---------------------------------------------------------------- */
.px-marco{
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
}
.f-pixel{font-family:var(--f-pixel);line-height:1.6}
.salto{ /* enlace "saltar al contenido" accesible */
  position:fixed;left:1rem;top:-100px;z-index:var(--z-nav);
  padding:.7rem 1rem;background:var(--panel);border:3px solid var(--oro);
  font-family:var(--f-pixel);font-size:.6rem;text-decoration:none;
  transition:top .3s;
}
.salto:focus-visible{top:1rem}

/* ----------------------------------------------------------------
   2) BARRA SUPERIOR
   ---------------------------------------------------------------- */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-barra);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem clamp(1rem,3vw,2.2rem);
  transition:background .4s,box-shadow .4s;
}
.barra.fija{
  background:rgba(6,7,26,.85);
  backdrop-filter:blur(8px);
  box-shadow:0 3px 0 var(--panel-borde);
}
.barra-izq{display:flex;align-items:center;gap:.9rem;min-width:0}
.btn-menu{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:var(--panel);border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:border-color .2s,transform .2s var(--ease-out);
}
.btn-menu:hover{border-color:var(--cian);transform:translateY(-2px)}
.btn-menu i{
  position:relative;width:18px;height:3px;background:var(--tinta);
  box-shadow:0 -6px 0 var(--tinta),0 6px 0 var(--tinta);
}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.marca img{
  width:40px;height:40px;object-fit:contain;flex:none;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 8px rgba(89,224,255,.45));
}
.marca b{
  font-family:var(--f-pixel);font-size:.68rem;letter-spacing:.04em;
  color:var(--oro);
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.marca span{
  display:block;margin-top:.3rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-tenue);white-space:nowrap;
}
.barra-der{display:flex;align-items:center;gap:1rem;flex:none}
.estado{
  display:flex;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-tenue);
}
.estado i{
  width:8px;height:8px;background:var(--verde);flex:none;
  box-shadow:0 0 10px var(--verde);
  animation:latido 2.4s ease-in-out infinite;
}
@keyframes latido{50%{opacity:.35}}
.btn-acceder{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.05rem;
  font-family:var(--f-pixel);font-size:.58rem;
  color:#191302;text-decoration:none;
  background:var(--oro);
  border:3px solid #8a6a1d;
  clip-path:var(--recorte-px);
  transition:transform .2s var(--ease-out),filter .2s;
}
.btn-acceder:hover{transform:translateY(-3px);filter:brightness(1.1) drop-shadow(0 0 12px rgba(255,207,92,.5))}
.btn-acceder:active{transform:translateY(0)}

/* Barra de progreso de scroll (XP): pegada al borde inferior de la
   barra superior. app.js escribe --progreso-escala en su <i>. */
.barra .progreso-scroll{
  position:absolute;left:0;right:0;top:100%;
  height:7px;
  border-width:0 0 2px 0;
  border-color:transparent;
  background:transparent;
  clip-path:none;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.barra.fija .progreso-scroll{opacity:1}
.barra .progreso-scroll i{
  transition:none; /* sigue al scroll en vivo, sin arrastre */
  background:repeating-linear-gradient(90deg,var(--oro) 0 8px,color-mix(in srgb,var(--oro) 55%,var(--panel)) 8px 16px);
  box-shadow:0 0 10px color-mix(in srgb,var(--oro) 45%,transparent);
}

/* ----------------------------------------------------------------
   3) NAVEGACIÓN OVERLAY (hamburguesa)
   ---------------------------------------------------------------- */
#nav{
  position:fixed;inset:0;z-index:var(--z-nav);
  display:grid;place-items:center;padding:1rem;
  visibility:hidden;
}
#nav.abierto{visibility:visible}
#nav .nav-fondo{
  position:absolute;inset:0;background:rgba(3,4,16,.78);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s;
}
#nav.abierto .nav-fondo{opacity:1}
.nav-panel{
  position:relative;width:min(92vw,380px);
  padding:1.6rem 1.4rem 1.4rem;
  text-align:center;
  filter:drop-shadow(0 24px 50px rgba(0,0,10,.7));
  transform:translateY(24px) scale(.94);opacity:0;
  transition:transform .35s var(--ease-out),opacity .35s;
}
#nav.abierto .nav-panel{transform:none;opacity:1}
.nav-panel h2{
  font-family:var(--f-pixel);font-size:.72rem;color:var(--oro);
  margin-bottom:1.2rem;
}
.nav-panel a{
  display:block;padding:.85rem .6rem;margin-bottom:.55rem;
  font-family:var(--f-pixel);font-size:.62rem;color:var(--tinta);
  text-decoration:none;
  background:rgba(255,255,255,.04);
  border:2px solid transparent;
  transition:border-color .2s,color .2s,transform .2s var(--ease-out);
}
.nav-panel a:hover{border-color:var(--cian);color:var(--cian);transform:translateX(4px)}
/* Iconos del nav: el pixel oficial donde lo hay (lo pone pintarNav en
   app.js) y el emoji envuelto en .nav-emoji donde no. Ambos se animan
   al pasar el ratón: el pixel con el gesto propio de su categoría
   (ver las reglas [data-icono] junto a las tarjetas) y el emoji con un
   saludo genérico. */
.nav-panel a .fm-icono{
  width:1.35em;height:1.35em;
  display:inline-block;vertical-align:-.35em;margin-right:.45rem;
  image-rendering:pixelated;
}
.nav-panel a .nav-emoji{display:inline-block;margin-right:.2rem}
@media (prefers-reduced-motion:no-preference){
  .nav-panel a:hover .nav-emoji{animation:navSaluda .55s ease-in-out infinite}
}
@keyframes navSaluda{
  0%,100%{transform:rotate(-9deg)}
  50%{transform:rotate(9deg) translateY(-1px)}
}
.nav-cerrar{
  position:absolute;top:.6rem;right:.6rem;
  width:44px;height:44px;display:grid;place-items:center; /* área táctil mínima 44px */
  font-family:var(--f-pixel);font-size:.7rem;color:var(--tinta-tenue);
  border:2px solid var(--panel-borde);
  transition:color .2s,border-color .2s,transform .3s var(--ease-out);
}
.nav-cerrar:hover{color:var(--magenta);border-color:var(--magenta);transform:rotate(90deg)}

/* ----------------------------------------------------------------
   4) CONTENIDO GENERAL
   ---------------------------------------------------------------- */
main{position:relative;z-index:var(--z-contenido)}
.zona{
  width:min(94vw,1120px);
  margin:0 auto;
  padding:clamp(3rem,7vh,5.5rem) 0;
  scroll-margin-top:4.5rem;
}
#inicio{scroll-margin-top:0}
.titulo-zona{
  display:flex;align-items:center;gap:1rem;
  justify-content:center;text-align:center;
  margin-bottom:.7rem;
}
.titulo-zona::before,.titulo-zona::after{
  content:"";flex:1;max-width:150px;height:3px;
  background:repeating-linear-gradient(90deg,var(--panel-borde-luz) 0 10px,transparent 10px 16px);
}
/* Las líneas decorativas se dibujan al entrar en viewport (reveal):
   nacen encogidas hacia el centro y se extienden con scaleX. */
html.js .titulo-zona[data-reveal]::before{transform:scaleX(0);transform-origin:right center}
html.js .titulo-zona[data-reveal]::after{transform:scaleX(0);transform-origin:left center}
html.js .titulo-zona[data-reveal].vis::before,
html.js .titulo-zona[data-reveal].vis::after{
  transform:scaleX(1);
  transition:transform .7s var(--ease-out);
  transition-delay:calc(var(--rev-delay,0s) + .25s);
}
.titulo-zona h2{
  font-family:var(--f-pixel);
  font-size:clamp(.85rem,2.4vw,1.25rem);
  color:var(--oro);
  text-shadow:3px 3px 0 rgba(0,0,0,.6);
  text-wrap:balance;
}
.titulo-zona .gema{
  color:var(--cian);font-size:.9rem;flex:none;
  text-shadow:0 0 12px color-mix(in srgb,var(--cian) 65%,transparent);
  animation:gema 3s ease-in-out infinite;
}
.titulo-zona .gema:last-of-type{animation-delay:-1.5s}
@keyframes gema{50%{transform:translateY(-4px);opacity:.65}}
.sub-zona{
  text-align:center;color:var(--tinta-suave);
  max-width:56ch;margin:0 auto 2.4rem;
  text-wrap:pretty;
}

/* ----------------------------------------------------------------
   5) HÉROE
   ---------------------------------------------------------------- */
.heroe{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:5.4rem 1rem 2.5rem;
  position:relative;
}
.heroe-titulo{position:relative;margin-bottom:.4rem}
.heroe-titulo .sombrero{
  width:clamp(44px,6vw,72px);margin:0 auto .4rem;
  filter:drop-shadow(0 6px 12px rgba(0,0,10,.5));
  animation:sombreroFlota 5.2s var(--ease-out) infinite;
}
.heroe-titulo .sombrero svg{shape-rendering:crispEdges}
/* Bob refinado: sube con inclinación, cae con un micro-rebote */
@keyframes sombreroFlota{
  0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-9px) rotate(-3.5deg)}
  62%{transform:translateY(-2px) rotate(1.5deg)}
  78%{transform:translateY(-5px) rotate(-1deg)}
}
.heroe-titulo h1{
  position:relative;
  font-family:var(--f-pixel);
  font-size:clamp(1.35rem,5.2vw,3.1rem);
  letter-spacing:.02em;
  color:var(--oro);
  text-shadow:
    0 4px 0 #b3781c,
    0 8px 0 rgba(0,0,0,.45),
    0 0 34px rgba(255,207,92,.35);
  text-wrap:balance;
}
/* Glint periódico: banda de luz que barre el título (solo transform/opacity) */
@media (prefers-reduced-motion:no-preference){
  .heroe-titulo h1::after{
    content:"";position:absolute;top:-8%;bottom:-8%;left:0;width:34%;
    background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.34) 50%,transparent 88%);
    mix-blend-mode:screen;
    pointer-events:none;
    opacity:0;
    transform:translateX(-60%) skewX(-8deg);
    animation:tituloGlint 7s var(--ease-out) infinite;
    animation-delay:1.6s;
    will-change:transform,opacity;
  }
}
@keyframes tituloGlint{
  0%{opacity:0;transform:translateX(-60%) skewX(-8deg)}
  4%{opacity:1}
  14%{opacity:1}
  18%{opacity:0;transform:translateX(280%) skewX(-8deg)}
  100%{opacity:0;transform:translateX(280%) skewX(-8deg)}
}
.heroe-titulo .chispas{position:absolute;inset:-20% -10%;pointer-events:none}
.heroe-titulo .chispas i{
  position:absolute;width:7px;height:7px;background:var(--oro-vivo);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:chispa 3.2s ease-in-out infinite;
}
/* Chispas con tamaños y ritmos variados: constelación viva, no metrónomo */
.heroe-titulo .chispas i:nth-child(1){left:4%;top:30%}
.heroe-titulo .chispas i:nth-child(2){right:2%;top:16%;animation-delay:-1.1s;animation-duration:2.6s;background:var(--cian);width:5px;height:5px}
.heroe-titulo .chispas i:nth-child(3){right:12%;bottom:6%;animation-delay:-2.2s;animation-duration:4.1s;background:var(--violeta);width:9px;height:9px}
.heroe-titulo .chispas i:nth-child(4){left:14%;top:-4%;animation-delay:-.6s;animation-duration:3.7s;background:var(--magenta)}
.heroe-titulo .chispas i:nth-child(5){left:-2%;bottom:12%;animation-delay:-1.8s;animation-duration:4.6s;background:var(--verde);width:5px;height:5px}
.heroe-titulo .chispas i:nth-child(6){right:-4%;bottom:34%;animation-delay:-2.9s;animation-duration:2.9s;background:var(--oro);width:6px;height:6px}
@keyframes chispa{
  0%,100%{transform:scale(.3) rotate(0);opacity:.15}
  50%{transform:scale(1.25) rotate(45deg);opacity:1}
}
.heroe-cinta{
  display:inline-block;margin-top:1rem;
  padding:.62rem 1.5rem;
  font-family:var(--f-pixel);font-size:clamp(.55rem,1.4vw,.72rem);
  color:#f2ecff;
  background:#5b3fa8;
  border:3px solid #33235f;
  clip-path:var(--recorte-px);
  box-shadow:0 5px 0 rgba(0,0,0,.35);
}
.heroe-texto{
  margin:1.6rem auto 0;max-width:46ch;
  color:var(--tinta);
  font-size:clamp(1rem,2vw,1.2rem);
  font-weight:500;
  text-wrap:balance;
}
.heroe-texto-2{
  margin:.5rem auto 0;max-width:52ch;
  color:var(--tinta-suave);
  font-size:clamp(.9rem,1.6vw,1rem);
  text-wrap:pretty;
}

/* ----------------------------------------------------------------
   6) SELECTOR DE CATEGORÍAS (menú RPG vertical, según el mockup
   oficial del panel: marco pixel, icono con glow + etiqueta, y
   separadores con rombo entre categorías)
   ---------------------------------------------------------------- */
.tarjetas{
  display:flex;flex-direction:column;
  width:min(94vw,620px);
  margin:2.6rem auto 0;
  padding:1rem 1.5rem;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--panel-2) 88%,transparent),
    color-mix(in srgb,var(--panel) 90%,transparent));
  border:3px solid var(--panel-borde);
  box-shadow:
    inset 0 0 0 2px #0d0b24,
    0 14px 34px rgba(0,0,10,.5);
  clip-path:var(--recorte-px);
}
.tarjeta{
  --acc:var(--cian);
  --acc-texto:color-mix(in srgb,var(--acc) 55%,#fff);
  position:relative;
  display:grid;grid-template-columns:88px 1fr;
  align-items:center;gap:1.3rem;
  padding:1rem .6rem;
  text-align:left;
  background:transparent;border:none;
  transition:transform .25s var(--ease-out),background .25s;
}
/* Separador entre categorías: línea fina con rombo central, como
   en el mockup del panel */
.tarjeta:not(:first-child){
  border-top:2px solid color-mix(in srgb,var(--panel-borde) 55%,transparent);
}
.tarjeta:not(:first-child)::before{
  content:"◆";
  position:absolute;top:0;left:50%;
  transform:translate(-50%,-58%);
  font-size:.55rem;line-height:1;
  color:var(--panel-borde-luz);
  padding:0 .55rem;
  background:var(--panel);
  pointer-events:none;
}
.tarjeta:hover,.tarjeta:focus-visible{
  transform:translateX(8px);
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent 75%);
}
.tarjeta:active{transform:translateX(5px) scale(.99)}
.tarjeta .icono{
  width:88px;height:88px;
  display:grid;place-items:center;
  font-size:2.5rem;line-height:1; /* tamaño del emoji si no hay icono pixel */
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--acc) 50%,transparent));
  transition:transform .3s var(--ease-out),filter .3s;
}
/* Icono pixel oficial (FMIconos): ocupa toda la casilla, nítido */
.tarjeta .icono .fm-icono{
  width:100%;height:100%;
  display:block;
  image-rendering:pixelated;
}
.tarjeta:hover .icono,.tarjeta:focus-visible .icono{
  transform:translateY(-3px) scale(1.07);
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--acc) 85%,transparent));
}
/* Micro-rebote del icono al entrar el puntero (rebote back.out) */
@media (prefers-reduced-motion:no-preference){
  .tarjeta:hover .icono,.tarjeta:focus-visible .icono{animation:iconoBota .45s var(--ease-back)}

  /* ----------------------------------------------------------------
     CADA ICONO SE MUEVE COMO LO QUE ES
     Mientras el puntero está encima, cada icono repite un gesto con
     sentido: el libro hojea, el chip chisporrotea, la mochila trota,
     la lupa barre buscando, el cofre traquetea, la estrella destella,
     la poción se agita y las jarras brindan. El rebote genérico de
     arriba queda de reserva para iconos sin gesto propio.
     Las tarjetas se seleccionan por data-zona (con los alias antiguos
     del menú en producción) y los enlaces del nav por data-icono.
     ---------------------------------------------------------------- */
  .tarjeta[data-zona="aula-de-fran"]:hover .icono,
  .tarjeta[data-zona="recursos"]:hover .icono,
  #nav a[data-icono="aula-de-fran"]:hover .fm-icono{animation:icoLibro 1.5s ease-in-out infinite}

  .tarjeta[data-zona="docencia"]:hover .icono,
  .tarjeta[data-zona="docencia-ia"]:hover .icono,
  #nav a[data-icono="docencia"]:hover .fm-icono{animation:icoChip .5s steps(2,jump-none) infinite}

  .tarjeta[data-zona="aula-virtual"]:hover .icono,
  .tarjeta[data-zona="aula"]:hover .icono,
  #nav a[data-icono="aula-virtual"]:hover .fm-icono{animation:icoMochila .7s ease-in-out infinite}

  .tarjeta[data-zona="oposiciones"]:hover .icono,
  #nav a[data-icono="oposiciones"]:hover .fm-icono{animation:icoLupa 1.7s ease-in-out infinite}

  .tarjeta[data-zona="tienda"]:hover .icono,
  #nav a[data-icono="tienda"]:hover .fm-icono{animation:icoCofre 2s ease-in-out infinite}

  .tarjeta[data-zona="sala-premium"]:hover .icono,
  #nav a[data-icono="sala-premium"]:hover .fm-icono{animation:icoEstrella 1.1s ease-in-out infinite}

  .tarjeta[data-zona="zona-pruebas"]:hover .icono,
  #nav a[data-icono="zona-pruebas"]:hover .fm-icono{animation:icoPocion 1s ease-in-out infinite}

  .tarjeta[data-zona="facebar"]:hover .icono,
  #nav a[data-icono="facebar"]:hover .fm-icono{animation:icoJarras .9s ease-in-out infinite}
}

/* La poción pivota desde el corcho (arriba a la derecha), como si se
   agitara sujeta por el tapón; el resto gira desde su centro. */
.tarjeta[data-zona="zona-pruebas"] .icono,
#nav a[data-icono="zona-pruebas"] .fm-icono{transform-origin:70% 22%}

/* ----------------------------------------------------------------
   PIEZAS Y EXTRAS DE LOS ICONOS
   FMIconos genera cada icono en capas: piezas de la propia rejilla
   (ico-tapa, ico-izq/ico-der…) y extras invisibles (luz, ojos,
   páginas, burbujas…) con la clase ico-anim. Aquí se les da vida.
   Cada clase de pieza existe en UN solo icono, así que basta con
   "cualquier tarjeta o enlace del nav con el ratón encima": no hay
   que repetir el data-zona pieza por pieza.
   transform-box:fill-box hace que girar/escalar use la caja de la
   propia pieza (sin ello, todo giraría alrededor de la esquina 0,0
   del dibujo completo).
   ---------------------------------------------------------------- */
.fm-icono g,.fm-icono rect,.fm-icono circle,.fm-icono path{transform-box:fill-box}
.fm-icono .ico-anim{opacity:0}

.fm-icono .ico-tapa{transform-origin:6% 96%}
.fm-icono .ico-luz{transform-origin:50% 100%}
.fm-icono .ico-izq{transform-origin:80% 96%}
.fm-icono .ico-der{transform-origin:20% 96%}
.fm-icono .ico-chispa,.fm-icono .ico-ping,.fm-icono .ico-rayos,
.fm-icono .ico-ojo{transform-origin:50% 50%}

@media (prefers-reduced-motion:no-preference){
  /* Cofre: la tapa se abre, la luz sale del hueco y vuelve a cerrarse */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-tapa{animation:icoTapaCofre 2s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-luz{animation:icoLuzCofre 2s ease-in-out infinite}

  /* Libro: resplandor y páginas que vuelan hojeándose (cada una sale
     medio segundo después de la anterior) */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-luzlibro{animation:icoLuzLibro 1.5s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-pag{animation:icoPagVuela 1.5s ease-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-pag2{animation-delay:.5s}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-pag3{animation-delay:1s}

  /* Chip: corriente recorriendo las pistas + ojos que parpadean y miran */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-cables{opacity:.9}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-cables path{animation:icoCorriente .8s linear infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-ojos{opacity:1}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-ojo{animation:icoOjo 3.2s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-pupila{animation:icoPupila 3.2s ease-in-out infinite}

  /* Mochila: al trotar se escapan una chispa y un lápiz */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-chispam{animation:icoPop .7s ease-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-lapiz{animation:icoPop .7s ease-out infinite .35s}

  /* Lupa: el haz barre el pergamino y al final marca el hallazgo */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-haz{animation:icoBarrido 1.7s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-ping{animation:icoPing 1.7s ease-out infinite}

  /* Estrella: destello en cruz detrás del brillo que ya late */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-rayos{animation:icoRayos 1.1s ease-in-out infinite}

  /* Poción: burbujas subiendo hacia la superficie, escalonadas */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .bu1{animation:icoBurbuja 1s linear infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .bu2{animation:icoBurbuja 1s linear infinite .33s}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .bu3{animation:icoBurbuja 1s linear infinite .66s}

  /* Jarras: cada una brinda por su lado, chispa y espuma al chocar */
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-izq{animation:icoJarraIzq .9s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-der{animation:icoJarraDer .9s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .ico-chispa{animation:icoChoca .9s ease-in-out infinite}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .salp1{animation:icoEspuma .9s ease-out infinite .2s}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .salp2{animation:icoEspuma .9s ease-out infinite .28s}
  :is(.tarjeta:hover,.tarjeta:focus-visible,#nav a:hover) .salp3{animation:icoEspuma .9s ease-out infinite .36s}
}

/* La tapa gira sobre la bisagra trasera (esquina izquierda del dibujo,
   que es donde el cofre está más "al fondo"), se queda abierta un rato
   con la luz saliendo por la juntura, y se cierra. */
@keyframes icoTapaCofre{
  0%,8%,96%,100%{transform:none}
  14%{transform:translateY(-.4px) rotate(-4deg)}
  22%{transform:translateY(-1.2px) rotate(-16deg)}
  32%,76%{transform:translateY(-1.5px) rotate(-20deg)}
  88%{transform:rotate(-5deg)}
}
@keyframes icoLuzCofre{
  0%,16%{opacity:0;transform:scaleY(.2)}
  30%{opacity:.95;transform:scaleY(1)}
  52%{opacity:.7;transform:scaleY(.92)}
  68%{opacity:.95;transform:scaleY(1)}
  84%,100%{opacity:0;transform:scaleY(.25)}
}
@keyframes icoLuzLibro{
  0%,100%{opacity:0}
  50%{opacity:.3}
}
@keyframes icoPagVuela{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scaleX(1)}
  12%{opacity:1}
  50%{transform:translate(3px,-9px) rotate(14deg) scaleX(.35)}
  75%{opacity:.9;transform:translate(6px,-14px) rotate(-10deg) scaleX(1)}
  100%{opacity:0;transform:translate(8px,-18px) rotate(8deg) scaleX(.5)}
}
@keyframes icoCorriente{
  to{stroke-dashoffset:-14}
}
@keyframes icoOjo{
  0%,6%{transform:scaleY(.08)}
  12%,88%{transform:scaleY(1)}
  94%,100%{transform:scaleY(.08)}
}
@keyframes icoPupila{
  0%,14%{transform:translateX(0)}
  24%,42%{transform:translateX(-1px)}
  52%,70%{transform:translateX(1px)}
  80%,100%{transform:translateX(0)}
}
@keyframes icoPop{
  0%{opacity:0;transform:translateY(2px) scale(.6)}
  35%{opacity:1;transform:translateY(-2.5px) scale(1)}
  70%,100%{opacity:0;transform:translateY(-5px) scale(.8)}
}
@keyframes icoBarrido{
  0%{opacity:0;transform:translateX(-2px)}
  15%{opacity:.85}
  45%{opacity:.85;transform:translateX(16px)}
  55%,100%{opacity:0;transform:translateX(19px)}
}
@keyframes icoPing{
  0%,55%{opacity:0;transform:scale(.3)}
  65%{opacity:1;transform:scale(1.25)}
  75%{opacity:.9;transform:scale(.95)}
  90%,100%{opacity:0;transform:scale(1.4)}
}
@keyframes icoRayos{
  0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}
  50%{opacity:.75;transform:scale(1.05) rotate(8deg)}
}
@keyframes icoBurbuja{
  0%{opacity:0;transform:translate(0,0)}
  20%{opacity:1}
  80%{opacity:1;transform:translate(2.4px,-3.6px)}
  100%{opacity:0;transform:translate(3px,-4.5px)}
}
@keyframes icoJarraIzq{
  0%,80%,100%{transform:rotate(0deg)}
  25%{transform:rotate(8deg)}
  40%{transform:rotate(2deg)}
  55%{transform:rotate(7deg)}
}
@keyframes icoJarraDer{
  0%,80%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-8deg)}
  40%{transform:rotate(-2deg)}
  55%{transform:rotate(-7deg)}
}
@keyframes icoChoca{
  0%,20%{opacity:0;transform:scale(.4)}
  30%{opacity:1;transform:scale(1.2)}
  45%{opacity:.4;transform:scale(.9)}
  55%{opacity:1;transform:scale(1.1)}
  80%,100%{opacity:0;transform:scale(.5)}
}
@keyframes icoEspuma{
  0%,22%{opacity:0;transform:translateY(0)}
  35%{opacity:1;transform:translateY(-2px)}
  70%,100%{opacity:0;transform:translateY(-4px)}
}

/* Libro: se mece hojeando */
@keyframes icoLibro{
  0%,100%{transform:translateY(-3px) rotate(-5deg) scale(1.07)}
  50%{transform:translateY(-5px) rotate(5deg) scale(1.07)}
}
/* Chip: chisporroteo eléctrico, saltos secos y diminutos */
@keyframes icoChip{
  0%,100%{transform:translate(0,-3px) scale(1.07)}
  25%{transform:translate(-1px,-4px) scale(1.07)}
  50%{transform:translate(1px,-2px) scale(1.09)}
  75%{transform:translate(-1px,-3px) scale(1.05)}
}
/* Mochila: trote con aplastamiento al caer */
@keyframes icoMochila{
  0%,100%{transform:translateY(-1px) scale(1.09,1.02)}
  35%{transform:translateY(-9px) scale(1.04,1.1)}
  65%{transform:translateY(-1px) scale(1.1,1)}
  80%{transform:translateY(-3px) scale(1.07,1.05)}
}
/* Lupa: barre de lado a lado, buscando */
@keyframes icoLupa{
  0%,100%{transform:translate(-3px,-3px) rotate(-8deg) scale(1.07)}
  50%{transform:translate(3px,-3px) rotate(8deg) scale(1.07)}
}
/* Cofre: el icono entero solo se asienta; abrirse y soltar luz es
   trabajo de la tapa y del haz (ver icoTapaCofre/icoLuzCofre abajo) */
@keyframes icoCofre{
  0%,100%{transform:translateY(-3px) scale(1.07)}
  12%{transform:translateY(-5px) scale(1.09)}
  22%{transform:translateY(-3px) scale(1.07)}
}
/* Estrella: destella, crece y gira un pelín a cada lado */
@keyframes icoEstrella{
  0%,100%{transform:translateY(-3px) scale(1.05) rotate(-4deg);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--acc,#ffcf5c) 75%,transparent)) brightness(1)}
  50%{transform:translateY(-5px) scale(1.16) rotate(4deg);filter:drop-shadow(0 0 26px color-mix(in srgb,var(--acc,#ffcf5c) 100%,transparent)) brightness(1.25)}
}
/* Poción: péndulo colgando del corcho */
@keyframes icoPocion{
  0%,100%{transform:translateY(-3px) rotate(-9deg) scale(1.07)}
  50%{transform:translateY(-3px) rotate(9deg) scale(1.07)}
}
/* Jarras: el conjunto solo bota un poco; el brindis de verdad lo hacen
   las piezas izq/der chocando (icoJarraIzq/icoJarraDer abajo) */
@keyframes icoJarras{
  0%,100%{transform:translateY(-3px) scale(1.07)}
  30%{transform:translateY(-5px) scale(1.1)}
  55%{transform:translateY(-4px) scale(1.09)}
}
@keyframes iconoBota{
  0%{transform:translateY(0) scale(1)}
  55%{transform:translateY(-6px) scale(1.12)}
  100%{transform:translateY(-3px) scale(1.07)}
}
.tarjeta h3{
  font-family:var(--f-pixel);
  font-size:clamp(.72rem,1.7vw,.95rem);line-height:1.7;
  color:var(--tinta);
  transition:color .25s;
}
.tarjeta:hover h3,.tarjeta:focus-visible h3{color:var(--acc-texto)}
/* La descripción queda solo para lectores de pantalla (el selector
   sigue el mockup: icono + etiqueta, sin párrafos ni botón) */
.tarjeta p{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.tarjeta .ir{display:none}
.tarjeta .candado{
  position:absolute;top:.7rem;right:.8rem;
  font-size:.9rem;
  filter:drop-shadow(0 0 6px rgba(255,207,92,.6));
}

/* --- Apartados premium ---
   Solo se pintan cuando hay sesión premium (lo filtra app.js), así que
   verlos ya es la recompensa: el sello dorado los distingue del resto
   sin gritar. Nada aquí menciona administración: quien entra ve una
   cuenta premium y punto (ver includes/acceso-unificado.md). */
/* Las tarjetas del menú son filas sin borde propio (solo la línea
   separadora de arriba), así que aquí un border-color no se vería:
   lo que distingue una fila restringida es un rastro de color por la
   izquierda, que además no compite con el degradado del :hover. */
.tarjeta--premium{
  background:linear-gradient(90deg,color-mix(in srgb,var(--oro) 9%,transparent),transparent 55%);
}
.tarjeta--premium .sello-premium{
  position:absolute;top:.75rem;right:.8rem;
  padding:.28rem .5rem .22rem;
  font-family:var(--f-pixel);
  font-size:.4rem;letter-spacing:.5px;
  color:var(--cielo-1);
  background:linear-gradient(180deg,var(--oro-vivo),var(--oro));
  clip-path:var(--recorte-px);
  box-shadow:0 0 10px color-mix(in srgb,var(--oro) 45%,transparent);
}
/* --- Zonas privadas (el taller, Facebar) ---
   Solo las ve el administrador y las cuentas que él invita a cada
   una (lo filtra el servidor en menu_datos_publico, no el navegador).
   Se distinguen del premium con un color propio y un sello, para que
   de un vistazo quede claro que eso no lo está viendo todo el mundo.
   --zc es el color de la zona; el naranja de aviso es el de reserva. */
.tarjeta--zona{
  --zc:var(--fuego);
  background:linear-gradient(90deg,color-mix(in srgb,var(--zc) 11%,transparent),transparent 55%);
}
.tarjeta--zona-facebar{ --zc:var(--magenta); }
.tarjeta--zona .sello-zona{
  position:absolute;top:.75rem;right:.8rem;
  padding:.28rem .5rem .22rem;
  font-family:var(--f-pixel);
  font-size:.4rem;letter-spacing:.5px;
  color:var(--cielo-1);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--zc) 45%,#fff),
    var(--zc));
  clip-path:var(--recorte-px);
  box-shadow:0 0 10px color-mix(in srgb,var(--zc) 45%,transparent);
}

/* Entrada suave la primera vez que aparecen tras iniciar sesión */
@media (prefers-reduced-motion:no-preference){
  .tarjeta--premium,
  .tarjeta--zona{animation:premiumAparece .5s var(--ease-back) both}
}
@keyframes premiumAparece{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}

/* Lema bajo las tarjetas */
.lema{
  display:flex;align-items:center;gap:1rem;
  width:min(92vw,640px);
  margin:2.4rem auto 0;
  padding:1rem 1.4rem;
  text-align:left;
  filter:drop-shadow(0 10px 24px rgba(0,0,10,.4));
}
.lema .lema-icono{width:40px;flex:none}
.lema .lema-icono svg{shape-rendering:crispEdges}
.lema p{
  font-size:clamp(.88rem,1.6vw,1rem);color:var(--tinta);
  font-weight:500;text-wrap:pretty;
}
.lema .brillo{color:var(--oro);animation:gema 2.6s ease-in-out infinite;flex:none}

/* Indicador de scroll */
.baja{
  margin-top:auto;padding-top:2.2rem;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:var(--tinta-tenue);
}
.baja span{font-family:var(--f-pixel);font-size:.55rem;letter-spacing:.1em}
.baja .flecha{
  width:18px;height:26px;position:relative;
}
.baja .flecha i{
  position:absolute;left:50%;top:0;translate:-50% 0;
  width:10px;height:10px;
  border-right:3px solid var(--oro);border-bottom:3px solid var(--oro);
  transform:rotate(45deg);
  animation:baja 1.6s steps(3) infinite;
}
.baja .flecha i:nth-child(2){animation-delay:.2s;opacity:.55}
/* Solo transform/opacity: animar top forzaba layout continuo en el héroe.
   translateY va primero (desplaza en el eje de la página) y el rotate(45deg)
   base se repite en cada keyframe porque transform no se compone. */
@keyframes baja{
  0%{transform:translateY(0) rotate(45deg);opacity:1}
  100%{transform:translateY(14px) rotate(45deg);opacity:0}
}

/* ----------------------------------------------------------------
   7) ZONA SOBRE
   ---------------------------------------------------------------- */
.sobre-caja{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.4rem,3vw,2.8rem);
  align-items:center;
  padding:clamp(1.5rem,3.5vw,2.6rem);
  filter:drop-shadow(0 18px 40px rgba(0,0,10,.5));
}
.sobre-texto p{color:var(--tinta-suave);margin-bottom:1rem;max-width:58ch;text-wrap:pretty}
.sobre-texto p strong{color:var(--tinta)}
.sobre-escena{position:relative}
.sobre-escena svg{width:100%;height:auto;shape-rendering:crispEdges}
/* Palabras del monitor, rotando */
.monitor-palabras{
  position:absolute;
  left:53%;top:32%;width:23%;height:21%;
  display:grid;place-items:center;
  font-family:var(--f-pixel);
  font-size:clamp(.4rem,.9vw,.55rem);
  color:var(--verde);
  text-align:center;
}
.monitor-palabras span{
  grid-area:1/1;opacity:0;
  animation:palabra 9s infinite;
}
.monitor-palabras span:nth-child(2){animation-delay:3s}
.monitor-palabras span:nth-child(3){animation-delay:6s}
@keyframes palabra{
  0%,30%{opacity:1}
  36%,94%{opacity:0}
  100%{opacity:1}
}
/* Vaho del café y parpadeo del robot */
.sobre-escena .vaho{
  position:absolute;left:48.5%;top:50%;
  width:5px;height:5px;background:rgba(238,240,255,.5);
  animation:vaho 2.6s ease-in-out infinite;
}
.sobre-escena .vaho.v2{left:51%;animation-delay:-1.3s}
@keyframes vaho{
  0%{transform:translateY(0);opacity:0}
  30%{opacity:.7}
  100%{transform:translateY(-22px);opacity:0}
}
.sobre-escena .ojo-robot{animation:ojoRobot 4s steps(1) infinite}
@keyframes ojoRobot{0%,88%{opacity:1}92%,96%{opacity:.1}}
/* Avatar de Fran vivo (sprite oficial inyectado en #escenaFran):
   respira, parpadea y lanza hechizos cada 7 s. */
.sobre-escena .escena-fran{
  animation:franRespira 3.4s ease-in-out infinite;
  transform-box:fill-box;transform-origin:50% 100%;
}
@keyframes franRespira{50%{transform:translateY(-1.5px)}}
/* El bob flotante del asistente no pega con Fran de pie en su
   cuarto: dentro de la escena se anula. */
.sobre-escena .fm-sprite{animation:none}
/* Parpadeo periódico de los párpados del sprite (inverso al viejo
   franParpadeo: los párpados se ENCIENDEN un instante). */
.sobre-escena .fm-parpado{animation:escenaParpadeo 4.5s steps(1) infinite}
@keyframes escenaParpadeo{
  0%,90%{opacity:0}
  91%,95%{opacity:1}
  96%,100%{opacity:0}
}
/* El gato conserva su parpadeo clásico */
.sobre-escena .fran-ojos{animation:franParpadeo 4.5s steps(1) infinite}
@keyframes franParpadeo{
  0%,90%{opacity:1}
  91%,95%{opacity:0}
  96%,100%{opacity:1}
}
/* La varita del sprite se alza al lanzar el hechizo, sincronizada
   con la ráfaga .fran-magia (mismo ciclo de 7 s). El origen en la
   mano lo pone asistente.css (.fm-varita). */
.sobre-escena .fm-varita{animation:franLanza 7s ease-in-out infinite}
@keyframes franLanza{
  0%,76%{transform:rotate(0)}
  80%,88%{transform:rotate(-14deg)}
  94%,100%{transform:rotate(0)}
}
.sobre-escena .fran-magia{
  opacity:0;
  animation:franMagia 7s ease-in-out infinite;
  transform-box:fill-box;transform-origin:50% 50%;
}
@keyframes franMagia{
  0%,78%{opacity:0;transform:scale(.2)}
  84%{opacity:1;transform:scale(1)}
  92%{opacity:1;transform:scale(1.35) rotate(14deg)}
  98%,100%{opacity:0;transform:scale(1.6)}
}
.sobre-escena .gato-cola{
  animation:colaGato 2.6s ease-in-out infinite;
  transform-box:fill-box;transform-origin:100% 100%;
}
@keyframes colaGato{50%{transform:rotate(14deg)}}
.btn-pixel{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:.4rem;
  padding:.85rem 1.3rem;
  font-family:var(--f-pixel);font-size:.6rem;
  color:var(--tinta);text-decoration:none;
  background:var(--panel-2);
  border:3px solid var(--violeta);
  clip-path:var(--recorte-px);
  transition:transform .25s var(--ease-out),filter .25s,background .25s;
}
.btn-pixel::after{content:"→"}
.btn-pixel:hover{
  transform:translateY(-3px);
  background:color-mix(in srgb,var(--violeta) 22%,var(--panel-2));
  filter:drop-shadow(0 0 14px rgba(166,137,255,.45));
}

/* ----------------------------------------------------------------
   8) RECURSOS DESTACADOS (carrusel)
   ---------------------------------------------------------------- */
.carrusel-caja{position:relative}
.carrusel{
  display:flex;gap:1.1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.1rem;
  scrollbar-width:none;
}
.carrusel::-webkit-scrollbar{display:none}
.recurso{
  flex:0 0 clamp(240px,26vw,296px);
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  text-decoration:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,10,.45));
  transition:transform .3s var(--ease-out);
}
.recurso:hover{transform:translateY(-6px) scale(1.02)}
.recurso:active{transform:translateY(-2px) scale(1.01)}
.recurso .lamina{
  aspect-ratio:16/10;
  display:grid;place-items:center;
  border-bottom:none;
  overflow:hidden;
}
/* Deslizamiento con leve escala del arte al pasar el puntero */
.recurso .lamina svg,.recurso .lamina img{transition:transform .45s var(--ease-out)}
.recurso:hover .lamina svg,.recurso:hover .lamina img{transform:scale(1.05)}
.recurso .lamina svg{width:100%;height:100%;shape-rendering:crispEdges}
.recurso .lamina img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.recurso .ficha{
  padding:1rem 1.05rem 1.1rem;
  border-top:none;
  flex:1;display:flex;flex-direction:column;gap:.45rem;
}
.recurso h3{font-size:1rem;font-weight:600;color:var(--tinta);line-height:1.35}
.recurso p{font-size:.84rem;color:var(--tinta-tenue);line-height:1.5;flex:1}
.recurso .ver{
  font-family:var(--f-pixel);font-size:.52rem;
  color:var(--cian);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:gap .3s var(--ease-out);
}
.recurso .ver::after{content:"→"}
.recurso:hover .ver{gap:.9rem}
/* animaciones internas de las láminas */
.lamina .fuego-camp{animation:llama .5s steps(2) infinite;transform-origin:50% 100%;transform-box:fill-box}
.lamina .nota{animation:notaFlota 2.4s ease-in-out infinite;transform-box:fill-box}
.lamina .nota.n2{animation-delay:-1.2s}
@keyframes notaFlota{50%{transform:translateY(-6px)}}
.lamina .estrella-gira{animation:gema 2.8s ease-in-out infinite;transform-box:fill-box}
.lamina .lupa-mueve{animation:lupa 3.6s ease-in-out infinite;transform-box:fill-box}
@keyframes lupa{50%{transform:translate(8px,4px)}}
.lamina .cursor-parpadea{animation:ojoRobot 1.2s steps(1) infinite}

.carrusel-nav{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:.4rem;
}
.carrusel-nav button{
  width:44px;height:44px; /* área táctil mínima 44px (WCAG 2.5.8) */
  display:grid;place-items:center;
  font-family:var(--f-pixel);font-size:.75rem;color:var(--tinta);
  background:var(--panel);border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:border-color .2s,color .2s,transform .2s var(--ease-out);
}
.carrusel-nav button:hover{border-color:var(--cian);color:var(--cian);transform:translateY(-2px)}
.carrusel-nav button:active{transform:translateY(2px) scale(.92)}
.puntos{display:flex;gap:.55rem}
.puntos i{
  width:10px;height:10px;background:var(--panel-borde);
  transition:background .3s,transform .3s var(--ease-back),box-shadow .3s;
}
.puntos i.on{
  background:var(--oro);
  transform:scale(1.3) rotate(45deg);
  box-shadow:0 0 10px color-mix(in srgb,var(--oro) 60%,transparent);
}

/* ----------------------------------------------------------------
   9) COMUNIDAD + ESTADÍSTICAS
   ---------------------------------------------------------------- */
.banda{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,2.6vw,2.2rem);
  align-items:stretch;
}
.banda-caja{
  padding:clamp(1.4rem,3vw,2.1rem);
  filter:drop-shadow(0 14px 30px rgba(0,0,10,.45));
  display:flex;flex-direction:column;
}
.banda-caja h2{
  font-family:var(--f-pixel);font-size:clamp(.72rem,1.6vw,.95rem);
  color:var(--oro);margin-bottom:.5rem;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.banda-caja .mini-sub{color:var(--tinta-tenue);font-size:.88rem;margin-bottom:1.3rem}

/* Newsletter */
.correo-fila{display:flex;gap:.6rem;flex-wrap:wrap}
.correo-fila input{
  flex:1;min-width:190px;
  padding:.85rem 1rem;
  font-family:var(--f-cuerpo);font-size:.92rem;color:var(--tinta);
  background:#0a0b22;
  border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
}
.correo-fila input::placeholder{color:var(--tinta-tenue)}
.correo-fila input:focus{outline:none;border-color:var(--cian)}
.correo-fila button{
  padding:.85rem 1.2rem;
  font-family:var(--f-pixel);font-size:.56rem;color:#12002a;
  background:var(--violeta);
  border:3px solid #4b3391;
  clip-path:var(--recorte-px);
  transition:transform .2s var(--ease-out),filter .2s;
}
.correo-fila button:hover{transform:translateY(-3px);filter:brightness(1.12)}
/* Botón grande de comunidad (Instagram por defecto, editable en el panel) */
.btn-comunidad{
  display:inline-flex;align-items:center;gap:.7rem;
  align-self:flex-start;
  margin-top:.2rem;
  padding:.95rem 1.4rem;
  font-family:var(--f-pixel);font-size:.62rem;line-height:1.4;
  color:#fff;text-decoration:none;
  background:linear-gradient(45deg,#7a2bd8,#d62976 55%,#fa7e1e);
  border:3px solid #3c1160;
  clip-path:var(--recorte-px);
  transition:transform .25s var(--ease-out),filter .25s;
}
.btn-comunidad svg{width:18px;height:18px;flex:none;fill:#fff}
.btn-comunidad:hover{
  transform:translateY(-3px);
  filter:brightness(1.12) drop-shadow(0 0 14px rgba(214,41,118,.55));
}
.btn-comunidad:active{transform:translateY(0)}

.redes{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}
.redes a{
  width:46px;height:46px;
  display:grid;place-items:center;
  background:var(--panel);border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:border-color .2s,transform .25s var(--ease-out),filter .25s;
}
.redes a svg{width:20px;height:20px;shape-rendering:crispEdges;fill:var(--tinta-suave);transition:fill .2s}
.redes a:hover{border-color:var(--cian);transform:translateY(-4px);filter:drop-shadow(0 0 10px rgba(89,224,255,.35))}
.redes a:hover svg{fill:var(--cian)}
/* Fogata decorativa de la comunidad */
.fogata{margin:1.6rem auto 0;width:min(150px,50%)}
.fogata svg{shape-rendering:crispEdges;width:100%;height:auto}
.fogata .fuego-camp{animation:llama .5s steps(2) infinite;transform-origin:50% 100%;transform-box:fill-box}

/* Estadísticas */
.estadisticas{display:grid;grid-template-columns:1fr;gap:.7rem;margin-top:.2rem}
.dato{
  position:relative;
  display:flex;align-items:center;gap:1rem;
  padding:.75rem .95rem;
  background:rgba(255,255,255,.035);
  border:2px solid rgba(255,255,255,.07);
  transition:border-color var(--dur-micro) ease,transform var(--dur-micro) var(--ease-out);
}
.dato::before{ /* esquinas pixel decoradas del marco */
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) left 0 top 0/10px 2px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) left 0 top 0/2px 10px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) right 0 top 0/10px 2px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) right 0 top 0/2px 10px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) left 0 bottom 0/10px 2px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) left 0 bottom 0/2px 10px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) right 0 bottom 0/10px 2px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) right 0 bottom 0/2px 10px;
  background-repeat:no-repeat;
}
.dato:hover{border-color:rgba(255,255,255,.16);transform:translateX(3px)}
.dato .dato-icono{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;font-size:1.25rem;
  background:var(--panel);border:2px solid var(--panel-borde);
  clip-path:var(--recorte-px);
}
.dato .dato-texto{flex:1;font-size:.9rem;color:var(--tinta-suave)}
.dato .dato-cifra{
  font-family:var(--f-pixel);font-size:clamp(.8rem,1.8vw,1.05rem);
  color:var(--verde);
  font-variant-numeric:tabular-nums;
  text-shadow:2px 2px 0 rgba(0,0,0,.5);
}

/* ----------------------------------------------------------------
   10) PIE
   ---------------------------------------------------------------- */
.pie{
  position:relative;z-index:var(--z-contenido);
  margin-top:1.5rem;
  background:linear-gradient(180deg,rgba(6,7,24,0) 0%,rgba(6,7,24,.92) 18%,#05061a 100%);
  padding:3.2rem 1rem 5.5rem;
  text-align:center;
}
.pie::before{ /* hierba pixel sobre el borde superior */
  content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:
    repeating-linear-gradient(90deg,
      #2f8a49 0 8px,transparent 8px 14px,#3fae5c 14px 20px,transparent 20px 30px);
  opacity:.5;
}
.pie::after{ /* almenas pixel: divisor superior de castillo */
  content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
  background:
    repeating-linear-gradient(90deg,
      var(--panel-borde) 0 18px,transparent 18px 36px) left top/36px 7px,
    linear-gradient(var(--panel-borde-luz),var(--panel-borde-luz)) left bottom/100% 3px;
  background-repeat:repeat-x,no-repeat;
  opacity:.75;
  pointer-events:none;
}
.pie-decor{
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(1.2rem,4vw,3rem);
  margin-bottom:1.8rem;
}
.pie-decor svg{shape-rendering:crispEdges;height:clamp(26px,3.4vw,40px);width:auto}
.pie-decor .vela-llama{animation:llama .5s steps(2) infinite;transform-origin:50% 100%;transform-box:fill-box}
.pie-decor .cristal-brilla{animation:gema 3.2s ease-in-out infinite;transform-box:fill-box}
.pie-frase{
  font-size:.95rem;color:var(--tinta-suave);margin-bottom:.5rem;
}
.pie-frase .corazon{color:var(--violeta)}
.pie-copy{
  font-size:.78rem;color:var(--tinta-tenue);
  display:flex;flex-direction:column;gap:.45rem;align-items:center;
}
.pie-copy a{
  color:var(--tinta-tenue);text-decoration:underline;
  transition:color var(--dur-micro) ease,text-shadow var(--dur-micro) ease;
}
.pie-copy a:hover,.pie-copy a:focus-visible{
  color:var(--cian);
  text-shadow:0 0 12px color-mix(in srgb,var(--cian) 70%,transparent);
}

/* ----------------------------------------------------------------
   11) GATE DE ACCESO (teclado numérico)
   ---------------------------------------------------------------- */
#gate{
  position:fixed;inset:0;z-index:var(--z-gate);
  display:grid;place-items:center;padding:1rem;
  visibility:hidden;
}
#gate.abierto{visibility:visible}
#gate .gate-fondo{
  position:absolute;inset:0;
  background:rgba(3,4,14,.72);
  backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s;
}
#gate.abierto .gate-fondo{opacity:1}
.gate-panel{
  position:relative;width:min(92vw,380px);
  padding:1.7rem 1.4rem 1.5rem;
  text-align:center;
  filter:drop-shadow(0 30px 70px rgba(0,0,10,.75));
  transform:translateY(30px) scale(.88);opacity:0;
  /* Entrada con rebote y disolución "pixel" (opacidad a saltos) */
  transition:transform .45s var(--ease-back),opacity .3s steps(5);
}
#gate.abierto .gate-panel{transform:none;opacity:1}
.gate-panel .gate-cerrar{
  position:absolute;top:.6rem;right:.6rem;
  width:44px;height:44px;display:grid;place-items:center; /* área táctil mínima 44px */
  font-family:var(--f-pixel);font-size:.7rem;color:var(--tinta-tenue);
  border:2px solid var(--panel-borde);
  transition:color .2s,border-color .2s,transform .3s var(--ease-out);
}
.gate-panel .gate-cerrar:hover{color:var(--magenta);border-color:var(--magenta);transform:rotate(90deg)}
.gate-panel .gate-icono{
  width:54px;height:54px;margin:0 auto .8rem;
  display:grid;place-items:center;font-size:1.4rem;
  background:var(--panel-2);border:3px solid var(--oro);
  clip-path:var(--recorte-px);
  animation:gema 2.8s ease-in-out infinite;
}
.gate-panel h3{
  font-family:var(--f-pixel);font-size:.72rem;color:var(--oro);
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.gate-panel .gate-sub{
  margin-top:.5rem;font-size:.82rem;color:var(--tinta-suave);min-height:1.3em;
}
.pin-puntos{display:flex;justify-content:center;gap:.85rem;margin:1.1rem 0 1rem}
.pin-puntos i{
  width:14px;height:14px;
  border:3px solid var(--panel-borde-luz);
  transition:background .2s,border-color .2s,transform .2s var(--ease-out);
}
.pin-puntos i.on{
  background:var(--cian);border-color:var(--cian);
  box-shadow:0 0 12px var(--cian);
  transform:scale(1.12);
}
.pin-puntos.ok i{background:var(--verde);border-color:var(--verde);box-shadow:0 0 12px var(--verde)}
.pin-puntos.mal i{background:var(--error);border-color:var(--error)}
.teclado{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;
  max-width:250px;margin:0 auto;
}
.tecla{
  min-height:52px;
  font-family:var(--f-pixel);font-size:.85rem;color:var(--tinta);
  background:var(--panel-2);
  border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:transform .12s var(--ease-out),border-color .15s,background .15s;
  touch-action:manipulation;
}
.tecla:hover{border-color:var(--cian);background:color-mix(in srgb,var(--cian) 10%,var(--panel-2))}
.tecla:active{transform:translateY(3px)}
.tecla.aux{font-size:.65rem;color:var(--tinta-tenue)}
.gate-msg{margin-top:.95rem;min-height:1.4em;font-size:.82rem}
.gate-msg.err{color:#ff8f8f}
.gate-msg.ok{color:var(--verde)}
.intentos{display:flex;justify-content:center;gap:.45rem;margin-top:.55rem}
.intentos i{width:26px;height:5px;background:var(--panel-borde);transition:background .3s}
.intentos i.usado{background:var(--error);box-shadow:0 0 8px color-mix(in srgb,var(--error) 60%,transparent)}
.gate-panel.bloqueado .teclado{pointer-events:none;filter:grayscale(1) brightness(.55)}
.gate-reloj{
  display:none;margin-top:.9rem;
  font-family:var(--f-pixel);font-size:1.1rem;color:#ff8f8f;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px color-mix(in srgb,var(--error) 50%,transparent);
}
.gate-panel.bloqueado .gate-reloj{display:block;animation:latido 1s ease-in-out infinite}
@keyframes tiembla{
  10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}
}
.gate-panel.tiembla{animation:tiembla .5s}

/* ----------------------------------------------------------------
   12) TRANSICIÓN WARP (portal de salida)
   ---------------------------------------------------------------- */
#warp{
  position:fixed;inset:0;z-index:var(--z-warp);
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,#171048 0%,#03030f 72%);
  visibility:hidden;opacity:0;
  transition:opacity .45s steps(6); /* disolución pixel */
}
#warp.abierto{visibility:visible;opacity:1}
/* El contenido del portal entra creciendo con rebote */
#warp>div{
  transform:scale(.7);
  transition:transform .55s var(--ease-back);
}
#warp.abierto>div{transform:scale(1)}
.warp-portal{
  position:relative;width:110px;height:140px;margin:0 auto;
}
/* Mismo patrón que .portal (portada.css): giro con transform en una capa
   interior recortada por el clip-path y latido de brillo solo con opacity */
.warp-portal .anillo{
  position:absolute;inset:0;
  clip-path:var(--recorte-px);
  filter:drop-shadow(0 0 24px rgba(166,137,255,.7)); /* halo estático */
}
.warp-portal .anillo::before{
  content:"";position:absolute;
  left:50%;top:50%;width:180%;aspect-ratio:1;
  margin:-90% 0 0 -90%; /* centrada; 180% cubre la diagonal del anillo */
  background:conic-gradient(from 0deg,var(--violeta),var(--cian),var(--magenta),var(--violeta));
  animation:portalGira 3s linear infinite;
}
.warp-portal .nucleo{
  position:absolute;inset:12%;
  background:radial-gradient(circle at 50% 45%,#efe6ff 0%,var(--violeta) 36%,#2b1663 80%);
  clip-path:var(--recorte-px);
  animation:portalLate 1.6s ease-in-out infinite;
}
.warp-portal .nucleo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.85) 0%,rgba(239,230,255,.35) 46%,rgba(239,230,255,0) 78%);
  opacity:0;
  animation:portalBrillo 1.6s ease-in-out infinite;
}
#warp p{
  margin-top:1.6rem;text-align:center;
  font-family:var(--f-pixel);font-size:.62rem;color:var(--tinta-suave);
}
.warp-barra{
  width:min(60vw,240px);height:10px;margin:1.2rem auto 0;
  background:#0a0b22;border:2px solid var(--panel-borde);
  overflow:hidden;
}
/* Se llena con transform:scaleX (patrón de .px-barra-progreso): animar
   width forzaba layout+paint en cada frame durante todo el warp */
.warp-barra i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:repeating-linear-gradient(90deg,var(--cian) 0 8px,var(--violeta) 8px 16px);
  transition:transform 1.2s linear;
}

/* ----------------------------------------------------------------
   13) RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width:900px){
  .sobre-caja{grid-template-columns:1fr}
  .sobre-escena{max-width:440px;margin:0 auto;order:-1}
  .banda{grid-template-columns:1fr}
}
@media (max-width:640px){
  .marca span{display:none}
  .estado{display:none}
  .heroe{padding-top:4.6rem}
  .tarjeta{flex-basis:100%;max-width:340px}
  .tarjeta p{min-height:0}
  .lema{flex-direction:column;text-align:center;gap:.7rem}
  .lema p{text-align:center}
  .hud{left:.7rem;bottom:.7rem}
  .hud button{width:42px;height:42px}
}

/* ----------------------------------------------------------------
   14) MOVIMIENTO REDUCIDO (interfaz)
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .heroe-titulo .sombrero,.heroe-titulo .chispas i,.estado i,.baja .flecha i,
  .titulo-zona .gema,.lema .brillo,.gate-panel .gate-icono,
  .monitor-palabras span,.sobre-escena .vaho,.sobre-escena .ojo-robot,
  .sobre-escena .escena-fran,.sobre-escena .fm-varita,.sobre-escena .fm-parpado,
  .sobre-escena .fran-ojos,.sobre-escena .fran-magia,
  .sobre-escena .gato-cola,.lamina .fuego-camp,.lamina .nota,
  .lamina .estrella-gira,.lamina .lupa-mueve,.lamina .cursor-parpadea,
  .fogata .fuego-camp,.pie-decor .vela-llama,.pie-decor .cristal-brilla,
  .warp-portal .anillo,.warp-portal .anillo::before,
  .warp-portal .nucleo,.warp-portal .nucleo::after{animation:none}
  .monitor-palabras span{opacity:0}
  .monitor-palabras span:first-child{opacity:1}
  .tarjeta,.recurso,.btn-acceder,.btn-pixel,.hud button{transition:none}
  /* Efectos nuevos del rediseño: quietos con elegancia */
  .tarjeta::before,.tarjeta::after,.puntos i,.dato,
  .recurso .lamina svg,.recurso .lamina img,
  .gate-panel,#warp,#warp>div,.warp-barra i,
  .barra .progreso-scroll,.pie-copy a{transition:none}
  html.js .titulo-zona[data-reveal]::before,
  html.js .titulo-zona[data-reveal]::after{transform:none;transition:none}
  .gate-panel{transform:none;opacity:1}
  #warp>div{transform:none}
  /* El panel de navegación entra sin deslizamiento ni escala */
  .nav-panel{transition:none;transform:none}
  #nav .nav-fondo{transition:none}
  /* Sin sacudida de error: el fallo ya se comunica con .gate-msg.err
     y los puntos .pin-puntos.mal */
  .gate-panel.tiembla{animation:none}
  /* Sin parpadeo del reloj de bloqueo: la cuenta atrás numérica
     ya transmite la información */
  .gate-panel.bloqueado .gate-reloj{animation:none}
}

/* ----------------------------------------------------------------
   15) ZONA SIN ANUNCIOS (gate/warp abiertos: se oculta todo anuncio)
   ---------------------------------------------------------------- */
body.no-ads-zone ins.adsbygoogle,
body.no-ads-zone .adsbygoogle,
body.no-ads-zone .google-auto-placed,
body.no-ads-zone [id^="google_ads_iframe"],
body.no-ads-zone [id^="aswift_"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* ----------------------------------------------------------------
   16) COREOGRAFÍA DE VIDEOJUEGO
   Cursor de selección RPG, botones de consola, cartel de nivel,
   secuencia del héroe, impacto del warp, premio de contadores,
   logo vivo y easter egg konami. Solo transform/opacity (y sombras
   en micro-hovers). El bloque reduced-motion propio cierra la
   sección y apaga TODO lo decorativo nuevo.
   ---------------------------------------------------------------- */

/* --- Cursor de selección RPG en las tarjetas del menú ---
   Un ► pixel parpadeante aparece a la izquierda del h3, como en los
   menús de los RPG clásicos. Solo CSS, sin desplazar el layout. */
.tarjeta h3{position:relative}
.tarjeta h3::before{
  content:"►";
  position:absolute;right:100%;top:50%;
  margin-right:.55em;translate:0 -50%;
  font-family:var(--f-pixel);font-size:.55rem;line-height:1;
  color:var(--acc);
  opacity:0;pointer-events:none;
}
.tarjeta:hover h3::before,
.tarjeta:focus-visible h3::before{
  opacity:1;
  animation:cursorRPG .9s steps(2,jump-none) infinite;
}
@keyframes cursorRPG{from{opacity:1}to{opacity:.08}}

/* --- Botones estilo consola: pulsación "chunky" en 2 pasos ---
   Sombra dura bajo el botón; al pulsar, el botón baja 3px a saltos
   (steps) y la sombra se comprime: tacto de botón físico. */
.btn-pixel,.btn-acceder{filter:drop-shadow(0 3px 0 rgba(0,0,10,.45))}
.btn-pixel:hover{filter:drop-shadow(0 0 14px rgba(166,137,255,.45)) drop-shadow(0 6px 0 rgba(0,0,10,.45))}
.btn-acceder:hover{filter:brightness(1.1) drop-shadow(0 0 12px rgba(255,207,92,.5)) drop-shadow(0 6px 0 rgba(0,0,10,.45))}
.btn-pixel:active,.btn-acceder:active,.px-btn:active{
  transform:translateY(3px);
  transition:transform .08s steps(2,jump-none),filter .08s steps(2,jump-none);
  filter:drop-shadow(0 1px 0 rgba(0,0,10,.6));
}

/* --- Cartel de nivel: secuencia línea → título → gemas (<900 ms) ---
   Las líneas se dibujan primero (más cortas y sin retardo extra),
   el h2 asienta con overshoot y las gemas se encienden en cascada. */
html.js .titulo-zona[data-reveal].vis::before,
html.js .titulo-zona[data-reveal].vis::after{
  transition:transform .45s var(--ease-out);
  transition-delay:var(--rev-delay,0s);
}
html.js .titulo-zona[data-reveal] h2{opacity:0;transform:translateY(12px) scale(.92)}
html.js .titulo-zona[data-reveal].vis h2{
  opacity:1;transform:none;
  transition:opacity .3s ease,transform .5s var(--ease-back);
  transition-delay:calc(var(--rev-delay,0s) + .16s);
}
html.js .titulo-zona[data-reveal] .gema{opacity:0}
html.js .titulo-zona[data-reveal].vis .gema{
  opacity:1;
  /* Encendido con flash breve y, después, el vaivén infinito de siempre
     (dos delays distintos mantienen las gemas desincronizadas) */
  animation:
    gemaEnciende .4s var(--ease-back) calc(var(--rev-delay,0s) + .42s) backwards,
    gema 3s ease-in-out calc(var(--rev-delay,0s) + .82s) infinite;
}
html.js .titulo-zona[data-reveal].vis .gema:last-of-type{
  animation-delay:calc(var(--rev-delay,0s) + .52s),calc(var(--rev-delay,0s) + 2s);
}
@keyframes gemaEnciende{
  0%{opacity:0;transform:scale(.2) rotate(-40deg)}
  60%{opacity:1;transform:scale(1.5) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* --- Secuencia musical del héroe: el sombrero cae con rebote y
   después el título asienta; cinta y textos siguen (--rev-delay) --- */
html.js .heroe-titulo[data-reveal] .sombrero{opacity:0}
html.js .heroe-titulo[data-reveal].vis .sombrero{
  opacity:1;
  animation:
    sombreroCae .55s var(--ease-back) backwards,
    sombreroFlota 5.2s var(--ease-out) .55s infinite;
}
@keyframes sombreroCae{
  0%{opacity:0;transform:translateY(-26px) rotate(-8deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}
html.js .heroe-titulo[data-reveal] h1{opacity:0;transform:translateY(16px) scale(.96)}
html.js .heroe-titulo[data-reveal].vis h1{
  opacity:1;transform:none;
  transition:opacity .45s ease .18s,transform .6s var(--ease-back) .18s;
}

/* --- Impacto del warp: sacudida sutil del contenido (2px, 150ms,
   3 sacudidas, solo transform; app.js pone/quita .sacudida) --- */
@keyframes impactoWarp{
  0%,100%{transform:translate(0,0)}
  16%{transform:translate(2px,-2px)}
  40%{transform:translate(-2px,2px)}
  60%{transform:translate(2px,0)}
  80%{transform:translate(-1px,-1px)}
}
main.sacudida{animation:impactoWarp .15s linear 1}

/* --- Estadísticas con premio: pop de la cifra + "+✦" ascendente --- */
@keyframes cifraPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.25)}
  100%{transform:scale(1)}
}
.dato-cifra.cifra-pop{animation:cifraPop .5s var(--ease-back)}
.cifra-premio{
  position:absolute;right:.55rem;top:-.5rem;
  font-family:var(--f-pixel);font-size:.55rem;
  color:var(--oro);
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
  pointer-events:none;
  animation:premioSube .9s var(--ease-out) forwards;
}
@keyframes premioSube{
  0%{opacity:0;transform:translateY(8px) scale(.5)}
  25%{opacity:1;transform:translateY(0) scale(1.15)}
  100%{opacity:0;transform:translateY(-20px) scale(1)}
}

/* --- Logo vivo: mini-sprite de 3 poses al pasar el puntero ---
   steps(1) por tramo = 3 fotogramas discretos, como un sprite. */
@keyframes logoSaluda{
  0%{transform:rotate(0)}
  33%{transform:rotate(-9deg) scale(1.05)}
  66%{transform:rotate(7deg) scale(1.1)}
  100%{transform:rotate(0) scale(1)}
}
.marca:hover #logoMarca,
.marca:focus-visible #logoMarca{
  animation:logoSaluda .4s steps(1);
  filter:drop-shadow(0 0 12px rgba(89,224,255,.7));
}

/* --- Easter egg konami: arcoíris de text-shadow pixel del título
   (app.js añade .arcoiris 3 s; la lluvia dorada vive en el canvas) --- */
@keyframes tituloArcoiris{
  0%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),0 0 34px var(--cian)}
  25%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),0 0 34px var(--violeta)}
  50%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),0 0 34px var(--verde)}
  75%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),0 0 34px var(--magenta)}
  100%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),0 0 34px var(--oro)}
}
#tituloSitio.arcoiris{animation:tituloArcoiris .8s steps(1) infinite}

/* --- Movimiento reducido: TODO lo nuevo de esta sección, apagado.
   (Va al final del archivo para ganar siempre en la cascada.) --- */
@media (prefers-reduced-motion:reduce){
  .tarjeta:hover h3::before,
  .tarjeta:focus-visible h3::before,
  main.sacudida,
  .dato-cifra.cifra-pop,
  .cifra-premio,
  .marca:hover #logoMarca,
  .marca:focus-visible #logoMarca,
  #tituloSitio.arcoiris{animation:none}
  .cifra-premio{display:none}
  .btn-pixel:active,.btn-acceder:active,.px-btn:active{transition:none}
  html.js .titulo-zona[data-reveal] h2,
  html.js .titulo-zona[data-reveal].vis h2{opacity:1;transform:none;transition:none}
  html.js .titulo-zona[data-reveal] .gema,
  html.js .titulo-zona[data-reveal].vis .gema{opacity:1;animation:none}
  html.js .titulo-zona[data-reveal].vis::before,
  html.js .titulo-zona[data-reveal].vis::after{transition:none}
  html.js .heroe-titulo[data-reveal] .sombrero,
  html.js .heroe-titulo[data-reveal].vis .sombrero{opacity:1;animation:none}
  html.js .heroe-titulo[data-reveal] h1,
  html.js .heroe-titulo[data-reveal].vis h1{opacity:1;transform:none;transition:none}
}


/* ----------------------------------------------------------------
   VENTANA DE ACCESO
   Comparte el marco y el fondo con el gate del codigo (#gate), que ya
   tenia la piel pixel del sitio: asi el acceso de la portada se ve
   igual que el de las plataformas sin duplicar una sola sombra.
   ---------------------------------------------------------------- */
#acceso{
  position:fixed;inset:0;z-index:var(--z-modal,120);
  display:grid;place-items:center;visibility:hidden;
}
#acceso.abierto{visibility:visible}
#acceso .gate-fondo{
  position:absolute;inset:0;background:rgba(4,5,26,.82);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .25s;
}
#acceso.abierto .gate-fondo{opacity:1}
#acceso .gate-panel{
  position:relative;width:min(92vw,26rem);
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .25s var(--suave,ease), opacity .25s;
}
#acceso.abierto .gate-panel{transform:none;opacity:1}

.acc-campo{margin:.9rem 0 0;text-align:left}
.acc-campo label{
  display:block;font-family:var(--f-pixel);font-size:.5rem;
  letter-spacing:.08em;color:var(--tinta-tenue);margin-bottom:.35rem;
}
.acc-campo input{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);
  background:var(--panel-2);border:2px solid var(--panel-borde);
  border-radius:0;clip-path:var(--recorte-px);padding:.6rem .7rem;
}
.acc-campo input:focus{outline:2px solid var(--oro);outline-offset:2px}
#acceso .btn-pixel{width:100%;margin-top:1.1rem;justify-content:center}
.acc-pie{margin:.9rem 0 0;font-size:.82rem}
.acc-pie a{color:var(--tinta-tenue)}
.acc-pie a:hover{color:var(--cian)}
#acceso .gate-msg.err{color:#ffb0b0}

/* Los botones "Acceder" y "Salir" de la barra se turnan según haya
   sesión o no. El display:inline-flex de .btn-acceder le ganaba a la
   regla por defecto del navegador y se veían los dos a la vez. */
.btn-acceder[hidden]{display:none}