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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#F5F7FA;
    color:#333;

}

/*========== HEADER ==========*/

header{

    position:sticky;

    top:0;

    width:100%;

    background:#ffffff;

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

    z-index:1000;

    transition:.35s;

}

header.scroll{

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

header.scroll nav{

    padding:10px 40px;

}

nav{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:26px 40px;

    transition:padding .3s ease;

}

/* MENÚ HAMBURGUESA */ 

#menu{

    display:none;

}

.menu-hamburguesa{

    display:none;

    font-size:30px;

    color:#0B4F8C;

    cursor:pointer;

}

.marca{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo{

    width:70px;

    transition:.3s;

}

.logo:hover{

    transform:scale(1.05);

}

.nombre{

    display:flex;

    flex-direction:column;

    line-height:1;

}

.empresa{

    font-size:14px;

    letter-spacing:3px;

    color:#555;

    font-weight:500;

}

.alpha{

    font-size:30px;

    font-weight:700;

    color:#0B4F8C;
}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav a{

    text-decoration:none;

    color:#333;

    font-weight:600;

    transition:.3s;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:3px;

    background:#0B4F8C;

    transition:.3s;

    border-radius:20px;

}

nav a:hover{

    color:#0B4F8C;
    color:#0B4F8C;

transform:scale(1.05);

}

nav a:hover::after{

    width:100%;

}

/*========== HERO ==========*/

.hero{

    background:linear-gradient(
180deg,
#F8FAFC 0%,
#EEF4FA 100%);

    max-width:1200px;

    margin:auto;

    min-height:90vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    padding:120px 40px 80px;

}

.hero-texto{

    flex:1;

}

.etiqueta{

    display:inline-block;

    background:#E6F2FF;

    color:#0B4F8C;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-texto h1{

    font-size:58px;

    color:#102A43;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-texto p{

    font-size:20px;

    line-height:1.8;

    color:#555;

    margin-bottom:40px;

}

.hero-botones{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.boton{

    background:#0B4F8C;

    color:white;

    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.boton:hover{

    background:#08365F;

   transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(11,79,140,.35);

}

.boton-secundario{

    border:2px solid #0B4F8C;

    color:#0B4F8C;

    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.boton-secundario:hover{

    background:#0B4F8C;

    color:white;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(11,79,140,.30);

}

.hero-imagen{

    flex:1;

    text-align:center;

}

.hero-imagen img{

    width:100%;

    max-width:520px;

    border-radius:25px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

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

.nosotros{

    max-width:1200px;

    margin:80px auto;

    padding:0 40px;

    display:flex;

    align-items:center;

    gap:60px;

}

.nosotros-imagen{

    flex:1;

}

.nosotros-imagen img{

    width:100%;

    border-radius:20px;

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

}

.nosotros-texto{

    flex:1;

}

.nosotros-texto h2{

    font-size:40px;

    color:#102A43;

    margin-bottom:25px;

}

.nosotros-texto p{

    font-size:18px;

    line-height:1.9;

    margin-bottom:20px;

    color:#555;

}

/*======================================
            SERVICIOS
======================================*/

.servicios{

    background:#ffffff;

    padding:90px 40px;

}

.titulo-seccion{

    max-width:800px;

    margin:0 auto 60px;

    text-align:center;

}

.titulo-seccion span{

    color:#0B4F8C;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}

.titulo-seccion h2{

    margin:15px 0;

    font-size:42px;

    color:#102A43;

}

.titulo-seccion p{

    font-size:18px;

    color:#666;

    line-height:1.8;

}

.contenedor-servicios{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.tarjeta{

    background:#F8FAFC;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.tarjeta:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.icono{

    width:70px;

    height:70px;

    background:#E6F2FF;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:20px;

}

.icono i{

    color:#0B4F8C;

    font-size:34px;

}

.tarjeta h3{

    color:#102A43;

    font-size:28px;

    margin-bottom:15px;

}

.tarjeta p{

    color:#555;

    line-height:1.8;

    margin-bottom:25px;

}

.tarjeta ul{

    list-style:none;

}

.tarjeta ul li{

    padding:12px 0;

    border-bottom:1px solid #E5E5E5;

    color:#444;

}

.tarjeta ul li:last-child{

    border-bottom:none;

}

/*==============================
            GALERÍA
==============================*/


.galeria{

    padding:90px 40px;

    background:#F5F7FA;

}

.contenedor-galeria{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.contenedor-galeria img{

    width:100%;

    height:380px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    cursor:pointer;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        filter .45s ease;

}

.contenedor-galeria img:hover{

    transform:translateY(-8px) scale(1.05);

    box-shadow:0 22px 40px rgba(0,0,0,.22);

    filter:brightness(1.05);

}

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

.contacto{

    padding:100px 40px;

    background:#F8FAFC;

}

.contenedor-contacto{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1.7fr 1fr;

    gap:70px;

    align-items:center;

}

.info-contacto span{

    color:#0B4F8C;

    font-weight:700;

    letter-spacing:2px;

    font-size:14px;

}

.info-contacto h2{

    font-size:42px;

    color:#102A43;

    margin:15px 0 25px;

}

.descripcion{

    font-size:18px;

    color:#555;

    line-height:1.9;

    margin-bottom:40px;

}

.dato{

    padding:18px 0;

    border-bottom:1px solid #E5E5E5;

}

.dato:last-child{

    border:none;

}

.dato h3{

    color:#102A43;

    font-size:20px;

    margin-bottom:8px;

}

/* Color de los iconos */

.dato h3 i{

    color:#0B4F8C;

    margin-right:10px;

    font-size:18px;

}


.dato p{

    color:#666;

    font-size:17px;

}

/* TARJETA AZUL */

.cotizacion{

    background:linear-gradient(160deg,#0B4F8C,#08365F);

    color:white;

    padding:55px 45px;

    border-radius:25px;

    box-shadow:0 20px 40px rgba(0,0,0,.18);

    text-align:center;

}

.mini-titulo{

    display:inline-block;

    letter-spacing:2px;

    font-size:13px;

    opacity:.8;

    margin-bottom:15px;

}

.cotizacion h2{

    font-size:34px;

    margin-bottom:25px;

    line-height:1.3;

}

.cotizacion p{

    line-height:1.9;

    margin-bottom:40px;

    opacity:.95;

}

.boton-whatsapp{

    display:inline-block;

    background:#25D366;

    color:white;

    text-decoration:none;

    padding:17px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.boton-whatsapp:hover{

    transform:translateY(-5px);

    background:#1EBE5D;

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

/*==================================
            FOOTER
==================================*/

footer{

    background:#102A43;

    color:white;

    margin-top:80px;

}

.footer-contenedor{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    padding:70px 40px;

}

.footer-marca img{

    width:75px;

    margin-bottom:20px;

}

.footer-marca h2{

    font-size:30px;

    margin-bottom:20px;

}

.footer-marca span{

    color:#4DA3FF;

}

.footer-marca p{

    line-height:1.8;

    color:#D8E6F2;

}

.footer-menu h3,
.footer-contacto h3{

    margin-bottom:25px;

    color:white;

}

.footer-menu{

    display:flex;

    flex-direction:column;

}

.footer-menu a{

    color:#D8E6F2;

    text-decoration:none;

    margin-bottom:15px;

    transition:.3s;

}

.footer-menu a:hover{

    color:white;

    transform:translateX(6px);

}

.footer-contacto p{

    margin-bottom:15px;

    color:#D8E6F2;

}

.copyright{

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    padding:25px;

    color:#BFD2E3;

    font-size:14px;

}

/*==================================
        BOTÓN WHATSAPP
==================================*/

.whatsapp{

    position:fixed;

    bottom:30px;

    right:30px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:34px;

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

    transition:.3s;

    z-index:9999;

}

.whatsapp:hover{

    transform:scale(1.12);

    background:#1EBE5D;

}

@keyframes latido{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

.whatsapp{

    animation:latido 2.5s infinite;

}

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

@media(max-width:900px){

    nav{

    position:relative;

    flex-direction:row;

    justify-content:space-between;

    width:100%;

    align-items:center;

}

.menu-hamburguesa{

    display:block;

}

nav ul{

    display:none;

    position:absolute;

    top:90px;

    right:20px;

    width:240px;

    background:#fff;

    border-radius:15px;

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

    padding:25px;

    flex-direction:column;

    gap:20px;

    z-index:1001;

}

nav ul.activo{

    display:flex;

}

nav ul a{

    color:#333;

}

    .hero{

        flex-direction:column-reverse;

        text-align:center;

    }

    .hero-texto h1{

         font-size:34px;

        line-height:1.2;

    }

    .hero-botones{

        justify-content:center;

    }

    .nosotros{

        flex-direction:column;

        text-align:center;

    }

    /* SERVICIOS */

.servicios-grid{

    grid-template-columns:1fr;
    gap:30px;

}

.contenedor-servicios{

    grid-template-columns:1fr;

    gap:30px;

}

.tarjeta{

    width:100%;

}

    /* GALERÍA */

    .galeria h2{

        font-size:36px;

    }
    .contenedor-galeria{

        display:grid;

    grid-template-columns:1fr !important;

    gap:25px;

    }

    .foto img{

        height:300px;

    }

    /* CONTACTO */
    
    .contenedor-contacto{

    grid-template-columns:1fr;

    text-align:center;

}

.info-contacto{

    order:2;

}

.cotizacion{

    order:1;

}

.footer-contenedor{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-marca img{

    margin:auto;

    margin-bottom:20px;

}

/* WHATSAPP */

.whatsapp{

    width:58px;

    height:58px;

    right:15px;

    bottom:15px;

    font-size:30px;

}

/* AJUSTES GENERALES PARA CELULAR */

.hero,
.nosotros,
.servicios,
.galeria,
.contacto{

    padding-left:20px;
    padding-right:20px;

}

nav{

    padding:18px 20px;

}

.footer-contenedor{

    padding:60px 20px;

}

.cotizacion{

    padding:40px 25px;

}

.hero{

    gap:35px;

}

.tarjeta{

    padding:30px;

}

.info-contacto h2,
.titulo-seccion h2{

    font-size:34px;

}

.titulo-seccion h2{

    font-size:30px;

}

}