:root{

--orange:#ee810f;
--blue:#103857;
--white:#ffffff;
--light:#f8f9fa;
--text:#374151;

}

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

body{

font-family:'Outfit',sans-serif;
background:#fff;
color:var(--text);

}

section img{
width:100%;
display:block;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}



/* HEADER */

.header{

position:fixed;
width:100%;
top:0;
z-index:100;

backdrop-filter:blur(15px);

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

border-bottom:1px solid rgba(255,255,255,.3);

}

.nav{

height:90px;

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

}

.logo{

font-size:32px;
font-weight:700;
color:var(--blue);

}

.logo span{
color:var(--orange);
}

nav ul{

display:flex;
gap:40px;
list-style:none;

}

nav a{

text-decoration:none;
color:var(--blue);
font-weight:500;

}

/* HERO */

.hero{

height:100vh;

background:url("../img/fond_02.png") center center/cover;

position:relative;

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

}

/* .hero:hover{
    background:url("../img/0100.jpg") center center/cover;
    transition: 3.5s;
} */

.overlay{

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(16,56,87,.88),
rgba(16,56,87,.55)
);

}

.hero-content{

position:relative;
z-index:2;

max-width:850px;
text-align:center;
color:white;

}

.badge{

display:inline-block;

padding:10px 18px;

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

backdrop-filter:blur(12px);

border-radius:50px;

margin-bottom:20px;

}

.badge:hover{
    background-color: #ee810f;
}

.hero h1{

font-size:72px;
line-height:1.05;
margin-bottom:25px;

}

.hero p{

font-size:20px;
opacity:.9;
margin-bottom:40px;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;

}

.btn-primary{

background:var(--orange);
color:white;

padding:15px 30px;
border-radius:50px;

text-decoration:none;

transition:.4s;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

border:1px solid white;

color:white;

padding:15px 30px;

border-radius:50px;

text-decoration:none;

}

.btn-secondary:hover {
    background-color: #eab276;
    color: #103857;
    font-weight: 500;
    border-color: #eab276;
}

/* Bottom Whatsapp */
.icom-whatsapp{
    position:fixed;
    bottom:20px;
    right:20px;
    width:60px;
}

/* SECTION */

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title span{

display:inline-block;

background:#f4f4f4;

padding:8px 15px;

border-radius:30px;

color:var(--orange);

margin-bottom:20px;

}

.section-title h2{

font-size:52px;
color:var(--blue);

}

.info-card > p {
    line-height: 1.6em;
}

/* ABOUT */

.about{

padding:140px 0;

}

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.about-image img{
border-radius:35px;
}

/* .about-image > img:hover {
    background: url("../img/fond_03.png") center center/cover;
    transition: 3.5s;
} */

.about-text p{
font-size:1.4em;
line-height:1.5;
margin-bottom:25px;

}

.about-text > h2{
    font-size: 2em;
    margin: 20px 0px;
    color: #103857;
}

/* MAPA  */
.mapaAncho{
    margin: auto;
    width: 100%;
}

/* GRID */

.features{

padding-bottom:140px;

}

.grid-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.grid-layout p {
    font-size: 1.4em;
}

.card{

border-radius:35px;

overflow:hidden;

background:white;

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

}

.info-card,
.stats-card{

padding:50px;

}

.info-card span{

color:var(--orange);

}

.info-card h3{

margin:20px 0;

font-size:34px;
color:var(--blue);

}

.stats-card{

background:#eef6ff;

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

}

.stats-card h3{

font-size:80px;
color:var(--orange);

}

/* METRICS */

.metrics{

background:var(--blue);

padding:100px 0;

}

.metric-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.metric{

background:white;

border-radius:25px;

padding:40px;

text-align:center;

}

.metric h3{

font-size:48px;
color:var(--orange);

}

/* GALLERY */

.gallery{

padding:140px 0;

}

.gallery-grid{

display:grid;

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

gap:20px;

}

.gallery-grid img{

height:320px;

object-fit:cover;

border-radius:25px;

transition:.5s;

}

.gallery-grid img:hover{

transform:scale(1.04);

}

/* CTA */

.cta{

height:650px;

background:url("../img/fond_02.png") center/cover;

position:relative;

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

}

.overlay-dark{

position:absolute;
inset:0;

background: rgba(16,56,87,.87);

}

.cta-content{

position:relative;
z-index:2;

color:white;
text-align:center;

}

.cta-content h2{

font-size:60px;
margin:25px 0 40px;

}

/* FOOTER */

footer{

background:#081e2e;

padding:60px 0;

text-align:center;

color:white;

}

@media(max-width:992px){
    .hero h1{
        font-size:48px;
    }

    .about-grid,
    .grid-layout,
    .metric-grid,
    .gallery-grid{

    grid-template-columns:1fr;

    }

    .gallery{
        padding: 0px;
    }

}

.fit{
    text-fit: grow; /* encaja cualuquier texto , verificar compatibilidad*/
}

@media(max-width:700px){
    .nav ul{
        display: none;

    }

    .gallery{
        padding: 0px;
    }

}