/* ============================================================
   CÁTEDRA DE LA HISPANIDAD — Sistema visual "Atlas vivo"
   Tokens de diseño + retícula editorial + componentes
   Adaptable a WordPress: cada bloque es un componente aislado.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Color */
  --color-ink:#111111;
  --color-ink-soft:#3a3a38;
  --color-paper:#F4F0E7;
  --color-paper-muted:#E7DFD1;
  --color-carmine:#A62035;
  --color-carmine-dark:#641522;
  --color-atlantic:#103D50;
  --color-atlantic-deep:#0A2937;
  --color-gold:#B48A3C;
  --color-gold-ink:#7A5A20; /* oro legible sobre fondos claros (contraste AA) */
  --color-white:#FFFFFF;
  --color-border:#D8CFBE;
  --color-border-dark:rgba(255,255,255,.18);
  --color-focus:#103D50;
  --color-error:#8C1D18;
  --color-success:#2D5B36;

  /* Tipografía */
  --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;

  --text-display:clamp(2.8rem,5vw,5.5rem);
  --text-h1:clamp(3rem,6vw,7rem);
  --text-h2:clamp(2.2rem,4.5vw,5rem);
  --text-h3:clamp(1.5rem,2.4vw,2.6rem);
  --text-lead:clamp(1.25rem,1.8vw,1.75rem);
  --text-body:1.155rem;         /* ~18.5px */
  --text-small:.94rem;
  --text-meta:.8rem;            /* ~13px */

  /* Espaciado */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Retícula */
  --page-max:1680px;
  --page-pad:clamp(24px,4vw,64px);
  --gutter:clamp(20px,2vw,32px);

  /* Forma */
  --radius:4px;
  --radius-pill:999px;
  --line:1px solid var(--color-border);

  /* Movimiento */
  --ease:cubic-bezier(.33,1,.68,1);
  --ease-premium:cubic-bezier(.16,1,.3,1); /* salida lenta y deliberada, para las entradas de sección */
  --t-fast:.18s;
  --t-med:.32s;

  /* Cabecera */
  --header-h:88px;
  --header-h-compact:64px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.6;
  color:var(--color-ink);
  background:var(--color-paper);
  overflow-x:hidden;
}
@media (max-width:767px){ body{font-size:1.09rem} }
/* Red de seguridad contra desbordamiento horizontal en móvil: body ya tenía
   overflow-x:hidden, pero un elemento position:fixed más ancho que el
   viewport no queda recortado por eso (su contenedor es el viewport, no el
   body) y sigue provocando scroll lateral de toda la página. Se añade
   también en <html>, solo en móvil, como salvaguarda general. */
@media (max-width:767px){ html{overflow-x:hidden} }
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul[class],ol[class],
.main-nav ul,.footer-col ul,.breadcrumbs ol,nav ul,nav ol{list-style:none}
[hidden]{display:none!important}
[hidden]{display:none!important}
::selection{background:var(--color-carmine);color:var(--color-white)}

:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--color-gold)}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--color-ink);color:var(--color-white);
  padding:var(--s-3) var(--s-5);font-weight:600;text-decoration:none;border-radius:0 0 var(--radius) var(--radius);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 3. RETÍCULA ---------- */
.container{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
@media (max-width:1023px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:767px){.grid{grid-template-columns:repeat(4,1fr)}}
[class*="col-"]{grid-column:span 12}
.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
@media (max-width:1023px){
  .col-2{grid-column:span 2}
  .col-3,.col-4{grid-column:span 3}
  .col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 6}
}
@media (max-width:767px){
  .col-2{grid-column:span 2}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 4}
}

/* Portada en móvil: recorta cantidades para no alargar demasiado la página
   (el resto de tarjetas sigue a un toque de distancia en su propio
   apartado — "Ver todas"/"Ver el equipo completo"/"Ir a Biblioteca"). Solo
   se ocultan por CSS, nunca se dejan de renderizar en el HTML. */
@media (max-width:767px){
  .grid--clases-home>:nth-child(n+4){display:none}
}

/* Home: en la ficha destacada del equipo, el cargo va antes que el nombre
   (orden inverso al resto de usos de .person, como /equipo/). */
.grid--equipo-home .person__role{order:-1}

/* Home: exactamente 5 fichas en una fila, columnas iguales (las fotos quedan
   a la misma altura gracias al aspect-ratio de .person__photo), centradas.
   Selector compuesto .grid.grid--equipo-home para ganar a las reglas de
   .grid en los media queries de arriba sin depender del orden en el archivo. */
.grid.grid--equipo-home{grid-template-columns:repeat(5,1fr)}
.grid.grid--equipo-home>[class*="col-"]{grid-column:span 1}
.grid--equipo-home .person{align-items:center;text-align:center}
.grid--equipo-home .person__photo{width:100%}
@media (max-width:1023px){.grid.grid--equipo-home{grid-template-columns:repeat(3,1fr)}}
@media (max-width:599px){.grid.grid--equipo-home{grid-template-columns:repeat(2,1fr)}}

/* Home «Desde la Biblioteca»: carrusel horizontal arrastrable — se ven 4 libros
   y medio (el medio asoma a propósito como pista visual de que hay más) y los
   otros 3-4 (8 en total) se alcanzan arrastrando hacia la izquierda, en vez de
   recortarlos con nth-child como el resto de secciones de la home. En móvil
   se ven 4. scroll-snap da el enganche nativo por touch/trackpad; el arrastre
   con ratón lo añade main.js (data-carrusel-arrastrable). */
.carrusel-libros-home{
  position:relative;display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;
  cursor:grab;scrollbar-width:none;margin-top:var(--s-6);
}
.carrusel-libros-home::-webkit-scrollbar{display:none}
@media (max-width:599px){.carrusel-libros-home{margin-top:0}}
/* Sin zoom de la portada al pasar el ratón aquí: en el carrusel de la home ese
   pequeño scale() generaba un repintado que interfería con el arrastre/scroll. */
.carrusel-libros-home .card:hover .card__media img{transform:none}
.carrusel-libros-home .card__media img{
  -webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;
}
.carrusel-libros-home.is-arrastrando{cursor:grabbing;scroll-snap-type:none}
.carrusel-libros-home__item{flex:0 0 calc((100% - 4*var(--gutter))/4.5);scroll-snap-align:start;min-width:0}
@media (max-width:1023px){.carrusel-libros-home__item{flex-basis:calc((100% - 3*var(--gutter))/4)}}

/* Causa real del «sube y baja» al tocar un libro: con overflow-x:auto el
   navegador convierte overflow-y en auto también, y el translateY(32px) de
   .reveal hacía que el contenido sobrara en vertical, así que el propio
   carrusel se desplazaba arriba/abajo en vez de la página. Se bloquea el
   eje vertical del carrusel (no es scrolleable a mano) y los libros entran
   solo con fundido, sin desplazamiento. Sin touch-action ni JS táctil: el
   navegador reparte solo el gesto (horizontal → carrusel, vertical → página). */
.carrusel-libros-home{overflow-y:hidden}
.carrusel-libros-home__item.reveal{transform:none}
/* Móvil: un libro grande con el siguiente asomando, deslizable con el dedo. */
@media (max-width:599px){
  .carrusel-libros-home__item{flex-basis:78%}
  .carrusel-libros-home-wrap .carrusel-libros-home__pista{display:none}
}

/* Pista de que hay más contenido a la derecha: degradado + flecha que rebota,
   superpuestos al borde del carrusel (no ocupan espacio ni se arrastran con él). */
.carrusel-libros-home-wrap{position:relative}
.carrusel-libros-home-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:72px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--color-paper) 85%);
}
.carrusel-libros-home-wrap .carrusel-libros-home__pista{
  position:absolute;top:50%;right:var(--s-4);z-index:2;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;background:var(--color-white);color:var(--color-ink);
  border:1.5px solid var(--color-ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;animation:pista-libros 1.6s ease-in-out infinite;transition:background var(--t-fast);
}
.carrusel-libros-home-wrap .carrusel-libros-home__pista:hover{background:var(--color-paper-muted)}
@keyframes pista-libros{0%,100%{transform:translate(0,-50%)}50%{transform:translate(6px,-50%)}}
@media (prefers-reduced-motion:reduce){.carrusel-libros-home-wrap .carrusel-libros-home__pista{animation:none}}
.carrusel-libros-home-wrap.esta-al-final::after,
.carrusel-libros-home-wrap.esta-al-final .carrusel-libros-home__pista{opacity:0;transition:opacity .3s var(--ease)}

/* Biblioteca: 5 fichas por fila en vez de 4. */
.grid.grid--libros{grid-template-columns:repeat(5,1fr)}
.grid.grid--libros>[class*="col-"]{grid-column:span 1}
@media (max-width:1023px){.grid.grid--libros{grid-template-columns:repeat(3,1fr)}}
@media (max-width:599px){.grid.grid--libros{grid-template-columns:1fr}}

/* Libros a la venta: en vez del simple scale de .card, un gesto de "coger el
   libro de la estantería" — se inclina en perspectiva 3D y se levanta, como si
   se despegara del resto de la fila. Solo en estas fichas (portada con enlace
   de compra externa), no en el resto de tarjetas del sitio. */
.libro-externo .card{
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.libro-externo .card:hover,.libro-externo .card:focus-within{
  transform:translateY(-8px);
  box-shadow:0 26px 40px -20px rgba(17,17,17,.35);
  border-color:var(--color-carmine);z-index:2;
}
@media (prefers-reduced-motion:reduce){
  .libro-externo .card{transition:none}
  .libro-externo .card:hover,.libro-externo .card:focus-within{transform:none}
}

.section{padding-block:clamp(var(--s-8),8vw,var(--s-10))}
.section--tight{padding-block:clamp(var(--s-7),5vw,var(--s-8))}
.section--dark{background:var(--color-ink);color:var(--color-paper)}
.section--atlantic{background:linear-gradient(155deg,var(--color-carmine) 0%,var(--color-carmine-dark) 52%,#170709 100%);color:var(--color-paper)}
.section--carmine{background:linear-gradient(155deg,var(--color-carmine-dark) 0%,#1a0b0e 100%);color:var(--color-paper)}
.section--muted{background:var(--color-paper-muted)}
.section--dark a,.section--atlantic a,.section--carmine a{color:inherit}

/* Cabecera de sección editorial: nº + título + regla */
.sec-head{
  display:flex;align-items:baseline;gap:var(--s-5);
  border-top:2px solid var(--color-ink);
  padding-top:var(--s-4);margin-bottom:clamp(var(--s-6),4vw,var(--s-8));
  flex-wrap:wrap;
}
.section--dark .sec-head,.section--atlantic .sec-head,.section--carmine .sec-head{border-top-color:var(--color-paper)}
.sec-head__num{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--color-carmine);letter-spacing:.08em}
.section--dark .sec-head__num,.section--atlantic .sec-head__num,.section--carmine .sec-head__num{color:var(--color-gold)}
.sec-head__title{
  font-size:var(--text-h2);line-height:1.02;letter-spacing:-.02em;
  font-weight:700;text-wrap:balance;
}
.sec-head__aside{margin-left:auto;align-self:center}
.kicker{
  font-family:var(--font-mono);font-size:var(--text-meta);
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-carmine);
  display:inline-flex;align-items:center;gap:var(--s-3);
}
/* (guion inicial de los kickers eliminado a petición del cliente) */
.on-dark .kicker,.section--dark .kicker,.section--atlantic .kicker,.section--carmine .kicker{color:var(--color-gold)}

.lead{font-family:var(--font-serif);font-size:var(--text-lead);line-height:1.45;max-width:34em}
.prose{max-width:70ch}
.prose p{margin-bottom:var(--s-5)}
.prose h2,.prose h3{margin:var(--s-7) 0 var(--s-4);letter-spacing:-.01em;line-height:1.15}
.prose h2{font-size:var(--text-h3)}
.prose h3{font-size:1.35rem}
.prose ul,.prose ol{margin:0 0 var(--s-5) 1.2em}
.prose blockquote{
  font-family:var(--font-serif);font-size:var(--text-lead);line-height:1.4;
  border-left:3px solid var(--color-carmine);padding-left:var(--s-5);margin:var(--s-6) 0;
}
.serif{font-family:var(--font-serif)}
.mono{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.05em}

/* ---------- 4. BOTONES / ETIQUETAS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-weight:600;font-size:1rem;text-decoration:none;
  padding:14px 26px;border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  min-height:44px;
}
.btn .arr{transition:transform var(--t-fast) var(--ease)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(5px)}
.btn:active{transform:scale(.96)}
.btn--primary{background:var(--color-carmine);color:var(--color-white)}
.btn--primary:hover{background:var(--color-carmine-dark)}
.btn--ink{background:var(--color-ink);color:var(--color-paper)}
.btn--ink:hover{background:var(--color-carmine-dark)}
.btn--ghost{border-color:var(--color-ink);color:var(--color-ink)}
.btn--ghost:hover{background:var(--color-ink);color:var(--color-paper)}
.on-dark .btn--ghost,.section--dark .btn--ghost,.section--atlantic .btn--ghost,.section--carmine .btn--ghost{border-color:var(--color-paper);color:var(--color-paper)}
.on-dark .btn--ghost:hover,.section--dark .btn--ghost:hover,.section--atlantic .btn--ghost:hover,.section--carmine .btn--ghost:hover{background:var(--color-paper);color:var(--color-ink)}
.btn--light{background:var(--color-paper);color:var(--color-ink)}
.btn--light:hover{background:var(--color-white)}
/* Sobre fondos oscuros, el botón claro mantiene la letra negra */
.section--dark a.btn--light,.section--atlantic a.btn--light,.section--carmine a.btn--light,
.mobile-menu a.btn--light,.on-dark a.btn--light{color:var(--color-ink)}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.btn.is-loading::after{
  content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-weight:600;text-decoration:none;color:var(--color-carmine);
  border-bottom:1.5px solid transparent;
}
.link-arrow:hover,.link-arrow:focus-visible{border-bottom-color:currentColor}
.link-arrow .arr{transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover .arr{transform:translateX(5px)}
.section--dark .link-arrow,.section--atlantic .link-arrow,.section--carmine .link-arrow{color:var(--color-gold)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.06em;
  padding:5px 12px;border:1px solid var(--color-border);border-radius:var(--radius-pill);
  text-decoration:none;background:var(--color-white);color:var(--color-ink-soft);
}
.tag--state{border-color:var(--color-success);color:var(--color-success)}
.tag--state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tag--closed{border-color:var(--color-ink-soft);color:var(--color-ink-soft)}
.tag--demo{border-style:dashed;border-color:var(--color-gold);color:#7a5a20;background:transparent;border-radius:var(--radius)}
.tag--area{border-color:var(--color-atlantic);color:var(--color-atlantic)}

/* Filtros pill */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6)}
.filter-btn{
  font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.05em;
  padding:9px 16px;border:1px solid var(--color-ink);border-radius:var(--radius-pill);
  background:transparent;min-height:38px;
  transition:background var(--t-fast),color var(--t-fast);
}
.filter-btn:hover{background:var(--color-paper-muted)}
.filter-btn[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}

/* ---------- 5. CABECERA ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--color-paper);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease);
}
.site-header.is-scrolled{border-bottom-color:var(--color-border);background:rgba(244,240,231,.96);backdrop-filter:blur(8px)}
.header-bar{
  display:flex;align-items:center;gap:var(--s-5);
  height:var(--header-h);
  transition:height var(--t-med) var(--ease);
}
.site-header.is-scrolled .header-bar{height:var(--header-h-compact)}

.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;flex-shrink:0}
.brand__mark{
  width:72px;height:72px;flex-shrink:0;
  transition:width var(--t-med) var(--ease),height var(--t-med) var(--ease),transform var(--t-fast) var(--ease);
}
.brand:hover .brand__mark{transform:rotate(-6deg)}
.site-header.is-scrolled .brand__mark{width:58px;height:58px}
.brand__text{display:flex;flex-direction:column;line-height:1.14}
.brand__name{font-weight:700;font-size:1.45rem;letter-spacing:-.01em}
.brand__inst{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-soft)}
@media (max-width:479px){.brand__inst{display:none}}
/* Icono «CH» solo, sin el nombre completo, en un móvil muy estrecho: el propio
   enlace ya lleva aria-label="Cátedra de la Hispanidad, inicio", así que sigue
   siendo accesible. Sin esto no cabían a la vez la marca, el buscador, «Acceder /
   Mi cuenta» (en la plataforma) y el botón de menú. */
@media (max-width:479px){.brand__text{display:none}}

.main-nav{margin-left:auto}
.main-nav>ul{display:flex;gap:2px}
.main-nav a.nav-link,.main-nav button.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;font-weight:600;font-size:.98rem;text-decoration:none;
  position:relative;border-radius:var(--radius);
}
.main-nav .nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--color-carmine);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-fast) var(--ease);
}
.main-nav .nav-link:hover::after,.main-nav .nav-link:focus-visible::after,
.main-nav .nav-link[aria-expanded="true"]::after,.main-nav .nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast)}
.nav-link[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(-1px)}
@media (max-width:1240px){.main-nav{display:none}.mega{display:none}}

/* Con el menú de escritorio oculto (todo lo que no sea un portátil grande: tablet
   incluida), nada empujaba el grupo de buscador+cuenta+☰ hacia el borde derecho:
   se quedaba pegado justo detrás del logo, con un hueco vacío hasta el borde. El
   menú (☰) debe estar siempre en la esquina superior derecha, que es donde el
   pulgar llega con más comodidad. */
.header-utils{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
@media (min-width:1241px){.header-utils{margin-left:0}}
.util-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--radius);
  font-weight:600;font-size:.9rem;text-decoration:none;
  transition:background var(--t-fast);
}
.util-btn:hover{background:var(--color-paper-muted)}
.util-btn--lang{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em}
.util-btn svg{width:20px;height:20px}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;align-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--color-ink);transition:transform var(--t-fast) var(--ease),opacity var(--t-fast)}
/* El botón ☰ es el acceso al menú de pantalla completa que sustituye al
   desplegable de escritorio (mega menú) cuando este no cabe: solo tiene
   sentido por debajo de 1241px, donde .main-nav ya está oculto. Antes no
   tenía regla de ancho y se veía también en escritorio, duplicando el
   acceso a las mismas secciones que ya despliega la barra de navegación.
   Va después de la regla base para ganar el empate de especificidad. */
@media (min-width:1241px){.burger{display:none}}

/* Mega menú */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--color-paper);border-bottom:1px solid var(--color-border);
  box-shadow:0 24px 48px -24px rgba(17,17,17,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility var(--t-fast);
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega__inner{display:grid;grid-template-columns:220px 1fr 320px;gap:var(--s-7);padding-block:var(--s-7)}
.mega__label{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--color-carmine);border-top:2px solid var(--color-ink);padding-top:var(--s-3)}
.mega__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,max-content));gap:var(--s-4) var(--s-6);align-content:start;justify-content:start}
.mega__cols a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 0;text-decoration:none;font-weight:500;font-size:.98rem;
  border-bottom:1px solid transparent;
}
.mega__cols a:hover,.mega__cols a:focus-visible{color:var(--color-carmine)}
.mega__cols a .n{font-family:var(--font-mono);font-size:.68rem;color:var(--color-gold-ink)}
.mega__feat{border-left:var(--line);padding-left:var(--s-6)}
.mega__feat img{aspect-ratio:3/2;object-fit:cover;margin-bottom:var(--s-3);border-radius:var(--radius)}
.mega__feat .mono{color:var(--color-ink-soft)}
.mega__feat p{font-weight:600;margin-top:4px}
.mega__feat a{text-decoration:none}
.mega__feat a:hover p{color:var(--color-carmine)}

/* Cabecera compacta en móvil: el icono ☰ del menú llegaba a quedar 80px fuera de la
   pantalla en un iPhone (390px), porque marca + buscador + selector ES·EN + menú no
   caben todos en una fila estrecha. El selector de idioma no hace nada todavía (el
   inglés está «en preparación»), así que se retira de la barra compacta y se reducen
   huecos y el icono de marca; toda la funcionalidad sigue accesible desde el buscador
   y el menú completo. Va al final de la sección para ganar el empate de especificidad
   con las reglas de arriba (.util-btn, .header-utils, .brand) sin usar !important. */
@media (max-width:599px){
  .header-bar{gap:var(--s-3)}
  .brand{gap:var(--s-2)}
  .brand__mark{width:54px;height:54px}
  .header-utils{gap:4px}
  .util-btn--lang{display:none}
}

/* Menú móvil pantalla completa */
.mobile-menu{
  position:fixed;inset:0;z-index:150;background:var(--color-ink);color:var(--color-paper);
  display:none;flex-direction:column;overflow-y:auto;
}
.mobile-menu.is-open{display:flex}
.mobile-menu__bar{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--page-pad);border-bottom:1px solid var(--color-border-dark)}
.mobile-menu__close{color:var(--color-paper);font-weight:600;display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color var(--t-fast)}
.mobile-menu__close:hover{color:var(--color-gold)}
/* min-height:0 es necesario para que un hijo flex con overflow:auto pueda
   encogerse por debajo de la altura de su contenido (el valor por defecto,
   min-height:auto, se lo impide) — sin esto, al abrir un desplegable con
   varios sub-apartados (p. ej. Biblioteca), el contenido crecía más allá
   del hueco disponible y quedaba tapado por el buscador/"Acceder" del pie,
   sin forma de llegar a verlo. Ahora esa lista central scrollea por su
   cuenta y el pie (buscador + cuenta) se queda siempre visible abajo. */
.mobile-menu nav{padding:var(--s-6) var(--page-pad) var(--s-7);flex:1;position:relative;min-height:0;overflow-y:auto}
.mobile-menu .mm-kicker{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;color:var(--color-gold);margin-bottom:var(--s-4);display:block}
.mobile-menu .mm-item{border-top:1px solid var(--color-border-dark)}
.mobile-menu .mm-item:last-child{border-bottom:1px solid var(--color-border-dark)}
.mobile-menu .mm-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;
  font-size:clamp(1.6rem,6vw,2.2rem);font-weight:700;letter-spacing:-.01em;
  padding:var(--s-4) 0;color:var(--color-paper);text-decoration:none;text-align:left;
  transition:color var(--t-fast),padding-left var(--t-fast) var(--ease);
}
.mobile-menu button.mm-top:hover,.mobile-menu a.mm-top:hover{color:var(--color-gold);padding-left:var(--s-2)}
.mobile-menu .mm-num{font-family:var(--font-mono);font-size:.7rem;color:var(--color-gold);margin-right:var(--s-4);opacity:.85}
.mobile-menu .mm-plus{
  width:30px;height:30px;flex-shrink:0;border:1.5px solid var(--color-gold);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--color-gold);
  font-size:1.1rem;line-height:1;transition:transform var(--t-fast) var(--ease),background var(--t-fast);
}
.mobile-menu .mm-item.is-open .mm-plus{transform:rotate(135deg);background:var(--color-gold);color:var(--color-ink)}
.mobile-menu .mm-sub{display:none;padding:0 0 var(--s-5) calc(.7rem * 3 + var(--s-4))}
.mobile-menu .mm-item.is-open .mm-sub{display:block}
.mobile-menu .mm-sub a{
  display:flex;align-items:baseline;gap:var(--s-3);padding:10px 0;
  color:var(--color-paper);text-decoration:none;font-size:1.08rem;font-weight:500;
  transition:color var(--t-fast);
}
.mobile-menu .mm-sub a .n{font-family:var(--font-mono);font-size:.7rem;color:var(--color-gold)}
.mobile-menu .mm-sub a:hover{color:var(--color-gold)}
.mobile-menu__wordmark{
  position:absolute;right:var(--page-pad);bottom:var(--s-5);
  font-weight:750;letter-spacing:-.03em;line-height:.85;font-size:clamp(2.5rem,9vw,7rem);
  color:transparent;-webkit-text-stroke:1px rgba(244,240,231,.14);
  user-select:none;pointer-events:none;white-space:nowrap;z-index:-1;
}
@media (max-width:640px){.mobile-menu__wordmark{display:none}}
.mobile-menu__foot{padding:var(--s-5) var(--page-pad) var(--s-7);border-top:2px solid var(--color-gold);display:flex;flex-direction:column;gap:var(--s-4)}
.mobile-menu__foot .mono{color:var(--color-paper-muted)}

/* ---------- 6. HERO PORTADA ---------- */
.hero{
  position:relative;
  min-height:min(84svh,840px);
  display:flex;flex-direction:column;justify-content:center;
  border-bottom:var(--line);
  overflow:hidden;
}
@media (max-width:767px){.hero{min-height:0;padding-block:var(--s-1) var(--s-7)}}
.hero__atlas{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero__grid{position:relative;align-items:end;padding-block:clamp(var(--s-7),6vh,var(--s-9))}
/* El padding SUPERIOR de .hero__grid solo aporta algo cuando el contenido es más
   bajo que la caja y .hero (justify-content:center) tiene hueco real que repartir;
   en la práctica el contenido suele ser más alto que el mínimo de .hero, así que
   ese padding-top es casi siempre un hueco muerto fijo (hasta 96px) entre la
   cabecera y el primer texto, sin ninguna función de centrado. Se reduce a un
   margen editorial pequeño. El padding INFERIOR se mantiene: separa el bloque del
   borde inferior de .hero (align-items:end lo pega a esa línea). Va después de la
   regla base para ganar el empate de especificidad (como .header-utils más arriba). */
.hero__grid{padding-top:clamp(var(--s-3),2vh,var(--s-5))}
@media (max-width:767px){.hero__grid{padding-block:0}}
.hero__title{
  font-size:var(--text-display);line-height:.98;letter-spacing:-.03em;font-weight:750;
  text-wrap:balance;margin:var(--s-5) 0;
}
.hero__title em{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--color-carmine)}
/* En un móvil estrecho, «conversación» a 56px (el mínimo del clamp de --text-display) no
   cabe en una sola línea y se corta por el borde de la pantalla: se reduce el mínimo solo
   aquí, sin tocar el token global (usado también en otros titulares más cortos). */
@media (max-width:480px){.hero__title{font-size:clamp(2.6rem,12vw,3.4rem)}}
.hero__lead{font-family:var(--font-serif);font-size:var(--text-lead);line-height:1.45;max-width:30em;color:var(--color-ink-soft)}
.hero__ctas{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}

/* Tipografía ampliada de la portada (solo .portada, cuerpo de base.html lo
   marca en home_page.html): en portátil/escritorio el titular y los títulos
   de sección se quedaban por debajo del tope del clamp, con mucho hueco
   alrededor del texto. Se sube el tope y el crecimiento con el viewport
   sin tocar los tokens globales (los usa el resto del sitio también). */
.portada .hero__title{font-size:clamp(3.2rem,6.4vw,6.6rem)}
.portada .hero__lead{font-size:clamp(1.3rem,2vw,2rem)}
.portada .sec-head__title{font-size:clamp(2.6rem,5.3vw,5.8rem)}
.portada .kicker{font-size:.86rem}

.spotlight{
  border:2px solid var(--color-ink);border-radius:var(--radius);
  background:var(--color-white);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.spotlight:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(17,17,17,.4)}
.spotlight__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.spotlight__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-med) var(--ease)}
.spotlight:hover .spotlight__media img{transform:scale(1.03)}
.spotlight__badge{
  position:absolute;top:var(--s-3);left:var(--s-3);
  background:var(--color-carmine);color:var(--color-white);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  padding:5px 10px;border-radius:2px;
  animation:badge-pulse 2.6s ease-in-out infinite;
}
@keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(166,32,53,.45)}50%{box-shadow:0 0 0 6px rgba(166,32,53,0)}}
.spotlight__body{padding:var(--s-5)}
.spotlight__meta{display:flex;gap:var(--s-3);flex-wrap:wrap;color:var(--color-ink-soft)}
.spotlight__title{font-size:1.3rem;line-height:1.2;font-weight:700;margin:var(--s-2) 0}
.spotlight__desc{font-family:var(--font-serif);color:var(--color-ink-soft);font-size:1rem}
.spotlight__cta{margin-top:var(--s-4);color:var(--color-carmine);font-weight:600;display:inline-flex;gap:8px;align-items:center}

/* Carrusel editorial del hero: alternativa a la pieza "en foco" cuando no hay
   ninguna configurada. Tres enlaces apilados con fundido cruzado, zoom lento
   tipo Ken Burns en la diapositiva activa, y una etiqueta "Ver" que sigue al
   cursor dentro de la imagen (micro-interacción, sin afectar al teclado: las
   diapositivas inactivas quedan con visibility:hidden, fuera del tabulador). */
.hero-carousel{
  border:2px solid var(--color-ink);border-radius:var(--radius);
  overflow:hidden;position:relative;aspect-ratio:3/2;background:var(--color-ink);
}
.hero-carousel__track{position:relative;width:100%;height:100%}
.hero-carousel__slide{
  position:absolute;inset:0;display:block;text-decoration:none;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease-premium);
}
.hero-carousel__slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-carousel__slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 7s linear;
}
.hero-carousel__slide.is-active img{transform:scale(1.14)}
.hero-carousel__slide:hover img,.hero-carousel__slide:focus-visible img{transform:scale(1.2)}
.hero-carousel__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 42%,rgba(17,17,17,.84));
}
.hero-carousel__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--s-5);color:#fff;display:flex;flex-direction:column;gap:4px;
}
.hero-carousel__cap .mono{color:var(--color-gold);letter-spacing:.1em;display:block;opacity:0;transform:translateY(16px)}
.hero-carousel__cap .t{font-weight:700;font-size:1.15rem;line-height:1.25;display:block;opacity:0;transform:translateY(16px)}
.hero-carousel__slide.is-active .hero-carousel__cap .mono{animation:cap-in .7s var(--ease-premium) .2s both}
.hero-carousel__slide.is-active .hero-carousel__cap .t{animation:cap-in .7s var(--ease-premium) .34s both}
@keyframes cap-in{to{opacity:1;transform:none}}
.hero-carousel__dots{position:absolute;top:var(--s-4);right:var(--s-4);z-index:3;display:flex;gap:7px}
.hero-carousel__dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:background var(--t-fast),transform var(--t-fast);
}
.hero-carousel__dots button:hover{background:rgba(255,255,255,.75)}
.hero-carousel__dots button.is-active{background:var(--color-white);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){
  .hero-carousel__slide,.hero-carousel__slide img{transition:none}
  .hero-carousel__slide.is-active img{transform:none}
}

/* Franja búsqueda hero */
.hero-search{border-top:2px solid var(--color-ink);background:var(--color-white)}
.hero-search__row{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;padding-block:var(--s-4)}
@media (max-width:1023px){.hero-search__row{grid-template-columns:1fr}}
.searchbar{
  display:flex;align-items:center;gap:var(--s-3);
  border:1.5px solid var(--color-ink);border-radius:var(--radius);
  padding:4px 6px 4px 16px;background:var(--color-white);
}
.searchbar:focus-within{outline:3px solid var(--color-focus);outline-offset:2px}
.searchbar svg{width:20px;height:20px;flex-shrink:0;color:var(--color-carmine)}
.searchbar input{
  flex:1;border:0;background:transparent;font:inherit;min-height:44px;min-width:0;
}
.searchbar input:focus{outline:none}
.searchbar kbd{
  font-family:var(--font-mono);font-size:.72rem;color:var(--color-ink-soft);
  border:1px solid var(--color-border);border-radius:4px;padding:3px 7px;white-space:nowrap;
}
@media (max-width:767px){.searchbar kbd{display:none}}
.hero-search__next{display:flex;align-items:center;gap:var(--s-4);text-decoration:none;min-width:0}
.hero-search__next:hover .t{color:var(--color-carmine)}
.hero-search__next .d{font-family:var(--font-mono);font-size:.78rem;color:var(--color-carmine);white-space:nowrap}
.hero-search__next .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 7. ACCESOS RÁPIDOS ---------- */
.quick{border-bottom:var(--line);background:var(--color-paper)}
.quick__list{display:grid;grid-template-columns:repeat(6,1fr)}
@media (max-width:1239px){.quick__list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.quick__list{grid-template-columns:repeat(2,1fr)}}
.quick__item{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s-5) var(--s-4);text-decoration:none;
  border-left:var(--line);
  transition:background var(--t-fast);
}
.quick__item:first-child{border-left:0}
@media (max-width:1239px){.quick__item:nth-child(4){border-left:0}}
@media (max-width:767px){.quick__item:nth-child(odd){border-left:0}.quick__item{border-top:var(--line)}}
.quick__item:hover{background:var(--color-white)}
.quick__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-soft)}
.quick__value{font-weight:700;line-height:1.25;font-size:.98rem}
.quick__item:hover .quick__value{color:var(--color-carmine)}
.quick__hint{font-size:.85rem;color:var(--color-ink-soft)}

/* ---------- 8. TARJETAS ---------- */
.card{
  display:flex;flex-direction:column;background:var(--color-white);
  border:var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;height:100%;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.card:hover,.card:focus-within{border-color:var(--color-carmine);box-shadow:0 12px 28px -20px rgba(17,17,17,.35)}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--color-paper-muted)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-med) var(--ease)}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);flex:1}
.card__meta{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.card__title{font-size:1.28rem;line-height:1.22;font-weight:700;letter-spacing:-.01em}
.card--featured .card__title{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.card__desc{font-family:var(--font-serif);color:var(--color-ink-soft);font-size:1rem}
.card__foot{margin-top:auto;padding-top:var(--s-4);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.card__foot .mono{color:var(--color-ink-soft)}
.card .arr-btn{
  width:38px;height:38px;border:1.5px solid var(--color-ink);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.card:hover .arr-btn{background:var(--color-carmine);border-color:var(--color-carmine);color:#fff;transform:translateX(4px)}

/* "Explora la Cátedra" en móvil: lista compacta en vez de las tarjetas de
   escritorio (mucho menos alta). Cada fila es un acordeón: el resumen y el
   botón solo aparecen al tocarla. En escritorio no se muestra. */
.explora-mobile{display:none}
@media (max-width:767px){
  .explora-desktop{display:none}
  .explora-mobile{display:block;border-top:var(--line)}
}
.explora-row{border-bottom:var(--line)}
.explora-row__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;
  padding:var(--s-4) 0;font-size:1.05rem;font-weight:700;text-align:left;min-height:44px;
}
.explora-row__head>span:first-child{min-width:0;overflow-wrap:anywhere}
.explora-row__plus{
  width:28px;height:28px;flex-shrink:0;border:1.5px solid var(--color-ink);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1rem;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast);
}
.explora-row.is-open .explora-row__plus{transform:rotate(135deg);background:var(--color-carmine);border-color:var(--color-carmine);color:#fff}
.explora-row__panel{display:none;padding:0 0 var(--s-5)}
.explora-row.is-open .explora-row__panel{display:block}
.explora-row__panel p{font-family:var(--font-serif);color:var(--color-ink-soft);margin-bottom:var(--s-4)}

/* Persona */
.person{display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none}
.person__photo{
  aspect-ratio:4/5;background:var(--color-paper-muted);border-radius:var(--radius);
  overflow:hidden;position:relative;border:var(--line);
}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__initials{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:3rem;color:var(--color-atlantic);
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(16,61,80,.05) 14px 15px);
}
.person__name{font-weight:700;font-size:1.1rem;line-height:1.2}
.person:hover .person__name{color:var(--color-carmine)}
.person__role{font-size:.92rem;color:var(--color-ink-soft)}

/* Evento / agenda fila */
.event-row{
  display:grid;grid-template-columns:150px 1fr auto;gap:var(--s-6);align-items:center;
  padding-block:var(--s-5);border-top:var(--line);text-decoration:none;
  transition:background var(--t-fast);
}
.event-row:hover{background:var(--color-white)}
@media (max-width:767px){
  .event-row{grid-template-columns:1fr 72px}
  .event-row__date{order:2;border-right:0;border-left:2px solid var(--color-carmine);padding-right:0;padding-left:var(--s-4)}
}
.event-row__date{display:flex;flex-direction:column;align-items:center;text-align:center;border-right:2px solid var(--color-carmine);padding-right:var(--s-4)}
.event-row__day{font-size:clamp(2rem,4vw,3rem);font-weight:750;line-height:1;letter-spacing:-.02em}
.event-row__month{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-carmine)}
.event-row__title{font-size:1.35rem;font-weight:700;line-height:1.2;margin:4px 0;overflow-wrap:anywhere}
.event-row:hover .event-row__title{color:var(--color-carmine)}
.event-row__meta{display:flex;gap:var(--s-4);flex-wrap:wrap;color:var(--color-ink-soft);font-size:.9rem}
.event-row .arr-btn{
  width:44px;height:44px;border:1.5px solid var(--color-ink);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--t-fast);
}
.event-row:hover .arr-btn{background:var(--color-carmine);border-color:var(--color-carmine);color:#fff;transform:translateX(4px)}
/* La regla original que ocultaba esta flecha en móvil quedaba antes que la base de
   arriba: con la misma especificidad, perdía el empate y la flecha se veía igual en
   cualquier ancho, sin espacio para ella junto al texto. Va aquí, al final, para ganar. */
@media (max-width:767px){.event-row .arr-btn{display:none}}

/* Publicación fila (repositorio) */
.pub-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);align-items:start;
  padding-block:var(--s-5);border-top:var(--line);
}
.pub-row__type{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);
  color:var(--color-atlantic);border-left:2px solid var(--color-atlantic);padding-left:6px;
  align-self:stretch;display:flex;align-items:center;
}
@media (max-width:767px){.pub-row{grid-template-columns:1fr}.pub-row__type{writing-mode:horizontal-tb;transform:none;border-left:0;border-top:2px solid var(--color-atlantic);padding:6px 0 0}}
.pub-row h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
.pub-row h3 a{text-decoration:none}
.pub-row h3 a:hover{color:var(--color-carmine)}
.pub-row__abs{font-family:var(--font-serif);color:var(--color-ink-soft);font-size:1rem;margin-top:6px;max-width:65ch}
.pub-row__meta{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-2)}
.pub-row__actions{display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-end}
@media (max-width:767px){.pub-row__actions{flex-direction:row;align-items:center}}

/* ---------- 9. ATLAS DE ÁREAS ---------- */
.atlas-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-7);align-items:start}
@media (max-width:1023px){.atlas-wrap{grid-template-columns:1fr}}
.atlas-list{display:flex;flex-direction:column}
.atlas-item{border-top:var(--line)}
.atlas-item:last-child{border-bottom:var(--line)}
.atlas-item__btn{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:baseline;width:100%;
  padding:var(--s-4) var(--s-2);text-align:left;min-height:44px;
  transition:background var(--t-fast);
}
.atlas-item__btn:hover{background:rgba(255,255,255,.06)}
.section--atlantic .atlas-item{border-color:var(--color-border-dark)}
.atlas-item__num{font-family:var(--font-mono);font-size:.8rem;color:var(--color-gold)}
.atlas-item__name{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.01em}
.atlas-item__count{font-family:var(--font-mono);font-size:.78rem;opacity:.7}
.atlas-item__panel{display:none;padding:0 var(--s-2) var(--s-5) calc(var(--s-4) + 2ch)}
.atlas-item.is-open .atlas-item__panel{display:block}
.atlas-item.is-open .atlas-item__btn{background:rgba(255,255,255,.06)}
.atlas-item__panel p{font-family:var(--font-serif);opacity:.85;max-width:55ch;margin-bottom:var(--s-3)}
.atlas-item__links{display:flex;gap:var(--s-2);flex-wrap:wrap}
.atlas-canvas-box{position:sticky;top:calc(var(--header-h-compact) + 24px)}
.atlas-canvas-box svg{width:100%;height:auto;display:block}
@media (max-width:1023px){.atlas-canvas-box{display:none}}
#atlas-svg .atlas-line line{stroke:var(--color-border-dark);stroke-width:1}
#atlas-svg .atlas-hub circle{fill:var(--color-carmine);stroke:var(--color-gold);stroke-width:1.5}
#atlas-svg .atlas-node circle{fill:var(--color-atlantic-deep);stroke:var(--color-gold);stroke-width:1.5;transition:r var(--t-med) var(--ease),fill var(--t-med) var(--ease)}
#atlas-svg .atlas-node text{fill:var(--color-paper-muted);font-family:var(--font-mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase}
#atlas-svg .atlas-node.is-active circle{fill:var(--color-carmine);r:9}
#atlas-svg .atlas-node.is-active text{fill:var(--color-paper)}

/* Imagen con parallax discreto (la-catedra_page.html): se mueve algo más
   despacio que el scroll, vía JS (transform translateY calculado), nunca si
   prefers-reduced-motion. */
.img-frame--parallax{overflow:hidden}
.img-frame--parallax img{will-change:transform}

/* ---------- 10. REVISTA ---------- */
.journal{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
@media (max-width:1023px){.journal{grid-template-columns:1fr}}
.journal__issue{grid-column:span 7;display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:var(--s-6);align-content:start}
@media (max-width:767px){.journal__issue{grid-template-columns:1fr}}
.journal__cover{border:var(--line);border-radius:var(--radius);overflow:hidden;background:var(--color-white);align-self:start;box-shadow:12px 12px 0 -4px var(--color-paper-muted)}
.journal__repo{grid-column:span 5;border-left:var(--line);padding-left:var(--s-7);display:flex;flex-direction:column;gap:var(--s-4)}
@media (max-width:1023px){.journal__issue,.journal__repo{grid-column:span 12}.journal__repo{border-left:0;padding-left:0;border-top:var(--line);padding-top:var(--s-6)}}
.repo-mini{display:flex;flex-direction:column}
.repo-mini a{
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:baseline;
  padding:var(--s-3) 0;border-top:1px solid var(--color-border);text-decoration:none;font-weight:600;
}
.repo-mini a:hover{color:var(--color-carmine)}
.repo-mini .mono{color:var(--color-ink-soft);flex-shrink:0}

/* ---------- 11. MULTIMEDIA MOSAICO ---------- */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:110px;gap:var(--gutter)}
@media (max-width:1023px){.mosaic{grid-auto-rows:90px}}
@media (max-width:767px){.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:80px}}
.mosaic__item{
  position:relative;overflow:hidden;border-radius:var(--radius);
  display:block;text-decoration:none;background:var(--color-ink);
  border:0;padding:0;cursor:pointer;text-align:left;width:100%;height:100%;
}
.mosaic__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-med) var(--ease),opacity var(--t-med)}
.mosaic__item:hover img,.mosaic__item:focus-visible img{transform:scale(1.03);opacity:.55}
.mosaic__cap{
  position:absolute;inset:auto 0 0 0;padding:var(--s-4);
  color:#fff;opacity:0;transform:translateY(8px);
  transition:opacity var(--t-fast),transform var(--t-fast);
  background:linear-gradient(transparent,rgba(17,17,17,.85));
}
.mosaic__item:hover .mosaic__cap,.mosaic__item:focus-visible .mosaic__cap{opacity:1;transform:none}
@media (hover:none){.mosaic__cap{opacity:1;transform:none}}
.mosaic__cap .t{
  font-weight:700;line-height:1.2;
  /* En una miniatura pequeña (p. ej. .m-1x1) un pie de dos palabras puede no caber:
     se recorta con puntos suspensivos a 2 líneas en vez de cortarse a media letra
     (el .mosaic__item exterior ya tiene overflow:hidden). */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  overflow-wrap:anywhere;
}
.mosaic__cap .m{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gold)}
.m-2x2{grid-column:span 4;grid-row:span 3}
.m-2x1{grid-column:span 4;grid-row:span 2}

/* Lightbox de la galería: la imagen se amplía por encima de la página (el
   fondo se ve oscurecido detrás, sin salir de la vista actual), con flechas
   para pasar de una a otra y una X para cerrar. */
.lightbox{
  position:fixed;inset:0;z-index:400;display:none;
  grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;align-items:center;
  gap:var(--s-5);padding:var(--s-6);
  background:rgba(17,17,17,.92);
}
.lightbox.is-open{display:grid}
.lightbox__media{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:100%}
.lightbox__media img,.lightbox__media video{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius)}
.lightbox__caption{grid-column:1/-1;grid-row:2;color:var(--color-paper-muted);text-align:center;font-size:.92rem}
.lightbox__download{grid-column:1/-1;grid-row:3;justify-self:center;margin-top:var(--s-3);padding:10px 18px;border:1px solid var(--color-gold);border-radius:var(--radius);color:var(--color-gold);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;text-decoration:none}
.lightbox__download:hover{background:var(--color-gold);color:var(--color-ink)}
.lightbox__download[hidden]{display:none}
.lightbox__close,.lightbox__prev,.lightbox__next{
  background:transparent;border:1.5px solid rgba(244,240,231,.4);color:var(--color-paper);
  border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;line-height:1;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:rgba(244,240,231,.12);border-color:var(--color-paper)}
.lightbox__close{position:absolute;top:var(--s-5);right:var(--s-5)}
.lightbox__prev{grid-column:1;grid-row:1}
.lightbox__next{grid-column:3;grid-row:1}
@media (max-width:599px){
  .lightbox{padding:var(--s-4);grid-template-columns:1fr}
  .lightbox__prev,.lightbox__next{position:absolute;top:50%;transform:translateY(-50%);z-index:1}
  .lightbox__prev{left:var(--s-4)}
  .lightbox__next{right:var(--s-4)}
  .lightbox__media{grid-column:1}
  .lightbox__caption{grid-row:2}
}
.m-1x1{grid-column:span 2;grid-row:span 2}
.m-wide{grid-column:span 6;grid-row:span 3}
@media (max-width:767px){.m-2x2,.m-wide{grid-column:span 4;grid-row:span 3}.m-2x1{grid-column:span 2;grid-row:span 2}.m-1x1{grid-column:span 2;grid-row:span 2}}
.play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(244,240,231,.92);
  display:flex;align-items:center;justify-content:center;color:var(--color-carmine);
  pointer-events:none;
}

/* Vídeo de clase (formacion.ClasePage): el iframe lo inyecta clase-video.js tras comprobar acceso */
.video-embed{position:relative;aspect-ratio:16/9;background:var(--color-ink);border-radius:10px;overflow:hidden}

/* Vídeos destacados de la portada ("Clases grabadas y conferencias"): marco
   interno negro de 3px y esquinas que pasan de suaves a totalmente
   rectas al pasar el cursor, volviendo atrás al quitarlo. */
.video-embed--destacado{
  border:3px solid var(--color-ink);border-radius:22px;
  transition:border-radius var(--t-med) var(--ease);
}
.video-embed--destacado:hover{border-radius:0}
@media (prefers-reduced-motion:reduce){.video-embed--destacado{transition:none}}
.video-embed__visto{
  position:absolute;top:var(--s-3);right:var(--s-3);z-index:2;
  background:var(--color-ink);color:var(--color-paper);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed__cargando,.video-embed__error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--s-5);text-align:center;color:var(--color-paper);font-family:var(--font-mono);font-size:.9rem}
.video-embed__error{color:var(--color-gold)}

/* Portada de YouTube con botón de reproducir: antes de pulsar play solo se ve
   la miniatura propia, sin la cabecera/marca de YouTube que trae el iframe
   incrustado de serie. El iframe real se inyecta por JS al pulsar. */
.video-embed__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:var(--color-ink)}
.video-embed__play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-med) var(--ease),opacity var(--t-fast)}
.video-embed__play:hover img{transform:scale(1.03);opacity:.85}
.video-embed__play .play-badge{transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
.video-embed__play:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);background:var(--color-carmine);color:#fff}

/* ---------- 12. RED DE COLABORACIÓN ---------- */
.network-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
@media (max-width:1023px){.network-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.network-grid{grid-template-columns:1fr}}
.partner{
  border:var(--line);border-radius:var(--radius);background:var(--color-white);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);
  text-decoration:none;transition:border-color var(--t-fast);
}
.partner:hover{border-color:var(--color-atlantic)}
.partner__logo{height:52px;display:flex;align-items:center}
.partner__logo img{max-height:52px;width:auto}
.partner__name{font-weight:700;font-size:1.05rem}
.partner__kind{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-atlantic)}
.partner__desc{font-size:.92rem;color:var(--color-ink-soft)}

/* ---------- 13. PREMIOS ---------- */
.prize{
  border:2px solid var(--color-gold);border-radius:var(--radius);
  padding:clamp(var(--s-5),3vw,var(--s-7));
  background:linear-gradient(120deg,rgba(180,138,60,.06),transparent 55%),var(--color-white);
  display:grid;grid-template-columns:1fr auto;gap:var(--s-6);align-items:start;
}
@media (max-width:767px){.prize{grid-template-columns:1fr}}
.prize__deadline{text-align:right;border-left:2px solid var(--color-gold);padding-left:var(--s-5)}
@media (max-width:767px){.prize__deadline{border-left:0;padding-left:0;text-align:left;border-top:2px solid var(--color-gold);padding-top:var(--s-4)}}
.prize__deadline .d{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:750;line-height:1.05;letter-spacing:-.02em}

/* ---------- 14. NEWSLETTER / FORMULARIOS ---------- */
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-5)}
.form-field label{font-weight:600;font-size:.95rem}
.form-field .req{color:var(--color-carmine)}
.form-field input,.form-field select,.form-field textarea{
  font:inherit;padding:12px 14px;min-height:48px;
  border:1.5px solid var(--color-ink);border-radius:var(--radius);
  background:var(--color-white);color:var(--color-ink);width:100%;
}
.form-field textarea{min-height:140px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid var(--color-focus);outline-offset:2px}
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{border-color:var(--color-error)}
.form-field .error-msg,.form-check .error-msg{color:var(--color-error);font-size:.88rem;font-weight:600;display:none}
.form-field.has-error .error-msg,.form-check.has-error .error-msg{display:block}
.section--carmine .form-check.has-error .error-msg,.section--dark .form-check.has-error .error-msg{color:#ffb3a8}
.form-check{display:flex;gap:var(--s-3);align-items:flex-start;margin-bottom:var(--s-5)}
.form-check input{width:22px;height:22px;margin-top:3px;accent-color:var(--color-carmine);flex-shrink:0}
.form-check label{font-size:.92rem;color:var(--color-ink-soft)}
/* Sobre fondos oscuros, las etiquetas y notas de formulario van en claro */
.section--carmine .form-check label,.section--dark .form-check label,.section--atlantic .form-check label{color:var(--color-white)}
.section--carmine .form-note,.section--dark .form-note,.section--atlantic .form-note{color:var(--color-paper-muted)}
.form-note{font-family:var(--font-mono);font-size:.78rem;color:var(--color-ink-soft)}
.form-success{
  display:none;border:1.5px solid var(--color-success);border-radius:var(--radius);
  background:#eef3ee;color:var(--color-success);padding:var(--s-5);font-weight:600;
}
.form-success.is-visible{display:block}
.section--carmine .form-field input,.section--carmine .form-field textarea{border-color:transparent}

/* ---------- 15. FOOTER ---------- */
.site-footer{background:var(--color-ink);color:var(--color-paper);overflow:hidden}
.footer-main{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-7);padding-block:var(--s-8) var(--s-7)}
@media (max-width:1023px){.footer-main{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.footer-main{grid-template-columns:1fr}}
.footer-brand p{font-family:var(--font-serif);color:var(--color-paper-muted);font-size:1rem;max-width:34ch;margin:var(--s-4) 0}
.footer-inst{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);text-decoration:none}
a.footer-inst:hover span{color:var(--color-gold)}
.footer-inst img{height:40px;width:auto;background:#fff;padding:5px 8px;border-radius:var(--radius)}
.footer-inst span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--color-paper-muted);max-width:22ch}
.footer-col h2{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--s-4)}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col a{color:var(--color-paper);text-decoration:none;font-size:.98rem}
.footer-col a.btn--light{color:var(--color-ink)}
.footer-col a.btn--light:hover{color:var(--color-ink);text-decoration:none}
.footer-col a:hover{color:var(--color-gold);text-decoration:underline}
.footer-contact li{color:var(--color-paper-muted);font-size:.95rem}
.footer-legal{
  border-top:1px solid var(--color-border-dark);
  padding-block:var(--s-5);display:flex;gap:var(--s-4) var(--s-6);flex-wrap:wrap;align-items:center;
  font-size:.85rem;color:var(--color-paper-muted);
}
.footer-legal a{color:inherit;text-decoration:none}
.footer-legal a:hover{color:var(--color-gold)}
.footer-legal .copy{margin-right:auto}
.footer-wordmark{
  font-weight:750;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(3rem,10vw,10rem);
  color:transparent;-webkit-text-stroke:1px rgba(244,240,231,.25);
  user-select:none;padding-top:var(--s-6);white-space:nowrap;
}
.social{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.social a{
  width:44px;height:44px;border:1px solid var(--color-border-dark);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--color-paper);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.social a:hover{background:var(--color-carmine);border-color:var(--color-carmine)}
.social svg{width:18px;height:18px}

/* ---------- 15b. REVISTA (cubierta + cronología) ---------- */
/* Cubierta de la revista: evoca el diseño de portada de la publicación
   (azul marino + oro, ya usados en los tokens --color-atlantic/--color-gold
   del resto del sitio) con un filete doble al estilo de una tapa editorial. */
.revista-cover{
  position:relative;overflow:hidden;border-radius:var(--radius);
  max-width:360px;margin-inline:auto;
  box-shadow:0 24px 48px -24px rgba(17,17,17,.4);
}
.revista-cover img{display:block;width:100%;height:auto}

/* Cronología vertical (convocatoria de originales) */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:rgba(244,240,231,.25)}
.timeline__item{position:relative;padding-bottom:var(--s-6)}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;left:-32px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-atlantic-deep);border:3px solid var(--color-gold)}
.timeline__fecha{font-family:var(--font-mono);font-size:.76rem;color:var(--color-gold);letter-spacing:.06em}
.timeline__hito{font-weight:700;font-size:1.08rem;margin-top:2px}

/* ---------- 16. PÁGINAS INTERIORES ---------- */
.page-hero{border-bottom:var(--line);padding-block:clamp(var(--s-7),6vw,var(--s-9)) clamp(var(--s-6),4vw,var(--s-8))}
.page-hero--dark{background:linear-gradient(155deg,var(--color-carmine) 0%,var(--color-carmine-dark) 52%,#170709 100%);color:var(--color-paper);border-bottom:0}
.page-hero--carmine{background:linear-gradient(155deg,var(--color-carmine-dark) 0%,#1a0b0e 100%);color:var(--color-paper);border-bottom:0}
.page-hero h1{font-size:var(--text-h1);line-height:.98;letter-spacing:-.03em;font-weight:750;text-wrap:balance;margin:var(--s-4) 0}
.page-hero .lead{color:inherit;opacity:.85}

.breadcrumbs{padding-block:var(--s-4);border-bottom:var(--line);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em}
.breadcrumbs ol{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.breadcrumbs li{display:flex;gap:var(--s-2);align-items:center}
.breadcrumbs li+li::before{content:"/";color:var(--color-ink-soft)}
.breadcrumbs a{text-decoration:none;color:var(--color-ink-soft)}
.breadcrumbs a:hover{color:var(--color-carmine)}
.breadcrumbs [aria-current]{color:var(--color-carmine)}

/* Layout con nav lateral sticky */
.doc-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--s-8);align-items:start}
@media (max-width:1023px){.doc-layout{grid-template-columns:1fr}}
.side-nav{position:sticky;top:calc(var(--header-h-compact) + 24px)}
@media (max-width:1023px){.side-nav{position:static;border-bottom:var(--line);padding-bottom:var(--s-4);margin-bottom:var(--s-2)}}
.side-nav h2{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-carmine);margin-bottom:var(--s-3)}
.side-nav ul{display:flex;flex-direction:column}
@media (max-width:1023px){.side-nav ul{flex-direction:row;flex-wrap:wrap;gap:var(--s-2)}}
.side-nav a{
  display:block;padding:8px 0 8px var(--s-4);text-decoration:none;font-size:.95rem;font-weight:500;
  border-left:2px solid var(--color-border);color:var(--color-ink-soft);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.side-nav a:hover,.side-nav a.is-active{color:var(--color-carmine);border-left-color:var(--color-carmine)}
@media (max-width:1023px){.side-nav a{border-left:0;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:6px 14px}}

.doc-section{padding-block:var(--s-6);border-top:var(--line)}
.doc-section:first-child{border-top:0;padding-top:0}
.doc-section h2{font-size:var(--text-h3);letter-spacing:-.015em;line-height:1.1;margin-bottom:var(--s-4)}

/* Objetivos numerados */
.objectives{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);counter-reset:obj}
@media (max-width:1023px){.objectives{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.objectives{grid-template-columns:1fr}}
.objective{border-top:2px solid var(--color-ink);padding-top:var(--s-4)}
.objective .n{font-family:var(--font-mono);color:var(--color-gold-ink);font-size:.85rem;display:block;margin-bottom:var(--s-2)}
.section--dark .objective .n,.section--atlantic .objective .n,.section--carmine .objective .n{color:var(--color-gold)}
.objective h3{font-size:1.25rem;line-height:1.25;margin-bottom:var(--s-2);letter-spacing:-.01em}
.objective p{font-family:var(--font-serif);font-size:.98rem;color:var(--color-ink-soft)}

/* Ficha de datos (proyecto/evento) */
.datasheet{border:var(--line);border-radius:var(--radius);background:var(--color-white)}
.datasheet dl{display:grid;grid-template-columns:1fr}
/* Etiqueta encima del valor (no en columnas): con textos reales del CMS, un valor largo
   (p. ej. «Cátedra de la Hispanidad») nunca cabía en la columna estrecha que quedaba junto
   a una etiqueta de 150px, sobre todo en la barra lateral de 260px de las fichas. Apilarlos
   evita el problema de raíz, sin necesidad de partir palabras. */
.datasheet .row{padding:var(--s-4);border-top:var(--line)}
.datasheet .row:first-child{border-top:0}
.datasheet dt{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:4px}
.datasheet dd{font-weight:500}

/* Salvaguarda: una columna «1fr» de CSS Grid no se encoge por debajo del contenido, así que
   una palabra larga sin espacios puede desbordar la caja. min-width:0 lo evita sin cambiar
   cómo se ajusta el texto (solo permite que la pista se encoja para envolverlo con normalidad). */
.event-row,.pub-row,.footer-main,.mega__inner,.doc-layout,.atlas-item__btn,.prize,.journal__issue{min-width:0}
.event-row>*,.pub-row>*,.footer-main>*,.mega__inner>*,.doc-layout>*,.atlas-item__btn>*,.prize>*,.journal__issue>*{min-width:0}
.grid>[class^="col-"],.grid>[class*=" col-"]{min-width:0}
.mosaic>*{min-width:0}

/* Cita bibliográfica */
.cite-box{
  border-left:3px solid var(--color-gold);background:var(--color-white);
  padding:var(--s-5);border-radius:0 var(--radius) var(--radius) 0;
}
.cite-box h3{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold-ink);margin-bottom:var(--s-3)}
.cite-box p{font-family:var(--font-serif);font-size:.95rem;overflow-wrap:anywhere}
.cite-box button{margin-top:var(--s-3)}

/* Acordeón genérico */
.accordion__item{border-top:var(--line)}
.accordion__item:last-child{border-bottom:var(--line)}
.accordion__btn{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  width:100%;padding:var(--s-4) var(--s-2);text-align:left;font-weight:700;font-size:1.1rem;min-height:44px;
}
.accordion__btn:hover{color:var(--color-carmine)}
.accordion__icon{flex-shrink:0;transition:transform var(--t-fast) var(--ease);font-weight:400;font-size:1.4rem;line-height:1}
.accordion__btn[aria-expanded="true"] .accordion__icon{transform:rotate(45deg)}
.accordion__panel{display:none;padding:0 var(--s-2) var(--s-5)}
.accordion__panel.is-open{display:block}

/* Tabs */
.tabs__list{display:flex;gap:2px;border-bottom:2px solid var(--color-ink);flex-wrap:wrap}
.tabs__tab{
  padding:12px 20px;font-weight:600;border-radius:var(--radius) var(--radius) 0 0;min-height:44px;
  transition:background var(--t-fast),color var(--t-fast);
}
.tabs__tab:hover{background:var(--color-paper-muted)}
.tabs__tab[aria-selected="true"]{background:var(--color-ink);color:var(--color-paper)}
.tabs__panel{padding-top:var(--s-5)}
.tabs__panel[hidden]{display:none}

/* Paginación */
.pagination{display:flex;gap:var(--s-2);justify-content:center;padding-top:var(--s-7);flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);border-radius:var(--radius);text-decoration:none;
  font-family:var(--font-mono);font-size:.9rem;padding:0 12px;
}
.pagination a:hover{border-color:var(--color-carmine);color:var(--color-carmine)}
.pagination [aria-current]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}

/* Estados vacíos / carga */
.empty-state{
  border:1.5px dashed var(--color-border);border-radius:var(--radius);
  padding:var(--s-7);text-align:center;max-width:640px;margin-inline:auto;
}
.empty-state h3{font-size:1.3rem;margin-bottom:var(--s-2)}
.empty-state p{font-family:var(--font-serif);color:var(--color-ink-soft)}
.skeleton{background:linear-gradient(90deg,var(--color-paper-muted) 25%,#efe9dc 50%,var(--color-paper-muted) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- 17. COMMAND PALETTE / BÚSQUEDA ---------- */
.palette{
  position:fixed;inset:0;z-index:190;display:none;
  background:rgba(17,17,17,.55);
  padding:min(12vh,120px) var(--s-4) var(--s-4);
}
.palette.is-open{display:block}
.palette__box{
  max-width:720px;margin-inline:auto;background:var(--color-paper);
  border-radius:8px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  display:flex;flex-direction:column;max-height:70vh;
}
.palette__input-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:var(--line)}
.palette__input-row svg{width:22px;height:22px;color:var(--color-carmine);flex-shrink:0}
.palette__input-row input{flex:1;border:0;background:transparent;font:inherit;font-size:1.15rem;min-height:44px}
.palette__input-row input:focus{outline:none}
.palette__input-row kbd{font-family:var(--font-mono);font-size:.72rem;border:1px solid var(--color-border);border-radius:4px;padding:3px 8px;color:var(--color-ink-soft)}
.palette__results{overflow-y:auto;padding:var(--s-3) var(--s-3) var(--s-4)}
.palette__group{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-carmine);padding:var(--s-4) var(--s-3) var(--s-2)}
.palette__item{
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;
  padding:11px var(--s-3);border-radius:var(--radius);text-decoration:none;
}
.palette__item:hover,.palette__item.is-active{background:var(--color-paper-muted)}
.palette__item .t{font-weight:600}
.palette__item .t mark{background:transparent;color:var(--color-carmine)}
.palette__item .k{font-family:var(--font-mono);font-size:.72rem;color:var(--color-ink-soft);flex-shrink:0}
.palette__empty{padding:var(--s-6);text-align:center;font-family:var(--font-serif);color:var(--color-ink-soft)}

/* Página de resultados */
.search-result{padding:var(--s-5) 0;border-top:var(--line)}
.search-result .type{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-atlantic)}
.search-result h3{font-size:1.3rem;margin:4px 0}
.search-result h3 a{text-decoration:none}
.search-result h3 a:hover{color:var(--color-carmine)}
.search-result h3 mark,.search-result p mark{background:rgba(180,138,60,.25);color:inherit;padding:0 2px}
.search-result p{font-family:var(--font-serif);color:var(--color-ink-soft);font-size:1rem;max-width:70ch}

/* ---------- 18. UTILIDADES VARIAS ---------- */
.reading-progress{position:fixed;top:0;left:0;height:3px;background:var(--color-carmine);width:0;z-index:120}
.rule{border:0;border-top:var(--line);margin-block:var(--s-6)}
.img-frame{border:var(--line);border-radius:var(--radius);overflow:hidden;background:var(--color-white)}
.img-frame img{display:block;width:100%;height:auto}
.img-frame figcaption{font-family:var(--font-mono);font-size:.75rem;color:var(--color-ink-soft);padding:var(--s-3) var(--s-4);border-top:var(--line)}
.stack-4>*+*{margin-top:var(--s-4)}
.stack-6>*+*{margin-top:var(--s-6)}
.text-center{text-align:center}
.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}

/* Aparición al hacer scroll: deliberadamente lenta (1s, curva "premium" con
   salida suave) y con más recorrido que antes, para que la web se sienta
   trabajada y no "instantánea". Los modificadores --left/--right entran
   desde fuera del contenido hacia dentro (p. ej. el calendario de la
   portada: el mes desde la izquierda, el panel del día desde la derecha). */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-premium),transform 1s var(--ease-premium)}
.reveal.is-visible{opacity:1;transform:none}
.reveal--left{transform:translate(-64px,0)}
.reveal--right{transform:translate(64px,0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Cortina de entrada de la portada: cubre la pantalla un instante breve (hasta
   que la página carga o, como mucho, ~2.2s) y se retira deslizándose hacia
   arriba, dejando ver el hero ya revelado debajo en vez de plantarlo todo de
   golpe. Solo una vez por sesión (sessionStorage) y nunca si el visitante
   pidió prefers-reduced-motion, en cuyo caso ni se muestra. */
.intro{
  position:fixed;inset:0;z-index:300;background:var(--color-paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);
  transition:transform .75s var(--ease),opacity .6s var(--ease);
}
.intro__mark{
  width:120px;height:120px;
  animation:intro-pop .6s var(--ease) both;
}
.intro__line{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.22em;color:var(--color-ink-soft);
  opacity:0;animation:intro-fade .5s var(--ease) .2s both;
}
.intro__bar{width:160px;height:2px;background:var(--color-border);overflow:hidden;border-radius:2px}
.intro__bar span{display:block;height:100%;width:0;background:var(--color-carmine);animation:intro-bar 1.3s var(--ease) .15s forwards}
@keyframes intro-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes intro-fade{to{opacity:1}}
@keyframes intro-bar{to{width:100%}}
.intro.is-leaving{transform:translateY(-100%);opacity:.5}
.intro.is-done{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* Entrada de la portada: el bloque de texto y la pieza «en foco» aparecen en
   cascada nada más cargar, en vez de plantarse de golpe (lo cubre el reset
   global de prefers-reduced-motion de la sección 2, que anula duración). */
@keyframes hero-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__grid>.col-7>*,.hero__grid .spotlight,.hero__grid .hero-carousel{animation:hero-in 1.1s var(--ease-premium) both}
.hero__grid>.col-7>*:nth-child(1){animation-delay:.1s}
.hero__grid>.col-7>*:nth-child(2){animation-delay:.26s}
.hero__grid>.col-7>*:nth-child(3){animation-delay:.44s}
.hero__grid>.col-7>*:nth-child(4){animation-delay:.62s}
.hero__grid .spotlight,.hero__grid .hero-carousel{animation-delay:.74s}

/* Calendario de la portada: mes pequeño a la izquierda, contenido del día
   seleccionado a la derecha. Datos reales (pasados y futuros) servidos por
   HomePage.get_context vía json_script, sin depender de ningún dato de
   ejemplo. Sustituye a la franja de boletín, que ya vive también en el
   pie de página. */
.home-cal{display:grid;grid-template-columns:340px 1fr;gap:var(--s-7);align-items:stretch}
@media (max-width:1023px){.home-cal{grid-template-columns:1fr}}
.home-cal__month{border:var(--line);border-radius:var(--radius);padding:var(--s-5);background:var(--color-white)}
.home-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.home-cal__title{font-weight:700;text-transform:capitalize}
.home-cal__nav{display:flex;gap:4px}
.home-cal__nav button{width:32px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius);transition:background var(--t-fast)}
.home-cal__nav button:hover{background:var(--color-paper-muted)}
.home-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.home-cal__dow{font-family:var(--font-mono);font-size:.7rem;color:var(--color-ink-soft);padding-bottom:4px}
.home-cal__grid button{aspect-ratio:1;border-radius:4px;border:1px solid var(--color-border);font-size:.88rem;position:relative;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.home-cal__grid button:hover{background:var(--color-paper-muted)}
/* Día con actividad: recuadro relleno con una trama diagonal suave (no un
   color sólido ni un simple puntito), para que se note sin ser demasiado
   fuerte. El resto de días solo llevan el recuadro vacío. */
.home-cal__grid button.has-events{
  background:repeating-linear-gradient(45deg,var(--color-carmine) 0 5px,var(--color-carmine-dark) 5px 10px);
  border-color:var(--color-carmine);color:var(--color-paper);font-weight:700;
}
.home-cal__grid button.has-events:hover{background:repeating-linear-gradient(45deg,var(--color-carmine-dark) 0 5px,var(--color-carmine) 5px 10px)}
.home-cal__grid button.is-today{box-shadow:inset 0 0 0 2px var(--color-ink)}
.home-cal__grid button.is-today.has-events{box-shadow:inset 0 0 0 2px var(--color-gold)}
.home-cal__grid button.is-selected{background:rgba(17,17,17,.6);color:var(--color-paper)}
.home-cal__grid button.is-selected.has-events{background:var(--color-gold-ink)}
.home-cal__day{border:var(--line);border-radius:var(--radius);padding:var(--s-5);background:var(--color-white);min-height:240px}
.home-cal__date{color:var(--color-carmine);margin-bottom:var(--s-4);display:block}
.home-cal__empty{font-family:var(--font-serif);color:var(--color-ink-soft)}
.home-cal__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-top:var(--line);text-decoration:none}
.home-cal__item:first-child{border-top:0}
.home-cal__item-img{width:100%;height:auto;border-radius:var(--radius)}
@media (max-width:599px){.home-cal__item-img{aspect-ratio:16/9;object-fit:cover}}
.home-cal__item-time{color:var(--color-carmine);min-width:3.5em;font-family:var(--font-mono);font-size:.8rem}
.home-cal__item-title{display:block;font-weight:700}
.home-cal__item-meta{display:block;font-size:.85rem;color:var(--color-ink-soft)}
.home-cal__item-resumen{display:block;font-family:var(--font-serif);font-size:.92rem;color:var(--color-ink-soft);margin-top:var(--s-2)}
.home-cal__item:hover .home-cal__item-title{color:var(--color-carmine)}

/* «Agenda completa»: el mismo componente de calendario, pero a toda anchura y
   en grande, con el calendario a la izquierda y el panel del día a la derecha
   (visible siempre, también en la vista de año). */
.cal-grande__vistas{display:flex;gap:4px}
.cal-grande__vistas button{
  padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--t-fast),color var(--t-fast);
}
.cal-grande__vistas button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.home-cal--grande{grid-template-columns:1fr 380px}
.home-cal--grande .home-cal__month{padding:var(--s-7)}
.home-cal--grande .home-cal__grid button{font-size:1.15rem}
.home-cal--grande .home-cal__title{font-size:1.4rem}
.home-cal--grande .home-cal__day{align-self:start;position:sticky;top:calc(var(--header-h-compact) + var(--s-5))}
@media (max-width:1023px){.home-cal--grande{grid-template-columns:1fr}.home-cal--grande .home-cal__day{position:static}}

.cal-grande__anio-head{display:flex;align-items:center;justify-content:center;gap:var(--s-6);margin-bottom:var(--s-6)}
.cal-grande__anio-head button{width:36px;height:36px;border:1px solid var(--color-border);border-radius:50%;transition:background var(--t-fast)}
.cal-grande__anio-head button:hover{background:var(--color-paper-muted)}
.cal-grande__anio-head .home-cal__title{font-size:1.4rem}
.cal-grande__meses{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
@media (max-width:1023px){.cal-grande__meses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.cal-grande__meses{grid-template-columns:1fr}}
.cal-mini{border:var(--line);border-radius:var(--radius);padding:var(--s-4);background:var(--color-white)}
.cal-mini__title{font-weight:700;text-transform:capitalize;margin-bottom:var(--s-3);font-size:.92rem}
.cal-mini__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-mini__grid button{aspect-ratio:1;border-radius:3px;border:1px solid var(--color-border);font-size:.76rem;position:relative;transition:background var(--t-fast)}
.cal-mini__grid button:hover{background:var(--color-paper-muted)}
.cal-mini__grid button.has-events{
  background:repeating-linear-gradient(45deg,var(--color-carmine) 0 4px,var(--color-carmine-dark) 4px 8px);
  border-color:var(--color-carmine);color:var(--color-paper);font-weight:700;
}
.cal-mini__grid button.is-today{box-shadow:inset 0 0 0 2px var(--color-ink)}
.cal-mini__grid button.is-selected{background:rgba(17,17,17,.6);color:var(--color-paper)}

/* CTA «Dirección y equipo» en La Cátedra: fila de retratos superpuestos (estilo
   "avatar stack") antes del botón, da una cara real al equipo sin ocupar una
   columna entera. */
.equipo-cta-fotos{display:flex;margin-bottom:var(--s-5)}
.equipo-cta-fotos img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid var(--color-carmine-dark);margin-left:-14px;
}
.equipo-cta-fotos img:first-child{margin-left:0}

/* Calendario (franja de calendario mensual embebido en la página de actividades) */
.cal{border:var(--line);border-radius:var(--radius);overflow:hidden;background:var(--color-white)}
.cal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--s-4);border-bottom:var(--line)}
.cal__title{font-weight:700;text-transform:capitalize}
.cal__nav{display:flex;gap:var(--s-2)}
.cal__nav button{width:40px;height:40px;border:1px solid var(--color-border);border-radius:var(--radius)}
.cal__nav button:hover{border-color:var(--color-carmine);color:var(--color-carmine)}
.cal table{width:100%;border-collapse:collapse}
.cal th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 0;border-bottom:var(--line);color:var(--color-ink-soft)}
.cal td{border:1px solid var(--color-border);height:76px;vertical-align:top;padding:6px;font-size:.85rem;width:14.28%}
.cal td.is-other{background:var(--color-paper);color:#b0a892}
.cal td .ev{display:block;margin-top:4px;background:var(--color-carmine);color:#fff;border-radius:3px;padding:2px 6px;font-size:.7rem;font-family:var(--font-mono);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal td .ev:hover{background:var(--color-carmine-dark)}
@media (max-width:767px){.cal{overflow-x:auto}.cal table{min-width:560px}}

/* Vista rejilla/listado toggle */
.view-toggle{display:inline-flex;border:1px solid var(--color-ink);border-radius:var(--radius);overflow:hidden}
.view-toggle button{padding:9px 16px;font-family:var(--font-mono);font-size:.78rem;min-height:40px}
.view-toggle button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}

/* 404 */
.err-hero{min-height:70svh;display:flex;align-items:center;border-bottom:var(--line)}
.err-code{font-family:var(--font-mono);color:var(--color-carmine);letter-spacing:.2em}

/* Impresión */
@media print{
  .site-header,.site-footer,.skip-link,.hero__atlas,.palette,.mobile-menu{display:none!important}
  body{background:#fff}
}

/* ---------- Aviso de cookies (esquina inferior izquierda) ---------- */
.cookie-banner{
  position:fixed;left:var(--s-5);bottom:var(--s-5);z-index:250;
  width:min(400px,calc(100vw - 2*var(--s-5)));max-height:calc(100vh - 2*var(--s-5));overflow-y:auto;
  background:var(--color-white);border:1.5px solid var(--color-ink);border-radius:var(--radius);
  box-shadow:0 24px 48px -20px rgba(17,17,17,.45);padding:var(--s-5);
}
.cookie-banner__title{font-size:1.15rem;font-weight:700;margin-bottom:var(--s-3)}
.cookie-banner__text{font-size:.9rem;line-height:1.5;color:var(--color-ink-soft)}
.cookie-banner__text a{color:var(--color-carmine)}
.cookie-banner__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.cookie-banner__actions .btn{flex:1 1 auto;justify-content:center;padding:10px 14px;font-size:.88rem;min-height:44px}
.cookie-banner__panel{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.cookie-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-top:var(--line)}
.cookie-opt strong{display:block;font-size:.92rem}
.cookie-opt span{display:block;font-size:.8rem;color:var(--color-ink-soft)}
.cookie-opt input{width:20px;height:20px;flex-shrink:0;accent-color:var(--color-carmine)}
.footer-legal__btn{color:inherit;font:inherit;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0}
.footer-legal__btn:hover{color:var(--color-gold)}
@media (max-width:599px){
  .cookie-banner{left:var(--s-3);right:var(--s-3);bottom:var(--s-3);width:auto}
}
/* El botón flotante de Wagtail (solo editores con sesión) no debe tapar el aviso. */
body:has(wagtail-userbar) .cookie-banner{bottom:calc(var(--s-5) + 64px)}
@media (max-width:599px){body:has(wagtail-userbar) .cookie-banner{bottom:calc(var(--s-3) + 64px)}}

/* Convenio y mecenazgo */
.convenio__logos{display:flex;align-items:center;justify-content:center;gap:var(--s-6);flex-wrap:wrap;padding:var(--s-6) var(--s-4);border:var(--line);border-radius:var(--radius);background:var(--color-white);margin-bottom:var(--s-6)}
.convenio__logos img{height:84px;width:auto;max-width:100%}
.convenio__x{font-family:var(--font-mono);font-size:1.6rem;color:var(--color-ink-soft)}
.convenio__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.convenio__bloque{border:var(--line);border-radius:var(--radius);padding:var(--s-5);background:var(--color-white)}
.convenio__bloque--ancho{grid-column:1/-1}
.convenio__bloque h2{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:var(--s-3)}
.convenio__bloque h2:not(:first-child){margin-top:var(--s-5)}
.convenio__bloque p,.convenio__bloque li{line-height:1.6}
.convenio__bloque ul{display:flex;flex-direction:column;gap:var(--s-3);padding-left:1.1em;list-style:disc}
@media (max-width:760px){.convenio__grid{grid-template-columns:1fr}.convenio__logos img{height:64px}}

/* Emblema de la Cátedra asomando a la derecha de la presentación (marca de agua) */
.section--emblema{position:relative;overflow:hidden;isolation:isolate}
.section--emblema::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(50% + 52px);right:0;width:min(720px,62vw);aspect-ratio:1;
  transform:translate(32%,-50%);
  background:url("../img/logo_marca_agua.f588b0c24a1b.png") center/contain no-repeat;
  opacity:.32;
}
@media (max-width:760px){.section--emblema::after{width:92vw;top:calc(50% + 52px);transform:translate(44%,-30%);opacity:.2}}

/* Anuncio patrocinado en la home */
.anuncio{padding-block:var(--s-8)}
.anuncio__card{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:var(--s-7);align-items:center;padding:var(--s-6);background:var(--color-white);border:var(--line);border-radius:var(--radius)}
.anuncio__img img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:0 10px 30px rgba(16,61,80,.18)}
.anuncio__eyebrow{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold-ink);margin:0 0 var(--s-3)}
.anuncio__title{font-family:var(--font-serif);font-size:var(--text-h3);line-height:1.1;margin:0 0 var(--s-4);color:var(--color-atlantic)}
.anuncio__lead{font-size:var(--text-body);color:var(--color-ink-soft);margin:0 0 var(--s-4)}
.anuncio__datos{list-style:none;padding:0;margin:0 0 var(--s-6);font-size:var(--text-small);display:grid;gap:var(--s-2)}
@media (max-width:760px){.anuncio__card{grid-template-columns:1fr;padding:var(--s-5);gap:var(--s-5)}.anuncio__img{max-width:320px;margin-inline:auto}}

/* Comités (página de equipo y franja de la home) */
.comite{scroll-margin-top:var(--header-h)}
.comite__intro{max-width:72ch;margin-bottom:var(--s-7);font-family:var(--font-serif);font-size:1.15rem;line-height:1.6;color:var(--color-ink-soft)}
.comite__intro p+p{margin-top:var(--s-4)}
.comite__grid .person__name{font-size:1rem}
.comites-home{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:var(--s-8);padding-top:var(--s-6);border-top:var(--line)}
.comites-home__item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"label label" "caras txt" "caras cta";column-gap:var(--s-5);row-gap:var(--s-2);align-items:center;text-decoration:none;color:inherit;padding:var(--s-5);border:var(--line);border-radius:var(--radius);background:var(--color-paper);transition:border-color var(--t-fast) var(--ease)}
.comites-home__item:hover{border-color:var(--color-gold)}
.comites-home__label{grid-area:label;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold-ink);margin-bottom:var(--s-2)}
.comites-home__caras{grid-area:caras;display:flex}
.comites-home__cara{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--color-paper);background:var(--color-paper-muted);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:.95rem;color:var(--color-atlantic)}
.comites-home__cara+.comites-home__cara{margin-left:-12px}
.comites-home__cara img{width:100%;height:100%;object-fit:cover}
.comites-home__txt{grid-area:txt;font-size:var(--text-small);color:var(--color-ink-soft)}
.comites-home__item .link-arrow{grid-area:cta;font-size:var(--text-small)}
@media (max-width:760px){
  .comites-home{grid-template-columns:1fr;gap:var(--s-4)}
  .comites-home__item{grid-template-columns:1fr auto;grid-template-areas:"label caras" "txt txt" "cta cta";row-gap:var(--s-3);padding:var(--s-5) var(--s-4)}
  .comites-home__label{margin-bottom:0;align-self:center}
  .comites-home__caras{justify-self:end}
  .comites-home__cara{width:40px;height:40px}
  .comites-home__cara+.comites-home__cara{margin-left:-10px}
  .comites-home__txt{font-size:1rem;line-height:1.5}
  .comites-home__item .link-arrow{padding-top:var(--s-3);border-top:var(--line);white-space:nowrap}
}