/* ══════════════════════════════════════════════════════════════════════════════
   retos.css — MÓDULO 5 · "Los retos" · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Historias A4 (calendario con estado derivado) y B2 (bloqueado sin spoiler).

   ANTES ERA UNA REJILLA DE 5 TARJETAS BLANCAS. Ahora es un RAÍL horizontal de
   tarjetas negras grandes (523×353 en 1440), medido del frame "Ajustado" de
   Christian (25/ago). El raíl arranca en el margen de contenido y SANGRA por el
   borde derecho: la tarjeta que se corta es la que dice "sigue habiendo más".
   Esa es toda la afordancia — no hay flechas, hay scroll.

   El mapa isométrico que pedía direccion-visual §5 está MUERTO por decisión de
   Christian (25/ago). Esto ya no es un interino: es la solución.

   POR QUÉ NEGRO
   La página es blanca y el acento es uno solo. Las tarjetas son el único bloque
   de tinta maciza del cuerpo de la home (con el panel del módulo 4): el
   calendario pesa, y pesar es su trabajo.
   ══════════════════════════════════════════════════════════════════════════════ */

.retos {
  position: relative;
  z-index: 1;
  /* Más aire arriba que abajo: encima está la escena a pantalla completa del
     módulo 4, y el raíl necesita despegarse de ella para no leerse como su
     continuación. */
  padding: clamp(336px, 23vh, 256px) var(--margen-hero) clamp(212px, 18vh, 200px);
}

.retos__cabecera { max-width: 1240px; margin: 0 auto clamp(36px, 6vh, 64px); }

.retos__titulo {
  margin: 0 0 12px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.02;
  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;
}

.retos__bajada {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.58;
  color: var(--texto-secundario);
}


/* ── El raíl ───────────────────────────────────────────────────────────────
   Scroll horizontal nativo, no un carrusel de JS: se arrastra con trackpad,
   con rueda en horizontal, con teclado (las tarjetas son focusables por su
   CTA) y con el dedo. Nada que sincronizar y nada que se rompa.

   El truco de la sangría: la lista se saca del contenedor con márgenes
   negativos hasta el borde del viewport, y se le devuelve por dentro el margen
   de contenido como padding. Así la PRIMERA tarjeta queda alineada con el
   título y la ÚLTIMA puede llegar hasta el filo. */
.retos__lista {
  --tarjeta: 523px;
  --hueco: var(--espacio-32);   /* normalizado: era 36 */
  --sangria: max(var(--margen-hero), calc((100vw - 1240px) / 2));

  display: flex;
  gap: var(--hueco);
  /* Aire vertical POR DENTRO del raíl (y el mismo aire restado por fuera para
     no mover el layout): `overflow-x: auto` convierte el raíl en caja de scroll
     y recortaba la card cuando crece al hover — arriba por la subida y la
     escala, abajo por la sombra. */
  margin: -24px calc(-1 * var(--margen-hero)) -44px;
  padding: 24px var(--margen-hero) 48px var(--sangria);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--sangria);
  /* La barra se esconde: el corte de la última tarjeta ya dice que hay más, y
     una barra de scroll dentro del cuerpo de la página ensucia la composición. */
  scrollbar-width: none;
}
.retos__lista::-webkit-scrollbar { display: none; }

/* Un respiro al final: sin esto la última tarjeta se pega al filo y parece
   cortada por un fallo, no por diseño. */
.retos__lista::after {
  content: '';
  flex: none;
  width: calc(var(--sangria) - var(--margen-hero));
}

.reto {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--tarjeta);
  height: 353px;
  padding: var(--espacio-40) var(--espacio-32) var(--espacio-32);   /* normalizado: era 38/32/32 */
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-tinta);
  color: var(--texto-sobre-tinta);
  overflow: hidden;
  scroll-snap-align: start;
}

/* La card abierta ENTERA es el enlace y tiene hover (9/sep): sube un pelo y
   crece. El enlace real sigue siendo el CTA; su ::after se estira sobre la
   card (por eso el CTA ya no es absoluto: si lo fuera, el ::after solo cubriría
   el CTA). */
.reto--abierto {
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.reto--abierto:hover,
.reto--abierto:focus-within {
  /* Sin sombra: la única sombra del sistema es la DURA del botón. Una sombra
     difuminada aquí contradecía al sistema que se extrajo de esta misma home. */
  transform: translateY(-6px) scale(1.02);
}


/* ── Reto abierto (activo o cerrado) ───────────────────────────────────────── */

.reto__indice {
  margin: 0 0 18px;
  font-family: var(--tipografia-pixel);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--texto-sobre-tinta);
}

/* Con sello el título se queda en su mitad; sin él usa la tarjeta entera. */
.reto--abierto:has(.reto__sello) .reto__nombre { max-width: 300px; }

.reto__nombre {
  max-width: 479px;
  margin: 0 0 20px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.34;
  letter-spacing: -.007em;
  color: var(--texto-sobre-tinta);
}

/* Las fechas en display, no en texto: en esta tarjeta el DATO es la fecha. */
.reto__fechas {
  margin: 0;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -.012em;
  color: var(--texto-sobre-tinta-terciario);
}

/* Dos textos que existen para el lector de pantalla pero no se pintan:
   · el ESTADO ("Activo" / "Próximamente" / "Cerrado") — en la tarjeta abierta el
     estado ya lo dicen las fechas, y en la bloqueada lo dice el precinto, que es
     aria-hidden; el texto tiene que llegar igual a quien no lo ve.
   · la HERRAMIENTA — en el frame vive dentro del título; aquí va en la línea de
     máquina ("RETO 1 · GEMINI GEMS"), así que este nodo queda de respaldo. */
/* La píldora "Activo" del frame (9/sep): arriba a la derecha, verde, con punto.
   Solo en el reto activo; en el resto el estado sigue siendo texto oculto. */
.reto--activo .reto__estado {
  position: absolute;
  right: 32px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  margin: 0;
  padding: 0 14px 0 10px;
  border-radius: var(--radio-pildora);
  background: var(--acento-base);
  font-family: var(--tipografia-pixel);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--texto-principal);
  clip-path: none;
  width: auto;
  overflow: visible;
}
.reto--activo .reto__estado::before {
  content: '';
  width: var(--espacio-12);    /* normalizado: era 14 */
  height: var(--espacio-12);
  border-radius: 50%;
  background: var(--superficie-tinta);
}

.reto__estado,
.reto__herramienta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* CTA abajo a la izquierda, empujado por margin-top:auto (la card es columna).
   Estático a propósito: su ::after se estira sobre toda la card. */
.reto__cta {
  position: static;
  align-self: flex-start;
  margin-top: auto;
  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__cta svg { width: 18px; height: 18px; flex: none; transition: transform .22s ease; }
.reto__cta:hover svg,
.reto__cta:focus-visible svg { transform: translateX(4px); }
.reto__cta::after { content: ''; position: absolute; inset: 0; }   /* toda la card */
.reto__cta:focus-visible { outline: none; }
.reto--abierto:focus-within { outline: var(--trazo-foco) solid var(--acento-base); outline-offset: 4px; }

/* Sello del reto: hoy no hay arte (regla 21), así que el hueco no se pinta.
   Cuando llegue el PNG/SVG entra aquí y no se toca nada más. */
.reto__sello {
  position: absolute;
  right: 42px;
  top: 94px;
  width: 141px;
  height: 231px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.reto__sello img { max-width: 100%; height: auto; image-rendering: pixelated; }


/* ── Reto bloqueado: el precinto ───────────────────────────────────────────
   Dos cintas cruzadas en aspa. Del reto bloqueado solo sobreviven el número y
   las fechas (regla 4 / B2): el nombre y la herramienta se ELIMINAN del DOM en
   js/retos.js, no se ocultan. */

/* Bloqueado = gris, no tinta (frame ajustado, 9/sep): el negro queda para lo
   que se puede abrir. Así el raíl dice de lejos cuál es el vivo. */
.reto--bloqueado { background: var(--superficie-bloqueada); }
.reto--bloqueado .reto__fechas {
  font-size: 21px;
  line-height: 24px;
  color: var(--texto-sobre-tinta);
}

.reto__cinta {
  position: absolute;
  left: -22%;
  right: -22%;
  display: flex;
  align-items: center;
  height: 99px;
  background: var(--superficie-cinta);
  overflow: hidden;
  pointer-events: none;
}
.reto__cinta--a { top: 44%; transform: rotate(13deg); }
.reto__cinta--b { top: 61%; transform: rotate(-9.6deg); border-top: var(--trazo-foco) solid var(--borde-fuerte); border-bottom: var(--trazo-foco) solid var(--borde-fuerte); }

.reto__marquee {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  font-family: var(--tipografia-pixel);
  font-size: 56px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-acento-sobre-tinta);   /* verde sobre la cinta = 7.4:1 */
  /* Contenido DUPLICADO: al desplazar media pista el bucle empalma sin salto.
     Solo transform — regla 14.

     Sentido y velocidad, 25/ago: iba hacia la izquierda y a 14s. Ahora corre al
     REVÉS y al doble de lento. Una cinta de precinto no tiene prisa: cuando va
     rápida se lee como una alerta, y esto no alerta de nada — solo dice que
     todavía no toca. */
  animation: cinta-corre 30s linear infinite;
  animation-direction: reverse;
}
.reto__cinta--b .reto__marquee { animation-duration: 38s; animation-direction: normal; }

@keyframes cinta-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.reto:nth-of-type(3) .reto__marquee { animation-delay: -5.4s; }
.reto:nth-of-type(4) .reto__marquee { animation-delay: -12.6s; }
.reto:nth-of-type(5) .reto__marquee { animation-delay: -18.1s; }

/* El estado accesible es texto real; el precinto es aria-hidden. Quien no ve el
   aspa tiene que enterarse igual. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.retos__aviso {
  max-width: 1240px;
  margin: 24px auto 0;
  font-family: var(--tipografia-pixel);
  font-size: 19px;
  letter-spacing: .06em;
  color: var(--texto-terciario);
}


/* ── Responsive ────────────────────────────────────────────────────────────
   El raíl aguanta bien: la tarjeta encoge y sigue habiendo sangría. Bajo 620px
   una tarjeta ocupa casi todo el ancho y el snap se vuelve obligatorio, que es
   lo que se espera de un carrusel en móvil. */

@media (max-width: 1100px) {
  .retos__lista { --tarjeta: 460px; --hueco: 28px; }
  .reto { height: 320px; padding: 32px 28px 28px; }
  .reto__sello { right: 28px; width: 100px; height: 165px; }
}

@media (max-width: 620px) {
  .retos__lista {
    --tarjeta: min(84vw, 400px);
    --hueco: 16px;
    scroll-snap-type: x mandatory;
  }
  .reto { height: 300px; }
  .reto__marquee { font-size: 42px; }
  .reto__cinta { height: 74px; }
  .reto__sello { display: none; }   /* con este ancho el sello pisa el texto */
}

/* Regla 14: sin motion la cinta se queda quieta y sigue diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) {
  .reto__marquee { animation: none; }
  .retos__lista { scroll-snap-type: none; }
}