/* =========================================================
   El Cluedo del Distrito — hoja de estilos única.

   Sale de los HTML/CSS que entregó la diseñadora (tokens y medidas
   del Figma), juntados en un solo fichero: en su entrega cada página
   repetía cabecera, menú móvil y pie en su propio CSS.

   Puntos de corte:
   - ≤1100px: márgenes laterales más estrechos.
   - ≤900px:  menú hamburguesa y columnas apiladas (no está en el
              Figma: evita que la barra y la crónica se desborden en
              tablet).
   - ≤440px:  la vista móvil del Figma (tipografías y espaciados).
   ========================================================= */

:root {
  --color-blanco: #FFFFFF;
  --color-rojo: #CD0D00;
  --color-negro: #0A0A0A;
  --color-gris: #EEEEEE;
  --color-linea: rgba(10, 10, 10, 0.1);

  --color-overlay-entrada: rgba(10, 10, 10, 0.4);
  --color-overlay-header: rgba(10, 10, 10, 0.8);
  --gradient-caso-cerrado:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 27.646%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.4) 100%);

  --font-anton: 'Anton', sans-serif;
  --font-alegreya: 'Alegreya', serif;

  --text-h1: 400 100px/1.06 var(--font-anton);
  --text-h2: 400 68px/80px var(--font-anton);
  --text-h3: 400 40px/48px var(--font-anton);
  --text-h4: 400 30px/1 var(--font-anton);
  --text-h5: 400 24px/1.55 var(--font-alegreya);
  --text-h5-bold: 700 24px/1.3 var(--font-alegreya);
  --text-body-l-regular: 400 16px/1.55 var(--font-alegreya);
  --text-body-l-bold: 700 16px/1 var(--font-alegreya);
  --text-body-l-medium: 500 16px/1.45 var(--font-alegreya);
  --text-body-l-anton: 400 16px/1 var(--font-anton);
  --text-body-m-medium: 500 14px/1.45 var(--font-alegreya);
  --text-body-s-regular: 400 12px/1 var(--font-alegreya);
  --text-body-s-anton: 400 12px/1 var(--font-anton);
  --text-cta: 700 16px/22px var(--font-alegreya);
  --text-cta-link: 700 20px/1.55 var(--font-alegreya);

  --text-h1-mobile: 400 48px/1.06 var(--font-anton);
  --text-h2-mobile: 400 40px/48px var(--font-anton);
  --text-h3-mobile: 400 32px/40px var(--font-anton);
  --text-h4-mobile: 400 24px/1 var(--font-anton);
  --text-h5-mobile: 400 20px/1.55 var(--font-alegreya);
  --text-h5-mobile-bold: 700 20px/1.55 var(--font-alegreya);

  --margen: 100px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-gris);
  color: var(--color-negro);
  font-family: var(--font-alegreya);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }

/* El reset de arriba (display:flex/block) gana al [hidden] del
   navegador: sin esto, lo oculto con hidden seguiría viéndose. */
[hidden] { display: none !important; }

/* =========================================================
   Botones (CTA)
   ========================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--color-negro);
  border-radius: 4px;
  padding: 12px 40px;
  background: none;
  color: var(--color-negro);
  font: var(--text-cta);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.boton:hover:not(:disabled) {
  background: var(--color-rojo);
  border-color: var(--color-rojo);
  color: var(--color-blanco);
}

.boton--primario {
  border-color: var(--color-rojo);
  background: var(--color-rojo);
  color: var(--color-blanco);
}

.boton--primario:hover:not(:disabled) {
  background: var(--color-negro);
  border-color: var(--color-negro);
}

/* Acción destructiva (borrar un caso): rojo desde el principio, no solo al
   pasar por encima, para que no se pulse por inercia entre las demás. */
.boton--peligro { border-color: var(--color-rojo); color: var(--color-rojo); }

.boton:disabled { cursor: not-allowed; opacity: 0.6; }

/* =========================================================
   Cabecera fija
   ========================================================= */

.entrada__barra {
  position: fixed;
  top: 16px;
  left: var(--margen);
  right: var(--margen);
  z-index: 100;
  /* Rejilla de tres columnas para que el menú quede centrado aunque las
     dos piezas de los lados no pesen lo mismo. Sin sesión no hay ni menú
     ni bloque de usuario: queda solo el nombre del juego en la primera
     columna (justify-self: start), y las otras dos vacías. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 16px 16px 24px;
  border-radius: 8px;
  background: var(--color-overlay-header);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.entrada__barra .wordmark { justify-self: start; }

/* El logotipo del Figma dice "CLOUEDO": mientras no haya uno con el
   nombre de verdad, se compone en texto con la tipografía del título. */
.wordmark {
  font: 400 20px/1 var(--font-anton);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blanco);
  white-space: nowrap;
}

.entrada__nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.entrada__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.entrada__nav-texto {
  font: var(--text-body-l-regular);
  color: var(--color-blanco);
  white-space: nowrap;
}

.entrada__nav-item--activo .entrada__nav-texto { font: var(--text-body-l-bold); line-height: 1.55; }

.entrada__nav-indicador {
  width: 24px;
  height: 2px;
  background: transparent;
}

.entrada__nav-item--activo .entrada__nav-indicador { background: var(--color-rojo); }

.entrada__nav-separador {
  width: 1px;
  height: 12px;
  margin: 0;
  background: rgba(255, 255, 255, 0.3);
  border: none;
}

.entrada__usuario {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

.entrada__usuario-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--color-blanco);
}

.entrada__usuario-nombre { font: var(--text-body-l-bold); }
.entrada__usuario-empresa { font: var(--text-body-s-regular); }

.boton-icono {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
}
.boton-icono img { width: 100%; height: 100%; }

.entrada__hamburguesa { display: none; }

/* Sin imagen de cabecera la barra fija no ocupa sitio en el flujo:
   se reserva a mano (16px de margen + 73px de barra). */
body.sin-hero { padding-top: 89px; }

.entrada--hero {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
  background-color: var(--color-negro);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.entrada--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay-entrada);
}

/* Menú móvil desplegado: sustituye a la barra mientras está abierto. */
.menu-movil {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  padding: 16px 16px 16px 24px;
  border-radius: 8px;
  background: var(--color-overlay-header);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.menu-movil__fila-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.menu-movil__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.menu-movil__nav .entrada__nav-item { align-items: flex-start; }

.menu-movil__usuario {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.5px solid var(--color-rojo);
  padding-top: 16px;
}

.menu-movil__usuario .entrada__usuario-nombre { font: 700 14px/normal var(--font-alegreya); }
.menu-movil__usuario .entrada__usuario-empresa { font: 400 10px/normal var(--font-alegreya); text-transform: uppercase; }

/* Botón de lupa del hero (solo móvil) y visor de la ilustración. */
.entrada__buscar {
  display: none;
  position: absolute;
  top: calc(50% + 36px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  align-items: center;
  justify-content: center;
  background: var(--color-rojo);
  opacity: 0.8;
  border: none;
  border-radius: 1000px;
  padding: 24px;
}
.entrada__buscar img { width: 24px; height: 24px; }

.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-negro);
  overflow: hidden;
  touch-action: none;
}

.visor__lienzo {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  cursor: grab;
  touch-action: none;
}
.visor__lienzo:active { cursor: grabbing; }
.visor__lienzo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.visor__cerrar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 201;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 1000px;
  padding: 16px;
}
.visor__cerrar img { width: 24px; height: 24px; }

/* =========================================================
   Avisos (mensajes flash del servidor)
   ========================================================= */

.avisos {
  background: var(--color-negro);
  color: var(--color-blanco);
  padding: 16px var(--margen);
}

.avisos p { margin: 0; font: var(--text-body-l-medium); }
.avisos p + p { margin-top: 8px; }

/* =========================================================
   Páginas de texto (título rojo gigante + contenido)
   ========================================================= */

.pagina {
  padding: var(--margen);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.pagina__titulo {
  margin: 0;
  font: var(--text-h1);
  text-transform: uppercase;
  color: var(--color-rojo);
}

.pagina__texto {
  max-width: 720px;
  margin: 0;
  font: var(--text-h5);
}

.pagina__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.pagina__vacio { margin: 0; font: var(--text-h5); }

.enlace-dev { font: var(--text-body-l-regular); text-decoration: underline; }

/* =========================================================
   Portada sin sesión: intro, login y aviso de acceso
   ========================================================= */

.boton--google { gap: 12px; padding: 12px 24px 12px 16px; }
.boton--google img { width: 16px; height: 16px; flex-shrink: 0; }

.intro-generica {
  padding: var(--margen) var(--margen) 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.intro-generica__fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-rojo);
}

/* Esa línea separa la intro de lo que venga debajo — antes, siempre
   "Últimos casos". Sin sesión ya no viene nada (ni en la portada ni en
   /puntuaciones), y se quedaba colgando al final de la página: se quita
   junto con el hueco que solo existía para separarla. Si algún día vuelve
   a haber algo detrás, la línea vuelve sola. */
.intro-generica__fila:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.intro-generica__texto {
  flex: 1;
  min-width: 0;
  max-width: 682px;
  margin: 0;
  font: var(--text-h5);
}

.intro-generica__acciones {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.intro-generica__cta { padding: 10px 24px 10px 16px; }

.acceso-requerido {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: rgba(238, 238, 238, 0.9);
  backdrop-filter: blur(8.35px);
  -webkit-backdrop-filter: blur(8.35px);
}

.acceso-requerido__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.acceso-requerido__texto {
  max-width: 562px;
  margin: 0;
  font: var(--text-h5);
  text-align: center;
}

.acceso-requerido__acciones { display: flex; gap: 8px; }
.acceso-requerido__acciones .boton { padding-left: 24px; padding-right: 24px; }
.acceso-requerido__acciones .boton--google { padding-left: 16px; }

/* =========================================================
   Caso: título + crónica
   ========================================================= */

.archivado-etiqueta {
  background: var(--color-negro);
  padding: 16px var(--margen);
}

.archivado-etiqueta__texto {
  margin: 0;
  font: var(--text-h4);
  text-transform: uppercase;
  color: var(--color-blanco);
}

.caso {
  padding: var(--margen);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.caso__titulo {
  margin: 0;
  font: var(--text-h1);
  text-transform: uppercase;
  color: var(--color-rojo);
}

/* Caso resuelto: título en negro para distinguirlo del abierto. */
.caso--resuelto .caso__titulo { color: var(--color-negro); }

.cronica {
  display: flex;
  gap: 64px;
}

.cronica__cabecera {
  flex-shrink: 0;
  width: 292px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.cronica__intro { margin: 0; font: var(--text-h3); }

.cronica__num-caso {
  margin: 0;
  font: var(--text-body-l-anton);
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--color-rojo);
}

.cronica__narracion {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
  border-left: 0.5px solid var(--color-rojo);
  padding-left: 64px;
}

.cronica__parrafo-intro { margin: 0; font: var(--text-h5); }

/* La línea cruza también la columna de la cabecera: 64px de padding
   + 64px de gap + 292px de cabecera. */
.cronica__divisor {
  height: 0;
  margin-left: -420px;
  border-top: 0.5px solid var(--color-rojo);
}

.cronica__cuerpo p { margin: 0 0 1.55em; font: var(--text-body-l-regular); }
.cronica__cuerpo p:last-child { margin-bottom: 0; }

/* =========================================================
   Fichas de sospechosos
   ========================================================= */

.fichas {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px var(--gutter);
}

/* Tres por fila como máximo (a 396px, como en el Figma); si no caben,
   se estrechan en vez de bajar a dos filas desparejas. */
.ficha {
  width: min(396px, calc((100% - 2 * var(--gutter)) / 3));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ficha__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.ficha__retrato {
  position: relative;
  width: 100%;
  height: 447px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Foto con uno de nuestros marcos encima: la foto ocupa solo el hueco
   del marco (variables --hueco-* de la macro) y el PNG va por delante.
   El multiply funde el blanco de fuera del marco con el gris de fondo. */
.marco {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 511 / 703;
}

.marco__foto {
  position: absolute;
  left: var(--hueco-x);
  top: var(--hueco-y);
  width: var(--hueco-w);
  height: var(--hueco-h);
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  background: #ddd;
  filter: grayscale(1);
}

.marco__marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ficha__nombre {
  margin: 0;
  font: var(--text-h4);
  text-align: center;
}

.ficha__nombre--marcado { color: var(--color-rojo); }

.ficha__org { height: 20px; width: auto; max-width: 90px; }

.ficha__votos {
  margin: 0;
  font: var(--text-body-l-anton);
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--color-rojo);
}

/* Datos de la ficha: en escritorio salen al pasar el ratón por el
   retrato; en táctil se abren con el botón ⓘ (ver .info-sospechoso). */
.ficha__revelada { display: none; }

.ficha__revelada div,
.info-sospechoso__datos div { display: flex; flex-direction: column; gap: 2px; }

.ficha__revelada p,
.info-sospechoso__datos p { margin: 0; }

.ficha__revelada strong,
.info-sospechoso__datos strong { font-weight: 700; }

@media (hover: hover) and (pointer: fine) {
  .ficha__revelada {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(238, 238, 238, 0.96);
    /* Hay fichas con bio larga que no caben en el retrato. Antes se
       recortaban (overflow: hidden) y no había forma de ver el resto. */
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    font: 400 14px/1.3 var(--font-alegreya);
  }

  /* pointer-events se activan solo al abrirse: con "none" la rueda del
     ratón pasaba de largo y la caja no se podía desplazar. Al activarlos,
     el puntero sigue estando dentro de .ficha__retrato (es su hijo), así
     que la caja no se cierra al meterse en ella para hacer scroll. */
  .ficha__retrato:hover .ficha__revelada { opacity: 1; pointer-events: auto; }
}

.ficha__info {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  background: var(--color-rojo);
  opacity: 0.8;
  border: none;
  border-radius: 1000px;
  padding: 16px;
}
.ficha__info img { width: 24px; height: 24px; }

@media (hover: none), (pointer: coarse) {
  .ficha__info { display: flex; }
}

.ficha__votar { width: 100%; display: flex; justify-content: center; }
.ficha__cta { padding: 12px 80px; }

.info-sospechoso {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8.35px);
  -webkit-backdrop-filter: blur(8.35px);
}

.info-sospechoso__caja {
  width: 311px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* El que se desplaza es el texto, no la caja entera: así "Cerrar" se queda
   siempre a la vista con una ficha larga, en vez de irse abajo del todo.
   min-height: 0 hace falta para que un hijo de flex pueda encoger y
   desplazarse en lugar de estirar la caja. */
.info-sospechoso__datos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font: 400 16px/1.3 var(--font-alegreya);
}

.info-sospechoso__cerrar { width: 100%; }

/* =========================================================
   Sospechosos (caso abierto): votar y voto emitido
   ========================================================= */

.sospechosos {
  padding: 0 96px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.sospechosos--votado { gap: 40px; }

.sospechosos__titulo {
  margin: 0;
  font: var(--text-h2);
}

.voto-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.voto-estado {
  display: flex;
  gap: 133px;
  align-items: flex-end;
  justify-content: space-between;
}

.voto-estado__texto { flex: 1; min-width: 0; }
.voto-estado__acusado { margin: 0; font: var(--text-h5-bold); }
.voto-estado__nota { margin: 0; font: var(--text-h5); }

.voto-divisor {
  width: 100%;
  height: 0;
  border-top: 0.5px solid var(--color-rojo);
}

.voto-estado,
.voto-divisor { display: none; }
.sospechosos--votado .voto-estado { display: flex; }
.sospechosos--votado .voto-divisor { display: block; }
.sospechosos--votado .ficha__votar { display: none; }

.acusacion {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: rgba(238, 238, 238, 0.9);
  backdrop-filter: blur(8.35px);
  -webkit-backdrop-filter: blur(8.35px);
}

.acusacion__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.acusacion__texto { display: flex; flex-direction: column; gap: 3px; }
.acusacion__pregunta { margin: 0; font: var(--text-h5-bold); }
.acusacion__nota { margin: 0; font: var(--text-h5); }
.acusacion__acciones { display: flex; gap: 8px; }

/* =========================================================
   Descubre al culpable (caso resuelto)
   ========================================================= */

.culpable {
  padding: 0 var(--margen) 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.culpable__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.culpable__titulo { margin: 0; font: var(--text-h2); }

.culpable__resultado {
  display: flex;
  gap: 133px;
  align-items: flex-start;
}

.culpable__voto {
  flex-shrink: 0;
  width: 292px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.culpable__voto p { margin: 0; font: var(--text-h5); }
.culpable__voto .culpable__voto-resultado { font: var(--text-h5-bold); }

.culpable__explicacion { flex: 1; min-width: 0; }
.culpable__explicacion p { margin: 0 0 1.55em; font: var(--text-body-l-regular); }
.culpable__explicacion p:last-child { margin-bottom: 0; }

.culpable__divisor {
  width: 100%;
  height: 0;
  border-top: 0.5px solid var(--color-rojo);
}

/* =========================================================
   Tarjetas de caso: "Últimos casos" y archivo
   ========================================================= */

.ultimos-casos {
  padding: 110px var(--margen) 130px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ultimos-casos__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.ultimos-casos__titulo { margin: 0; font: var(--text-h2); }

.ultimos-casos__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--text-cta-link);
  text-transform: uppercase;
  white-space: nowrap;
}

.ultimos-casos__cta img { width: 16px; height: 16px; }

.lista-casos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--gutter);
}

.lista-casos > li { flex: 1; min-width: 0; max-width: calc((100% - 2 * var(--gutter)) / 3); }

.caso-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 600px;
  border-radius: 16px;
  overflow: hidden;
  padding: 24px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  background-color: var(--color-negro);
  background-size: cover;
  background-position: center;
  color: var(--color-blanco);
}

.caso-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-caso-cerrado);
}

@media (hover: hover) and (pointer: fine) {
  .caso-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .caso-card:hover::after,
  .caso-card:focus-visible::after { opacity: 1; }
}

.caso-card__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.caso-card__cabecera { display: flex; flex-direction: column; gap: 12px; }
.caso-card__num { margin: 0; font: var(--text-body-s-anton); text-transform: uppercase; }

/* "En curso" en la tarjeta del archivo: el caso abierto no es uno más de
   la cuadrícula, porque su tarjeta lleva a votar y no al caso archivado. */
.caso-card__estado {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 1000px;
  background: var(--color-rojo);
  color: var(--color-blanco);
  vertical-align: 1px;
}
.caso-card__titulo { margin: 0; font: var(--text-h4); }
.caso-card__desc { margin: 0; font: var(--text-body-l-medium); }

.caso-card__ver {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  background: var(--color-rojo);
  border-radius: 4px;
  padding: 10px 24px;
  font: var(--text-cta);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.caso-card--compacto { height: 300px; gap: 24px; }
.caso-card--compacto .caso-card__desc { font: var(--text-body-m-medium); }

.archivo-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gutter);
}

/* =========================================================
   Ranking de detectives
   ========================================================= */

.ranking-cronica {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
}

.ranking-cronica__titulo {
  flex-shrink: 0;
  width: 186px;
  margin: 0;
  font: var(--text-h3);
}

.ranking-tabla-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 64px;
}

.ranking-tabla-col { flex: 1; min-width: 0; }

.ranking-tabla { width: 100%; border-collapse: collapse; }

.ranking-tabla thead,
.ranking-tabla tbody { display: block; }

.ranking-tabla tr {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ranking-tabla th,
.ranking-tabla td { display: block; padding: 0; }

.ranking-tabla th {
  padding-bottom: 32px;
  text-align: left;
  font: var(--text-body-l-regular);
}

.ranking-tabla th:first-child,
.ranking-tabla__puesto { width: 20px; flex-shrink: 0; }

.ranking-tabla th:nth-child(2),
.ranking-tabla td:nth-child(2) { flex: 1; min-width: 0; }

.ranking-tabla th:last-child { text-align: right; }

.ranking-tabla tbody tr {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-linea);
}

.ranking-tabla tbody tr:last-child { border-bottom: none; }

.ranking-tabla__puesto { font: var(--text-body-l-bold); }

.ranking-tabla__jugador { display: flex; align-items: center; gap: 16px; }

.ranking-tabla__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-negro);
  color: var(--color-blanco);
  font: var(--text-body-l-anton);
}

.ranking-tabla__jugador-datos {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
}

.ranking-tabla__nombre { font: var(--text-h5-bold); }

.ranking-tabla__empresa {
  font: var(--text-body-s-regular);
  text-transform: uppercase;
  white-space: nowrap;
}
.ranking-tabla__empresa::before { content: "· "; }

.ranking-tabla__puntuacion {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  white-space: nowrap;
  font: var(--text-h5);
}
.ranking-tabla__puntuacion strong { font: var(--text-h5-bold); line-height: 1.55; }
.ranking-tabla__puntuacion span { opacity: 0.8; }

/* =========================================================
   Admin y estadísticas
   ========================================================= */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-body-l-regular);
}

.tabla th {
  padding: 0 12px 16px 0;
  text-align: left;
  font-weight: 400;
}

.tabla td {
  padding: 16px 12px 16px 0;
  border-top: 1px solid var(--color-linea);
}

.tabla .numerico { text-align: right; white-space: nowrap; }

/* Fila de totales: cierra la tabla, así que se separa con la misma línea
   de arriba pero en negrita, para no confundirla con un caso más. */
.tabla__total td {
  border-top: 2px solid var(--color-negro);
  font-weight: 700;
}
/* El porcentaje que acompaña a un número en la tabla: va en segundo plano
   para que la columna se siga leyendo por sus cifras. */
.tabla__apunte { font: var(--text-body-s-regular); opacity: 0.6; }

/* Aviso de que el recuento no cuadra con los casos: enmarcado en rojo
   porque significa que alguien puede repetir, no es un detalle estético. */
.estadisticas__descuadre {
  border: 1px solid var(--color-rojo);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.estadisticas__descuadre p { margin: 0; font: var(--text-body-s-regular); }
.estadisticas__descuadre-titulo { color: var(--color-rojo); font-weight: 700; }
.estadisticas__descuadre .boton { align-self: flex-start; margin-top: 8px; }

/* /admin/estadisticas tiene dos tablas: cada una con su encabezado. */
.estadisticas__titulo {
  margin: 0;
  font: var(--text-h4);
}

/* Dos tablas anchas en una página estrecha: que la que no quepa se
   desplace sola en vez de desbordar la página entera. */
@media (max-width: 900px) {
  .tabla { display: block; overflow-x: auto; }
}

.barra-acierto {
  display: inline-block;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--color-rojo);
}

.admin {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.admin__lateral {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.admin__lateral .boton { width: 100%; padding: 12px 16px; }

.lista-semanas { display: flex; flex-direction: column; }

.lista-semanas a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--color-linea);
  font: var(--text-body-l-medium);
}

.lista-semanas a:hover .lista-semanas__titulo { text-decoration: underline; }
.lista-semanas a.viendo { color: var(--color-rojo); font-weight: 700; }

.lista-semanas__num {
  font: var(--text-body-s-anton);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin__caso {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-left: 0.5px solid var(--color-rojo);
  padding-left: 64px;
}

.admin__cabecera { display: flex; flex-direction: column; gap: 12px; }
.admin__titulo { margin: 0; font: var(--text-h2); }
.admin__tagline { margin: 0; font: var(--text-h5); }
.admin__estado { margin: 0; font: var(--text-body-l-bold); }

.admin__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin__acciones form { margin: 0; }
.admin__acciones .boton { padding: 10px 20px; }

.admin__ilustracion { width: 100%; border-radius: 16px; }

/* Rótulo que separa las tres zonas de la página (el caso, los retoques, el
   peligro). Pequeño y en versales: ordena sin competir con el título del
   caso, que es el único titular de verdad de esta pantalla. */
.admin__seccion {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-linea);
  font: var(--text-body-s-anton);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin__seccion--peligro { color: var(--color-rojo); border-top-color: var(--color-rojo); }

/* La fase en la que está el caso, al lado de su número.

   El color se declara entero y no se hereda: .cronica__num-caso es rojo, y
   sin esto "En preparación" salía del mismo rojo que "Zona de peligro" y
   "Borrar caso". El rojo aquí significa una cosa sola —cuidado—, así que
   una fase inofensiva no puede llevarlo. Lo lleva "En curso", que es la que
   está viva delante de 130 personas. */
.admin__fase {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 1000px;
  background: var(--color-gris);
  color: var(--color-negro);
}
.admin__fase--curso { background: var(--color-rojo); color: var(--color-blanco); }
.admin__fase--resuelto { background: var(--color-negro); color: var(--color-blanco); }

/* Lo que destruye trabajo va junto y con aire propio. */
.admin__peligro { display: flex; flex-direction: column; gap: 16px; }

.admin__editar form,
.admin__borrar form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.admin__editar label,
.admin__borrar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: var(--text-body-l-bold);
}
.admin__editar input,
.admin__editar textarea,
.admin__borrar input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-negro);
  border-radius: 8px;
  background: var(--color-blanco);
  font: 400 16px/1.4 var(--font-alegreya);
}
.admin__editar textarea { min-height: 240px; resize: vertical; }
.admin__editar-ayuda { margin: 0; font: var(--text-body-s-regular); opacity: 0.7; }

/* Informe de calidad del caso (el desplegable de "Evaluar caso"): es
   bastante texto, así que se apoya en epígrafes para poder saltar al
   trozo que interesa. */
.evaluacion__subtitulo { margin: 12px 0 0; font: var(--text-body-s-regular); opacity: 0.7; }
.evaluacion__veredicto { margin: 12px 0 0; font: var(--text-body-l-bold); }
.evaluacion__epigrafe {
  margin: 24px 0 0;
  font: var(--text-body-s-anton);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.evaluacion__dato { font: var(--text-body-s-regular); opacity: 0.7; }
/* La nota de dificultad. Es lo único del informe que se lee de un vistazo,
   así que se le da el salto de tamaño que justifica mirar solo eso. */
.evaluacion__dificultad {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 0;
}
.evaluacion__nota { font: var(--text-h4); }
.evaluacion__nota-sobre { font: var(--text-body-l-anton); opacity: 0.4; }
.evaluacion__alerta { color: var(--color-rojo); font-weight: 700; }
.evaluacion__caducada {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-gris);
  color: var(--color-rojo);
  font: var(--text-body-s-regular);
  font-weight: 700;
}
.evaluacion__consejos { margin: 12px 0 0; padding-left: 20px; }
.evaluacion__consejos li + li { margin-top: 8px; }
.evaluacion__sospechosos { margin: 12px 0 0; padding: 0; list-style: none; }
.evaluacion__sospechosos li + li { margin-top: 8px; }
/* Una etiqueta del ancho de la más larga, para que los nombres queden
   alineados en vez de bailar según diga "defendible" o "descartado". */
.evaluacion__marca {
  display: inline-block;
  min-width: 94px;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 1000px;
  background: var(--color-gris);
  font: var(--text-body-s-regular);
  text-align: center;
}
.evaluacion__marca--si { background: var(--color-rojo); color: var(--color-blanco); }

/* Borrar un caso ya jugado: el desplegable va en rojo para que no se
   confunda con los demás, que son inofensivos. La casilla es estrecha a
   propósito — solo entra un número de caso. */
/* .desplegable solo lleva líneas arriba y abajo, y por eso su padding
   horizontal es 0: al rodearlo de un marco hay que darle aire a los lados
   o el texto toca el borde. */
.admin__borrar {
  border: 1px solid var(--color-rojo);
  border-radius: 8px;
  padding: 16px;
}
.admin__borrar summary { color: var(--color-rojo); font-weight: 700; }
.admin__borrar-aviso { margin: 16px 0 0; font: var(--text-body-s-regular); }
.admin__borrar input { max-width: 160px; }
.admin__borrar .boton { align-self: flex-start; }
.admin__editar .boton { align-self: flex-start; }

.desplegable {
  border-top: 1px solid var(--color-linea);
  border-bottom: 1px solid var(--color-linea);
  padding: 16px 0;
  font: var(--text-body-l-regular);
}

.desplegable + .desplegable { border-top: none; }
.desplegable summary { cursor: pointer; font: var(--text-body-l-bold); line-height: 1.55; }
.desplegable p { margin: 12px 0 0; }

/* Borrar un caso ya jugado: en rojo y enmarcado, para que no se confunda
   con los desplegables de al lado, que son inofensivos. Va detrás de las
   reglas de .desplegable y con dos clases a propósito: si no, le ganarían
   "padding: 16px 0" y el "border-top: none" de dos desplegables seguidos.
   El padding a los lados es lo que impide que el texto toque el marco. */
.desplegable.admin__borrar {
  border: 1px solid var(--color-rojo);
  border-radius: 8px;
  padding: 16px;
}
.admin__borrar summary { color: var(--color-rojo); }
.admin__borrar-aviso { margin: 16px 0 0; font: var(--text-body-s-regular); }
.admin__borrar input { max-width: 160px; }
.admin__borrar .boton { align-self: flex-start; }

.admin .fichas { justify-content: flex-start; }
.admin .ficha { width: min(260px, calc((100% - 2 * var(--gutter)) / 3)); }
.admin .ficha__retrato { height: 300px; }
.admin .ficha__nombre { font: var(--text-h4-mobile); }
.admin .ficha__id { margin: 0; font: var(--text-body-s-regular); opacity: 0.6; }

.spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
.generando .spinner { display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   La trampa para tramposos
   =========================================================

   Texto que no se ve pero que viaja en el portapapeles: si alguien
   selecciona el caso y se lo pega a un modelo de lenguaje para que se lo
   resuelva, se lleva esto dentro.

   El truco está en NO usar `display: none` ni `visibility: hidden`: eso no
   se copia. Es el patrón de siempre para lectores de pantalla —un pixel,
   recortado— que sí entra en la selección. Y como aquí el efecto buscado es
   el contrario, los elementos llevan `aria-hidden="true"`: a quien navegue
   con lector de pantalla no se le lee, que no tiene ninguna culpa. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Aviso de tarea larga en /admin. Va arriba del todo y es lo único que se
   mueve en la página, porque mientras dure es lo único que está pasando. */
.tarea {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--color-rojo);
  border-radius: 8px;
  font: var(--text-body-l-medium);
}
.tarea__spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-rojo);
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
/* Lo último que terminó: el mismo recuadro, sin girar nada. En rojo solo si
   falló — un "hecho" no necesita gritar. */
.tarea--hecha { border-color: var(--color-linea); }
.tarea--error { border-color: var(--color-rojo); color: var(--color-rojo); font-weight: 700; }
.tarea__marca { flex: none; font: var(--text-body-l-bold); }

/* Los botones del panel, apagados mientras haya algo en marcha. */
.admin--ocupado form button {
  opacity: 0.35;
  pointer-events: none;
}

/* =========================================================
   Pie
   ========================================================= */

.pie {
  padding: 40px var(--margen);
  border-top: 1px solid var(--color-rojo);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.pie__texto { margin: 0; font: var(--text-body-l-regular); }
.pie__salto { display: none; }

/* El |—| del centro del Figma es el logo de Hanzo: va más bajo que los otros. */
.pie__logos {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pie__logos img { height: 28px; width: auto; }
.pie__logos img.pie__logo-hanzo { height: 14px; }

.pie__creditos {
  flex-basis: 100%;
  margin: 0;
  font: var(--text-body-s-regular);
  opacity: 0.7;
}
.pie__creditos a { text-decoration: underline; }

/* =========================================================
   ≤1100px
   ========================================================= */

@media (max-width: 1100px) {
  :root { --margen: 40px; }

  .sospechosos { padding: 0 var(--margen) 96px; }
  .voto-estado,
  .culpable__resultado { gap: 64px; }
  .admin { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .admin__caso { padding-left: 40px; }
}

/* =========================================================
   ≤900px: menú hamburguesa y columnas apiladas
   ========================================================= */

@media (max-width: 900px) {
  .entrada__barra { top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; }
  body.sin-hero { padding-top: 80px; }

  .entrada__barra .entrada__nav,
  .entrada__barra .entrada__usuario { display: none; }
  .entrada__hamburguesa { display: flex; }

  .cronica,
  .ranking-cronica,
  .culpable__resultado { flex-direction: column; }

  .cronica { gap: 24px; }
  .cronica__cabecera { width: auto; gap: 24px; }
  .cronica__narracion {
    border-left: none;
    border-top: 0.5px solid var(--color-rojo);
    padding: 24px 0 0;
    gap: 40px;
  }
  .cronica__divisor { display: none; }

  .voto-estado { flex-direction: column; align-items: flex-start; gap: 40px; }
  .intro-generica__fila { flex-direction: column; align-items: flex-start; }
  .intro-generica__acciones { align-items: flex-start; }
  .culpable__resultado { gap: 40px; }
  .culpable__voto { width: auto; }

  .ranking-tabla-wrap { flex-direction: column; gap: 0; }
  .ranking-tabla-col + .ranking-tabla-col thead { display: none; }
  .ranking-tabla-col:first-child tbody tr:last-child { border-bottom: 1px solid var(--color-linea); }

  .lista-casos { overflow-x: auto; }

  .fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { width: auto; }
  .lista-casos > li { flex: 0 0 300px; max-width: none; }

  .admin { grid-template-columns: minmax(0, 1fr); }
  .admin__caso { border-left: none; padding-left: 0; }
}

/* =========================================================
   ≤440px: vista móvil del Figma
   ========================================================= */

@media (max-width: 440px) {
  :root { --margen: 16px; }

  .wordmark { font-size: 16px; }

  .entrada--hero { height: 300px; }
  .entrada--hero .entrada__buscar { display: flex; }

  .avisos { padding: 16px; }

  .pagina { padding: 40px 16px 64px; gap: 32px; }

  .intro-generica { padding: 40px 24px; gap: 24px; }
  .intro-generica__fila { flex-direction: column; align-items: stretch; gap: 24px; }
  .intro-generica__texto { font: var(--text-body-l-regular); max-width: none; }
  .intro-generica__acciones { align-items: stretch; }
  .acceso-requerido__acciones { flex-direction: column; align-items: stretch; width: 100%; }
  .pagina__titulo { font: var(--text-h1-mobile); }
  .pagina__texto,
  .pagina__vacio { font: var(--text-h5-mobile); }

  .archivado-etiqueta { padding: 16px; }
  .archivado-etiqueta__texto { font: var(--text-h4-mobile); }

  .caso { padding: 40px 24px 80px; gap: 24px; }
  .caso__titulo { font: var(--text-h1-mobile); }
  .cronica__intro { font: var(--text-h3-mobile); }
  .cronica__parrafo-intro { font: var(--text-h5-mobile); }

  .sospechosos { padding: 0 16px 24px; gap: 40px; }
  .voto-intro { gap: 40px; }
  .sospechosos__titulo { font: var(--text-h2-mobile); }
  .sospechosos__titulo br { display: none; }
  .voto-estado__acusado { font: var(--text-body-l-bold); }
  .voto-estado__nota { font: var(--text-body-l-regular); }

  .fichas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 8px;
  }
  .ficha { width: auto; gap: 24px; }
  .ficha__retrato { height: 217.636px; }
  .ficha__nombre { font: 400 16px/normal var(--font-anton); letter-spacing: 0.16px; }
  .ficha__org { height: 16px; }
  .ficha__info { padding: 12px; }
  .ficha__cta { width: 100%; padding: 0 16px; height: 45px; }

  .acusacion__acciones { flex-direction: column; align-items: stretch; gap: 16px; }
  .acusacion__pregunta { font: var(--text-h5-mobile-bold); }
  .acusacion__nota { font: var(--text-h5-mobile); }

  .culpable { padding: 0 16px 24px; }
  .culpable__intro { gap: 40px; }
  .culpable__titulo { font: var(--text-h2-mobile); }
  .culpable__voto p { font: var(--text-body-l-regular); }
  .culpable__voto .culpable__voto-resultado { font: var(--text-body-l-bold); }

  .boton { height: 45px; padding: 0 40px; }

  /* El enlace "Todos los casos" baja debajo del carrusel. */
  .ultimos-casos { padding: 64px 0; }
  .ultimos-casos__header { display: contents; }
  .ultimos-casos__titulo { order: 1; padding: 0 16px; font: var(--text-h2-mobile); }
  .lista-casos { order: 2; padding: 0 16px; }
  .ultimos-casos__cta { order: 3; align-self: flex-start; margin: 0 16px; }

  .caso-card { height: 500px; }
  .caso-card__titulo { font: var(--text-h4-mobile); }
  .caso-card__desc { font: var(--text-body-m-medium); }
  .caso-card--compacto { height: 250px; }
  .archivo-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .ranking-cronica__titulo { font: var(--text-h4-mobile); }
  .ranking-tabla tr { gap: 12px; }
  .ranking-tabla__jugador { gap: 12px; }
  .ranking-tabla__avatar { width: 48px; height: 48px; }
  .ranking-tabla__jugador-datos { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ranking-tabla__nombre { font: var(--text-h5-mobile-bold); }
  .ranking-tabla__empresa::before { content: ""; }
  .ranking-tabla__puntuacion { font: var(--text-h5-mobile); }
  .ranking-tabla__puntuacion strong { font: var(--text-h5-mobile-bold); }

  .admin__titulo { font: var(--text-h2-mobile); }
  .admin .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin .ficha { width: auto; }
  .admin .ficha__retrato { height: 217.636px; }

  .tabla { font-size: 14px; }

  .pie {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
  }
  .pie__texto { max-width: 280px; font-size: 14px; }
  .pie__salto { display: inline; }
  .pie__logos { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .pie__logos img { height: 22px; }
  .pie__logos img.pie__logo-hanzo { height: 11px; }
}