/*
Theme Name: COEFPE
Theme URI: https://corrupcionygenero.com
Description: Tema a medida para el proyecto de investigación «Corrupción, Economía Sumergida y Fraude Fiscal con Perspectiva de Género» (COEFPE), Universidad Pública de Navarra. Composición de diario clásico para un observatorio académico.
Author: Marco Hurtado
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Tested up to: 6.8
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coefpe
Tags: custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready, editor-style
*/

/* ===================================================================
   TIPOGRAFÍA AUTOALOJADA
   Las caras de Inter y Playfair Display se declaran en theme.json, no
   aquí. No es una cuestión de estilo: el módulo google-fonts de Jetpack
   sustituye por fonts.gstatic.com cualquier familia que el tema use sin
   declarar archivos propios, y eso enviaría la IP del visitante a un
   tercero sin consentimiento. Al declararlas en theme.json, WordPress
   las imprime desde assets/fonts/ y Jetpack las respeta.
   =================================================================== */

/* ===================================================================
   FICHAS DE DISEÑO
   =================================================================== */

:root{
  --azul:#15539b;--azul-osc:#0a3268;--azul-claro:#edf3fb;--azul-borde:#cddef2;
  --tinta:#111826;--texto:#2b3442;--suave:#6b7688;--linea:#e2e7ee;--panel:#f7f9fc;
  --ancho:1320px;--margen:26px;
  /* Columna lateral del marco de página: el índice de apartados o la ficha de
     datos cuelgan aquí y el texto ocupa el resto. */
  --lateral:260px;--canal:54px;
  /* Alto real de la barra de navegación fija. Lo necesitan el índice adherido
     y el salto a las anclas: sin reservarlo, la barra tapa el epígrafe. */
  --alto-nav:52px;
  /* Variante oscurecida de --suave para rótulos por debajo de 12px:
     #6b7688 da 4.59:1 sobre blanco, justo en el umbral de WCAG AA;
     #5a6475 sube a 5.98:1 y deja margen a tamaños de 10-11px. */
  --suave-micro:#5a6475;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--texto);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;color:var(--tinta);margin:0;line-height:1.16;font-weight:700;letter-spacing:-.008em}
p{margin:0}
.kicker{font-family:Inter,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--azul);margin-bottom:8px;display:block}

/* Foco visible en todo el sitio: la maqueta no lo definía y el anillo
   por omisión desaparece sobre los fondos azules. */
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.util :focus-visible,.lead :focus-visible,.boletin :focus-visible{outline-color:#8fc0f5}

/* Enlace de salto al contenido, primer tabulable del documento */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--azul-osc);color:#fff;font-size:13.5px;font-weight:600}
.saltar:focus{left:0}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Cualquier destino de ancla deja hueco para la barra fija: al saltar desde el
   índice el navegador alinea el elemento con el borde de la ventana, que es
   justo donde está la barra, y el epígrafe quedaba debajo. */
[id]{scroll-margin-top:calc(var(--alto-nav) + 28px)}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== UTILIDAD ===== */
.util{background:var(--azul-osc);color:rgba(255,255,255,.8);font-size:12px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px}
.util a:hover{color:#fff}
.util-izq{display:flex;gap:18px}
.util-dcha{display:flex;gap:14px;align-items:center}

/* ===== CABECERA ===== */
.masthead{border-bottom:2px solid var(--tinta);background:#fff}
.masthead .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px var(--margen) 18px}
.fecha-m{font-size:12px;color:var(--suave-micro);line-height:1.4;text-transform:uppercase;letter-spacing:.06em}
.fecha-m b{color:var(--tinta);display:block;font-size:13px}
.titulo-cab{text-align:center}
.titulo-cab a{font-family:"Playfair Display",serif;font-size:clamp(26px,3.6vw,46px);font-weight:800;color:var(--tinta);letter-spacing:-.02em;white-space:nowrap}
.titulo-cab a em{font-style:italic;color:var(--azul)}
.titulo-cab small{display:block;font-family:Inter,sans-serif;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--suave-micro);margin-top:5px}
.cab-acc{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.ibtn{width:40px;height:40px;border:1px solid var(--linea);border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--tinta);transition:.15s;flex:none}
.ibtn:hover{background:var(--azul-claro);border-color:var(--azul-borde)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;padding:11px 20px;border-radius:4px;border:1px solid transparent;cursor:pointer;font-family:Inter,sans-serif;transition:.16s}
.btn-azul{background:var(--azul);color:#fff}.btn-azul:hover{background:var(--azul-osc)}
.btn-linea{border-color:var(--tinta);color:var(--tinta);background:#fff}.btn-linea:hover{background:var(--tinta);color:#fff}
.btn-blanco{background:#fff;color:var(--tinta)}.btn-blanco:hover{background:var(--azul-claro)}

/* Buscador desplegable de la cabecera */
.busca{display:none;border-bottom:1px solid var(--linea);background:var(--panel);padding:18px 0}
.busca.abierta{display:block}
.busca-form{display:flex;gap:10px;max-width:620px;margin:0 auto}
.busca-form input[type=search]{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--azul-borde);background:#fff;font:inherit;font-size:14.5px;border-radius:4px;color:var(--tinta)}
.busca-form input[type=search]::placeholder{color:var(--suave)}

/* Listas que genera wp_nav_menu en la barra de utilidad y el pie inferior:
   la maqueta ponía los enlaces sueltos, WordPress los envuelve en <ul>. */
.util-izq ul,.util-dcha ul,.pie-abajo ul{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.util-izq ul{gap:18px}
.util-dcha ul{gap:14px}
.pie-abajo ul{gap:10px}
.pie-abajo li+li::before{content:"·";margin-right:10px;color:var(--suave)}
/* Los dos bloques del pie se miden por su contenido: como ítems flexibles
   encogían y la lista legal acababa en columna. */
.pie-abajo>*{flex:none}
.pie-abajo ul{justify-content:flex-end}

/* ===== NAV ===== */
.navbar{border-bottom:1px solid var(--linea);position:sticky;top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);z-index:60}
/* Con la barra de administración de WordPress la fila tiene que quedarse
   debajo de ella, no debajo del borde de la ventana. Por debajo de 600px el
   propio WordPress la vuelve absoluta y entonces ya no estorba. */
body.admin-bar .navbar{top:32px}
@media(max-width:782px){body.admin-bar .navbar{top:46px}}
@media(max-width:600px){body.admin-bar .navbar{top:0}}
.navbar .wrap{display:flex;align-items:center;justify-content:center;gap:4px;position:relative}
.navbar ul{list-style:none;margin:0;padding:0}
.navbar>.wrap>ul{display:flex;gap:2px}
.navbar li{position:relative}
.navbar>.wrap>ul>li>a{display:block;padding:14px 16px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--texto);white-space:nowrap;border-bottom:2px solid transparent}
.navbar>.wrap>ul>li>a:hover,.navbar li:hover>a{color:var(--azul);border-bottom-color:var(--azul)}
.navbar li>a.on,.navbar li.current-menu-item>a,.navbar li.current-menu-parent>a,.navbar li.current-menu-ancestor>a{color:var(--azul);border-bottom-color:var(--azul)}
.drop{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--linea);box-shadow:0 12px 30px rgba(17,24,38,.1);padding:6px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s;display:block;border-radius:4px}
.navbar li:hover>.drop,.navbar li:focus-within>.drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 12px;font-size:13.5px;border-radius:3px;text-transform:none;letter-spacing:0;font-weight:500;white-space:nowrap}
.drop a:hover{background:var(--azul-claro);color:var(--azul-osc)}
/* El último epígrafe abre su submenú hacia dentro para no salirse de la
   ventana: el menú está centrado y los títulos largos lo desbordarían. */
.navbar>.wrap>ul>li:last-child .drop{left:auto;right:0}
.nav-lat{position:absolute;right:26px;top:50%;transform:translateY(-50%);display:flex;gap:8px}

/* ===== PORTADA ===== */
.lead{position:relative;margin-top:28px;border-radius:3px;overflow:hidden;min-height:540px;display:flex;align-items:flex-end;background:#0a1626}
.lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.lead-txt{position:relative;padding:60px 56px 44px;background:linear-gradient(transparent,rgba(5,14,28,.9) 62%);width:100%;color:#fff}
.lead-txt .kicker{color:#8fc0f5}
.lead h1,.lead h2{color:#fff;font-size:clamp(30px,4.2vw,58px);max-width:20ch;margin-bottom:16px}
.lead p{color:rgba(255,255,255,.82);max-width:62ch;font-size:16px;margin-bottom:20px}
.lead-firma{display:flex;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.7);flex-wrap:wrap}
.lead-firma b{color:#fff}

/* ===== REJILLA COLUMNAS ===== */
.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0 10px;border-top:1px solid var(--linea)}
.col-art{padding:26px 24px;border-right:1px solid var(--linea)}
.col-art:first-child{padding-left:0}
.col-art:last-child{border-right:0;padding-right:0}
.col-art .foto{aspect-ratio:3/2;overflow:hidden;margin-bottom:14px;background:var(--panel)}
.col-art .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.col-art:hover .foto img{transform:scale(1.04)}
.col-art h3{font-size:19px;margin-bottom:9px}
.col-art:hover h3{color:var(--azul-osc)}
.col-art p{font-size:13.5px;color:var(--suave)}
.col-art time{display:block;margin-top:12px;font-size:11.5px;color:var(--suave-micro);letter-spacing:.05em;text-transform:uppercase}

/* ===== DOS COLUMNAS ===== */
.dos{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;padding:44px 0;border-top:3px double var(--tinta);margin-top:34px}
/* En un listado el filete doble ya lo pone la cabecera de la página. */
.dos-listado{margin-top:0;padding:0;border-top:0}
.tit-sec{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.tit-sec h1,.tit-sec h2{font-size:24px;white-space:nowrap}
.tit-sec::after{content:"";flex:1;height:1px;background:var(--linea)}
.tit-sec a{font-size:12px;font-weight:600;color:var(--azul);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tit-sec-menor{margin-bottom:14px}
.tit-sec-menor h2{font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave-micro)}

/* Paginación de los listados: la maqueta solo dibujaba la portada */
.navigation.pagination{margin-top:34px;border-top:1px solid var(--linea);padding-top:22px}
.pagination .nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px;font-weight:600}
.pagination .page-numbers{display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--linea);color:var(--texto)}
.pagination a.page-numbers:hover{background:var(--azul-claro);border-color:var(--azul-borde);color:var(--azul-osc)}
.pagination .page-numbers.current{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pagination .page-numbers.dots{border-color:transparent}

.rio{display:grid;gap:0}
.rio article{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--linea)}
/* Casi ningún contenido migrado trae imagen destacada: sin esto el texto se
   metía en la columna de 200 px de la foto y salía una palabra por línea. */
.rio article.sin-foto{grid-template-columns:1fr}
.rio article:first-child{padding-top:0}
.rio .foto{aspect-ratio:4/3;overflow:hidden;background:var(--panel)}
.rio .foto img{width:100%;height:100%;object-fit:cover}
.rio h3{font-size:21px;margin-bottom:8px}
.rio article:hover h3{color:var(--azul-osc)}
.rio p{font-size:13.8px;color:var(--suave);margin-bottom:10px}
.meta{font-size:11.5px;color:var(--suave-micro);display:flex;gap:10px;align-items:center;text-transform:uppercase;letter-spacing:.05em;flex-wrap:wrap}
.tag{background:var(--azul-claro);color:var(--azul-osc);font-weight:700;padding:3px 8px;font-size:10px;letter-spacing:.09em}

/* Rail */
.rail-caja{border:1px solid var(--linea);padding:22px;margin-bottom:22px}
.rail-caja:last-child{margin-bottom:0}
.rail-caja .busca-form{flex-direction:column;max-width:none;margin:0}
.rail-nota{font-size:13.5px;line-height:1.55;color:var(--suave);margin-bottom:16px}
.nube{display:flex;flex-wrap:wrap;gap:7px}
.nube .tag:hover{background:var(--azul-osc);color:#fff}
.rail-caja h4{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.top-lista{list-style:none;margin:0;padding:0;counter-reset:n}
.top-lista li{counter-increment:n;display:flex;gap:14px;padding:13px 0;border-bottom:1px dotted var(--linea)}
.top-lista li:last-child{border-bottom:0;padding-bottom:0}
.top-lista li::before{content:counter(n,decimal-leading-zero);font-family:"Playfair Display",serif;font-size:22px;font-weight:700;color:var(--azul-borde);line-height:1}
.top-lista a{font-size:14px;font-weight:500;color:var(--tinta);line-height:1.38}
.top-lista a:hover{color:var(--azul)}
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.agenda li{display:flex;gap:14px}
.dia{flex:none;width:52px;text-align:center;border:1px solid var(--linea);padding:6px 0}
.dia b{display:block;font-family:"Playfair Display",serif;font-size:20px;color:var(--tinta);line-height:1}
.dia span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--suave-micro)}
.agenda strong{display:block;font-size:13.8px;color:var(--tinta);font-weight:600;line-height:1.35}
.agenda small{font-size:12px;color:var(--suave)}

/* Cita */
.cita{background:var(--azul-claro);border-left:3px solid var(--azul);padding:26px;margin-bottom:22px}
.cita blockquote{margin:0;font-family:"Playfair Display",serif;font-size:19px;line-height:1.4;color:var(--tinta);font-style:italic}
.cita cite{display:block;margin-top:14px;font-family:Inter,sans-serif;font-style:normal;font-size:12.5px;color:var(--suave)}

/* Boletín */
.boletin{background:var(--azul-osc);color:#fff;padding:52px 0;margin-top:20px}
.boletin .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.boletin h2{color:#fff;font-size:30px;margin-bottom:10px}
.boletin p{color:rgba(255,255,255,.72)}
.formu{display:flex;gap:10px;flex-wrap:wrap}
.formu input{flex:1;min-width:210px;padding:13px 16px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14px;border-radius:4px}
/* A .5 el marcador de posición daba 4.27:1 sobre el azul y no llegaba a AA */
.formu input::placeholder{color:rgba(255,255,255,.62)}
.formu input:focus{outline:2px solid #8fc0f5;outline-offset:1px}

/* Pie */
.pie{padding:48px 0 0;font-size:13.5px;color:var(--suave);border-top:1px solid var(--linea)}
.pie-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:38px;padding-bottom:36px}
.pie h5{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie a:hover{color:var(--azul);text-decoration:underline}
.logos{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;align-items:center}
.logo-i{height:44px;padding:0 14px;border:1px solid var(--linea);display:grid;place-items:center;font-size:11px;text-align:center}
.logo-i img{max-height:28px;width:auto}
.pie-abajo{border-top:1px solid var(--linea);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px}

/* ===================================================================
   PÁGINAS Y FICHAS
   =================================================================== */

/* Una sola regla de composición para todo el sitio: listados, páginas y
   fichas arrancan en el borde izquierdo de .wrap y ocupan todo el ancho
   disponible. Ningún contenedor recorta el contenido; lo que estrecha la
   columna de lectura es tener algo al lado —el índice o la ficha de datos—,
   no un tope arbitrario. */
.pagina{padding-top:38px;padding-bottom:56px}
.pagina-cab{margin:0 0 30px}
.pagina-cab h1{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.pagina-cab .entradilla{font-size:18px;line-height:1.55;color:var(--suave)}
.pagina-cab .meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.pagina-cuerpo{margin:0}

/* El lateral —índice de la página o ficha de datos— se cuelga a la izquierda
   del texto, por debajo del titular. Si la plantilla no lo imprime, el marco
   no reserva el hueco: dejaba una banda vacía que parecía un fallo. */
.pagina-marco:has(>.pagina-lat){display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);column-gap:var(--canal);align-items:start}
.pagina-marco>*{grid-column:2}
.pagina-marco>.pagina-cab{grid-column:1/-1;grid-row:1}
.pagina-marco>.pagina-lat{grid-column:1;grid-row:2/span 12}
.pagina-lat>*+*{margin-top:26px}
.pagina-lat .indice{margin-bottom:0;background:none;border:0;border-top:3px double var(--tinta);padding:18px 0 0;position:sticky;top:calc(var(--alto-nav) + 22px)}

/* Portada de artículo a sangre de la columna de lectura */
.portada-art{margin:0 0 32px}
.portada-art img{width:100%}

/* Texto que sale del editor. Sin esto el contenido se pinta como un
   bloque macizo: la regla global p{margin:0} de la maqueta lo exige. */
.prosa{font-size:16.5px;line-height:1.72}
.prosa>*+*{margin-top:1.1em}
.prosa h2{font-size:27px;margin-top:1.9em}
.prosa h3{font-size:21px;margin-top:1.7em}
.prosa h4{font-size:18px;margin-top:1.5em}
.prosa a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.prosa a:hover{color:var(--azul-osc)}
.prosa ul,.prosa ol{padding-left:1.35em;margin-top:1.1em}
.prosa li+li{margin-top:.45em}
.prosa img,.prosa figure{margin-top:1.8em}
.prosa blockquote{border-left:3px solid var(--azul);background:var(--azul-claro);margin:1.8em 0 0;padding:24px 26px;font-family:"Playfair Display",Georgia,serif;font-size:19px;font-style:italic;line-height:1.45;color:var(--tinta)}
.prosa blockquote p+p,.prosa blockquote cite{margin-top:12px}
.prosa blockquote cite{display:block;font-family:Inter,sans-serif;font-style:normal;font-size:12.5px;color:var(--suave)}
.prosa hr{border:0;border-top:1px solid var(--linea);margin:2.4em 0 0}
.prosa table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:1.8em}
.prosa th,.prosa td{border:1px solid var(--linea);padding:9px 12px;text-align:left;vertical-align:top}
.prosa th{background:var(--panel);font-weight:600}
.prosa code{background:var(--panel);padding:2px 5px;font-size:.9em}
.prosa .wp-block-embed,.prosa iframe{margin-top:1.8em}

/* Índice de apartados para los textos largos del proyecto */
.indice{border:1px solid var(--linea);background:var(--panel);padding:20px 22px;margin-bottom:34px}
.indice h2{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:12px}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:i;display:grid;gap:8px}
.indice li{counter-increment:i;font-size:14.5px}
.indice li::before{content:counter(i,decimal-leading-zero);color:var(--azul-borde);font-family:"Playfair Display",serif;font-weight:700;margin-right:10px}
/* Los subapartados no entran en la numeración: se sangran y se marcan con filete. */
.indice li.indice-sub{counter-increment:none;font-size:13.5px;margin-left:34px;padding-left:12px;border-left:1px solid var(--azul-borde);color:var(--suave)}
.indice li.indice-sub::before{content:none}
.indice a:hover{color:var(--azul);text-decoration:underline}

/* Ficha de datos de publicaciones, actividades y personas */
.ficha{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:4px 0;margin:30px 0 0;display:grid;gap:0}
.ficha div{display:grid;grid-template-columns:168px 1fr;gap:18px;padding:11px 0;border-bottom:1px dotted var(--linea)}
.ficha div:last-child{border-bottom:0}
.ficha dt{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--suave-micro);padding-top:3px}
.ficha dd{margin:0;font-size:15px;color:var(--tinta)}
.ficha dd a{color:var(--azul);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
/* En el lateral no cabe la ficha a dos columnas: el rótulo pasa encima. */
.pagina-lat .ficha{margin-top:0}
.pagina-lat .ficha div{grid-template-columns:1fr;gap:3px;padding:9px 0}
/* Los retratos de origen van de 400 a 1024 px de alto: cuando el original es
   menor que el recorte de 400×500, WordPress sirve otro tamaño y la proporción
   se descuadra. Se impone aquí, no en el archivo. */
.retrato-ficha{margin:0}
.retrato-ficha img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}

.bloque-rel{margin-top:40px}
.lista-vinculos{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lista-vinculos li{padding:11px 0;border-bottom:1px dotted var(--linea);font-size:15px;line-height:1.5}
.lista-vinculos a{color:var(--tinta)}
.lista-vinculos a:hover{color:var(--azul)}
.lista-vinculos .anio{color:var(--suave-micro);font-size:12.5px;white-space:nowrap}

/* Sin sitio para dos columnas, el lateral pasa a ir delante del texto. */
@media(max-width:980px){
  .pagina-marco:has(>.pagina-lat){display:block}
  .pagina-lat{margin-bottom:30px}
  .pagina-lat .indice{position:static}
  .retrato-ficha{max-width:260px}
}

/* Barra de filtros de los archivos */
.filtros{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:14px 0;margin-bottom:30px;display:grid;gap:12px}
.filtros-fila{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.filtros h2{font-family:Inter,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave-micro);flex:none;width:112px}
.filtros a{font-size:13px;padding:5px 12px;border:1px solid var(--linea);border-radius:3px;color:var(--texto)}
.filtros a:hover{border-color:var(--azul-borde);background:var(--azul-claro);color:var(--azul-osc)}
.filtros a[aria-current]{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* Listado de publicaciones: referencia bibliográfica, no tarjeta */
.listado{display:grid;gap:0;list-style:none;margin:0;padding:0}
.ref{padding:20px 0;border-bottom:1px solid var(--linea);display:grid;grid-template-columns:76px 1fr;gap:22px}
.ref:first-child{padding-top:0}
.ref .anio{font-family:"Playfair Display",Georgia,serif;font-size:21px;font-weight:700;color:var(--azul-borde);line-height:1.2}
.ref h3{font-size:18px;line-height:1.3;margin-bottom:7px}
.ref h3 a:hover{color:var(--azul-osc)}
.ref .autoria{font-size:13.5px;color:var(--texto);margin-bottom:5px}
.ref .fuente{font-size:13.5px;color:var(--suave);font-style:italic}
.ref .meta{margin-top:10px}

/* Rejilla de equipo */
.equipo{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 28px;list-style:none;margin:0 0 42px;padding:0}
/* El retrato es un enlace: sin `display:block` la proporción no se aplica y
   cada ficha hereda el alto del archivo original, que en los retratos de 2024
   va de los 400 a los 1024 píxeles. El ancho se limita para que la rejilla
   quede como un directorio y no como una galería de fotos. */
.persona .retrato{display:block;aspect-ratio:4/5;max-width:190px;overflow:hidden;background:var(--panel);margin-bottom:14px}
.persona .retrato img{display:block;width:100%;height:100%;object-fit:cover}
.persona .sin-retrato{display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:56px;line-height:1;color:#fff;background:var(--azul-osc)}
.persona h3{font-size:19px;margin-bottom:6px}
.persona .cargo{font-size:13.5px;color:var(--texto)}
.persona .inst{font-size:13px;color:var(--suave);margin-top:2px}
.persona .enlaces{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.persona .enlaces a{color:var(--azul);font-weight:600}
.persona .enlaces a:hover{text-decoration:underline}

/* Trayectoria plegada: las nueve biografías desplegadas de golpe convierten
   la rejilla en un muro de texto y esconden a quien está más abajo. */
.persona .bio{margin-top:11px;border-top:1px solid var(--linea)}
.persona .bio summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:8px 0;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--azul)}
.persona .bio summary::-webkit-details-marker{display:none}
.persona .bio summary::after{content:"+";font-size:14px;letter-spacing:0}
.persona .bio[open] summary::after{content:"–"}
.persona .bio .prosa{font-size:14px;line-height:1.62;color:var(--suave);padding-bottom:12px}
.persona .bio .prosa>*+*{margin-top:.8em}

/* Grupo de trabajo: instituciones, no personas */
.grupo-trabajo{margin-top:16px;padding-top:34px;border-top:3px double var(--tinta)}

.logos-grupo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:30px 34px;align-items:center;margin-top:30px;max-width:none}
.logos-grupo figure{margin:0}
.logos-grupo img{display:block;max-height:58px;width:auto;max-width:100%;margin:0 auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:opacity .2s}
.logos-grupo img:hover{opacity:1}
.editar-grupo{margin-top:20px;font-size:12px}

/* Rejilla de recursos y organismos */
.recursos{display:grid;grid-template-columns:repeat(2,1fr);gap:0;list-style:none;margin:0 0 42px;padding:0;border-top:1px solid var(--linea)}
.recursos li{padding:24px 26px;border-bottom:1px solid var(--linea);border-right:1px solid var(--linea)}
.recursos li:nth-child(2n){border-right:0;padding-right:0}
.recursos li:nth-child(2n+1){padding-left:0}
.recursos h3{font-size:18px;margin-bottom:8px}
.recursos .entidad{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--suave-micro);margin-bottom:9px}
.recursos p{font-size:13.8px;color:var(--suave)}
.recursos .ir{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--azul)}
.recursos .ir:hover{text-decoration:underline}

/* Actividades: cartel de fecha a la izquierda */
.actividades{list-style:none;margin:0;padding:0;display:grid;gap:0}
.act{display:grid;grid-template-columns:92px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid var(--linea)}
.act:first-child{padding-top:0}
.act .cartel{border:1px solid var(--linea);text-align:center;padding:12px 0;height:fit-content}
.act .cartel b{display:block;font-family:"Playfair Display",serif;font-size:30px;color:var(--tinta);line-height:1}
.act .cartel span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--suave-micro);margin-top:3px}
.act .cartel em{display:block;font-style:normal;font-size:11px;color:var(--azul);font-weight:600;margin-top:5px}
.act h3{font-size:20px;margin-bottom:8px}
.act h3 a:hover{color:var(--azul-osc)}
.act p{font-size:13.8px;color:var(--suave);margin-bottom:10px}
.act.pasada .cartel b{color:var(--suave)}

/* Sesiones de un congreso o seminario, con su vídeo */
.sesiones{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.sesion{counter-increment:s;padding:22px 0;border-top:1px solid var(--linea)}
.sesion:last-child{border-bottom:1px solid var(--linea)}
.sesion h3{font-size:19px;margin-bottom:8px}
.sesion h3::before{content:counter(s,decimal-leading-zero);font-size:13px;color:var(--azul-borde);margin-right:12px;vertical-align:2px}
.sesion .ponentes{font-size:13.5px;color:var(--suave);margin-bottom:12px}
.video{position:relative;aspect-ratio:16/9;background:var(--tinta);margin-top:14px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Marcador de posición: el iframe no se pide hasta que se pulsa, para no
   cargar doce reproductores de YouTube ni sus cookies de entrada. */
.video-previo{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:var(--tinta)}
.video-previo img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:.2s}
.video-previo:hover img{opacity:.95}
.video-previo::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-30%,-50%);border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

/* Navegación entre entradas. El marcado lo genera the_post_navigation(). */
.ent-nav{margin:46px 0 0;padding-top:26px;border-top:3px double var(--tinta)}
.ent-nav .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ent-nav .nav-next{text-align:right}
.ent-nav a{display:block}
.ent-nav span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:7px}
.ent-nav b{font-family:"Playfair Display",Georgia,serif;font-size:17px;color:var(--tinta);font-weight:700;line-height:1.3}
.ent-nav a:hover b{color:var(--azul-osc)}
.vacio{padding:10px 0 40px;max-width:620px}
.vacio p{font-size:16px;color:var(--suave);margin-bottom:22px}

/* Móvil */
/* Solo existen en móvil; en escritorio el buscador vive en el masthead y el
   rótulo no hace falta porque el de la cabecera nunca llega a irse. */
.busca-movil{display:none}
.titulo-barra{display:none}
.hamb{display:none;width:40px;height:40px;border:1px solid var(--linea);border-radius:50%;background:#fff;cursor:pointer;position:relative;flex:none}
.hamb i{position:absolute;left:11px;width:18px;height:2px;background:var(--tinta);transition:.25s}
.hamb i:nth-child(1){top:14px}.hamb i:nth-child(2){top:19px}.hamb i:nth-child(3){top:24px}
body.abierto .hamb i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.abierto .hamb i:nth-child(2){opacity:0}
body.abierto .hamb i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.velo{position:fixed;inset:0;background:rgba(10,22,38,.5);opacity:0;visibility:hidden;transition:.25s;z-index:80}
body.abierto .velo{opacity:1;visibility:visible}
.drawer{position:fixed;inset:0 0 0 auto;width:min(87vw,370px);background:#fff;z-index:90;transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
/* La barra de administración se pinta por encima de todo: sin esto tapa el
   botón de cerrar del cajón. */
body.admin-bar .drawer{top:32px}
@media(max-width:782px){body.admin-bar .drawer{top:46px}}
body.abierto .drawer{transform:none}
.drawer-cab{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:2px solid var(--tinta)}
.drawer-cab b{font-family:"Playfair Display",serif;font-size:20px;color:var(--tinta)}
.drawer nav{padding:8px 16px;flex:1}
.drawer nav a,.drawer .acor{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 6px;border:0;border-bottom:1px solid var(--linea);background:none;font:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);cursor:pointer;text-align:left}
.drawer .mas{color:var(--azul);font-size:18px;transition:transform .2s}
.drawer .acor[aria-expanded="true"] .mas{transform:rotate(45deg)}
.sub{list-style:none;margin:0;padding:0 0 6px 8px;max-height:0;overflow:hidden;transition:max-height .28s}
.sub a{font-size:14px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--suave);border-bottom:0;padding:10px 6px}
.drawer-pie{padding:18px 20px;border-top:1px solid var(--linea);display:grid;gap:10px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media(max-width:1100px){
  .rejilla{grid-template-columns:1fr 1fr}
  .col-art{padding:24px}
  .col-art:nth-child(2n){border-right:0;padding-right:0}
  .col-art:nth-child(2n+1){padding-left:0}
  .col-art:nth-child(n+3){border-top:1px solid var(--linea)}
  .dos{grid-template-columns:1fr;gap:40px}
  .pie-grid{grid-template-columns:1fr 1fr}
  .equipo{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  :root{--margen:18px}

  /* El rótulo de sección y su «Ver todas» van los dos en `nowrap`, de modo que
     la fila no puede encogerse por debajo de 358px y desbordaba la pantalla a
     320 y 360. Partiéndola, el rótulo se queda con su línea y el filete y el
     enlace bajan a la siguiente. */
  .tit-sec{flex-wrap:wrap;gap:10px 14px}
  .tit-sec h1,.tit-sec h2{flex:1 1 100%}
  .tit-sec::after{order:2}
  .tit-sec a{order:3}
  /* Tiene que ser `>.wrap>ul`: `.navbar ul` pierde por especificidad contra la
     regla de escritorio de la línea 118 y el menú no se oculta nunca. */
  .navbar>.wrap>ul,.nav-lat{display:none}

  /* La adscripción a la UPNA es lo que acredita el proyecto: en móvil se
     aprieta la barra, pero no se esconde. Si no cabe, cede la de la
     izquierda con puntos suspensivos y «Contacto» se mantiene entero. */
  .util{font-size:11px}
  .util .wrap{gap:12px;min-height:34px}
  .util-izq{gap:12px;min-width:0}
  .util-izq ul{flex-wrap:nowrap;min-width:0}
  .util-izq li{min-width:0}
  .util-izq a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .util-dcha{flex:none}
  .navbar .wrap{justify-content:space-between;padding-top:10px;padding-bottom:10px}
  .hamb{display:block}
  /* La fila de navegación queda con buscador a la izquierda y menú a la
     derecha. El botón de Banco de datos no desaparece: vive en el cajón. */
  .busca-movil{display:grid}
  .cab-acc{display:none}

  /* En móvil no se despliega ningún panel: el campo se mete en la propia fila
     de navegación y ocupa el hueco del rótulo, entre el botón que lo abre y la
     hamburguesa. El marcado sigue en el masthead, así que se coloca encima por
     coordenadas, con la posición y la altura de la barra en `--busca-top` y
     `--busca-alto`. Los 48px de la izquierda son el botón más su holgura; por
     la derecha llega hasta el margen porque la hamburguesa se retira y su
     hueco lo ocupa el botón de enviar. */
  body.buscando .hamb{display:none}
  .busca.abierta{position:fixed;top:var(--busca-top,0px);height:var(--busca-alto,44px);
    left:calc(var(--margen) + 48px);right:var(--margen);
    display:flex;align-items:center;padding:0;border:0;background:none;z-index:70}
  .busca.abierta>.wrap{width:100%;max-width:none;padding:0}
  .busca.abierta .busca-form{max-width:none;gap:6px}
  .busca.abierta input[type=search]{padding:7px 10px;font-size:14px}
  .busca.abierta .busca-form .btn{padding:8px 11px;font-size:10.5px}

  /* El rótulo solo se aparta si está en la barra, que es donde entra el campo.
     Arriba del todo vive en el masthead y no estorba a nadie. */
  .titulo-barra{transition:opacity .18s linear}
  body.buscando.rotulo-en-barra .titulo-barra{opacity:0}

  /* Relevo del rótulo: no son dos títulos que se turnan, es uno solo que
     viaja. Mientras `body.relevo` está activo, el del masthead solo reserva
     su hueco y el visible es este, que el scroll desplaza y agranda hasta
     dejarlo exactamente donde va el otro. Sin JavaScript no se activa y el
     masthead se comporta como siempre. */
  .titulo-barra{display:none}
  body.relevo .titulo-cab a{visibility:hidden}
  body.relevo .titulo-barra{display:grid;place-items:center;position:absolute;top:0;left:50%;
    height:100%;width:max-content;transform:translateX(-50%);pointer-events:none;z-index:2}
  body.relevo .titulo-barra a{font-family:"Playfair Display",Georgia,serif;font-size:18px;
    font-weight:800;letter-spacing:-.02em;color:var(--tinta);white-space:nowrap;display:block;
    pointer-events:auto;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
  body.relevo .titulo-barra a em{font-style:italic;color:var(--azul)}
  .masthead .wrap{grid-template-columns:1fr;text-align:center;gap:12px;padding:16px 18px}
  .fecha-m{justify-content:center;display:flex;gap:10px}
  .lead{min-height:400px;margin-top:20px}
  .lead-txt{padding:40px 24px 28px}
  .boletin .wrap{grid-template-columns:1fr;gap:24px}
  .rio article{grid-template-columns:130px 1fr;gap:16px}
  .pie-grid{grid-template-columns:1fr;gap:26px}
  .equipo{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .rejilla{grid-template-columns:1fr}
  .col-art{padding:22px 0;border-right:0;border-top:1px solid var(--linea)}
  .col-art:first-child{border-top:0;padding-top:0}
  .rio article{grid-template-columns:1fr}
  .rio .foto{aspect-ratio:16/9}
  .equipo{grid-template-columns:1fr;gap:28px}
  .recursos{grid-template-columns:1fr}
  .recursos li{padding:22px 0;border-right:0}
  .ficha div{grid-template-columns:1fr;gap:4px}
  .ref,.act{grid-template-columns:1fr;gap:10px}
  .act .cartel{display:flex;gap:10px;align-items:baseline;justify-content:flex-start;padding:8px 14px;width:fit-content}
  .act .cartel b{font-size:20px}
  .ent-nav .nav-links{grid-template-columns:1fr;gap:18px}
  .ent-nav .nav-next{text-align:left}
}

/* ===================================================================
   CLASES DE WORDPRESS
   Necesarias para que el contenido escrito en el editor se pinte bien.
   =================================================================== */

.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto;height:auto;width:auto;display:block;top:5px;left:5px;padding:12px 20px;background:#fff;z-index:200}
.alignleft{float:left;margin:6px 26px 18px 0}
.alignright{float:right;margin:6px 0 18px 26px}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:12.5px;color:var(--suave);margin-top:8px;line-height:1.45}
.sticky,.gallery-caption,.bypostauthor{}

/* ===== FORMULARIOS DE JETPACK =====
   Jetpack pinta el formulario de contacto y el del boletín con sus propias
   clases; sin estas reglas salen con los controles del navegador, que no
   tienen nada que ver con el resto del sitio. */
.jetpack-contact-form-container,.wp-block-jetpack-contact-form-container{margin-top:1.6em}
/* Los campos no crecen con el marco: una caja de texto de 1.200 px de ancho
   no la rellena nadie. */
.contact-form{max-width:640px}
.contact-form .grunion-field-wrap,.contact-form .jetpack-field{margin-bottom:18px}
.contact-form label,.jetpack-field label,.grunion-field-label{display:block;font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--suave-micro);margin-bottom:7px}
.contact-form label span,.grunion-label-required{color:var(--azul);font-weight:500;letter-spacing:0;text-transform:none}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=url],
.contact-form input[type=tel],.contact-form input[type=date],.contact-form select,.contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--azul-borde);border-radius:4px;background:#fff;
  font:inherit;font-size:15px;color:var(--tinta);transition:border-color .15s,box-shadow .15s}
.contact-form textarea{min-height:170px;line-height:1.6;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
.contact-form button[type=submit],.contact-form input[type=submit]{
  display:inline-flex;align-items:center;gap:8px;background:var(--azul);color:#fff;border:1px solid transparent;
  border-radius:4px;padding:13px 28px;font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;
  width:auto;transition:.16s}
.contact-form button[type=submit]:hover,.contact-form input[type=submit]:hover{background:var(--azul-osc)}
.contact-form p.contact-submit{margin-top:4px}
.contact-form .contact-form-submission{border-left:3px solid var(--azul);background:var(--azul-claro);padding:22px 24px}
.contact-form-submission h4{font-family:"Playfair Display",Georgia,serif;font-size:20px;color:var(--tinta);margin:0 0 10px}
.form-error,.contact-form .error{color:#9b1c1c;font-size:13px;margin-top:6px}

/* Datos institucionales de la página de contacto: pares de rótulo y valor,
   no párrafos sueltos con un <strong> delante. */
.prosa .datos-inst{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 34px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:24px 0;margin-top:1.6em}
.prosa .datos-inst p{font-size:14.5px;line-height:1.6;color:var(--texto)}
.prosa .datos-inst strong{display:block;font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--suave-micro);margin-bottom:6px}

/* ===== BOTONES DE COMPARTIR DE JETPACK =====
   Jetpack los inyecta al final del contenido con su propio marcado; sin
   estas reglas aparecen como una fila de cajas sueltas sin relación con el
   resto de la página. */
.sharedaddy{margin-top:34px;padding-top:22px;border-top:1px solid var(--linea)}
.sharedaddy h3.sd-title{font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave-micro);margin:0 0 14px}
.sharedaddy h3.sd-title::before{content:none}
.sd-content ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sd-content ul li{margin:0;padding:0}
.sd-social-icon-text .sd-button,.sd-content a.sd-button{display:inline-flex!important;align-items:center;gap:8px;padding:8px 14px!important;border:1px solid var(--linea)!important;border-radius:4px!important;background:#fff!important;box-shadow:none!important;font-family:Inter,sans-serif!important;font-size:12.5px!important;font-weight:600!important;color:var(--texto)!important;text-decoration:none!important}
.sd-content a.sd-button:hover{border-color:var(--azul-borde)!important;background:var(--azul-claro)!important;color:var(--azul-osc)!important}

/* Bloques del lateral de la entrada: temas y relacionadas */
.lat-bloque h2{font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave-micro);margin-bottom:14px;padding-bottom:12px;border-top:3px double var(--tinta);padding-top:16px}
.lat-bloque .lista-vinculos{border-top:0}
.lat-bloque .lista-vinculos li{padding:9px 0;font-size:14px}