/* HERO */

.hero-nosotros{

    position: relative;

    height: 75vh;

    min-height: 600px;

    background-image:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.35)
    ),
    url("../images/carousel-1.jpg");

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    overflow: hidden;

}

/* Oscurecer imagen */

.overlay{

    position: absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

}

/* Contenido */

.hero-contenido{

    position: relative;

    z-index:2;

    color:white;

}

.hero-subtitulo{

    display:inline-block;

    color:#ffffff;

    letter-spacing:4px;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:20px;

    text-transform:uppercase;

}

.hero-contenido h1{

    font-size:4rem;

    font-weight:800;

    margin-bottom:25px;

}

.hero-contenido p{

    max-width:720px;

    margin:auto;

    font-size:1.25rem;

    line-height:1.9;

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

}

.hero-btn{

    margin-top:45px;

    background:#8E1620;

    color:white;

    padding:15px 42px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.hero-btn:hover{

    background:#70111A;

    color:white;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(142,22,32,.35);

}

@media (max-width:768px){

    .hero-nosotros{

        min-height:500px;

    }

    .hero-contenido h1{

        font-size:2.6rem;

    }

    .hero-contenido p{

        font-size:1.05rem;

    }

}

.scroll-indicador{

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    width: 60px;

    height: 60px;

    border-radius: 50%;

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

    backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,.25);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.8rem;

    animation: scrollBounce 2s infinite;

    transition: all .3s ease;

}

.scroll-indicador:hover{

    background: #8E1620;

    border-color: #8E1620;

    color: white;

    transform: translateX(-50%) scale(1.08);

}

@keyframes scrollBounce{

    0%,20%,50%,80%,100%{

        transform: translateX(-50%) translateY(0);

    }

    40%{

        transform: translateX(-50%) translateY(10px);

    }

    60%{

        transform: translateX(-50%) translateY(5px);

    }

}


/*==================================================
                NUESTRA HISTORIA
==================================================*/

.historia{

    padding:100px 0;

    background:#ffffff;

}

.historia-imagen{

    overflow:hidden;

    border-radius:28px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.historia-imagen img{

    width:100%;

    transition:.5s;

}

.historia-imagen:hover img{

    transform:scale(1.05);

}

.historia-subtitulo{

    display:inline-block;

    color:#8E1620;

    font-weight:700;

    letter-spacing:3px;

    font-size:.9rem;

    margin-bottom:10px;

}

.historia-titulo{

    font-size:2.8rem;

    font-weight:800;

    color:#222;

}

.historia-linea{

    width:80px;

    height:4px;

    background:#8E1620;

    border-radius:10px;

    margin:25px 0;

}

.historia-texto{

    color:#666;

    font-size:1.08rem;

    line-height:1.9;

    margin-bottom:20px;

}

.historia-valores{

    margin-top:35px;

}

.historia-valores div{

    margin-bottom:18px;

    font-size:1.05rem;

    font-weight:500;

}

.historia-valores i{

    color:#8E1620;

    margin-right:12px;

    font-size:1.2rem;

}


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

.valores{

    padding:100px 0;

    background:#f8f9fa;

}

.titulo-pequeno{

    color:#8E1620;

    letter-spacing:3px;

    font-weight:700;

    font-size:.9rem;

}

.titulo-seccion{

    margin-top:10px;

    font-size:3rem;

    font-weight:800;

    color:#222;

}

.linea-seccion{

    width:80px;

    height:4px;

    background:#8E1620;

    margin:25px auto;

    border-radius:20px;

}

.subtitulo-seccion{

    max-width:750px;

    margin:auto;

    color:#666;

    line-height:1.8;

    font-size:1.05rem;

}

.valor-card{

    background:white;

    padding:45px 35px;

    border-radius:25px;

    text-align:center;

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

    transition:.35s;

    height:100%;

    position:relative;

    overflow:hidden;

}

.valor-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#8E1620;

}

.valor-card:hover{

    transform:translateY(-10px);

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

}

.valor-card i{

    font-size:3rem;

    color:#8E1620;

    margin-bottom:25px;

}

.valor-card h4{

    font-weight:700;

    margin-bottom:18px;

}

.valor-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:0;

}

/*=====================================
        MARCAS
======================================*/

.marcas{

    padding:100px 0;

    background:white;

}

.marcas-contenedor{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:70px;

    flex-wrap:wrap;

    margin-top:60px;

}

.marcas-contenedor img{

    max-height:55px;

    max-width:150px;

    object-fit:contain;

    transition:.35s;

}

.marcas-contenedor img:hover{

    filter:none;

    opacity:1;

    transform:scale(1.12);

}

/*====================================
        POR QUÉ ELEGIRNOS
====================================*/

.porque{

    padding:100px 0;

    background:#f8f9fa;

}

.porque-texto{

    color:#666;

    line-height:1.9;

    font-size:1.08rem;

    margin-bottom:25px;

}

.porque-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    height:100%;

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

    transition:.35s;

}

.porque-card:hover{

    transform:translateY(-8px);

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

}

.porque-card i{

    font-size:2.8rem;

    color:#8E1620;

    margin-bottom:20px;

}

.porque-card h5{

    font-weight:700;

    margin-bottom:15px;

}

.porque-card p{

    color:#666;

    margin:0;

    line-height:1.7;

}

.btn-ybrea{

    background:#8E1620;

    color:white;

    padding:14px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

    text-decoration:none;

}

.btn-ybrea:hover{

    background:#6d1018;

    color:white;

    transform:translateY(-3px);

}