/*=============================
    VARIABLES
=============================*/

:root{
    --azul-oscuro:#0B3C5D;
    --azul:#328CC1;
    --azul-claro:#5DADE2;
    --fondo:#F5F7FA;
    --blanco:#FFFFFF;
    --texto:#333;
    --sombra:0 8px 20px rgba(0,0,0,0.12);
    --radio:12px;
}


/*=============================
    ESTILOS GENERALES
=============================*/

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


html{
    scroll-behavior:smooth;
}


body{
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    background:var(--fondo);
    color:var(--texto);
    line-height:1.6;
}


a{
    text-decoration:none;
}


img{
    width:100%;
    display:block;
    border-radius:var(--radio);
}


.contenedor{
    width:90%;
    max-width:1200px;
    margin:2rem auto;
}


/*=============================
    ENCABEZADO
=============================*/

.encabezado{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

    background:linear-gradient(
        135deg,
        var(--azul-oscuro),
        #06263b
    );

    padding:1.5rem 2rem;
    border-radius:var(--radio);

    box-shadow:var(--sombra);
}


.logo img{

    width:200px;
    transition:.3s;
}


.logo img:hover{

    transform:scale(1.05);

}



.menu{

    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}


.menu a{

    color:white;

    padding:.8rem 1.3rem;

    border-radius:8px;

    transition:.3s;

    font-weight:600;

}



.menu a:hover,
.activo{

    background:var(--azul);

    transform:translateY(-3px);

}


/*=============================
    BANNER
=============================*/

.banner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:3rem;

    margin-top:2rem;

    background:white;

    padding:3rem;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

}


.banner-texto,
.banner-imagen{

    flex:1;

}


.banner h2{

    color:var(--azul-oscuro);

    font-size:2rem;

    margin-bottom:1rem;

}


.banner p{

    text-align:justify;

}


.boton{

    display:inline-block;

    margin-top:1.5rem;

    background:var(--azul-oscuro);

    color:white;

    padding:1rem 2rem;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

}


.boton:hover{

    background:var(--azul);

    transform:translateY(-3px);

}


/*=============================
    TITULOS
=============================*/

.titulo,
.titulo-pagina{
    text-align: center;
    margin: 40px;
    color: #06263b;
}

.titulo h2,
.titulo-pagina h2{
    color:var(--azul-oscuro);
    font-size:2rem;

}


/*=============================
    PRESENTACION
=============================*/

.presentacion{
    background: white;
    padding: 20px 30px;
    margin-top: 30px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.presentacion p{
    text-align: justify;
    margin-top: 10px; /* CORREGIDO */
}

/*=============================
    TARJETAS
=============================*/
.destacados,
.lista,
.lista-beneficios,
.lista-valores,
.pasos,
.galeria{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.card,
.item,
.valor,
.paso,
.beneficio,
.proyecto,
.pregunta{
    flex:1 1 18rem;
    background:white;
    padding:2rem;
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    transition:.3s;
}

.card:hover,
.item:hover,
.valor:hover,
.paso:hover,
.beneficio:hover,
.proyecto:hover,
.pregunta:hover{


    transform:translateY(-8px);

}



.card h3,
.item h3,
.valor h3,
.paso h3,
.beneficio h3,
.proyecto h3,
.pregunta h3{

    color:var(--azul-oscuro);

    margin-bottom:1rem;

}



.card p,
.item p,
.valor p,
.paso p,
.beneficio p,
.proyecto p,
.pregunta p{

    text-align:justify;

}


/*=============================
    SECCIONES
=============================*/


.seccion,
.contacto,
.mision-vision{


    display:flex;

    gap:2rem;

    flex-wrap:wrap;

    margin-top:2rem;

}



.imagen,
.texto,
.info,
.caja{

    flex:1;

}



.texto p,
.info p,
.caja p{

    text-align:justify;

}


/*=============================
    TABLAS
=============================*/


table{

    width:100%;

    border-collapse:collapse;

    margin-top:2rem;

    background:white;

    box-shadow:var(--sombra);

}



th{

    background:var(--azul-oscuro);

    color:white;

}



th,
td{

    border:1px solid #ddd;

    padding:1rem;

    text-align:center;

}



tr:hover{

    background:#eef6fb;

}


/*=============================
    VIDEO
=============================*/

.video{

    margin-top:3rem;

    background:white;

    padding:2rem;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

}



.video h2{

    color:var(--azul-oscuro);

}


/*=============================
    CTA
=============================*/


.cta{

    margin-top:3rem;

    background:linear-gradient(
        135deg,
        var(--azul),
        var(--azul-oscuro)
    );

    color:white;

    padding:3rem;

    border-radius:var(--radio);

    text-align:center;

}



.cta .boton{

    background:white;

    color:var(--azul-oscuro);

}



.cta .boton:hover{

    background:#ddd;

}


/*=============================
    PIE
=============================*/


.pie{

    background:var(--azul-oscuro);

    color:white;

    text-align:center;

    padding:2rem;

    margin-top:3rem;

    border-radius:var(--radio);

}


/*=============================
    RESPONSIVE
=============================*/


@media(max-width:800px){


    .encabezado{

        flex-direction:column;

        gap:1.5rem;

        text-align:center;

    }



    .menu{

        justify-content:center;

    }



    .banner{

        flex-direction:column;

        padding:2rem;

    }



    .seccion,
    .contacto,
    .mision-vision{

        flex-direction:column;

    }



    table{

        font-size:.9rem;

    }

}



@media(max-width:480px){


    .contenedor{

        width:95%;

    }



    .menu a{

        width:100%;

        text-align:center;

    }



    .banner h2{

        font-size:1.5rem;

    }


}