/*
Theme Name:  Tine Hélène Barahona
Theme URI:   https://tinehelene.com
Author:      Tine Hélène Barahona
Description: Blog académico y creativo de Tine Hélène Barahona — Compositora, Filóloga y Egiptóloga. Fondo estelar de las Pléyades, paneles en blanco roto y tipografía en pan de oro.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
License:     Privado — todos los derechos reservados
Text Domain: tine-helene
*/

/* ================================================================================
   IMPORTACIÓN DE TIPOGRAFÍAS
   ================================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,700;1,400&family=Allura&display=swap');

/* ================================================================================
   VARIABLES CROMÁTICAS Y TIPOGRÁFICAS DEL SISTEMA DE DISEÑO
   ================================================================================ */
:root {
    --bg-absolute: #303b68;
    --bg-nav: #262f55;
    --gold-primary: #e5c158;
    --gold-bright: #f3e5ab;
    --gold-muted: #d4af37;
    --gold-gradient: linear-gradient(135deg, #f3e5ab 0%, #e5c158 50%, #d4af37 100%);
    --border-gold: rgba(229, 193, 88, 0.35);

    --panel-bone: #fdfbf7;
    --panel-inner: #f6f1e6;
    --border-bone: #e8e0ce;

    --text-panel: #1e2542;
    --text-panel-secondary: #2f3864;
    --primary-panel: #2b3e5a;
    --primary-panel-bright: #395273;
    --border-primary: rgba(43, 62, 90, 0.45);

    --shadow-elevated: 0 25px 65px rgba(0,0,0,0.95), 0 10px 30px rgba(0,0,0,0.85);
}

/* ================================================================================
   RESET Y BASE
   ================================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

section[id], div[id], h1[id], h2[id], h3[id], [id] {
    scroll-margin-top: 135px;
}

/* ================================================================================
   ARQUITECTURA DE LA ENREDADERA (VIOLETAS)
   Borde inamovible que no se superpone al menú ni a los textos.
   ================================================================================ */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10; /* Siempre por debajo del texto, nav y paneles */
    pointer-events: none; /* No interfiere con clics o scroll */
    padding: 24px; /* Margen unificado y exacto para los 4 lados */
    background-image: 
        /* ARRIBA (Horizontal - 7% más pequeño: 139px x 37px) */
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40' width='150' height='40'%3E%3Cdefs%3E%3Cpath id='lf' d='M0,0 C-6,-8 -6,-16 0,-20 C6,-16 6,-8 0,0' fill='%232f5412'/%3E%3Cpath id='st' d='M0,20 Q30,5 50,20 T100,20 T150,20' fill='none' stroke='%231f3f08' stroke-width='2'/%3E%3Cg id='f1'%3E%3Ccircle cx='0' cy='-6' r='5' fill='%234c1d95'/%3E%3Ccircle cx='5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f2'%3E%3Ccircle cx='0' cy='-5' r='4' fill='%236d28d9'/%3E%3Ccircle cx='4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f3'%3E%3Ccircle cx='0' cy='-4' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23st'/%3E%3Cuse href='%23lf' x='20' y='20' transform='rotate(30 20 20)'/%3E%3Cuse href='%23f1' x='35' y='15'/%3E%3Cuse href='%23f3' x='50' y='10'/%3E%3Cuse href='%23lf' x='70' y='22' transform='rotate(-20 70 22)'/%3E%3Cuse href='%23f2' x='85' y='25'/%3E%3Cuse href='%23f1' x='110' y='18'/%3E%3Cuse href='%23lf' x='130' y='18' transform='rotate(45 130 18)'/%3E%3Cuse href='%23f3' x='140' y='25'/%3E%3C/svg%3E"),
        /* ABAJO (Horizontal - 7% más pequeño: 139px x 37px) */
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40' width='150' height='40'%3E%3Cdefs%3E%3Cpath id='lf' d='M0,0 C-6,-8 -6,-16 0,-20 C6,-16 6,-8 0,0' fill='%232f5412'/%3E%3Cpath id='st' d='M0,20 Q30,5 50,20 T100,20 T150,20' fill='none' stroke='%231f3f08' stroke-width='2'/%3E%3Cg id='f1'%3E%3Ccircle cx='0' cy='-6' r='5' fill='%234c1d95'/%3E%3Ccircle cx='5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f2'%3E%3Ccircle cx='0' cy='-5' r='4' fill='%236d28d9'/%3E%3Ccircle cx='4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f3'%3E%3Ccircle cx='0' cy='-4' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23st'/%3E%3Cuse href='%23lf' x='20' y='20' transform='rotate(30 20 20)'/%3E%3Cuse href='%23f1' x='35' y='15'/%3E%3Cuse href='%23f3' x='50' y='10'/%3E%3Cuse href='%23lf' x='70' y='22' transform='rotate(-20 70 22)'/%3E%3Cuse href='%23f2' x='85' y='25'/%3E%3Cuse href='%23f1' x='110' y='18'/%3E%3Cuse href='%23lf' x='130' y='18' transform='rotate(45 130 18)'/%3E%3Cuse href='%23f3' x='140' y='25'/%3E%3C/svg%3E"),
        /* IZQUIERDA (Vertical - 7% más pequeño: 37px x 139px) */
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 150' width='40' height='150'%3E%3Cdefs%3E%3Cpath id='lf' d='M0,0 C-6,-8 -6,-16 0,-20 C6,-16 6,-8 0,0' fill='%232f5412'/%3E%3Cpath id='st' d='M20,0 Q5,30 20,50 T20,100 T20,150' fill='none' stroke='%231f3f08' stroke-width='2'/%3E%3Cg id='f1'%3E%3Ccircle cx='0' cy='-6' r='5' fill='%234c1d95'/%3E%3Ccircle cx='5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f2'%3E%3Ccircle cx='0' cy='-5' r='4' fill='%236d28d9'/%3E%3Ccircle cx='4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f3'%3E%3Ccircle cx='0' cy='-4' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23st'/%3E%3Cuse href='%23lf' x='20' y='20' transform='rotate(120 20 20)'/%3E%3Cuse href='%23f1' x='15' y='35'/%3E%3Cuse href='%23f3' x='10' y='50'/%3E%3Cuse href='%23lf' x='22' y='70' transform='rotate(70 22 70)'/%3E%3Cuse href='%23f2' x='25' y='85'/%3E%3Cuse href='%23f1' x='18' y='110'/%3E%3Cuse href='%23lf' x='18' y='130' transform='rotate(135 18 130)'/%3E%3Cuse href='%23f3' x='25' y='140'/%3E%3C/svg%3E"),
        /* DERECHA (Vertical - 7% más pequeño: 37px x 139px) */
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 150' width='40' height='150'%3E%3Cdefs%3E%3Cpath id='lf' d='M0,0 C-6,-8 -6,-16 0,-20 C6,-16 6,-8 0,0' fill='%232f5412'/%3E%3Cpath id='st' d='M20,0 Q5,30 20,50 T20,100 T20,150' fill='none' stroke='%231f3f08' stroke-width='2'/%3E%3Cg id='f1'%3E%3Ccircle cx='0' cy='-6' r='5' fill='%234c1d95'/%3E%3Ccircle cx='5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-3' cy='4' r='5' fill='%234c1d95'/%3E%3Ccircle cx='-5' cy='-2' r='5' fill='%234c1d95'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f2'%3E%3Ccircle cx='0' cy='-5' r='4' fill='%236d28d9'/%3E%3Ccircle cx='4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-2' cy='3' r='4' fill='%236d28d9'/%3E%3Ccircle cx='-4' cy='-1' r='4' fill='%236d28d9'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3Cg id='f3'%3E%3Ccircle cx='0' cy='-4' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-2' cy='2' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='-3' cy='-1' r='3.5' fill='%238b5cf6'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ca8a04'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23st'/%3E%3Cuse href='%23lf' x='20' y='20' transform='rotate(120 20 20)'/%3E%3Cuse href='%23f1' x='15' y='35'/%3E%3Cuse href='%23f3' x='10' y='50'/%3E%3Cuse href='%23lf' x='22' y='70' transform='rotate(70 22 70)'/%3E%3Cuse href='%23f2' x='85' y='25'/%3E%3Cuse href='%23f1' x='18' y='110'/%3E%3Cuse href='%23lf' x='18' y='130' transform='rotate(135 18 130)'/%3E%3Cuse href='%23f3' x='25' y='140'/%3E%3C/svg%3E");
    background-size: 139px 37px, 139px 37px, 37px 139px, 37px 139px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top left, bottom left, top left, top right;
}

/* Fondo estelar Pléyades (M45) */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.34 !important; /* Opacado al 34% — experimento de la autora */
    background-image: 
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1280px-Pleiades_large.jpg"),
        url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Pleiades_%28M45%29.jpg/1280px-Pleiades_%28M45%29.jpg");
    background-size: 100% auto, 100% auto;
    background-position: center top, center 1200px;
    background-repeat: repeat-y, repeat-y;
}

body {
    font-family: 'EB Garamond', Georgia, serif;
    background-color: var(--bg-absolute);
    color: var(--gold-primary);
    font-size: 16px; /* Exactamente 16px sin decimales para máxima legibilidad y nitidez */
    line-height: 1.85;
    padding: 24px; /* Deja el hueco exacto y proporcionado al nuevo grosor de la enredadera */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    z-index: 20; /* Eleva el cuerpo sobre el borde fijo */
}

/* ================================================================================
   CABECERA DEL BLOG
   ================================================================================ */
.site-header {
    text-align: center;
    padding: 1.5rem 1rem 0.8rem; /* Reducido para móviles y escritorio */
    position: relative;
    z-index: 40;
}

.header-content {
    container-type: inline-size;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-title {
    font-family: 'Allura', cursive;
    font-size: clamp(1.85rem, 7.5vw, 3.2rem); /* Escala de forma fluida de móvil a PC */
    font-weight: 400;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin-bottom: 0.2rem;
    white-space: normal; /* Permite salto de línea si la pantalla es extremadamente estrecha */
    max-width: 100%;
    text-align: center;
}

.site-title a {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

.site-description {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.7rem, 2vw, 0.8rem); /* Fluido */
    letter-spacing: 0.12em; /* Reducido ligeramente para pantallas pequeñas */
    text-transform: uppercase;
    color: var(--gold-primary);
    opacity: 0.85;
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: center;
    white-space: normal;
}

.header-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.62rem, 1.8vw, 0.72rem); /* Fluido */
    letter-spacing: 0.06em; /* Reducido ligeramente para pantallas pequeñas */
    text-transform: uppercase;
    color: var(--gold-bright);
    opacity: 0.88;
    margin-top: 0;
    font-weight: 300;
    width: 100%;
    text-align: center;
    white-space: normal;
}

/* ================================================================================
   BARRA DE NAVEGACIÓN STICKY
   ================================================================================ */
.site-nav {
    background-color: #c8bae8;
    position: sticky;
    top: 28px;
    z-index: 100;
    border-bottom: 2px solid var(--text-panel);
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
}

.site-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    max-width: 1150px;
    margin: 0 auto;
    align-items: center;
    padding: 0.2rem 0.5rem;
}

.site-nav ul li {
    display: flex;
    align-items: center;
}

.site-nav ul li a {
    display: block;
    padding: 0.45rem 0.3rem; /* Reducido para evitar solapamiento con el botón H */
    color: var(--text-panel);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.25s ease;
    border-bottom: 2px solid transparent;
}

.site-nav ul li:not(:last-child)::after {
    content: "|";
    color: var(--text-panel);
    opacity: 0.4;
    margin-left: 0.2rem; /* Reducido para ahorrar espacio */
    margin-right: 0.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    pointer-events: none;
}

.site-nav ul li a:hover,
.site-nav ul li.current-menu-item > a {
    color: var(--gold-muted);
    border-bottom-color: var(--text-panel);
}

/* ================================================================================
   CONTENEDOR PRINCIPAL
   ================================================================================ */
.site-content {
    max-width: 760px; /* Limitado al ancho de navegación móvil en PC */
    margin: 0.5rem auto 3rem auto; /* Reducido de 1.8rem para acortar distancia con el menú */
    padding: 0; /* Sin padding lateral: los paneles llegan hasta el borde interior de la enredadera */
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 40;
}

/* ================================================================================
   TÍTULOS DE SECCIÓN (SOBRE EL FONDO — EN PAN DE ORO)
   ================================================================================ */
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem; /* Tamaño fijo unificado móvil */
    font-weight: 600;
    color: var(--gold-bright);
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-gold);
    text-shadow: 0 2px 10px rgba(243,229,171,0.12);
}

/* Contenedor de paginación integrada en el título */
.section-header-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-gold);
}

.section-header-pagination .section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.btn-nav-gold-arrow {
    background: transparent;
    border: none;
    color: var(--gold-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 0.5rem;
}

.btn-nav-gold-arrow:hover:not(:disabled) {
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(229,193,88,0.4);
    transform: scale(1.1);
}

.btn-nav-gold-arrow:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.subheading-muestra {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--gold-primary);
    margin: 3.2rem 0 1.6rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(229,193,88,0.4);
    text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

/* ================================================================================
   REJILLA DE CUATRO COLUMNAS (PC) / DOS COLUMNAS (MÓVIL)
   ================================================================================ */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem; /* Reducido a la mitad del original */
    margin-bottom: 1.25rem; /* Reducido a la mitad del original */
}

/* ================================================================================
   TARJETA DE ARTÍCULO / PANEL  (4 columnas → proporción compacta)
   ================================================================================ */
.article-card {
    background-color: var(--panel-bone);
    border: 1px solid var(--border-bone);
    border-radius: 8px;
    padding: 0;                         /* Sin padding externo: imagen llega al borde */
    box-shadow: var(--shadow-elevated);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.92), 0 8px 28px rgba(0,0,0,0.72);
}

/* Enlace que envuelve la imagen */
.article-card-image-link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

/* Imagen: ratio 16:9 en cuarteto → proporciones menos altas */
.article-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--panel-inner);
    position: relative;
    overflow: hidden;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.35s ease;
}

.article-card:hover .article-card-image img {
    transform: scale(1.04);
}

/* Zona de texto de la tarjeta */
.article-card-content {
    padding: 0.9rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.3rem;
}

/* Título de la tarjeta — Cormorant, tamaño ajustado al cuarteto */
.card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem; /* Tamaño fijo adaptado a la versión móvil */
    font-weight: 700;
    color: var(--text-panel);
    line-height: 1.25;
    margin: 0;
}

.card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-title a:hover {
    color: var(--primary-panel);
}

/* Resumen-gancho de la tarjeta — Inter, legible en cuarteto */
.card-hook {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem; /* Tamaño fijo adaptado a la versión móvil */
    line-height: 1.45;
    color: var(--text-panel);
    opacity: 0.82;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Compatibilidad con el antiguo .article-header h3 */
.article-header h3,
.article-card h2.entry-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 1.1vw, 1.25rem);
    font-weight: 700;
    color: var(--text-panel);
    line-height: 1.25;
    margin-bottom: 0.3rem;
}

.article-header h3 a,
.article-card h2.entry-title a {
    color: inherit;
    text-decoration: none;
}

.article-header h3 a:hover,
.article-card h2.entry-title a:hover {
    color: var(--primary-panel);
}

/* ================================================================================
   ETIQUETAS / TAGS
   ================================================================================ */
.tags-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.etiqueta-tag,
.tag-link {
    background: rgba(30, 37, 66, 0.08);
    color: var(--text-panel);
    border: 1px solid rgba(30, 37, 66, 0.2);
    border-radius: 20px;
    padding: 0.18rem 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
}

.etiqueta-tag:hover,
.tag-link:hover {
    background: var(--text-panel);
    color: var(--gold-bright);
    border-color: var(--text-panel);
}

/* ================================================================================
   EXTRACTO / ÍNCIPIT  (contexto artículo individual o página de archivo)
   ================================================================================ */
.incipit,
.incipit p,
.entry-summary {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-panel);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    margin-bottom: 1rem;
}

/* Tipografía del contenido editorial (artículos individuales, páginas) */
.entry-content p,
.pub-desc,
.pub-item p,
.academic-article p {
    font-family: 'EB Garamond', serif;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--text-panel);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    margin-bottom: 1.2rem;
}

.incipit {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.incipit p {
    margin-bottom: 0;
}

.incipit a {
    color: var(--text-panel);
    font-weight: 700;
    text-decoration: underline;
}

/* Encabezados dentro del extracto: misma escala que el párrafo */
.incipit h1, .incipit h2, .incipit h3,
.incipit h4, .incipit h5, .incipit h6 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--text-panel);
    margin: 0 0 0.2rem 0;
    padding: 0;
    border: none;
    text-shadow: none;
    text-align: left;
}

.incipit a:hover {
    color: var(--primary-panel-bright);
}

/* ================================================================================
   BOTONES
   ================================================================================ */
.btn-leer-mas {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--text-panel);
    color: var(--text-panel);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.22s ease;
    margin-top: 0.5rem;
}

.btn-leer-mas:hover {
    background: var(--text-panel);
    color: var(--gold-bright) !important;
}

.link-sigue-leyendo {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--text-panel);
    text-decoration: none;
    transition: opacity 0.2s ease;
    margin-top: 0.2rem;
}
.link-sigue-leyendo:hover {
    opacity: 0.65;
}

/* ================================================================================
   CUADRO DE GANCHO DESTACADO (PULLQUOTE INTERCALADO POR IA)
   ================================================================================ */
.cuadro-gancho {
    background-color: var(--panel-inner);
    border-left: 4px solid var(--gold-muted);
    border-radius: 4px;
    padding: 1.1rem 1.4rem;
    margin: 1.8rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.cuadro-gancho p,
.cuadro-gancho strong {
    font-family: 'EB Garamond', serif;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--text-panel);
    font-weight: 700;
    margin: 0;
    text-align: left;
}

/* ================================================================================
   PANEL CENTRAL DE NOVEDADES (10 ÚLTIMOS ARTÍCULOS AÑADIDOS)
   ================================================================================ */
.novedades-panel {
    background-color: var(--panel-bone);
    border: 1px solid var(--border-bone);
    padding: 1rem 1.5rem; /* Reducido para ahorrar espacio vertical */
    margin: 0.4rem auto 1.25rem auto; /* Margen vertical reducido a la mitad */
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    position: relative;
    color: var(--text-panel) !important;
}

.novedades-header {
    text-align: center;
    margin-bottom: 0.8rem; /* Reducido al mínimo estético */
    border-bottom: 1px solid var(--border-bone);
    padding-bottom: 0.4rem; /* Reducido */
}

.novedades-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem; /* Letra más pequeña para no ser invasiva */
    color: var(--text-panel) !important;
    font-weight: 700;
    margin-bottom: 0;
}

.novedades-header p {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--primary-panel) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.novedades-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem; /* Reducido a la mitad del original */
}

@media (max-width: 900px) {
    .novedades-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.novedad-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.85rem;
    background-color: var(--panel-inner);
    border-left: 3px solid var(--primary-panel);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    transition: all 0.22s ease;
    height: 100%;          /* Iguala alturas en el grid */
    box-sizing: border-box;
}

.novedad-item:hover {
    background-color: var(--primary-panel);
    transform: translateY(-3px);
}

.novedad-item:hover .novedad-titulo,
.novedad-item:hover .novedad-resumen,
.novedad-item:hover .novedad-tag {
    color: var(--panel-bone) !important;
    opacity: 1;
}

/* novedad-info ocupa todo el alto del panel y distribuye hijos en columna */
.novedad-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Título del panel de novedades — Cormorant, clamp para 4 columnas */
.novedad-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.88rem, 1vw, 1.05rem);
    font-weight: 700;
    color: var(--text-panel) !important;
    line-height: 1.2;
    margin: 0 0 0.2rem 0;
    display: block;
}

/* Resumen-gancho del panel de novedades — Inter compacto */
.novedad-resumen {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.68rem, 0.78vw, 0.8rem);
    color: var(--text-panel);
    opacity: 0.82;
    line-height: 1.38;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Etiqueta de categoría — anclada al fondo del panel con margin-top: auto */
.novedad-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    color: var(--primary-panel) !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: auto;        /* empuja la etiqueta al fondo del flex */
    padding-top: 0.45rem;
    display: block;
    transition: color 0.22s ease;
}

/* ================================================================================
   PANEL DE ARTÍCULO ACADÉMICO (single.php / archive.php)
   ================================================================================ */
.academic-article {
    background-color: var(--panel-bone);
    border: 1px solid var(--border-bone);
    border-radius: 10px;
    padding: 1.4rem 1.2rem; /* Uniforme móvil */
    box-shadow: var(--shadow-elevated);
    margin-bottom: 1.25rem; /* Reducido a la mitad del original */
}

.academic-article h1.entry-title,
.academic-article h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem; /* Tamaño fijo adaptado a móvil */
    font-weight: 700;
    color: var(--text-panel);
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.entry-content {
    font-family: 'EB Garamond', serif;
    color: var(--text-panel);
}

/* Imágenes dentro del contenido del artículo: siempre 100% y centradas */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.8rem auto;
    border-radius: 6px;
    border: 1px solid var(--border-bone);
    box-shadow: 0 4px 18px rgba(0,0,0,0.38);
}

/* Imagen destacada al inicio del artículo individual */
.single-featured-image {
    width: 100%;
    margin-bottom: 2.2rem;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border-bone);
    box-shadow: 0 6px 28px rgba(0,0,0,0.5);
    /* Ratio 16:9 para la imagen principal del artículo */
    aspect-ratio: 16 / 9;
    position: relative;
    background: var(--panel-inner);
}

.single-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* ================================================================================
   PÁGINA DE ARCHIVO (FILTRADO POR TAG / CATEGORÍA)
   ================================================================================ */
.archive-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-bone);
}

.archive-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-panel);
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.archive-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-panel);
}

.archive-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-panel-secondary);
    margin-top: 0.2rem;
}



/* ================================================================================
   PIE DE PÁGINA
   ================================================================================ */
.site-footer {
    background-color: rgba(38, 47, 85, 0.3); /* 70% de transparencia (30% de opacidad) */
    border-top: 1px solid var(--border-gold);
    text-align: center;
    padding: 1.125rem 1.5rem;
    margin-top: 0;
    margin-bottom: 28px;
    font-family: 'Inter', sans-serif;
    font-size: 0.63rem;
    font-style: italic;
    color: var(--gold-bright);
    position: relative;
    z-index: 30;
    max-width: 760px; /* Limitado al ancho de navegación móvil en PC */
    margin-left: auto;
    margin-right: auto;
}

.site-footer a {
    color: var(--gold-primary);
    text-decoration: none;
    border: 1px solid var(--gold-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    margin-top: 0.6rem;
    display: inline-block;
    font-size: 0.7rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.site-footer a:hover { opacity: 1; }

.site-footer strong,
.site-footer span,
.site-footer p,
.site-footer a {
    color: var(--gold-bright) !important;
    font-style: italic !important;
}

.site-footer .privacy-policy-link {
    border: none !important;
    padding: 0 !important;
    font-size: 0.62rem !important;
    text-decoration: underline !important;
    opacity: 0.55;
    display: inline !important;
    margin: 0 !important;
    transition: opacity 0.2s;
}

.site-footer .privacy-policy-link:hover {
    opacity: 0.95 !important;
}

/* BOTÓN DISCRETO Y ARISTOCRÁTICO DE PERSONALIZACIÓN EN EL PIE DE PÁGINA */
.btn-footer-settings {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--gold-bright) !important;
    border: 1px solid var(--border-gold);
    padding: 0.34rem 0.82rem;
    border-radius: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.555rem;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    margin-top: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-footer-settings:hover {
    background: var(--gold-gradient) !important;
    color: var(--text-panel) !important;
    border-color: var(--gold-bright);
    box-shadow: 0 4px 14px rgba(243, 229, 171, 0.25);
}

/* ================================================================================
   RESPONSIVE — DOS COLUMNAS EN MÓVIL / CUATRO EN PC
   ================================================================================ */
@media (max-width: 900px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Eliminados los overrides de tamaño y padding ya que son uniformes y fijos */
}

@media (max-width: 540px) {
    body { border-width: 12px; outline-offset: -16px; }
    /* Eliminado el padding override para .article-card y .section-title */
}

@media (max-width: 768px) {
    .site-nav-inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
        justify-content: center !important;
        min-height: 38px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    .site-nav ul {
        padding: 0.35rem 0 !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        width: auto !important;
        flex: 0 1 auto !important;
        display: flex !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    .site-nav ul li {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .site-nav ul li a {
        padding: 0.35rem 0.05rem !important;
        font-size: clamp(0.56rem, 2.7vw, 0.7rem) !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        border-bottom: none !important;
    }
    .site-nav ul li:not(:last-child)::after {
        content: "|" !important;
        display: inline-block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 0.12rem !important;
        opacity: 1 !important;
        color: #1e3a5f !important; /* Azul oscuro elegante */
        font-size: 0.6rem !important;
    }
    .tine-sitemap-trigger {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        padding: 5px !important;
        display: flex !important;
        z-index: 999 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
}

/* ================================================================================
   PAGINACIÓN ACADÉMICA
   ================================================================================ */
.navigation-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
}

.navigation-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    height: 2.3rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    color: var(--gold-bright) !important;
    background: rgba(12, 30, 58, 0.45);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.navigation-pagination .page-numbers:hover,
.navigation-pagination .page-numbers.current {
    background: var(--gold-gradient) !important;
    color: var(--text-panel) !important;
    border-color: var(--gold-bright);
    box-shadow: 0 4px 12px rgba(243, 229, 171, 0.2);
}

.navigation-pagination .page-numbers.dots {
    background: transparent !important;
    border-color: transparent;
    color: var(--gold-muted) !important;
    pointer-events: none;
}

/* ================================================================================
   CONTENIDO DINÁMICO EDITABLE DESDE WORDPRESS
   ================================================================================ */
.dynamic-page-content p {
    margin-bottom: 1.5rem !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 1.15rem !important;
    line-height: 1.85 !important;
    color: var(--text-panel) !important;
}

.dynamic-page-content ol, 
.dynamic-page-content ul {
    margin: 0 0 2rem 1.3rem !important;
    padding: 0 !important;
    line-height: 1.85 !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 1.15rem !important;
    color: var(--text-panel) !important;
}

.dynamic-page-content li {
    margin-bottom: 0.9rem !important;
    color: var(--text-panel) !important;
}

.dynamic-page-content strong {
    font-weight: 700 !important;
    color: var(--text-panel) !important;
}


/* ================================================================================
   MODO OSCURO (DARK MODE)
   ================================================================================ */

body.dark-mode {
    --panel-bone: #161b2e;
    --panel-inner: #0f1322;
    --border-bone: #2a3356;
    --text-panel: #e2e8f0;
    --text-panel-secondary: #94a3b8;
    --bg-nav: #161b2e;
}

body.dark-mode .site-nav {
    background-color: #1e2542;
    border-bottom-color: #395273;
}

body.dark-mode .tine-sitemap-trigger,
body.dark-mode .tine-lang-btn {
    border-color: rgba(226, 232, 240, 0.4);
}

body.dark-mode .tine-sitemap-trigger:hover,
body.dark-mode .tine-lang-btn:hover {
    background: rgba(226, 232, 240, 0.15);
}

body.dark-mode .tine-hamburger-bar {
    background: var(--text-panel);
}

body.dark-mode .site-nav ul li a {
    color: var(--text-panel);
}

body.dark-mode .site-nav ul li a:hover,
body.dark-mode .site-nav ul li.current-menu-item > a {
    color: var(--gold-primary);
    border-bottom-color: var(--gold-primary);
}

body.dark-mode .btn-leer-mas {
    border-color: var(--text-panel);
    color: var(--text-panel);
}

body.dark-mode .btn-leer-mas:hover {
    background: var(--text-panel);
    color: var(--panel-bone) !important;
}

/* ── Botón Modo Oscuro ─────────────────────────────────────────────── */
.tine-dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: transparent;
    border: 1.5px solid rgba(43, 62, 90, 0.55);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    z-index: 20;
}

.tine-dark-mode-toggle:hover {
    background: rgba(30, 37, 66, 0.15);
    border-color: var(--text-panel);
    transform: translateY(-50%) scale(1.08);
}

body.dark-mode .tine-dark-mode-toggle {
    border-color: rgba(226, 232, 240, 0.4);
}

body.dark-mode .tine-dark-mode-toggle:hover {
    background: rgba(226, 232, 240, 0.15);
    border-color: var(--text-panel);
}

/* Si existe el botón de idioma (tine-lang-wrapper), mover el modo oscuro a su lado */
.tine-lang-wrapper ~ .tine-dark-mode-toggle {
    left: 54px !important;
}


/* ================================================================================
   BUSCADOR EN EL FOOTER
   ================================================================================ */
.footer-search-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1.8rem auto;
    display: flex;
    justify-content: center;
}

.footer-search-form {
    display: flex;
    width: 100%;
    background: rgba(253, 251, 247, 0.1);
    border: 1.5px solid rgba(229, 193, 88, 0.4);
    border-radius: 30px;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-search-form:focus-within {
    background: rgba(253, 251, 247, 0.15);
    border-color: var(--gold-primary);
}

.footer-search-field {
    flex: 1;
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: none;
    color: var(--gold-bright);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    outline: none;
}

.footer-search-field::placeholder {
    color: rgba(229, 193, 88, 0.5);
}

.footer-search-submit {
    background: transparent;
    border: none;
    color: var(--gold-primary);
    padding: 0 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.footer-search-submit:hover {
    transform: scale(1.1);
}