/* ==========================================================================
   La Ruina — sistema visual
   Colores muestreados de los carteles oficiales. Mobile-first.
   ========================================================================== */

@font-face { font-family: "Ubuntu"; font-weight: 400; font-display: swap; src: url("../fonts/ubuntu-latin-400-normal.4a8b9af22b31.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 500; font-display: swap; src: url("../fonts/ubuntu-latin-500-normal.c6bd3f0bf07f.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 700; font-display: swap; src: url("../fonts/ubuntu-latin-700-normal.9418887ae687.woff2") format("woff2"); }

:root {
  /* Marca */
  --rojo: #fd001f;          /* logotipo, marco del cartel, textos grandes */
  --rojo-accion: #d6001c;   /* fondos con texto blanco (contraste AA 5.3:1) */
  --rojo-hover: #b80018;
  --cian: #19d3da;          /* solo para el desplazamiento glitch */
  --negro: #0b090a;         /* fondo de los carteles */
  --negro-2: #16131a;
  --negro-3: #221e25;
  --gris: #a7a1a6;          /* texto secundario (7.6:1 sobre negro) */
  --gris-borde: #3a3439;
  --blanco: #f7f5f6;
  --ok: #3ddc84;
  --aviso: #ffc23d;

  /* Tipografía */
  --fuente: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: .8125rem; --t-s: .9375rem; --t-m: 1.0625rem; --t-l: 1.375rem;
  --t-xl: clamp(1.75rem, 5vw, 2.5rem); --t-xxl: clamp(3rem, 15vw, 7.5rem);

  /* Espaciado y forma */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4.5rem;
  --radio: 2px;
  --ancho: 72rem;
  --tactil: 2.75rem;         /* 44px: objetivo táctil mínimo */
}

/* --- Base --- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--negro); color: var(--blanco);
  font: 400 var(--t-m)/1.6 var(--fuente);
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blanco); text-decoration-color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rojo); }
h1, h2, h3 { line-height: 1.1; margin: 0 0 var(--e4); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
p { margin: 0 0 var(--e4); }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--e2); top: -4rem; z-index: 100; background: var(--rojo-accion); color: #fff; padding: var(--e2) var(--e4); }
.saltar:focus { top: var(--e2); }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e4); }
.secundario { color: var(--gris); }
.pequeno { font-size: var(--t-s); }

/* --- Logotipo glitch (texto provisional hasta tener el SVG oficial) --- */
.logo {
  font-weight: 700; color: var(--rojo); text-decoration: none; letter-spacing: -.02em; white-space: nowrap;
  text-shadow: -.035em .02em 0 rgba(25, 211, 218, .45), .03em -.012em 0 rgba(253, 0, 31, .3);
}
.logo:hover { color: var(--rojo); }
.logo--grande { font-size: var(--t-xxl); line-height: .95; display: inline-block; position: relative; }
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-texto); position: absolute; inset: 0; pointer-events: none;
  text-shadow: none; opacity: 0;
}
.glitch::before { color: var(--cian); mix-blend-mode: screen; }
.glitch::after { color: var(--rojo); }
@media (prefers-reduced-motion: no-preference) {
  .glitch::before { animation: corte-a 6s steps(1) infinite; }
  .glitch::after { animation: corte-b 6s steps(1) infinite; }
}
@keyframes corte-a {
  0%, 91%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  92% { opacity: .9; transform: translateX(-.04em); clip-path: inset(18% 0 62% 0); }
  94% { opacity: .9; transform: translateX(.05em); clip-path: inset(55% 0 30% 0); }
  96% { opacity: .8; transform: translateX(-.02em); clip-path: inset(78% 0 8% 0); }
}
@keyframes corte-b {
  0%, 92%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  93% { opacity: 1; transform: translateX(.06em); clip-path: inset(38% 0 48% 0); }
  95% { opacity: 1; transform: translateX(-.05em); clip-path: inset(66% 0 20% 0); }
}

/* --- Cabecera y navegación --- */
.cabecera { border-bottom: 1px solid var(--gris-borde); background: var(--negro); position: sticky; top: 0; z-index: 50; }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 3.75rem; }
.cabecera .logo { font-size: 1.6rem; }
.menu-boton {
  display: none; min-height: var(--tactil); min-width: var(--tactil); padding: 0 var(--e3);
  background: none; border: 1px solid var(--gris-borde); color: var(--blanco); font: inherit; border-radius: var(--radio); cursor: pointer;
}
.js .menu-boton { display: inline-flex; align-items: center; gap: var(--e2); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); }
.nav a { display: inline-flex; align-items: center; min-height: var(--tactil); text-decoration: none; font-weight: 500; }
.nav a[aria-current="page"] { color: var(--rojo); }
.js .nav { display: none; }
.js .nav.abierta { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--negro-2); border-bottom: 2px solid var(--rojo); }
.js .nav.abierta ul { flex-direction: column; padding: var(--e2) var(--e4) var(--e4); }
.js .nav.abierta a { width: 100%; font-size: var(--t-l); border-bottom: 1px solid var(--gris-borde); }
@media (min-width: 48rem) {
  .js .menu-boton { display: none; }
  .js .nav, .js .nav.abierta { display: block; position: static; background: none; border: 0; }
  .js .nav.abierta ul { flex-direction: row; padding: 0; }
  .js .nav.abierta a { width: auto; font-size: inherit; border: 0; }
}

/* --- Pie --- */
.pie { border-top: 1px solid var(--gris-borde); padding: var(--e6) 0; margin-top: var(--e8); color: var(--gris); font-size: var(--t-s); }
.pie p { margin: 0; }

/* --- Hero de portada --- */
.hero { position: relative; overflow: hidden; border-bottom: 6px solid var(--rojo); }
.hero__imagen { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; }
.hero__texto { padding: var(--e5) var(--e4) var(--e6); }
.hero__lema { font-size: var(--t-l); font-weight: 500; margin: var(--e3) 0 var(--e5); }
.hero__imagen { max-height: 70vh; }
@media (min-width: 48rem) {
  .hero__texto { padding: var(--e6) max(var(--e6), calc((100vw - var(--ancho)) / 2 + var(--e4))); }
}

@media (min-width: 64rem) {
  /* Escritorio: foto panorámica a todo el ancho y el texto sobre la zona inferior fundida a negro. */
  .hero { display: block; min-height: 0; }
  .hero picture { display: block; position: relative; }
  .hero picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(11, 9, 10, .88) 80%, var(--negro)); }
  .hero__imagen { width: 100%; height: auto; max-height: 82vh; aspect-ratio: 1588 / 672; object-position: center 20%; }
  .hero__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-bottom: var(--e6); }
  .hero .logo--grande { font-size: clamp(4rem, 7vw, 7.5rem); }
  .hero__lema { margin: var(--e2) 0 var(--e4); }
}

/* --- Botones --- */
.boton, button[type="submit"], .allauth button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--tactil); padding: var(--e2) var(--e5);
  background: var(--rojo-accion); color: #fff; border: 2px solid var(--rojo-accion); border-radius: var(--radio);
  font: 700 var(--t-m)/1.2 var(--fuente); text-decoration: none; cursor: pointer;
}
.boton:hover, button[type="submit"]:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); color: #fff; }
.boton--secundario, button.boton--secundario { background: transparent; border-color: var(--blanco); color: var(--blanco); }
.boton--secundario:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.boton--peligro, button.boton--peligro { background: transparent; border-color: var(--rojo); color: var(--rojo); }
.boton--peligro:hover { background: var(--rojo-accion); color: #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* --- Formularios --- */
.formulario { max-width: 32rem; }
.campo { margin-bottom: var(--e5); }
.campo label, .campo legend { display: block; font-weight: 500; margin-bottom: var(--e2); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], select, textarea {
  width: 100%; min-height: var(--tactil); padding: var(--e2) var(--e3);
  background: var(--negro-2); color: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio);
  font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--cian); }
.campo__ayuda { display: block; color: var(--gris); font-size: var(--t-s); margin-top: var(--e1); }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); }
.errorlist { list-style: none; margin: 0 0 var(--e2); padding: 0; color: #ff6b7d; font-size: var(--t-s); font-weight: 500; }
.errorlist li::before { content: "⚠ "; }
.campo input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--rojo); vertical-align: middle; }
altcha-widget { display: block; max-width: 22rem; --altcha-color-base: var(--negro-2); --altcha-color-text: var(--blanco); --altcha-color-border: var(--gris-borde); --altcha-border-radius: var(--radio); }

/* --- Avisos --- */
.mensajes { list-style: none; padding: 0; margin: var(--e4) 0; }
.mensaje { padding: var(--e3) var(--e4); border-left: 4px solid var(--gris); background: var(--negro-2); margin-bottom: var(--e2); }
.mensaje--success { border-color: var(--ok); }
.mensaje--success::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.mensaje--error { border-color: var(--rojo); }
.mensaje--error::before { content: "✕ "; color: var(--rojo); font-weight: 700; }
.mensaje--warning { border-color: var(--aviso); }
.mensaje--warning::before { content: "! "; color: var(--aviso); font-weight: 700; }

/* --- Páginas --- */
.pagina { padding-block: var(--e6); }
.tarjeta { background: var(--negro-2); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: var(--e5); margin-bottom: var(--e5); }
.tarjeta h2 { font-size: var(--t-l); }
.etiqueta { display: inline-block; padding: 0 var(--e2); border: 1px solid currentColor; border-radius: var(--radio); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.etiqueta--rojo { color: var(--rojo); }
.etiqueta--aviso { color: var(--aviso); }
.fecha-caja { display: inline-block; background: var(--rojo-accion); color: #fff; font-weight: 700; padding: var(--e1) var(--e3); }
.error-codigo { font-size: var(--t-xxl); }

/* --- Panel de administración --- */
.panel { display: grid; gap: var(--e5); padding-block: var(--e5); }
.panel__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e2); overflow-x: auto; }
.panel__nav a { display: inline-flex; align-items: center; min-height: var(--tactil); padding: 0 var(--e3); background: var(--negro-2); border: 1px solid var(--gris-borde); text-decoration: none; white-space: nowrap; }
.panel__nav a[aria-current="page"] { border-color: var(--rojo); color: var(--rojo); }
@media (min-width: 60rem) {
  .panel { grid-template-columns: 14rem 1fr; align-items: start; }
  .panel__nav ul { flex-direction: column; overflow: visible; }
}
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.cifra { background: var(--negro-2); border: 1px solid var(--gris-borde); padding: var(--e4); }
.cifra strong { display: block; font-size: var(--t-xl); line-height: 1; }
.filtros { display: grid; gap: var(--e3); margin-bottom: var(--e5); }
@media (min-width: 48rem) { .filtros { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; } .filtros .campo { margin: 0; } }

/* Tablas que se convierten en tarjetas en móvil */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; color: var(--gris); font-weight: 500; font-size: var(--t-s); border-bottom: 1px solid var(--gris-borde); padding: var(--e2); }
.tabla td { padding: var(--e3) var(--e2); border-bottom: 1px solid var(--gris-borde); vertical-align: top; }
@media (max-width: 47.99rem) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tr { display: block; border: 1px solid var(--gris-borde); margin-bottom: var(--e3); padding: var(--e2); }
  .tabla td { display: flex; gap: var(--e3); border: 0; padding: var(--e1) 0; }
  .tabla td::before { content: attr(data-titulo); color: var(--gris); min-width: 6.5rem; font-size: var(--t-s); }
}
.paginacion { display: flex; gap: var(--e3); align-items: center; margin-top: var(--e5); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e4); margin: 0 0 var(--e5); }
.datos dt { color: var(--gris); }
.datos dd { margin: 0; }
details.desplegable { border: 1px solid var(--gris-borde); padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
details.desplegable summary { cursor: pointer; font-weight: 500; min-height: var(--tactil); display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.campo label.en-linea { display: inline; }
.panel > * { min-width: 0; }

/* ===================== Archivo (Fase 2) ===================== */
.titulo-seccion { font-size: var(--t-xxl); color: var(--rojo); line-height: .95; }
.migas { font-size: var(--t-s); color: var(--gris); margin-bottom: var(--e4); }
.buscador { display: flex; gap: var(--e2); margin: var(--e5) 0; max-width: 40rem; }
.buscador input { flex: 1; }
.rejilla { list-style: none; padding: 0; margin: 0 0 var(--e6); display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.tarjeta--enlace { display: flex; flex-direction: column; gap: var(--e2); text-decoration: none; height: 100%; margin: 0; }
.tarjeta--enlace:hover { border-color: var(--rojo); color: var(--blanco); }
.lista-episodios { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.lista-episodios .tarjeta--enlace { flex-direction: row; align-items: center; gap: var(--e4); }
.lista-episodios .tarjeta--enlace > span:last-child { display: flex; flex-direction: column; }
.lista-tarjetas { display: grid; gap: var(--e3); }
@media (min-width: 48rem) { .lista-tarjetas { grid-template-columns: 1fr 1fr; } }
.ruina-tarjeta { background: var(--negro-2); border: 1px solid var(--gris-borde); border-left: 4px solid var(--gris-borde); padding: var(--e4); }
.ruina-tarjeta--ganadora { border-left-color: var(--rojo); }
.ruina-tarjeta h3 { font-size: var(--t-m); margin-bottom: var(--e2); }
.ruina-tarjeta p:last-child { margin: 0; }
.etiquetas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0; }
a.etiqueta { text-decoration: none; padding: var(--e1) var(--e2); }
.etiqueta--ganadora { color: var(--aviso); }
.etiqueta--ok { color: var(--ok); }
.invitado-destacado { display: flex; align-items: center; gap: var(--e4); padding: var(--e4); margin: var(--e4) 0 var(--e5); border: 2px solid var(--rojo); background: var(--negro-2); }
.invitado-destacado img { width: 6rem; height: 6rem; object-fit: cover; }
.invitado-destacado__nombre { font-size: var(--t-l); font-weight: 700; margin: 0; }
.ficha-ruina header { margin-bottom: var(--e5); }
.ficha-ruina__narrador { font-size: var(--t-l); }
.ficha-ruina__resumen { font-size: var(--t-l); color: var(--gris); }
.texto { max-width: 42rem; font-size: 1.125rem; }
.cartel { max-width: 22rem; margin: var(--e5) 0; }
.miniatura { max-width: 12rem; margin-bottom: var(--e3); }

.video { margin: 0 0 var(--e5); max-width: 48rem; }
.video__marco { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video__marco iframe, .video__fachada { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__fachada { padding: 0; cursor: pointer; background: #000; }
.video__fachada img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .75; }
.video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem; display: grid; place-items: center; background: var(--rojo-accion); color: #fff; font-size: 1.8rem; border-radius: 50%; box-shadow: -4px 2px 0 rgba(25, 211, 218, .7); }
.video__fachada:hover .video__play, .video__fachada:focus-visible .video__play { background: var(--rojo); }
.video figcaption { margin-top: var(--e2); }

/* Editor del panel */
.editor-cabecera h1 { margin-bottom: var(--e2); }
.pasos { position: sticky; top: 3.8rem; z-index: 10; background: var(--negro); padding: var(--e2) 0; margin-bottom: var(--e4); border-bottom: 1px solid var(--gris-borde); }
.pasos ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e2); overflow-x: auto; }
.pasos a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--e3); border: 1px solid var(--gris-borde); text-decoration: none; white-space: nowrap; font-size: var(--t-s); }
.seccion-editor { scroll-margin-top: 7.5rem; }
section[id] { scroll-margin-top: 7.5rem; }
.seccion-editor__cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.estado-guardado { font-size: var(--t-s); color: var(--gris); min-height: 1.4em; }
.estado-guardado[data-tipo="ok"] { color: var(--ok); }
.estado-guardado[data-tipo="error"] { color: #ff6b7d; }
.estado-guardado[data-tipo="pendiente"] { color: var(--aviso); }
.faltan { border-left: 4px solid var(--aviso); }
.faltan .pequeno { display: block; }
.lista-ruinas { padding-left: var(--e5); }
.lista-ruinas__item { padding: var(--e3) 0; border-bottom: 1px solid var(--gris-borde); display: grid; gap: var(--e2); }
@media (min-width: 60rem) { .lista-ruinas__item { grid-template-columns: 1fr auto; align-items: center; } }
form.en-linea { display: inline-flex; gap: var(--e1); align-items: center; }
.boton--mini, button.boton--mini { min-height: 2.25rem; padding: 0 var(--e3); font-size: var(--t-s); }
button:disabled { opacity: .35; cursor: not-allowed; }
.campo ul:not(.errorlist) { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); }
.campo ul:not(.errorlist) label { display: inline-flex; gap: var(--e2); align-items: center; font-weight: 400; min-height: var(--tactil); margin: 0; }
.sugerencias { list-style: none; margin: var(--e1) 0 0; padding: 0; border: 1px solid var(--cian); background: var(--negro-2); max-width: 32rem; }
.sugerencias button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--gris-borde); color: var(--blanco); font: inherit; padding: var(--e2) var(--e3); min-height: var(--tactil); cursor: pointer; }
.sugerencias button:hover, .sugerencias button:focus { background: var(--negro-3); }
hr { border: 0; border-top: 1px solid var(--gris-borde); margin: var(--e5) 0; }
input[type="number"] { max-width: 10rem; }
input[type="date"] { max-width: 14rem; }
input[type="file"] { font: inherit; color: var(--gris); max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 500; background: var(--negro-3); color: var(--blanco); border: 1px solid var(--gris-borde); padding: var(--e2) var(--e3); margin-right: var(--e3); cursor: pointer; }

/* ===================== Comunidad (Fase 3) ===================== */
.contador { display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: var(--e1); background: var(--rojo-accion); color: #fff; border-radius: 1em; font-size: var(--t-xs); text-align: center; font-weight: 700; }
.valoracion__media { font-size: var(--t-l); color: var(--aviso); }
.estrellas { border: 0; padding: 0; margin: 0 0 var(--e3); }
.estrellas legend { font-weight: 500; margin-bottom: var(--e2); padding: 0; }
.estrellas__fila { display: inline-flex; flex-direction: row-reverse; gap: var(--e1); }
.estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas label { font-size: 2.2rem; line-height: 1; color: var(--gris-borde); cursor: pointer; min-width: var(--tactil); min-height: var(--tactil); display: grid; place-items: center; }
.estrellas input:checked ~ label, .estrellas label:hover, .estrellas label:hover ~ label { color: var(--aviso); }
.estrellas input:focus-visible + label { outline: 3px solid var(--cian); outline-offset: 2px; }
.comentarios { margin: var(--e6) 0; }
.comentarios__cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--e3); }
.comentarios__cabecera a[aria-current] { color: var(--rojo); }
.hilo { border-top: 1px solid var(--gris-borde); padding: var(--e3) 0; }
.comentario { padding: var(--e2) 0; }
.comentario--respuesta { margin-left: var(--e5); padding-left: var(--e4); border-left: 2px solid var(--gris-borde); }
.comentario__cabecera { margin-bottom: var(--e1); }
.comentario__texto { white-space: normal; overflow-wrap: anywhere; }
.comentario__acciones { display: flex; gap: var(--e4); align-items: flex-start; margin-top: var(--e2); flex-wrap: wrap; }
.comentario__acciones summary { cursor: pointer; color: var(--gris); }
.comentario__acciones textarea { margin: var(--e2) 0; }
button.enlace { background: none; border: 0; padding: 0; color: var(--gris); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }
blockquote.tarjeta { margin: 0 0 var(--e5); }

/* ===================== Preguntas y estadísticas (Fase 4) ===================== */
.formulario-ancho { max-width: 48rem; }
.opcion-fila { border: 1px solid var(--gris-borde); padding: var(--e3) var(--e4) 0; margin: 0 0 var(--e3); display: grid; gap: 0 var(--e4); }
@media (min-width: 48rem) { .opcion-fila { grid-template-columns: 2fr 1fr 1fr; } .opcion-fila .campo:last-of-type { grid-column: 1 / -1; } }
.separador { margin-top: var(--e7); padding-top: var(--e4); border-top: 2px solid var(--rojo); }
.rejilla-est { display: grid; gap: var(--e3); margin-bottom: var(--e3); }
@media (min-width: 48rem) { .rejilla-est { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.rejilla-est .tarjeta { margin: 0; }
.tarjeta h3 { font-size: var(--t-m); }
meter { width: 100%; max-width: 16rem; height: .9rem; display: block; margin: var(--e1) 0 var(--e2); }
meter::-webkit-meter-bar { background: var(--negro-3); border: 0; border-radius: 0; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--rojo); }
meter::-moz-meter-bar { background: var(--rojo); }
.tabla meter { display: inline-block; vertical-align: middle; width: 6rem; margin: 0 var(--e2) 0 0; }
.lista-barras { padding-left: var(--e5); margin: 0; }
.lista-barras li { display: flex; justify-content: space-between; gap: var(--e3); border-bottom: 1px solid var(--gris-borde); padding: var(--e1) 0; }
.lista-barras span { color: var(--gris); font-variant-numeric: tabular-nums; }
.ranking { list-style: none; padding: 0; margin: var(--e5) 0; }
.ranking__item { display: grid; grid-template-columns: 3rem 1fr; gap: var(--e2) var(--e3); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--gris-borde); }
.ranking__item > div:nth-child(2) { display: flex; flex-direction: column; }
.ranking__nota { grid-column: 2; display: flex; gap: var(--e3); align-items: baseline; }
@media (min-width: 48rem) { .ranking__item { grid-template-columns: 4rem 1fr auto; } .ranking__nota { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 0; } }
.ranking__pos { font-size: var(--t-xl); font-weight: 700; color: var(--rojo); text-align: center; }
.ranking__item:nth-child(-n+3) .ranking__pos { text-shadow: -2px 1px 0 rgba(25, 211, 218, .5); }
.pregunta { border-left: 4px solid var(--rojo); }
.pregunta__texto { font-size: var(--t-l); font-weight: 700; }
.resultados { list-style: none; padding: 0; margin: var(--e3) 0; }
.resultados li { margin-bottom: var(--e3); }
.resultados img { width: 3rem; height: 3rem; object-fit: cover; display: inline-block; vertical-align: middle; margin-right: var(--e2); }

/* ===================== Ruina de la semana (Fase 5) ===================== */
.historia { max-width: 44rem; margin-bottom: var(--e6); }
.historia--destacada { border: 2px solid var(--rojo); padding: var(--e5); background: var(--negro-2); margin-top: var(--e5); }
.historia__titulo { font-size: var(--t-xl); margin: var(--e3) 0 var(--e2); }
.historia__titulo a { text-decoration: none; }
.historia__texto { font-size: 1.15rem; line-height: 1.75; }
.historia__texto p:first-child::first-letter { font-size: 3.2em; float: left; line-height: .9; margin: .05em .08em 0 0; color: var(--rojo); font-weight: 700; }
.historia__imagen { margin: var(--e4) 0; max-height: 28rem; object-fit: cover; }
.semana-sello { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }