/* Secciones y páginas interiores. Mismo idioma visual que la portada
   (layouts/index.html + home.css): composición sobria, mucho espacio negativo,
   titulares en serif, el naranja como acento puntual.

   Este fichero llega DESPUÉS de style.css, que es el heredado de la plantilla
   vieja. Donde hay que ganarle una regla se hace con especificidad, nunca con
   !important, y va comentado.

   Tokens y ratios de contraste: docs/marca.md del monorepo. */

:root {
  --negro-azulado: #12161D;
  --naranja: #FF6B2C;
  --naranja-texto: #B84412;
  --blanco-roto: #F4F1EC;
  --gris-azulado: #5A6270;
  --gris-claro: #96A0B0;
  --borde: #8A8378;
  --borde-suave: #DCD6CC;
}

/* Las familias NO se declaran aquí: los tokens canónicos son
   --fuente-titular, --fuente-texto y --fuente-mono de style.css, que es donde
   viven los @font-face. Este fichero solo los consume. */

/* Salto al contenido: invisible hasta que se le da el foco con el teclado */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  background: var(--naranja);
  color: var(--negro-azulado);     /* 6.38:1 */
  text-decoration: none;
}
.saltar:focus { left: 0.5rem; top: 0.5rem; }

/* Contenedor: mismas medidas que .autoridad-contenedor de la portada.
   Solo lleva padding lateral. El ritmo vertical lo pone la sección que lo
   envuelve, para no repetir la trampa de la taquigrafía `padding`. */
.contenedor-sec {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.contenedor-sec--estrecho { max-width: 46rem; }


/* ======================================================================
   Cabecera del sitio
   El header viejo era pegajoso, con blur y sombra: eso era lo que más
   delataba la plantilla. Ahora es una línea de nada, estática.
   ====================================================================== */

body > header {
  background: var(--blanco-roto);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--borde-suave);
  position: static;
  padding: 0;
}

body > header .nav-container {
  max-width: 68rem;
  padding: 1.375rem 1.5rem;
  gap: 1rem 2rem;
}

body > header .nav-brand a {
  font-family: var(--fuente-titular);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--negro-azulado);
  text-decoration: none;
}
body > header .nav-brand a:hover { color: var(--naranja-texto); opacity: 1; }

body > header .nav-menu { gap: 1.5rem; }

/* Gana a `.nav-link:hover, .nav-link.active { opacity: .6 }` de style.css */
body > header .nav-link {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-azulado);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
body > header .nav-link:hover {
  opacity: 1;
  color: var(--negro-azulado);
  border-bottom-color: var(--borde-suave);
}
body > header .nav-link.active {
  opacity: 1;
  color: var(--negro-azulado);
  border-bottom-color: var(--naranja-texto);
}

body > header .lang-switcher {
  border-left: 1px solid var(--borde-suave);
  padding-left: 1.5rem;
  margin-left: 0.5rem;
}
body > header .lang-link {
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gris-azulado);
  text-decoration: none;
}
body > header .lang-link:hover { color: var(--naranja-texto); opacity: 1; }


/* ======================================================================
   Cabecera de sección: la banda oscura que abre cada página
   Sustituye a los heroes de 60vh con foto de fondo y overlay negro.
   ====================================================================== */

/* Ojo: style.css estiliza el elemento `header` a secas (pegajoso, con blur,
   sombra y borde). Como esta banda también es un <header>, hay que anular
   esas propiedades una por una: no basta con cambiarle el fondo. */
.cabecera {
  background: var(--negro-azulado);
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  position: static;
  top: auto;
  z-index: auto;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cabecera--compacta { padding-top: 3rem; padding-bottom: 3rem; }

.cabecera-kicker {
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-claro);        /* 6.87:1 sobre negro azulado */
  margin: 0 0 1.25rem;
}

.cabecera-titular {
  font-family: var(--fuente-titular);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--blanco-roto);       /* 16.09:1 */
  margin: 0;
  max-width: 22ch;
  text-transform: none;
}
.cabecera--compacta .cabecera-titular {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  max-width: 26ch;
}

.cabecera-entradilla {
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gris-claro);        /* 6.87:1 */
  margin: 1.5rem 0 0;
  max-width: 38rem;
}
.cabecera-entradilla p { color: inherit; font-size: inherit; margin: 0 0 0.9rem; }
.cabecera-entradilla p:last-child { margin-bottom: 0; }
.cabecera-entradilla strong { color: var(--blanco-roto); font-weight: 600; }
.cabecera-entradilla a {
  color: var(--naranja);           /* 6.38:1 sobre negro azulado */
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cabecera-entradilla a:hover { color: var(--blanco-roto); opacity: 1; }

/* Meta de una ficha, dentro de la banda oscura */
.cabecera-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 1.25rem 0 0;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  color: var(--gris-claro);
}
.cabecera-meta span { color: inherit; }
.cabecera-meta .separador { color: var(--gris-azulado); }

.volver {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--gris-claro);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.volver:hover { color: var(--naranja); opacity: 1; }

/* Enlace suelto al final de la banda: "Ver todas en GitHub" y compañía */
.cabecera-salida {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--naranja);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 107, 44, 0.45);
  padding-bottom: 2px;
}
.cabecera-salida:hover { color: var(--blanco-roto); border-bottom-color: var(--blanco-roto); opacity: 1; }


/* ======================================================================
   Listados: índice editorial, no rejilla de tarjetas
   ====================================================================== */

.listado {
  padding-top: 3.5rem;
  padding-bottom: 4.5rem;
}

.ficha {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  border-top: 1px solid var(--borde-suave);
}
.ficha:first-child { border-top: 0; padding-top: 0.5rem; }

.ficha__lateral {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-azulado);      /* 5.46:1 sobre blanco roto */
}
.ficha__anio {
  font-family: var(--fuente-titular);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--negro-azulado);
}

.ficha__titulo {
  font-family: var(--fuente-titular);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--negro-azulado);
}
.ficha__titulo a { color: inherit; text-decoration: none; }
.ficha__titulo a:hover { color: var(--naranja-texto); opacity: 1; }

.ficha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.75rem;
  font-family: var(--fuente-texto);
  font-size: 0.875rem;
  color: var(--gris-azulado);
}
.ficha__meta .separador { color: var(--borde-suave); }
.ficha__meta svg { width: 0.95em; height: 0.95em; vertical-align: -0.1em; }

.ficha__resumen {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--negro-azulado);
  margin: 0 0 1.125rem;
  max-width: 44rem;
}

.ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Etiqueta de estado. Sin verdes ni ámbares: la jerarquía la da el relleno. */
.etiqueta {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--borde-suave);
  border-radius: 2px;
  color: var(--gris-azulado);
}
.etiqueta--firme {
  background: var(--negro-azulado);
  border-color: var(--negro-azulado);
  color: var(--blanco-roto);       /* 16.09:1 */
}


/* ======================================================================
   Botones y enlaces de acción
   El relleno naranja SIEMPRE lleva el texto en negro azulado (6.38:1).
   Con texto blanco daría 2.84:1 y no pasa AA: ver docs/marca.md.
   ====================================================================== */

.boton,
.boton-naranja {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.boton {
  background: var(--negro-azulado);
  color: var(--blanco-roto);       /* 16.09:1 */
}
.boton:hover { background: var(--naranja); color: var(--negro-azulado); opacity: 1; }

.boton-naranja {
  background: var(--naranja);
  color: var(--negro-azulado);     /* 6.38:1 */
}
.boton-naranja:hover { background: var(--naranja-texto); color: var(--blanco-roto); opacity: 1; }

/* Enlace de texto con flecha. Sobre claro va el naranja apagado (4.81:1). */
.enlace-accion {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--naranja-texto);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.enlace-accion:hover { color: var(--negro-azulado); border-bottom-color: var(--negro-azulado); opacity: 1; }


/* ======================================================================
   Páginas de contenido y prosa
   ====================================================================== */

.pagina-cuerpo {
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

.prosa {
  max-width: 40rem;
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--negro-azulado);
}
.prosa > :first-child { margin-top: 0; }
.prosa p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 1.35rem; }
.prosa h2 {
  font-family: var(--fuente-titular);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--negro-azulado);
  margin: 2.75rem 0 1rem;
  padding-top: 0;
  text-align: left;
  border: 0;
}
.prosa h3 {
  font-family: var(--fuente-titular);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--negro-azulado);
  margin: 2rem 0 0.75rem;
}
.prosa ul, .prosa ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.prosa li { margin: 0 0 0.6rem; padding-left: 0.25rem; }
.prosa a { color: var(--naranja-texto); text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--negro-azulado); opacity: 1; }
.prosa strong { color: var(--negro-azulado); font-weight: 600; }
.prosa blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--naranja);
  color: var(--gris-azulado);
  font-style: normal;
}
.prosa code {
  font-family: var(--fuente-mono);
  font-size: 0.875em;
  background: rgba(18, 22, 29, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.prosa pre {
  font-family: var(--fuente-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--negro-azulado);
  color: var(--blanco-roto);
  padding: 1.25rem;
  border-radius: 3px;
  overflow-x: auto;
  margin: 0 0 1.5rem;
}
.prosa pre code { background: none; padding: 0; color: inherit; }
/* Las fotos van contenidas, nunca a sangre: docs/marca.md */
.prosa img { display: block; width: 100%; max-width: 900px; height: auto; border-radius: 3px; margin: 2rem 0; }
.prosa hr { border: 0; border-top: 1px solid var(--borde-suave); margin: 2.5rem 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0 0 1.5rem; }
.prosa th, .prosa td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--borde-suave); }
.prosa th { font-weight: 600; }
/* Una tabla ancha se desplaza sola; la página no scrollea en horizontal */
.prosa-tabla { overflow-x: auto; }

/* Abstract de un paper: una línea naranja y nada más */
.abstract {
  max-width: 40rem;
  margin: 0 0 2.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--naranja);
}
.abstract__rotulo {
  font-family: var(--fuente-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-azulado);
  margin: 0 0 0.5rem;
}
.abstract__texto {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--negro-azulado);
  margin: 0;
}

.pagina-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  max-width: 40rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde-suave);
}


/* ======================================================================
   YouTube
   ====================================================================== */

.videos {
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}
/* Si la rejilla viene pegada a la prosa, el hueco se cuenta una sola vez */
.pagina-cuerpo + .videos,
.videos + .videos { padding-top: 0; }
.videos-titulo {
  font-family: var(--fuente-titular);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--negro-azulado);
  margin: 0 0 1.75rem;
  letter-spacing: -0.01em;
}
.videos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem;
}
.videos-rejilla--verticales {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  max-width: 48rem;
}
.video { margin: 0; }
.video__marco {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--borde-suave);
  border-radius: 3px;
  background: var(--negro-azulado);
}
.video__marco--vertical { padding-bottom: 177.78%; }
.video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__titulo {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--gris-azulado);
  margin: 0.75rem 0 0;
}


/* ======================================================================
   Pie
   Clases nuevas (.pie-*) para no arrastrar las reglas de .footer-* de
   style.css. El degradado y las rayas del elemento sí hay que anularlos.
   ====================================================================== */

footer.pie {
  background: var(--negro-azulado);
  color: var(--blanco-roto);
  margin-top: 0;
  padding: 0;
  overflow: visible;
}
footer.pie::before { content: none; }

.pie-contenedor {
  max-width: 68rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
}

.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(244, 241, 236, 0.14);
}

.pie-kicker {
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-claro);
  margin: 0 0 1rem;
}

.pie-titular {
  font-family: var(--fuente-titular);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blanco-roto);
  margin: 0 0 1rem;
}

.pie-texto {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gris-claro);
  margin: 0 0 1.75rem;
  max-width: 32rem;
}

.pie-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.pie-columna h2 {
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-claro);
  margin: 0 0 0.9rem;
}
.pie-columna ul { list-style: none; margin: 0; padding: 0; }
.pie-columna li { margin: 0 0 0.55rem; }
.pie-columna a {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  color: var(--blanco-roto);
  text-decoration: none;
}
.pie-columna a:hover { color: var(--naranja); opacity: 1; }

.pie-legal {
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  color: var(--gris-claro);
  margin: 1.75rem 0 0;
}


/* ======================================================================
   Móvil. Todo tiene que entrar a 375 px sin desbordes horizontales.
   ====================================================================== */

@media (max-width: 60rem) {
  .pie-rejilla { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 52rem) {
  /* style.css centra la cabecera y le pone al selector de idioma un borde
     superior a todo lo ancho. Aquí se mantiene alineada a la izquierda. */
  body > header .nav-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
    padding: 1.125rem 1.5rem;
  }
  body > header .nav-menu { justify-content: flex-start; }
  body > header .lang-switcher {
    width: auto;
    border-top: 0;
    border-left: 1px solid var(--borde-suave);
    padding-top: 0;
    padding-left: 1rem;
    margin-top: 0;
    margin-left: 0;
    justify-content: flex-start;
  }

  .cabecera { padding-top: 3rem; padding-bottom: 3rem; }
  .cabecera--compacta { padding-top: 2.25rem; padding-bottom: 2.25rem; }

  .ficha {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .ficha__lateral {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
  }
  .ficha__anio { font-size: 1.125rem; }

  .listado { padding-top: 2.5rem; padding-bottom: 3rem; }
  .pagina-cuerpo { padding-top: 2.5rem; padding-bottom: 3rem; }
  .videos { padding-top: 2.5rem; padding-bottom: 3rem; }
}

@media (max-width: 34rem) {
  .contenedor-sec { padding-left: 1.25rem; padding-right: 1.25rem; }
  .pie-contenedor { padding: 3rem 1.25rem 2rem; }
  .pie-columnas { grid-template-columns: 1fr; gap: 1.75rem; }

  .cabecera-titular { max-width: none; }
  .ficha__acciones { gap: 0.75rem 1.125rem; }
  .boton, .boton-naranja { padding: 0.7rem 1.25rem; }

  /* La cabecera del sitio en columna, como ya hacía style.css, pero sin
     que los enlaces se amontonen */
  body > header .nav-container { padding: 1rem 1.25rem; gap: 0.75rem; }
  body > header .nav-menu { gap: 0.75rem 1.125rem; }
  body > header .lang-switcher { margin-left: 0; padding-left: 0.9rem; }
}