/* =======================================================================
   Jonathan Mardones — Periodista
   ETAPA 2: paleta y tipografía reales, según "Configuración Template.pdf".

   Colores confirmados por Claudio: --color-dark (#1E1E1E) y --color-celeste
   (#9CB9D5). El resto (violeta, coral, rosa apagado, rosa del logo) son
   estimados por muestreo de la captura — quedan aislados en variables para
   corregir con un solo cambio cuando tengas los hex exactos de Figma.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Source+Serif+4:wght@400;600&display=swap');

:root {
  /* Confirmados */
  --color-dark: #1e1e1e;
  --color-celeste: #9cb9d5;
  /* Tema de cada botón del menú (fondo + texto), en hover y cuando está
     activo — ver .menu-item[data-tab="…"]. El fondo de "violeta" se
     reutiliza también en el fondo de su entrada
     (.entrada[data-panel="violeta"]); el de "ginebra" tiene su propio
     tono aparte para el fondo de la entrada (--color-lima-fondo, más
     abajo), porque no coincide exactamente con el de su botón. */
  --color-azul-acero: #94b0ce; /* botón "Premio Nuevas Plumas" */
  --color-azul-marino: #003160;
  --color-violeta-oscuro: #3a3084; /* botón "Investigación Violeta Parra" */
  --color-lavanda: #b1b1ff;
  --color-ciruela: #221b33; /* botón "Fragmentos de Ginebra" */
  --color-lima-palido: #d1e588;
  --color-lima-fondo: #f8ffe0; /* fondo de la entrada "Ginebra" (no es el mismo tono que --color-lima-palido) */

  /* Estimados por muestreo — ajustar con hex real cuando lo tengas */
  --color-violeta: #2d2768;
  --color-coral: #ea5e58;
  --color-coral-2: #ee6961;
  --color-mostaza: #dba734;
  --color-rosa-apagado: #d7c2c2;
  --color-rosa-palido: #f8e3e3;
  --color-terracota: #a65850; /* legible sobre oscuro Y claro, para texto que puede cruzar la diagonal */
  --color-gris-claro: #d9d9d9;

  --color-bg: #ffffff;
  --color-text: var(--color-dark);
  --color-on-dark: var(--color-rosa-palido);
  --color-on-dark-soft: #b8b0b0;

  /* Tipografía */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Grid Figma: frame 1440 / margen 80 / gutter 24 / 12 columnas
     -> columna de contenido = 1440 - 80*2 = 1280px */
  --maxw: 1280px;
  --gap: clamp(1.25rem, 4vw, 3rem);
  /* Margen lateral: reproduce los 188px a 1440 de ancho y se achica en
     pantallas menores en vez de romperse. Úsalo para TODO padding lateral
     que deba alinearse con --maxw. */
  --margin-x: clamp(1.25rem, calc((100vw - var(--maxw)) / 2), 999px);

  /* Sistema de columnas Figma (12 columnas, gutter 24px) para calcular
     anchos exactos de "N columnas" dentro de --maxw, en vez de valores
     a ojo. --col = ancho de 1 columna; una caja de N columnas mide
     N*--col + (N-1)*--grid-gutter. */
  --grid-cols: 12;
  --grid-gutter: 24px;
  --col: calc((var(--maxw) - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols));
  /* "Entrar" una columna: ancho de 1 columna + su gutter. Se usa como
     sangría izquierda del cuerpo de texto de cada "entrada" (nivel de
     detalle tipo blog), dejando el título y las imágenes al margen
     general del sitio. */
  --inset: calc(var(--col) + var(--grid-gutter));

  /* Ancho del logo fijo (ver .logo img) y espacio libre sobre la foto de
     portada de cada entrada, entre el menú y la foto. Al elegir un botón la
     página baja hasta el borde superior de la entrada, y ese espacio es
     donde queda el logo fijo: por eso en pantallas chicas (ver más abajo)
     crece hasta alto del logo + aire arriba y abajo. */
  --logo-w: clamp(110px, 14vw, 180px);
  --cover-space: calc(var(--gap) * 2);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

.icon-img {
  width: 25%;
  max-width: 64px;
  fill: var(--color-bg);
  opacity: .85;
}

/* Fotos reales dentro de las cajas placeholder (.foto-placeholder,
   .entrada-imagen, .carrusel-imagen, .articulo-thumb): llenan toda la
   caja recortando lo que sobre, sin deformarse. */
.foto-placeholder img,
.entrada-imagen img,
.carrusel-imagen img,
.articulo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ HEADER ============ */

.site-header {
  background: var(--color-dark);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Un solo sistema de margen lateral en todo el sitio: padding con
     --margin-x, igual que .menu-item, sin max-width/margin:auto. Esa
     combinación fallaba en los dos extremos (duplicaba el margen en
     monitores grandes, y no generaba ninguno en ventanas angostas,
     porque el auto-margen solo reparte espacio cuando el viewport es
     más ancho que --maxw). --margin-x solo ya resuelve ambos casos. */
  padding: 1.25rem var(--margin-x);
}

/* Logo: imagen real (Jonathan Mardones + tag "Periodista" ya integrados en
   el archivo), fija en pantalla durante todo el scroll y por encima de
   cualquier otro elemento del sitio — por eso sale del flujo del header
   (position: fixed) en vez de ser un hijo normal de .header-inner; el
   nav de la derecha no se ve afectado (ver margin-left: auto abajo). */
.logo {
  position: fixed;
  top: 1.25rem;
  left: var(--margin-x);
  z-index: 999;
  display: block;
  line-height: 0;
}

.logo img {
  display: block;
  width: var(--logo-w);
  height: auto;
}

.header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  /* El logo ya no ocupa espacio en el flujo (quedó position: fixed), así
     que sin esto el nav se iría al extremo izquierdo del header en vez
     de mantenerse a la derecha como estaba. */
  margin-left: auto;
  /* Cuando no hay espacio para empujarlo a la derecha (pantallas
     angostas) el nav queda pegado al borde izquierdo del header, justo
     donde vive el logo fijo — este padding le reserva ese espacio para
     que sus links nunca queden debajo del logo. En desktop no cambia
     nada (el margin-left: auto ya lo manda a la derecha). */
  padding-left: 8rem;
  /* Espacio para el selector de idioma, que va fijo en la esquina
     superior derecha (ver .header-controls) y no ocupa lugar en el flujo. */
  margin-right: 7rem;
}

/* Controles fijos arriba a la derecha: selector de idioma (siempre) y botón
   de menú hamburguesa (solo mobile). Fondo propio para que se lean sobre
   cualquier color de sección, igual que el logo fijo. */
.header-controls {
  --ctrl-h: 40px;
  position: fixed;
  top: 1.25rem;
  right: var(--margin-x);
  z-index: 1000;
  display: flex;
  gap: .5rem;
}

.lang-switch {
  display: flex;
  background: var(--color-dark);
  border: 1px solid rgba(248, 227, 227, .35);
}

.lang-btn {
  min-width: 44px;
  height: calc(var(--ctrl-h) - 2px);
  padding: 0 .6rem;
  background: transparent;
  border: none;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-on-dark-soft);
  transition: color .15s ease, background-color .15s ease;
}

.lang-btn:hover,
.lang-btn:focus-visible {
  color: var(--color-coral);
}

.lang-btn[aria-pressed="true"] {
  background: var(--color-rosa-palido);
  color: var(--color-dark);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ctrl-h);
  height: var(--ctrl-h);
  padding: 0;
  background: var(--color-dark);
  border: 1px solid rgba(248, 227, 227, .35);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  border-color: var(--color-coral);
}

/* Tres barras que se vuelven una X cuando el menú está abierto. */
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-rosa-palido);
  transition: transform .2s ease, background-color .2s ease, top .2s ease;
}

.menu-toggle-bars {
  position: relative;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after  { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

.nav-link {
  background: none;
  border: none;
  padding: .25rem 0;
  font-size: .85rem;
  color: var(--color-on-dark-soft);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-coral);
  border-bottom-color: var(--color-coral);
}

/* ============ PRESENTACIÓN ("Home") ============
   Fondo dividido en diagonal del vértice inferior-izquierdo al vértice
   superior-derecho: triángulo superior-izquierdo oscuro, triángulo
   inferior-derecho gris claro. */

.presentacion {
  position: relative;
  overflow: hidden;
  background: var(--color-gris-claro);
}

.presentacion::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  /* Diagonal literal: del vértice inferior-izquierdo al vértice
     superior-derecho, como en el PDF. */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}

.presentacion-inner {
  display: grid;
  /* Columna de la foto = 3 de las 12 columnas (3*--col + 2 gutters entre
     ellas), con 200px de piso para pantallas angostas. */
  grid-template-columns: minmax(200px, calc(var(--col) * 3 + var(--grid-gutter) * 2)) 1fr;
  gap: var(--gap);
  /* Mismo sistema que .header-inner: padding con --margin-x, sin
     max-width/margin:auto (ver nota ahí). */
  padding: var(--gap) var(--margin-x);
  /* Extra aire abajo: con la diagonal llegando al vértice real, las
     credenciales necesitan más despeje vertical para no cruzar la línea. */
  padding-bottom: calc(var(--gap) * 3);
  position: relative;
  z-index: 1;
}

.perfil {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.foto-placeholder {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.foto-placeholder::after {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  background: var(--color-coral);
  z-index: -1;
}

.credenciales {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.credenciales p {
  margin: 0;
}

/* "Periodista": la línea más grande del bloque, en gris claro. */
.cred-profesion {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-gris-claro);
}

/* Terracota: se mantiene legible tanto sobre el triángulo oscuro como
   sobre el claro, ya que la diagonal ahora llega al vértice real y puede
   cruzar por debajo de este bloque en pantallas angostas.
   Cada título va en una sola frase: institución/diploma en negrita y el
   lugar en peso normal, a continuación. */
.credencial {
  font-size: .95rem;
  line-height: 1.35;
  color: var(--color-terracota);
}

.credencial strong {
  font-weight: 700;
}

.bio {
  /* Mismo oscuro que el triángulo de .presentacion::before: al ser
     idéntico, la caja de la bio se "suelda" visualmente con ese
     triángulo formando una sola silueta oscura, que contrasta contra el
     triángulo gris claro del otro lado. */
  background: var(--color-dark);
  color: var(--color-coral);
  padding: var(--gap);
  font-size: 1.15rem;
  align-self: start;
  /* 8 de las 12 columnas (decisión editorial), mismo cálculo que el
     ancho de la foto: 8*--col + 7 gutters entre ellas. */
  max-width: calc(var(--col) * 8 + var(--grid-gutter) * 7);
}

.bio p { color: var(--color-coral); }

/* Símbolos ◐ ◓ que separan los párrafos de la bio (SVG, para que se vean
   iguales en cualquier equipo): centrados y en gris claro. */
.bio-sep {
  display: block;
  margin: 1.75rem 0;
  text-align: center;
  line-height: 0;
  color: var(--color-gris-claro);
}

.bio-sep svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* ============ MENÚ PRINCIPAL (tabs) ============ */

.menu-principal {
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
}

/* Permite animar el color del degradé de abajo (los navegadores no
   interpolan variables CSS comunes; con @property sí). */
@property --menu-color {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

.menu-item {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.15);
  /* El color de fondo real vive en esta variable, no en `background`
     directo: así cada estado (hover/activo) solo cambia un valor y el
     degradé de abajo se mantiene igual en todos. En reposo (ni hover ni
     activo) los tres botones son iguales: gris claro. */
  --menu-color: var(--color-gris-claro);
  /* Al ser un <button>, el navegador le pone su propio background-color
     por defecto (gris claro) — sin esto, ese gris se vería en vez del
     fondo oscuro de .menu-principal en las franjas "transparent" de abajo. */
  background-color: transparent;
  /* El color no pinta todo el ancho: dos "cortes" duros dejan --margin-x
     de transparente a cada lado, mostrando el fondo oscuro de
     .menu-principal por detrás — el mismo margen que usa el resto del
     contenido (header/entrada/footer), en vez de una barra a sangre. */
  background-image: linear-gradient(
    to right,
    transparent 0 var(--margin-x),
    var(--menu-color) var(--margin-x) calc(100% - var(--margin-x)),
    transparent calc(100% - var(--margin-x)) 100%
  );
  color: var(--color-dark);
  text-align: left;
  /* El rectángulo de color mantiene su borde en --margin-x (igual que
     .entrada-titulo/.entrada-imagen), pero el TEXTO entra un poco más:
     --margin-x + --inset, el mismo punto donde arranca el contenido de
     la entrada después de la imagen de portada (.entrada-texto, .caption,
     .articulos-titulo, .btn-newsletter). Por eso ya no es un solo valor
     para los 4 lados: el derecho se queda en --margin-x. */
  padding: 1rem var(--margin-x) 1rem calc(var(--margin-x) + var(--inset));
  font-family: var(--font-base);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.75rem); /* ~60px en desktop */
  line-height: 1.1;
  max-width: none;
  width: 100%;
  transition: --menu-color .15s ease, color .15s ease;
}

.menu-item:last-child { border-bottom: none; }

/* Identidad propia de cada botón: en reposo los tres son gris claro (ver
   --menu-color de arriba); al pasar el mouse se "pintan" de su propio
   color, y si se hace clic el botón se queda pintado igual (misma regla,
   por eso :hover/:focus-visible y .is-active van juntos) hasta que se
   elige otro — momento en el que ese vuelve a gris y el nuevo se pinta. */
.menu-item[data-tab="premio"]:hover,
.menu-item[data-tab="premio"]:focus-visible,
.menu-item[data-tab="premio"].is-active {
  --menu-color: var(--color-azul-acero);
  color: var(--color-azul-marino);
}

.menu-item[data-tab="violeta"]:hover,
.menu-item[data-tab="violeta"]:focus-visible,
.menu-item[data-tab="violeta"].is-active {
  --menu-color: var(--color-violeta-oscuro);
  color: var(--color-lavanda);
}

.menu-item[data-tab="ginebra"]:hover,
.menu-item[data-tab="ginebra"]:focus-visible,
.menu-item[data-tab="ginebra"].is-active {
  --menu-color: var(--color-ciruela);
  color: var(--color-lima-palido);
}

/* La flecha es siempre del mismo coral, sin importar el color propio del
   botón activo (por eso tiene su color explícito, en vez de heredar el
   `color` de arriba). */
.menu-item.is-active::after {
  content: " ↓";
  color: var(--color-coral-2);
}

/* ============ ENTRADAS ============ */

.entradas {
  background: var(--color-celeste);
}

.entrada {
  display: none;
  position: relative;
  /* Mismo sistema que .header-inner/.presentacion-inner: padding con
     --margin-x, sin max-width/margin:auto (ver nota en .header-inner). */
  padding: var(--gap) var(--margin-x);
  /* Dos líneas verticales marcando el borde del ancho de contenido (donde
     empiezan/terminan .entrada-imagen y .entrada-titulo), corriendo toda
     la altura de la entrada. No usa ::before/::after porque esos ya están
     ocupados por las diagonales del margen. Mismo color/opacidad que esas
     diagonales (--color-dark al 55%, vía color-mix en vez de opacity para
     no afectar el resto de la caja) para que ambas líneas se vean iguales. */
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-dark) 35%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--color-dark) 35%, transparent) 0 0);
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%;
  background-position: var(--margin-x) 0, calc(100% - var(--margin-x)) 0;
}

.entrada.is-active {
  display: block;
}

/* Líneas diagonales decorativas en los márgenes (fuera del container) —
   aproximación: Claudio anota estas líneas con anclajes ligeramente
   distintos a cada lado; acá quedan simétricas hasta que confirme los
   puntos exactos. */
.entrada::before,
.entrada::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--margin-x);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: .55;
}

.entrada::before {
  /* Antes vivían afuera de la caja (left: -margin-x) porque la caja
     "flotaba" centrada con su propio margen alrededor. Ahora el margen
     es el padding de la propia caja, así que estas líneas van adentro,
     pegadas al borde, ocupando exactamente ese padding. */
  left: 0;
  background-image: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--color-dark) 50%, transparent calc(50% + .5px));
}

.entrada::after {
  right: 0;
  background-image: linear-gradient(to bottom left, transparent calc(50% - .5px), var(--color-dark) 50%, transparent calc(50% + .5px));
}

.entrada-imagen {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* Aire extra respecto al menú (ver corrección en PDF): se suma al
     padding-top que ya trae .entrada, para que no quede pegada. */
  margin-top: calc(var(--cover-space) - var(--gap));
}

.entrada-imagen::before {
  /* Línea diagonal en ese espacio, mismo estilo/técnica que las líneas
     de los márgenes laterales (.entrada::before/::after) — un gradiente
     esquina a esquina — pero acá la caja es ancha y baja en vez de
     angosta y alta, así que la misma diagonal se ve casi horizontal.
     Altura = --cover-space para cubrir TODO el espacio hasta el menú: el
     padding-top que ya trae .entrada, más el margin-top de acá arriba
     — si no, la línea queda flotando sin tocar el borde del menú. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cover-space) * -1);
  height: var(--cover-space);
  background-image: linear-gradient(to top right, transparent calc(50% - .5px), var(--color-dark) 50%, transparent calc(50% + .5px));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .55;
  pointer-events: none;
}

.entrada-contenido {
  position: relative;
  z-index: 1;
}

.entrada-titulo {
  margin: 0;
  padding: 1.25rem clamp(1.25rem, 4vw, 2rem) 1.25rem var(--inset);
  background: var(--color-dark);
  /* Color fijo en las 3 entradas (no cambia según el tema de cada una),
     igual que la flecha del menú (ver .menu-item.is-active::after). */
  color: var(--color-coral-2);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem); /* ~60px en desktop */
  line-height: 1.1;
}

/* Fondo propio de cada entrada (ver los temas de botón en :root). Premio
   no tiene regla propia: usa el celeste compartido de .entradas de
   siempre, sin cambios. */
.entrada[data-panel="violeta"] {
  background: var(--color-lavanda);
}

.entrada[data-panel="ginebra"] {
  /* No es el mismo tono que --color-lima-palido (el texto de su botón):
     el fondo de la entrada es un verde-amarillo más pálido aparte. */
  background: var(--color-lima-fondo);
}

/* Separador de apertura (ciudad + fecha), a modo de bajada de artículo.
   Va entre el título y el texto, a la misma sangría que el texto. */
.entrada-meta {
  margin-left: var(--inset);
  padding-top: 1.75rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-dark);
}

.entrada-meta p {
  margin: 0;
}

.entrada-meta::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 1.1rem;
  background: currentColor;
}

.entrada-meta + .entrada-texto {
  padding-top: 2rem;
}

.entrada-texto {
  /* Margen simétrico: 70ch para lectura, pero nunca más ancho que
     maxw menos el --inset de AMBOS lados (por si 70ch superara el
     espacio disponible en algún caso). */
  max-width: min(70ch, calc(var(--maxw) - var(--inset) * 2));
  color: var(--color-dark);
  font-size: 1.05rem;
  padding-top: 1.75rem;
  /* Sangría de "nivel de detalle": entra 1 columna respecto al título/
     imagen, que quedan al margen general (--margin-x). */
  margin-left: var(--inset);
}

.link-articulo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  color: var(--color-violeta);
  text-decoration: underline;
}

.icon-external {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Video */
.video-placeholder {
  margin-top: 1.5rem;
  /* Mismo nivel de detalle que .entrada-texto (ver comentario ahí). */
  margin-left: var(--inset);
  aspect-ratio: 16 / 9;
  /* Margen derecho igual al izquierdo: se resta --inset de ambos lados
     (antes llegaba hasta el borde del título/imagen; ver corrección). */
  max-width: calc(var(--maxw) - var(--inset) * 2);
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.entrada-video {
  margin-top: 1.5rem;
  margin-left: var(--inset);
  max-width: calc(var(--maxw) - var(--inset) * 2);
  width: 100%;
  display: block;
}

.play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-rosa-palido);
  background: transparent;
  color: var(--color-rosa-palido);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  margin-left: 3px;
}

.caption {
  margin-top: .5rem;
  margin-left: var(--inset);
  font-size: .8rem;
  color: var(--color-violeta);
}

/* Carrusel "a sangre" */
.carrusel-wrap {
  position: relative;
  margin-top: var(--gap);
  /* Ya no es "a sangre" (100vw): mismo ancho que .entrada-imagen, que ya
     llega al margen general de la entrada (--margin-x, vía el padding de
     .entrada) sin indent extra — a diferencia de .entrada-texto/
     .entrada-video, que sí entran un nivel más con --inset. */
  width: 100%;
  display: flex;
  align-items: center;
  /* Mismo violeta que el fondo de la entrada "Investigación Violeta
     Parra" (.entrada[data-panel="violeta"]), no el --color-violeta
     genérico que usan otros elementos (thumbnails, links, captions). */
  background: var(--color-lavanda);
}

.carrusel {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
}

.carrusel::-webkit-scrollbar { display: none; }

.carrusel-item {
  margin: 0;
  flex: 0 0 min(420px, 80vw);
  scroll-snap-align: start;
}

.carrusel-imagen {
  aspect-ratio: 4 / 5;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrusel-item figcaption {
  padding: .6rem 1rem;
  font-size: .8rem;
  color: var(--color-dark);
}

.carrusel-flecha {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--color-coral);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrusel-flecha svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Artículos recomendados */
.articulos-titulo {
  margin: 2rem 0 1rem var(--inset);
  font-size: 1.1rem;
  font-weight: 700;
}

.articulos-lista {
  list-style: none;
  margin: 0 0 1.5rem var(--inset);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Mismo margen simétrico que .entrada-texto (ver comentario ahí). */
  max-width: min(70ch, calc(var(--maxw) - var(--inset) * 2));
}

.articulo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.articulo-thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  background: var(--color-violeta);
  display: flex;
  align-items: center;
  justify-content: center;
}

.articulo-thumb .icon-img {
  width: 45%;
  fill: var(--color-coral);
}

/* Foto dentro del texto de una entrada (p. ej. la foto de Violeta en
   Nuevas Plumas). Placeholder oscuro hasta que llegue la imagen real; con
   <img> dentro se ajusta solo. Queda dentro de .entrada-texto, así que ya
   respeta su sangría y su ancho máximo. */
.entrada-foto {
  margin: 0 0 1em;
  aspect-ratio: 2007 / 1392;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.entrada-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.link-articulo em {
  font-weight: 400;
}

/* Portada de Fragmentos de Ginebra: la pieza es 16:9 y trae textos cerca de
   los bordes (fecha, nombre), así que se muestra completa, sin recorte. */
.entrada[data-panel="ginebra"] .entrada-imagen {
  aspect-ratio: 16 / 9;
}

.entrada-foto .icon-img {
  width: 14%;
  fill: var(--color-coral);
}

/* Frase que presenta un link o una foto: queda pegada a lo que anuncia. */
.entrada-texto p:has(+ p > .link-articulo),
.entrada-texto p:has(+ .entrada-foto) {
  margin-bottom: .5rem;
}

/* Artículos publicados: cada ítem lleva título (link) + descripción a la
   izquierda y miniatura a la derecha, como en "Artículos recomendados". */
.articulos-lista--pub {
  gap: 1.5rem;
}

.articulos-lista--pub .articulo-item {
  align-items: flex-start;
}

:root {
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3Z'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7Z'/%3E%3C/svg%3E");
}

.articulo-info {
  flex: 1 1 auto;
  min-width: 0;
}

.articulo-info .link-articulo {
  /* El título puede ser largo: el ícono se queda pegado a la última línea. */
  display: inline;
}

/* Ícono "abre en otra pestaña" dibujado como máscara pegada a la última
   palabra (word joiner): así nunca queda solo en una línea. */
.articulo-info .link-articulo .icon-external {
  display: none;
}

.articulo-info .link-articulo > span::after {
  content: "\2060";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: .35rem;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--icon-external) center / contain no-repeat;
  mask: var(--icon-external) center / contain no-repeat;
}

.articulo-desc {
  margin-top: .4rem;
  color: var(--color-dark);
  font-size: .95rem;
  line-height: 1.5;
}

.btn-newsletter {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--color-dark);
  border: 2px solid var(--color-dark);
  color: var(--color-rosa-palido);
  text-decoration: none;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  padding: .75rem 1.25rem;
  margin-left: var(--inset);
}

.btn-newsletter:hover {
  background: var(--color-coral);
  border-color: var(--color-coral);
  color: var(--color-dark);
}

.btn-newsletter svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Portada con video (entrada Nuevas Plumas): al cargar se ve el afiche con el
   botón de play; al darle play aparece el video encima, centrado, con el
   mismo alto que la portada. Proporción: cámbiala en --video-ratio
   (1 / 1 = cuadrado; 4 / 5 = más alto; 16 / 9 = apaisado). */
.entrada-imagen--video {
  --video-ratio: 1 / 1;
  --video-h: 100%;         /* alto del video respecto de la portada */
}

.portada-video {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: var(--video-h);
  max-width: 100%;
  aspect-ratio: var(--video-ratio);
  background: #000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.entrada-imagen--video.is-playing .portada-video {
  display: block;
}

.entrada-imagen--video.is-playing .play-btn--portada {
  display: none;
}

.portada-video iframe,
.portada-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}

.play-btn--portada {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  background: rgba(30, 30, 30, .72);
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.play-btn--portada:hover:not(:disabled) {
  background: var(--color-dark);
  transform: translate(-50%, -50%) scale(1.06);
}

.play-btn--portada:disabled {
  cursor: default;
  opacity: .85;
}

/* ============ FOOTER ============ */

.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.footer-inner {
  /* Mismo sistema que .header-inner/.presentacion-inner/.entrada: padding
     con --margin-x, sin max-width/margin:auto (ver nota en .header-inner). */
  padding: var(--gap) var(--margin-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-contacto h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}

.footer-contacto p {
  margin: 0 0 .4rem;
  font-size: .9rem;
  color: var(--color-on-dark);
}

.footer-contacto a {
  text-decoration: none;
}

.footer-contacto a:hover {
  color: var(--color-coral);
  text-decoration: underline;
}

/* Correo + logo de LinkedIn en la misma línea. */
.footer-correo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-correo .social-linkedin svg {
  width: 22px;
  height: 22px;
}

.footer-social {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-on-dark);
  text-decoration: none;
}

.social-link:hover {
  color: var(--color-coral);
}

.social-link svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.social-substack span {
  font-size: 1.1rem;
  font-weight: 600;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 760px) {
  /* Sin sangría de segundo nivel en mobile: --inset (108px, sale de la
     grilla de 12 columnas de escritorio) se come ~25% del ancho y deja el
     texto angosto. Con 0 todo lo que la usa (texto de las entradas, título,
     captions, video, botón del newsletter y texto de los botones del menú)
     queda alineado al margen general del sitio, igual que las imágenes. */
  :root {
    --inset: 0px;
  }

  /* Las dos piezas con fondo propio (rectángulo del botón del menú y barra
     oscura del título) ya no reciben aire de --inset, así que el texto se
     les pegaba al borde: se les da un padding interno fijo. */
  .menu-item {
    padding-left: calc(var(--margin-x) + 1rem);
    padding-right: calc(var(--margin-x) + 1rem);
  }

  .entrada-titulo {
    padding-left: 1rem;
  }

  .presentacion-inner {
    grid-template-columns: 1fr;
  }

  .presentacion::before {
    /* En mobile todo se apila en una sola columna: se deja el fondo
       oscuro sólido y se suelta el acento diagonal para no cruzar el
       contenido. */
    clip-path: none;
  }

  /* Foto y títulos en dos columnas iguales (solo mobile); la bio queda
     debajo, separada por un filete. */
  .perfil {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
  }

  .perfil > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .foto-placeholder {
    max-width: none;
  }

  /* Bio en mobile: tipografía más grande y apretada, como en el diseño. */
  .bio {
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .bio p {
    margin-bottom: 1.2em;
  }

  .bio-sep {
    margin: 2rem 0;
  }

  .cred-profesion {
    font-size: 1.25rem;
  }

  .credencial {
    font-size: .85rem;
  }

  .entrada::before,
  .entrada::after {
    display: none;
  }

  .entrada {
    background-image: none;
  }

  /* Portada más cuadrada que apaisada: gana jerarquía en pantallas
     angostas. La diagonal sobre la foto se mantiene (igual que en
     escritorio) con la altura de --cover-space. */
  .entrada-imagen {
    aspect-ratio: 4 / 3;
  }

  /* Portada con video: más cuadrada para que el video no quede diminuto. */
  .entrada-imagen--video {
    aspect-ratio: 1 / 1;
  }

  .play-btn--portada {
    width: 60px;
    height: 60px;
  }

  /* Fragmentos de Ginebra se mantiene 16:9 también en mobile (ver arriba). */
  .entrada[data-panel="ginebra"] .entrada-imagen {
    aspect-ratio: 16 / 9;
  }

  .articulo-item {
    align-items: center;
  }
}

/* ============ HEADER EN MOBILE / TABLET ============
   Con el logo y los controles fijos, el menú de links del header pasa a un
   panel que se abre con la hamburguesa. 900px (y no los 760px del resto del
   sitio) porque en francés los 3 links más el selector de idioma ya no
   caben cómodos en una sola línea por debajo de ese ancho. */
@media (max-width: 900px) {
  /* Espacio sobre la foto de portada: nunca menos que el alto del logo fijo
     (ancho x 692/1682) más 1.25rem arriba y abajo, para que tras elegir un
     botón el logo quede entre el borde de la pantalla y la foto. */
  :root {
    --cover-space: max(calc(var(--gap) * 2), calc(2.5rem + var(--logo-w) * .4114));
  }

  .header-controls {
    --ctrl-h: 44px;
  }

  .menu-toggle {
    display: flex;
  }

  /* Sin links en el flujo, el header necesita altura propia para dejar
     lugar al logo fijo (alto del logo + aire arriba y abajo). */
  .header-inner {
    min-height: 5.3rem;
  }

  .header-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998; /* debajo del logo (999) y de los controles (1000) */
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    /* Arriba deja libre la franja del logo y los controles. */
    padding: 5.25rem var(--margin-x) 1.25rem;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(248, 227, 227, .25);
    max-height: 100vh;
    overflow-y: auto;
  }

  .header-nav.is-open {
    display: flex;
  }

  .nav-link {
    padding: 1rem 0;
    font-size: 1.25rem;
    text-align: left;
    border-bottom: 1px solid rgba(248, 227, 227, .15);
  }
}