/* Al Loro, tema «Rótulo»: la web con el lenguaje del canal en antena.
   Tinta, blanco y la placa escalonada del logo. El rojo del piloto no vive aquí: solo en el piloto del bloque
   alloro/dato (bloques/dato/style.css del plugin) y dentro de los SVG del logo. Papel #F3EFE6 solo como color de
   texto sobre tinta: las superficies son tinta o blanco, nunca papel y blanco en la misma pieza (MARCA.md).
   Es el estilos.css de la maqueta (docs/web/propuestas/rotulo) repartido como dice el contrato (4.6): aquí la base,
   la placa, la cabecera, el pie y las rejillas, y en cada bloque lo suyo. Las @font-face las genera theme.json. */

:root {
  /* Marca */
  --tinta: #121317;
  --papel: #F3EFE6;
  --blanco: #FFFFFF;
  /* Derivados de la tinta para superficies y textos secundarios */
  --tinta-2: #1B1D23;         /* superficie elevada sobre tinta */
  --tinta-3: #2C2E35;         /* filetes y bordes decorativos */
  --papel-2: #BDB9AF;         /* texto secundario sobre tinta */
  --gris-placa: #4B4D55;      /* texto secundario sobre blanco */
  --gris-campo: #686A72;      /* texto de ejemplo en campos blancos */
  --gris-filete: #DCDDE0;     /* filete sobre blanco */
  --gris-linea: #D9DADD;      /* líneas de la hoja del dossier */

  --rotulo: "Archivo Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --esquina: 8px;
  --anillo: var(--blanco);
  --margen: 16px;
  --ancho: 1240px;
}
@media (min-width: 768px) { :root { --margen: 24px; } }
@media (min-width: 1100px) { :root { --margen: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
.sobre-blanco, .faldon__barra, .recordatorio, .hoja { color-scheme: light; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font: 400 17px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--blanco); color: var(--tinta); }

/* Foco: anillo blanco sobre tinta y en tinta sobre blanco */
:focus-visible { outline: 3px solid var(--anillo); outline-offset: 3px; border-radius: 4px; }
.sobre-blanco { --anillo: var(--tinta); }

.solo-lectores, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--margen); top: -200px; z-index: 20;
  background: var(--blanco); color: var(--tinta); --anillo: var(--blanco);
  padding: 12px 16px; border-radius: 6px; font-weight: 800; text-decoration: none;
}
.saltar:focus { top: 12px; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ------------------------------------------------------------------ */
/* La placa escalonada: pestaña corta sobre una barra más larga,       */
/* con la curva cóncava en el escalón (radio 0,52 del alto de la       */
/* pestaña). El piloto de la cuna vive en el bloque alloro/dato.       */
/* ------------------------------------------------------------------ */
.rotulo {
  --h: 30px;                       /* alto de la pestaña */
  --r: calc(var(--h) * .52);       /* radio de la curva del escalón */
  --fondo: var(--blanco);
  --letra: var(--tinta);
  --letra-barra: 40px;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 100%;
}
.rotulo__pestana {
  position: relative;
  display: inline-flex; align-items: center;
  height: var(--h);
  padding: 0 calc(var(--h) * .42);
  background: var(--fondo); color: var(--letra);
  border-radius: var(--esquina) var(--esquina) 0 0;
  font: 800 calc(var(--h) * .44)/1 var(--texto);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
a.rotulo__pestana { text-decoration: none; }
a.rotulo__pestana:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rotulo__pestana::after {
  content: ""; position: absolute; left: 100%; bottom: 0;
  width: var(--r); height: var(--r);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .6px), var(--fondo) var(--r));
}
.rotulo__barra {
  display: block; max-width: 100%;
  background: var(--fondo); color: var(--letra);
  border-radius: 0 var(--esquina) var(--esquina) var(--esquina);
  padding: .2em .28em .14em;
  font: 900 var(--letra-barra)/.98 var(--rotulo);
  text-transform: uppercase; text-wrap: balance;
}
/* Sin pestaña: la barra sola, con las cuatro esquinas */
.rotulo--solo .rotulo__barra { border-radius: var(--esquina); }
/* En positivo, para fondos claros (correo, PDF) */
.rotulo--positivo { --fondo: var(--tinta); --letra: var(--blanco); }

/* Sello oficial de la UE «AI GENERATED»: el SVG trae aire alrededor de la píldora y se recorta aquí sin tocar el fichero */
.sello-ia {
  --h: 22px;
  position: relative; display: inline-block; flex: none;
  height: var(--h); width: calc(var(--h) * 1384.2 / 266.4);
  overflow: hidden; border-radius: 999px;
}
.sello-ia img {
  position: absolute; max-width: none;
  height: calc(var(--h) * 566.93 / 266.4); width: auto;
  left: calc(var(--h) * -207.3 / 266.4); top: calc(var(--h) * -144.4 / 266.4);
}

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */
.cabecera { background: var(--tinta); border-bottom: 1px solid var(--tinta-3); position: relative; z-index: 5; }
.cabecera__fila { display: flex; align-items: center; gap: 20px; min-height: 64px; padding-block: 10px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marca img { height: 40px; width: auto; }
.marca__lema { font: 700 12px/1.25 var(--texto); color: var(--papel-2); }
@media (max-width: 359px) { .marca__lema { display: none; } }
.nav { display: none; }
.nav ul { display: flex; gap: 2px; list-style: none; }
.nav a {
  display: block; padding: 10px 12px; text-decoration: none; white-space: nowrap;
  font: 700 15px/1.2 var(--texto); color: var(--papel);
  border-radius: 6px;
}
.nav a:hover { background: var(--tinta-2); }
.nav a[aria-current="page"] { color: var(--blanco); box-shadow: inset 0 -4px 0 var(--blanco); border-radius: 6px 6px 0 0; }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cabecera__acciones .cabecera__dossieres { display: none; }
.boton-menu {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--blanco);
  border: 2px solid var(--papel-2); border-radius: 6px;
  font: 800 14px/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.boton-menu svg { width: 18px; height: 18px; }
.menu-movil { border-top: 1px solid var(--tinta-3); padding-block: 16px 24px; }
.menu-movil[hidden] { display: none; }
.menu-movil ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-movil ul a {
  display: block; padding: 12px 14px; border-radius: 8px; background: var(--tinta-2);
  text-decoration: none; font: 900 22px/1 var(--rotulo); text-transform: uppercase; color: var(--blanco);
}
.menu-movil__legal { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 700 15px/1.4 var(--texto); }
.menu-movil__legal a { display: inline-block; padding-block: 10px; color: var(--papel); }

@media (min-width: 1000px) {
  .cabecera__fila { min-height: 80px; gap: 28px; }
  .marca img { height: 48px; }
  .marca__lema { font-size: 13px; }
  .nav a { padding-inline: 9px; }
  .nav { display: block; }
  .boton-menu { display: none; }
  .cabecera__acciones .cabecera__dossieres { display: inline-flex; }
}
@media (min-width: 1000px) and (max-width: 1199px) { .marca__lema { display: none; } }
@media (min-width: 1200px) { .nav a { padding-inline: 12px; } }

/* ------------------------------------------------------------------ */
/* Botones y piezas pequeñas                                           */
/* ------------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border: 2px solid transparent; border-radius: 6px;
  font: 800 16px/1.15 var(--texto); text-decoration: none; text-align: center;
  cursor: pointer;
}
.boton--placa { background: var(--blanco); color: var(--tinta); --anillo: var(--blanco); }
.boton--placa:hover { background: var(--papel); }
.boton--tinta { background: var(--tinta); color: var(--blanco); }
.boton--tinta:hover { background: var(--tinta-3); }
.boton--borde { background: transparent; color: var(--blanco); border-color: var(--papel-2); }
.boton--borde:hover { border-color: var(--blanco); background: var(--tinta-2); }
.boton--borde-tinta { background: var(--blanco); color: var(--tinta); border-color: var(--tinta); }
.boton--borde-tinta:hover { background: var(--papel); }
.boton--pequeno { min-height: 44px; padding: 0 16px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.boton[aria-disabled="true"] { cursor: default; border-style: dashed; color: var(--gris-placa); background: var(--blanco); }

/* La palabra que se comenta: una plaquita blanca */
.palabra {
  display: inline-block; padding: 2px 7px 1px; border-radius: 4px;
  background: var(--blanco); color: var(--tinta);
  font: 800 .82em/1.3 var(--texto); letter-spacing: .06em; text-transform: uppercase;
}
.sobre-blanco .palabra, .palabra--tinta { background: var(--tinta); color: var(--blanco); }

.antetitulo { font: 800 13px/1.3 var(--texto); letter-spacing: .06em; text-transform: uppercase; color: var(--papel-2); }
.antetitulo b { color: var(--blanco); font-weight: 800; }

/* Aviso de IA junto al titular (art. 50 del Reglamento de IA) */
.aviso-ia { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font: 700 15px/1.4 var(--texto); color: var(--blanco); }
.aviso-ia > span:last-child { flex: 1 1 13em; }
.aviso-ia a { color: var(--papel); font-weight: 700; }

.miga { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; font: 700 14px/1.3 var(--texto); color: var(--papel-2); }
.miga li + li::before { content: "/"; margin-right: 8px; color: var(--tinta-3); }
.miga a { color: var(--papel-2); }

/* ------------------------------------------------------------------ */
/* El escenario: tinta con un brillo cálido y la trama de puntos de   */
/* las tarjetas del vídeo (puntos de 2 px cada 24 px en dos esquinas) */
/* ------------------------------------------------------------------ */
.escenario {
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 92% 8%, rgba(243, 239, 230, .085), transparent 70%),
    radial-gradient(ellipse 55% 60% at 4% 98%, rgba(0, 0, 0, .4), transparent 70%),
    var(--tinta);
}
.escenario::before, .portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .075) 1.5px, transparent 1.8px);
  background-size: 24px 24px; background-position: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0, #000 10%, transparent 75%), radial-gradient(ellipse 70% 80% at 0 100%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 0, #000 10%, transparent 75%), radial-gradient(ellipse 70% 80% at 0 100%, #000 10%, transparent 75%);
}

/* ------------------------------------------------------------------ */
/* Portadas: las que renderiza la Pi, sin logo, con el sello de IA, la */
/* placa y la cifra dentro de la imagen. Encima, en HTML, solo la      */
/* duración o «Ver el vídeo».                                          */
/* ------------------------------------------------------------------ */
.portada {
  display: block; position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 3 / 4; border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 60% at 92% 10%, rgba(243, 239, 230, .1), transparent 70%),
    radial-gradient(ellipse 70% 60% at 5% 96%, rgba(0, 0, 0, .45), transparent 70%),
    var(--tinta);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.portada::before { background-size: 7cqi 7cqi; background-position: 3.5cqi 3.5cqi; background-image: radial-gradient(circle, rgba(255, 255, 255, .08) .55cqi, transparent .65cqi); }
.portada--sobria { background: radial-gradient(ellipse 80% 60% at 92% 10%, rgba(255, 255, 255, .05), transparent 70%), var(--tinta); }
.portada--916 { aspect-ratio: 9 / 16; }
.portada--169 { aspect-ratio: 16 / 9; }
/* La imagen de la Pi ya trae el brillo, la trama, el sello, la placa y la cifra */
.portada__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada:has(.portada__imagen)::before { content: none; }
/* La línea de borde va encima de la imagen, como en la maqueta */
.portada:has(.portada__imagen)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.portada__duracion {
  position: absolute; right: 5cqi; bottom: 5cqi;
  display: inline-flex; align-items: center; gap: 1.6cqi;
  padding: 1.2cqi 2.2cqi; border-radius: 1.4cqi;
  background: var(--blanco); color: var(--tinta);
  font: 800 max(11px, 4.4cqi)/1 var(--texto);
}
.portada--169 .portada__duracion { right: 3.4cqi; bottom: 3.4cqi; font-size: max(11px, 2.6cqi); padding: .8cqi 1.4cqi; border-radius: .9cqi; }

/* ------------------------------------------------------------------ */
/* Secciones                                                           */
/* ------------------------------------------------------------------ */
.seccion { padding-block: 48px; }
.seccion + .seccion { border-top: 1px solid var(--tinta-3); }
.seccion__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.seccion__cabeza .rotulo { --h: 28px; --letra-barra: 30px; }
.seccion__cabeza > a { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1.3 var(--texto); color: var(--papel); }
.seccion__intro { max-width: 62ch; color: var(--papel); margin-top: 14px; }
/* Sin tarjetas (el primer Short va al destacado, o no hay vídeos largos), la sección no se ve */
.seccion--ultimo:not(:has(.tarjeta)),
.seccion--largos:not(:has(.tarjeta)) { display: none; }
/* Sin «Lo último», la primera sección que se ve va sin raya encima, como «Lo último» debajo del destacado */
.seccion--ultimo:not(:has(.tarjeta)) + .seccion,
.seccion--ultimo:not(:has(.tarjeta)) + .seccion--largos:not(:has(.tarjeta)) + .seccion { border-top: 0; }
@media (min-width: 900px) {
  .seccion { padding-block: 72px; }
  .seccion__cabeza .rotulo { --h: 30px; --letra-barra: 38px; }
}

/* Tarjetas de vídeo. En WordPress la rejilla es el ul de core/post-template y cada li lleva una tarjeta */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; list-style: none; margin: 0; padding: 0; }
.rejilla > li { min-width: 0; display: flex; flex-direction: column; }
.rejilla--larga { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
  .rejilla--larga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tarjeta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tarjeta__enlace { display: flex; flex-direction: column; gap: 12px; text-decoration: none; border-radius: 12px; }
.tarjeta__titulo { font: 900 19px/1.06 var(--rotulo); color: var(--blanco); text-wrap: balance; }
.tarjeta__enlace:hover .tarjeta__titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tarjeta__enlace:hover .portada { box-shadow: inset 0 0 0 2px var(--blanco); }
.tarjeta__enlace:hover .portada:has(.portada__imagen)::after { box-shadow: inset 0 0 0 2px var(--blanco); }
.tarjeta__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 700 13px/1.4 var(--texto); color: var(--papel-2); }
.tarjeta__meta .tema { color: var(--papel); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: 12px; }
@media (min-width: 900px) { .tarjeta__titulo { font-size: 23px; } .rejilla--larga .tarjeta__titulo { font-size: 26px; } }

/* Temas */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; list-style: none; }
@media (min-width: 900px) { .temas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.tema-caja {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  padding: 14px; border-radius: 12px; background: var(--tinta-2);
  text-decoration: none; color: var(--papel);
}
.tema-caja:hover { background: var(--tinta-3); }
.tema-caja .rotulo { --letra-barra: 24px; --esquina: 6px; }
.tema-caja p { font: 400 15px/1.4 var(--texto); }
.tema-caja p b { display: block; font: 800 12px/1.3 var(--texto); letter-spacing: .06em; text-transform: uppercase; color: var(--papel-2); margin-bottom: 4px; }
@media (min-width: 900px) { .tema-caja { padding: 18px; } .tema-caja .rotulo { --letra-barra: 30px; } }

/* Cómo funciona el dossier (patrón alloro-rotulo/como-funciona) */
.pasos { display: grid; gap: 16px; list-style: none; counter-reset: paso; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.paso { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 12px; background: var(--tinta-2); }
.paso__cabeza { display: flex; align-items: center; gap: 14px; }
.paso__num { font: 900 64px/.8 var(--rotulo); color: var(--blanco); }
.paso h3 { font: 900 26px/1 var(--rotulo); color: var(--blanco); text-transform: uppercase; }
.paso p { font-size: 16px; line-height: 1.5; }
.maqueta {
  margin-top: auto; padding: 14px; border-radius: 10px;
  background: var(--tinta); border: 1px solid var(--tinta-3);
  font: 400 14px/1.4 var(--texto);
}
.comentario { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.comentario + .comentario { margin-top: 12px; margin-left: 26px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--tinta-3); display: grid; place-items: center; font: 800 14px/1 var(--texto); color: var(--blanco); overflow: hidden; }
.avatar img { width: 32px; height: 32px; }
.comentario b { font: 800 13px/1.3 var(--texto); color: var(--blanco); }
.comentario p { font-size: 15px; }
.comentario__palabra { font: 900 22px/1.1 var(--rotulo); color: var(--blanco); letter-spacing: .02em; }
.mini-direccion { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--tinta-3); font: 700 14px/1.2 var(--texto); color: var(--papel); }
.mini-campo { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: var(--blanco); color: var(--gris-campo); font-size: 15px; }
.mini-boton { margin-top: 8px; padding: 11px 12px; border-radius: 6px; background: var(--blanco); color: var(--tinta); text-align: center; font: 800 14px/1.2 var(--texto); }
.mini-correo b { display: block; color: var(--blanco); font: 800 14px/1.3 var(--texto); }
.mini-correo span { color: var(--papel-2); font-size: 13px; }
.notas { display: grid; gap: 10px; margin-top: 24px; max-width: 80ch; color: var(--papel); font-size: 16px; }

/* ------------------------------------------------------------------ */
/* Pie                                                                 */
/* ------------------------------------------------------------------ */
.pie { border-top: 1px solid var(--tinta-3); padding-block: 48px 32px; background: var(--tinta); }
.pie__arriba { display: grid; gap: 32px; }
.pie__marca { display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.pie__marca img { height: 56px; width: auto; align-self: flex-start; }
.pie__marca p { font-size: 15px; line-height: 1.5; color: var(--papel); }
.pie__marca strong { font: 900 22px/1.05 var(--rotulo); color: var(--blanco); text-transform: uppercase; }
.pie__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.pie h2 { font: 800 12px/1.3 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--papel-2); margin-bottom: 10px; }
.pie ul { list-style: none; display: grid; gap: 4px; }
.pie ul a { display: inline-block; padding-block: 5px; font: 700 15px/1.3 var(--texto); color: var(--papel); text-decoration: none; }
.pie ul a:hover { text-decoration: underline; color: var(--blanco); }
.pie__legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--tinta-3); display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie__legal a { display: inline-block; padding-block: 6px; font: 800 14px/1.3 var(--texto); color: var(--blanco); }
.pie__responsable { margin-top: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--papel); }
.pie__responsable b { color: var(--blanco); }
.pie__final { margin-top: 18px; font-size: 13px; color: var(--papel-2); }
.hueco {
  display: inline-block; padding: 0 6px; border-radius: 4px;
  border: 1px dashed var(--papel-2); background: rgba(243, 239, 230, .06);
  font-weight: 700; color: var(--blanco); line-height: 1.45;
}
.sobre-blanco .hueco { border-color: var(--gris-placa); background: transparent; color: var(--tinta); }
@media (min-width: 900px) {
  .pie { padding-block: 64px 40px; }
  .pie__arriba { grid-template-columns: 1.1fr 2fr; gap: 48px; }
  .pie__columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Entrada de vídeo: la rejilla (sus piezas son bloques del plugin)    */
/* ------------------------------------------------------------------ */
/* 16 px arriba en el móvil (la maqueta tenía 20): con la línea de «Actualizada» la etiqueta «Ver el vídeo» de la
   fachada acababa a 847 px, 3 por debajo de la primera pantalla de 390 x 844. Así se ve entera (3.12) */
.entrada { padding-block: 16px 8px; }
.entrada__rejilla {
  display: grid; gap: 20px;
  grid-template-areas: "miga" "titulo" "aviso" "video" "dossier";
}
/* Con rectificaciones o actualizaciones, su aviso va encima del titular (área nueva «rect») */
.entrada__rejilla:has(> .entrada__rect) { grid-template-areas: "miga" "rect" "titulo" "aviso" "video" "dossier"; }
.entrada__miga { grid-area: miga; }
.entrada__rect { grid-area: rect; }
.entrada__titulo { grid-area: titulo; }
.entrada__aviso { grid-area: aviso; display: grid; gap: 10px; }
.entrada__video { grid-area: video; }
.entrada__dossier { grid-area: dossier; }
.entrada .rotulo--h1 { --h: 30px; --letra-barra: clamp(31px, 8.6vw, 40px); }
@media (min-width: 900px) {
  .entrada { padding-block: 32px 16px; }
  .entrada__rejilla {
    grid-template-columns: 380px minmax(0, 1fr); column-gap: 56px; row-gap: 22px;
    grid-template-areas: "video miga" "video titulo" "video aviso" "video dossier";
    grid-template-rows: auto auto auto 1fr;
  }
  .entrada__rejilla:has(> .entrada__rect) {
    grid-template-areas: "video miga" "video rect" "video titulo" "video aviso" "video dossier";
    grid-template-rows: auto auto auto auto 1fr;
  }
  /* El vídeo largo (16:9) pide una columna más ancha */
  .entrada__rejilla:has(.fachada--169) { grid-template-columns: 560px minmax(0, 1fr); }
  .entrada .rotulo--h1 { --h: 36px; --letra-barra: 54px; }
}

/* Resumen: «Qué ha pasado», «Por qué te importa» y el dato */
.resumen { padding-block: 40px 16px; }
.resumen__rejilla { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .resumen { padding-block: 56px 24px; }
  .resumen__rejilla { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: start; }
  /* Sin dato, una sola columna */
  .resumen__rejilla:not(:has(.dato)) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* El faldón: un rótulo inferior de tele. Pestaña con el escalón,      */
/* barra blanca y la línea de fuente debajo. Lo usan el dossier y el   */
/* lateral de las páginas legales.                                     */
/* ------------------------------------------------------------------ */
.faldon { --h: 32px; --r: calc(var(--h) * .52); --fondo: var(--blanco); --letra: var(--tinta); position: relative; }
.faldon > .rotulo__pestana { position: relative; z-index: 1; }
.faldon__barra {
  position: relative; background: var(--blanco); color: var(--tinta);
  border-radius: 0 12px 12px 12px; padding: 18px 16px 18px;
  --anillo: var(--tinta);
}
/* Faldón sin pestaña (estados): la barra con las cuatro esquinas */
.faldon--sin-pestana .faldon__barra { border-radius: 12px; }
.faldon__titulo { font: 900 25px/1 var(--rotulo); text-transform: uppercase; text-wrap: balance; }
.faldon__linea {
  margin-top: 8px; padding: 11px 14px; border-radius: 6px;
  background: var(--tinta-2); color: var(--papel);
  font: 700 15px/1.45 var(--texto);
}
.faldon__linea a { color: var(--blanco); }
@media (min-width: 900px) {
  .faldon { --h: 34px; }
  .faldon__barra { padding: 24px 26px 22px; }
  .faldon__titulo { font-size: 32px; }
}

/* ------------------------------------------------------------------ */
/* Página del dossier, de enviado y de los estados: la rejilla         */
/* ------------------------------------------------------------------ */
.pedido__escenario { padding-block: 14px 0; border-bottom: 1px solid var(--tinta-3); }
.pedido__rejilla { display: grid; row-gap: 14px; grid-template-areas: "titulo" "muestra" "faldon"; }
.pedido__miga { display: none; }
.pedido__titulo { grid-area: titulo; }
.pedido .rotulo--h1 { --h: 28px; --letra-barra: 34px; }
.pedido__muestra { grid-area: muestra; display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; }
.pedido__resumen { font: 400 15px/1.45 var(--texto); color: var(--papel); }
.pedido__resumen b { color: var(--blanco); }
.pedido__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pedido__chips span { padding: 3px 8px; border-radius: 4px; background: var(--blanco); color: var(--tinta); font: 800 12px/1.25 var(--texto); letter-spacing: .04em; text-transform: uppercase; }
/* El faldón cuelga sobre el borde del escenario, como un rótulo inferior sobre la imagen */
.pedido__faldon { grid-area: faldon; position: relative; z-index: 2; margin-top: 4px; margin-bottom: -28px; }
.pedido__faldon .faldon__titulo { font-size: 24px; }
/* En el móvil todo el pedido cabe en la primera pantalla de 390 x 844, capa de privacidad incluida */
@media (max-width: 899px) {
  .pedido__faldon .faldon__barra { padding-block: 16px; }
  .pedido__faldon .pedir { margin-top: 12px; }
  .pedido__faldon .pedir__aparte { margin-top: 12px; padding-top: 12px; }
  .pedido__faldon .privacidad { margin-top: 10px; line-height: 1.45; }
  .pedido .enviado__lista { margin-top: 12px; }
  .pedido .enviado__acciones { margin-top: 14px; }
}
.pedido__despues { padding-top: 28px; }
@media (min-width: 900px) {
  .pedido__escenario { padding-block: 40px 0; }
  .pedido__rejilla {
    grid-template-columns: minmax(0, 1fr) 360px; column-gap: 72px; row-gap: 22px;
    grid-template-areas: "miga abanico" "titulo abanico" "info abanico" "faldon abanico";
    grid-template-rows: auto auto auto 1fr;
  }
  .pedido__miga { display: block; grid-area: miga; }
  .pedido .rotulo--h1 { --h: 36px; --letra-barra: 64px; }
  .pedido__muestra { display: contents; }
  .pedido__info { grid-area: info; }
  .pedido__resumen { font-size: 18px; max-width: 46ch; }
  .pedido__faldon { margin-top: 10px; margin-bottom: -112px; max-width: 780px; }
  .pedido__faldon .faldon__titulo { font-size: 32px; }
  .pedido__despues { padding-top: 168px; }
}
/* Los estados no tienen muestra: placa y faldón en una columna */
.pedido--estado .pedido__rejilla { grid-template-areas: "titulo" "faldon"; }
@media (min-width: 900px) {
  .pedido--estado .pedido__rejilla { grid-template-columns: minmax(0, 780px); grid-template-areas: "miga" "titulo" "faldon"; grid-template-rows: auto auto 1fr; }
}
.contenido-dossier { padding-block: 40px 8px; display: grid; gap: 40px; }
@media (min-width: 900px) { .contenido-dossier { grid-template-columns: 1.2fr 1fr; gap: 64px; padding-block: 56px 16px; } }
/* La columna «Cómo te llega» y «Sigue viendo» (en la maqueta, un estilo en línea) */
.contenido-dossier__lado { display: grid; gap: 22px; align-content: start; }
.seccion__cabeza--pegada { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Listas de vídeos: dossieres, temas, índice y 404                    */
/* ------------------------------------------------------------------ */
.lista__cabeza { padding-block: 24px 40px; display: grid; gap: 18px; }
.lista__cabeza .rotulo--h1 { --h: 30px; --letra-barra: 44px; }
.lista__cabeza .seccion__intro { margin-top: 0; }
.lista__cabeza .buscar-palabra { margin-top: 6px; }
.lista__descripcion { max-width: 62ch; color: var(--papel); }
.lista__vacia { color: var(--papel); font-size: 17px; }
.lista__boton { margin-top: 6px; }
@media (min-width: 900px) {
  .lista__cabeza { padding-block: 40px 56px; }
  .lista__cabeza .rotulo--h1 { --h: 36px; --letra-barra: 72px; }
}
/* Paginación de core/query: «Más recientes» y «Anteriores» como botones de borde */
.wp-block-query-pagination { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border: 2px solid var(--papel-2); border-radius: 6px; color: var(--blanco);
  font: 800 16px/1.15 var(--texto); text-decoration: none;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { border-color: var(--blanco); background: var(--tinta-2); }

/* ------------------------------------------------------------------ */
/* Páginas legales                                                     */
/* ------------------------------------------------------------------ */
.legal { padding-block: 24px 56px; }
.legal__cabeza { display: grid; gap: 18px; padding-bottom: 24px; }
.legal .rotulo--h1 { --h: 30px; --letra-barra: 44px; }
.legal__nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.legal__nav a { display: inline-block; padding: 9px 12px; border-radius: 6px; background: var(--tinta-2); font: 700 14px/1.2 var(--texto); text-decoration: none; color: var(--papel); }
.legal__nav a:hover { background: var(--tinta-3); }
.legal__nav a[aria-current="page"] { background: var(--blanco); color: var(--tinta); --anillo: var(--blanco); }
/* .legal delante: el estilo de core/post-content (display: flow-root) sale después de esta hoja */
.legal .legal__cuerpo { max-width: 760px; display: grid; gap: 34px; }
.legal__cuerpo section { display: grid; gap: 12px; }
.legal__cuerpo h2 { font: 900 28px/1 var(--rotulo); text-transform: uppercase; color: var(--blanco); }
.legal__cuerpo h3 { font: 800 18px/1.3 var(--texto); color: var(--blanco); }
.legal__cuerpo p, .legal__cuerpo li { font-size: 17px; line-height: 1.6; }
.legal__cuerpo ul { list-style: none; display: grid; gap: 8px; }
.legal__cuerpo ol { padding-left: 24px; display: grid; gap: 8px; }
.legal__cuerpo ul li { position: relative; padding-left: 24px; }
.legal__cuerpo ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--papel-2); }
.ficha { display: grid; gap: 0; border-radius: 12px; overflow: hidden; background: var(--tinta-2); }
.ficha div { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--tinta-3); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { font: 800 12px/1.3 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--papel-2); }
.ficha dd { margin: 0; font-size: 17px; }
@media (min-width: 900px) {
  .legal { padding-block: 40px 80px; }
  .legal .rotulo--h1 { --h: 36px; --letra-barra: 72px; }
  .ficha div { grid-template-columns: 240px 1fr; gap: 16px; align-items: baseline; }
  .legal__cuerpo h2 { font-size: 34px; }
}
.actualizado { font: 400 14px/1.4 var(--texto); color: var(--papel-2); }

/* Aviso legal: quién responde, en un rótulo inferior al lado del texto */
.legal__rejilla { display: grid; gap: 48px; }
.legal__lado .faldon__titulo { font-size: 28px; }
.contacto-legal { display: grid; gap: 14px; margin: 14px 0 0; }
.contacto-legal dt { font: 800 12px/1.3 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-placa); }
.contacto-legal dd { margin: 4px 0 0; font: 400 16px/1.45 var(--texto); }
@media (min-width: 1100px) {
  .legal__rejilla { grid-template-columns: minmax(0, 760px) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .legal__lado { position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------------ */
/* Idiomas (CONTRATO-IDIOMAS 9, 11 y 12): el selector, la placa de las */
/* portadas traducidas y los avisos de traducción.                     */
/* ------------------------------------------------------------------ */
.boton--borde-papel { background: transparent; color: var(--blanco); border-color: var(--papel-2); --anillo: var(--blanco); }
.boton--borde-papel:hover { border-color: var(--blanco); background: var(--tinta-2); }
.idiomas { position: static; flex: none; }
.idiomas__boton { list-style: none; padding: 0 10px; gap: 6px; min-width: 44px; cursor: pointer; user-select: none; }
.idiomas__boton::-webkit-details-marker { display: none; }
.idiomas__icono { width: 18px; height: 18px; flex: none; }
.idiomas__lista { list-style: none; }
.idiomas__nombre {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px;
  font: 700 15px/1.2 var(--texto); color: var(--papel); text-decoration: none;
}
.idiomas__nombre:hover { background: var(--tinta-3); color: var(--blanco); }
.idiomas__nombre[aria-current="true"] { color: var(--blanco); font-weight: 800; box-shadow: inset 3px 0 0 var(--blanco); }
/* La fuente de los nombres de los idiomas va en línea en el <head>: ver alloro_estilo_nombres_idiomas() del plugin */
.idiomas > .idiomas__lista {
  position: absolute; z-index: 20; top: calc(100% - 1px); left: 16px; right: 16px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px;
  max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border: 1px solid var(--tinta-3); border-radius: 0 0 10px 10px; background: var(--tinta-2);
}
@media (min-width: 900px) {
  .idiomas { position: relative; }
  .idiomas > .idiomas__lista {
    top: calc(100% + 8px); left: auto; right: 0; width: max-content;
    grid-template-columns: repeat(3, 168px); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  }
}
/* Con el selector no cabe el lema en un teléfono: sale en el pie */
@media (max-width: 479px) { .cabecera__fila:has(.idiomas) { gap: 8px; } .cabecera__fila:has(.idiomas) .marca__lema { display: none; } .cabecera__fila:has(.idiomas) .boton-menu { padding-inline: 10px; gap: 8px; } }
.menu-movil__idiomas { margin-top: 16px; }
.menu-movil__titulo { font: 800 12px/1.3 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--papel-2); margin-bottom: 6px; }
.menu-movil ul.idiomas__lista--menu { gap: 2px 8px; }
.menu-movil ul.idiomas__lista--menu a { padding: 0 12px; background: transparent; font: 700 15px/1.2 var(--texto); text-transform: none; color: var(--papel); }
.menu-movil ul.idiomas__lista--menu a[aria-current="true"] { color: var(--blanco); font-weight: 800; }
.pie__idiomas { margin-top: 18px; font-size: 14px; line-height: 1.9; color: var(--papel-2); }
.pie__idiomas a { color: var(--papel); text-decoration: none; }
.pie__idiomas a:hover { color: var(--blanco); text-decoration: underline; }
.pie__idiomas a[aria-current="true"] { color: var(--blanco); font-weight: 800; }

/* La placa en HTML de las portadas traducidas, sobre el fondo sin texto (11.2) */
.portada .rotulo.portada__rotulo { position: absolute; left: 7.5cqi; right: 7.5cqi; top: 27%; --h: 8.6cqi; --letra-barra: calc(12.6cqi * var(--escala, 1)); --esquina: 1.6cqi; }
.portada--916 .rotulo.portada__rotulo { top: 30%; --h: 7.8cqi; --letra-barra: calc(12.6cqi * var(--escala, 1)); }
.portada--169 .rotulo.portada__rotulo { right: 46cqi; top: 26%; --h: 4.2cqi; --letra-barra: calc(6.4cqi * var(--escala, 1)); --esquina: 1cqi; }
.rotulo.portada__rotulo--m { --escala: .84; }
.rotulo.portada__rotulo--s { --escala: .68; }
.rotulo.portada__rotulo--xs { --escala: .54; }
.portada__cifra {
  position: absolute; right: 7cqi; top: 50%; transform: translateY(-50%);
  font: 900 21cqi/.9 var(--rotulo); color: var(--blanco); text-transform: uppercase; text-align: right;
}
.portada__cifra small { display: block; font: 800 2.6cqi/1.3 var(--texto); letter-spacing: .06em; color: var(--papel); }
.portada:not(.portada--169) .portada__cifra { left: 7.5cqi; right: auto; top: auto; bottom: 17cqi; transform: none; text-align: left; font-size: 23cqi; }
.portada:not(.portada--169) .portada__cifra small { font-size: 4.2cqi; margin-top: 1.4cqi; }
.portada:not(.portada--169) .portada__cifra--larga { font-size: 13cqi; }
.portada--169 .portada__cifra--larga { font-size: 11cqi; }

/* Los avisos de traducción (12.2) y las páginas que siguen en castellano (12.1) */
.aviso-traduccion { font: 400 14px/1.45 var(--texto); color: var(--papel-2); }
.aviso-traduccion a { color: var(--papel); font-weight: 700; }
.legal__cuerpo > .aviso-traduccion { margin-bottom: 20px; }
.en-castellano { font-weight: 400; font-size: .92em; }

/* En otros idiomas la pestaña puede ser más larga que la barra: la barra crece para que siga habiendo escalón */
html:not(:lang(es)) .rotulo { display: grid; grid-template-columns: minmax(0, max-content); justify-items: start; width: fit-content; }
html:not(:lang(es)) .rotulo__pestana { margin-right: calc(var(--r) + 8px); max-width: calc(100% - var(--r) - 8px); }
html:not(:lang(es)) .rotulo__barra { justify-self: stretch; }
/* Los nombres de los temas son más largos en otras lenguas: la placa se ajusta a su caja */
html:not(:lang(es)) .tema-caja { container-type: inline-size; }
html:not(:lang(es)) .tema-caja .rotulo { --letra-barra: min(30px, 10.5cqi); }
html:not(:lang(es)) .tema-caja .rotulo__barra { overflow-wrap: anywhere; }