@font-face { font-family: 'Fredoka'; font-weight: 500 700; font-display: swap; src: url('/fonts/fredoka.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600 800; font-display: swap; src: url('/fonts/nunito.woff2') format('woff2'); }
:root {
  --bg: #241B4D;
  --surface: #FFF6E5;
  --ink: #2B1E4A;
  --board: #3A2E6E;
  --tile: #4A3D85;
  --text: #FFF6E5;
  --text-soft: #C9BDF2;
  --text-muted: #5E4C88;
  --highlight: #FFE27A;
  --accent: #FF8A3D;
  --accent-shade: #E8692A;
  --accent-2: #4DA8FF;
  --accent-2-shade: #2F86E0;
  --planet-a: #FF8AC8;
  --planet-a-shade: #FF6FB5;
  --planet-c: #B98CFF;
  --planet-c-light: #D6BDFF;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}
/* ── Componente: scrollbar ─────────────────────────────────────────────
   Barra de scroll con la paleta del juego. Se aplica sola al scroll de la
   página; para cualquier otro contenedor con overflow, agregarle la clase
   .scroll-area (ya trae overflow: auto). Colores por variable, así cada
   juego/sección puede pisarlos:
     --scroll-thumb, --scroll-thumb-hover, --scroll-track, --scroll-size
   Chromium y Safari usan los pseudo-elementos ::-webkit-scrollbar (permiten
   una pastilla redondeada con aire alrededor); Firefox, scrollbar-color. */

:root {
  --scroll-thumb: var(--tile);
  --scroll-thumb-hover: var(--text-soft);
  --scroll-track: transparent;
  --scroll-size: 12px;
}

.scroll-area { overflow: auto; overscroll-behavior: contain; }
/* opcional: el contenido se desvanece contra los bordes en vez de cortarse en seco */
.scroll-fade {
  --scroll-fade: 16px;
  mask-image: linear-gradient(transparent, #000 var(--scroll-fade), #000 calc(100% - var(--scroll-fade)), transparent);
}

:root::-webkit-scrollbar,
.scroll-area::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); }
:root::-webkit-scrollbar-track,
.scroll-area::-webkit-scrollbar-track { background: var(--scroll-track); }
:root::-webkit-scrollbar-thumb,
.scroll-area::-webkit-scrollbar-thumb {
  /* el borde transparente + background-clip deja la pastilla más fina que el carril */
  background: var(--scroll-thumb) padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  min-height: 40px;
}
:root::-webkit-scrollbar-thumb:hover,
.scroll-area::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
:root::-webkit-scrollbar-corner,
.scroll-area::-webkit-scrollbar-corner { background: transparent; }

/* Firefox: no tiene los pseudo-elementos; solo color y grosor */
@supports (-moz-appearance: none) {
  :root, .scroll-area { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }
}

/* Estilos compartidos de los sitios de juego. Los colores y las fuentes salen
   de las variables de theme en la config de cada juego (src/games/<id>.ts):
   reestilar un juego no requiere tocar este archivo.
   Regla del kit de Cosmochi: contorno Ink de 4px + sombra plana de 6px, sin blur. */

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

/* Curvas de movimiento: ease-out fuerte para lo que responde al usuario
   (arranca rápido, frena suave) e in-out para lo que se desplaza en pantalla. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  interpolate-size: allow-keywords; /* permite animar a height: auto (FAQ) */
}

h1, h2, .tagline { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

body {
  margin: 0;
  /* App shell: header y footer siempre a la vista; solo <main> scrollea
     (con el componente .scroll-area). */
  height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  /* Cielo: noche con profundidad (más oscuro arriba) y dos nebulosas grandes y
     suaves en lila y mandarina. Sin mosaico: las estrellas van en .sky. */
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 50% at 88% 18%, color-mix(in srgb, var(--tile) 75%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 6% 92%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, #000), var(--bg) 45%, color-mix(in srgb, var(--bg) 88%, var(--tile)));
  color: var(--text);
  font: 700 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }

a { color: var(--highlight); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; border-radius: 6px; }

/* ancho completo para que la barra de scroll quede contra el borde de la ventana;
   el contenido se centra con padding */
main { min-height: 0; padding: 0 max(var(--gutter), calc((100% - var(--shell)) / 2)) 48px; outline: none; }
/* con mouse la barra ocupa lugar: reservarlo para que nada salte; en touch es overlay */
@media (pointer: fine) { main { scrollbar-gutter: stable; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 12px; }

/* placeholders: imposibles de no ver */
mark.ph {
  background: var(--highlight); color: var(--ink);
  padding: 0 4px; border-radius: 4px; outline: 2px dashed var(--ink);
  font-family: ui-monospace, monospace; font-size: 0.85em; font-weight: 700;
  overflow-wrap: anywhere;
}

/* ── Cielo de fondo (render.ts → sky()) ─────────────────────────────── */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sparkle { transform-box: fill-box; transform-origin: center; }
.planet { position: absolute; display: block; }
.planet svg { display: block; width: 100%; height: auto; }
/* asoman desde los bordes, chicos en teléfono; nunca detrás del texto principal */
.planet-ringed { --s: clamp(130px, 20vw, 320px); width: var(--s); right: calc(var(--s) * -0.45); top: 22%; }
.planet-blue { --s: clamp(70px, 9vw, 140px); width: var(--s); right: calc(var(--s) * -0.2); bottom: 120px; }
.planet-moon { --s: clamp(54px, 6vw, 96px); width: var(--s); left: calc(var(--s) * -0.3); top: 58%; }
/* nebulosas: dos manchas enormes y muy tenues que derivan en minutos */
.nebula { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; opacity: 0.55; }
.nebula-1 { left: -30vmax; top: -35vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--tile) 60%, transparent), transparent); }
.nebula-2 { right: -35vmax; bottom: -40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent); }
/* polvo cósmico: lo dibuja sky.js */
.dust { position: absolute; inset: 0; width: 100%; height: 100%; }
/* en teléfono no hay borde libre: el planeta anillado quedaba detrás de los botones */
@media (max-width: 719px) { .planet-ringed { display: none; } }

/* ── Header / footer ─────────────────────────────────────────────── */
/* Header y footer son idénticos en todas las páginas: mismo ancho, mismo alto,
   mismas reglas en todo tamaño. Lo único que cambia es el logo del header,
   que no está en la home (ahí el wordmark grande ya es el logo). */
:root { --shell: 1200px; --gutter: 16px; --top-h: 60px; }
@media (min-width: 720px) { :root { --gutter: 24px; } }
.top, .foot { width: min(100% - 2 * var(--gutter), var(--shell)); margin: 0 auto; }
.top {
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.top-logo { display: block; line-height: 0; }
.top-logo img { width: auto; height: 36px; }
.top-nav { display: flex; gap: 6px; }
.top-nav a, .foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--text); font-family: var(--font-display); font-weight: 600; text-decoration: none;
  border-radius: 22px;
  transition-property: background-color, transform; transition-duration: 160ms; transition-timing-function: var(--ease-out);
}
.top-nav a[aria-current], .foot-nav a[aria-current] { background: var(--board); }
.top-nav a:active, .foot-nav a:active { transform: scale(0.96); }

.foot {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 10px 0 14px; border-top: 2px dashed var(--board);
}
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.studio { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; min-height: 32px; font-size: 0.875rem; color: var(--text-soft); text-decoration: none; }
.foot-nav a { min-height: 32px; font-size: 0.875rem; }
/* teléfono: links en una fila; crédito y © compartiendo la de abajo */
@media (max-width: 719px) {
  .foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 14px; row-gap: 0; }
  .foot-nav { width: 100%; gap: 0; }
  .foot-nav a { padding: 0 7px; font-size: 0.8125rem; }
  .studio { font-size: 0.8125rem; }
}
.studio img { width: 24px; height: 24px; border-radius: 5px; transition: transform 500ms var(--ease-out); }
.studio strong { color: var(--text); }

.copy { margin: 0; color: var(--text-soft); font-size: 0.75rem; white-space: nowrap; }

/* ── Botones ──────────────────────────────────────────────────────── */
.stores { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60px; padding: 6px 32px;
  /* Juntas limpias: el relleno se recorta al padding-box y debajo del borde
     (transparente) se pinta ink. Con un borde ink sobre un fondo claro, los
     antialias de ambos bordes no coinciden y asoma una línea clara en las
     esquinas; así la junta queda ink sobre ink. Mismo truco en tarjetas,
     tiles y placeholders. */
  --fill: var(--accent);
  background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--ink) border-box;
  color: var(--ink); border: 4px solid transparent; border-radius: 32px;
  --shade: var(--accent-shade);
  box-shadow: 0 6px 0 var(--ink), inset 0 -6px 0 var(--shade);
  font: 700 1.375rem/1.1 var(--font-display); text-decoration: none;
  transition-property: transform, box-shadow; transition-duration: 200ms; transition-timing-function: var(--ease-out);
}
.btn-2 { --fill: var(--accent-2); --shade: var(--accent-2-shade); }
.btn-3 { --fill: var(--surface); --shade: #E6D6B8; }
/* Apretar = el botón se hunde en su propia sombra plana. Rápido al bajar,
   y vuelve con la curva normal al soltar. */
a.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink), inset 0 -4px 0 var(--shade); transition-duration: 70ms; }
.btn small { font: 800 0.75rem/1.2 var(--font-body); }
/* link todavía sin URL: borde punteado (no outline, que se comía el espacio entre botones) */
.is-pending { cursor: not-allowed; }
/* el punteado necesita ver el relleno entre trazos: borde ink real */
.btn.is-pending { background: var(--fill); border: 4px dashed var(--ink); }

/* ── Superficies ──────────────────────────────────────────────────── */
.card, .doc {
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--ink) border-box;
  color: var(--ink); border: 4px solid transparent; border-radius: 28px;
  box-shadow: 0 7px 0 var(--ink);
  padding: 24px 20px; margin-top: 16px;
}
.card a, .doc a { color: var(--ink); }
.card a:hover, .doc a:hover { color: var(--text-muted); }
.block { margin-top: 48px; }

.tile {
  display: grid; place-items: center; flex: none;
  width: 104px; height: 104px; border-radius: 24px;
  background: linear-gradient(var(--tile), var(--tile)) padding-box, var(--ink) border-box;
  border: 4px solid transparent; box-shadow: inset 0 -6px 0 var(--board);
}
.tile img { width: 84px; }
.tile-sm { width: 76px; height: 76px; border-radius: 20px; }
.tile-sm img { width: 58px; }

/* placeholders de medios: misma pieza con contorno ink que el resto del kit,
   para que se vean como parte del diseño y no como cajas rotas */
.shot-ph, .video-ph {
  display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center;
  background: linear-gradient(165deg, var(--tile), var(--board)) padding-box, var(--ink) border-box;
  border: 4px solid transparent; box-shadow: 0 6px 0 var(--ink);
  color: var(--text-soft); font-family: var(--font-display); font-weight: 600;
}
.video-ph { border-radius: 24px; }
.shot-ph { position: relative; border-radius: 22px; }
.notch { position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 30%; height: 6px; border-radius: 3px; background: var(--ink); opacity: 0.55; }
.shot-ph img { width: 52%; }
.ph-label { font-size: 0.9375rem; color: var(--text); }
.play {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(var(--accent), var(--accent)) padding-box, var(--ink) border-box;
  color: var(--ink); border: 4px solid transparent; box-shadow: 0 5px 0 var(--ink);
}
.play svg { margin-left: 4px; }

/* ── Home: todo en una pantalla ───────────────────────────────────────
   Grilla de alto completo (header · contenido · footer). En el medio, el
   texto y las tiendas arriba, y el escenario de medios con el espacio que
   sobra. El escenario es un container query: los medios se miden contra él. */
.home main { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }

.hero { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(180px, 1fr); gap: 14px; }
.hero-text { display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; }
.hero-logo { margin: 0; line-height: 0; }
/* el wordmark es 3:1, así que su alto también se acota por el alto de pantalla */
.hero-logo img { width: min(82vw, 420px, 39dvh); }
.tagline { margin: 0 0 10px; font: 600 clamp(1.125rem, 3.4vw, 1.75rem)/1.2 var(--font-display); color: var(--highlight); }
.lede { display: none; margin: 0 0 18px; max-width: 32em; }
.hero .stores { justify-content: center; }
.home .btn { min-height: 54px; padding: 4px 26px; font-size: 1.25rem; }

.stage { min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.stage-tabs { display: flex; justify-content: center; gap: 6px; }
.stage-tabs a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border-radius: 18px; background: var(--board); color: var(--text);
  font: 600 0.9375rem/1 var(--font-display); text-decoration: none;
  transition-property: background-color, color, transform; transition-duration: 200ms; transition-timing-function: var(--ease-out);
}
.stage-tabs a:active { transform: scale(0.96); }
/* Con JS (stage.js): una pastilla se desliza bajo la pestaña activa. */
.stage-tabs { position: relative; isolation: isolate; }
.stage-pill {
  position: absolute; z-index: -1; left: 0; top: 0; height: 100%; width: var(--w, 0);
  transform: translateX(var(--x, 0)); border-radius: 18px; background: var(--surface);
}
.stage.is-live .stage-pill { transition-property: transform, width; transition-duration: 350ms; transition-timing-function: var(--ease-out); }
.stage-tabs.has-pill a { background: transparent; }
.stage-tabs.has-pill a[aria-current] { color: var(--ink); }
.slides {
  container-type: size; min-height: 0; padding-bottom: 10px; /* lugar para la sombra plana */
  display: flex; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; display: grid; place-items: center; scroll-snap-align: center; }
/* Con JS los paneles se apilan en la misma celda y cambian con un fundido:
   el que entra llega desde su lado, el que sale se va más rápido (salida más
   corta y callada que la entrada). Transiciones, no keyframes: si se cambia
   de pestaña a mitad de camino, retoman desde donde están. */
.stage.is-tabs .slides { display: grid; overflow: visible; scroll-snap-type: none; touch-action: pan-y; }
.stage.is-tabs .slide { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.stage.is-tabs .slide:not(.is-active) { opacity: 0; visibility: hidden; filter: blur(6px); }
.stage.is-tabs .slide[data-side="before"] { transform: translateX(-20px) scale(0.98); }
.stage.is-tabs .slide[data-side="after"] { transform: translateX(20px) scale(0.98); }
/* Secuencia, no superposición: el panel que sale se va en 150ms (ease-in,
   acelera al irse) y el que entra arranca recién a los 150ms y se asienta en
   420ms (ease-out). Nunca se ven los dos a la vez. */
.stage.is-live .slide {
  transition-property: opacity, transform, filter, visibility;
  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); transition-delay: 0s;
}
.stage.is-live .slide.is-active { transition-duration: 420ms; transition-timing-function: var(--ease-out); transition-delay: 150ms; }
.slide .video { width: min(100cqw, 100cqh * 16 / 9); }
.slide .shots { display: flex; justify-content: center; }
.slide .shots li { width: min((100cqw - (var(--n) - 1) * 12px) / var(--n), 100cqh * var(--sw) / var(--sh)); }

.video { aspect-ratio: 16 / 9; width: 100%; }

.shots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px;
}
.phone { aspect-ratio: var(--sw) / var(--sh); width: 100%; padding: 8px; }
.phone mark.ph { font-size: 0.6rem; }
.shots .ph-label { font-size: 0.8125rem; }

/* Marco ink de las imágenes. El borde NO va sobre la <img>: con border + radius
   en la propia imagen, el antialias de la foto y el del borde no coinciden y
   asoma una línea clara en las esquinas. Acá el marco es un contenedor con
   fondo ink y la imagen va adentro con un radio 4px menor: cualquier junta
   queda ink sobre ink. */
.frame { display: block; padding: 4px; background: var(--ink); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink); }
.frame img { display: block; width: 100%; height: auto; border-radius: calc(var(--r) - 4px); }
.frame-icon { --r: 32px; width: 148px; }
.frame-feature { --r: 18px; }
.frame-phone { --r: 24px; }
.frame-phone img { aspect-ratio: var(--sw) / var(--sh); object-fit: cover; }

.crew { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.critter { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.critter strong { font: 700 1.25rem/1.1 var(--font-display); }
.critter span:last-child { color: var(--text-muted); font-size: 0.9375rem; }

/* pantallas anchas o apaisadas: texto a la izquierda, escenario a la derecha */
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 48px; }
  .hero-text { justify-items: start; text-align: left; }
  .hero-logo img { width: min(100%, 440px, 45dvh); }
  .hero .stores { justify-content: flex-start; }
  .stage-tabs { justify-content: flex-start; }
  /* el escenario toma la forma del trailer (16:9) y se achica si falta alto */
  .stage { max-height: 100%; }
  .slides { aspect-ratio: 16 / 9; max-height: calc(100dvh - 190px); }
}
/* apaisado bajo (teléfono acostado): todo más compacto para no scrollear */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { gap: 24px; }
  .hero-logo img { width: min(100%, 220px); }
  .tagline { font-size: 1.0625rem; margin-bottom: 8px; }
  .hero .stores { gap: 12px 24px; flex-wrap: nowrap; }
  .home .btn { min-height: 44px; padding: 2px 16px; font-size: 1.0625rem; }
  .slides { max-height: calc(100dvh - 190px); }
}
@media (min-width: 900px) and (min-height: 640px) { .lede { display: block; } }
@media (prefers-reduced-motion: no-preference) { .slides { scroll-behavior: smooth; } }

.lost { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; padding: 24px 0; }
.lost img { width: 140px; }
.lost p { margin: 0 0 20px; color: var(--text-soft); }

/* ── Páginas de texto ─────────────────────────────────────────────── */
.doc { max-width: 760px; margin-inline: auto; font-weight: 600; }
.doc-wide { max-width: none; }
.doc h2 { margin-top: 1.6em; font-size: 1.5rem; }
.doc p, .doc li { max-width: 68ch; }
.doc-meta { color: var(--text-muted); }
.doc .lede { color: var(--ink); }
.doc .opt { border-left: 0; }

.faq details { border-bottom: 2px dashed var(--text-soft); }
.faq summary {
  min-height: 48px; padding: 12px 0; cursor: pointer;
  font: 700 1.125rem/1.3 var(--font-display);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* chevron que gira al abrir */
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 300ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* la respuesta se despliega (navegadores sin ::details-content: abre al instante) */
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition-property: block-size, content-visibility; transition-duration: 300ms;
  transition-timing-function: var(--ease-out); transition-behavior: allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq details p { margin: 0 0 16px; }

.facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.facts dt { color: var(--text-muted); font-weight: 800; padding-top: 10px; }
.facts dd { margin: 0; padding-bottom: 10px; border-bottom: 2px dashed var(--text-soft); }

.logos { display: grid; gap: 16px; }
.logos figure, .feature { margin: 0; }
.logo-dark { background: var(--bg); border-radius: 20px; padding: 20px; }
.logo-dark img { margin-inline: auto; max-width: 360px; width: 100%; }
figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--text-muted); }
.logo-dark figcaption { color: var(--text-soft); text-align: center; }
.logos-dev { margin-top: 16px; grid-template-columns: 1fr 1fr; }
.logos-dev img { width: 96px; margin-inline: auto; }
.logo-light { border-radius: 20px; padding: 20px; border: 2px dashed var(--text-soft); }
.logo-light figcaption { text-align: center; }
.feature { margin-top: 16px; }

.downloads { padding-left: 1.2em; }
.downloads li { padding: 2px 0; }
.downloads .dl { display: inline-block; padding: 8px 0; }
.dl { font-weight: 800; }
.dl.is-pending { outline: 2px dashed var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .card, .doc { padding: 36px 40px; }
  .crew { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .facts { grid-template-columns: 200px 1fr; }
  .facts dt { padding: 10px 0; border-bottom: 2px dashed var(--text-soft); }
  .facts dd { padding: 10px 0; }
  .logos { grid-template-columns: 1fr 1fr auto; align-items: start; }
  .foot { grid-template-columns: 1fr auto; justify-items: start; text-align: left; }
  .foot-nav { justify-content: flex-start; }
  .copy { grid-column: 1 / -1; }
}

/* Hover solo donde hay puntero de verdad: en touch el :hover queda pegado. */
@media (hover: hover) and (pointer: fine) {
  .top-nav a:hover, .foot-nav a:hover { background: var(--board); }
  a.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink), inset 0 -6px 0 var(--shade); }
  a.btn:hover:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink), inset 0 -4px 0 var(--shade); }
  .stage-tabs:not(.has-pill) a:hover { background: var(--tile); }
  .stage-tabs.has-pill a:hover:not([aria-current]) { background: transparent; color: var(--highlight); }
  .studio:hover img { transform: rotate(90deg); } /* el mismo guiño que el logo en cuatrope.dev */
  .studio:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}

/* ── Movimiento de entrada (todo apagado con reduce-motion) ─────────── */
@media (prefers-reduced-motion: no-preference) {
  /* la home aparece por partes: wordmark, tagline, texto, tiendas, escenario */
  .home .hero-text > *, .home .stage { animation: rise 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
  .home .hero-text > :nth-child(2) { --i: 1; }
  .home .hero-text > :nth-child(3) { --i: 2; }
  .home .hero-text > :nth-child(4) { --i: 3; }
  .home .stage { --i: 4; }
  .doc { animation: rise 500ms var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

  /* cielo: tres grupos de estrellas titilan desfasados, los destellos laten,
     los planetas derivan y cada tanto cruza el Comet */
  .tw { animation: twinkle 4s ease-in-out infinite alternate; animation-delay: var(--t, 0s); }
  .tw2 { animation-duration: 5.5s; animation-delay: calc(var(--t, 0s) - 2s); }
  .tw3 { animation-duration: 7s; animation-delay: calc(var(--t, 0s) - 4.5s); }
  @keyframes twinkle { to { opacity: 0.3; } }
  .sparkle { animation: sparkle 10s ease-in-out infinite; animation-delay: calc(var(--t, 0s) + var(--d)); }
  @keyframes sparkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.3) rotate(20deg); } 90% { transform: scale(0.9) rotate(0); } }
  .planet { animation: float 14s ease-in-out infinite alternate; animation-delay: var(--t, 0s); }
  .planet-blue { animation-duration: 11s; animation-delay: calc(var(--t, 0s) - 3s); }
  .planet-moon { animation-duration: 17s; animation-delay: calc(var(--t, 0s) - 6s); }
  .nebula { animation: nebula 120s ease-in-out infinite alternate; animation-delay: var(--t, 0s); }
  .nebula-2 { animation-duration: 150s; animation-delay: calc(var(--t, 0s) - 40s); }
  @keyframes nebula { to { transform: translate(8vmax, 5vmax) scale(1.1); } }
  @keyframes float { to { transform: translateY(-12px) rotate(4deg); } }

  /* 404: la criatura flota a la deriva */
  .lost img { animation: drift 6s ease-in-out infinite; }
  @keyframes drift { 50% { transform: translateY(-10px) rotate(-5deg); } }

  /* navegación entre páginas: fundido corto, header y footer quietos */
  @view-transition { navigation: auto; }
  .top { view-transition-name: top; }
  .top-logo { view-transition-name: top-logo; } /* entra/sale sola; el resto del header queda quieto */
  .foot { view-transition-name: foot; }
  .sky { view-transition-name: sky; }
  ::view-transition-old(sky) { display: none; }
  ::view-transition-new(sky) { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .stage-tabs a, .top-nav a, .foot-nav a, .studio img, .faq summary::after { transition: none; }
  .faq details::details-content { transition: none; }
  .stage .slide { transition: none !important; }
  .stage.is-tabs .slide[data-side] { transform: none; filter: none; }
}