/* ══════════════════════════════════════════════════════════════════════════════
   premios.css — MÓDULO 6 · "Qué se gana" · Home D
   ──────────────────────────────────────────────────────────────────────────────
   REESCRITO EL 25/ago. Hasta esa fecha el módulo listaba las cinco insignias con
   su significado, los tres niveles, los títulos finales y los reconocimientos —
   cuatro bloques y 1.314px de alto. Christian decidió que todo eso vive en la
   PÁGINA DE RANKING, y que en la home queda el gancho: un titular centrado, el
   enlace al ranking, y las insignias flotando alrededor como juguete.

   LAS INSIGNIAS SON CÍRCULOS, A PROPÓSITO
   El arte definitivo no existe (ficha B4 de PENDIENTES.md). Un círculo pelado se
   lee como lo que es —un hueco reservado— y no finge un diseño que nadie aprobó.
   Cuando lleguen los emblemas entran dentro de .insignia-fisica y no se toca
   ninguna otra regla.

   GRAVEDAD CERO
   En el footer las fichas CAÍAN y se apilaban. Aquí no pueden: el frame las
   reparte alrededor del texto y con gravedad se derrumbarían todas al suelo del
   módulo. Flotan a la deriva, chocan y se arrastran (ver js/premios.js).
   ══════════════════════════════════════════════════════════════════════════════ */

.premios {
  position: relative;
  z-index: 1;
  padding: clamp(136px, 24vh, 252px) var(--margen-hero) clamp(136px, 24vh, 252px);
  overflow: hidden;          /* las insignias no se escapan del módulo */
}

/* ── El texto ──────────────────────────────────────────────────────────────
   Centrado y estrecho: es un cartel, no un bloque de lectura. Va POR ENCIMA de
   las insignias — se puede leer aunque una pase por detrás. */
.premios__interior {
  position: relative;
  z-index: 2;
  max-width: 690px;
  margin: 0 auto;
  text-align: center;
  pointer-events: none;      /* el arrastre de las insignias pasa por debajo… */
}
.premios__interior a { pointer-events: auto; }   /* …menos en el enlace */

.premios__titulo {
  margin: 0 0 22px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.013em;
  color: var(--texto-principal);
  /* En el frame ajustado TODOS los títulos de módulo van en caja alta:
     es la voz del cartel, y rima con el display del hero. */
  text-transform: uppercase;
}

/* La promesa, en display pequeño: es un grito corto, no una bajada. */
.premios__sub {
  margin: 0 0 18px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--texto-principal);
}

.premios__texto {
  max-width: 681px;
  margin: 0 auto clamp(26px, 4vh, 40px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-secundario);
}


/* ── El juguete ────────────────────────────────────────────────────────────
   Ocupa el módulo entero por detrás del texto. Las posiciones de arranque las
   pone js/premios.js en porcentajes, calcados del frame ajustado. */
.premios__juguete {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: default;
}
.premios__juguete[data-fisica] { cursor: grab; }
.premios__juguete[data-fisica]:active { cursor: grabbing; }

/* Dos nodos por insignia, a propósito:
   · .insignia-fisica es la CAJA que mueve y gira el motor (transform).
   · .insignia-fisica__arte es el PNG —disco, aro y pixel-art, ya redondo— y es
     lo que ESCALA al aparecer. Si escala y traslación fueran del mismo nodo, la
     escala multiplicaría también la traslación y la insignia se iría de sitio
     mientras brota. */
.insignia-fisica {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tamano, 178px);
  height: var(--tamano, 178px);
  will-change: transform;
}
.insignia-fisica__arte {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;   /* si no, el navegador se lleva la imagen y mata el arrastre */
  /* Sale de cero: brota. js/premios.js la lleva a 1 con rebote, en cadena. */
  scale: 0;
  transform-origin: 50% 50%;
}
/* Sin JS (o sin GSAP) no hay chain: se ven desde el principio. */
.premios--sin-brote .insignia-fisica__arte { scale: 1; }

/* Reposo (sin física): quietas donde las dejó el diseño. Es un estado
   previsto —motion reducido, touch, sin matter.js— no un fallo. */
.premios__juguete:not([data-fisica]) .insignia-fisica {
  transform: translate(-50%, -50%);
}


/* ── Responsive ────────────────────────────────────────────────────────────
   Bajo 900px el reparto del frame no vale: con el texto a todo el ancho, las
   insignias de los flancos caen ENCIMA del titular y lo tapan. Se quedan dos,
   encogidas, y suben al aire que deja el padding superior — flanqueando el
   titular en vez de pisarlo. Debajo del CTA no caben: entre el botón y el borde
   del módulo hay 74px y el círculo mide 96.

   Bajo 900px tampoco hay física (`hover: none` → js/premios.js no arranca), así
   que las posiciones las manda otra vez el layout y estos `left/top` ganan. */

/* Entre 900 y 1240 el módulo se estrecha pero el texto sigue midiendo 690: los
   emblemas grandes empiezan a pisarlo. Encogen manteniendo la proporción. */
@media (min-width: 901px) and (max-width: 1240px) {
  .insignia-fisica { --tamano: 148px !important; }
  .insignia-fisica:nth-child(1),
  .insignia-fisica:nth-child(4) { --tamano: 212px !important; }
}

@media (max-width: 900px) {
  .premios { padding-block: clamp(72px, 12vh, 120px); }
  .insignia-fisica { --tamano: 116px !important; }
  .insignia-fisica:nth-child(1) { left: 15% !important; top: 7% !important; }
  .insignia-fisica:nth-child(2) { left: 85% !important; top: 7% !important; }
  .insignia-fisica:nth-child(n+3) { display: none; }
}

/* Regla 14: sin motion no hay física ni brote — se quedan donde las puso el
   diseño, y se ven desde el principio. */
@media (prefers-reduced-motion: reduce) {
  .insignia-fisica { transform: translate(-50%, -50%) !important; }
  .insignia-fisica__arte { scale: 1 !important; }
}