/* ==========================
NAVBAR
========================== */
.navbar{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:1000;

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

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    transition:.4s ease;
}
.navbar.scrolled{

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(0,0,0,.08);

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

.nav-container{

    height:90px;

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

.logo img{
    height:65px;
    width:auto;
    display:block;
}

.nav-menu{
    display:flex;
    gap:2rem;
}

.nav-menu a{
    font-weight:500;
    transition:.3s;
}

.nav-menu a:hover{
    color:var(--primary);
}

.btn-nav{

    background:var(--primary);

    color:white;

    padding:.9rem 1.4rem;

    border-radius:12px;

    font-weight:600;

    transition:.3s;
}

.btn-nav:hover{
    transform:translateY(-2px);
}

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

.page-header{
min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(
    135deg,
    #ffffff,
    #f5f5f5
);

}

.page-header-content{
display:grid;
grid-template-columns: 1fr 1fr;
gap:6rem;
align-items:center;
}

.page-header-text{
    max-width:650px;
}

.page-header h1{
    font-size: clamp(3.8rem, 6vw, 5rem);
    font-weight: 800;
    line-height:     1.08;
    margin-bottom: 1.5rem;
    letter-spacing: -1.5px;
}

.page-header p{
color:var(--gray);
line-height:1.8;
font-size:1.1rem;
}

.page-header-image img{
height:550px;
object-fit:cover;
border-radius:24px;
box-shadow:
0 20px 50px rgba(0,0,0,.12);
}

.section-tag{
    display:inline-block;
    padding:.7rem 1.2rem;
    border-radius:999px;
    background:#f0f0f0;
    color:var(--primary);
    font-weight:600;
    margin-bottom:1.5rem;
}


/* ==========================
QUIENES SOMOS
========================== */

.about-company{
background:white;
}

.about-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:5rem;
align-items:center;
}

.about-image img{
border-radius:24px;
height:500px;
object-fit:cover;
}

.about-content h2{
font-size:2.5rem;
margin-bottom:1.5rem;
}

.about-content p{
color:var(--gray);
line-height:1.9;
margin-bottom:1.2rem;
}

/* ==========================
MISSION & VISION
========================== */

.mission-vision{
background:#fafafa;
}
.mission-grid{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:2rem;
}



.mission-card{
background:white;
padding:3rem;
border-radius:24px;
box-shadow:
0 10px 30px rgba(0,0,0,.06);
transition:.3s ease;
}

.mission-card:hover{
transform:
translateY(-8px);
}

.card-icon{
font-size:2.5rem;
margin-bottom:1rem;
}

.mission-card h3{
margin-bottom:1rem;
color:var(--primary);
}

.mission-card p{
color:var(--gray);
line-height:1.8;
}

/* ==========================
VALUES
========================== */

.values{


background:white;


}

.section-center{


text-align:center;

margin-bottom:4rem;


}

.section-center h2{


font-size:2.5rem;


}

.values-grid{


display:grid;

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

gap:2rem;


}

.value-card{
background:white;
padding:2rem;
border-radius:24px;
text-align:center;
box-shadow:
0 10px 25px rgba(0,0,0,.05);
transition:.3s ease;


}

.value-card:hover{
transform:
translateY(-8px);
box-shadow:
0 15px 35px rgba(129, 11, 11, 0.226);


}

.value-card h3{
margin-bottom:1rem;
color:var(--primary);


}

.value-card p{
color:var(--gray);
line-height:1.7;


}

/* ==========================
APPROACH
========================== */

.approach{


background:#fafafa;


}

.approach-content{


max-width:850px;

margin:auto;

text-align:center;


}

.approach-content h2{


font-size:2.5rem;

margin-bottom:1.5rem;


}

.approach-content p{


color:var(--gray);

line-height:1.9;

font-size:1.1rem;


}

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

.cta-section{


background:
linear-gradient(
    135deg,
    #8B0000,
    #6d0000
);

text-align:center;

color:white;


}

.cta-section h2{


font-size:3rem;

margin-bottom:1rem;


}

.cta-section p{


margin-bottom:2rem;


}

.cta-section .btn-primary{


background:white;

color:var(--primary);
}

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

.footer{

    background:#111111;

    color:white;

    text-align:center;

    padding:4rem 0;
}

.footer h3{

    margin-bottom:1rem;
}

.footer p{

    opacity:.7;
}

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

@media(max-width:900px){
.page-header-content,
.about-grid,
.mission-grid{

    grid-template-columns:1fr;
}

.values-grid{

    grid-template-columns:1fr;
}

.page-header-image img,
.about-image img{

    height:auto;
}

.section-center h2,
.about-content h2,
.approach-content h2{

    font-size:2rem;
}
}