:root{

    /* Colores de marca */

    --primary:#0C3B63;
    --primary-dark:#082A46;

    --secondary:#C9A227;

    --white:#ffffff;

    --dark:#1A1A1A;

    --text:#555555;

    --light:#F8FAFC;

    --border:#E5E7EB;


    /* Sombras */

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


    --shadow-hover:
    0 20px 50px rgba(0,0,0,.12);



    /* Bordes */

    --radius:18px;


    /* Transiciones */

    --transition:
    all .3s ease;


}





/* =========================

RESET

========================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

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

color:var(--text);

background:var(--white);

line-height:1.7;

}





h1,
h2,
h3,
h4{

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

color:var(--dark);

line-height:1.2;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}





/* =========================

CONTENEDOR

========================= */


.container{

width:min(1180px,90%);

margin:auto;

}





/* =========================

SECCIONES

========================= */


.section{

padding:100px 0;

}



.section-header{

max-width:750px;

margin:0 auto 60px;

text-align:center;

}



.section-header h2{

font-size:42px;

margin-bottom:20px;

}



.section-header p{

font-size:18px;

}





.eyebrow{

font-size:14px;

font-weight:700;

letter-spacing:2px;

color:var(--secondary);

margin-bottom:15px;

}





/* =========================

HEADER

========================= */


.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:25px 0;

transition:var(--transition);

}



.header.scrolled{

background:rgba(255,255,255,.95);

backdrop-filter:blur(12px);

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

}





.header-container{

display:flex;

justify-content:space-between;

align-items:center;

}




.logo{

font-family:'Poppins';

font-size:30px;

font-weight:800;

color:var(--white);

}



.header.scrolled .logo{

color:var(--primary);

}




.logo span{

display:block;

font-family:'Inter';

font-size:12px;

letter-spacing:2px;

font-weight:500;

}





.navigation{

display:flex;

align-items:center;

gap:35px;

}



.navigation a{

font-weight:500;

color:var(--white);

transition:var(--transition);

}



.header.scrolled .navigation a{

color:var(--dark);

}



.navigation a:hover{

color:var(--secondary);

}





/* =========================

BOTONES

========================= */


.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 35px;

background:var(--secondary);

color:#111;

font-weight:700;

border-radius:50px;

transition:var(--transition);

}



.btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 15px 30px rgba(201,162,39,.35);

}





.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 35px;

border:2px solid rgba(255,255,255,.4);

color:white;

font-weight:600;

border-radius:50px;

transition:var(--transition);

}



.btn-secondary:hover{

background:white;

color:var(--primary);

}




.btn-outline{

display:inline-flex;

padding:16px 35px;

border:2px solid var(--primary);

color:var(--primary);

border-radius:50px;

font-weight:700;

}





.btn-whatsapp{

background:#25D366;

padding:12px 25px;

border-radius:50px;

color:white!important;

font-weight:700;

}





/* =========================

HERO

========================= */


.hero{

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(
120deg,
rgba(12,59,99,.98),
rgba(12,59,99,.85)
),

url("../assets/images/hero.webp");

background-size:cover;

background-position:center;

color:white;

padding-top:120px;

}





.hero-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:70px;

align-items:center;

}





.hero h1{

font-size:58px;

color:white;

margin-bottom:25px;

}



.hero-text{

font-size:20px;

color:rgba(255,255,255,.9);

margin-bottom:35px;

}





.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

}





.hero-image{

position:relative;

}



.hero-image img{

border-radius:30px;

box-shadow:

0 30px 60px rgba(0,0,0,.25);

}




.floating-card{

position:absolute;

bottom:30px;

left:-30px;

background:white;

color:var(--dark);

padding:25px;

border-radius:20px;

box-shadow:var(--shadow);

font-weight:700;

}



.floating-card p{

margin-top:5px;

font-weight:500;

}






/* =========================

TRUST BOX

========================= */


.trust-box{

display:flex;

gap:40px;

}



.trust-box div{

display:flex;

flex-direction:column;

}



.trust-box strong{

font-size:32px;

color:white;

}



.trust-box span{

font-size:14px;

color:rgba(255,255,255,.8);

}





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


.services{

background:var(--light);

}



.services-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}





.service-card{

background:white;

padding:40px 30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:var(--transition);

}



.service-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}




.service-card .icon{

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

background:

rgba(201,162,39,.15);

border-radius:50%;

margin-bottom:25px;

}



.service-card h3{

font-size:24px;

margin-bottom:15px;

color:var(--primary);

}





.service-card p{

color:var(--text);

}







/* =========================
   BENEFICIOS
========================= */


.benefits-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}





.benefit-card{

padding:35px;

border-radius:var(--radius);

background:white;

border:

1px solid var(--border);

transition:var(--transition);

}





.benefit-card:hover{

border-color:var(--secondary);

transform:translateY(-5px);

}




.benefit-card h3{

font-size:20px;

color:var(--primary);

margin-bottom:15px;

}







/* =========================
   PROCESO
========================= */


.process{

background:

linear-gradient(
135deg,
#f8fafc,
#ffffff
);

}




.process-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

}





.process-step{

text-align:center;

position:relative;

}



.process-step span{

display:flex;

width:80px;

height:80px;

margin:auto auto 25px;

align-items:center;

justify-content:center;

background:var(--primary);

color:white;

border-radius:50%;

font-size:25px;

font-weight:700;

}





.process-step h3{

color:var(--primary);

margin-bottom:15px;

}







/* =========================
   TESTIMONIOS
========================= */


.testimonials{

background:var(--light);

}



.testimonial-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.testimonial-card{

background:white;

padding:40px;

border-radius:var(--radius);

box-shadow:var(--shadow);

position:relative;

}





.testimonial-card::before{

content:"“";

font-size:80px;

color:var(--secondary);

position:absolute;

top:10px;

left:25px;

font-family:serif;

opacity:.5;

}





.testimonial-card p{

padding-top:40px;

font-size:18px;

margin-bottom:25px;

}





.testimonial-card strong{

color:var(--primary);

}







/* =========================
   FAQ
========================= */


.faq-container{

max-width:850px;

margin:auto;

}





.faq details{

background:white;

border:

1px solid var(--border);

padding:25px 30px;

margin-bottom:15px;

border-radius:15px;

cursor:pointer;

}





.faq summary{

font-weight:700;

font-size:18px;

color:var(--primary);

}





.faq p{

margin-top:20px;

}







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


.cta{

background:var(--primary);

color:white;

}



.cta-box{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

padding:70px;

border-radius:30px;

background:

linear-gradient(
135deg,
#0C3B63,
#082A46
);

}





.cta h2{

font-size:45px;

color:white;

margin-bottom:20px;

}



.cta p{

color:rgba(255,255,255,.85);

font-size:18px;

}



.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}







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


.contact-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:70px;

align-items:start;

}





.contact-info h2{

font-size:42px;

margin-bottom:25px;

}





.contact-info ul{

margin-top:35px;

}



.contact-info li{

margin-bottom:15px;

}





.official-link{

margin-top:35px;

font-weight:600;

}



.official-link a{

color:var(--primary);

}





.contact-form{

background:white;

padding:45px;

border-radius:25px;

box-shadow:var(--shadow);

}





.form-group{

margin-bottom:20px;

}



.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}



.form-group input,
.form-group textarea{

width:100%;

padding:15px 20px;

border:

1px solid var(--border);

border-radius:12px;

font-family:inherit;

font-size:16px;

}



.form-group input:focus,
.form-group textarea:focus{

outline:none;

border-color:var(--primary);

}








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


.footer{

background:#071C2D;

color:white;

padding:80px 0 30px;

}



.footer-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:40px;

}




.footer h3{

color:white;

font-size:32px;

margin-bottom:20px;

}



.footer h4{

color:var(--secondary);

margin-bottom:20px;

}



.footer li{

margin-bottom:10px;

color:rgba(255,255,255,.75);

}





.footer-bottom{

margin-top:50px;

padding-top:30px;

border-top:

1px solid rgba(255,255,255,.15);

text-align:center;

font-size:14px;

}



/* =========================
   ANIMACIONES
========================= */


.hidden{

opacity:0;

transform:

translateY(40px);

transition:

all .7s ease;

}



.show{

opacity:1;

transform:

translateY(0);

}


/* Sección de confianza */

.confidence {
    background-color: #f7f9fc;
    padding: 70px 20px;
}

.container {
    width: min(1100px, 90%);
    margin: 0 auto;
}

.confidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* Tarjetas */

.confidence-grid > div {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.confidence-grid > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}


/* Títulos */

.confidence-grid h3 {
    color: #12304a;
    font-size: 1.35rem;
    margin-bottom: 15px;
    font-weight: 700;
}


/* Texto */

.confidence-grid p {
    color: #5f6b75;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}


/* Responsive */

@media (max-width: 900px) {

    .confidence-grid {
        grid-template-columns: 1fr;
    }

    .confidence {
        padding: 50px 20px;
    }

}