@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
/*
Theme Name: Brutal - Author Identity
Theme URI: https://angelocampione.com
Author: Angelo Campione
Description: Tema estéril de autor basado en el minimalismo geométrico de la Bauhaus y la sobriedad ejecutiva de The New York Times.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: brutal
*/

/* ==========================================================================
   1. VARIABLES GLOBALES DE DISEÑO (ADN BRUTALISTA)
   ========================================================================== */
:root {
    /* Paleta de Colores Restrictiva */
    --color-fondo: #1c1e1f;       /* Gris cemento/carbón mate oscuro */
    --color-texto: #e3e3e3;       /* Blanco roto / Gris tiza claro */
    --color-acento: #c5a059;      /* Dorado latón para líneas de 1px */
    --color-alerta: #8b2626;      /* Rojo óxido para contrastes quirúrgicos */

    /* Tipografías de Alta Costura */
    --fuente-titulos: 'Playfair Display', 'Georgia', serif;
    --fuente-cuerpo: 'Inter', sans-serif;

    /* PALANCAS DE CONTROL FUTURO PARA EL MENÚ (Modificables en Kate) */
    --menu-fondo: rgba(28, 30, 31, 1.00);  /* Rojo óxido con transparencia sutil premium */
    --menu-borde: var(--color-fondo);     /* Dorado Latón 1px */
    --menu-texto: #ffffff;                 /* Blanco Puro */
}

/* ==========================================================================
   2. REGLAS BASE DE EVASIÓN DE ESTILOS NATIVOS
   ========================================================================== */
body {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    font-family: var(--fuente-cuerpo);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ==========================================================================
   3. MAQUETACIÓN GEOMÉTRICA DEL HOMEPAGE (EL CLON PURO CORREGIDO)
   ========================================================================== */
/* El Contenedor Principal (Pantalla completa) */
.hero-homepage {
    display: flex;
    justify-content: flex-end;
    align-items: center !important;
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(28, 29, 31, 0.00), rgba(28, 29, 31, 0.00)), url('background_01.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    padding: 6rem 5% 5% 5% !important;
    box-sizing: border-box;
}

.columna-derecha-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    /* Dejamos el chasis flexible pero con un tope mínimo para que no asfixie las cajas */
    height: 740px !important;
    min-height: 740px !important;
    max-height: 740px !important;
    justify-content: flex-start !important;
}

.bloque-autor-derecha {
    background-color: transparent !important;
    border: 1px solid var(--color-acento);

    /* CONFIGURACIÓN FLEXIBLE SANA: Se adapta al contenido sin recortar nada */
    width: 100% !important;
    height: 540px !important;         /* Cambia a auto para que el botón rojo nunca se quede afuera */
    min-height: 540px !important;    /* Altura mínima garantizada para albergar todo el texto y campos */
    max-height: 540px !important;
    padding: 3rem 2.5rem !important;
    box-sizing: border-box;
}

/* SINTONÍA TIPOGRÁFICA INTERNA CONTRA DESBORDES */
.titulo-autor {
    font-family: var(--fuente-titulos);
    font-size: 2.15rem !important;    /* Reducido de 2.5rem a 2.15rem para ganar una línea de aire */
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0.8rem;
    color: #ffffff;
}

.extracto-autor {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem !important;    /* Ajustado sutilmente */
    color: var(--color-texto);
    margin-top: 0;
    margin-bottom: 1.8rem !important;
}

/* ==========================================================================
   4. FORMULARIO BRUTALISTA SEGURO (FUERZA DE ENCAJE AL 100%)
   ========================================================================== */
.formulario-brutal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.campo-grupo {
    width: 100%;
    box-sizing: border-box;
}

.entrada-texto {
    display: block;
    width: 100% !important;
    padding: 0.8rem 1.2rem !important; /* Compactamos sutilmente el relleno para ganar aire vertical */
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(227, 227, 227, 0.25);
    color: #ffffff;
    font-family: var(--fuente-cuerpo);
    font-size: 1rem !important;
    box-sizing: border-box !important;
}

.entrada-texto:focus {
    outline: none;
    border-color: var(--color-acento);         /* Iluminación dorada al interactuar */
    background-color: rgba(255, 255, 255, 0.05);
}

/* Corrección de dimensiones para el Botón Ancho */
.boton-brutal-ancho {
    display: block !important;
    width: 100% !important;
    background-color: var(--color-alerta) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-alerta) !important;
    font-family: var(--fuente-cuerpo) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 1rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin-top: 0.5rem !important;
}

.boton-brutal-ancho:hover {
    background-color: #a12c2c;                 /* Reacción sutil al posar el cursor */
}

/* ==========================================================================
   5. BARRA DE MENÚ SUPERIOR FLOTANTE (ESTILO CEÑIDO Y TRANSLÚCIDO)
   ========================================================================== */
.barra-superior-brutal {
    position: fixed;
    top: 2.5rem;
    left: 50%;                     /* Eje de centrado absoluto */
    transform: translateX(-50%);   /* Truco de ingeniería para centrar elementos fijos */
    width: max-content;            /* La caja se ciñe estrictamente al tamaño del texto */
    max-width: 90%;                /* Blindaje elástico para pantallas móviles */
    background-color: var(--menu-fondo);
    border: 0px solid var(--menu-borde);
    padding: 0.8rem 2.5rem;        /* Acolchado horizontal elegante */
    z-index: 9999;
    box-sizing: border-box;
}

.menu-navegacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
}

.enlace-menu {
    color: var(--menu-texto) !important; /* Fuerza a todas las opciones a ser blancas */
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 0.90rem;            /* Un toque más compacto y elegante */
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: opacity 0.2s ease;
}

/* Forzar el color Dorado Latón únicamente en la pestaña donde está ubicado el usuario */
.enlace-menu.activo {
    color: var(--color-acento) !important;
}

.enlace-menu:hover {
    opacity: 0.7;                  /* Opacidad sutil al pasar el cursor */
}

/* ==========================================================================
   6. GEOMETRÍA DEL CARRUSEL DINÁMICO DE AUTOR (3 CAJAS FIJAS EN DOS COLUMNAS)
   ========================================================================== */
.seccion-carrusel-brutal {
    background-color: #121314;
    border-top: 1px solid var(--color-acento);
    padding: 5rem 5%;               /* Más espacio para desahogar la base */
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.contenedor-carrusel-interno {
    display: flex;
    gap: 2rem;                       /* GAP fijo entre tarjetas (32px) */
    width: max-content;
}

.tarjeta-carrusel {
    background-color: var(--color-fondo);
    border: 1px solid rgba(227, 227, 227, 0.1);
    padding: 2.5rem;

    /* CÁLCULO DE PRECISIÓN: Ocupa el 100% del ancho visible dividiéndolo entre 3 y restando los 2 GAPS de separación */
    width: calc((100vw - 10% - 4rem) / 3) !important;
    flex-shrink: 0;                  /* Blindaje total: Prohíbe al navegador encoger las cajas */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tarjeta-carrusel.destacado {
    border-color: var(--color-acento);
}

.etiqueta-categoria {
    font-family: var(--fuente-cuerpo);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-acento);
    font-weight: 700;
    margin-bottom: 0.8rem;
    display: block;
}

.etiqueta-categoria.especial {
    color: var(--color-alerta);
}

.titulo-tarjeta {
    font-family: var(--fuente-cuerpo); /* Cambia a Sans para máxima pureza en bloque */
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    height: 3.5rem !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* INYECCIÓN DE LA GEOMETRÍA DE DOS COLUMNAS INTERNAS */
.cuerpo-tarjeta-dos-columnas {
    display: flex;
    gap: 1.5rem;                     /* Espacio entre la miniatura de la izquierda y el texto de la derecha */
    align-items: flex-start;
    width: 100%;
}

.miniatura-col {
    width: 35%;                      /* Proporción de la columna de la imagen */
    flex-shrink: 0;                  /* Evita que la columna de la imagen se encoja */
}

/* El bloque estéril gris que guardará la posición de las fotos webp */
.esqueleto-imagen {
    width: 100%;
    aspect-ratio: 1 / 1;             /* Caja perfectamente cuadrada Bauhaus */
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(227, 227, 227, 0.1);
}

.contenido-col {
    width: 65%;                      /* Proporción de la columna del texto */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sinopsis-tarjeta {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: rgba(227, 227, 227, 0.7);
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.enlace-tarjeta {
    font-family: var(--fuente-cuerpo);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.enlace-tarjeta:hover {
    color: var(--color-acento);
}

/* ==========================================================================
   7. PIE DE PÁGINA QUIRÚRGICO (GEOMETRÍA Y TRATAMIENTO DE ICONOS)
   ========================================================================== */
.pie-pagina-brutal {
    background-color: var(--color-fondo);
    border-top: 1px solid var(--color-acento); /* Línea dorada divisoria de 1px */
    padding: 2rem 5%;
    width: 100%;
    box-sizing: border-box;
}

.footer-contenido {
    display: flex;
    flex-direction: column;   /* Apila los iconos sobre el texto */
    justify-content: center;
    align-items: center;
    gap: 1.5rem;              /* Distancia perfecta entre la firma y los iconos */
    width: 100%;
}

.copyright-autor {
    font-family: var(--fuente-cuerpo);
    font-size: 0.75rem;       /* Más pequeño y discreto */
    text-transform: uppercase;
    letter-spacing: 2px;      /* Estilo sello de autor */
    color: rgba(227, 227, 227, 0.35);
    margin: 0;
}

.redes-sociales-footer {
    display: flex;
    gap: 1.5rem;                   /* Separación geométrica limpia entre iconos */
    align-items: center;
}

.enlace-social {
    display: inline-block;
    transition: transform 0.2s ease;
}

.svg-icono {
    width: 20px;                   /* Tamaño exacto y discreto de alta costura */
    height: 20px;
    fill: var(--color-texto);      /* Los iconos adoptan el color gris tiza por defecto */
    transition: fill 0.2s ease;
}

/* Comportamiento al pasar el cursor (Hover) */
.enlace-social:hover .svg-icono {
    fill: var(--color-acento);     /* Mutación instantánea a Dorado Latón al interactuar */
}

.enlace-social:hover {
    transform: translateY(-2px);   /* Leve ebanistería visual hacia arriba */
}

/* ==========================================================================
   8. CUADRANTE DE MÁXIMAS POR DISOLUCIÓN (BLOQUE DERECHO)
   ========================================================================== */
.caja-maximas-brutal {
    margin-top: 2.5rem;               /* Separación geométrica respecto al botón rojo superior */
    border-top: 1px solid rgba(227, 227, 227, 0.1); /* Fina línea divisoria interna */
    padding-top: 2rem;
    min-height: 160px;                /* Altura mínima blindada para evitar que la caja brinque */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.texto-maxima {
    font-family: var(--fuente-titulos); /* Elegancia de tipografía Serif curva */
    font-size: 1.15rem;
    font-style: italic;
    text-shadow: 0.5px 0.5px 0px #1c1e1f, -0.5px -0.5px 0px #1c1e1f, 0.5px -0.5px 0px #1c1e1f, -0.5px 0.5px 0px #1c1e1f !important;
    color: #ffffff;                   /* Blanco Puro */
    margin: 0 0 1rem 0;
    line-height: 1.5;
    opacity: 0;                       /* Inicializado en 0 para el primer Fade-in */
    transition: opacity 0.6s ease-in-out; /* Suavidad radical en la disolución */
}

.autor-maxima {
    font-family: var(--fuente-cuerpo);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0.5px 0.5px 0px #1c1e1f, -0.5px -0.5px 0px #1c1e1f, 0.5px -0.5px 0px #1c1e1f, -0.5px 0.5px 0px #1c1e1f !important;
    color: var(--color-acento);       /* Dorado Latón de alta costura */
    font-style: normal;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

/* ==========================================================================
   9. LIENZO DE LECTURA ASIMÉTRICO (PROPORCIÓN COMPLETA 80% / 20% CORREGIDA)
   ========================================================================== */
.contenedor-articulo-master {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    background-color: var(--color-fondo) !important;
    padding-top: 5rem !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* COLUMNA IZQUIERDA: Alineación matemática con la línea dorada */
.columna-articulo-80 {
    width: 80% !important;
    padding: 0 4% 4rem 5% !important; /* Mantiene los márgenes limpios */
    border-right: 1px solid rgba(227, 227, 227, 0.1) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.encabezado-articulo {
    width: 100% !important;
    margin-bottom: 2rem !important; /* Espacio limpio antes de la línea dorada */
    display: block !important;
}

.titular-principal {
    font-family: var(--fuente-titulos) !important;
    font-size: 3.4rem !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;
    line-height: 1.15 !important;
}

.bloque-subtitulo-seguro {
    width: 100% !important;
    display: block !important;
    margin-top: 0.5rem !important;
}

/* SUBTÍTULO DINÁMICO MONUMENTAL RECALIBRADO AL MILÍMETRO (SIN ACENTO) */
.subtitulo-articulo {
    font-family: var(--fuente-titulos) !important; /* Fuerza la elegante Serif curva */
    font-size: 2.00rem !important;                /* Tamaño masivo solicitado */
    font-weight: 700 !important;
    color: var(--color-texto) !important;         /* Preserva el Dorado Latón */
    line-height: 1.15 !important;                 /* Aire exacto para dos renglones */
    margin-top: 1.5rem !important;
    margin-bottom: 3rem !important;
    display: block !important;
    width: 100% !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* LÍNEA MULTIMEDIA QUIRÚRGICA: Determina el ancho maestro */
.linea-multimedia-brutal {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    border-top: 1px solid var(--color-acento) !important;
    border-bottom: 1px solid rgba(227, 227, 227, 0.1) !important;
    padding: 0.8rem 0 !important;
    margin-bottom: 3.5rem !important;
    width: 100% !important;
}

.meta-item.fecha {
    color: var(--color-acento) !important;
    font-weight: 700;
}

.meta-item.lectura {
    color: var(--color-acento) !important;
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.85rem !important;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --- COMPARTIR DESPLEGABLE BAUHAUS --- */
.contenedor-compartir-hover {
    position: relative !important;
    display: inline-block !important;
}

.boton-compartir-bloque {
    background-color: var(--color-acento) !important;
    border: 1px solid var(--color-acento) !important;
    color: #000000 !important;
    font-family: var(--fuente-cuerpo) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 1.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.boton-compartir-bloque:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.menu-compartir-flotante {
    display: none !important; /* Oculto por defecto */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #121314 !important; /* Gris denso para contraste */
    border: 1px solid var(--color-acento) !important;
    padding: 1rem !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    width: max-content !important;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5) !important;
}

.enlace-compartir-mini {
    color: rgba(227, 227, 227, 0.6) !important;
    text-decoration: none !important;
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    transition: color 0.1s ease !important;
}

.enlace-compartir-mini:hover {
    color: var(--color-acento) !important;
}

/* El gatillo HOVER que materializa el menú */
.contenedor-compartir-hover:hover .menu-compartir-flotante {
    display: flex !important;
}

.boton-audio-brutal {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background-color: transparent !important;
    border: 1px solid var(--color-alerta) !important;
    color: #ffffff !important;
    font-family: var(--fuente-cuerpo) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 1rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    margin-left: auto !important;
}

.svg-audio {
    width: 16px;
    height: 16px;
    fill: var(--color-alerta);
}

/* ==========================================================================
   10. CONTROL DE ANCHO EXACTO Y FUERZA DE BASELINE EN EL FOOTER
   ========================================================================== */
.cuerpo-texto-editorial {
    width: 100% !important;            /* Fuerza al texto a ocupar el 100% de la columna izquierda */
    max-width: 100% !important;        /* Destruye el límite antiguo para expandirse hasta la línea dorada */
    box-sizing: border-box !important;
}

.single-post p,
.single p,
.cuerpo-texto-editorial p {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.30 !important;         /* Paridad Múltiple 1.30 de su OnlyOffice */
    margin-top: 0 !important;
    margin-bottom: 1.4rem !important;
    font-size: 1.22rem !important;
    color: var(--color-texto) !important;
    font-family: var(--fuente-titulos) !important;
    width: 100% !important;            /* Garantiza que cada párrafo se estire por completo */
}

.cuerpo-texto-editorial ul,
.cuerpo-texto-editorial ol {
    margin-top: 0.5rem !important;
    margin-bottom: 1.8rem !important;
    padding-left: 2rem !important;
}

.cuerpo-texto-editorial li {
    font-family: var(--fuente-titulos) !important;
    font-size: 1.22rem !important;
    color: var(--color-texto) !important;
    line-height: 1.40 !important;
    margin-bottom: 0.8rem !important;
    text-align: justify !important;
}

/* COLUMNA LATERAL DERECHA (20% del ancho) */
.columna-lateral-20 {
    width: 20% !important;
    padding: 0 1.5rem 4rem 1.5rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.bloque-lateral-sticky {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    flex-grow: 1 !important;           /* Fuerza al contenedor a ocupar todo el alto disponible */
}

.casillero-banner-superior {
    width: 100%;
    box-sizing: border-box;
    margin-top: 2rem !important; /* Despegar del borde superior */
    margin-bottom: 2.5rem !important; /* Separación noble antes del Archivo */
}
.esqueleto-banner-reserva {
    width: 100%;
    height: 180px;
    border: 1px solid rgba(227, 227, 227, 0.15);
    background-color: rgba(255, 255, 255, 0.01);
    display: flex;
    align-items: center;
    justify-content: center;
}
.texto-reserva-banner {
    font-family: var(--fuente-cuerpo);
    font-size: 0.75rem;
    color: rgba(227, 227, 227, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ÍNDICE SERIE */
.indice-calendario-brutal {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.titulo-indice-lat {
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(197, 160, 89, 1.0) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 1.0);
    padding-bottom: 0.5rem;
}

.comandos-navegacion-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.9rem !important;
}

/* Estilo táctico para los enlaces dinámicos de WordPress */
.comandos-navegacion-vertical a {
    color: var(--color-texto) !important;
    text-decoration: none !important;
}

.comandos-navegacion-vertical a:hover {
    color: var(--color-acento) !important;
}

.titulo-indice-lat {
    font-family: var(--fuente-cuerpo);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-acento);
}

.comandos-navegacion-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.comando-link {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
}

.comando-link.actual {
    color: var(--color-acento);
    font-weight: 700;
}

/* ALINEACIÓN DE BASELINE ABSOLUTA EN LOS FOOTERS */
.sub-footer-izquierdo {
    margin-top: auto !important;       /* Empuja el menú al fondo de la lectura */
    border-top: 1px solid rgba(227, 227, 227, 0.1) !important;
    padding: 2rem 0 0 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.menu-navegacion-footer {
    display: flex;
    gap: 2.2rem;
}

.enlace-menu-foot {
    color: rgba(227, 227, 227, 0.6);
    font-family: var(--fuente-cuerpo);
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
}

.enlace-menu-foot:hover {
    color: #ffffff;
}

/* CLAVADO DE REDES EN EL BASELINE EXACTO DEL MENÚ */
.sub-footer-derecho-redes-lineal {
    margin-top: auto !important;       /* Empuja los iconos al fondo exacto del contenedor elástico */
    padding-top: 2rem !important;      /* Alineación vertical idéntica al padding del menú */
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.redes-sociales-footer-lateral-lineal {
    display: flex;
    gap: 1.8rem;
    align-items: center;
}

.enlace-social-lat {
    display: inline-block;
}

.svg-icono-lat {
    width: 22px;
    height: 22px;
    fill: rgba(227, 227, 227, 0.4);
}

.enlace-social-lat:hover
.svg-icono-lat {
    fill: var(--color-acento);
}

/* ==========================================================================
   11. BLINDAJE ELÁSTICO VERTICAL (RESPONSIVE DE 4 CUADRANTES COMPACTOS)
   ========================================================================== */
@media (max-width: 1024px) {
.contenedor-articulo-master {
    flex-direction: column !important;
    padding-top: 6rem !important;
}

.columna-articulo-80 {
    width: 100% !important;
    border-right: none !important;
    padding: 0 5% 3rem 5% !important;
}

.columna-lateral-20 {
    width: 100% !important;
    padding: 0 5% 4rem 5% !important;
}

.bloque-lateral-sticky {
    position: static !important;
    min-height: auto !important;
    gap: 3rem !important;
}

.sub-footer-izquierdo {
    margin-top: 4rem !important;
}

.sub-footer-derecho-redes-lineal {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
}
}

/* ==========================================================================
   12. MAQUETACIÓN AUTOMÁTICA DE LA BARRA LATERAL (BARRA DERECHA)
   ========================================================================== */

/* --- COMPONENTE 12.3: ARCHIVO ACORDEÓN ESTILO BAUHAUS --- */
/* --- RESTAURACIÓN DE ENCABEZADO DE MÓDULO LATERAL --- */
.titulo-modulo-lat {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--color-acento) !important; /* Recupera el Dorado Latón */
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(197, 160, 89, 1.0) !important; /* Línea tenue */
    padding-bottom: 0.5rem !important;
    display: block !important;
}

.widget-archivo-bauhaus {
    margin-bottom: 2.5rem;
    font-family: var(--fuente-cuerpo);
}

.acordeon-archivo-contenedor {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.item-acordeon-mes {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

/* El botón que simula el renglón de la tabla */
.disparador-acordeon {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0.8rem 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    text-align: left !important;
}

.disparador-acordeon .nombre-mes {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto);
    transition: color 0.2s ease;
}

.disparador-acordeon:hover .nombre-mes {
    color: var(--color-acento);
}

/* Lista Indentada de Títulos */
.contenido-acordeon-lista {
    padding-bottom: 0.8rem;
    width: 100%;
}

.lista-titulos-indentados {
    list-style: none !important;
    padding: 0 0 0 1rem !important; /* Indentación exacta Bauhaus */
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lista-titulos-indentados li a {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(227, 227, 227, 0.5) !important; /* Gris suave para jerarquía secundaria */
    text-decoration: none !important;
    line-height: 1.3 !important;
    display: block;
    transition: color 0.2s ease;
}

.lista-titulos-indentados li a:hover {
    color: var(--color-texto) !important;
}

/* Resaltar con dorado el artículo que se está leyendo en ese microsegundo */
.lista-titulos-indentados li a.link-actual-activo {
    color: var(--color-acento) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   13. NUEVA ARQUITECTURA DE PÁGINA AUTOR I (EJE CENTRAL Y TEXTO EDITORIAL)
   ========================================================================== */

/* Contenedor Maestro Centralizado */
.contenedor-autor-central {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 6rem 2rem 4rem 2rem !important;
    box-sizing: border-box !important;
    background-color: var(--color-fondo) !important;
}

/* 13.1 LIENZO CINEMATOGRÁFICO AJUSTADO (CENTRO ABSOLUTO Y ENCIERRO FIJO) */
.bloque-superior-galeria {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Centrado absoluto horizontal */
    margin-bottom: 4rem !important;
}

/* Redimensionamiento exacto: 450px de ancho por 500px de alto */
.bloque-lienzo-kenburns-central {
    position: relative !important;
    width: 100% !important;
    height: 500px !important;
    overflow: hidden !important;
}

.contenedor-diapositivas-elasticas {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.foto-kenburns {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0 !important; /* Arrancan apagadas de base */

    /* UNIFICACIÓN RÍGIDA: 90 segundos para absorber la flota completa sin solapamientos */
    animation: animeKenBurns 90s infinite linear !important;
}

/* COREOGRAFÍA DE RETARDOS EXACTOS (Sincronización pura sin interferencia de rutas) */
.foto-kenburns:nth-child(1)  { animation-delay: 0s !important; }
.foto-kenburns:nth-child(2)  { animation-delay: 6s !important; }
.foto-kenburns:nth-child(3)  { animation-delay: 12s !important; }
.foto-kenburns:nth-child(4)  { animation-delay: 18s !important; }
.foto-kenburns:nth-child(5)  { animation-delay: 24s !important; }
.foto-kenburns:nth-child(6)  { animation-delay: 30s !important; }
.foto-kenburns:nth-child(7)  { animation-delay: 36s !important; }
.foto-kenburns:nth-child(8)  { animation-delay: 42s !important; }
.foto-kenburns:nth-child(9)  { animation-delay: 48s !important; }
.foto-kenburns:nth-child(10) { animation-delay: 54s !important; }
.foto-kenburns:nth-child(11) { animation-delay: 60s !important; }
.foto-kenburns:nth-child(12) { animation-delay: 66s !important; }
.foto-kenburns:nth-child(13) { animation-delay: 72s !important; }
.foto-kenburns:nth-child(14) { animation-delay: 78s !important; }
.foto-kenburns:nth-child(15) { animation-delay: 84s !important; }

/* REGLA DE PORCENTAJES RECALCULADA PARA EVITAR ENCIMAMIENTOS */
@keyframes animeKenBurns {
    0% { opacity: 0; transform: scale(1.0); }
    1.5% { opacity: 1; } /* Entrada rápida */
    6.66% { opacity: 1; } /* Exposición estática (6.66% de 90s = 6 segundos) */
    8.16% { opacity: 0; transform: scale(1.08); } /* Salida suave con zoom cinemático */
    100% { opacity: 0; }
}

/* 13.2 BLOQUE EDITORIAL INFERIOR Y REGLA DE DOS COLUMNAS NATAL */
.bloque-inferior-manifiesto {
    width: 100% !important;
    max-width: 900px !important; /* Perfectamente alineado con el ancho del texto */
    margin: 0 auto !important;
}

.encabezado-manifiesto-central {
    margin-bottom: 3rem !important;
}

.subtitulo-tactico-central {
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: var(--color-acento) !important; /* Dorado Latón */
    display: block !important;
    margin-bottom: 1rem !important;
}

.titular-manifiesto-central {
    font-family: var(--fuente-cuerpo) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* El texto fluye en dos columnas puras */
.cuerpo-manifiesto-columnas {
    column-count: 2 !important;
    column-gap: 3.5rem !important; /* Espaciado asimétrico noble */
    column-rule: 1px solid rgba(255, 255, 255, 0.05) !important; /* Fina línea divisoria minimalista */
    width: 100% !important;
    box-sizing: border-box !important;
}

.cuerpo-manifiesto-columnas p {
    font-family: var(--fuente-titulos) !important; /* Elegante Serif */
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
    color: var(--color-texto) !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Evita que un párrafo se corte feamente a la mitad entre columnas */
.cuerpo-manifiesto-columnas p {
    break-inside: avoid-column !important;
}

/* Sub-footer Homogéneo del Baseline */
.sub-footer-autor-limpio {
    margin-top: 6rem !important;
    border-top: 1px solid rgba(227, 227, 227, 0.1) !important;
    padding-top: 2rem !important;
    display: flex !important;
    justify-content: center !important;
}

/* ==========================================================================
   CORRECCIÓN MATEMÁTICA: EL BUCLE DE TRANSICIONES ELÁSTICAS KEN BURNS
   ========================================================================== */
@keyframes animeKenBurns {
    0% {
        opacity: 0;
        transform: scale(1.0);
    }
    /* Ventana de entrada (Fundido rápido) */
    1.5% {
        opacity: 1;
    }
    /* Tiempo de exposición estático visible (6.66% de 90s ≈ 6 segundos) */
    6.66% {
        opacity: 1;
    }
    /* Ventana de salida (Fundido a negro mientras se ejecuta el zoom de alta costura) */
    8.16% {
        opacity: 0;
        transform: scale(1.08) translate(1%, 1%);
    }
    /* El resto del tiempo total de la línea de tiempo (hasta 90s), la foto duerme oculta */
    100% {
        opacity: 0;
    }
}

/* ACOPLAMIENTO DE MINIATURAS DEL CARRUSEL (Alineado y estéril) */
.imagen-miniatura-brutal {
    display: block !important;
    width: 100% !important;
    max-width: 120px !important; /* Fuerza el ancho de la columna del carrusel */
    height: 120px !important;    /* Altura rígida fija de la miniatura */
    object-fit: cover !important; /* Evita que la foto se deforme al estirarse */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 1. Forzar a que el navegador mantenga la barra de scroll siempre fija para evitar el encogimiento lateral */
html {
    overflow-y: scroll;
}

/* 2. Neutralizar variaciones de tamaño causadas por las transiciones del carrusel */
.carousel-container, .gastro-cronicas-carousel {
    box-sizing: border-box;
    overflow: hidden;
}

/* ==========================================================================
   DOMINACIÓN DE ESTILOS DE FLUENT FORMS ID 3 (ENJAULADO BRUTALISTA)
   ========================================================================== */

/* Ocultar etiquetas/labels nativas (Nombre / Correo Electrónico) para mantener el minimalismo */
.formulario-brutal .ff-el-is-required label {
    display: none !important;
}

/* Forzar ancho total en el contenedor nativo del plugin */
.formulario-brutal .fluentform,
.formulario-brutal form,
.formulario-brutal .ff-form-sharing {
    width: 100% !important;
}

/* Sometimiento de los campos de texto: Bordes rectos y transparentes */
.formulario-brutal .ff-el-form-control {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #c5a059 !important;
    border-radius: 0px !important; /* ◄ FULMINA LAS CURVAS */
    color: #ffffff !important;
    padding: 0.8rem 1rem !important;
    box-sizing: border-box !important;
    height: 45px !important;
}

/* Espaciado rígido entre contenedores de campo */
.formulario-brutal .ff-el-group {
    margin-bottom: 1.2rem !important;
}

/* Sometimiento del Botón: Bloque monolítico dorado y tipografía rígida */
.formulario-brutal button.ff-btn-submit {
    width: 100% !important;
    height: 50px !important;
    background-color: transparent !important; /* Dorado de acento del tema */
    color: #c5a059 !important; /* Texto negro para contraste brutalista */
    font-family: var(--fuente-cuerpo) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 0px !important; /* ◄ FULMINA LAS CURVAS */
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out !important;
    margin-top: 0.5rem !important;
}

/* Efecto hover estéril */
.formulario-brutal button.ff-btn-submit:hover {
    background-color: #e5bf79 !important;
}