/* games.indalter.es — la web pública de los juegos de Indalter (src/fabrica/sitio.ts la genera).
   Noche añil con resplandor violeta; el arte de los juegos manda; el sello «GAMES» en coral junto al logotipo blanco. */

@font-face { font-family: "Unbounded"; src: url("/fuentes/unbounded-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; src: url("/fuentes/unbounded-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fuentes/bricolage-latin.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fuentes/bricolage-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4; }

:root {
  --noche: #12102b;
  --relieve: #1c1940;
  --relieve-2: #24205a;
  --violeta: #7c5cff;
  --coral: #ff5a7a;
  --menta: #3fe0c5;
  --blanco: #f6f4ff;
  --suave: #b3aedb;
  --linea: rgba(246, 244, 255, 0.1);
  --sombra: 0 2rem 4rem -1.5rem rgba(4, 2, 20, 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh;
  background:
    radial-gradient(64rem 40rem at 82% -8rem, rgba(124, 92, 255, 0.38), transparent 64%),
    radial-gradient(40rem 30rem at -12% 34rem, rgba(255, 90, 122, 0.12), transparent 60%),
    var(--noche);
  color: var(--blanco);
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 0.6rem; }
h1, h2, h3 { font-family: "Unbounded", system-ui, sans-serif; letter-spacing: -0.02em; margin: 0; }

.pagina { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; }

/* cabecera fija, translúcida */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgba(18, 16, 43, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.cabecera-dentro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.logo {
  display: block; width: 8.4rem; aspect-ratio: 350 / 116; background: var(--blanco);
  -webkit-mask: url("/marca/indalter.png") center / contain no-repeat; mask: url("/marca/indalter.png") center / contain no-repeat;
}
.sello { width: 5.3rem; height: auto; color: var(--coral); transform: rotate(-8deg); }
.menu { display: flex; align-items: center; gap: 1.4rem; font-size: 0.95rem; font-weight: 600; }
.menu > a { text-decoration: none; color: var(--suave); }
.menu > a:hover { color: var(--blanco); }
.idiomas { display: inline-flex; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--linea); border-radius: 999px; }
.idiomas a { padding: 0.2rem 0.55rem; border-radius: 999px; text-decoration: none; color: var(--suave); font-size: 0.8rem; font-weight: 700; }
.idiomas a[aria-current="page"] { background: var(--violeta); color: var(--blanco); }
@media (max-width: 40rem) { .menu > a { display: none; } .logo { width: 7rem; } .sello { width: 4.4rem; } }

/* portada: texto a la izquierda, el juego a la derecha */
.portada { display: grid; gap: 3rem; align-items: center; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
@media (min-width: 56rem) { .portada { grid-template-columns: 1.15fr 1fr; } }
.portada h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.03; max-width: 12ch; }
.portada-texto > p:not(.acciones) { margin: 1.5rem 0 0; max-width: 32rem; font-size: clamp(1.1rem, 1.8vw, 1.25rem); color: var(--suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2.2rem 0 0; }
.boton { display: inline-flex; align-items: center; padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid var(--linea); background: rgba(246, 244, 255, 0.04); }
.boton:hover { background: rgba(246, 244, 255, 0.1); }
.boton.principal { background: var(--coral); border-color: transparent; color: #2b0612; }
.boton.principal:hover { background: #ff7c96; }

/* dos móviles con capturas, girados, con un resplandor detrás */
.escaparate { position: relative; height: clamp(26rem, 48vw, 36rem); }
.escaparate::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.55), transparent); filter: blur(10px); }
.movil { position: absolute; margin: 0; width: clamp(11rem, 21vw, 15.5rem); aspect-ratio: 9 / 16; padding: 0.45rem; border-radius: 2rem; background: #0b0a1d; border: 1px solid rgba(246, 244, 255, 0.14); box-shadow: var(--sombra); }
.movil img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 1.6rem; }
.movil.delante { left: 4%; top: 10%; transform: rotate(-5deg); z-index: 2; }
.movil.atras { right: 0; top: 0; transform: rotate(7deg); }
@media (max-width: 55.99rem) { .escaparate { height: 25rem; } .movil.delante { left: 4%; } .movil.atras { right: 4%; } }
.piezas { position: relative; height: 20rem; }
.piezas span { position: absolute; border-radius: 28%; box-shadow: var(--sombra), inset 0 2px 0 rgba(255, 255, 255, 0.25); }
.piezas span:nth-child(1) { width: 44%; aspect-ratio: 1; left: 10%; top: 18%; background: linear-gradient(145deg, #9b82ff, var(--violeta) 55%, #5a3de0); transform: rotate(-10deg); }
.piezas span:nth-child(2) { width: 32%; aspect-ratio: 1; right: 8%; top: 4%; background: linear-gradient(145deg, #ff8aa1, var(--coral) 55%, #e2395c); transform: rotate(9deg); }
.piezas span:nth-child(3) { width: 24%; aspect-ratio: 1; right: 20%; bottom: 4%; background: linear-gradient(145deg, #85f3e1, var(--menta) 55%, #1fb39b); transform: rotate(-4deg); }

section > h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1.5rem; }

/* próximamente: el cartel del juego, su ficha y una tira de capturas */
.proximos { padding: 0 0 5rem; }
.destacado { background: var(--relieve); border: 1px solid var(--linea); border-radius: 1.75rem; overflow: hidden; box-shadow: var(--sombra); display: grid; }
@media (min-width: 56rem) { .destacado { grid-template-columns: 1fr 1fr; align-items: center; } .destacado .cartel { grid-column: 1 / -1; } .destacado-texto { padding-bottom: 1.6rem; } }
.destacado .cartel { width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; }
.destacado-texto { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.6rem 1.6rem 0; }
.destacado-texto .icono { width: 5.5rem; height: 5.5rem; border-radius: 1.3rem; flex: none; box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.35); }
.destacado h3 { font-size: 1.5rem; font-weight: 700; }
.destacado p { margin: 0.35rem 0 0; color: var(--suave); }
.destacado .aviso { display: inline-block; margin-top: 0.9rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(63, 224, 197, 0.12); color: var(--menta); font-size: 0.9rem; font-weight: 700; }
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; padding: 1.4rem 1.6rem 1.6rem; }
.tira img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 0.9rem; border: 1px solid var(--linea); }

/* los juegos en las tiendas */
.juegos { padding: 0 0 5rem; }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.juego { background: var(--relieve); border: 1px solid var(--linea); border-radius: 1.4rem; padding: 1.25rem; display: grid; grid-template-columns: 5rem 1fr; gap: 0.3rem 1rem; align-items: start; }
.juego img { width: 5rem; height: 5rem; border-radius: 1.15rem; grid-row: span 3; }
.juego h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.juego h3 a { text-decoration: none; }
.juego h3 a:hover { text-decoration: underline; }
.juego p { margin: 0; font-size: 1rem; color: var(--suave); }
.tiendas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem !important; }
.tienda { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.85rem; border-radius: 0.8rem; background: var(--blanco); color: var(--noche); text-decoration: none; }
.tienda svg { width: 1.05rem; height: 1.05rem; }
.tienda:hover { background: #fff; }
.vacio { margin: 0; max-width: 38rem; padding: 1.4rem 1.5rem; border-radius: 1.4rem; background: var(--relieve); border: 1px solid var(--linea); }

/* contacto: un panel con borde de color */
.contacto {
  margin: 0 0 5rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 1.75rem; text-align: center;
  background: linear-gradient(var(--relieve-2), var(--relieve)) padding-box, linear-gradient(120deg, var(--violeta), var(--coral)) border-box;
  border: 2px solid transparent;
}
.contacto h2 { margin: 0 auto; max-width: 22ch; }
.contacto p { margin: 0.8rem auto 1.6rem; color: var(--suave); }
.correo { display: inline-block; font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.6rem); text-decoration: none; padding: 0.7rem 1.4rem; border-radius: 999px; background: var(--blanco); color: var(--noche); }
.correo:hover { background: #fff; }

/* pie */
.pie { border-top: 1px solid var(--linea); }
.pie-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; padding-top: 1.6rem; padding-bottom: 2.4rem; color: var(--suave); font-size: 0.92rem; }
.logo-pie { width: 6rem; background: var(--suave); }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); }

/* movimiento: una entrada orquestada al cargar, algo de vida continua muy lenta y respuestas al puntero.
   Todo dentro de no-preference: con «reducir movimiento» la página queda quieta y entera. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.palabra { display: inline-block; }
.escaparate { perspective: 1400px; }
.destacado, .juego { position: relative; }
.destacado::after, .juego::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: radial-gradient(22rem circle at var(--x, 50%) var(--y, 50%), rgba(124, 92, 255, 0.18), transparent 70%);
}
.destacado:hover::after, .juego:hover::after { opacity: 1; }
.tira img, .juego img { transition: transform 250ms cubic-bezier(.2, .8, .3, 1.2); }
.tira img:hover { transform: translateY(-6px) rotate(-1.5deg); }
.juego:hover img { transform: rotate(-6deg) scale(1.05); }
.aviso::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: var(--menta); vertical-align: 0.08em; }

@media (prefers-reduced-motion: no-preference) {
  /* el sello cae, el titular sube palabra a palabra, luego el texto y los botones, y entran los móviles */
  .sello { animation: estampar 520ms cubic-bezier(.2, .9, .3, 1.25) 900ms both; }
  @keyframes estampar { from { transform: rotate(-20deg) scale(1.6); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
  .palabra { animation: subir 700ms cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 80ms) both; }
  @keyframes subir { from { opacity: 0; transform: translateY(0.55em) rotate(3deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  .portada-texto > p { animation: aparecer 700ms ease 450ms both; }
  .portada-texto > .acciones { animation-delay: 600ms; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(1rem); } }

  .escaparate { animation: entrar 1100ms cubic-bezier(.2, .8, .2, 1) 250ms both; }
  @keyframes entrar { from { opacity: 0; transform: translateX(3rem) scale(0.94); } }
  /* los móviles: flotan y se balancean (translate y rotate, propiedades sueltas) y se inclinan en 3D hacia el puntero
     (transform con --tx/--ty, que pone efectos.js entre -1 y 1); el de atrás va al revés, como si estuviera más lejos */
  .movil.delante { animation: flotar 5s ease-in-out 1.4s infinite; }
  .movil.atras { animation: flotar 6.5s ease-in-out 1.4s infinite reverse; }
  @keyframes flotar { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -26px; rotate: 2.5deg; } }
  .escaparate .movil { transition: transform 450ms cubic-bezier(.2, .8, .2, 1); }
  .movil.delante {
    transform: perspective(900px) translate(calc(var(--tx, 0) * 22px), calc(var(--ty, 0) * 16px))
      rotateX(calc(var(--ty, 0) * -18deg)) rotateY(calc(var(--tx, 0) * 24deg)) rotate(-5deg);
  }
  .movil.atras {
    transform: perspective(900px) translate(calc(var(--tx, 0) * -14px), calc(var(--ty, 0) * -10px))
      rotateX(calc(var(--ty, 0) * 12deg)) rotateY(calc(var(--tx, 0) * -16deg)) rotate(7deg);
  }
  .escaparate .movil:hover { z-index: 3; }
  .escaparate .movil:hover img { scale: 1.03; }
  .movil img { transition: scale 300ms ease; }
  /* reflejo de luz sobre la pantalla, que se desliza con la inclinación */
  .movil::after {
    content: ""; position: absolute; inset: 0.45rem; border-radius: 1.6rem; pointer-events: none; mix-blend-mode: soft-light;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
    background-size: 250% 100%; background-position: calc(50% + var(--tx, 0) * 60%) 0; transition: background-position 450ms ease-out;
  }
  .movil.delante { box-shadow: var(--sombra), 0 0 3rem -0.5rem rgba(124, 92, 255, 0.55); }
  .movil.atras { box-shadow: var(--sombra), 0 0 3rem -0.5rem rgba(255, 90, 122, 0.45); }
  .escaparate::before { animation: latir 5s ease-in-out infinite; }
  @keyframes latir { 50% { transform: scale(1.12); opacity: 0.75; } }

  /* un resplandor de color que se mueve muy despacio por el fondo */
  body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none; width: 46rem; height: 46rem; left: 50%; top: -14rem; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(124, 92, 255, 0.35), rgba(255, 90, 122, 0.22), rgba(63, 224, 197, 0.18), rgba(124, 92, 255, 0.35));
    filter: blur(90px); animation: deriva 26s ease-in-out infinite alternate;
  }
  @keyframes deriva { from { transform: translate(-10%, 0) rotate(0deg); } to { transform: translate(-70%, 12rem) rotate(180deg); } }

  /* el botón principal tiene un brillo que lo cruza de vez en cuando */
  .boton.principal { position: relative; overflow: hidden; }
  .boton.principal::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: brillo 4.5s ease-in-out 2s infinite;
  }
  @keyframes brillo { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(120%) skewX(-20deg); } }

  /* «Muy pronto»: el punto late */
  .aviso::before { animation: pulso 1.8s ease-out infinite; }
  @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(63, 224, 197, 0.7); } 100% { box-shadow: 0 0 0 0.6rem rgba(63, 224, 197, 0); } }

  /* el borde del panel de contacto gira */
  .contacto { background: linear-gradient(var(--relieve-2), var(--relieve)) padding-box, conic-gradient(from var(--giro), var(--violeta), var(--coral), var(--menta), var(--violeta)) border-box; animation: girar 8s linear infinite; }
  @keyframes girar { to { --giro: 360deg; } }

  /* las secciones suben al llegar a ellas (efectos.js pone .visto; sin JS no se esconden) */
  .js .revelar { opacity: 0; transform: translateY(2.5rem); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2, .8, .2, 1); }
  .js .revelar.visto { opacity: 1; transform: none; }
}
.destacado h3 a { text-decoration: none; }
.destacado h3 a:hover { text-decoration: underline; }
.destacado .web { margin-top: 0.7rem; font-weight: 700; }
.destacado .web a { color: var(--blanco); text-underline-offset: 0.25em; }
.destacado + .destacado { margin-top: 1.5rem; }