/* =========================================================
   Centinelas — Páginas de la plataforma
   Base común y piezas que comparten el home, /actividades,
   /juegos y /musica: cabecera de página, tarjetas y los
   botones grandes de la portada.
   Depende de decoraciones.css (tokens) y menu.css.
   ========================================================= */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Un elemento con `hidden` se oculta aunque su clase le dé display
   (botones inline-block, listas grid…); si no, el atributo no hace nada. */
[hidden] { display: none !important; }

.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Logo de la plataforma (portada) ---------- */

/* El PNG de R2 mide 1024x1100 pero el dibujo ocupa solo
   x 61..944, y 360..663 (883x303): el resto es transparente.
   La caja toma la proporción del dibujo y la imagen se agranda y
   se corre dentro para que el dibujo la llene justo.
   El original es color óxido; aquí se pinta en blanco con un
   filtro, que sobre el fondo oscuro se lee mucho mejor. */
.logo-plataforma {
  position: relative;
  width: min(92vw, 640px);
  aspect-ratio: 883 / 303;
  margin: 0 auto;
  overflow: hidden;
}

.logo-plataforma img {
  position: absolute;
  width: calc(100% * 1024 / 883);
  height: auto;
  left: calc(-100% * 61 / 883);
  top: calc(-100% * 360 / 303);
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(107, 26, 247, .35));
}

/* ---------- Botones grandes de la portada ---------- */

.portada__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: clamp(28px, 5vh, 44px) auto 0;
}

.portada__boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid #0A0A05;
  color: #0A0A05;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  transition: transform .25s ease, box-shadow .25s ease;
}

.portada__boton svg { width: 20px; height: 20px; flex: none; }

.portada__boton--actividades { background: var(--c-lima); }
.portada__boton--juegos      { background: var(--c-amarillo); }
.portada__boton--musica      { background: var(--c-azul); }

.portada__boton:hover,
.portada__boton:focus-visible {
  transform: translateY(-3px) rotate(-1.5deg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
}

.portada__boton:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

/* ---------- Cabecera de página interior ---------- */

.pagina {
  min-height: calc(100svh - var(--alto-menu, 0px));
  padding: clamp(48px, 9vh, 96px) clamp(20px, 5vw, 64px) clamp(64px, 10vh, 110px);
}

.pagina__cabecera {
  max-width: 760px;
  margin: 0 auto clamp(36px, 6vh, 60px);
  text-align: center;
}

.pagina__etiqueta {
  display: inline-block;
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: var(--c-lima);
  letter-spacing: .02em;
}

.pagina__titulo {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: 1.05;
  margin: 0;
}

.pagina__titulo .subrayado {
  display: block;
  width: min(60%, 300px);
  height: .16em;
  margin: .2em auto 0;
  color: var(--c-morado-claro);
}

.pagina__intro {
  margin: 18px auto 0;
  max-width: 52ch;
  color: var(--c-texto-suave);
  text-wrap: pretty;
}

/* ---------- Tarjetas (actividades, juegos) ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px));
  justify-content: center;
  gap: clamp(28px, 4vw, 44px);
  max-width: 1200px;
  margin: 0 auto;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--c-superficie);
  border: 2px solid #1c1c26;
  border-radius: 26px;
  padding: 18px 18px 24px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease;
}

.tarjeta:hover { transform: translateY(-4px); border-color: #2c2c3a; }

.tarjeta__media {
  margin: 0 0 20px;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #0A0A05;
  transform: rotate(-1.6deg);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  background: #0A0A05;
}

.tarjeta:hover .tarjeta__media { transform: rotate(0deg); }

.tarjeta__media img {
  display: block;
  width: 100%;
  height: auto;          /* el atributo height="…" no debe ganarle al aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Imágenes de pixel art: sin suavizado al ampliar */
.tarjeta__media--pixel img { image-rendering: pixelated; }

/* La sala del museo es alta (512x1056): se enseña el jardín de abajo */
.tarjeta__museo { object-position: 50% 92%; }

.tarjeta__etiqueta {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: .95rem;
  color: var(--c-lima);
}

.tarjeta__titulo {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  line-height: 1.1;
}

.tarjeta__desc {
  margin: 12px 0 22px;
  color: var(--c-texto-suave);
  font-size: .98rem;
  flex: 1;
}

.tarjeta .boton { align-self: flex-start; }

.tarjetas__pronto {
  margin: clamp(36px, 6vh, 56px) auto 0;
  text-align: center;
  color: var(--c-texto-suave);
  font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tarjeta__media, .portada__boton { transition: none; }
}

/* La ruleta de la tarjeta de /juegos es un SVG, no una foto */
.tarjeta__media--ruleta {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #1c1c2e, #0A0A05 70%);
}

.tarjeta__media--ruleta svg { width: 62%; height: auto; }

.tarjeta:hover .tarjeta__media--ruleta svg { animation: tarjeta-ruleta 1.4s cubic-bezier(.2, .7, .2, 1); }

@keyframes tarjeta-ruleta { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover .tarjeta__media--ruleta svg { animation: none; }
}