/* ══════════════════════════════════════════════════════════════════════════════
   ficha.css — PÁGINA · Reto (reto.html) · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Arquitectura §2.3 "la ficha": header del reto · objetivo + reto · entregable
   mínimo · modalidad y evidencia · criterios · lo que ya entregaron · CTA
   persistente "Subir resultado" · retos anteriores.

   Comparte con la Home: nav, .cta y .cta-sec (css/hero.css), el pie (css/pie.css)
   y los tokens. Nada de aquí es un componente nuevo del sistema: son
   composiciones de página sobre los contratos que ya existen.
   ══════════════════════════════════════════════════════════════════════════════ */

.pagina {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(136px, 20vh, 184px) var(--margen-hero) clamp(96px, 12vh, 136px);

  /* ── Escala de la página interior (3/oct, referencias Mobbin) ──
     Seis tamaños y basta. En Inter: cuerpo 17–19, cuerpo menor 16, meta 13–14.
     En VT323, solo cifras y estados: cifra 44, dato 24. Título de página (56) y
     de sección (29) van en Archivo Black. Lo intermedio en VT323 (17–22 px para
     rótulos y ayudas) se retira de las interiores: ahí va Inter en terciario. */
  --tipo-cuerpo: clamp(1rem, 1.32vw, 1.1875rem);
  --tipo-cuerpo-menor: 1rem;
  --tipo-meta: .875rem;
  --tipo-meta-menor: .8125rem;
  --tipo-cifra: 44px;
  --tipo-dato: 24px;
}

/* ── Portada del reto (3/oct, Kickstarter / W5): placa gris clara, ancha, con el
   sello grande a la derecha. El título conserva el dither. ───────────────── */
.portada {
  border-radius: var(--radio-tarjeta);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-32) var(--espacio-48);
  align-items: center;
  margin-bottom: var(--espacio-32);
  padding: clamp(32px, 4vw, 48px);
}
.portada__objetivo { max-width: 60ch; margin-top: var(--espacio-24); }
/* 4/oct: la portada va en tinta (ajuste de Christian en Figma). */
.portada--tinta { padding: var(--espacio-40) var(--espacio-32) var(--espacio-32) var(--espacio-48); background: var(--superficie-tinta); border-color: transparent; color: var(--texto-sobre-tinta); }
.portada--tinta .ficha__kicker { color: var(--texto-sobre-tinta-terciario); }
.portada--tinta .ficha__titulo { color: var(--texto-sobre-tinta); }
.portada--tinta .ficha__fechas, .portada--tinta .ficha__fechas b, .portada--tinta .portada__objetivo { color: var(--texto-sobre-tinta-secundario); }
.portada--tinta .ficha__fechas b { color: var(--texto-sobre-tinta); }

/* ── Header del reto ──────────────────────────────────────────────────────── */

.ficha__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-48);
  align-items: end;
  margin-bottom: clamp(56px, 8vh, 96px);
}

.ficha__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-16);
  margin: 0 0 var(--espacio-24);
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.ficha__titulo {
  margin: 0 0 var(--espacio-24);
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);   /* tope 56: Display/Frase, la escala de las interiores */
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--texto-principal);
}

.ficha__fechas {
  margin: 0;
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  letter-spacing: .04em;
  color: var(--texto-secundario);
}
.ficha__fechas b { font-weight: 400; color: var(--texto-principal); }

/* Píldora de estado (componente): la misma del raíl, pero en flujo. */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-12);
  height: 32px;
  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: .04em;
  text-transform: none;
  color: var(--texto-principal);
}
.pildora::before { content: ''; width: var(--espacio-12); height: var(--espacio-12); border-radius: 50%; background: var(--superficie-tinta); }

/* El sello de píxel del reto, grande: es la pieza que la tarjeta enseñaba
   chica. Sin arte (regla 21) el hueco no se pinta. */
.ficha__sello {
  width: clamp(140px, 16vw, 230px);
  image-rendering: pixelated;
  rotate: 6deg;
}
.ficha__sello:not([src]) { display: none; }

/* ── Cuerpo en dos columnas: lectura + ficha técnica ──────────────────────── */

.ficha__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
  gap: var(--espacio-32);
  align-items: start;
}

/* Paneles de la columna de lectura (4/oct: ya sin pestañas; un panel por tema). */
.ficha__lectura { display: grid; gap: var(--espacio-32); }
.ficha__panel { padding: clamp(24px, 3vw, 40px); }
.ficha__panel .ficha__seccion:last-child { margin-bottom: 0; }

.ficha__seccion { margin: 0 0 clamp(40px, 6vh, 64px); }
.ficha__seccion:last-child { margin-bottom: 0; }

/* Rótulo de sección: Inter pequeño en terciario. Dejó de ser VT323 el 3/oct:
   la voz de máquina se reserva para cifras y estados. */
.ficha__rotulo {
  margin: 0 0 var(--espacio-12);
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.ficha__h2 {
  margin: 0 0 var(--espacio-16);
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.ficha__texto {
  margin: 0;
  font-size: clamp(1rem, 1.32vw, 1.1875rem);
  line-height: 1.58;
  color: var(--texto-secundario);
}
.ficha__texto + .ficha__texto { margin-top: var(--espacio-16); }
.ficha__texto b { font-weight: 600; color: var(--texto-principal); }

/* Entregable mínimo: lista numerada; el número en voz de máquina. */
.ficha__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: requisito;
}
.ficha__lista li {
  display: grid;
  grid-template-columns: var(--espacio-32) 1fr;
  gap: var(--espacio-16);
  align-items: baseline;
  padding: var(--espacio-12) 0;
  border-top: var(--trazo-filete) solid var(--borde-filete);
  font-size: var(--tipo-cuerpo);
  line-height: 1.5;
  color: var(--texto-principal);
}
.ficha__lista li::before {
  counter-increment: requisito;
  content: counter(requisito);
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  color: var(--texto-terciario);
}

/* Criterios: filas numeradas, no cajas (R-007). El contenido no existe (P-03):
   cada fila lleva el aviso de dato pendiente, no un texto plausible. */
.ficha__criterios {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ficha__criterio {
  display: grid;
  grid-template-columns: var(--espacio-32) 1fr auto;
  gap: var(--espacio-16);
  align-items: center;
  padding: var(--espacio-12) 0;
  border-top: var(--trazo-filete) solid var(--borde-filete);
}
.ficha__criterio-n {
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  color: var(--texto-terciario);
}
.ficha__criterio-texto { font-size: var(--tipo-cuerpo-menor); line-height: 1.5; color: var(--texto-principal); }
.ficha__criterio-pts {
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  white-space: nowrap;
}

/* Aviso de dato pendiente: el mismo contrato que el pie (.pie__falta). */
.ficha__falta {
  display: inline-block;
  padding: 3px 10px 2px;
  background: var(--superficie-aviso);
  border-left: var(--espacio-4) solid var(--acento-base);
  font-size: var(--tipo-meta-menor);
  line-height: 1.4;
  color: var(--texto-secundario);
}
.ficha__falta b { color: var(--texto-principal); font-weight: 600; }

/* Barra lateral (columna derecha): placa blanca con borde, fija al scroll.
   Arriba las tres cifras, luego el botón, luego los pares rótulo/valor. */
.ficha__tecnica {
  position: sticky;
  top: 120px;
  padding: var(--espacio-32);
}
.ficha__cifras { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--espacio-16); margin-bottom: var(--espacio-24); }
.ficha__cifras .cifra { justify-items: center; text-align: center; }   /* 4/oct: número centrado sobre su rótulo */
.ficha__tecnica > .cta { margin: 0 var(--espacio-8) var(--espacio-32) 0; }
.ficha__tecnica dl { margin: 0; display: grid; gap: var(--espacio-16); padding-top: var(--espacio-24); border-top: var(--trazo-filete) solid var(--borde-filete); }
.ficha__tecnica dt {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}
.ficha__tecnica dd {
  margin: 0;
  font-size: var(--tipo-meta);
  line-height: 1.5;
  color: var(--texto-principal);
}

/* La insignia en juego, nombrada por la máquina. */
.ficha__insignia {
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  letter-spacing: .04em;
  color: var(--texto-acento-sobre-claro);
}

/* ── Lo que ya entregaron: filas compactas hacia la galería ───────────────── */

.ficha__casos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--trazo-filete) solid var(--borde-filete);
}
.ficha__caso {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espacio-24);
  align-items: baseline;
  padding: var(--espacio-16) 0;
  border-bottom: var(--trazo-filete) solid var(--borde-filete);
  text-decoration: none;
  color: inherit;
}
.ficha__caso:hover .ficha__caso-titulo { box-shadow: inset 0 -0.14em 0 0 var(--acento-base); }
.ficha__caso-alias {
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  letter-spacing: .04em;
  color: var(--texto-acento-sobre-claro);
}
.ficha__caso-titulo { font-weight: 600; transition: box-shadow .16s ease; }
.ficha__caso-votos {
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  color: var(--texto-terciario);
  white-space: nowrap;
}

/* ── Estado cerrado / bloqueado ───────────────────────────────────────────── */

.ficha__banda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-12) var(--espacio-24);
  align-items: center;
  margin: 0 0 var(--espacio-48);
  padding: var(--espacio-16) var(--espacio-24);
  background: var(--superficie-tinta);
  color: var(--texto-sobre-tinta);
  font-size: 1rem;
  line-height: 1.5;
}
.ficha__banda b {
  font-family: var(--tipografia-pixel);
  font-weight: 400;
  font-size: var(--tipo-dato);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-acento-sobre-tinta);
}

/* ── Retos anteriores: acordeón nativo ────────────────────────────────────── */

.ficha__anteriores { margin-top: clamp(64px, 10vh, 112px); }
.ficha__anterior {
  border-top: var(--trazo-filete) solid var(--borde-filete);
}
.ficha__anterior:last-child { border-bottom: var(--trazo-filete) solid var(--borde-filete); }
.ficha__anterior summary {
  display: flex;
  gap: var(--espacio-24);
  align-items: baseline;
  padding: var(--espacio-16) 0;
  cursor: pointer;
  list-style: none;
}
.ficha__anterior summary::-webkit-details-marker { display: none; }
.ficha__anterior summary::before {
  content: '+';
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  color: var(--acento-base);
}
.ficha__anterior[open] summary::before { content: '–'; }
.ficha__anterior summary b { font-weight: 600; }
.ficha__anterior summary span {
  font-size: var(--tipo-meta);
  color: var(--texto-terciario);
}
.ficha__anterior .ficha__texto { padding: 0 0 var(--espacio-24) 50px; }

/* ── CTA persistente al scroll ────────────────────────────────────────────── */

.ficha__flotante {
  position: fixed;
  z-index: 20;
  right: 27px;
  bottom: 27px;
  translate: 0 calc(100% + 40px);
  transition: translate .28s cubic-bezier(.2, .8, .3, 1);
}
.ficha__flotante[data-visible] { translate: 0 0; }

/* ── Piezas compartidas por las páginas interiores (3/oct) ────────────────── */

/* Placa: agrupa contenido sobre el lienzo. El lienzo sigue blanco con la
   retícula que se enciende al pasar; la jerarquía la dan estas dos capas:
   blanca con borde, o gris clara sin él. Énfasis: tinta. */
.placa {
  background: var(--superficie-pagina);
  border: var(--trazo-filete) solid var(--borde-filete);
  border-radius: var(--radio-tarjeta);
}
.placa--clara { background: var(--superficie-clara); border-color: transparent; }

/* Cifra (componente): el número grande en voz de máquina, el rótulo pequeño en
   texto. Para votos, puntos, posición, días. Sin caja propia: va dentro de la
   placa que la contenga. */
.cifra { display: grid; gap: var(--espacio-4); margin: 0; }
.cifra__n {
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-cifra);
  line-height: 1;
  color: var(--texto-principal);
}
.cifra__t { font-size: var(--tipo-meta-menor); line-height: 1.3; color: var(--texto-terciario); }
/* En línea: el número y el rótulo en la misma fila (resumen del ranking, votos del detalle). */
.cifra--linea { display: flex; align-items: center; gap: var(--espacio-8); }

/* El Avatar de alias vive con la Tarjeta de caso en css/galeria.css (4/oct). */

/* Chip de filtro / pestaña (componente): bloque sin radio; activo = acento.
   3/oct: deja VT323 por Inter — un filtro no es cifra ni estado. Como pestaña
   lleva role="tab" y aria-selected; como filtro, aria-pressed; como número de
   página, aria-current="page" (13/oct). */
.chip {
  padding: var(--espacio-8) var(--espacio-12);
  border: var(--trazo-filete) solid var(--borde-filete);
  border-radius: var(--radio-pildora);   /* 4/oct: píldora, como en Figma */
  background: var(--superficie-pagina);
  color: var(--texto-principal);
  font: inherit;
  font-size: var(--tipo-meta);
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.chip:hover { background: var(--superficie-clara); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="page"] { background: var(--acento-base); border-color: var(--acento-base); font-weight: 600; }
.chip:disabled { color: var(--texto-terciario); background: var(--superficie-pagina); cursor: default; }
.chip:focus-visible { position: relative; z-index: 1; outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }
/* Segmentos: un grupo de chips (pestañas). */
.segmentos { display: inline-flex; flex-wrap: wrap; gap: var(--espacio-8); }

/* Etiqueta de entrega (componente): un estado en voz de máquina, misma altura
   que la píldora. Neutra = blanca con filete (borrador, fuera de tiempo…). */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-8);
  height: 32px;
  padding: 0 var(--espacio-12) 0 var(--espacio-8);
  border-radius: var(--radio-pildora);
  background: var(--acento-base);
  color: var(--texto-principal);
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta::before { content: ''; width: var(--espacio-8); height: var(--espacio-8); border-radius: 50%; background: var(--superficie-tinta); }
.etiqueta--neutra { background: var(--superficie-pagina); box-shadow: inset 0 0 0 var(--trazo-filete) var(--borde-filete); }

/* Campo (componente): rótulo · control · pista debajo · error debajo (Stripe).
   El orden visual lo da `order`; el orden del DOM (pista antes del control)
   es el que lee el lector de pantalla. El rojo no existe: el error se dice con
   texto y con el filo de acento. */
.campo { display: grid; gap: var(--espacio-8); }
.campo__rotulo {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-16);
  font-weight: 600;
  font-size: var(--tipo-meta);
  line-height: 1.4;
  color: var(--texto-principal);
}
.campo__opcional { font-weight: 500; font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.campo__control {
  order: 1;
  width: 100%;
  padding: var(--espacio-12) var(--espacio-16);
  font: inherit;
  font-size: var(--tipo-cuerpo-menor);
  line-height: 1.5;
  color: var(--texto-principal);
  background: var(--superficie-pagina);
  border: var(--trazo-filete) solid var(--borde-fuerte);
  border-radius: 0;
  transition: box-shadow .16s ease;
}
.campo__control::placeholder { color: var(--texto-terciario); }
.campo__control:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }
textarea.campo__control { min-height: 136px; resize: vertical; }
select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-principal) 50%), linear-gradient(135deg, var(--texto-principal) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.campo__pista { order: 2; margin: 0; font-size: var(--tipo-meta-menor); line-height: 1.5; color: var(--texto-terciario); }
.campo__error {
  order: 3;
  display: none;
  justify-self: start;
  margin: 0;
  padding: var(--espacio-4) var(--espacio-12);
  background: var(--superficie-aviso);
  border-left: var(--espacio-4) solid var(--acento-base);
  font-size: var(--tipo-meta-menor);
  line-height: 1.4;
  color: var(--texto-principal);
}
.campo[data-error] .campo__error { display: block; }
.campo[data-error] .campo__control { box-shadow: inset 0 0 0 2px var(--acento-base); }
.campo__contador { order: 4; justify-self: end; font-family: var(--tipografia-pixel); font-size: var(--tipo-dato); line-height: 1; color: var(--texto-terciario); }

/* Utilidades de la página: aire y enlaces en línea (zona estricta: cero style=). */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ficha__criterios--separado { margin-top: var(--espacio-24); }
.ficha__texto--abajo { margin-bottom: var(--espacio-24); }
.ficha__texto--abajo-32 { margin-bottom: var(--espacio-32); }
.ficha__texto--arriba { margin-top: var(--espacio-16); }
.ficha__enlace { color: inherit; }
.ficha__enlace--fuerte { font-weight: 600; }
.cta-sec--sobre-tinta { color: var(--texto-sobre-tinta); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .ficha__cabecera, .portada { grid-template-columns: 1fr; align-items: start; }
  .ficha__sello { order: -1; width: 120px; }
  .ficha__cuerpo { grid-template-columns: 1fr; }
  .ficha__lectura { max-width: none; }
  .ficha__tecnica { position: static; }
}
@media (max-width: 620px) {
  .pagina { padding-top: 112px; }
  .ficha__criterio { grid-template-columns: var(--espacio-32) 1fr; }
  .ficha__criterio-pts { grid-column: 2; }
  .ficha__cifras { grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--espacio-16) var(--espacio-32); }
  .ficha__caso { grid-template-columns: 1fr auto; }
  .ficha__caso-alias { grid-column: 1 / -1; }
  .ficha__flotante { right: 16px; bottom: 16px; left: 16px; }
  .ficha__flotante .cta, .ficha__flotante .cta__cara { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha__flotante { transition: none; }
}