/*   
Theme Name: Que No Te La Cuenten
Theme URI: quenotelacuenten.org
Description: Tema Oficial del Sitio Web Que No Te La Cuenten
Author: Lic. Martina Ferrari Vivas
Author URI: your-URI
Version: 1.0
Text Domain: qntlc
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap');
/* ==========================================
   1. VARIABLES Y RESET GLOBAL
=========================================== */
:root {
    /* Paleta de Colores Institucional */
    --c-bg-main: #FBF9F6;      /* Crema claro */
    --c-bg-cream: #F2EEE6;     /* Crema un poco más oscuro para contraste */
    --c-bg-dark: #111418;      /* Casi negro */
    
    --c-text-dark: #1A1C20;    /* Texto principal */
    --c-text-light: #6B6E75;   /* Texto secundario */
    --c-text-muted: #9A9DA5;   /* Metadatos */
    
    --c-accent-red: #962424;   /* Rojo carmesí profundo */
    --c-accent-red-dark: #6B1515;
    --c-accent-gold: #C5A059;  /* Oro envejecido */
    --c-accent-gold-light: #DCC28D;

    /* Tipografías */
    --f-heading: 'Cormorant Garamond', serif;
    --f-body: 'Montserrat', sans-serif;
}

.hero-banner-qntlc {
    padding-top:60px;
}

/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--f-body);
    background-color: var(--c-bg-main);
    color: var(--c-text-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* Evita scroll horizontal por animaciones */
}

/* Tipografía General */
h1, h2, h3, h4 { font-family: var(--f-heading); color: var(--c-text-dark); line-height: 1.2; font-weight: 700;}
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
p { margin-bottom: 1.5em; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* Utilidades */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; }
.text-center { text-align: center; }
.bg-dark { background-color: var(--c-bg-dark); color: #fff; }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark p { color: rgba(255,255,255,0.8); }
.bg-cream { background-color: var(--c-bg-cream); }
.section-heading { margin-bottom: 60px; }
.separator-gold { width: 80px; height: 2px; background-color: var(--c-accent-gold); margin: 20px auto 0; }
.lead-text { font-size: 1.25rem; font-weight: 500; color: var(--c-accent-red); }


/* ==========================================
   2. COMPONENTES (Botones, Etiquetas)
=========================================== */
.btn {
    display: inline-block;
    padding: 14px 36px;
    font-family: var(--f-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--c-accent-red);
    color: #fff;
}
.btn-primary:hover { background-color: var(--c-accent-red-dark); transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(150, 36, 36, 0.5); }

.btn-primary-outline {
    border-color: var(--c-accent-red);
    color: var(--c-accent-red);
    padding: 12px 24px;
}
.btn-primary-outline:hover { background-color: var(--c-accent-red); color: #fff; }

.btn-secondary-outline {
    border-color: #fff;
    color: #fff;
}
.btn-secondary-outline:hover { background-color: #fff; color: var(--c-bg-dark); }

.section-tag {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-accent-gold);
    margin-bottom: 15px;
    font-weight: 600;
}

/* ==========================================
   3. HEADER & NAV
=========================================== */
.site-header {
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s ease;
}

/* Estado cuando se hace scroll */
.site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.site-header.is-scrolled .logo,
.site-header.is-scrolled .main-navigation a { color: var(--c-text-dark); }
.site-header.is-scrolled .main-navigation a:hover { color: var(--c-accent-red); }


.header-inner { display: flex; justify-content: space-between; align-items: center; }
/* ==========================================
   ESTILOS PARA EL LOGO (Única Imagen)
=========================================== */
.logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.site-logo {
    max-height: 60px; /* Ajusta este valor si lo quieres más grande o pequeño */
    width: auto;
    display: block;
    /* Transición suave para el cambio de color y tamaño */
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* ==========================================
   ESTILOS PARA EL LOGO DOBLE (Claro y Oscuro)
=========================================== */
.logo-link {
    display: flex;
    align-items: center;
    position: relative; /* Clave para superponer los logos */
    height: 60px; /* Fija la altura del contenedor para evitar saltos */
}

.site-logo {
    max-height: 100%;
    width: auto;
    transition: opacity 0.4s ease; /* Transición suave de fundido */
}

/* El logo oscuro se posiciona exactamente encima del claro */
.logo-dark {
    position: absolute;
    top: 0;
    left: 0;
}

/* --- ESTADO INICIAL: Menú transparente / Fondo Oscuro --- */
.logo-light {
    opacity: 1;
    visibility: visible;
}

.logo-dark {
    opacity: 0;
    visibility: hidden;
}

/* --- ESTADO SCROLL: Menú Blanco --- */
.site-header.is-scrolled .logo-light {
    opacity: 0;
    visibility: hidden;
}

.site-header.is-scrolled .logo-dark {
    opacity: 1;
    visibility: visible;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .logo-link {
        height: 45px; /* Altura del contenedor en móviles */
    }
}




.main-navigation .menu { display: flex; gap: 35px; }
.main-navigation a {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}
.main-navigation a::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--c-accent-gold); transition: width 0.3s;
}
.main-navigation a:hover { color: #fff; }
.main-navigation a:hover::after { width: 100%; }

/* ==========================================
   4. SECCIONES PRINCIPALES
=========================================== */

/* HERO */
.hero-content h1 {
    font-size: 3.5rem;
}

.hero-section {
    position: relative;
    height: 90vh; /* Altura dramática */
    min-height: 600px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-top: 80px;
}
.hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: -2;
    /* Efecto Parallax sutil solo CSS */
    background-attachment: fixed;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(17,20,24,0.6) 0%, rgba(17,20,24,0.9) 100%);
    z-index: -1;
}
.hero-content { max-width: 850px; }
.hero-subtitle {
    display: block; color: var(--c-accent-gold); font-family: var(--f-heading);
    font-size: 1.5rem; font-style: italic; margin-bottom: 20px;
}
.hero-title { font-size: 3.5rem; margin-bottom: 30px; color: #fff; }
.hero-description { font-size: 1.25rem; color: rgba(255,255,255,0.9); margin-bottom: 50px; max-width: 700px; margin-inline: auto; }
.hero-buttons { display: flex; gap: 20px; justify-content: center; }


/* PRUEBA SOCIAL */
.social-proof { padding: 40px 0; border-bottom: 1px solid rgba(0,0,0,0.05); background: #fff; }
.proof-text { text-align: center; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--c-text-muted); margin-bottom: 25px; }
.proof-logos { display: flex; justify-content: center; gap: 60px; align-items: center; flex-wrap: wrap; }
.proof-logos img { height: 60px; width: auto; opacity: 0.4; filter: grayscale(100%); transition: all 0.3s; }
.proof-logos img:hover { opacity: 0.8; filter: grayscale(0%); }

/* PILARES (Renovado con imágenes) */
.pillars-section { padding: 120px 24px; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pillar-card {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease;
    overflow: hidden;
    padding: 20px;
}
.pillar-card:hover { transform: translateY(-10px); }
.pillar-image-wrap { height: 220px; overflow: hidden; }
.pillar-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pillar-card:hover .pillar-image-wrap img { transform: scale(1.08); }
.pillar-content { padding: 35px; text-align: center; }
.pillar-title { margin-bottom: 15px; color: var(--c-accent-red); }
.pillar-link {
    font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-dark);
    border-bottom: 2px solid var(--c-accent-gold); padding-bottom: 5px;
}
.pillar-link:hover { color: var(--c-accent-red); border-color: var(--c-accent-red); }


/* SPLIT SECTIONS (Curso Destacado y Sobre Autor) */
.featured-split-section, .about-section { padding: 120px 0; }
.split-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.split-inner.split-reversed { direction: rtl; } /* Invierte el orden visualmente */
.split-inner.split-reversed > * { direction: ltr; } /* Restaura el texto */

.split-image {
    height: 550px;
    background-size: cover; background-position: center;
    box-shadow: 20px 20px 0px rgba(197, 160, 89, 0.2); /* Sombra sólida dorada */
    position: relative;
}
/* Un pequeño borde elegante sobre la imagen */
.split-image::before {
    content: ''; position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,0.3); z-index: 1;
}
.about-section .split-image::before { border-color: rgba(0,0,0,0.1); }

.split-content h2 { font-size: 3rem; margin-bottom: 30px; }
.feature-list { margin-bottom: 40px; }
.feature-list li { margin-bottom: 15px; display: flex; align-items: center; color: rgba(255,255,255,0.9); }
.feature-list li::before { content: '✓'; color: var(--c-accent-gold); margin-right: 15px; font-weight: bold; }
.signature-img { margin-top: 30px; height: 60px; opacity: 0.7; }


/* ÚLTIMOS ARTÍCULOS */
.latest-articles-section { padding: 120px 24px; }
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
}
.article-card { /*background: #fff; transition: all 0.3s ease; padding: 30px 0px;*/ }
.article-img-link { display: block; height: 240px; overflow: hidden; }
.article-img-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.article-card:hover .article-img-link img { transform: scale(1.05); }
.article-body { /*padding: 30px;*/ }
.article-meta { display: block; font-size: 0.85rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }
.article-card h3 a { color: var(--c-text-dark); transition: color 0.3s; margin-bottom: 10px; }
.article-card h3 a:hover { color: var(--c-accent-red); }


/* EL CONTENEDOR DE LA TARJETA */
.article-card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden; /* Oculta cualquier cosa que intente salirse de los bordes redondos */
    display: flex;
    flex-direction: column; /* Apila la imagen arriba y el texto abajo */
    height: 100%; /* Obliga a la tarjeta a estirarse para igualar a sus vecinas en el Grid */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* EL CUERPO DEL TEXTO DENTRO DE LA TARJETA */
.article-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* ¡LA MAGIA! Hace que esta sección ocupe todo el espacio sobrante hacia abajo */
}

/* EL PÁRRAFO DEL EXTRACTO */
.article-body p {
    color: var(--c-text-light);
    margin-bottom: 20px;
    flex-grow: 1; /* Empuja el botón de "Leer más" hacia el fondo exacto de la tarjeta */
    
    /* (Opcional) Si un texto es absurdamente largo, lo corta en la línea 3 con puntos suspensivos */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* EL BOTÓN O ENLACE FINAL */
.article-read-more {
    margin-top: auto; /* Se asegura de quedarse pegado al piso de la tarjeta */
    font-weight: 600;
    color: var(--c-accent-gold);
    display: inline-block;
}


/* Enlace dinámico de la categoría en las tarjetas */
.article-meta .cat-link {
    color: var(--c-accent-gold);
    transition: color 0.3s ease;
    font-weight: 700;
}

.article-meta .cat-link:hover {
    color: var(--c-accent-red);
}

/* Botón de Leer Más en las tarjetas de artículos */
.article-read-more {
    display: inline-block;
    margin-top: 15px;
    font-family: var(--f-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-accent-red);
    border-bottom: 2px solid transparent; /* Preparado para el hover */
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

.article-read-more:hover {
    color: var(--c-text-dark);
    border-color: var(--c-accent-gold);
}


/* LEAD MAGNET */
.lead-magnet-section { background-color: var(--c-accent-red); color: #fff; padding: 100px 0; }
.lead-magnet-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.lm-content { flex: 1; }
.lm-content h2 { color: #fff; font-size: 2.8rem; margin-bottom: 15px; }
.lm-content p { color: rgba(255,255,255,0.9); font-size: 1.2rem; margin: 0; }
.lm-form-wrap { flex: 1; max-width: 500px; }
.newsletter-form { display: flex; gap: 10px; background: rgba(255,255,255,0.1); padding: 8px; border-radius: 4px; }
.newsletter-form input {
    flex-grow: 1; padding: 16px 20px; font-family: var(--f-body); font-size: 1rem;
    border: none; background: #fff; outline: none; color: var(--c-text-dark);
}
.newsletter-form .btn { padding-left: 25px; padding-right: 25px; border: none; }
.form-disclaimer { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: 15px; text-align: center; }


/* FOOTER */
.site-footer { background-color: var(--c-bg-dark); color: #fff; padding: 100px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 80px; }
.footer-logo { color: var(--c-accent-gold); font-size: 1.8rem; margin-bottom: 20px; }
.branding-col p { color: rgba(255,255,255,0.6); max-width: 320px; font-size: 0.95rem; }
.footer-col h4 {
    color: #fff; font-family: var(--f-body); font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px;
}
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: rgba(255,255,255,0.6); font-size: 0.95rem; }
.footer-col a:hover { color: var(--c-accent-gold); }
.footer-bottom {
    text-align: center; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px; color: rgba(255,255,255,0.4); font-size: 0.85rem;
}

/* ==========================================
   NUBE DE TEMÁTICAS (Botones Píldora)
=========================================== */
.topics-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.topic-pill {
    display: inline-block;
    padding: 10px 22px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 50px; /* Borde totalmente redondeado */
    font-family: var(--f-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-dark);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.topic-pill:hover {
    background-color: var(--c-accent-gold);
    color: #fff;
    border-color: var(--c-accent-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.25);
}

/* En móviles reducimos un poco el padding y el tamaño de la letra para que quepan más */
@media (max-width: 768px) {
    .topic-pill {
        padding: 8px 16px;
        font-size: 0.75rem;
    }
}


/* ==========================================
   5. ANIMACIONES (Scroll Reveal)
=========================================== */

/* Estado inicial de los elementos animables (ocultos y desplazados) */
.animate-block {
    opacity: 0;
    transform: translateY(40px); /* Se mueven desde abajo */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estado final cuando el JS añade la clase .is-visible */
.animate-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Retrasos escalonados para elementos en cuadrícula (ya aplicados en línea en el HTML) */
/* .pillars-grid .pillar-card:nth-child(2) { transition-delay: 0.1s; }
.pillars-grid .pillar-card:nth-child(3) { transition-delay: 0.2s; } 
*/


/* ==========================================
   6. RESPONSIVE
=========================================== */
@media (max-width: 1024px) {
    .hero-title { font-size: 3.5rem; }
    .split-inner, .pillars-grid, .articles-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .split-image { height: 400px; }
}

@media (max-width: 768px) {
    .header-inner { flex-direction: column; gap: 15px; padding: 10px 0; }
    .main-navigation .menu { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .header-actions { display: none; /* Ocultar botón en móvil para simplificar */ }
    .site-header.is-scrolled .logo { color: var(--c-text-dark); } .logo { color: var(--c-text-dark); } /* Logo oscuro siempre en movil si el menu colapsa */
    
    .hero-section { height: auto; padding: 120px 0 80px; }
    .hero-title { font-size: 2.8rem; }
    .hero-buttons { flex-direction: column; } .btn { width: 100%; text-align: center; }
    
    .split-inner, .split-inner.split-reversed, .pillars-grid, .articles-grid, .footer-grid, .lead-magnet-inner { grid-template-columns: 1fr; gap: 40px; }
    .split-image { height: 300px; order: -1; /* Imagen siempre arriba en móvil */ }
    .split-inner.split-reversed .split-image { order: -1; }
    .split-image::before { display: none; } /* Eliminar borde decorativo en móvil */

    .newsletter-form { flex-direction: column; background: transparent; padding: 0; }
    .newsletter-form input { width: 100%; border-radius: 4px; }
    
    .footer-grid { text-align: center; }
    .branding-col p { margin: 0 auto; }
}



/* ==========================================
   7. RESPONSIVE Y MENÚ MÓVIL EXTREMO
=========================================== */

/* Ocultar elementos según dispositivo por defecto */
.mobile-menu-toggle { display: none; }
.mobile-only { display: none; }

/* Tipografía Fluida básica para Títulos */
@media (max-width: 1200px) {
    .hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); }
    h2 { font-size: clamp(2rem, 4vw, 3rem); }
}

/* === TABLETS Y PANTALLAS MEDIANAS (Hasta 1024px) === */
@media (max-width: 1024px) {
    /* Ajuste de cuadrículas */
    .split-inner, 
    .pillars-grid, 
    .articles-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px;
    }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    
    /* Reducir espacios masivos */
    .hero-section { min-height: 50vh; padding-top: 120px; }
    .pillars-section, .featured-split-section, .about-section, .latest-articles-section { padding: 80px 24px; }
    .split-image { height: 400px; }
}

/* === TELÉFONOS MÓVILES (Hasta 768px) === */
@media (max-width: 768px) {
    
    /* --- 1. MENÚ HAMBURGUESA --- */
    .desktop-only { display: none; }
    .mobile-only { display: block; margin-top: 20px; }
    
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 999; /* Para que quede por encima del menú abierto */
    }

    .mobile-menu-toggle .bar {
        height: 2px;
        width: 100%;
        background-color: #fff; /* Blanco por el fondo oscuro inicial */
        transition: all 0.3s ease;
    }

    /* Cuando hacemos scroll, las barras del menú se vuelven oscuras */
    .site-header.is-scrolled .mobile-menu-toggle .bar { background-color: var(--c-text-dark); }
    /* Si el menú está abierto, forzamos barras oscuras porque el fondo será blanco */
    .site-header.menu-open .mobile-menu-toggle .bar { background-color: var(--c-text-dark); }

    /* Animación de la cruz (X) al abrir el menú */
    .mobile-menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
    .mobile-menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

    /* Estilos del panel de navegación móvil */
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%; /* Oculto fuera de la pantalla */
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background-color: #fff;
        box-shadow: -5px 0 30px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 998;
    }

    .main-navigation.is-active { right: 0; } /* Mostrar menú */

    .main-navigation .menu {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        width: 100%;
        padding: 0 30px;
    }

    .main-navigation a {
        color: var(--c-text-dark);
        font-size: 1.2rem;
        display: block;
    }

    /* Ajuste del logo para que no choque con el botón */
    .site-logo { max-height: 45px; }


    /* --- 2. AJUSTES DE ESTRUCTURA Y CUADRÍCULAS --- */
    .split-inner, 
    .split-inner.split-reversed, 
    .pillars-grid, 
    .articles-grid, 
    .lead-magnet-inner { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    
    /* Forzar que las imágenes vayan arriba en secciones divididas */
    .split-image { height: 300px; order: -1; }
    .split-inner.split-reversed .split-image { order: -1; }
    .split-image::before { display: none; } /* Quitamos decoraciones complejas en móvil */

    /* Hero Section */
    .hero-section { padding-top: 100px; padding-bottom: 60px; height: auto; }
    .hero-subtitle { font-size: 1.2rem; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn { width: 100%; text-align: center; }

    /* Lead Magnet / Formulario */
    .lead-magnet-inner { text-align: center; }
    .newsletter-form { flex-direction: column; background: transparent; padding: 0; }
    .newsletter-form input { width: 100%; border-radius: 4px; margin-bottom: 10px; }
    .newsletter-form .btn { width: 100%; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .branding-col p { margin: 0 auto; }
}

/* Prevent scroll on body when mobile menu is open */
body.menu-open-body { overflow: hidden; }



/* ==========================================
   CARRUSEL DE LIBROS (Tapas)
=========================================== */
.books-carousel-section {
    padding: 100px 0;
    overflow: hidden; /* Evita que el scroll horizontal rompa la página entera */
}

.books-carousel-section p {
    color: var(--c-text-light);
    margin-top: 20px;
}

.carousel-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    /* Obligamos a que sea un bloque que respete el 100% de la pantalla */
    display: block; 
    width: 100%;
    box-sizing: border-box;
}

.carousel-track {
    display: flex;
    flex-wrap: nowrap; /* GARANTÍA 1: Prohíbe terminantemente que se hagan filas abajo */
    gap: 35px;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 30px 10px 50px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
    display: none;
}

.book-item {
    /* GARANTÍA 2: 0 crecer, 0 encoger, 220px fijos SIEMPRE */
    flex: 0 0 220px; 
    width: 220px;
    min-width: 220px; /* GARANTÍA 3: No puede medir menos */
    max-width: 220px; /* GARANTÍA 4: No puede medir más */
    perspective: 1000px;
}

/* --- TUS OTROS ESTILOS DE IMÁGENES Y HOVER QUEDAN IGUAL --- */
.book-item img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    border-radius: 2px 6px 6px 2px;
    box-shadow: 8px 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-left: 4px solid rgba(0,0,0,0.15); 
}

.book-item a { display: block; }
.book-item:hover img {
    transform: translateY(-12px) rotateY(-4deg);
    box-shadow: 12px 20px 30px rgba(0,0,0,0.2);
}

/* Flechas del carrusel */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: var(--c-accent-red);
    border: 1px solid rgba(0,0,0,0.1);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: var(--c-accent-red);
    color: #fff;
    border-color: var(--c-accent-red);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn { left: 15px; }
.next-btn { right: 15px; }

/* --- TU VERSIÓN MÓVIL (MUY IMPORTANTE ACTUALIZAR ESTO TAMBIÉN) --- */
@media (max-width: 768px) {
    .carousel-container { padding: 0 10px; }
    .carousel-btn { display: none; }
    
    .book-item { 
        /* En móvil también debemos forzar las medidas estrictas */
        flex: 0 0 160px; 
        width: 160px; 
        min-width: 160px;
        max-width: 160px;
    } 
    .book-item img { height: 240px; }
    .carousel-track { gap: 20px; padding: 20px 10px 40px; }
}

/* Acciones del Carrusel (Botones inferiores) */
.carousel-actions {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Permite que se apilen si no caben */
    padding: 0 24px;
}

/* En móvil, los botones del carrusel ocupan el 100% del ancho */
@media (max-width: 768px) {
    .carousel-actions {
        flex-direction: column;
        gap: 15px;
    }
    .carousel-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================
   8. PÁGINA INTERNA: DIRECTORIO DE AUTORES
=========================================== */

/* Cabecera interna (más pequeña que el Hero del inicio) */
.page-header {
    padding: 160px 24px 80px; /* Padding top alto para compensar el menú fijo */
    background-color: var(--c-bg-dark);
    /* Puedes añadir una textura sutil de fondo si quieres */
    background-image: linear-gradient(to bottom, rgba(17,20,24,0.9), rgba(17,20,24,1)), url('https://www.transparenttextures.com/patterns/stardust.png');
}

.page-title {
    color: #fff;
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.page-description {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 20px auto 0;
}

/* Cuadrícula de Autores */
.authors-directory {
    padding: 100px 0;
}

.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 50px 40px;
}

/* Tarjeta de Autor */
.author-card {
    background: #fff;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* Imagen del Autor (Estilo Retrato Clásico) */
.author-img-wrap {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin-bottom: 25px;
    padding: 5px;
    border: 2px solid var(--c-accent-gold); /* Borde dorado tipo marco */
    background-color: #fff;
    overflow: hidden;
}

.author-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Filtro opcional: Un ligero sepia/blanco y negro da muchísima elegancia editorial */
    filter: grayscale(80%) contrast(110%);
    transition: filter 0.4s ease;
}

.author-card:hover .author-img-wrap img {
    filter: grayscale(0%) contrast(100%); /* Recupera el color al pasar el mouse */
}

/* Información del Autor */
.author-role {
    display: block;
    font-family: var(--f-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-accent-red);
    margin-bottom: 10px;
    font-weight: 600;
}

.author-name {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.author-bio {
    font-size: 0.95rem;
    color: var(--c-text-light);
    margin-bottom: 25px;
    flex-grow: 1; /* Empuja el botón siempre hacia abajo si las bios tienen distinto largo */
}

.author-link {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.author-link:hover {
    border-color: var(--c-accent-gold);
}

.btn-small {
    padding: 10px 20px;
    font-size: 0.75rem;
}

/* Destacar al autor principal */
.featured-author {
    grid-column: 1 / -1; /* Hace que ocupe todo el ancho de la fila */
    flex-direction: row; /* Diseño horizontal */
    text-align: left;
    align-items: center;
    gap: 50px;
    padding: 60px;
    background-color: #fff;
    border-top: 4px solid var(--c-accent-red); /* Detalle jerárquico */
}

.featured-author .author-img-wrap {
    width: 220px;
    height: 220px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.featured-author .author-name {
    font-size: 2.8rem;
}

.featured-author .author-bio {
    font-size: 1.1rem;
    max-width: 800px;
}

/* Responsive para Autores */
@media (max-width: 992px) {
    .featured-author {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
        gap: 25px;
    }
    .featured-author .author-img-wrap {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
    .authors-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
}



/* ==========================================
   9. PÁGINA INTERNA: LECTURA DE ARTÍCULO (SINGLE)
=========================================== */

/* Cabecera del Artículo */
.article-header {
    padding: 60px 24px 40px;
}

/* ==========================================
   AJUSTES PARA EL SINGLE POST OSCURO
=========================================== */
/* Quitamos el espacio superior para que el fondo oscuro llegue al techo */
.single-post-page .site-main {
    padding-top: 0; 
    margin-top: 80;
}

/* El bloque del título ahora es un "Hero" oscuro */
.article-header.bg-dark {
    padding-top: 160px; /* Da espacio suficiente para que el menú no pise el título */
    padding-bottom: 80px;
    margin-bottom: 50px; /* Separación antes de la imagen de la catedral */
}

/* En móviles ajustamos el respiro */
@media (max-width: 768px) {
    .article-header.bg-dark {
        padding-top: 120px;
        padding-bottom: 80px;
    }
}

.article-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin: 20px 0 30px;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.95rem;
    color: var(--c-text-light);
    font-family: var(--f-body);
}

.meta-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.meta-author a {
    color: var(--c-text-dark);
    font-weight: 600;
}

.meta-author a:hover {
    color: var(--c-accent-red);
}

.meta-separator {
    color: var(--c-accent-gold);
}

/* Imagen Destacada */
.article-featured-image {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 0 24px;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.article-featured-image figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin-top: 15px;
    font-style: italic;
}

/* CUERPO DEL TEXTO (Diseño Editorial) */
.article-content {
    max-width: 1000px; /* Ancho óptimo para lectura */
    margin: 0 auto;
    padding: 0 24px 60px;
    font-size: 1.15rem; /* Letra un poco más grande para leer fácil */
    line-height: 1.8;
    color: #2c3038; /* Gris muy oscuro, menos agresivo que el negro puro */
}

/* ==========================================
   Hacer que los videos (YouTube, Vimeo) sean responsivos
=========================================== */
.article-content iframe,
.article-content object,
.article-content embed {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 6px; /* Le damos un toque elegante con bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra para que no quede plano */
    margin: 2em 0; /* Separación arriba y abajo del texto */
    display: block;
}

/* Letra Capitular (Drop Cap) en el primer párrafo */
.article-content > p:first-of-type::first-letter {
    font-family: var(--f-heading);
    font-size: 4.8rem;
    float: left;
    line-height: 0.8;
    margin: 8px 15px 0 0;
    color: var(--c-accent-red);
    font-weight: 700;
}

.article-content p {
    margin-bottom: 1.8em;
}

.article-content h2 {
    font-size: 2.2rem;
    margin: 2em 0 0.8em;
    color: var(--c-text-dark);
}

.article-content h3 {
    font-size: 1.6rem;
    margin: 1.5em 0 0.8em;
}

/* Listas dentro del post */
.article-content ul, .article-content ol {
    margin-bottom: 2em;
    padding-left: 1.5em;
}

.article-content li {
    margin-bottom: 0.8em;
}

/* Citas (Blockquotes) estilo clásico */
.article-content blockquote {
    margin: 2.5em 0;
    padding: 30px 40px;
    background-color: var(--c-bg-cream);
    border-left: 4px solid var(--c-accent-gold);
    font-family: var(--f-heading);
    font-size: 1.6rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--c-text-dark);
    position: relative;
}

.article-content blockquote cite {
    display: block;
    font-family: var(--f-body);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
    color: var(--c-accent-red);
}

/* ==========================================
   ESTILO DEL BOTÓN DORADO (Frontend)
=========================================== */
.article-content a.btn-gold-editor {
    background-color: var(--c-accent-gold) !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 4px;
    text-decoration: none !important;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--f-body);
    margin: 15px 0;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.2);
}

.article-content a.btn-gold-editor:hover {
    background-color: var(--c-accent-red) !important; /* Cambia a rojo al pasar el mouse */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(150, 36, 36, 0.3);
    color: #ffffff !important;
}

/* Estilo para la capitular aplicada manualmente desde el editor */
.capitular-qntlc {
    font-family: var(--f-heading);
    font-size: 4.8rem;
    float: left;
    line-height: 0.8;
    margin: 8px 15px 0 0;
    color: var(--c-accent-red);
    font-weight: 700;
    text-transform: uppercase;
}

/* Pie del Artículo */
.article-footer {
    max-width: 720px;
    margin: 0 auto 60px;
    padding: 30px 24px;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.article-tags a, .share-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--c-bg-cream);
    font-size: 0.85rem;
    color: var(--c-text-dark);
    border-radius: 4px;
    margin-left: 5px;
    transition: background-color 0.3s;
}

.article-tags a:hover { background-color: var(--c-accent-gold); color: #fff; }
.share-btn:hover { background-color: var(--c-text-dark); color: #fff; }

/* Caja de Autor debajo del post */
.post-author-box {
    padding: 60px 24px;
    margin-bottom: 80px;
}

.author-box-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    background: #fff;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.author-box-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-accent-gold);
    padding: 4px;
}

.author-box-content h4 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.author-box-content p {
    font-size: 0.95rem;
    color: var(--c-text-light);
    margin-bottom: 15px;
}

/* Responsive para el Single Post */
@media (max-width: 768px) {
    .article-title { font-size: 2.2rem; }
    .article-content { font-size: 1.05rem; }
    .article-content > p:first-of-type::first-letter { font-size: 3.8rem; }
    .article-content blockquote { padding: 25px; font-size: 1.3rem; }
    
    .article-footer { flex-direction: column; align-items: flex-start; }
    .article-tags a, .share-btn { margin-bottom: 10px; }
    
    .author-box-inner { flex-direction: column; text-align: center; gap: 20px; padding: 30px 20px; }
}

/* ==========================================
   10. COMENTARIOS (Lista y Formulario)
=========================================== */
.comments-area {
    padding: 40px 24px 100px;
    margin-bottom: 40px;
}

.comments-inner {
    max-width: 800px; /* Un poco más ancho que el texto para respirar */
    margin: 0 auto;
}

.comments-title, .reply-title {
    font-size: 2.2rem;
    color: var(--c-text-dark);
    margin-bottom: 10px;
}

/* LISTA DE COMENTARIOS */
.comment-list {
    list-style: none;
    margin: 0 0 60px;
    padding: 0;
}

.comment-list .comment {
    margin-bottom: 30px;
}

.comment-body {
    background-color: #fff;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.comment-author .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.author-avatar {
    border: 2px solid var(--c-accent-gold);
}

.comment-author .fn {
    font-family: var(--f-body);
    font-weight: 600;
    font-style: normal;
    font-size: 1.1rem;
    color: var(--c-text-dark);
}

.author-badge {
    background-color: var(--c-accent-red);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 5px;
}

.comment-metadata {
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

.comment-content {
    font-size: 1.05rem;
    color: var(--c-text-light);
    line-height: 1.7;
    margin-bottom: 15px;
}

.comment-content p {
    margin-bottom: 0; /* Evitar espacio extra al final del comentario */
}

.comment-reply-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-accent-gold);
    transition: color 0.3s;
}

.comment-reply-link:hover {
    color: var(--c-accent-red);
}

/* Comentarios Anidados (Respuestas) */
.comment-list .children {
    list-style: none;
    margin: 30px 0 0 0;
    padding-left: 50px;
    border-left: 2px solid var(--c-bg-cream);
}

/* FORMULARIO DE COMENTARIOS */
.comment-respond {
    background-color: var(--c-bg-cream);
    padding: 40px;
    border-radius: 4px;
    margin-top: 60px;
}

.comment-notes {
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin-bottom: 25px;
}

.comment-form .form-row {
    display: flex;
    gap: 20px;
}

.comment-form .form-group {
    margin-bottom: 20px;
    width: 100%;
}

.comment-form .half-width {
    flex: 1;
}

.comment-form label {
    display: block;
    font-family: var(--f-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-text-dark);
    margin-bottom: 8px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-family: var(--f-body);
    font-size: 1rem;
    color: var(--c-text-dark);
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--c-accent-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}

.comment-form textarea {
    resize: vertical;
}

/* Responsive para Comentarios */
@media (max-width: 768px) {
    .comment-meta { flex-direction: column; align-items: flex-start; gap: 5px; }
    .comment-list .children { padding-left: 20px; }
    .comment-form .form-row { flex-direction: column; gap: 0; }
    .comment-respond { padding: 30px 20px; }
}

/* ==========================================
   VIDEOS RECIENTES (YouTube Grid)
=========================================== */
.recent-videos-section {
    padding: 100px 0;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.video-card {
    display: flex;
    flex-direction: column;
}

/* Contenedor de la miniatura */
.video-thumbnail-wrap {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Proporción exacta de YouTube */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    background-color: #000;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.85; /* Un poco oscurecido por defecto */
}

/* Overlay del Botón de Play */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(26, 28, 32, 0.8);
    border: 2px solid var(--c-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

/* Triángulo del Play (hecho con bordes CSS) */
.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px; /* Centra el triángulo visualmente */
    transition: border-color 0.3s ease;
}

/* Efectos al pasar el cursor (Hover) */
.video-thumbnail-wrap:hover .video-thumb {
    transform: scale(1.05);
    opacity: 0.5; /* Se oscurece más para resaltar el play */
}

.video-thumbnail-wrap:hover .play-button-overlay {
    background-color: var(--c-accent-red);
    border-color: var(--c-accent-red);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Información del Video (Textos) */
.video-info {
    flex-grow: 1;
}

.video-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--c-accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: 600;
}

.video-title {
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0;
}

.video-title a {
    color: #fff;
    transition: color 0.3s ease;
}

.video-title a:hover {
    color: var(--c-accent-gold);
}

/* --- RESPONSIVE VIDEOS --- */
@media (max-width: 1024px) {
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .videos-grid {
        grid-template-columns: 1fr; /* 1 columna en celulares */
        gap: 30px;
    }
    .video-title {
        font-size: 1.2rem;
    }
    .play-button-overlay {
        width: 50px;
        height: 50px;
    }
    .play-icon {
        border-width: 8px 0 8px 14px;
    }
}




/* ==========================================
   11. PÁGINA DE MISAS (Formularios y FAQ)
=========================================== */

.mass-section {
    padding: 100px 0;
}

/* Columna de Información (FAQ) */
.mass-info {
    max-width: 500px;
}

.mass-info h2 {
    font-size: 3rem;
    margin-bottom: 40px;
}

.faq-block h4 {
    font-family: var(--f-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-accent-red);
    margin-bottom: 10px;
}

.faq-block p {
    font-size: 1.05rem;
    color: var(--c-text-light);
    margin-bottom: 30px;
    line-height: 1.7;
}

.payment-info-box {
    background-color: rgba(197, 160, 89, 0.1); /* Fondo dorado muy transparente */
    border-left: 3px solid var(--c-accent-gold);
    padding: 20px 25px;
    font-size: 0.95rem;
    color: var(--c-text-dark);
    margin-top: 40px;
}

.payment-info-box a {
    font-weight: 600;
}

/* Tarjetas de Formulario */
.mass-form-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.form-card {
    background: #fff;
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 6px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
}

/* Variante Oscura para las Gregorianas (contraste visual) */
.form-card-dark {
    background: var(--c-bg-dark);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: none;
}

.form-card h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
}

/* Estilos de los inputs (reutilizables para Contacto) */
.qntlc-form .form-group {
    margin-bottom: 20px;
}

.qntlc-form label {
    display: block;
    font-family: var(--f-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.qntlc-form input,
.qntlc-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    font-family: var(--f-body);
    font-size: 1rem;
    color: var(--c-text-dark);
    border-radius: 4px;
    transition: all 0.3s;
}

.form-card-dark .qntlc-form input,
.form-card-dark .qntlc-form textarea {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
}

.qntlc-form input:focus,
.qntlc-form textarea:focus {
    outline: none;
    border-color: var(--c-accent-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
    background-color: #fff;
}

.form-card-dark .qntlc-form input:focus,
.form-card-dark .qntlc-form textarea:focus {
    background-color: rgba(255,255,255,0.1);
}

.btn-full {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 992px) {
    .mass-info { max-width: 100%; }
    .form-card { padding: 30px 20px; }
}


/* ==========================================
   12. PÁGINA DE DONACIONES
=========================================== */

.donations-section {
    padding: 100px 0;
}

/* Nueva cuadrícula uniforme */
.donations-grid {
    display: grid;
    /* Crea columnas de al menos 300px. Si sobra espacio, las ensancha o añade más columnas */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch; /* Obliga a que todas las tarjetas sean igual de altas */
}

/* Tarjeta Base de Donación */
.donation-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.donation-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.donation-card p {
    color: var(--c-text-light);
    font-size: 1rem;
    margin-bottom: 25px;
    flex-grow: 1; /* Esto empuja el botón/caja bancaria siempre hacia abajo */
}

.card-header-flex {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.card-header-flex h3 {
    margin-bottom: 0;
    line-height: 1.2;
}

.card-icon-small {
    font-size: 2.2rem;
    line-height: 1;
}

/* Tarjeta Destacada: PATREON */
.patreon-card {
    background: var(--c-bg-dark);
    color: #fff;
    border: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.patreon-card h3 {
    color: #fff;
}

.patreon-card p {
    color: rgba(255,255,255,0.8);
}

/* Botón específico para Patreon */
.patreon-btn {
    background-color: #FF424D;
    border-color: #FF424D;
    color: #fff;
    font-size: 1rem;
    padding: 14px;
    margin-top: auto; /* Fuerza al botón a quedarse pegado al fondo */
}

.patreon-btn:hover {
    background-color: #d6353d;
    border-color: #d6353d;
}

.btn-full {
    width: 100%;
    text-align: center;
    margin-top: auto; /* Fuerza al botón a quedarse pegado al fondo */
}

/* Caja de datos bancarios */
.bank-details {
    background-color: var(--c-bg-cream);
    padding: 20px;
    border-radius: 4px;
    border-left: 3px solid var(--c-accent-gold);
    margin-top: auto; /* Fuerza la caja a quedarse pegada al fondo */
}

.bank-details p {
    margin-bottom: 8px;
    font-family: var(--f-body);
    font-size: 0.9rem;
    color: var(--c-text-dark);
}

.bank-details p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .donations-grid {
        grid-template-columns: 1fr; /* Una columna en celulares */
    }
}


/* ==========================================
   13. PÁGINA DE CONTACTO
=========================================== */

.contact-section {
    padding: 100px 0;
}

/* Columna de Directrices */
.contact-info {
    max-width: 550px;
}

.contact-guidelines p {
    font-size: 1.1rem;
    color: var(--c-text-dark);
    margin-bottom: 30px;
    line-height: 1.6;
}

.guidelines-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 40px;
}

.guidelines-list li {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 6px;
    border-left: 4px solid var(--c-accent-gold);
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    font-size: 0.95rem;
    color: var(--c-text-light);
    line-height: 1.6;
}

.guidelines-list li strong {
    display: block;
    color: var(--c-text-dark);
    font-family: var(--f-body);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.guidelines-list li a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--c-accent-gold);
    text-underline-offset: 3px;
}

.guidelines-list li a:hover {
    color: var(--c-accent-red);
    text-decoration-color: var(--c-accent-red);
}

.gold-icon {
    font-style: normal;
    margin-right: 8px;
}

/* Estilos extra para el formulario de contacto */
/* Reutilizamos .form-card de la página de misas, pero aseguramos la altura del desplegable */
.contact-form select:focus {
    border-color: var(--c-accent-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
    background-color: #fff;
}

/* Responsive para la página de Contacto */
@media (max-width: 992px) {
    .contact-info {
        max-width: 100%;
        margin-bottom: 30px; /* Separación extra antes del formulario en móviles */
    }
}

/* ==========================================
   15. DIRECTORIO DE AUDIOS Y SERMONES
=========================================== */

.audio-category {
    background-color: transparent;
}

.category-title {
    font-size: 2.5rem;
    color: var(--c-text-dark);
    margin-bottom: 0;
}

/* Cuadrícula de enlaces a los audios */
.audio-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas exactas */
    gap: 20px 40px; /* 20px vertical, 40px horizontal */
}

/* Bloque individual de cada audio */
.audio-link-block {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20px 25px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

.audio-link-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: var(--c-accent-gold);
}

.audio-icon {
    font-size: 1.8rem;
    margin-right: 20px;
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.audio-link-block:hover .audio-icon {
    transform: scale(1.1);
}

/* Textos del audio */
.audio-details {
    display: flex;
    flex-direction: column;
}

.audio-details h4 {
    font-size: 1.15rem;
    color: var(--c-text-dark);
    margin-bottom: 5px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.audio-link-block:hover .audio-details h4 {
    color: var(--c-accent-red);
}

.audio-details span {
    font-family: var(--f-body);
    font-size: 0.85rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Responsive para la lista de audios */
@media (max-width: 992px) {
    .category-title {
        font-size: 2.2rem;
    }
    .audio-list {
        grid-template-columns: 1fr; /* Pasa a 1 columna en tablets y móviles */
    }
}


/* FORZAR VISIBILIDAD EN SINGLE POST */
.single .animate-block {
    opacity: 1 !important;
    transform: none !important;
}

/* Contenedor principal a 4 columnas */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas del mismo tamaño */
    gap: 30px; /* Espacio entre las columnas, ajústalo a tu gusto */
    align-items: start; /* Alinea el contenido arriba */
}

/* --- Diseño Responsivo (opcional pero recomendado) --- */

/* Para tablets: pasa a 2 columnas */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Para celulares: pasa a 1 columna apilada */
@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}


/* Contenedor principal */
.article-share {
    display: flex;
    align-items: center;
    gap: 12px; 
    margin-top: 20px;
}

.article-share span {
    font-weight: bold;
    margin-right: 8px;
}

/* Estructura base de los botones circulares */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff; /* Icono en blanco para que contraste con los fondos de color */
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    outline: none;
}

/* 1. Asignación de colores mágicos según el enlace (URL) */
.share-btn[href*="twitter"] { background-color: #000000; }  /* X (Negro) */
.share-btn[href*="facebook"] { background-color: #1877F2; } /* Facebook (Azul) */
.share-btn[href*="whatsapp"] { background-color: #25D366; } /* WhatsApp (Verde) */
.share-btn[href*="t.me"] { background-color: #0088cc; }     /* Telegram (Celeste) */
.copy-btn { background-color: #6c757d; }                    /* Copiar enlace (Gris neutro) */

/* Efecto al pasar el mouse por encima */
.share-btn:hover {
    transform: translateY(-3px); /* El botón da un pequeño salto hacia arriba */
    filter: brightness(0.85);    /* Oscurece un 15% el color base automáticamente */
    color: #ffffff;
}




/* --- ESTILOS BASE DEL BUSCADOR --- */
.search-container {
    max-width: 500px;
    margin: 0 auto;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field {
    width: 100%;
    padding: 12px 55px 12px 20px;
    border-radius: 30px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.search-submit {
    position: absolute;
    right: 6px;
    background: #d4af37; /* Dorado QNTLC */
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* --- VERSIÓN OSCURA (Para el Header) --- */
.search-dark .search-field {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.search-dark .search-field:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: #d4af37;
}

.search-dark .search-field::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* --- VERSIÓN CLARA (Por defecto para fondos crema/blanco) --- */
.search-container:not(.search-dark) .search-field {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.search-container:not(.search-dark) .search-field:focus {
    border-color: #d4af37;
}






/* Contenedor principal de la galería clásica */
.gallery {
    margin: 2em auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important; /* Espacio entre fotos */
}

/* Ajuste de cada ítem de la galería */
.gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    flex: 1 1 30%; /* 3 columnas en desktop */
    max-width: 32%;
}

/* Efecto hover estilo "Que No Te La Cuenten" */
.gallery-item:hover {
    transform: translateY(-5px);
    border-color: #c5a059; /* Borde dorado */
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.2);
}

/* La imagen dentro de la galería */
.gallery-icon img {
    border: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3; /* Fuerza a que todas sean iguales */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-icon img {
    transform: scale(1.05); /* Zoom suave */
}

/* Leyenda de la foto (Caption) */
.gallery-caption {
    margin-left: 0 !important;
    padding: 10px !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem !important;
    color: #2c3e50 !important;
    border-top: 2px solid #c5a059; /* Línea dorada */
    background: #fff;
    font-weight: 500;
}

/* Ajuste para móviles (1 sola columna) */
@media (max-width: 768px) {
    .gallery-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}


.copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1a1c20; /* Color oscuro como tu header */
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    border: 1px solid #c5a059; /* Borde dorado */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.copy-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}



/* Contenedor relativo para posicionar el icono */
.article-img-link {
    position: relative;
    display: block;
    overflow: hidden;
}

/* El icono de Play */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(197, 160, 89, 0.9); /* Tu dorado QNTLC */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none; /* No interfiere con el clic del enlace */
}

/* Triángulo del Play hecho con CSS puro */
.play-overlay::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 5px;
}

/* Efecto al pasar el mouse por la tarjeta */
.article-card:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.15);
    background: #1a1c20; /* Cambia a negro al hacer hover */
}





.hero-banner-qntlc {
    position: relative;
    /*background-image: url('images/banner-qntlc.png');*/
    background-size: cover;
    background-position: center;
    min-height: 85vh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(26,28,32,1) 30%, rgba(26,28,32,0.4) 100%);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-content {
    max-width: 600px;
}

.hero-tag {
    color: #c5a059;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 0.9rem;
}

.hero-content h1 {
    font-family: 'Cinzel', serif; 
    font-size: 3.5rem;
    line-height: 1.1;
    margin: 20px 0;
}

.hero-content .highlight {
    color: #c5a059;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 35px;
    opacity: 0.9;
}

/* Botones */
.hero-btns {
    display: flex;
    gap: 20px;
}

.btn-gold {
    background: #c5a059;
    color: #fff;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-outline {
    border: 2px solid #fff;
    color: #fff;
    padding: 13px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-gold:hover { background: #ab8a4a; }
.btn-outline:hover { background: #fff; color: #1a1c20; }

/* Imagen del Padre */
.hero-image img {
    /*max-height: 80vh;*/
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.5));
    position: relative;
}

@media (max-width: 991px) {
    .hero-image { display: none; } /* En móviles ocultamos la foto para dar prioridad al texto */
    .hero-content { text-align: center; margin: 80 auto; }
    .hero-btns { justify-content: center; }
}


/* Contenedor relativo para la foto del Padre */
.bio-foto-container {
    position: relative; /* Importante para que la firma se posicione dentro */
    display: inline-block; /* Ajusta el tamaño al de la imagen */
}





/* Ajustes para móviles */
@media (max-width: 768px) {
    .signature-img {
        max-width: 100px; /* Firma más pequeña en móviles */
        bottom: /*40px*/-40px;
        right: 10px;
    }
}



@keyframes reveal-signature {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0); /* Se revela hacia la derecha */
    }
}

/* Efecto opcional de flotación suave una vez que termina de firmar */
.signature-img {
    transition: transform 0.5s ease;
}

.signature-img:hover {
    transform: scale(1.1) rotate(-2deg);
}




/* Este es el contenedor que "atrapa" a la firma */
.signature-wrapper {
    position: relative;
    display: inline-block; /* Importante: el div mide lo que mide la imagen */
    line-height: 0;        /* Quita espacios fantasmas debajo de la imagen */
}

.virgen-img {
    max-width: 60%/*80vh*/;
    float: right;
    height: auto;
    display: block;
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.5));
}

/* La firma ahora se posiciona respecto a .signature-wrapper */
.signature-img {
    position: absolute;
    /*bottom: 10%;    /* Distancia desde abajo (puedes usar px o %) */
    /*right: 5%;      /* Distancia desde la derecha */
    width: 180px;   /* Ajusta el tamaño de la firma aquí */
    height: auto;
    /*z-index: 10;*/
    pointer-events: none; /* Para que no interfiera si quieres hacer clic en la foto */
}

/* La animación que pediste */
.anim-draw {
    clip-path: inset(0 100% 0 0);
    animation: reveal-signature 2.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
    animation-delay: 1s;
}

@keyframes reveal-signature {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}