.nav{
    width:100%;
    height:105px;

    background:white;

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

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

    gap:300px;

    padding:0 60px;

    position:fixed;
    top:0;
    left:0;

    z-index:9999;

    /* SOMBRA INTERIOR */
    box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.06),
    inset 0 12px 25px rgba(255,255,255,0.55),
    inset 0 -12px 25px rgba(0,0,0,0.03),
    0 10px 30px rgba(0,0,0,0.05);
}


.menu li a{
    text-decoration:none;

    color:#181818;

    font-size:13px;
    font-weight:100;

    letter-spacing:.8px;

    transition:.35s ease;

    position:relative;
}

/* LINEA */
.menu li a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-10px;

    width:0%;
    height:2px;

    background:#e10600;

    transition:.35s ease;
}



/* =========================================
NOSOTROS HERO TODOIMPORTA
ULTRA PREMIUM
BLANCO • NEGRO • ROJO
========================================= */

.nosotros-hero{
    position:relative;

    padding:160px 80px 120px;

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:70px;

    align-items:center;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7f7f7 100%
    );

    overflow:hidden;
}

/* EFECTO */
.nosotros-hero::before{
    content:'';

    position:absolute;

    top:-250px;
    right:-250px;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(225,6,0,0.05),
        transparent 70%
    );

    pointer-events:none;
}

/* =========================================
INFO
========================================= */

.nosotros-info{
    position:relative;

    z-index:2;
}

/* MINI */
.mini-title{
    display:inline-block;

    margin-bottom:24px;

    font-size:12px;
    font-weight:800;

    letter-spacing:5px;

    color:#c40000;

    text-transform:uppercase;
}

/* TITULO */
.nosotros-info h1{
    font-size:52px;

    line-height:1.02;

    font-weight:800;

    color:#111111;

    margin-bottom:34px;

    letter-spacing:-3px;
}

/* TEXTOS */
.nosotros-info p{
    font-size:14px;

    line-height:2;

    color:#555555;

    margin-bottom:28px;

    max-width:760px;
}

/* =========================================
DATOS
========================================= */

.nosotros-datos{
    display:flex;

    gap:22px;

    margin-top:50px;

    flex-wrap:wrap;
}

/* CARD */
.nosotros-datos div{
    min-width:210px;

    padding:28px 26px;

    border-radius:28px;

    background:#ffffff;

    border:
    1px solid rgba(0,0,0,0.06);

    box-shadow:
    0 18px 45px rgba(0,0,0,0.06);

    transition:.45s ease;
}

/* HOVER */
.nosotros-datos div:hover{
    transform:
    translateY(-8px);

    box-shadow:
    0 28px 55px rgba(0,0,0,0.12);
}

/* NUMERO */
.nosotros-datos strong{
    display:block;

    font-size:34px;

    font-weight:800;

    color:#c40000;

    margin-bottom:10px;

    letter-spacing:-1px;
}

/* TEXTO */
.nosotros-datos span{
    font-size:15px;

    color:#666666;

    line-height:1.7;
}

/* =========================================
IMAGEN
========================================= */

.nosotros-img{
    position:relative;

    z-index:2;
}

/* EFECTO BORDE */
.nosotros-img::before{
    content:'';

    position:absolute;

    top:-18px;
    left:-18px;

    width:100%;
    height:100%;

    border-radius:38px;

    border:
    2px solid rgba(196,0,0,0.16);

    z-index:-1;
}

/* IMG */
.nosotros-img img{
    width:100%;
    height:760px;

    object-fit:cover;

    border-radius:38px;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.14);

    transition:1s ease;
}

/* HOVER */
.nosotros-img:hover img{
    transform:scale(1.03);
}

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

@media(max-width:1350px){

    .nosotros-info h1{
        font-size:56px;
    }

}

@media(max-width:1100px){

    .nosotros-hero{
        grid-template-columns:1fr;

        gap:50px;
    }

    .nosotros-img img{
        height:520px;
    }

}

@media(max-width:768px){

    .nosotros-hero{
        padding:120px 20px 90px;
    }

    .nosotros-info h1{
        font-size:38px;

        letter-spacing:-1px;
    }

    .nosotros-info p{
        font-size:16px;
    }

    .nosotros-datos{
        flex-direction:column;
    }

    .nosotros-img img{
        height:420px;
    }

}








.btn-red{

    background:#e10600;
    color:#fff;

    padding:18px 38px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.btn-red:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 30px rgba(225,6,0,.3);
}




/* =========================================
BOTON DARK IGUAL AL RED
========================================= */

.btn-dark{

    background:#111111;
    color:#fff;

    padding:18px 38px;

    border-radius:16px;
margin-left: 20px;
    text-decoration:none;

    font-weight:700;

    transition:.3s;

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

/* HOVER */
.btn-dark:hover{

    transform:translateY(-4px);

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

    background:#1b1b1b;
}










/* =========================================
ABOUT TODOIMPORTA
ULTRA PREMIUM
========================================= */

.about-resumen{
    position:relative;

    padding:120px 80px;

    display:grid;

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

    gap:30px;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7f7f7 100%
    );
}

/* =========================================
CARD
========================================= */

.about-card{
    position:relative;

    height:760px;

    overflow:hidden;

    border-radius:38px;

    background:#111111;

    box-shadow:
    0 30px 70px rgba(0,0,0,0.12);

    transition:.6s ease;
}

/* HOVER */
.about-card:hover{
    transform:
    translateY(-12px);
}

/* IMG */
.about-card img{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

/* HOVER IMG */
.about-card:hover img{
    transform:scale(1.08);
}

/* OVERLAY */
.about-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.96) 0%,
        rgba(0,0,0,0.70) 45%,
        rgba(0,0,0,0.18) 100%
    );
}

/* =========================================
CONTENT
========================================= */

.about-content{
    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    padding:42px;

    z-index:3;
}

/* MINI */
.about-mini{
    display:inline-block;

    margin-bottom:18px;

    font-size:11px;
    font-weight:800;

    letter-spacing:4px;

    color:#ff2d2d;
}

/* TITULO */
.about-content h3{
    font-size:48px;

    color:#ffffff;

    margin-bottom:28px;

    font-weight:800;

    letter-spacing:-1px;
}

/* TEXTOS */
.about-content p{
    font-size:16px;

    line-height:2;

    color:rgba(255,255,255,0.82);

    margin-bottom:22px;
}

/* =========================================
VALORES
========================================= */

.valores-lista{
    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

/* ITEM */
.valores-lista span{
    padding:14px 18px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    color:#ffffff;

    font-size:13px;
    font-weight:600;

    backdrop-filter:blur(10px);

    transition:.35s ease;
}

/* HOVER */
.valores-lista span:hover{
    background:#e10600;

    transform:
    translateY(-3px);
}

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

@media(max-width:1400px){

    .about-resumen{
        grid-template-columns:1fr;
    }

    .about-card{
        height:650px;
    }

}

@media(max-width:768px){

    .about-resumen{
        padding:90px 20px;
    }

    .about-card{
        height:auto;
        min-height:620px;
    }

    .about-content{
        padding:30px;
    }

    .about-content h3{
        font-size:36px;
    }

}






















/* =========================================
BLOG TODOIMPORTA
ULTRA PREMIUM
========================================= */

.blog{
    position:relative;

    padding:120px 80px;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8f8f8 100%
    );

    overflow:hidden;
}

/* EFECTO */
.blog::before{
    content:'';

    position:absolute;

    top:-220px;
    right:-220px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(225,6,0,0.05),
        transparent 70%
    );

    pointer-events:none;
}

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

.blog-header{
    position:relative;

    text-align:center;

    max-width:980px;

    margin:auto auto 80px;

    z-index:2;
}

/* MINI */
.blog-mini-title{
    display:inline-block;

    margin-bottom:24px;

    font-size:12px;
    font-weight:800;

    letter-spacing:5px;

    color:#c40000;
}

/* TITULO */
.blog-header h2{
    font-size:62px;

    line-height:1.05;

    font-weight:800;

    color:#111111;

    margin-bottom:28px;

    letter-spacing:-2px;
}

/* SUB */
.blog-sub{
    font-size:18px;

    line-height:2;

    color:#666666;
}

/* =========================================
LAYOUT
========================================= */

.blog-layout{
    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:35px;

    position:relative;

    z-index:2;
}

/* =========================================
FEATURE
========================================= */

.blog-feature{
    position:relative;

    overflow:hidden;

    border-radius:40px;

    background:#111111;

    box-shadow:
    0 30px 70px rgba(0,0,0,0.12);

    transition:.5s ease;
}

/* HOVER */
.blog-feature:hover{
    transform:
    translateY(-10px);
}

/* IMG */
.blog-feature img{
    width:100%;
    height:760px;

    object-fit:cover;

    transition:1s ease;
}

/* HOVER IMG */
.blog-feature:hover img{
    transform:scale(1.06);
}

/* INFO */
.blog-feature .info{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:45px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.96),
        rgba(0,0,0,0.10)
    );
}

/* =========================================
TAG
========================================= */

.tag{
    display:inline-block;

    margin-bottom:18px;

    padding:10px 18px;

    border-radius:50px;

    background:#e10600;

    color:#ffffff;

    font-size:11px;
    font-weight:700;

    letter-spacing:2px;
}

/* TITULO */
.blog-feature h3{
    font-size:42px;

    line-height:1.08;

    color:#ffffff;

    margin-bottom:24px;

    font-weight:800;
}

/* TEXTO */
.blog-feature p{
    font-size:17px;

    line-height:2;

    color:rgba(255,255,255,0.80);

    margin-bottom:28px;
}

/* LINK */
.blog-feature a{
    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.blog-feature a:hover{
    color:#ff2d2d;
}

/* =========================================
LISTA
========================================= */

.blog-list{
    display:flex;

    flex-direction:column;

    gap:28px;
}

/* MINI CARD */
.blog-mini{
    display:flex;

    gap:22px;

    align-items:center;

    padding:24px;

    border-radius:32px;

    background:#ffffff;

    border:
    1px solid rgba(0,0,0,0.06);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.06);

    transition:.45s ease;
}

/* HOVER */
.blog-mini:hover{
    transform:
    translateY(-6px);

    box-shadow:
    0 30px 60px rgba(0,0,0,0.12);
}

/* IMG */
.blog-mini img{
    width:180px;
    height:180px;

    object-fit:cover;

    border-radius:24px;
}

/* TITULO */
.blog-mini h3{
    font-size:24px;

    line-height:1.3;

    color:#111111;

    margin-bottom:16px;

    font-weight:800;
}

/* LINK */
.blog-mini a{
    text-decoration:none;

    color:#c40000;

    font-weight:700;

    transition:.3s;
}

.blog-mini a:hover{
    color:#111111;
}

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

@media(max-width:1300px){

    .blog-layout{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .blog{
        padding:90px 20px;
    }

    .blog-header h2{
        font-size:40px;

        letter-spacing:-1px;
    }

    .blog-sub{
        font-size:16px;
    }

    .blog-feature img{
        height:500px;
    }

    .blog-feature .info{
        padding:30px;
    }

    .blog-feature h3{
        font-size:30px;
    }

    .blog-mini{
        flex-direction:column;
        align-items:flex-start;
    }

    .blog-mini img{
        width:100%;
        height:240px;
    }

}