/* --- RESET Y VARIABLES --- */
:root {
    --azul-oscuro: #315293;
    --celeste: #8dcbff;
    --blanco: #ffffff;
    --texto-oscuro: #222222;
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- CABECERA Y NAVEGACIÓN --- */
.cabecera-principal {
    background-color: var(--blanco);
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Sombra sutil para separar la cabecera */
    position: relative; /* Importante para el menú móvil */
    z-index: 1000; /* Asegura que la cabecera quede por encima del contenido */
}

.header-contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo img {
    height: 130px; /* Ajusta la altura de tu logo según necesites */
    width: auto;
    display: block;
}

.navegacion ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.navegacion a {
    text-decoration: none;
    color: var(--azul-oscuro);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Color para la página activa (Servicios) */
.navegacion a.activo {
    color: #4a4a4a; /* Gris oscuro, como en tu imagen */
}

/* Botón Hamburguesa oculto en escritorio */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--azul-oscuro);
    cursor: pointer;
}

/* --- Estilos del Banner --- */
.services-banner {
    /* Fondo con la imagen borrosa (se genera una imagen sintética similar para este código) */
    background-image: url('img/banner-bg.png'); 
    background-size: cover;
    background-position: center;
    height: 700px; /* Ajusta la altura según sea necesario */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.banner-overlay {
    background-color: rgba(49, 82, 147, 0.7);
    width: 80%; /* No ocupa todo el ancho, como en la imagen */
    max-width: 800px;
    padding: 50px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-align: center;
}

.services-title {
    color: #fff;
    font-size: 3.5em; /* Grande y audaz */
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-weight: 700;
}

.marketing-text {
    color: #fff;
    font-size: 1.15em;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* --- Estilos del Botón (CTA) --- */
.cta-block {
    margin-top: 20px;
}

.cta-button {
    display: inline-block;
    background-color: var(--color-azul-boton);
    color: white;
    text-decoration: none;
    padding: 15px 40px;
    font-size: 1.25em;
    font-weight: 700;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
    background-color: #002d5a;
    transform: translateY(-2px);
}

/* --- Responsividad para Móviles --- */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 10px;
    }
    .main-nav ul {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .services-banner {
        height: 500px;
    }
    .banner-overlay {
        width: 90%;
        padding: 30px;
    }
    .services-title {
        font-size: 2.5em;
    }
    .marketing-text {
        font-size: 1em;
    }
    .cta-button {
        padding: 12px 30px;
        font-size: 1.1em;
    }
}

/* --- RESPONSIVE CABECERA (Móviles y Tablets) --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mostramos el botón hamburguesa */
    }

    .navegacion {
        display: none; /* Ocultamos el menú por defecto en móvil */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--blanco);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        padding: 1rem 0;
    }

    /* Clase para mostrar el menú cuando se hace clic en el botón */
    .navegacion.menu-abierto {
        display: block;
    }

    .navegacion ul {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .navegacion li {
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .navegacion li:last-child {
        border-bottom: none;
    }
}

body {
    font-family: var(--fuente-principal);
    line-height: 1.6;
    color: var(--texto-oscuro);
    background-color: var(--blanco);
}

/* --- ESTRUCTURA DE FRANJAS --- */
.servicio-franja {
    width: 100%;
    padding: 5rem 2rem;
}

.contenedor {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- COLORES DE FONDO --- */
.franja-blanca {
    background-color: var(--blanco);
    color: var(--texto-oscuro);
}

.franja-azul-oscuro {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
}

.franja-celeste {
    background-color: var(--celeste);
    color: var(--azul-oscuro);
}

/* --- UTILIDADES DE COLOR DE TEXTO --- */
.color-azul-oscuro { color: var(--azul-oscuro); }
.color-celeste { color: var(--celeste); }

/* --- TIPOGRAFÍA Y CONTENIDOS --- */
.servicio-franja h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.servicio-franja h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.servicio-franja p {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
}

.servicio-franja ul {
    list-style-type: disc;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.servicio-franja ul li {
    margin-bottom: 0.5rem;
}

/* --- ICONOGRAFÍA PRINCIPAL --- */
.icono-servicio {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

/* --- BOTONES (Sin hover por requerimiento) --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    margin-top: 1.5rem;
    border: none;
    cursor: pointer;
}

.btn-celeste {
    background-color: var(--celeste);
    color: var(--azul-oscuro);
}

.btn-azul {
     background-color: var(--azul-oscuro);
    color: var(--blanco);
}


/* Excepción de contraste si el botón va sobre la franja blanca */
.franja-blanca .btn-celeste {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
}

/* --- LAYOUT COLUMNAS (Para listas y subsecciones) --- */
.grid-2-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

/* --- RESPONSIVE DESIGN (Móviles y Tablets) --- */
@media (max-width: 768px) {
    .servicio-franja {
        padding: 3.5rem 1.5rem;
    }
    
    .servicio-franja h2 {
        font-size: 1.8rem;
    }
    
    .grid-2-columnas {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .icono-servicio {
        font-size: 2.8rem;
    }
}
.grid-3-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
/* Contenedor de ancho completo para la sección */
        .seccion-objetivos {
            display: flex; /* Diseño de cuadrícula de dos columnas */
            width: 100%; /* Ancho completo */
            background-color: #ffffff; /* Fondo blanco de la sección */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        }

        /* Columna de texto (40% de ancho) */
        .columna-texto {
            flex: 40; /* 40% del ancho de la cuadrícula */
            padding: 40px; /* Margen interno generoso */
            box-sizing: border-box; /* Incluir relleno en el ancho */
        }

        /* Estilo para el título de la columna de texto */
        .columna-texto h2 {
            color: #1a2a40; /* Azul oscuro corporativo */
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 30px;
        }

        /* Estilo para los párrafos de texto */
        .columna-texto p {
            color: #333333; /* Texto gris oscuro */
            font-size: 16px;
            line-height: 1.6; /* Espaciado entre líneas */
            margin-bottom: 20px; /* Espaciado entre párrafos */
            list-style-type: none; /* Eliminar viñetas */
            padding-left: 0; /* Alinear a la izquierda */
        }

        /* Columna de imagen (60% de ancho) */
        .columna-imagen {
            flex: 60; /* 60% del ancho de la cuadrícula */
            background-color: #a8dadc; /* Fondo azul pastel claro */
            padding: 40px; /* Margen interno generoso */
            box-sizing: border-box; /* Incluir relleno en el ancho */
            display: flex; /* Diseño flexible para el contenido */
            flex-direction: column; /* Apilar contenido verticalmente */
            align-items: center; /* Centrar contenido horizontalmente */
            justify-content: center; /* Centrar contenido verticalmente */
            position: relative; /* Posicionamiento relativo para superposiciones */
        }

        /* Estilo para el texto superpuesto 'asociacionife.es' */
        .columna-imagen .site-link {
            color: #ffffff; /* Texto blanco */
            font-size: 14px;
            margin-bottom: 20px;
            position: absolute;
            top: 20px;
            right: 20px;
        }

        /* Estilo para el texto grande en el gráfico */
        .columna-imagen h3 {
            color: white; /* Texto blanco */
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            line-height: 1.2;
            margin-bottom: 30px;
        }

.persona{
    background-color: white;
}

        /* Estilo para las ilustraciones de las personas */
        .columna-imagen .personas {
            display: flex; /* Diseño flexible para alinear personas */
            justify-content: center; /* Centrar personas horizontalmente */
            gap: 20px; /* Espacio entre personas */
            width: 100%; /* Ocupar todo el ancho de la columna */
        }

        /* Estilo para cada persona individual */
        .columna-imagen .persona {
            width: calc(33.33% - 20px); /* Dividir ancho entre tres */
            text-align: center; /* Centrar texto */
        }

        /* Estilo para las imágenes de las personas */
        .columna-imagen .persona img {
            width: 100px; /* Tamaño de la persona */
            height: auto;
            margin-bottom: 10px;
        }

        /* Estilo para el texto de la persona */
        .columna-imagen .persona p {
            color: #315293; /* Texto blanco */
            font-size: 14px;
            font-weight: bold;
        }

        /* Medios para responsividad (tabletas y dispositivos más pequeños) */
        @media (max-width: 768px) {
            .seccion-objetivos {
                flex-direction: column; /* Apilar columnas verticalmente */
            }

            .columna-texto, .columna-imagen {
                flex: 100; /* Ocupar ancho completo en dispositivos más pequeños */
            }

            .columna-imagen .personas {
                flex-direction: column; /* Apilar personas verticalmente */
                align-items: center; /* Centrar personas */
            }

            .columna-imagen .persona {
                width: 100%; /* Ocupar ancho completo en dispositivos más pequeños */
                margin-bottom: 20px; /* Espaciado entre personas */
            }
        }

/* =========================================
   PIE DE PÁGINA (FOOTER) - LOGOS INSTITUCIONALES
========================================= */
footer {
    display: flex;
    justify-content: space-around; /* Distribuye el espacio entre los logos */
    align-items: center;           /* Centra los logos verticalmente */
    flex-wrap: wrap;               /* Permite que bajen de línea si no caben */
    gap: 2rem;                     /* Espacio entre las columnas */
    padding: 3rem 2rem;            /* Espaciado interno superior/inferior y lateral */
    background-color: var(--blanco, #ffffff); 
    width: 100%;
    border-top: 1px solid #eeeeee; /* Línea sutil para separar el footer del contenido */
    box-sizing: border-box;
}

footer .columna {
    flex: 1;                       /* Hace que las 3 columnas ocupen el mismo espacio */
    display: flex;
    justify-content: center;       /* Centra la imagen dentro de su columna */
    max-width: 250px;              /* Evita que los logos se hagan gigantes en pantallas muy grandes */
}

footer .columna img {
    width: 100%;
    height: auto !important;       /* Fuerza a mantener la proporción real de la imagen */
    max-height: 90px;              /* Límite de altura para que los logos se vean uniformes */
    object-fit: contain;           /* Asegura que la imagen no se recorte ni deforme */
}
.postfooter {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: .5rem;
    font-size: .8rem;
    color: #999;
    margin-top: 15px;
}
/* =========================================
   RESPONSIVE FOOTER (Móviles)
========================================= */
@media (max-width: 768px) {
    footer {
        flex-direction: column;    /* Pone una columna debajo de otra en móviles */
        gap: 3rem;                 /* Aumenta el espacio vertical entre logos en móvil */
    }
}

/* Ajustes Responsive para móviles */
@media (max-width: 768px) {
    .caja-borde {
        padding: 2rem 1.5rem;
    }
    .lista-espaciada p {
        margin-bottom: 2rem;
    }
}