/* ==========================================================================
   VISTA INMERSIVA (PÁGINAS ESTÁTICAS) - ILLAN PRO
   ========================================================================== */

/* 1. CABECERA INMERSIVA (HERO) */
.page-hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Altura base para páginas sin imagen (menor peso visual) */
    min-height: 35vh;
    background-color: var(--layout-glass-background);
    border-bottom: 1px solid var(--layout-border-glass);
    overflow: hidden;
}

.page-hero-section.has-bg-image {
    /* Altura extendida para inmersión total si hay imagen destacada */
    min-height: 55vh; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--layout-color-background);
    /* Oscurecemos al 70% para garantizar contraste perfecto con el texto blanco */
    opacity: 0.7; 
    z-index: 1;
}

/* Si no hay imagen, ocultamos el overlay para no oscurecer el glassmorphism base */
.page-hero-section.no-bg-image .page-hero-overlay {
    display: none;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--layout-margin-space);
    max-width: var(--layout-standard);
}

.page-hero-title {
    font-family: var(--title-font);
    /* Multiplicamos el H1 por 1.5 para un efecto más cinematográfico */
    font-size: calc(var(--size-h1-title) * 1.5); 
    color: var(--title-color);
    margin: 0;
    line-height: 1.2;
    font-weight: 800;
    /* Refuerzo de legibilidad sobre fondos fotográficos complejos */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); 
}

/* 2. CONTENEDOR DE LECTURA (BLINDAJE DE ANCHO) */
.page-reading-container {
    /* Solución a la captura: Restringimos el ancho a 800px y centramos */
    max-width: var(--layout-standard);
    margin: 0 auto;
    padding: calc(var(--layout-margin-space) * 3) var(--layout-margin-space);
}

/* 3. TIPOGRAFÍA Y RITMO DENTRO DEL CONTENIDO */
.entry-content {
    font-family: var(--font-general-text);
    /* Aumentamos un 10% el texto base para facilitar la lectura prolongada */
    font-size: calc(var(--size-general-text) * 1.1); 
    color: var(--color-general-text);
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: calc(var(--layout-margin-space) * 1.5);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--title-font);
    color: var(--title-color);
    /* Más aire por arriba que por abajo para agrupar el título con su párrafo */
    margin-top: calc(var(--layout-margin-space) * 2.5);
    margin-bottom: var(--layout-margin-space);
    line-height: 1.3;
}

.entry-content h2 { font-size: var(--size-h2-title); }
.entry-content h3 { font-size: var(--size-h3-title); }
.entry-content h4 { font-size: var(--size-h4-title); }

/* Enlaces y elementos nativos de WordPress */
.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: var(--button-transition);
}

.entry-content a:hover {
    color: var(--color-info);
}

.entry-content blockquote {
    margin: calc(var(--layout-margin-space) * 2) 0;
    padding: var(--layout-margin-space) calc(var(--layout-margin-space) * 1.5);
    border-left: 4px solid var(--color-primary);
    background: var(--layout-glass-background);
    border-radius: 0 var(--form-radius) var(--form-radius) 0;
    font-style: italic;
}

/* 4. RESPONSIVE DESIGN (Puntos de Ruptura) */
@media (max-width: 768px) {
    .page-hero-title {
        /* En móviles volvemos al tamaño H1 natural */
        font-size: var(--size-h1-title); 
    }
    
    .page-hero-section {
        min-height: 30vh;
    }
    
    .page-hero-section.has-bg-image {
        min-height: 40vh;
    }
}