/* =========================================================================
   MITO Studios · hoja de estilos
   -------------------------------------------------------------------------
   Paleta sacada de los propios archivos del juego:
     · ámbar  #DC9050  — el gato del icono (color dominante de las capturas)
     · crema  #FBF4E9  — la manta
     · noche  #0B1B2B  — el fondo del icono, y donde vive el logo cromado
   El contraste viene de la luz y la profundidad, no de saturar el color.
   ========================================================================= */

:root {
  /* ── noche: cabecera, héroe, pie, galería ── */
  --noche-900: #06121C;
  --noche-800: #0B1B2B;
  --noche-700: #0E2236;
  --noche-600: #15314A;
  --noche-500: #1E4061;

  /* ── cálidos: el contenido ── */
  --crema:     #FBF4E9;
  --crema-2:   #F6EDDF;
  --arena:     #EFE3CF;
  --arena-2:   #E3D3B9;

  /* ── acento, uno solo ── */
  --ambar:        #DC9050;
  --ambar-oscuro: #B06A33;
  --ambar-claro:  #EFB07A;

  /* ── texto ── */
  --tinta:        #16293A;
  --tinta-media:  #44596B;
  --tinta-suave:  #6B7D8C;
  --claro:        #FFF6E9;
  --claro-media:  #B9CBDA;
  --claro-suave:  #8AA2B6;

  /* ── métrica ── */
  --ancho: 1180px;
  --radio: 18px;
  --radio-l: 28px;

  /* ── sombras ── */
  --sombra-s: 0 2px 8px rgba(8, 20, 32, .08);
  --sombra-m: 0 10px 30px -8px rgba(8, 20, 32, .18);
  --sombra-l: 0 30px 70px -20px rgba(6, 18, 28, .45);

  --transicion: 420ms cubic-bezier(.22, .68, 0, 1);
}

/* =========================================================================
   Base
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* el 3D del héroe no debe generar scroll lateral */
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 900;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--ambar-oscuro); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ambar); }

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 6px;
}

/* El enlace para saltar al contenido: invisible hasta que se tabula */
.saltar {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  background: var(--ambar);
  color: #1A1006;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top 180ms ease;
}
.saltar:focus { top: 16px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 720px) { .contenedor { padding-inline: 32px; } }

.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   Tipos de sección
   ========================================================================= */

.seccion { padding: clamp(4rem, 9vw, 7.5rem) 0; }

.seccion--noche {
  background:
    radial-gradient(120% 85% at 50% 0%, var(--noche-700) 0%, var(--noche-800) 46%, var(--noche-900) 100%);
  color: var(--claro);
  position: relative;
  overflow: hidden;
}
.seccion--noche h2 { color: var(--claro); }
.seccion--noche p  { color: var(--claro-media); }

.seccion--arena { background: var(--arena); }

/* El borde ondulado entre crema y noche, como la manta de las capturas */
.onda { display: block; width: 100%; height: clamp(34px, 5vw, 72px); }
.onda path { fill: var(--crema); }
.onda--invertida path { fill: var(--noche-900); }

.etiqueta {
  display: inline-flex;
  /* arriba y no centrado: si el texto pasa a dos líneas en móvil, el guion
     tiene que quedarse junto a la primera, no flotando en medio */
  align-items: flex-start;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
  margin-bottom: 1rem;
}
.seccion--noche .etiqueta { color: var(--ambar-claro); }
.etiqueta::before {
  content: "";
  flex: none;
  width: 26px; height: 2px;
  margin-top: .62em;
  background: currentColor;
  border-radius: 2px;
  opacity: .65;
}

.entradilla {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  color: var(--tinta-media);
  max-width: 46ch;
}
.seccion--noche .entradilla { color: var(--claro-media); }

/* =========================================================================
   Botones
   ========================================================================= */

.boton {
  --fondo: var(--ambar);
  --texto: #1C1206;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  box-shadow: 0 8px 22px -8px rgba(176, 106, 51, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform var(--transicion), box-shadow var(--transicion), background 220ms ease;
}
.boton:hover {
  background: var(--ambar-claro);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(176, 106, 51, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: var(--texto);
}
.boton:active { transform: translateY(0); }

.boton--fantasma {
  --fondo: transparent;
  --texto: var(--claro);
  box-shadow: inset 0 0 0 1.5px rgba(255, 246, 233, .3);
}
.boton--fantasma:hover {
  --fondo: rgba(255, 246, 233, .08);
  color: var(--claro);
  box-shadow: inset 0 0 0 1.5px rgba(255, 246, 233, .55);
}

.boton__icono { width: 20px; height: 20px; flex: none; }

.botonera { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* =========================================================================
   Cabecera
   ========================================================================= */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 18, 28, .72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255, 246, 233, .07);
  transition: background 300ms ease, border-color 300ms ease;
}
.cabecera[data-pegada="si"] {
  background: rgba(6, 18, 28, .93);
  border-bottom-color: rgba(255, 246, 233, .12);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--claro);
  font-weight: 900;
  letter-spacing: -.01em;
  margin-right: auto;
}
.marca img {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: none;
}
.marca span { font-size: 1.02rem; }
.marca:hover { color: var(--claro); }

.nav { display: none; align-items: center; gap: 1.6rem; }
@media (min-width: 860px) { .nav { display: flex; } }

.nav a {
  color: var(--claro-media);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  position: relative;
  padding: .3rem 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--ambar);
  border-radius: 2px;
  transition: right var(--transicion);
}
.nav a:hover { color: var(--claro); }
.nav a:hover::after { right: 0; }

/* =========================================================================
   Menú desplegable de Juegos
   -------------------------------------------------------------------------
   Los juegos van aquí dentro y NO como pestañas sueltas: con una pestaña por
   juego, la cabecera revienta en cuanto haya cinco. Así entran veinte.
   ========================================================================= */

.menu { position: relative; }

.menu__boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--claro-media);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  position: relative;
}
.menu__boton::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--ambar);
  border-radius: 2px;
  transition: right var(--transicion);
}
.menu__boton:hover { color: var(--claro); }
.menu__boton:hover::after,
.menu[data-abierto="si"] .menu__boton::after { right: 0; }
.menu[data-abierto="si"] .menu__boton { color: var(--claro); }

.menu__flecha {
  width: 13px; height: 13px;
  transition: transform var(--transicion);
}
.menu[data-abierto="si"] .menu__flecha { transform: rotate(180deg); }

.menu__panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: max-content;
  min-width: 290px;
  max-width: 340px;
  padding: .5rem;
  border-radius: 20px;
  background: linear-gradient(170deg, #12293E, var(--noche-900));
  box-shadow: 0 30px 60px -18px rgba(3, 10, 18, .85),
              inset 0 0 0 1px rgba(255, 246, 233, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(.22, .68, 0, 1), visibility 220ms;
}
.menu[data-abierto="si"] .menu__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* puente invisible para que el ratón pueda bajar del botón al panel */
.menu__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18px;
  height: 18px;
}

/* una fila por juego */
.menu__juego {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem;
  border-radius: 13px;
  text-decoration: none;
  color: var(--claro);
  transition: background 180ms ease;
}
.menu__juego::after { content: none; }
.menu__juego:hover { background: rgba(255, 246, 233, .09); color: var(--claro); }
.menu__juego img {
  width: 44px; height: 44px;
  border-radius: 13px;
  flex: none;
  box-shadow: 0 6px 14px -6px rgba(3, 10, 18, .9);
}
.menu__juego b { display: block; font-size: .95rem; font-weight: 800; line-height: 1.3; }
.menu__juego small {
  display: block;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--claro-suave);
  font-weight: 400;
  margin-top: .1rem;
}

.menu__todos {
  display: block;
  margin-top: .3rem;
  padding: .7rem;
  border-top: 1px solid rgba(255, 246, 233, .1);
  font-size: .86rem;
  font-weight: 800;
  color: var(--ambar-claro);
  text-decoration: none;
  text-align: center;
}
.menu__todos::after { content: none; }
.menu__todos:hover { color: var(--ambar-claro); background: rgba(255, 246, 233, .06); border-radius: 0 0 13px 13px; }

/* =========================================================================
   Cabecera en móvil: la misma navegación, abierta con el botón de tres rayas
   ========================================================================= */

.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 246, 233, .07);
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  height: 2px;
  background: var(--claro);
  border-radius: 2px;
  transition: transform 280ms cubic-bezier(.22, .68, 0, 1), opacity 180ms ease;
}
.cabecera[data-movil="si"] .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecera[data-movil="si"] .hamburguesa span:nth-child(2) { opacity: 0; }
.cabecera[data-movil="si"] .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 860px) { .hamburguesa { display: none; } }

@media (max-width: 859px) {
  .nav {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    padding: .8rem 16px 1.3rem;
    background: var(--noche-900);
    border-bottom: 1px solid rgba(255, 246, 233, .12);
    box-shadow: 0 24px 40px -20px rgba(3, 10, 18, .9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 220ms ease, transform 280ms cubic-bezier(.22, .68, 0, 1), visibility 220ms;
  }
  .cabecera[data-movil="si"] .nav { opacity: 1; visibility: visible; transform: none; }

  .nav > a {
    display: block;
    padding: .75rem .65rem;
    font-size: 1rem;
  }
  .nav > a::after { content: none; }

  .menu { margin-bottom: .4rem; }
  .menu__boton { width: 100%; justify-content: space-between; padding: .75rem .65rem; font-size: 1rem; }
  .menu__boton::after { content: none; }

  /* en móvil el panel no flota: empuja el contenido hacia abajo */
  .menu__panel {
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    transform: none;
    box-shadow: none;
    background: rgba(255, 246, 233, .04);
    margin-top: .3rem;
    display: none;
  }
  .menu[data-abierto="si"] .menu__panel { display: block; transform: none; }
  .menu__panel::before { content: none; }
}

.idioma {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(255, 246, 233, .22);
  font-size: .8rem;
  font-weight: 800;
}
.idioma a {
  padding: .36rem .72rem;
  color: var(--claro-suave);
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.idioma a:hover { background: rgba(255, 246, 233, .1); color: var(--claro); }
.idioma a[aria-current="true"] { background: var(--ambar); color: #1C1206; }

/* =========================================================================
   Héroe · la escena 3D
   ========================================================================= */

.heroe {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(135% 100% at 72% 18%, var(--noche-600) 0%, var(--noche-800) 42%, var(--noche-900) 100%);
  color: var(--claro);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
}

/* polvo de estrellas muy tenue, puro CSS */
.heroe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255, 246, 233, .5) 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 74% 14%, rgba(255, 246, 233, .38) 0, transparent 100%),
    radial-gradient(1.6px 1.6px at 42% 68%, rgba(255, 246, 233, .3) 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 54%, rgba(255, 246, 233, .34) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 8% 76%, rgba(255, 246, 233, .26) 0, transparent 100%),
    radial-gradient(1.1px 1.1px at 60% 86%, rgba(255, 246, 233, .3) 0, transparent 100%);
  pointer-events: none;
}

.heroe__rejilla {
  display: grid;
  gap: clamp(2.5rem, 5vw, 2rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (min-width: 940px) {
  .heroe__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 3rem; }
}

.heroe h1 { color: var(--claro); margin-bottom: 1.1rem; }
.heroe h1 em {
  font-style: normal;
  color: var(--ambar-claro);
  /* el degradado sobre el texto hace que la palabra clave respire luz */
  background: linear-gradient(100deg, var(--ambar-claro), var(--ambar) 60%, #F6C79A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heroe__texto > p {
  color: var(--claro-media);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  max-width: 44ch;
  margin-bottom: 1.8rem;
}

.heroe__pie {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: .9rem;
  color: var(--claro-suave);
  font-weight: 700;
}
.heroe__pie span { display: inline-flex; align-items: center; gap: .45rem; }
.heroe__pie svg { width: 16px; height: 16px; flex: none; color: var(--ambar-claro); }

/* ── La escena ─────────────────────────────────────────────── */

.escena {
  perspective: 1500px;
  perspective-origin: 50% 46%;
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(70vw, 460px);
  /* la escena es decorativa: no debe capturar el puntero */
  pointer-events: none;
}

.escena__mundo {
  position: relative;
  width: min(84vw, 420px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  /* --rx y --ry las escribe js/web.js desde el puntero */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 500ms cubic-bezier(.22, .68, 0, 1);
}

/* la tarjeta del icono, flotando al frente */
.tarjeta-icono {
  position: absolute;
  inset: 22%;
  transform-style: preserve-3d;
  transform: translateZ(70px);
  animation: flotar 9s ease-in-out infinite;
}
.tarjeta-icono img {
  width: 100%;
  border-radius: 24%;
  box-shadow:
    0 2px 2px rgba(6, 18, 28, .5),
    0 18px 30px -10px rgba(6, 18, 28, .75),
    0 50px 80px -30px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* brillo especular que se mueve con el puntero */
.tarjeta-icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24%;
  background: linear-gradient(
      var(--luz, 120deg),
      rgba(255, 255, 255, .38) 0%,
      rgba(255, 255, 255, .05) 34%,
      transparent 58%);
  mix-blend-mode: screen;
  opacity: .75;
  pointer-events: none;
}
/* halo cálido detrás */
.tarjeta-icono::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 144, 80, .34) 0%, transparent 68%);
  transform: translateZ(-50px);
  filter: blur(22px);
  pointer-events: none;
}

/* las fichas del puzle, a distintas profundidades */
.ficha {
  position: absolute;
  aspect-ratio: 1;          /* sin esto la ficha mide 0 de alto y solo se ve la oreja */
  border-radius: 22%;
  transform-style: preserve-3d;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .3),
    inset 0 -3px 6px rgba(0, 0, 0, .14),
    0 12px 26px -10px rgba(6, 18, 28, .7);
}
/* Los colores están muestreados de la captura real del juego, no elegidos
   a ojo: el gato naranja va de #F5AA6D a #C97F3F, y el «gris» en realidad
   es un topo cálido (#CAC0B7). Nada de grises azulados. */
.ficha--ambar { --c1: #F5AA6D; --c2: #C97F3F; }
.ficha--gris  { --c1: #D3CAC1; --c2: #A79A8E; }
.ficha--arena { --c1: #D9CDBA; --c2: #A99C87; }

/* Las fichas del fondo no pueden llevar el color real: un topo claro al
   fondo sigue leyéndose como algo cercano y la profundidad se rompe. Se
   oscurecen hacia el azul del fondo, que es lo que hace el aire. */
.ficha--lejos.ficha--ambar { --c1: #7A6450; --c2: #4A4138; }
.ficha--lejos.ficha--gris  { --c1: #6E7482; --c2: #434C5A; }
.ficha--lejos.ficha--arena { --c1: #6B6B6E; --c2: #414751; }
.ficha--lejos { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }

/* Cada ficha: tamaño, sitio, profundidad y su propia deriva.
   Enmarcan la tarjeta del icono en vez de salpicar la escena, y las del
   fondo van borrosas y apagadas: así la profundidad se ve de verdad. */
.ficha--1 { width: 30%; left:  -6%; top:  6%; transform: translateZ(-150px) rotate(-14deg); opacity: .9; filter: blur(2.8px); animation: derivar-a 13s ease-in-out infinite; }
.ficha--2 { width: 24%; left:  76%; top: -6%; transform: translateZ(-205px) rotate(12deg);  opacity: .8; filter: blur(4px);   animation: derivar-b 17s ease-in-out infinite; }
.ficha--3 { width: 34%; left:  66%; top: 60%; transform: translateZ(-95px)  rotate(9deg);   opacity: .9; filter: blur(2px);   animation: derivar-a 15s ease-in-out infinite reverse; }
.ficha--4 { width: 27%; left:   0%; top: 64%; transform: translateZ(-35px)  rotate(-8deg);  opacity: .82;                       animation: derivar-b 11s ease-in-out infinite; }
.ficha--5 { width: 20%; left:  38%; top: -16%; transform: translateZ(15px)  rotate(16deg);  opacity: .72;                       animation: derivar-a 9s  ease-in-out infinite; }
.ficha--6 { width: 18%; left:  88%; top: 30%; transform: translateZ(45px)   rotate(-18deg); opacity: .9;                        animation: derivar-b 12s ease-in-out infinite reverse; }
.ficha--7 { width: 22%; left: -20%; top: 36%; transform: translateZ(30px)   rotate(7deg);   opacity: .72;                       animation: derivar-a 14s ease-in-out infinite; }

@keyframes flotar {
  0%, 100% { transform: translateZ(70px) translateY(0)      rotate(0deg); }
  50%      { transform: translateZ(70px) translateY(-14px)  rotate(-1.2deg); }
}
@keyframes derivar-a {
  0%, 100% { translate: 0 0;      rotate: 0deg; }
  50%      { translate: 10px -20px; rotate: 7deg; }
}
@keyframes derivar-b {
  0%, 100% { translate: 0 0;        rotate: 0deg; }
  50%      { translate: -14px 16px; rotate: -9deg; }
}

/* =========================================================================
   Juegos · la rejilla que crece con el catálogo
   ========================================================================= */

.juegos__rejilla {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .juegos__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .juegos__rejilla { grid-template-columns: repeat(3, 1fr); } }

/* La tarjeta de un juego. Se inclina en 3D al pasar por encima y el icono
   se despega de la tarjeta: la profundidad la da translateZ, no una sombra. */
.juego {
  --inclina: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.7rem;
  border-radius: var(--radio-l);
  background: linear-gradient(165deg, #FFFCF6, var(--crema-2));
  box-shadow: var(--sombra-m), inset 0 0 0 1px rgba(22, 41, 58, .06);
  text-decoration: none;
  color: inherit;
  transform-style: preserve-3d;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.juego:hover, .juego:focus-visible {
  color: inherit;
  transform: translateY(-6px) rotateX(3deg) rotateY(-3deg);
  box-shadow: 0 34px 60px -24px rgba(8, 20, 32, .34), inset 0 0 0 1px rgba(22, 41, 58, .09);
}

.juego__icono {
  width: 84px; height: 84px;
  border-radius: 22%;
  margin-bottom: 1.1rem;
  box-shadow: 0 10px 22px -8px rgba(8, 20, 32, .5);
  transform: translateZ(26px);
  transition: transform var(--transicion);
}
.juego:hover .juego__icono { transform: translateZ(46px) scale(1.04); }

.juego__nombre { font-size: 1.22rem; font-weight: 900; letter-spacing: -.015em; }
.juego__claim  { color: var(--tinta-media); font-size: .97rem; margin: .35rem 0 1.1rem; }

.juego__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .9rem;
  color: var(--ambar-oscuro);
}
.juego__meta svg { width: 16px; height: 16px; transition: transform var(--transicion); }
.juego:hover .juego__meta svg { transform: translateX(5px); }

.insignia {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--arena);
  color: var(--tinta-media);
}

/* El hueco del próximo juego: se ve que hay sitio, sin prometer nada */
.juego--proximo {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2.6rem 1.7rem;
  background: none;
  box-shadow: none;
  border: 2px dashed var(--arena-2);
  color: var(--tinta-suave);
  cursor: default;
}
.juego--proximo:hover { transform: none; box-shadow: none; }
.juego--proximo p { font-size: .95rem; max-width: 22ch; margin: .6rem auto 0; }
.juego--proximo .marco {
  width: 56px; height: 56px;
  border-radius: 18%;
  border: 2px dashed var(--arena-2);
  display: grid; place-items: center;
  color: var(--arena-2);
}
.juego--proximo .marco svg { width: 24px; height: 24px; }

/* =========================================================================
   Snoozy Cats · lo que lo hace distinto
   ========================================================================= */

.rasgos {
  display: grid;
  gap: 1.3rem;
  margin-top: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .rasgos { grid-template-columns: repeat(3, 1fr); } }

.rasgo {
  padding: 1.6rem;
  border-radius: var(--radio);
  background: rgba(255, 246, 233, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 233, .1);
  transition: background var(--transicion), transform var(--transicion);
}
.rasgo:hover { background: rgba(255, 246, 233, .09); transform: translateY(-4px); }

.rasgo__cifra {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ambar-claro);
  margin-bottom: .6rem;
}
.rasgo h3 { color: var(--claro); margin-bottom: .4rem; }
.rasgo p  { color: var(--claro-suave); font-size: .97rem; }

/* ── Galería: los móviles en abanico 3D ───────────────────── */

.galeria {
  margin-top: 3.4rem;
  perspective: 1700px;
  perspective-origin: 50% 50%;
}

.galeria__fila {
  display: flex;
  gap: clamp(.6rem, 1.6vw, 1.3rem);
  /* OJO: aquí no puede ir `center`. En un contenedor que desborda, centrar
     empuja el primer elemento fuera por la izquierda y deja de poderse
     alcanzar deslizando. Se centra solo cuando ya caben todos. */
  justify-content: flex-start;
  align-items: center;
  transform-style: preserve-3d;
  padding: 1.6rem 0;
  /* En estrecho se desliza en lugar de amontonarse. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.galeria__fila::-webkit-scrollbar { display: none; }

/* En ancho caben los cinco, y entonces el recorte del contenedor estorba:
   cortaría el móvil que se adelanta al pasar por encima. */
@media (min-width: 900px) {
  .galeria__fila { overflow: visible; scroll-snap-type: none; justify-content: center; }
}

.movil {
  flex: none;
  width: clamp(124px, 15vw, 172px);
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: center;
  transform-style: preserve-3d;
  box-shadow:
    0 2px 2px rgba(6, 18, 28, .4),
    0 22px 44px -18px rgba(6, 18, 28, .85),
    inset 0 0 0 1px rgba(255, 246, 233, .14);
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);

  /* El abanico. Cada móvil trae su giro, su profundidad y su desplazamiento
     en el HTML (--giro, --z, --x, --esc), no por `nth-child`: así el abanico
     sale bien con tres capturas, con cinco o con las que haga falta, y
     añadir o quitar una no obliga a tocar el CSS. */
  transform:
    rotateY(var(--giro, 0deg))
    translateZ(var(--z, 0px))
    translateX(var(--x, 0px))
    scale(var(--esc, 1));
  z-index: var(--capa, 1);
}
.movil img { width: 100%; display: block; }

/* al pasar por encima, ese móvil se pone de frente y los demás se apartan */
.galeria__fila:hover .movil { filter: saturate(.85) brightness(.82); }
.galeria__fila .movil:hover {
  transform: rotateY(0deg) translateZ(70px) scale(1.07);
  filter: none;
  z-index: 5;
  box-shadow: 0 2px 2px rgba(6, 18, 28, .4), 0 40px 70px -22px rgba(6, 18, 28, .95),
              inset 0 0 0 1px rgba(255, 246, 233, .22);
}

.galeria__nota {
  text-align: center;
  font-size: .85rem;
  color: var(--claro-suave);
  margin-top: 1rem;
}

/* =========================================================================
   Cómo se juega · la manta de 8×8 que se completa al bajar
   ========================================================================= */

.como__rejilla {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .como__rejilla { grid-template-columns: .95fr 1fr; } }

.pasos { counter-reset: paso; margin: 2rem 0 0; padding: 0; list-style: none; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: 1.5rem;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -2px;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--arena);
  color: var(--ambar-oscuro);
  font-weight: 900;
  font-size: .95rem;
}
.pasos h3 { margin-bottom: .2rem; }
.pasos p { color: var(--tinta-media); font-size: .98rem; }

/* La manta */
.manta-marco {
  perspective: 1100px;
  display: grid;
  place-items: center;
}
.manta {
  --lado: min(76vw, 400px);
  width: var(--lado);
  aspect-ratio: 1;
  padding: 3.2%;
  border-radius: 22px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2.4%;
  background: linear-gradient(160deg, #F7EEDF, var(--arena));
  box-shadow: var(--sombra-m), inset 0 0 0 2px rgba(255, 255, 255, .5);
  transform: rotateX(16deg) rotateZ(-3deg);
  transform-style: preserve-3d;
}

.celda {
  border-radius: 20%;
  background: rgba(22, 41, 58, .055);
  transform-style: preserve-3d;
}

/* una celda ocupada por un gato */
.celda[data-gato] {
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .4), 0 3px 6px -2px rgba(8, 20, 32, .3);
  /* entran cayendo desde arriba y desde el fondo */
  opacity: 0;
  transform: translate3d(0, -42px, -60px) rotateX(-40deg);
  transition: opacity 420ms ease, transform 620ms cubic-bezier(.2, .9, .2, 1);
  transition-delay: var(--retardo, 0ms);
}
.celda[data-gato="ambar"] { --c1: #F5AA6D; --c2: #C97F3F; }
.celda[data-gato="gris"]  { --c1: #D3CAC1; --c2: #A79A8E; }

.manta[data-fase="puesto"] .celda[data-gato],
.manta[data-fase="limpiando"] .celda[data-gato],
.manta[data-fase="limpio"] .celda[data-gato] {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

/* la fila que se completa: se ilumina y sale despegándose hacia ti */
.manta[data-fase="limpiando"] .celda[data-fila="4"] {
  animation: despertar 900ms cubic-bezier(.3, .8, .2, 1) forwards;
  animation-delay: calc(var(--col, 0) * 55ms);
}
@keyframes despertar {
  0%   { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
  34%  { transform: translate3d(0, -8px, 46px) scale(1.1); filter: brightness(1.55) saturate(1.2); }
  100% { transform: translate3d(0, -34px, 120px) scale(.55); filter: brightness(1.8); opacity: 0; }
}

.manta__aviso {
  margin-top: 1.4rem;
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  color: var(--ambar-oscuro);
  min-height: 1.5em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.manta__aviso[data-ver="si"] { opacity: 1; transform: translateY(0); }

/* =========================================================================
   El estudio
   ========================================================================= */

.estudio__rejilla {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .estudio__rejilla { grid-template-columns: .8fr 1fr; } }

.estudio__sello {
  justify-self: center;
  width: min(62vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 42% 34%, var(--noche-600), var(--noche-900) 72%);
  box-shadow: var(--sombra-l), inset 0 0 0 1px rgba(255, 246, 233, .14);
  animation: respirar 7s ease-in-out infinite;
}
.estudio__sello img { width: 76%; border-radius: 50%; }

@keyframes respirar {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.015); }
}

.estudio__texto p { color: var(--tinta-media); max-width: 52ch; }
.estudio__texto p strong { color: var(--tinta); font-weight: 800; }

.contacto {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: .97rem;
}
.contacto div { display: grid; gap: .1rem; }
.contacto dt {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.contacto dd { margin: 0; font-weight: 700; }

/* =========================================================================
   Pie
   ========================================================================= */

.pie {
  background: var(--noche-900);
  color: var(--claro-suave);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: .94rem;
}
.pie__rejilla {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 246, 233, .08);
}
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }

.pie h2 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-media); margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pie a { color: var(--claro-suave); text-decoration: none; }
.pie a:hover { color: var(--ambar-claro); text-decoration: underline; text-underline-offset: 3px; }
.pie__legal {
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  justify-content: space-between;
  font-size: .86rem;
  color: #65798A;
}

/* =========================================================================
   Páginas de texto (política de privacidad)
   ========================================================================= */

.documento { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem); }
.documento .contenedor { max-width: 760px; }
.documento h1 { margin-bottom: .6rem; }
.documento .fecha { color: var(--tinta-suave); font-weight: 700; font-size: .92rem; margin-bottom: 2.6rem; }
.documento h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 2.6rem 0 .8rem; }
.documento h3 { font-size: 1.1rem; margin: 1.8rem 0 .5rem; }
.documento p, .documento li { color: var(--tinta-media); }
.documento ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin: 0 0 1.2rem; }
.documento .destacado {
  padding: 1.3rem 1.5rem;
  border-radius: var(--radio);
  background: var(--crema-2);
  box-shadow: inset 0 0 0 1px rgba(22, 41, 58, .07);
  margin: 1.6rem 0;
}
.documento .destacado p:last-child { margin-bottom: 0; }
.documento table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.documento th, .documento td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--arena); vertical-align: top; }
.documento th { font-weight: 900; color: var(--tinta); }
.documento code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--arena);
  padding: .12em .4em;
  border-radius: 5px;
}

/* =========================================================================
   Aparición al bajar
   ========================================================================= */

[data-aparece] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--retardo, 0ms);
}
[data-aparece][data-visto="si"] { opacity: 1; transform: none; }

/* =========================================================================
   Quien no quiere movimiento, no lo tiene
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-aparece] { opacity: 1; transform: none; }
  .escena__mundo { transform: none; }
  .celda[data-gato] { opacity: 1; transform: none; }
  .galeria__fila .movil { transform: none !important; }
  .manta { transform: none; }
}