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

    scroll-behavior:smooth;

}
body{

    font-family:'Poppins',sans-serif;

    background:#F5F7FA;

}
.contenedor{

    width:90%;

    max-width:1200px;

    margin:auto;

}

section{

    scroll-margin-top:100px;

}
header{

    background:#0B4F8C;

    padding:15px 0;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}



header .contenedor{

    background:white;

    border-radius:12px;

    padding:15px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

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

.logo img{
    height:60px;
    width:auto;
}
.logo-texto h1{

    color:#0B4F8C;

    font-family:"Times New Roman", Times, serif;
    font-size:38px;
    font-weight:bold;
    letter-spacing:2px;
    line-height:1;
}

.logo-texto p{
    margin:4px 0 0 0;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    color:#76b4eb;
}


nav a{
    color:#0B4F8C;
    
    text-decoration:none;
    margin-left:35px;
    font-size:18px;
    transition:.3s;
}
nav a:hover{

    color:#2F80ED;

}


.inicio{

    height:650px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:white;

    background:
        linear-gradient(
            rgba(11,79,140,.75),
            rgba(11,79,140,.75)
        ),
        url("../img/hero.jpg");

    background-size:cover;
    background-position:center;
}

.inicio h1{

    font-size:52px;

    margin-bottom:20px;

}

.inicio p{

    font-size:22px;

    width:700px;

    max-width:90%;

    line-height:1.6;

    margin-bottom:35px;

}

.boton{

    background:white;

    color:#0B4F8C;

    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.boton:hover{

    background:#FFD54A;

}/*=========================
    SOLUCIONES
==========================*/

.soluciones{

    padding:80px 0;

    background:#f7f8fa;

}

.soluciones h2{

    text-align:center;

    font-size:38px;

    color:#0B4F8C;

}

.subtitulo{

    text-align:center;

    color:#666;

    margin-bottom:50px;

    font-size:20px;

}

.grid-soluciones{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.tarjeta{

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.tarjeta:hover{

    transform:translateY(-6px);

}

.tarjeta h3{

    color:#0B4F8C;

    margin-bottom:15px;

}

.tarjeta p{

    color:#555;

    line-height:1.6;

}
/*==============================
        POR QUÉ VOLPER
===============================*/

.porque{

    padding:80px 0;

    background:white;

}

.porque h2{

    text-align:center;

    font-size:38px;

    color:#0B4F8C;

    margin-bottom:15px;

}

.porque .subtitulo{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;

    color:#666;

    line-height:1.8;

}

.grid-porque{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.card-porque{

    background:#F8F9FB;

    padding:30px;

    border-radius:12px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    transition:.3s;

}

.card-porque:hover{

    transform:translateY(-6px);

}

.card-porque h3{

    color:#0B4F8C;

    margin-bottom:15px;

}

.card-porque p{

    color:#555;

    line-height:1.7;

}
/*=========================
        NOSOTROS
==========================*/

.nosotros{

    padding:80px 0;

    background:white;

}

.nosotros h2{

    text-align:center;

    color:#0B4F8C;

    font-size:38px;

    margin-bottom:50px;

}

.nosotros-contenido{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}

.nosotros-texto h3{

    color:#0B4F8C;

    margin-bottom:20px;

}

.nosotros-texto p{

    color:#555;

    line-height:1.8;

    margin-bottom:20px;

}

.nosotros-destacado{

    background:#0B4F8C;

    color:white;

    padding:30px;

    border-radius:12px;

}

.nosotros-destacado h3{

    margin-top:0;

}

.nosotros-destacado p{

    line-height:1.8;

}

/*=========================
        CONTACTO
==========================*/

.contacto{

    padding:80px 0;

    background:#f7f8fa;

}

.contacto h2{

    text-align:center;

    color:#0B4F8C;

    font-size:38px;

}

.contacto-grid{

    display:grid;

    grid-template-columns:1fr 1.4fr;

    gap:50px;

    margin-top:50px;

}

.datos-contacto h3{

    color:#0B4F8C;

    margin-bottom:20px;

}

.datos-contacto p{

    margin-bottom:18px;

    color:#555;

}

.formulario{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.formulario input,
.formulario textarea{

    padding:14px;

    border:1px solid #ccc;

    border-radius:8px;

    font-family:'Poppins',sans-serif;

}

.formulario textarea{

    height:140px;

    resize:vertical;

}

.formulario button{

    background:#0B4F8C;

    color:white;

    border:none;

    padding:15px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}

.formulario button:hover{

    background:#0E63B5;

}