/*
Theme Name: ACJ
Theme URI: https://academiacolombianadejurisprudencia.com.co
Author: Cloud Active
Description: Tema institucional para la Academia Colombiana de Jurisprudencia. Diseñado para editarse en el frontend con el plugin Gravit Inline Editor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acj
Tags: institutional, news, editor-ready
*/

/*
 * El diseño se resuelve con utilidades de Tailwind (CDN, cargado en header.php).
 * Aquí sólo van los estilos que Tailwind no cubre o que deben existir aunque el
 * CDN todavía no haya compilado.
 *
 * IMPORTANTE: los estilos del editor inline (outline de textos, overlay de la
 * cámara sobre las imágenes, controles de sección) los aporta el propio plugin
 * en assets/css/gravit-editor.css. El tema no debe duplicarlos.
 */

/* Tipografía base antes de que Tailwind entre: evita el salto de fuente. */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;

    /*
     * Fondo de toda la página: el mismo gris cálido que tenía Declaraciones, ahora
     * como lienzo común. Al no llevar 'fixed', el degradado se reparte por el alto
     * completo del documento, así que baja muy lentamente y nunca se percibe como
     * una banda; sólo hace que la parte alta tenga algo de cuerpo y la baja se
     * aclare. Las tarjetas blancas destacan sobre él sin necesidad de bordes.
     *
     * Se declara aquí y no como utilidad en el <body> porque el degradado de
     * Tailwind necesita tres clases encadenadas y esto se lee de una vez.
     */
    background: linear-gradient(to bottom, #f9f8f7, #ffffff) no-repeat;
    min-height: 100vh;
}

/* Alto del header sticky, en un único sitio: lo usan el desplazamiento de las
   anclas y cualquier cálculo que dependa de él. Debe coincidir con las clases
   h-28 md:h-36 del <header> en header.php. */
:root {
    --acj-header-h: 112px;  /* h-28 */
}
@media (min-width: 768px) {
    :root {
        --acj-header-h: 144px;  /* h-36 */
    }
}

/* Las anclas del menú tienen que respetar el header sticky y, para
   administradores, también la admin bar de WordPress. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--acj-header-h) + 8px);
}
body.admin-bar,
html:has(body.admin-bar) {
    scroll-padding-top: calc(var(--acj-header-h) + 40px); /* + barra de 32px */
}
@media screen and (max-width: 782px) {
    body.admin-bar,
    html:has(body.admin-bar) {
        scroll-padding-top: calc(var(--acj-header-h) + 54px); /* + barra de 46px */
    }
}

/* El header sticky debe quedar por debajo de la admin bar, no encima. */
body.admin-bar .acj-sticky-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .acj-sticky-header {
        top: 46px;
    }
}

/* En modo edición el menú móvil no debe taparle el contenido al administrador. */
body.gravit-editor-enabled #acj-mobile-menu {
    position: static;
}

/* wp_nav_menu() imprime <ul>/<li> propios: se neutraliza el bullet por si algún
   estilo del núcleo se cuela antes de que Tailwind aplique su reset. */
.acj-menu ul,
.acj-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Contenido del editor de WordPress (the_content). El reset de Tailwind deja
   los títulos y listas sin estilo, así que se devuelven aquí. */
.acj-prose h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--acj-brand-900); margin: 2rem 0 .75rem; }
.acj-prose h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--acj-brand-900); margin: 1.75rem 0 .5rem; }
.acj-prose h4 { font-size: 1.1rem; font-weight: 600; color: var(--acj-brand-900); margin: 1.5rem 0 .5rem; }
.acj-prose p  { margin-bottom: 1.15rem; }
.acj-prose a  { color: var(--acj-brand-700); text-decoration: underline; }
.acj-prose a:hover { color: var(--acj-brand-600); }
.acj-prose ul,
.acj-prose ol { margin: 0 0 1.15rem 1.5rem; }
.acj-prose ul { list-style: disc; }
.acj-prose ol { list-style: decimal; }
.acj-prose li { margin-bottom: .4rem; }
.acj-prose blockquote {
    border-left: 3px solid var(--acj-accent-500);
    padding: .25rem 0 .25rem 1.25rem;
    margin: 1.5rem 0;
    color: #475569;
    font-style: italic;
}
.acj-prose img { max-width: 100%; height: auto; border-radius: .5rem; }
.acj-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .925rem; }
.acj-prose th,
.acj-prose td { border: 1px solid #e2e8f0; padding: .6rem .75rem; text-align: left; }
.acj-prose th { background: #f8fafc; font-weight: 600; }

/* Cajas del bloque "Boxes" (inc/layouts.php), que usa Comisiones y Comités.
 *
 * Van en el HTML del CONTENIDO y no en la plantilla: la página es un único
 * campo de Gravit, así que quien la edite añade una comisión copiando una caja
 * y pegándola, sin tocar PHP.
 *
 * Rejilla y no columnas CSS: se lee de izquierda a derecha, y cada fila iguala
 * la altura de sus cajas aunque una tenga cuatro nombres y otra ocho.
 *
 * Tres por fila necesitan el ancho completo: en el ancho de lectura de page.php
 * (max-w-3xl) no caben, y por eso la página lleva su propia plantilla. */
.acj-prose .acj-cajas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0 0 3rem;
}
@media (min-width: 768px) {
    .acj-prose .acj-cajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .acj-prose .acj-cajas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.acj-prose .acj-cajas:last-child { margin-bottom: 0; }
.acj-prose .acj-caja {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--acj-accent-500);
    border-radius: .5rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -18px rgba(15, 23, 42, .22);
}
.acj-prose .acj-caja h2,
.acj-prose .acj-caja h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .85rem; }
.acj-prose .acj-caja ul { list-style: none; margin: 0; }
.acj-prose .acj-caja li {
    margin: 0;
    padding: .45rem 0;
    font-size: .95rem;
    border-top: 1px solid #f1f5f9;
}
.acj-prose .acj-caja li:first-child { border-top: 0; }
/* Comisiones: sólo quien tiene reseña enlaza a su ficha. Sin subrayado para que
 * la lista no se lea a saltos; el subrayado aparece al pasar por encima. */
.acj-prose .acj-caja .acj-caja-enlace { color: inherit; text-decoration: none; }
.acj-prose .acj-caja .acj-caja-enlace:hover { color: var(--acj-brand-700); text-decoration: underline; }
/* Comisiones y Capítulos (template-comisiones.php): el primero en negrita. Es
 * quien preside o coordina, que gravit_mem_integrantes() pone siempre arriba.
 * Con clase propia y no sobre toda .acj-caja: el bloque "Boxes" comparte estas
 * reglas y sus listas son texto libre, donde el primero no es nadie especial. */
.acj-prose .acj-caja .acj-comision-lista > li:first-child { font-weight: 700; }

/* Bloque "Boxes" (inc/layouts.php) en modo edición.
 *
 * Los textos de ayuda van en ::before para que NO entren en el innerHTML que
 * guarda Gravit: con texto real dentro, guardar sin tocar el campo lo publicaría. */
.acj-prose .acj-boxes-titulo { margin: 1.5rem 0 1.25rem; }

/* Boxes no lleva aire arriba para que varios seguidos formen una sola rejilla
 * (ver acj_layout_boxes()). En page.php eso pegaba el PRIMERO a la banda del
 * título y el ÚLTIMO al pie: sólo ellos reciben el aire que en Comisiones pone
 * la plantilla (py-10 md:py-16). Primero/último «de los bloques» y no
 * :first-child, porque el editor intercala sus botones «+» entre ellos. Sólo en
 * page.php: Comisiones ya pone ese aire con su plantilla. */
.page-template-default .acj-blocks > .gravit-block:not(.gravit-block ~ .gravit-block) > .acj-boxes { padding-top: 2.5rem; }
.page-template-default .acj-blocks > .gravit-block:not(:has(~ .gravit-block)) > .acj-boxes { padding-bottom: 2.5rem; }
@media (min-width: 768px) {
    .page-template-default .acj-blocks > .gravit-block:not(.gravit-block ~ .gravit-block) > .acj-boxes { padding-top: 4rem; }
    .page-template-default .acj-blocks > .gravit-block:not(:has(~ .gravit-block)) > .acj-boxes { padding-bottom: 4rem; }
}
/* Transmisión en vivo: el «Añadir bloque» sin aire por arriba.
 *
 * Con la zona de bloques vacía, Gravit le da 48px por arriba y por abajo para
 * que el botón respire. Aquí va justo debajo del video, cuya sección ya deja su
 * propio espacio (pb-14 md:pb-20): sumados, el botón quedaba a 128px del
 * reproductor y parecía de otra página. Sólo se quita el de arriba y sólo en
 * esta plantilla; lleva una clase más que la regla del plugin, así que gana sin
 * depender del orden de carga. Es cosa del modo edición: al visitante la zona
 * vacía no le ocupa nada. */
body.page-template-template-vivo.gravit-editor-enabled .acj-blocks > .gravit-add-slot:first-child {
    padding-top: 0;
}

body.gravit-editor-enabled .acj-prose .acj-caja :is(h2, h3):empty::before {
    content: "Nombre de la comisión";
    color: #94a3b8;
    font-weight: 400;
    pointer-events: none;
}
body.gravit-editor-enabled .acj-prose .acj-caja li:only-child:empty::before {
    content: "Integrantes (Enter para añadir otro)";
    color: #94a3b8;
    pointer-events: none;
}

/* Títulos, párrafos y botones quitados con la X de los bloques de "Añadir
 * bloque" (gravit-editor.js): el editor guarda la cadena vacía y el tema imprime
 * el elemento vacío. Sin esto, al visitante le quedaría el hueco con los
 * márgenes de un <h2> sin texto, o un botón vacío que se ve por su relleno.
 *
 * Los textos se reconocen con :empty. Los botones no pueden: suelen llevar un
 * icono detrás del texto y nunca están vacíos, así que acj_button() les pone la
 * clase .acj-boton-vacio cuando su texto guardado está en blanco.
 *
 * Sólo dentro de .gravit-block: los botones y textos de las plantillas fijas,
 * como la portada, no tienen X y no se tocan.
 *
 * Sólo fuera del modo edición, a propósito: al editar, un campo que se vacía
 * tecleando no debe desaparecer bajo el cursor. Ahí los quitados los esconde el
 * propio editor al cargar la página. */
body:not(.gravit-editor-enabled) .gravit-block :is(.gravit-editable:empty, .acj-boton-vacio) { display: none; }

/* Aviso de las listas que salen de Miembros (acj_aviso_miembros(), sólo al
 * editar). El mismo trato que el cartel "Editar en Wordpress" de Gravit —fondo
 * azul noche y borde punteado bronce— pero fijo y en el flujo, sin hover. */
.acj-aviso-dinamico {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 2px dashed #c4a86f;
    border-radius: 10px;
    background: rgba(11, 18, 48, 0.88);
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}
.acj-aviso-dinamico p + p { margin-top: 0.35rem; }
.acj-aviso-dinamico__titulo { font-weight: 800; }
.acj-aviso-dinamico__titulo i { margin-right: 0.4rem; color: #c4a86f; }
.acj-aviso-dinamico a {
    color: #e3cf9f;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.acj-aviso-dinamico a:hover { color: #fff; }

/* La X para quitar una caja. Toma el aspecto de la X de los botones de Gravit
 * (.gravit-btn-remove-badge, que la deja invisible y sin clic) y aquí sólo se
 * decide cuándo aparece: al pasar por encima de SU caja. En la última caja del
 * bloque no se ofrece. */
body.gravit-editor-enabled .acj-caja:hover > .acj-caja-quitar {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.acj-cajas[data-acj-una-caja] .acj-caja-quitar { display: none; }

/* La misma X, en la página de Documentación (template-documentacion.php): en
 * las notas de «Captura sugerida» y en cada captura o video añadido. Aparece al
 * pasar por SU nota o SU medio. */
body.gravit-editor-enabled .acj-doc-nota:hover > .acj-doc-nota-quitar,
body.gravit-editor-enabled [data-acj-doc-medio]:hover > .acj-doc-medio-quitar {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Lo que el buscador de la Documentación deja fuera. Clase propia con
 * !important y no el atributo hidden: los apartados son .grid, y esa utilidad
 * le gana al display:none del atributo. */
.acj-doc-oculto {
    display: none !important;
}

/* El botón de ampliar una captura de la Documentación sobra mientras sólo esté
 * el marcador de posición, que es una data URI. Se mira el src y no una clase
 * puesta por PHP: al subir la captura con la cámara de Gravit cambia el src sin
 * recargar la página, y el botón tiene que aparecer en ese momento. */
.acj-doc-captura:has(img[src^="data:"]) .acj-doc-ampliar {
    display: none;
}

/* Galería de fotos (inc/layouts.php), sólo al editar. La X es la misma de las
 * cajas (.gravit-btn-remove-badge, invisible y sin clic hasta que se pasa por
 * SU hueco). La casilla "Añadir foto" es una celda más de la rejilla, cuadrada
 * como las fotos, para que no descoloque la fila. */
body.gravit-editor-enabled .acj-galeria-hueco:hover > .acj-galeria-quitar {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.acj-galeria-anadir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    aspect-ratio: 1;
    border: 2px dashed #cbd5e1;
    border-radius: .5rem;
    background: #f8fafc;
    color: #64748b;
    font: 700 .8rem/1.2 inherit;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.acj-galeria-anadir i { font-size: 1.5rem; }
.acj-galeria-anadir:hover {
    border-color: #2271b1;
    background: #eff6ff;
    color: #2271b1;
}

/* Tabs (inc/layouts.php). Pestañas subrayadas sobre un filete común: la
 * activa, en azul con el subrayado de bronce de la marca. Al editar, la X es la
 * misma de galería y cajas (invisible hasta pasar por SU pestaña) y "Añadir
 * pestaña" es una pestaña más, discontinua, al final de la fila. */
.acj-tabs-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .25rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.acj-tab {
    position: relative;
    margin-bottom: -1px;
    padding: .75rem .125rem;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.acj-tab:hover { color: var(--acj-brand-900); }
.acj-tab.is-activa {
    color: var(--acj-brand-900);
    border-bottom-color: var(--acj-accent-500);
}
.acj-tab:focus-visible {
    outline: 2px solid var(--acj-brand-600);
    outline-offset: 2px;
    border-radius: 2px;
}
.acj-tab-panel { padding-top: 1.75rem; }
.acj-tab-panel .acj-prose > :first-child { margin-top: 0; }
.acj-tab-panel .acj-prose > :last-child { margin-bottom: 0; }

body.gravit-editor-enabled .acj-tab:hover > .acj-tabs-quitar {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.acj-tabs-anadir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .45rem;
    padding: .35rem .8rem;
    border: 2px dashed #cbd5e1;
    border-radius: .5rem;
    background: #f8fafc;
    color: #64748b;
    font: 700 .8rem/1.2 inherit;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.acj-tabs-anadir:hover {
    border-color: #2271b1;
    background: #eff6ff;
    color: #2271b1;
}

/* Acordeón (inc/layouts.php). Apartados separados por filetes, con la flecha
 * de bronce que gira al abrir. Al editar, la misma X de Tabs (invisible hasta
 * pasar por SU cabecera) y "Añadir apartado" discontinuo debajo. */
.acj-acordeon-items { border-top: 1px solid #e2e8f0; }
.acj-acordeon-item { border-bottom: 1px solid #e2e8f0; }
.acj-acordeon-titular {
    position: relative;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
.acj-acordeon-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem .25rem;
    border: 0;
    background: none;
    color: var(--acj-brand-900);
    font-size: 1.075rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.acj-acordeon-cabeza:hover .acj-acordeon-texto { color: var(--acj-brand-700); }
.acj-acordeon-cabeza:focus-visible {
    outline: 2px solid var(--acj-brand-600);
    outline-offset: 2px;
    border-radius: 2px;
}
.acj-acordeon-flecha {
    flex: none;
    color: var(--acj-accent-500);
    font-size: .9rem;
    transition: transform .2s ease;
}
.acj-acordeon-item.is-abierto .acj-acordeon-flecha { transform: rotate(180deg); }
.acj-acordeon-panel { padding: 0 .25rem 1.35rem; }
.acj-acordeon-panel .acj-prose > :first-child { margin-top: 0; }
.acj-acordeon-panel .acj-prose > :last-child { margin-bottom: 0; }

body.gravit-editor-enabled .acj-acordeon-titular:hover > .acj-acordeon-quitar {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.acj-acordeon-anadir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    padding: .45rem .9rem;
    border: 2px dashed #cbd5e1;
    border-radius: .5rem;
    background: #f8fafc;
    color: #64748b;
    font: 700 .8rem/1.2 inherit;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.acj-acordeon-anadir:hover {
    border-color: #2271b1;
    background: #eff6ff;
    color: #2271b1;
}

/* Pista de logos (inc/layouts.php). La casilla de añadir mide lo que un logo
 * (apaisada, ancho fijo) para no romper la fila. Las flechas van a los lados de
 * la pista, nacen con [hidden] y el JS las enseña sólo si la pista desborda;
 * en el extremo correspondiente quedan atenuadas. La barra de desplazamiento
 * se esconde: el gesto y las flechas ya dicen que se puede mover. */
.acj-logos-anadir {
    flex: none;
    width: 11rem;   /* = w-44, el ancho de un logo */
    aspect-ratio: 2 / 1;
}
@media (min-width: 768px) {
    .acj-logos-anadir { width: 14rem; }   /* = w-56 */
}
.acj-logos-pista {
    scrollbar-width: none;
    padding: .25rem .125rem;
}
.acj-logos-pista::-webkit-scrollbar { display: none; }
.acj-logos-flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 9999px;
    background: #fff;
    color: var(--acj-brand-900);
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .35);
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}
.acj-logos-flecha[hidden] { display: none; }
.acj-logos-flecha:disabled { opacity: .35; cursor: default; }
.acj-logos-flecha:not(:disabled):hover { transform: translateY(-50%) scale(1.06); }
.acj-logos-flecha--izq { left: -1.25rem; }
.acj-logos-flecha--der { right: -1.25rem; }
@media (max-width: 640px) {
    .acj-logos-flecha--izq { left: -.5rem; }
    .acj-logos-flecha--der { right: -.5rem; }
}

/* Paginación sobre fondo oscuro (archivo de Sesiones). WordPress imprime su
   propio marcado en the_posts_pagination() y por defecto hereda el color del
   texto del contenedor, que aquí sería ilegible. */
.acj-pagination-dark .nav-links {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.acj-pagination-dark .page-numbers {
    display: inline-block;
    padding: .5rem .85rem;
    border: 1px solid var(--acj-brand-600);
    border-radius: .375rem;
    color: var(--acj-brand-200);
    font-size: .875rem;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.acj-pagination-dark a.page-numbers:hover {
    background: var(--acj-brand-700);
    color: #fff;
}
.acj-pagination-dark .page-numbers.current {
    background: #fff;
    border-color: #fff;
    color: var(--acj-brand-900);
    font-weight: 700;
}
.acj-pagination-dark .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Video de la lista de sesiones que se está viendo ahora en el reproductor.
   La clase la pone el JS del plugin Gravit YouTube Gallery. */
.gravit-yt-active {
    background: var(--acj-brand-700);
    box-shadow: inset 3px 0 0 var(--acj-accent-300);
}

/* Campo del bloque Shortcode. El texto de ayuda es un pseudo-elemento y no
   contenido: se ve mientras el campo está vacío, no se puede seleccionar y
   nunca llega a guardarse en la base de datos. */
.acj-shortcode-field:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
}

/* Variante centrada de .acj-prose: las listas heredarían la sangría y el punto
   de viñeta a la izquierda, lo que rompe la simetría del bloque centrado. */
.acj-prose-centrado ul,
.acj-prose-centrado ol {
    list-style: none;
    margin-left: 0;
}


/* ---------------------------------------------------------------------------
 * Lenguaje visual: azul a sangre + un solo acento cálido.
 *
 * Estas clases viven aquí y no en utilidades de Tailwind a propósito: varias
 * acaban dentro de texto que Gravit guarda en la base de datos (el titular
 * bicolor, por ejemplo). Una clase propia del tema sigue significando lo mismo
 * aunque mañana se reordene la paleta; una utilidad de Tailwind, no.
 * ------------------------------------------------------------------------ */

/* Palabra destacada dentro de un titular. Es el recurso que más carga visual
   aporta y el que hay que usar con más disciplina: UNA por titular.

   El color sale de una variable porque el bronce no rinde igual en los dos
   fondos: sobre blanco contrasta 5,5:1, pero sobre el azul marino se apaga a
   2,4:1 y el titular se perdería. Las secciones oscuras redefinen la variable
   una sola vez (más abajo) y todo lo que la use cambia con ellas. */
:root {
    --acj-acento: var(--acj-accent-500);
}
.acj-hl {
    color: var(--acj-acento);
}

/* Secciones sobre azul: el acento sube al peldaño claro de la escala.
   En la propuesta 3 se suman los accesos, que dejan de ir sobre blanco; con el
   bronce oscuro el titular y la línea del antetítulo caían a 2,4:1 sobre el
   azul y desaparecían. */
.acj-hero,
[data-gravit-section-id="sesiones"],
[data-gravit-section-id="hablemos"],
.acj-estilo-3 [data-gravit-section-id="accesos"],
.acj-estilo-3 [data-gravit-section-id="declaraciones"] {
    --acj-acento: var(--acj-accent-300);
}

/* En la propuesta 2, Sesiones deja de ser oscura, así que el acento vuelve al
   tono que contrasta sobre claro. */
.acj-estilo-2 [data-gravit-section-id="sesiones"] {
    --acj-acento: var(--acj-accent-500);
}

/* ...salvo dentro de un panel blanco. En la propuesta 3, Noticias y Sesiones
   viven en uno, y el bronce claro está calculado para leerse sobre azul: sobre
   blanco se queda en nada. Afecta al resalte del titular y al filete del
   antetítulo, que salen los dos de esta variable. */
.acj-estilo-3 .acj-panel-blanco {
    --acj-acento: var(--acj-accent-500);
}

/* El video que se está viendo se marca desde el JS del plugin con un fondo
   azul oscuro; dentro del panel blanco hay que bajarlo al peldaño claro o el
   título del video, ahora oscuro, se pierde encima. */
.acj-estilo-3 .acj-panel-blanco .gravit-yt-active,
.acj-estilo-2 [data-gravit-section-id="sesiones"] .gravit-yt-active {
    background: var(--acj-brand-50);
    box-shadow: inset 3px 0 0 var(--acj-accent-500);
}

/* Etiqueta corta sobre el titular de cada sección, con su filete de acento
   encima. Junto con el titular bicolor es lo que distingue una sección
   "compuesta" de un simple <h2> suelto. */
.acj-eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acj-acento);   /* el acento sobre blanco cumple AA: 5,5:1 */
    margin-bottom: .85rem;
}
.acj-eyebrow::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    background: var(--acj-acento);
    margin-bottom: .7rem;
}
/* En la página de transmisión el antetítulo va centrado, y el filete —que se
   dibuja alineado a la izquierda— quedaba suelto encima del texto. */
[data-gravit-section-id="vivo-intro"] .acj-eyebrow::before {
    display: none;
}

/* Sobre azul el bronce oscuro se apaga: se sube al tono vivo.
   Se redefine la VARIABLE y no el color, porque el antetítulo lleva además un
   filete que también sale de ella; tocando sólo el color, el filete se quedaba
   con el tono de la sección. Se nota en la tarjeta de Revista de la propuesta
   3, que es azul dentro de una sección clara. */
.acj-eyebrow-light {
    --acj-acento: var(--acj-accent-300);
}

/* Titulares de sección: más apretados y más grandes que los de Tailwind por
   defecto. El interlineado corto es medio truco del estilo: sin él, un titular
   de dos líneas se deshilacha. */
.acj-title {
    line-height: 1.08;
    letter-spacing: -.015em;
}

/* Flecha de los botones. Se desplaza en hover, que es el único movimiento del
   diseño: basta para que el botón se sienta vivo sin animar media página. */
.acj-arrow {
    transition: transform .2s ease;
}
.acj-cta:hover .acj-arrow,
.group:hover .acj-arrow {
    transform: translateX(4px);
}

/* Filete de acento a la izquierda de los titulares que ya lo llevaban en azul
   (Noticias). Se mantiene el recurso, cambia el color. */
.acj-bar {
    border-left: 3px solid var(--acj-accent-500);
    padding-left: 1.1rem;
}


/* ---------------------------------------------------------------------------
 * Contenedor ancho: EL de todo el sitio. Cabecera, héroe, secciones de la
 * portada, plantillas internas, archivos y los bloques de Gravit miden lo mismo.
 *
 * Antes las páginas internas se quedaban en max-w-7xl (1280px) mientras la
 * portada iba a 1470, y al pasar de una a otra el contenido daba un salto
 * lateral. Los anchos de LECTURA —max-w-3xl y compañía en fichas y artículos—
 * no son esto y siguen siendo estrechos a propósito: una línea de texto de
 * 1470px no hay quien la lea.
 * ------------------------------------------------------------------------ */
.acj-wide {
    /*
     * Ancho único de todo el sitio: cabecera, secciones de la portada y pie.
     * Antes era max(1700px, 90%), que crecía con la pantalla; ahora es una
     * medida fija, así que en monitores grandes vuelve a haber margen a los
     * lados y la línea de lectura no se estira sin límite.
     */
    max-width: 1470px;
}

/* Rótulo de sección de la página de Miembros.
 *
 * Filete a ambos lados del texto, centrado, como en el sitio anterior. Se hace
 * con flex y dos pseudoelementos que crecen: así el filete se adapta al largo
 * del rótulo sin medir nada, y no hay que reservarle un ancho fijo. */
.acj-mem-rotulo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.acj-mem-rotulo::before,
.acj-mem-rotulo::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--acj-brand-200);
}
.acj-mem-rotulo > span {
    flex: 0 1 auto;
}

/* Gris de página.
 *
 * Un neutro cálido, elegido a ojo por el cliente, para las secciones que deben
 * despegarse del blanco sin llegar a leerse como una banda de color. NO es un
 * peldaño de brand ni de accent —de ahí que vaya literal y no como clase de
 * Tailwind—: es fondo de papel, y cambiar la paleta de la propuesta no debería
 * moverlo. */
.acj-fondo-hueso {
    background-color: #fbfbfa;
}

/* Foto de fondo del héroe.
 *
 * Va aquí y no con la utilidad 'absolute' de Tailwind por un motivo concreto: en
 * modo edición el plugin aplica
 *     body.gravit-editor-enabled .gravit-img-container { position: relative }
 * que tiene más especificidad que .absolute y devolvía la imagen al flujo normal,
 * con lo que el héroe se descuadraba (la foto aparecía como un bloque a la
 * izquierda). El segundo selector repite la declaración con especificidad
 * suficiente para ganarle, sin depender del orden en que se carguen las hojas.
 */
.acj-hero .acj-hero-bg,
body.gravit-editor-enabled .acj-hero .acj-hero-bg {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}


/* Texto del héroe sobre la foto.
 *
 * Con el velo aligerado, el titular ya no se apoya en un fondo plano sino sobre
 * la imagen. La sombra difusa hace ese trabajo de forma local: mantiene el
 * contraste allí donde la foto se aclara, sin tener que oscurecer el conjunto y
 * perder las luces de la ciudad, que son lo que le da carácter.
 */
.acj-hero-text {
    text-shadow: 0 2px 28px rgba(6, 10, 26, .6), 0 1px 4px rgba(6, 10, 26, .45);

    /* El texto tiene que quedar POR ENCIMA del overlay de la cámara.
     *
     * Como el fondo ocupa toda la caja del héroe, el overlay que Gravit monta
     * sobre las imágenes (.gravit-img-overlay, z-index: 30, inset: 0) se extiende
     * sobre el héroe entero. Sin capa propia, el texto quedaba debajo: se veía,
     * pero el clic se lo llevaba el selector de imagen y no se podía editar.
     *
     * 35 es el hueco exacto: por encima del overlay de imagen (30) y por debajo
     * de los controles de sección de Gravit (40 y siguientes), que deben seguir
     * estando accesibles.
     *
     * Efecto secundario buscado: con el puntero sobre el texto ya no se dispara
     * el :hover del contenedor de la imagen, así que la cámara se esconde
     * mientras se escribe y reaparece sobre el resto del fondo. */
    z-index: 35;
}
/* El botón es una superficie blanca: la sombra heredada le ensuciaría el texto. */
.acj-hero-text .gravit-button-editable {
    text-shadow: none;
}


/* ---------------------------------------------------------------------------
 * Cabecera al hacer scroll: se encoge y se vuelve azul con texto blanco.
 *
 * La clase la pone el JS del pie. Todo lo que cambia va con transición, así que
 * el paso de un estado a otro se lee como un solo movimiento y no como un salto.
 *
 * Los selectores llevan .acj-sticky-header por delante a propósito: las clases de
 * Tailwind que pintan estos elementos (text-brand-900, bg-brand-900...) tienen
 * especificidad 0,1,0 y hay que ganarles sin recurrir a !important.
 * ------------------------------------------------------------------------ */
/*
 * Fundido a la IDA, inmediato a la VUELTA.
 *
 * El fundido cruzado entre (fondo blanco, texto azul) y (fondo azul, texto blanco)
 * pasa por un punto en el que ambos valen el mismo azul medio y el texto se borra.
 * Al bajar no molesta —el ojo va siguiendo el contenido—, pero al volver arriba se
 * lee como un parpadeo.
 *
 * Se resuelve sin JavaScript aprovechando que la transición que se aplica es
 * siempre la del estado DESTINO: al añadir la clase manda la declaración de
 * .is-scrolled (fundido), y al quitarla manda la del estado base (ninguna).
 */
.acj-sticky-header {
    /* Fondo propio, igual al tono con el que arranca el degradado de la página.
     *
     * Antes era transparente para dejarlo ver, pero la cabecera es fija y pasa por
     * encima de todo: sobre una sección oscura —el héroe, o la banda azul del
     * titular de una página interior— el logo y el menú quedaban ilegibles. Un
     * color plano cuesta un matiz de continuidad y resuelve el problema en todas
     * las páginas. El azul sigue entrando con el scroll (.is-scrolled). */
    background-color: #f9f8f7;

    /* La cabecera va por encima de todo lo que pinta Gravit sobre el contenido,
     * pero por debajo de su interfaz flotante. La escala del plugin es:
     *
     *   30  overlay de cámara de las imágenes
     *   40  controles de sección
     *   45  cartel "Edit in WordPress" de los bloques externos
     *   50  elementos que siguen siendo editables dentro de un bloque externo
     *   9999+ botón flotante "G", panel del editor, avisos
     *
     * 60 queda justo encima del bloque de 30–50 y muy por debajo de 9999, así que
     * la cabecera tapa los carteles al pasar por encima sin llegar a estorbar los
     * controles del editor. */
    z-index: 60;

    transition: none;
}
.acj-sticky-header.is-scrolled {
    transition: background-color .3s ease, box-shadow .3s ease;
}
.acj-header-bar,
.acj-header-logo {
    transition: height .3s ease;
}

/* Alto de reposo de la barra y del logo, declarado aquí ADEMÁS de en las clases
 * de Tailwind del HTML (h-28 md:h-36 y h-20 md:h-24).
 *
 * Tailwind entra por el CDN, es decir por JavaScript: hasta que compila, esas
 * clases no existen. Con la medida también en la hoja, que llega con el HTML,
 * la cabecera nunca depende de ese script para tener su alto —ni mientras carga
 * ni si el CDN falla—. Los valores son los mismos que producen las clases, así
 * que cuando Tailwind entra no cambia nada.
 *
 * El encogido con el scroll no se toca: .is-scrolled tiene más especificidad y
 * sigue mandando. (El brinco de la carga NO venía de aquí: lo provocaba la
 * medición del salto en footer.php, y se arregló allí.)
 */
.acj-header-bar {
    height: 7rem;    /* h-28 */
}
/* Por debajo de 400px el logo en reposo baja a 64px: con 80px el nombre de al
 * lado se quedaba sin sitio en los teléfonos estrechos (con scroll ya cabía,
 * porque ahí el logo encoge a 56px). */
.acj-header-logo {
    height: 4rem;    /* h-16 */
}
@media (min-width: 400px) {
    .acj-header-logo {
        height: 5rem;    /* min-[400px]:h-20 */
    }
}
@media (min-width: 768px) {
    .acj-header-bar {
        height: 9rem;    /* md:h-36 */
    }
    .acj-header-logo {
        height: 6rem;    /* md:h-24 */
    }
}

/* Todo lo que cambia de color tiene que hacerlo EXACTAMENTE al mismo ritmo que
 * el fondo. Si no, al volver arriba se ve un parpadeo: los enlaces llevan la
 * clase 'transition' de Tailwind (150ms) y el nombre y el separador no llevan
 * ninguna, así que el texto se oscurece mientras el fondo todavía está azul y
 * durante un instante queda oscuro sobre oscuro.
 *
 * Se declaran aquí las tres propiedades que intervienen —color, fondo y borde—
 * porque el botón de acceso invierte fondo y texto a la vez. */
/* Los textos siguen la misma regla que el fondo, y con la misma duración: si uno
 * se funde y el otro no, vuelven a cruzarse. El 'none' del estado base anula
 * además la clase 'transition' de Tailwind (150ms) que llevan los enlaces del
 * menú, que era lo que los desincronizaba del resto. */
.acj-sticky-header .acj-menu a,
.acj-sticky-header .acj-logo-line,
.acj-sticky-header #acj-search-btn,
.acj-sticky-header #acj-mobile-btn,
.acj-sticky-header .acj-header-sep,
.acj-sticky-header .gravit-button-editable {
    transition: none;
}
.acj-sticky-header.is-scrolled .acj-menu a,
.acj-sticky-header.is-scrolled .acj-logo-line,
.acj-sticky-header.is-scrolled #acj-search-btn,
.acj-sticky-header.is-scrolled #acj-mobile-btn,
.acj-sticky-header.is-scrolled .acj-header-sep,
.acj-sticky-header.is-scrolled .gravit-button-editable {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.acj-sticky-header.is-scrolled {
    background-color: var(--acj-brand-900);
    box-shadow: 0 6px 24px rgba(6, 10, 26, .28);
}

/* Encogido: la barra baja de 112/144px a 80/96px y el logo la acompaña, porque
   si no se saldría de su propia caja. */
.acj-sticky-header.is-scrolled .acj-header-bar {
    height: 5rem;
}
.acj-sticky-header.is-scrolled .acj-header-logo {
    height: 3.5rem;
}
@media (min-width: 768px) {
    .acj-sticky-header.is-scrolled .acj-header-bar {
        height: 6rem;
    }
    .acj-sticky-header.is-scrolled .acj-header-logo {
        height: 4.5rem;
    }
}

/* Texto en blanco sobre el azul. */
.acj-sticky-header.is-scrolled .acj-menu a,
.acj-sticky-header.is-scrolled .acj-logo-line,
.acj-sticky-header.is-scrolled #acj-search-btn,
.acj-sticky-header.is-scrolled #acj-mobile-btn {
    color: #fff;
}
.acj-sticky-header.is-scrolled .acj-menu a:hover,
.acj-sticky-header.is-scrolled #acj-search-btn:hover,
.acj-sticky-header.is-scrolled #acj-mobile-btn:hover {
    color: var(--acj-accent-300);
}
/* El panel del menú móvil conserva su texto oscuro con la cabecera desplazada.
 *
 * Ese panel lleva la clase .acj-menu, así que le entraba la regla de arriba y sus
 * enlaces se volvían blancos — sobre su propio fondo blanco, con lo que el menú
 * desaparecía. Aquí se le devuelve el color.
 *
 * Sólo los enlaces dentro de <li>, que son los del menú: el botón "Acceso
 * Miembros" del pie del panel es azul con texto blanco y no debe tocarse.
 * El identificador basta para ganarle a la regla anterior.
 */
.acj-sticky-header.is-scrolled #acj-mobile-menu li a {
    color: var(--acj-brand-700);
}
.acj-sticky-header.is-scrolled #acj-mobile-menu li a:hover {
    color: var(--acj-brand-900);
}

.acj-sticky-header.is-scrolled .acj-header-sep {
    border-color: rgba(255, 255, 255, .3);
}

/* El botón de acceso era azul sobre blanco; sobre azul desaparecería, así que
   invierte. */
.acj-sticky-header.is-scrolled .gravit-button-editable {
    background-color: #fff;
    color: var(--acj-brand-900);
}
.acj-sticky-header.is-scrolled .gravit-button-editable:hover {
    background-color: var(--acj-brand-100);
}

/* Los iconos de redes también son botones editables, así que la regla de arriba
   los convertía en pastillas blancas. Van después para ganarle por orden —empatan
   en especificidad— y se quedan como iconos sueltos sobre el azul. */
.acj-sticky-header.is-scrolled .acj-social {
    background-color: transparent;
    color: #fff;
}
.acj-sticky-header.is-scrolled .acj-social:hover {
    background-color: rgba(255, 255, 255, .12);
    color: var(--acj-accent-300);
}

/* Rejilla de los bloques que compone la IA (inc/ia-compuesto.php).
 *
 * Flex con justify-content:center y no grid: el número de celdas lo pide el
 * usuario ("cinco tarjetas") y una última fila incompleta tiene que quedar
 * centrada, no coja a la izquierda. Los cortes y separaciones son los de la
 * rejilla de "Tres tarjetas": 1 columna, 2 desde sm (o desde md en la de dos),
 * 3 o 4 desde lg; hueco de 1.5rem que pasa a 2rem desde md. Cada fila estira
 * sus celdas a la misma altura (align-items: stretch por defecto). */
.acj-ia-rejilla { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.acj-ia-rejilla > * { width: 100%; }
@media (min-width: 640px) {
    .acj-ia-rejilla--3 > *,
    .acj-ia-rejilla--4 > * { width: calc((100% - 1.5rem) / 2); }
}
@media (min-width: 768px) {
    .acj-ia-rejilla { gap: 2rem; }
    .acj-ia-rejilla--2 > *,
    .acj-ia-rejilla--3 > *,
    .acj-ia-rejilla--4 > * { width: calc((100% - 2rem) / 2); }
}
@media (min-width: 1024px) {
    .acj-ia-rejilla--3 > * { width: calc((100% - 4rem) / 3); }
    .acj-ia-rejilla--4 > * { width: calc((100% - 6rem) / 4); }
}

/* "Añadir red social" (assets/js/redes.js, sólo en modo edición). Hereda el
   tamaño de los iconos de su fila; el borde discontinuo y el fondo quitado lo
   separan de las redes de verdad, que en el pie son círculos rellenos. */
.acj-red-anadir {
    background: transparent !important;
    border: 1.5px dashed currentColor;
    opacity: .6;
    cursor: pointer;
}
.acj-red-anadir:hover {
    opacity: 1;
}


/* Tarjetas de accesos directos.
 *
 * El enlace del título se estira sobre toda la tarjeta con una capa invisible,
 * para que se pueda pulsar en cualquier punto sin tener que meter la descripción
 * dentro del <a> (si estuviera dentro, Gravit la guardaría como parte del texto
 * del botón al tomar su textContent).
 */
.acj-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Al editar, esa capa invisible taparía la descripción y no se podría escribir
   en ella. Se retira: el título sigue siendo un enlace normal. */
body.gravit-editor-enabled .acj-card-link::after {
    display: none;
}


/* Titulares de las noticias en Georgia.
 *
 * No usan la clase font-serif del tema (Source Serif 4) sino Georgia a secas, por
 * decisión de diseño. Se declara aquí y no como utilidad de Tailwind porque
 * Georgia es una fuente del sistema y no forma parte de la escala tipográfica
 * configurada en header.php.
 */
.acj-titulo-noticia {
    font-family: Georgia, 'Times New Roman', serif;
}

/* Texto montado sobre una imagen de fondo editable.
 *
 * Necesita capa propia por lo mismo que el héroe: el overlay de cámara del
 * editor (.gravit-img-overlay, z-index 30) cubre toda la caja de la imagen y,
 * sin esto, el texto se vería pero los clics se los llevaría el selector de
 * imagen y no se podría editar. 35 va por encima de ese overlay y por debajo de
 * los controles de sección de Gravit, que empiezan en 40.
 */
.acj-sobre-imagen {
    position: relative;
    z-index: 35;
}

/* Imagen en "Ajustar" (panel Encuadre de Gravit): se ve entera y sobra caja.
 * Ese sobrante se pinta con el tono más claro de la paleta para que se lea como
 * un marco y no como un hueco o una imagen rota. Sólo las que eligió alguien:
 * los emblemas que la plantilla ya muestra enteros no llevan el atributo. */
img[data-gravit-img-fit="contain"] { background-color: var(--acj-brand-50); }

/* Pilas de contenido de los bloques de "Añadir bloque" (inc/layouts.php).
 *
 * Un .acj-pila es una columna flex cuyas piezas —título, texto, botón, rejilla—
 * se separan con gap y NO con márgenes. Con márgenes, quitar una pieza con la X
 * dejaba el margen de otra en el borde y descentraba el contenido (medido: 18px
 * de más bajo el último párrafo, el mb-4/5/6 de un título solo, el mt-7 de un
 * botón solo arriba). El gap sólo separa elementos visibles, nunca los bordes.
 *
 * El texto trae márgenes propios de .acj-prose: se anulan los exteriores.
 *
 * .acj-pila-fin es la pieza de cierre (el botón, la rejilla de tarjetas), que
 * el diseño quiere más separada que el gap: recibe --acj-pila-extra, pero sólo
 * si antes queda algún texto. Un campo quitado con la X queda vacío de verdad,
 * así que :empty lo reconoce al editar y para el visitante; si no, ese margen
 * subiría al borde de arriba cuando la pieza de cierre es lo único que queda.
 *
 * .acj-pila-cols es la rejilla de "Dos columnas": sin ninguna columna con texto
 * se esconde, porque una rejilla vacía sigue contando para el gap. */
.acj-pila .acj-prose > :first-child { margin-top: 0; }
.acj-pila .acj-prose > :last-child { margin-bottom: 0; }
.acj-pila > .gravit-editable:not(:empty) ~ .acj-pila-fin { margin-top: var(--acj-pila-extra, .75rem); }
.acj-pila-cols:not(:has(> :not(:empty))) { display: none; }
/* Fila de botones (Texto + Imagen): sin ningún botón a la vista, fuera. Al
 * visitante la plantilla ya no imprime los vacíos; al editar, la X los esconde
 * con style="display: none" sin sacarlos del DOM. */
.acj-pila-botones:not(:has(> .gravit-button-editable:not([style*="display: none"]))) { display: none; }

/* Alineación del texto del héroe con el resto de la página.
 *
 * El héroe sangra a todo lo ancho y su división interna ya no cabe dentro de
 * .acj-wide, así que el texto perdió el contenedor que lo alineaba con la
 * cabecera y con "Noticias Recientes". Aquí se reconstruye ese desplazamiento:
 * el margen con el que .acj-wide se centra, más su padding lateral.
 *
 *   .acj-wide  ->  max-width: 1470px   y   mx-auto
 *
 * Por debajo de 1889px el contenedor ocupa todo el ancho y el margen es cero, así
 * que sólo queda el padding de 3rem. Por encima empieza a centrarse y el texto lo
 * acompaña en lugar de quedarse pegado al borde.
 */
@media (min-width: 1024px) {
    /* El selector lleva .acj-hero por delante para ganarle a las utilidades de
       padding de Tailwind, que tienen la misma especificidad y se cargan después. */
    .acj-hero .acj-hero-izq {
        /* En porcentajes y no en vw: las unidades de ventana incluyen la barra de
           desplazamiento y .acj-wide se mide en porcentaje del cuerpo, que no la
           incluye. Con vw el texto quedaba 7px desviado en pantallas grandes. */
        padding-left: calc((100% - min(100%, 1470px)) / 2 + 3rem);
        padding-right: 3rem;
    }
}

/* Velo del héroe.
 *
 * Oscuro donde vive el texto y transparente hacia la derecha, para que la foto se
 * vea a todo color en la zona libre. Se apaga en el 70% y no en el 100% porque a
 * partir de ahí empieza el panel de la Revista, que lleva su propio fondo: seguir
 * oscureciendo por debajo de él no se vería y sí robaría color a la franja
 * anterior.
 */
.acj-hero-velo {
    background: linear-gradient(
        to right,
        rgba(11, 18, 48, 0.92) 0%,
        rgba(11, 18, 48, 0.74) 28%,
        rgba(11, 18, 48, 0.24) 55%,
        rgba(11, 18, 48, 0) 70%
    );
}

/* Por debajo de lg las dos partes del héroe se apilan y el texto pasa a ocupar
   todo el ancho, así que un degradado horizontal lo dejaría sobre la parte clara
   de la foto. Ahí el velo es parejo. */
@media (max-width: 1023px) {
    .acj-hero-velo {
        background: linear-gradient(
            to bottom,
            rgba(11, 18, 48, 0.86) 0%,
            rgba(11, 18, 48, 0.74) 100%
        );
    }
}

/* Alto del héroe: una pantalla completa.
 *
 * Las dos declaraciones son a propósito, no un descuido. En móvil, 100vh mide la
 * ventana CON la barra de direcciones retraída, así que al abrir la página el
 * héroe es más alto que lo visible y su parte baja queda cortada; la unidad svh
 * mide la ventana pequeña, la que de verdad se ve. La primera línea queda de
 * respaldo para navegadores que aún no entiendan svh, que simplemente la ignoran
 * y se quedan con la de arriba.
 */
.acj-hero {
    /* Se descuenta el alto de la cabecera para que héroe y cabecera juntos ocupen
       exactamente una pantalla, sin dejar el final del héroe bajo el pliegue.
       
       Se resta la variable y no un 9rem fijo: en escritorio vale exactamente eso
       (144px), pero en móvil la cabecera mide 112px y restar 9rem descontaría de
       más. Además queda atada al alto real, así que si la cabecera cambia esto la
       sigue sin tener que acordarse.
       
       Es un mínimo, no un tope: en móvil el texto y el panel de la Revista se
       apilan y ocupan más que una pantalla, y entonces el héroe crece. */
    min-height: calc(100vh - var(--acj-header-h));
    min-height: calc(100svh - var(--acj-header-h));
}

/* ---------------------------------------------------------------------------
 * Submenús del menú principal.
 *
 * wp_nav_menu imprime los hijos como un <ul class="sub-menu"> anidado, y
 * acj_menu() aplica las MISMAS clases a todos los enlaces, también a los de
 * dentro. Sin estas reglas, el submenú se apila dentro de la barra horizontal y
 * sus enlaces salen en mayúsculas con borde inferior, como si fueran pestañas.
 * ------------------------------------------------------------------------ */
.acj-menu li {
    position: relative;
}

/* Las entradas que despliegan no subrayan al pasar el ratón.
   El subrayado es un filete de 2px al pie del enlace, y justo ahí abajo aparece
   el panel: quedaba una línea suelta detrás del desplegable, como si sobrara.
   El aviso de "esto se puede pulsar" lo sigue dando el cambio de color y la
   flecha de al lado. */
.acj-header-bar .acj-menu li.menu-item-has-children > a:hover,
.acj-header-bar .acj-menu li.menu-item-has-children:focus-within > a {
    border-bottom-color: transparent;
}

/* Aviso de que la entrada despliega. Se dibuja con CSS y no con un icono para no
   depender de que la fuente de iconos haya cargado. */
.acj-menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .5em;
    vertical-align: .12em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.acj-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 61;
    min-width: 16rem;
    padding: .5rem 0;
    background: #fff;
    border-radius: .75rem;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08), 0 20px 40px -20px rgba(15, 23, 42, .35);

    /* visibility además de opacity: sin ella el panel invisible seguiría
       recibiendo los clics de lo que tenga debajo. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Los desplegables de la propuesta 3 conservan la sombra del tema: es la que
   los despega del contenido y los hace leerse como panel flotante. El borde
   también se queda como está (.08), porque a ese peso está calculado para
   acompañarla; subirlo, como estuvo un momento, sólo tenía sentido mientras no
   había sombra.

   Aquí sólo cambian la esquina —a .5rem, la misma del panel de Noticias y de la
   tarjeta de Revista, para que toda la propuesta hable de un solo radio— y el
   aire de dentro.

   Estas reglas no distinguen entre cabecera desplegada y colapsada: el
   desplegable debe verse igual en los dos estados.

   El selector arranca en .acj-header-bar para no alcanzar al panel del menú
   móvil, cuyos submenús no flotan: se despliegan en vertical dentro del panel. */
.acj-estilo-3 .acj-header-bar .sub-menu {
    border-radius: .5rem;
}
.acj-estilo-3 .acj-header-bar .sub-menu a {
    padding: .7rem 1.4rem;
    font-weight: 600;
}

/* focus-within además de hover, para poder recorrerlo con el teclado. */
.acj-menu li:hover > .sub-menu,
.acj-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Los enlaces de dentro son de lista, no de barra: se les quita el porte de
   pestaña que heredan. */
.acj-menu .sub-menu a {
    display: block;
    padding: .55rem 1.1rem;
    border: 0;
    /* 14px, igual que el menú principal. Se probó a 15 (12 oct 2026) y se
       veía demasiado grande. */
    font-size: .875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    color: var(--acj-brand-700);
}
.acj-menu .sub-menu a:hover {
    background: #f4f3f2;
    color: var(--acj-accent-500);
}

/* Desplegables a dos columnas.
 *
 * Va después de las reglas del enlace a propósito: aquéllas declaran
 * display:block con la misma especificidad y, por orden, ganaban a este flex.
 *
 * Sólo en la barra horizontal (.acj-header-bar) y de 1200px para arriba, que es
 * donde existe: el panel móvil comparte la clase .sub-menu pero despliega en
 * vertical dentro de sí mismo, y una rejilla ahí lo rompería.
 *
 * El ancho mínimo de columna es lo que impide que una entrada larga
 * ("Académicos Correspondientes") estire su columna y descuadre la otra.
 *
 * Con 39rem esa entrada cabe en una línea y sobra aire. No conviene pasar
 * de ahí: el desplegable se abre hacia la derecha desde su
 * entrada, y a 1200px de ventana el de "Los Académicos" queda a unos 20px del
 * borde. */
@media (min-width: 1200px) {
    .acj-header-bar .sub-menu {
        display: grid;
        grid-template-columns: repeat( 2, minmax( 13.5rem, 1fr ) );
        min-width: 39rem;
        padding: 1.5rem 1.25rem;
        column-gap: .5rem;
    }

    /* El enlace pasa a flex para que, cuando el texto ocupe dos líneas, el icono
       no se quede colgando en la primera y el texto no vuelva bajo él. */
    .acj-header-bar .sub-menu a {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .85rem 1.1rem;
    }

    /* Ancho fijo para el icono: los glifos de Font Awesome no miden lo mismo, y
       sin esto los textos de la columna arrancarían cada uno de un sitio. */
    .acj-header-bar .sub-menu .acj-menu-icono {
        flex-shrink: 0;
        /* Sube con el tamaño del icono (15px): los glifos más anchos de Font
           Awesome miden 1.25em y con 1.15rem se salían de su hueco. */
        width: 1.25rem;
        margin-right: 0;
        text-align: center;
        opacity: .75;
    }
    .acj-header-bar .sub-menu a:hover .acj-menu-icono {
        opacity: 1;
    }
}


/* Con la cabecera azul, el submenú conserva su fondo blanco y su texto oscuro.
   El selector añade .sub-menu para ganarle a la regla que pone en blanco los
   enlaces del menú al hacer scroll. */
.acj-sticky-header.is-scrolled .acj-menu .sub-menu a {
    color: var(--acj-brand-700);
}
.acj-sticky-header.is-scrolled .acj-menu .sub-menu a:hover {
    color: var(--acj-accent-500);
}

/* Desplegable en negro (propuesta 2).
 *
 * Va DESPUÉS de las reglas de la cabecera desplazada y con la misma
 * especificidad que ellas: aquéllas fuerzan el texto oscuro para que el submenú
 * blanco siga leyéndose sobre el azul, y aquí hace falta lo contrario. Empatan,
 * así que decide el orden.
 *
 * El selector arranca en .acj-header-bar y no en .acj-sticky-header: la
 * cabecera CONTIENE también el panel del menú móvil, que es blanco, y ahí el
 * texto claro quedaba a 1,45:1 — invisible. La barra horizontal es el único
 * sitio donde el desplegable es oscuro. */
.acj-maq-2 .acj-header-bar .acj-menu .sub-menu {
    background: var(--acj-brand-950);
    border-color: rgba( 255, 255, 255, .14 );
}
.acj-maq-2 .acj-header-bar .acj-menu .sub-menu a {
    color: var(--acj-brand-200);
}
.acj-maq-2 .acj-header-bar .acj-menu .sub-menu a:hover {
    background: rgba( 255, 255, 255, .07 );
    color: var(--acj-accent-300);
}

/* En la propuesta 4 el texto del desplegable va en blanco: el token compartido
   es 'brand-200', que en la escala cálida de la 2 es un gris claro y con los
   azules salía celeste. Va después y con la misma especificidad que la regla de
   arriba, así que decide el orden. */
.acj-estilo-4 .acj-header-bar .acj-menu .sub-menu a {
    color: #fff;
}

/* Tercer nivel: un flotante de una columna, al costado de su entrada.
 *
 * Sin estas reglas heredaba el panel de dos columnas (39rem) y se abría hacia
 * la derecha desde su entrada: desde la columna derecha de "Los Académicos" se
 * salía de la pantalla.
 *
 * Lo que se probó y se descartó (13 oct 2026), para no volver a ello:
 *   - Lista fija dentro del panel: con varias entradas el panel crecía demasiado.
 *   - Flotante DEBAJO de la entrada: tapaba justo la opción siguiente, y para
 *     llegar a ella había que salir del menú por un lado y volver a entrar.
 * Al costado tapa, como mucho, la otra columna, y eso se da por bueno.
 *
 * EL LADO. Aquí va la opción que nunca falla: hacia DENTRO del panel —la
 * columna izquierda abre a la derecha y la derecha a la izquierda—, que cabe
 * siempre porque el flotante es más estrecho que una columna. El JS del pie
 * (orientarTercerNivel) lo mejora cuando hay sitio: lo saca hacia FUERA, donde
 * no tapa nada, con las clases .acj-abre-izq y .acj-abre-der.
 *
 * Fondo, borde y sombra no se tocan: son los del panel, también en la
 * propuesta oscura, y es lo que lo hace leerse como otro panel encima. */
.acj-header-bar .acj-menu .sub-menu > li:nth-child(odd) {
    --acj-n3-izq: 100%;
    --acj-n3-der: auto;
}
.acj-header-bar .acj-menu .sub-menu > li:nth-child(even) {
    --acj-n3-izq: auto;
    --acj-n3-der: 100%;
}
/* Las clases del JS van DESPUÉS de la paridad: empatan en especificidad con
   :nth-child y, agrupadas con ella, la segunda regla pisaba a la primera. */
.acj-header-bar .acj-menu .sub-menu > li.acj-abre-der {
    --acj-n3-izq: 100%;
    --acj-n3-der: auto;
}
.acj-header-bar .acj-menu .sub-menu > li.acj-abre-izq {
    --acj-n3-izq: auto;
    --acj-n3-der: 100%;
}
.acj-header-bar .acj-menu .sub-menu .sub-menu {
    display: block;
    /* Sube lo que mide su relleno más el borde: así la primera entrada queda a
       la altura de la entrada padre y el ratón pasa de una a otra en línea
       recta. Pegado al costado, sin hueco: si lo hubiera, al cruzarlo se
       perdería el hover y el flotante se cerraría a medio camino. */
    top: calc( -.5rem - 1px );
    left: var(--acj-n3-izq);
    right: var(--acj-n3-der);
    width: 16rem;
    min-width: 0;
    padding: .5rem;
}
.acj-header-bar .acj-menu .sub-menu .sub-menu a {
    padding: .6rem .85rem;
    border-radius: .5rem;
}
/* La flecha de "esto despliega", al final de la fila. Apunta hacia ABAJO, como
   la de la barra, aunque el flotante salga por un lado: lo pidió el usuario
   (13 oct 2026), y así no cambia de sentido de una entrada a otra. En el panel
   el enlace es flex, así que el margen automático la lleva al borde; el ajuste
   vertical se anula porque ya la centra align-items. */
.acj-header-bar .acj-menu .sub-menu .menu-item-has-children > a::after {
    flex-shrink: 0;
    margin-left: auto;
    vertical-align: 0;
}

/* Panel del menú móvil.
 *
 * Se desplaza por dentro: va posicionado en absoluto, así que no aporta alto al
 * documento y, con los submenús abiertos, crecía por debajo de la pantalla sin
 * que hubiera nada que desplazar. overscroll-behavior evita que al llegar al
 * final el gesto siga y arrastre la página de detrás. */
#acj-mobile-menu {
    max-height: calc(100vh - var(--acj-header-h));
    max-height: calc(100svh - var(--acj-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Los submenús se abren en acordeón, no al pasar el ratón: en un teléfono no hay
   puntero que mantener encima. La clase .is-open la conmuta el JS del pie.
   Con 21 entradas, tenerlos todos desplegados hacía el panel interminable. */
#acj-mobile-menu .menu-item-has-children {
    position: relative;
}
#acj-mobile-menu .sub-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 .25rem 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#acj-mobile-menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
}
#acj-mobile-menu .sub-menu a {
    padding: .5rem .75rem;
}

/* La flecha que despliega. Superpuesta a la derecha de la fila y sin envolver al
   enlace: las entradas padre apuntan a páginas reales, y si el toque desplegara
   en vez de navegar, esas páginas quedarían inalcanzables desde el menú. */
.acj-sub-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--acj-brand-700);
    cursor: pointer;
}
/* La punta se dibuja con bordes girados, no con un icono, para no depender de
   que la fuente de iconos haya cargado. */
.acj-sub-toggle span {
    display: block;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.menu-item-has-children.is-open > .acj-sub-toggle span {
    transform: translateY(2px) rotate(-135deg);
}

/* El caret de escritorio sobra aquí: ya está la flecha. */
#acj-mobile-menu .menu-item-has-children > a::after {
    display: none;
}

/* Tipografía de la franja de identidad de la propuesta 3.
 *
 * El titular va partido en dos líneas fijas y la primera ("Ciento treinta años
 * de pensamiento jurídico") mide unas 19 veces el tamaño de letra: a 48px pide
 * 911px y la columna izquierda sólo da 781px en un portátil, así que se partía
 * en tres. El tamaño se ata al ancho de la ventana para que esa línea entre a
 * cualquier tamaño de pantalla en vez de cuadrar sólo en una.
 *
 * El titular de Noticias baja en la misma proporción: con un título de página
 * encima, el de la sección no puede ser lo más grande de la portada. Van los
 * dos con la misma curva para que la jerarquía se mantenga a todos los anchos y
 * no se invierta en una franja intermedia. */
.acj-estilo-3 .acj-franja-titulo {
    font-size: clamp( 1.5rem, 2.65vw, 3.25rem );
    /* El interlineado va aquí obligatoriamente: las utilidades de tamaño de
       Tailwind traen el suyo pegado (text-3xl deja 2.25rem fijos) y ganan a la
       regla general de .acj-title. Al soltar el tamaño con clamp, ese valor fijo
       se quedaba corto y las dos líneas del titular se apretaban. */
    line-height: 1.1;
}
.acj-estilo-3 .acj-franja-subtitular {
    font-size: clamp( 1.5rem, 2.05vw, 2.5rem );
}

/* Por debajo de lg la rejilla se apila y el texto recupera todo el ancho, así
   que el titular vuelve a los tamaños normales del tema. */
@media (max-width: 1023px) {
    .acj-estilo-3 .acj-franja-titulo,
    .acj-estilo-3 .acj-franja-subtitular {
        font-size: 1.875rem;
    }
}

/* Fondo de la primera pantalla en la propuesta 3.
 *
 * Sustituye al azul macizo, que con la franja y las noticias encima pesaba
 * demasiado. Es un gris cálido, de la misma familia que el blanco roto de la
 * cabecera: arranca casi en ese tono, para que cabecera y contenido parezcan
 * una sola pieza, y se va oscureciendo lo justo para entregar la página a la
 * banda azul de las tarjetas sin un corte seco.
 *
 * Sobre este gris el panel blanco de Noticias sigue leyéndose como panel porque
 * lleva filete y sombra corta; con el azul se despegaba solo. */
.acj-estilo-3 .acj-fondo-gris {
    background: linear-gradient( to bottom, #f7f6f5 0%, #f1efec 55%, #e7e4e0 100% );
}

/* La banda de tarjetas continúa ese mismo gris. Va PLANA y con el tono exacto en
   el que termina el degradado de arriba: son dos secciones distintas y pegadas,
   así que reiniciar el degradado habría dejado un escalón visible justo en la
   junta. */
.acj-estilo-3 .acj-fondo-gris-cola {
    background-color: #e7e4e0;
}

/* ---------------------------------------------------------------------------
 * Cabecera centrada de la propuesta 3.
 *
 * Logo al centro y menú debajo: el gesto clásico de institución académica, que
 * es lo que distingue a esta propuesta más allá del color. Le da presencia al
 * emblema, y de paso el menú deja de competir por el ancho con la marca.
 *
 * Se recompone con CSS, sin tocar el orden del HTML: los cuatro hijos de la
 * fila pasan a ser celdas de una rejilla. Duplicar la cabecera habría obligado a
 * hacer cada arreglo dos veces mientras el cliente decide.
 *
 * Sólo a partir de 1200px, que es donde aparece el menú horizontal. Por debajo
 * la cabecera sigue como en la propuesta 1 (marca a la izquierda, hamburguesa a
 * la derecha), que ya funciona; con el menú oculto, la segunda fila se quedaría
 * vacía y sólo aportaría un hueco.
 * ------------------------------------------------------------------------ */
@media (min-width: 1200px) {
    .acj-estilo-3 .acj-header-bar {
        display: grid;
        /*
         * minmax(0, 1fr) y no 1fr a secas: 'fr' respeta el contenido mínimo, así
         * que si el bloque de acciones creciera (un texto más largo en el botón)
         * su columna se ensancharía, las dos laterales dejarían de ser iguales y
         * el emblema se desplazaría del centro sin que se note por qué.
         */
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            ".    marca acciones"
            "menu menu  menu";
        align-items: center;
        height: auto;
        row-gap: .5rem;
        padding: .75rem 0;
    }
    .acj-estilo-3 .acj-header-marca {
        grid-area: marca;
        justify-self: center;
    }

    /*
     * Marca en vertical: emblema arriba, nombre debajo, todo centrado. Así el
     * centro de la cabecera es un eje de verdad y no un bloque de dos piezas
     * centrado como conjunto.
     *
     * Al colapsar vuelve a la disposición normal —nombre al lado del emblema—
     * porque estas tres declaraciones sólo valen sin .is-scrolled, y entonces
     * mandan otra vez las clases de utilidad del marcado.
     */
    .acj-estilo-3 .acj-sticky-header:not(.is-scrolled) .acj-header-marca {
        flex-direction: column;
        gap: .6rem;
        text-align: center;
    }
    .acj-estilo-3 .acj-sticky-header:not(.is-scrolled) .acj-header-logo {
        height: 6rem;
    }
    /*
     * El nombre se fuerza a visible: sus clases de utilidad lo esconden entre
     * 1200 y 1280px, que es donde estorbaba al menú horizontal en la cabecera
     * de una sola fila. Apilado ya no compite con nada.
     */
    .acj-estilo-3 .acj-sticky-header:not(.is-scrolled) .acj-header-nombre {
        display: block;
    }
    /*
     * Las acciones y el botón de menú comparten celda a propósito: nunca se ven
     * a la vez (uno es 'hidden nav:flex' y el otro 'nav:hidden flex'), así que
     * el que esté visible ocupa la derecha de la primera fila.
     */
    .acj-estilo-3 .acj-header-acciones {
        grid-area: acciones;
        justify-self: end;
    }
    .acj-estilo-3 .acj-header-bar > .acj-menu {
        grid-area: menu;
    }

    /*
     * Los dos filetes que enmarcan el menú. Le dan a la cabecera el remate de
     * cabecera de periódico y separan la marca de la navegación sin recurrir a
     * más espacio en blanco.
     *
     * Van al ancho del contenedor y no a sangre porque el contenedor no llega
     * al borde de la pantalla en monitores grandes (.acj-wide se topa en 1470px
     * y queda centrado): un filete a 100vw se saldría por los lados y, además,
     * 100vw incluye la barra de scroll. Al ancho del contenedor quedan alineados
     * con el emblema y con el botón de acceso, que es lo que se lee como
     * deliberado.
     *
     * Sólo en reposo: colapsada no hay fila de menú que enmarcar.
     */
    .acj-estilo-3 .acj-sticky-header:not(.is-scrolled) .acj-header-bar > .acj-menu {
        border-top: 1px solid rgba(13, 24, 64, .14);
        border-bottom: 1px solid rgba(13, 24, 64, .14);
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    /*
     * Dos selectores porque la lista no siempre cuelga igual: si hay un menú
     * asignado en WordPress, wp_nav_menu la envuelve en su propio contenedor; si
     * no lo hay, acj_menu() imprime el <ul> suelto. Se apunta sólo a la lista de
     * primer nivel: los submenús son desplegables absolutos y centrarlos los
     * descuadraría.
     */
    .acj-estilo-3 .acj-header-bar > .acj-menu > ul,
    .acj-estilo-3 .acj-header-bar > .acj-menu > div > ul {
        justify-content: center;
    }

    /*
     * Al bajar vuelve a una sola fila: la versión ceremoniosa es la primera
     * impresión, y en cuanto se empieza a leer la cabecera se aparta. Toda la
     * propuesta 3 se apoya en que las noticias entran primero, así que dejarla
     * alta y quieta sería contradictorio.
     *
     * El cambio de rejilla a fila es instantáneo, no fundido: entre 'grid' y
     * 'flex' no hay nada que interpolar. Ocurre una sola vez, al cruzar el
     * umbral, y el alto sí se sigue animando.
     */

    .acj-estilo-3 .acj-sticky-header.is-scrolled .acj-header-bar {
        display: flex;
        justify-content: space-between;
        padding: 0;
        row-gap: 0;
    }
    .acj-estilo-3 .acj-sticky-header.is-scrolled .acj-header-bar > .acj-menu > ul,
    .acj-estilo-3 .acj-sticky-header.is-scrolled .acj-header-bar > .acj-menu > div > ul {
        justify-content: flex-start;
    }

    /*
     * En la fila única el menú se aprieta un punto. Georgia es bastante más
     * ancha que Inter y ocupaba tanto que el nombre de la Academia, que vuelve
     * al lado del emblema, salía cortado ("Academia Colombia..."). Aquí el menú
     * está en su estado compacto y un 13px pasa desapercibido; el nombre
     * cortado, no.
     */
    .acj-estilo-3 .acj-sticky-header.is-scrolled .acj-header-bar > .acj-menu > ul > li > a,
    .acj-estilo-3 .acj-sticky-header.is-scrolled .acj-header-bar > .acj-menu > div > ul > li > a {
        font-size: .8125rem;
        letter-spacing: normal;
        padding-left: .35rem;
        padding-right: .35rem;
    }
}

/*
 * Franja intermedia: la cabecera ya está centrada (>=1200) pero al colapsar no
 * hay ancho para emblema + nombre + menú + acciones. Medido: a 1280 le faltan
 * 80px al nombre incluso con el menú compacto, y a 1440 entra justo. Por debajo
 * de 1400 se retira, que es lo mismo que hacen las clases del tema entre 1200 y
 * 1280. Enseñar el nombre cortado se lee como un fallo; no enseñarlo, no.
 */
@media (min-width: 1200px) and (max-width: 1399px) {
    .acj-estilo-3 .acj-sticky-header.is-scrolled .acj-header-nombre {
        display: none;
    }
}

/* El menú de la propuesta 3 en Georgia, la misma serif que usan los titulares
   de las tarjetas. Fuera del bloque de 1200px a propósito: la fuente distingue a
   la propuesta a cualquier tamaño, también en el panel del menú móvil, que lleva
   la misma clase. */
.acj-estilo-3 .acj-menu a {
    font-family: Georgia, 'Times New Roman', serif;
}

/* Congela las transiciones un instante. Lo usa el JS de la cabecera para medir
   cuánto encoge al desplazarse: con la animación viva, leer el alto justo
   después de poner la clase devuelve el valor de partida, no el de destino. No
   llega a pintarse ningún fotograma con ella puesta. */
.acj-sin-transicion,
.acj-sin-transicion * {
    transition: none !important;
}

/* Icono de un elemento de menú (campo "Icono" en Apariencia → Menús).
   Hereda el color y el tamaño del enlace a propósito: así sigue al estado del
   menú —blanco con la cabecera desplazada, oscuro en el panel móvil— sin una
   sola regla más. Sólo se le separa del texto. */
.acj-menu-icono {
    margin-right: .45rem;
}
/* En los submenús el icono va un punto por encima del texto (15px frente a 14):
   al mismo tamaño se veía menudo al lado de la entrada. */
.acj-menu .sub-menu .acj-menu-icono {
    font-size: .9375rem;
}

/* Los dos velos de los banners con foto (propuesta unificada).
 *
 * Van en pareja con las dos pieles de $acj_pieles: el oscuro debajo del texto
 * blanco de "Hablemos de Derecho" y el claro debajo del texto oscuro de la
 * Revista. Cada pieza se lleva el suyo al hueco que ocupe, así que la banda a
 * sangre y la caja pueden intercambiarse sin que ningún texto se quede sin
 * contraste.
 *
 * El oscuro usa un color de la paleta con opacidad propia, no un rgba fijo, para
 * que siga el azul de la propuesta si algún día se retoca la escala. El claro sí
 * es literal: es el mismo stone-200 del fondo plano que tenía la caja, y esa
 * escala no está en la paleta.
 *
 * El desenfoque del claro aparta el detalle de la foto del texto; donde no esté
 * soportado, el 88 % de opacidad ya basta para la lectura. */
.acj-velo-oscuro {
    background: var(--acj-brand-950);
    opacity: .82;
}
/* Sin desenfoque: lo llevaba para apartar el detalle de la foto del texto, pero
   el fondo de este banner es el emblema y desenfocarlo sólo lo ensuciaba. */
.acj-velo-claro {
    background: rgba( 231, 229, 228, .65 );
}

/* El emblema, pegado a la derecha y con un punto de zoom.
 *
 * La imagen entra entera ('contain') y no llena la banda: el archivo es 3.19 de
 * proporción y la banda 5.72, así que se dibuja a 794px de ancho en una caja de
 * 1425 y sobran 631. Con la posición por defecto esos 631 se reparten a los dos
 * lados y el emblema queda al centro, que es lo que no queríamos.
 *
 * 'right' manda todo el sobrante al lado izquierdo: el borde derecho de la
 * imagen se apoya en el de la banda, que al ir a sangre es el de la pantalla.
 *
 * El zoom va DESPUÉS y necesita su origen en el mismo borde. Sin
 * 'transform-origin', el escalado parte del centro y despega la imagen de la
 * derecha, deshaciendo la línea anterior.
 *
 * El 1.2 es la única cifra a tocar para agrandarlo. Cuesta recorte por arriba y
 * por abajo: a 1.2 se pierde un 10 % por cada lado, y cada décima más son unos
 * cinco puntos adicionales. */
.acj-fondo-contain img {
   object-position: center;
    transform: scale(1.50) translateX(100px);
}

/* El contenido de la CAJA, por encima del velo y del overlay de cámara del
 * editor (z-30).
 *
 * Se sube cada hijo y no una capa que envuelva a todos, como sí hace la banda a
 * sangre con .acj-hd-texto: una capa cubriría la caja entera y se llevaría los
 * clics, dejando la foto sin poder cambiarse. Subiendo sólo el icono, el texto y
 * el botón, los huecos de la caja siguen recibiendo el clic de la cámara. */
.acj-banner-foto > *:not(.gravit-img-container):not(.acj-velo-claro):not(.acj-velo-oscuro):not(.acj-fondo-lado) {
    position: relative;
    z-index: 35;
}

/* Misma solución que en el carrusel: la capa del texto queda por encima del
   overlay de cámara del editor, pero deja pasar los clics salvo en su contenido,
   para que la foto se pueda seguir cambiando. */
.acj-hd-texto {
    position: relative;
    z-index: 35;
    pointer-events: none;
}
.acj-hd-texto > * {
    pointer-events: auto;
}


/* ---------------------------------------------------------------------------
 * Carrusel del héroe (propuestas 2 y 4).
 *
 * Los tres pases se superponen en la MISMA celda de una rejilla, no en posición
 * absoluta. Parece un rodeo y es justo lo contrario: apilados con position
 * absolute ninguno ocupaba sitio, el carrusel no tenía más alto que el mínimo
 * que se le diera, y en cuanto el texto pedía más —una pantalla baja, un móvil
 * con las barras del navegador puestas— el recuadro se recortaba arriba y
 * abajo. Medido: por debajo de 660px de alto de ventana la caja no cabía.
 *
 * En una celda compartida siguen superpuestos, pero la rejilla sí los mide: el
 * carrusel es al menos una pantalla y crece si hace falta. Nunca recorta.
 * ------------------------------------------------------------------------ */
.acj-slider {
    display: grid;

    /*
     * Una pantalla menos la cabecera. En la propuesta unificada se descuenta
     * además un pico, para que asomen las tarjetas y se vea que la página sigue;
     * en la 2 el carrusel llena la pantalla entera.
     *
     * Es 'min-height', no 'height': si el texto de un pase pide más sitio —una
     * ventana baja, un móvil con las barras puestas— la rejilla lo deja crecer.
     */
    --acj-asomo: 0px;
    min-height: calc( 100vh - var(--acj-header-h) - var(--acj-asomo) );
    min-height: calc( 100svh - var(--acj-header-h) - var(--acj-asomo) );
}
.acj-estilo-4 .acj-slider {
    --acj-asomo: 12rem;

    /* La flecha izquierda se coloca respecto al carrusel, no al pase, así que
       necesita saber dónde acaba la columna de texto. */
    --acj-parte-texto-pct: 40%;
}

.acj-slide {
    /* Los tres, en la misma celda. */
    grid-area: 1 / 1;

    /* visibility además de opacity: sin ella el pase invisible seguiría
       recibiendo los clics de los que tiene encima. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
}
.acj-slide.is-activa {
    opacity: 1;
    visibility: visible;
}

/* Capa propia para el texto, entre 30 y 40: el overlay de cámara del editor
   cubre la caja entera con z-index 30 y, sin esto, el texto se vería pero
   dejaría de ser editable porque los clics se los llevaría la imagen.
   Entre 30 y 40 porque por encima de 40 están los controles de sección.

   Pero esta capa ocupa el pase ENTERO, así que al ponerla encima se llevaba
   todos los clics y era la imagen la que dejaba de poder cambiarse: el icono de
   cámara no se alcanzaba ni en una esquina vacía. Por eso la capa se vuelve
   transparente al puntero y sólo la caja del texto lo recupera. */
.acj-slide-texto {
    position: relative;
    z-index: 35;
    pointer-events: none;
}
.acj-slide-caja {
    pointer-events: auto;
}

/* Caja del texto en la propuesta 2. Sustituye al velo que cubría la foto
   entera: aquí sólo se apaga lo que hay detrás del texto, y la imagen se ve
   limpia en el resto. El desenfoque es un extra: donde no está soportado, el
   88 % de opacidad ya basta para que el texto oscuro se lea sobre cualquier
   foto. */
.acj-slide-caja {
    background: rgba( 255, 255, 255, .88 );
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur( 8px );
}

/* Fondo del carrusel y cabecera, en la propuesta unificada.
 *
 * La cabecera va blanca —no el blanco roto del resto del sitio— para que no se
 * marque una línea contra la columna del pase, que arranca justo debajo. Sólo
 * en reposo: al bajar sigue volviéndose azul, como en las demás.
 *
 * El fondo del carrusel apenas asoma —la foto y el texto se reparten toda la
 * caja— pero es lo que se ve si una imagen tarda en cargar. */
.acj-estilo-4 .acj-sticky-header:not(.is-scrolled) {
    background-color: #fff;
}
.acj-estilo-4 .acj-slider {
    background: #e7e5e4;
}

/* ---------------------------------------------------------------------------
 * Carrusel partido (propuesta unificada): texto a la izquierda, foto a la
 * derecha, en vez del texto encima de la foto. Con fotos de grupo, un recuadro
 * encima siempre acaba tapando a alguien.
 *
 * En móvil se apilan —foto arriba, texto debajo— porque a ese ancho dos
 * columnas dejarían las dos inservibles.
 * ------------------------------------------------------------------------ */
.acj-estilo-4 .acj-slide {
    display: grid;
    grid-template-rows: auto 1fr;
}
.acj-estilo-4 .acj-slide-foto {
    position: relative;   /* ancla del contenedor absoluto de la imagen */
    overflow: hidden;
    min-height: 15rem;
}

/* El recuadro desaparece como pieza: el azul pasa a ser el fondo de la mitad
   entera y el texto se apoya directamente en él. */
.acj-estilo-4 .acj-slide-texto {
    /* Semitransparente para que el eco de la foto se intuya por debajo, pero
       sólo eso: al 97-98 % la textura se adivina y no compite con el texto. */
    background:
        linear-gradient( 160deg,
            rgba( 26, 42, 102, .985 ) 0%,
            rgba( 11, 18, 48, .995 ) 100% ),
        var(--acj-brand-900);

    /* El resalte del titular sale de esta variable. Sobre el azul necesita el
       peldaño claro del acento: con el bronce oscuro caía a 2,4:1. */
    --acj-acento: var(--acj-accent-300);
}
/* Eco de la foto en la columna del texto.
 *
 * Va por DEBAJO del degradado —de ahí el z-index negativo— y no encima con poca
 * opacidad: así el azul es el que manda y la foto sólo aporta una textura. El
 * degradado, al ser semitransparente, deja verla lo justo.
 *
 * Se difumina un poco y se apaga a propósito: cualquier detalle nítido detrás
 * del titular compite con la lectura, que es lo que había que evitar. */
.acj-estilo-4 .acj-slide-eco {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Las dos palancas se bajan a la vez: subir sólo el velo, pasado el 98 %,
       deja de notarse. Bajando además el eco, la foto se convierte en un cambio
       de tono apenas perceptible. */
    opacity: .14;
    filter: blur( 3px );
}
/* El texto necesita capa propia por encima del eco. */
.acj-estilo-4 .acj-slide-texto > div {
    position: relative;
}

.acj-estilo-4 .acj-slide-caja {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    border-radius: 0;
}

/* Los tonos del texto se invierten aquí y no en la plantilla porque el marcado
   del carrusel lo comparten la 2 y la 4, y en la 2 el recuadro sigue siendo
   claro sobre la foto. */
.acj-estilo-4 .acj-slide-caja h1,
.acj-estilo-4 .acj-slide-caja p {
    color: #fff;
}
.acj-estilo-4 .acj-slide-caja .acj-cta {
    background-color: #fff;
    color: var(--acj-brand-900);
}
.acj-estilo-4 .acj-slide-caja .acj-cta:hover {
    background-color: var(--acj-brand-100);
}

/*
 * El corte va en 1200px y no en 1024: medido, a 1024 la columna de texto se
 * queda en 512px y, descontado el margen, el recuadro bajaba a poco más de
 * 300px — un titular de 48px no cabe ahí. Apilado se lee mejor.
 */
@media (min-width: 1200px) {
    .acj-estilo-4 .acj-slide {
        grid-template-rows: 1fr;

        /*
         * La foto más ancha que el texto. El multiplicador de abajo es el inverso
         * de la parte que ocupa el texto (100/40 = 2.5): los tres números van
         * juntos a propósito, porque cambiar la proporción sin cambiarlo
         * descuadra la alineación del titular, y en silencio.
         */
        --acj-parte-texto: 40fr;
        --acj-parte-foto: 60fr;
        --acj-inverso-texto: 250%;
        --acj-parte-texto-pct: 40%;

        /*
         * minmax(0, …) y no 'fr' a secas: 'fr' respeta el ancho mínimo del
         * contenido, y a 1200px el texto no bajaba de 529px — la proporción se
         * quedaba en 45/55 en vez de la pedida, sólo en ese tramo.
         */
        grid-template-columns:
            minmax( 0, var(--acj-parte-texto) )
            minmax( 0, var(--acj-parte-foto) );
    }
    /* La foto va primera en el HTML —para quedar arriba al apilarse en móvil—
       pero se coloca en la segunda columna. */
    .acj-estilo-4 .acj-slide-foto {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
    }
    .acj-estilo-4 .acj-slide-texto {
        grid-column: 1;
        grid-row: 1;
    }

    /*
     * El texto se alinea con el contenedor del sitio, no con el borde de su
     * columna. Aplicando a la columna su inverso se obtiene el ancho completo de
     * la ventana, y de ahí sale el mismo desplazamiento que aplica .acj-wide al
     * centrarse dentro de sus 1470px. Sin esto, en monitores anchos el titular
     * arrancaba pegado al borde mientras el logo estaba muy adentro.
     *
     * Se usan porcentajes y no 'vw' a propósito: vw incluye la barra de scroll y
     * dejaría el texto desplazado unos píxeles.
     */
    .acj-estilo-4 .acj-slide-texto > div {
        padding-left: calc( ( var(--acj-inverso-texto) - min( var(--acj-inverso-texto), 1470px ) ) / 2 + 3rem );
        padding-right: 3rem;
    }
}

@media (max-width: 1199px) {
    /* Mientras el pase está apilado no hay sitio para las flechas: caerían sobre
       el texto, que ocupa todo el ancho. Mandan los puntos. */
    .acj-estilo-4 .acj-flecha {
        display: none;
    }
    /* El margen ancho existía para dejarle carril a las flechas; sin ellas, el
       texto vuelve al margen normal del sitio, que es 1rem y sube a 1.5 desde
       los 640px. Con 1.5 fijo el titular quedaba 8px adentro en móvil. */
    .acj-estilo-4 .acj-slide-texto > div {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (min-width: 640px) and (max-width: 1199px) {
    .acj-estilo-4 .acj-slide-texto > div {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/*
 * Móvil: la columna de texto, más compacta.
 *
 * Apilada bajo la foto, el aire que en escritorio equilibra las dos mitades
 * aquí sólo alarga el pase y empuja las tarjetas fuera de la pantalla. Se
 * recorta donde no se nota: el margen vertical de la columna (3rem -> 1.75/2)
 * y la separación entre titular, párrafo y botón.
 *
 * Los márgenes se tocan desde aquí y no en la plantilla porque el marcado del
 * carrusel lo comparten la 2 y la 4, y en la 2 el texto va dentro del recuadro
 * blanco sobre la foto, donde ese aire sí hace falta.
 *
 * El padding de abajo no baja de 2rem: por debajo, el botón se mete bajo los
 * puntos del carrusel, que van anclados a 1.25rem del borde.
 */
@media (max-width: 639px) {
    .acj-estilo-4 .acj-slide-texto > div {
        padding-top: 1.75rem;
        padding-bottom: 2rem;
    }
    .acj-estilo-4 .acj-slide-caja h1 {
        margin-bottom: .75rem;
    }
    .acj-estilo-4 .acj-slide-caja p {
        margin-bottom: 1.5rem;
    }
}

/* Héroe como bloque de "Añadir bloque" (inc/layouts.php, acj_layout_heroe): el
 * mismo pase, sin carrusel. En la portada el carrusel llena casi la pantalla;
 * dentro de una página eso empujaría todo lo demás fuera de la vista, así que
 * el bloque se queda en un alto contenido, y sólo cuando las columnas van lado
 * a lado: apilado en móvil, manda su contenido. */
.acj-slider--bloque {
    min-height: 0;
}
@media (min-width: 1200px) {
    .acj-slider--bloque .acj-slide {
        min-height: clamp( 26rem, 62vh, 38rem );
    }
}

.acj-slider-puntos {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX( -50% );
    z-index: 36;
    display: flex;
    gap: .5rem;
}

/* Sin velo detrás, los puntos caen directamente sobre la foto: llevan sombra
   para no perderse sobre una zona clara de la imagen. */
.acj-punto {
    width: .7rem;
    height: .7rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba( 255, 255, 255, .85 );
    background: rgba( 0, 0, 0, .25 );
    box-shadow: 0 1px 3px rgba( 0, 0, 0, .45 );
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .2s;
}
.acj-punto:hover {
    transform: scale( 1.2 );
}
.acj-punto.is-activa {
    background: #fff;
    border-color: #fff;
}

/* Flechas laterales: el signo solo, sin pastilla.
   Sin fondo detrás, lo único que las separa de la foto es la sombra proyectada;
   va sobre el glifo con drop-shadow y no como sombra de caja, porque la caja del
   botón es transparente y una box-shadow dibujaría un rectángulo en el aire.
   La caja se conserva en 3rem aunque el signo sea más pequeño: es la superficie
   que hay que poder pulsar. */
.acj-flecha {
    position: absolute;
    top: 50%;
    transform: translateY( -50% );
    z-index: 36;
    display: none;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
    filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, .7 ) );
    transition: transform .2s, opacity .2s;
    opacity: .9;
}
.acj-flecha:hover {
    opacity: 1;
    transform: translateY( -50% ) scale( 1.15 );
}
.acj-flecha-atras    { left: 1.25rem; }
.acj-flecha-adelante { right: 1.25rem; }

@media (min-width: 768px) {
    .acj-flecha {
        display: flex;
    }
}

/* Partido en dos, los dos mandos se reparten así:
 *
 * Las FLECHAS van sobre la foto, holgadas. Estuvieron una a cada extremo, pero
 * la izquierda caía sobre la columna azul y allí el carril es de 48px —lo que el
 * texto deja hasta el margen del contenedor—: había que estrecharla y pegarla al
 * borde para no tocar la primera letra del titular. Sobre la foto no hay esa
 * pelea y recuperan su tamaño normal.
 *
 * Los PUNTOS bajan a la columna azul, alineados con el texto. Comparten el mismo
 * cálculo de margen que el titular, así que arrancan exactamente donde él a
 * cualquier ancho. En el medio del carrusel caerían justo en la costura entre
 * las dos mitades. */
@media (min-width: 1200px) {
    /*
     * Una a cada extremo del carrusel, centradas en el margen exterior de la
     * página. Ese margen es lo único libre: a la altura de las flechas está el
     * párrafo, que arranca donde el titular. Medido, el carril es de 48px en un
     * portátil y de 266px a 1920 —porque el contenedor se topa en 1470 y se
     * centra—, así que el hueco se reparte y las flechas se separan del borde
     * todo lo que la pantalla permita, sin llegar a pisar el texto.
     */
    .acj-estilo-4 .acj-flecha {
        width: 2rem;
        height: 2rem;
        font-size: 1.5rem;
    }
    .acj-estilo-4 .acj-flecha-atras {
        left: calc( ( ( 100% - min( 100%, 1470px ) ) / 2 + 3rem - 2rem ) / 2 );
    }
    .acj-estilo-4 .acj-flecha-adelante {
        right: calc( ( ( 100% - min( 100%, 1470px ) ) / 2 + 3rem - 2rem ) / 2 );
    }

    .acj-estilo-4 .acj-slider-puntos {
        /*
         * Aquí el 100% ya es el ancho del carrusel, no el de la columna: el
         * desplazamiento del contenedor sale directo, sin el multiplicador que sí
         * necesita el texto. Con aquél los puntos se iban a 1094px.
         */
        left: calc( ( 100% - min( 100%, 1470px ) ) / 2 + 3rem );
        bottom: 2.75rem;
        transform: none;
    }
}

/* ============ Pestañas de la sección "En Video" ============
   Los colores dan por supuesta la sección OSCURA, que es la de la propuesta
   elegida. La propuesta 2 pinta esa sección sobre gris claro; si alguna vez se
   vuelve a ella, estos tres colores necesitan su propia rama. */
.acj-video-tab {
    position: relative;
    padding: .25rem 0 .875rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--acj-brand-200);
    cursor: pointer;
    transition: color .2s ease;
}

@media (min-width: 768px) {
    .acj-video-tab {
        font-size: 1.0625rem;
    }
}

.acj-video-tab:hover,
.acj-video-tab[aria-selected="true"],
.acj-video-tab[aria-current="page"] {
    color: #fff;
}

/* Las del archivo de una categoría son enlaces (parts/pestanas-subcategorias.php):
   sin esto heredan el subrayado y el color de los <a>. */
a.acj-video-tab {
    display: inline-block;
    text-decoration: none;
}

/* Fila de subcategorías del archivo: en el teléfono, un solo renglón que se
   desliza de lado (repartida, ocupaba cuatro); desde md, en renglones, para
   ver todas de un vistazo. El padding-bottom de 1px es para el subrayado de la activa: cuelga 1px por
   debajo de la pestaña y overflow-x lo recortaría. */
.acj-subcat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.acj-subcat-tabs::-webkit-scrollbar {
    display: none;
}

.acj-subcat-tabs .acj-video-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .acj-subcat-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
    }
}

/* Subcategoría sin videos: sólo aparece en modo edición, atenuada para que el
   administrador sepa que existe pero que el visitante todavía no la ve. */
.acj-video-tab--vacia {
    opacity: .5;
}

/* El subrayado se dibuja con un pseudoelemento y no con border-bottom para que
   se pueda animar sin mover el texto, y para que caiga JUSTO encima del filete
   del contenedor (de ahí el -1px) en vez de dejar dos líneas paralelas. */
.acj-video-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--acj-accent-400);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.acj-video-tab[aria-selected="true"]::after,
.acj-video-tab[aria-current="page"]::after {
    transform: scaleX(1);
}

.acj-video-tab:focus-visible {
    outline: 2px solid var(--acj-accent-300);
    outline-offset: 3px;
    border-radius: 2px;
}

/* El panel no lleva contorno propio: recibe el foco al llegar desde la lengüeta
   sólo para que el lector de pantalla anuncie su contenido. */
.acj-video-tabs [role="tabpanel"]:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .acj-video-tab,
    .acj-video-tab::after {
        transition: none;
    }
}

/* ============ Sillones de la Academia: panel lateral ============
   Es un <dialog> abierto con showModal() (template-sillones.php). El navegador
   lo centra con márgenes automáticos y le pone un tope de alto: aquí se anclan
   a la derecha y a toda la altura.

   La entrada usa @starting-style y la salida `overlay`/`display` con
   allow-discrete: sin eso el <dialog> desaparece de golpe al cerrarse, porque
   pasa a display:none antes de que corra la transición. Donde no hay soporte
   simplemente aparece y desaparece, que también sirve. */
.acj-panel-lateral {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    width: min(30rem, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    color: inherit;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}
.acj-panel-lateral[open] {
    transform: none;
}
@starting-style {
    .acj-panel-lateral[open] {
        transform: translateX(100%);
    }
}
.acj-panel-lateral::backdrop {
    background: rgba(15, 23, 42, 0);
    transition: background-color .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}
.acj-panel-lateral[open]::backdrop {
    background: rgba(15, 23, 42, .55);
}
@starting-style {
    .acj-panel-lateral[open]::backdrop {
        background: rgba(15, 23, 42, 0);
    }
}
/* La caja llena el <dialog> para que un clic en el <dialog> mismo sólo pueda
   venir del fondo (así se cierra al pulsar fuera, ver footer.php). */
.acj-panel-lateral__caja {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.acj-panel-lateral__cuerpo {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Con el panel abierto la página de detrás no se desplaza. */
html:has(.acj-panel-lateral[open]) {
    overflow: hidden;
}

/* Sucesión: una línea vertical une los ocupantes, como una cronología. */
.acj-sucesion__item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
}
.acj-sucesion__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 1px;
    background: #e2e8f0;
}
.acj-sucesion__marca {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acj-brand-50);
    color: var(--acj-brand-700);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--acj-brand-100);
}
.acj-sucesion__marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acj-sucesion__item.is-actual .acj-sucesion__marca {
    background: var(--acj-accent-500);
    border-color: var(--acj-accent-500);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .acj-panel-lateral,
    .acj-panel-lateral::backdrop {
        transition: none;
    }
}

/* ============ Pinacoteca: visor de retratos ============
   <dialog> a pantalla completa con showModal() (template-pinacoteca.php). El
   fondo oscuro lo pinta el propio <dialog>, no ::backdrop, para que la caja
   interior llene toda la pantalla y un clic en el <dialog> mismo sólo pueda
   venir del hueco alrededor del cuadro (así se cierra al pulsar fuera). */
.acj-visor {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    background: rgba(2, 6, 23, .94);
    color: #fff;
    opacity: 0;
    transition: opacity .25s ease, overlay .25s allow-discrete, display .25s allow-discrete;
}
.acj-visor[open] {
    opacity: 1;
}
@starting-style {
    .acj-visor[open] {
        opacity: 0;
    }
}
.acj-visor::backdrop {
    background: transparent;
}
.acj-visor__caja {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 4.5rem 2rem;
    pointer-events: none;
}
/* La caja deja pasar los clics al <dialog> (cierre al pulsar fuera); sólo el
   cuadro, su pie y los botones los recogen. */
.acj-visor__figura,
.acj-visor__boton {
    pointer-events: auto;
}
.acj-visor__figura {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}
.acj-visor__img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 11rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.acj-visor__boton {
    position: absolute;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .08);
    transition: background-color .2s, color .2s;
}
.acj-visor__boton:hover {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}
.acj-visor__boton:focus-visible {
    outline: 2px solid var(--acj-accent-400);
    outline-offset: 2px;
}
.acj-visor__cerrar {
    top: 1rem;
    right: 1rem;
}
.acj-visor__anterior,
.acj-visor__siguiente {
    top: 50%;
    transform: translateY(-50%);
}
.acj-visor__anterior {
    left: 1rem;
}
.acj-visor__siguiente {
    right: 1rem;
}
/* En un móvil las flechas no caben a los lados sin encoger el cuadro: bajan
   al pie, a izquierda y derecha del nombre. */
@media (max-width: 640px) {
    .acj-visor__caja {
        padding: 4rem 1rem 5.5rem;
    }
    .acj-visor__anterior,
    .acj-visor__siguiente {
        top: auto;
        bottom: 1.25rem;
        transform: none;
    }
    .acj-visor__img {
        max-height: calc(100dvh - 15rem);
    }
}
html:has(.acj-visor[open]) {
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .acj-visor {
        transition: none;
    }
}