/*
=====================================================
--- VARIABLES DEL SISTEMA (De header.css / admin.css / casos_de_uso.css) ---
=====================================================
*/
:root {
    --color-primary: #0B1726;        /* Azul/Gris oscuro (Para fondo y texto principal) */
    --color-accent: #31cadc;         /* Cian (Para énfasis y detalles) */
    --color-text-light: #ffffff;     /* Texto claro sobre fondos oscuros */
    --color-text-muted: #b0b0b0;     /* Texto sutil sobre fondos oscuros (de casos_de_uso p) */
    --color-background-light: #f8f9fa; /* Fondo general de la sección (similar a admin-bg) */
    --color-border: #334155;         /* Borde oscuro para separación */
}

/*
=====================================================
--- 1. Estilos Base de Secciones y Títulos ---
=====================================================
*/
.section-container {
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--color-text-light);
}

/* Título de la Sección (Oscuro sobre fondo claro, como en Casos de Uso) */
.section-title {
    text-align: center;
    margin-bottom: 50px; 
    font-size: 2.5em;
    color: var(--color-primary); 
    font-weight: bold;
}

/*
=====================================================
--- 2. Sección de Gráficos (Adaptado a una sola imagen) ---
=====================================================
*/
.charts-section {
    /* Centramos el contenido de la única imagen */
    max-width: 900px; 
    margin: 0 auto 60px auto;
    display: block;
    text-align: center;
}

.chart-item {
    /* Contenedor que imita la base de una card oscura */
    background-color: var(--color-primary); 
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    max-width: 100%;
}


/* Imagen de Gráficos Combinados */
.chart-item img {
    /* La imagen debe llenar el ancho de su contenedor oscuro */
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px; /* Pequeño ajuste para que se vea el fondo oscuro si la imagen es transparente */
}


/*
=====================================================
--- 3. Imagen del Mapa (Artículo tipo Card) ---
=====================================================
*/
.map-article {
    /* El mapa se trata como un elemento destacado con su propio título */
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.article-title {
    /* Título oscuro y centrado */
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary) !important; 
    margin-bottom: 25px !important;
}

.impact-diagram-img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border); 
    border-radius: 6px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); 
    transition: box-shadow 0.3s ease;
}

.impact-diagram-img:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

.map-caption {
    font-style: italic;
    font-size: 0.9em;
    color: var(--color-text-muted) !important; /* Usamos muted para el pie de foto */
}


/*
=====================================================
--- 4. Pregunta Final (Simple y Directa) ---
=====================================================
*/
.impact-question-div.final-callout {
    /* Contenedor simple, sin fondo de bloque ni líneas */
    background-color: transparent; 
    border: none;
    padding: 0;
    margin: 40px auto 0 auto;
    box-shadow: none;
}

.final-question {
    font-size: 2.45rem; 
    font-weight: 500;
    color: var(--color-primary); 
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0;
    /* Eliminamos todas las barras de borde que no te gustan */
    border-top: none;
    border-bottom: none;
    display: block; /* Vuelve a ser un bloque de texto normal */
    text-align: center;
}

.final-question strong {
    font-weight: 700;
    color: var(--color-accent); 
}


/*
=====================================================
--- 5. Responsive ---
=====================================================
*/
@media (max-width: 768px) {
    .section-title {
        font-size: 2em;
    }
    
    .charts-section {
        margin-bottom: 40px;
    }

    .impact-question-quote {
        padding: 20px;
    }

    .impact-question-quote p {
        font-size: 1.1rem;
    }
}

.final-question {
    font-family: 'Inter', system-ui, sans-serif; /* O la fuente de tu sitio */
    font-size: 1.5rem;       /* Tamaño grande para destacar */
    font-weight: 700;        /* Negrita (puedes quitar los ** del texto) */
    text-align: center;      /* Centrado para dar importancia */
    color: #2c3e50;          /* Gris oscuro elegante (no negro puro) */
    margin: 3rem auto;       /* Espaciado vertical generoso */
    max-width: 800px;        /* Evita que sea muy ancho en pantallas grandes */
    line-height: 1.4;
    padding: 0 1rem;
}