/* ══════════════════════════════════════════════════════════════════════════════
   hero.css — MÓDULO 1 · Home D "Collage + píxel"
   ──────────────────────────────────────────────────────────────────────────────
   Tres capas superpuestas, en este orden de lectura:
     1. LIENZO   → la retícula de celdas (canvas, css/base.css + js/grid-celdas.js)
     2. MÁQUINA  → cinta pixelada, labels VT323 y el display que se materializa
                   por dither (máscaras Bayer 4x4).
     3. MANO     → stickers SVG rotados FUERA de la retícula, garabatos y la
                   anotación manuscrita. Desobedecen el grid a propósito.
   Regla 14: todo lo que se mueve lo hace con transform/opacity. Nada anima layout.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ─── Máscaras dither · matriz Bayer 4x4 ──────────────────────────────────────
   Un tile = 4x4 celdillas. Se aplica a 24px (una celda del lienzo) o a 48px
   (dos celdas) en el display XXL, para que el píxel del titular rime con la
   retícula del fondo en vez de ser un patrón cualquiera.
   Umbrales: n1 = 4/16 encendidas · n2 = 8/16 · n3 = 12/16 · luego sólido.  */
:root {
  --dither-1: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20fill='%23000'%20d='M0%200h6v6H0zM12%200h6v6h-6zM0%2012h6v6H0zM12%2012h6v6h-6z'/%3E%3C/svg%3E");
  --dither-2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20fill='%23000'%20d='M0%200h6v6H0zM12%200h6v6h-6zM0%2012h6v6H0zM12%2012h6v6h-6zM6%206h6v6H6zM18%206h6v6h-6zM6%2018h6v6H6zM18%2018h6v6h-6z'/%3E%3C/svg%3E");
  --dither-3: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Cpath%20fill='%23000'%20d='M0%200h6v6H0zM12%200h6v6h-6zM0%2012h6v6H0zM12%2012h6v6h-6zM6%206h6v6H6zM18%206h6v6h-6zM6%2018h6v6H6zM18%2018h6v6h-6zM6%200h6v6H6zM18%200h6v6h-6zM6%2012h6v6H6zM18%2012h6v6h-6z'/%3E%3C/svg%3E");

  --margen-hero: clamp(24px, 6vw, 96px);

  /* La card del reto asoma por el borde inferior del hero. Las dos medidas
     viven aquí porque las necesita TAMBIÉN el módulo 3: su padding superior
     tiene que librar lo que la card sobresale, o se pisan.
     --card-alto se deriva del ancho por la proporción del frame (541 × 379). */
  --card-ancho: clamp(320px, 37.6vw, 541px);
  --card-alto:  calc(var(--card-ancho) * 0.7005);
  --card-asoma: clamp(96px, 16vh, 150px);   /* lo que se ve DENTRO del hero */
}


/* ═══ Contenedor ═══════════════════════════════════════════════════════════ */

/* Los paddings no son decorativos: con el bloque centrado verticalmente, esta
   pareja (120 arriba / 179 abajo sobre 900px) es la que hace que el kicker caiga
   en y=190 como en V04. El extra de abajo también deja sitio a la card. */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* +53px arriba respecto de V04: en el frame ajustado (25/ago) todo el bloque
     del hero baja, y la card asoma esos mismos 53px menos. */
  padding: clamp(110px, 19.2vh, 173px) var(--margen-hero) clamp(118px, 20.9vh, 188px);
  /* ⚠️ NADA DE `overflow: hidden` AQUÍ. Lo tuvo hasta el 25/ago para que los
     stickers no desbordaran la página, y de paso RECORTABA LA CARD por el
     borde inferior: la card se veía cortada en seco en el fold en vez de
     asomar entera. El recorte de los stickers se hace ahora en .hero__objetos,
     que es quien lo necesitaba. */
  text-align: center;        /* V04: toda la columna va centrada */
}

.hero__contenido {
  position: relative;
  z-index: 2;                /* por encima de los stickers decorativos */
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}


/* ═══ MÓDULO nav ═══════════════════════════════════════════════════════════
   Voz máquina (VT323) para el chrome del sitio; la voz humana es del contenido.

   FIJA (frame ajustado, 9/sep). La placa blanca al 50% detrás del menú es la
   pista: una placa translúcida solo tiene sentido si debajo va pasando la
   página. Medidas del frame: placa en (10, 27) de 621 × 57, enlaces a 40 del
   borde de la placa; botón "Participar" en (1206, 27). */

.nav {
  position: fixed;
  z-index: 30;
  top: 27px;
  left: 10px;
  right: 27px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;          /* el hueco entre menú y botón no tapa nada */
}
.nav > * { pointer-events: auto; }

.nav__menu {
  display: flex;
  align-items: baseline;
  gap: 39px;
  flex-wrap: wrap;
  padding: 16px 40px;
  background: var(--superficie-placa);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.nav__cta { flex: none; }
/* Acciones a la derecha (4/oct): "Mi perfil" sobre una placa como la del menú, y el botón. */
.nav__acciones { display: flex; align-items: flex-start; gap: var(--espacio-16); }
.nav__perfil {
  display: inline-flex;
  align-items: center;
  height: 57px;
  padding: 0 var(--espacio-24);
  background: var(--superficie-placa);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--tipografia-pixel);
  font-size: clamp(19px, 1.74vw, 25px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--texto-principal);
  box-shadow: inset 0 -0.14em 0 0 transparent;
  transition: box-shadow .16s ease;
}
.nav__perfil:hover, .nav__perfil[aria-current="page"] { box-shadow: inset 0 -0.14em 0 0 var(--acento-base); }
.nav__perfil:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 4px; }

.nav__link {
  font-family: var(--tipografia-pixel);
  font-size: clamp(19px, 1.74vw, 25px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-principal);
  /* El subrayado al pasar es un bloque, no una línea: píxel, no enlace de texto. */
  box-shadow: inset 0 -0.14em 0 0 transparent;
  transition: box-shadow .16s ease;
}
.nav__link:hover { box-shadow: inset 0 -0.14em 0 0 var(--acento-base); }
.nav__link:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 4px; }


.hero__kicker {
  margin: 0 0 clamp(24px, 4.6vh, 41px);
  font-family: var(--tipografia-pixel);
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: .1em;   /* normalizado a Pixel/Rótulo (era .12em) */
  text-transform: uppercase;
  /* 64% y no menos: por debajo de ahí el kicker baja de 4.5:1 sobre blanco y
     se cae de AA (regla 13). */
  color: var(--texto-terciario);
}


/* ═══ Capa MÁQUINA · display XXL que se materializa por dither ═════════════ */

.hero__display {
  margin: 0 0 clamp(14px, 2.1vh, 19px);
  font-family: var(--tipografia-display);      /* Archivo Black — candidato B */
  /* Archivo Black solo existe en Regular. Sin esto, el h1 hereda bold y el
     navegador la engorda sintéticamente: se emborrona y deja de coincidir con
     lo que renderiza Figma. */
  font-weight: 400;
  /* El tope lo manda la línea más larga ("Más curiosidad."): a más de ~7.7vw
     rompe en dos y el display deja de leerse como una sola imagen. */
  /* Tope en 110,88px, la medida de 1440: por encima "MÁS CURIOSIDAD." ya no
     cabe en la columna de 1140 y se parte en tres líneas. */
  font-size: clamp(2.5rem, 7.7vw, 6.93rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--texto-principal);
}

.linea { position: relative; display: block; }

/* Capa sólida = el texto real. Es la única que lee un lector de pantalla y la
   única que sobrevive si el JS no carga: por eso arranca visible. */
.linea__solida { display: block; }

/* Capas dither = clones enmascarados, apilados encima. Decorativas. */
.linea__capa {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-size: 48px 48px;   /* 2 celdas del lienzo → píxel de 12px */
          mask-size: 48px 48px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  will-change: transform, opacity;
}
.linea__capa[data-capa="1"] { -webkit-mask-image: var(--dither-1); mask-image: var(--dither-1); color: color-mix(in srgb, var(--texto-principal) 22%, transparent); }
.linea__capa[data-capa="2"] { -webkit-mask-image: var(--dither-2); mask-image: var(--dither-2); color: color-mix(in srgb, var(--texto-principal) 42%, transparent); }
.linea__capa[data-capa="3"] { -webkit-mask-image: var(--dither-3); mask-image: var(--dither-3); color: color-mix(in srgb, var(--texto-principal) 72%, transparent); }
/* Chispa verde: el acento aparece SOLO en el último stagger y se va. Regla 12. */
.linea__capa[data-capa="v"] { -webkit-mask-image: var(--dither-1); mask-image: var(--dither-1); color: var(--acento-base); }


/* ═══ Texto de entrada ═════════════════════════════════════════════════════ */

.hero__entrada {
  max-width: 887px;
  margin: 0 auto clamp(34px, 7vh, 63px);
  font-size: clamp(1rem, 1.32vw, 1.1875rem);   /* normalizado a Texto/Lectura: 19/30 (era 19.2/29.76) */
  line-height: 1.58;
  color: var(--texto-secundario);
}
.hero__entrada b { font-weight: 600; color: var(--texto-principal); }


/* ═══ Acciones ═════════════════════════════════════════════════════════════ */

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;   /* V04 */
  gap: 18px 37px;
}

/* CTA principal: bloque de tinta con sombra dura verde (sin blur = píxel).
   El hover mueve cara y sombra con transform — no se anima box-shadow. */
.cta {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--acento-base);
  transform: translate(var(--sombra-dura-desplazamiento), var(--sombra-dura-desplazamiento));
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.cta__cara {
  position: relative;
  display: block;
  padding: var(--espacio-16) var(--espacio-32);   /* normalizado: era 15/30/14 → 49px de alto; ahora 52 */
  background: var(--superficie-tinta);
  color: var(--texto-sobre-tinta);
  font-family: var(--tipografia-texto);
  font-weight: 600;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  letter-spacing: .01em;
}
.cta:hover  { transform: translate(var(--sombra-dura-hover), var(--sombra-dura-hover)); }
.cta:hover::before { transform: translate(var(--sombra-dura-hover), var(--sombra-dura-hover)); }
.cta:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 5px; }

/* CTA secundario: link con subrayado GARABATEADO (SVG, no border-bottom). */
.cta-sec {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  color: var(--texto-principal);
  font-weight: 600;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  text-decoration: none;
}
.cta-sec__raya {
  position: absolute;
  left: -4px;
  right: -6px;
  bottom: 0;
  height: 10px;
  overflow: visible;
  color: var(--acento-base);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.cta-sec:hover .cta-sec__raya { transform: scaleX(1.06) translateY(1px); }
.cta-sec:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 5px; }


/* ═══ Capa MANO · anotación manuscrita ═════════════════════════════════════ */



/* ═══ Capa MANO · stickers pixel-art ═══════════════════════════════════════
   V04 sustituye los garabatos SVG por pixel-art: rayos, corazón y cursor, en
   negro con la sombra verde desplazada dentro del propio PNG. Siguen siendo
   "la mano": van rotados y en posiciones que NO se alinean con la retícula.

   El parallax lo mueve el padre (--mx/--my desde js/hero.js); cada pieza tiene
   su --prof y su --rot. El flotar inerte va en el mismo nodo vía animación,
   así que --rot entra en el keyframe (ver @keyframes flotar).             */

/* El recorte vive aquí, no en el hero: así los stickers siguen sin desbordar la
   página y la card puede salirse entera por abajo. */
.hero__objetos {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.objeto {
  position: absolute;
  display: block;
  width: var(--ancho);
  height: auto;
  rotate: var(--rot, 0deg);
  translate: calc(var(--mx, 0) * var(--prof) * 1px) calc(var(--my, 0) * var(--prof) * 1px);
  animation: flotar var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}
/* `translate` lo escribe el parallax y `rotate` es fijo: la animación solo toca
   el eje Y del keyframe, así que ninguna de las tres propiedades pelea. */
@keyframes flotar {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -13px; }
}

/* Si el PNG todavía no está, el slot no deja un icono roto en medio del hero. */
.objeto:not([src]), .objeto[src=""] { display: none; }

/* Los PNG vienen exportados YA ROTADOS: su tamaño natural es la caja envolvente
   que ocupan en V04, no la pieza recta. Por eso aquí --rot va a 0 — rotarlos otra
   vez los giraba dos veces (el corazón salía boca abajo). left/top son la esquina
   de esa caja, tomada de V04 (referencia 1440×900) y pasada a % para que escale.
   Si algún día se reexportan sin rotar, hay que devolver los ángulos: rayos
   -20.4deg, corazón -175.6deg, cursor -142.29deg. */
.objeto--rayos   { left: -3.83%; top: 7.20%;  --ancho: clamp(150px, 19.24vw, 320px); --rot: 0deg; --prof: 44; --dur: 8.2s; }
/* La espada (18/sep, sustituye al corazón) llegó exportada SIN girar: 212px de pieza
   recta. En el frame ajustado va girada 8° y su caja envolvente (239) arranca en
   (1164, 154); aquí left/top son los de la pieza recta, centrada en esa caja. */
.objeto--espada  { left: 81.77%; top: 18.61%; --ancho: clamp(110px, 14.72vw, 240px); --rot: 8deg; --prof: -34; --dur: 6.8s; --retardo: -2.1s; }
.objeto--cursor  { left: 14.72%; top: 64.44%; --ancho: clamp(120px, 14.93vw, 248px); --rot: 0deg; --prof: 62; --dur: 5.9s; --retardo: -3.4s; }


/* ═══ Card del reto — asoma por abajo ══════════════════════════════════════
   Teaser de la ficha del reto (historia A5): se ve el borde superior y se corta
   con el viewport. Negro sólido (no es "fondo de sección": es un objeto sobre
   el lienzo).

   REHECHA CON EL FRAME AJUSTADO (25/ago). Antes era "Reto 1. GEMA" en VT323
   gigante con dos líneas de máquina debajo. Ahora tiene la misma anatomía que
   la tarjeta activa del módulo 5 —número de máquina, título en display, rango
   de fechas, CTA— a mayor tamaño. Que las dos cards del sitio se lean igual es
   la mitad del valor del cambio.

   Con ella murió la etiqueta corta "GEMA", que era copy del diseño sin campo en
   retos.json. Y con ella murió el countdown: ver el aviso en index.html. */

.reto-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  /* Anclada por ARRIBA, no por abajo. Con `bottom: -X%` el trozo que asomaba
     dentro del hero dependía del alto del viewport: en una pantalla alta la
     card se iba tan abajo que no se veía ni un pixel de ella. Con `top` lo que
     se fija es justo lo que tiene que ser fijo — cuánto asoma— y el resto cae
     por debajo del fold, entero y sin cortar. */
  top: calc(100% - var(--card-asoma));
  width: var(--card-ancho);
  aspect-ratio: 541 / 379;
  /* ⚠️ EL PADDING NO PUEDE IR EN %.
     La card está en `position: absolute`, y un padding en porcentaje se calcula
     contra el ANCHO DEL BLOQUE CONTENEDOR — que aquí es el hero, no la card.
     `8%` daban 115px (8% de 1440) en vez de 43 (8% de 541), y el texto salía
     empujado hacia el centro mientras el CTA —que sí es hijo posicionado de la
     card— se quedaba en su sitio. Los dos no se alineaban.
     Con calc sobre --card-ancho el porcentaje es del ancho que toca: en 541 da
     46 / 32 / 43, que son las medidas del frame. */
  padding: calc(var(--card-ancho) * .085)
           calc(var(--card-ancho) * .06)
           0
           calc(var(--card-ancho) * .08);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-tinta);
  display: flex;
  flex-direction: column;
  transform: translateX(-50%) rotate(3deg) scale(var(--zoom, 1));
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
/* Toda la card es el enlace (::after del CTA estirado) y tiene hover (9/sep). */
.reto-card:hover,
.reto-card:focus-within { --zoom: 1.03; }

/* Número en voz máquina, como el "RETO 1" de las tarjetas del módulo 5. */
.reto-card__numero {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-family: var(--tipografia-pixel);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.15;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--texto-sobre-tinta-terciario);
}

.reto-card__titulo {
  position: relative;
  z-index: 1;
  max-width: 89%;
}
/* Con sello, el título se queda en su mitad: si no, la última palabra se mete
   debajo de la gema. Sin sello recupera el ancho entero. */
.reto-card:has(.reto-card__sello) .reto-card__titulo {
  max-width: 58%;
  margin: 0 0 18px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.34;
  letter-spacing: -.007em;
  color: var(--texto-sobre-tinta);
}

.reto-card__cierre {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--tipografia-pixel);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--texto-sobre-tinta);
}
.reto-card__cierre:empty { display: none; }

/* El CTA vive abajo a la izquierda, alineado con la columna de texto. Queda por
   debajo del corte del viewport en el hero: se descubre al hacer el primer
   scroll, que es justo cuando deja de ser un teaser. */
.reto-card__cta {
  position: static;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: calc(var(--card-alto) * .09);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tipografia-texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--texto-sobre-tinta);
  text-decoration: none;
}
.reto-card__cta svg { width: 18px; height: 18px; flex: none; transition: transform .22s ease; }
.reto-card__cta:hover svg,
.reto-card__cta:focus-visible svg { transform: translateX(4px); }
.reto-card__cta::after { content: ''; position: absolute; inset: 0; }
.reto-card__cta:focus-visible { outline: none; }
.reto-card:focus-within { outline: var(--trazo-foco) solid var(--acento-base); outline-offset: 4px; }

/* El sello del reto se corre a la derecha: la columna de texto necesita el
   flanco izquierdo libre. Medidas del frame ajustado (174×271 sobre 541×379).
   Estos % SÍ valen: son de un hijo posicionado, y su bloque contenedor es la
   card — al revés que el padding de arriba. */
.reto-card__sello {
  position: absolute;
  left: 61%;
  top: 18%;
  width: 32%;
  height: auto;
  rotate: 3.62deg;
  image-rendering: pixelated;   /* pixel-art: sin suavizar al escalar */
}
.reto-card__sello:not([src]), .reto-card__sello[src=""] { display: none; }


/* ═══ Responsive ═══════════════════════════════════════════════════════════
   Regla 16: mobile primero en CONTENIDO. Los juguetes de cursor no se
   inventan un equivalente forzado: el grid responde al dedo (pointermove) y
   los stickers se quedan quietos.                                          */

@media (max-width: 1100px) {
  .nav { top: 24px; left: 24px; right: 24px; }
  .nav__menu { gap: 26px; }
}

@media (max-width: 900px) {
  /* Con "Mi perfil" en el header, el menú no cabe en una línea en tablet: compacto. */
  .nav__menu { gap: 20px; padding: 14px 20px; }
  .nav__link, .nav__perfil { font-size: 18px; }
  .nav__perfil { height: 53px; padding: 0 16px; }
  /* La nota deja de caber al margen: vuelve al flujo, bajo los CTA. */
  .objeto--cursor { display: none; }
  .objeto--rayos   { left: -6%;   top: 6%;  --ancho: 152px; }
  .objeto--espada  { left: 74%;   top: 10%; --ancho: 136px; }
  /* Asoma menos que en desktop: la card tiene que enseñar las tres líneas de
     la mini-ficha (A5) por encima del corte, no solo el título. */
  .reto-card { --card-ancho: clamp(280px, 56vw, 430px); }
}

/* V04 no define la nav en móvil. Solución mínima y honesta hasta que exista el
   módulo de navegación: una sola fila, el menú desplaza en horizontal con un
   degradado que lo insinúa, y "Participar" queda anclado. Sin hamburguesa
   improvisada — eso es una decisión de componente, no del hero. */
@media (max-width: 760px) {
  .nav { top: 12px; left: 10px; right: 10px; gap: 12px; }
  .nav__cta .cta__cara { padding: 11px 16px 10px; font-size: .9rem; }
  .nav__acciones { gap: var(--espacio-8); }
  .nav__perfil { height: auto; padding: 12px; font-size: 17px; white-space: nowrap; }
  .nav__menu {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
            mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .nav__menu::-webkit-scrollbar { display: none; }
  .nav__link { white-space: nowrap; }
}

@media (max-width: 620px) {
  .nav__menu { gap: 18px; }
  .nav__link { font-size: 17px; }
  .hero__display { font-size: clamp(2.2rem, 7.7vw, 7.4rem); }
  .linea__capa { -webkit-mask-size: 32px 32px; mask-size: 32px 32px; }
  .hero__entrada { font-size: .98rem; }
  .hero__kicker { font-size: 15px; letter-spacing: .09em; }
  /* En 375px la única banda libre está entre la nav (y=41) y el kicker
     (y=122): los stickers se meten ahí y no pisan texto. */
  .objeto--rayos   { --ancho: 84px; left: -5%;  top: 5.2%; }
  .objeto--espada  { --ancho: 88px; left: 75%;   top: 5%; }

  .reto-card__cta { font-size: 15px; }
  /* El sello se retira: a este ancho no cabe sin taparle las fechas a la
     mini-ficha, y entre decoración e información gana la información. Vuelve
     a partir de tablet. */
  .reto-card__sello { display: none; }
}

/* Muy estrecho: los dos CTA no caben en fila sin que el garabato se salga. */
@media (max-width: 480px) {
  .hero__acciones { flex-direction: column; align-items: center; gap: 20px; }
}

/* Sin hover (touch): sin parallax, los objetos ya no reaccionan al cursor. */
@media (hover: none) {
  .objeto { translate: none; }
}


/* ═══ prefers-reduced-motion — regla 14 ════════════════════════════════════
   Variante estática digna: el titular ya está sólido (JS no lo desmonta),
   las capas dither se ocultan, nada flota. El collage se lee igual.        */
@media (prefers-reduced-motion: reduce) {
  .linea__capa { display: none; }
  .objeto      { translate: none; animation: none; }
}