/*=========================================
    ESTILOS GENERALES
=========================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f8f8;
    color:#444;
    line-height:1.8;
}

:root{

    --vino:#6B1022;
    --dorado:#C9A227;
    --gris:#f8f8f8;
    --texto:#555;
    --blanco:#ffffff;

}

/*=========================================
    HERO
=========================================*/

.hero{

    height:80vh;

    background-image:
    linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url("../IMG/1.gif");

    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.overlay{

    width:90%;
}

.hero h1{

    color:white;
    font-size:65px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;

    text-shadow:0 5px 15px rgba(0,0,0,.4);

}

.frase{

    color:white;

    font-size:22px;

}

/*=========================================
    CONTENEDOR
=========================================*/

.contenedor{

    width:90%;
    max-width:1200px;
    margin:auto;

}

/*=========================================
    SOBRE NOSOTROS
=========================================*/

.nosotros{

    padding:90px 0;

}

.nosotros .contenedor{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;

}

.texto{

    flex:1;

}

.texto h2{

    color:var(--vino);

    font-size:42px;

    margin-bottom:25px;

}

.texto p{

    margin-bottom:20px;

    color:var(--texto);

    text-align:justify;

}

.imagen{

    flex:1;
    text-align:center;

}

.imagen img{

    width:100%;
    max-width:500px;

    border-radius:20px;

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

}

/*=========================================
    MISION Y VISION
=========================================*/

.mision-vision{

    background:white;

    padding:90px 0;

}

.mision-vision .contenedor{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

}

.card{

    flex:1;

    min-width:300px;

    background:white;

    border-top:6px solid var(--dorado);

    border-radius:18px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

}

.card i{

    font-size:55px;

    color:var(--dorado);

    margin-bottom:20px;

}

.card h3{

    color:var(--vino);

    font-size:28px;

    margin-bottom:15px;

}

.card p{

    color:var(--texto);

}

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

.valores{

    padding:90px 0;

    background:var(--gris);

}

.valores h2{

    text-align:center;

    color:var(--vino);

    font-size:42px;

    margin-bottom:60px;

}

.contenedor-valores{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}

.valor{

    background:white;

    padding:30px;

    text-align:center;

    border-radius:20px;

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

    transition:.35s;

}

.valor:hover{

    transform:translateY(-8px);

}

.valor i{

    font-size:45px;

    color:var(--dorado);

    margin-bottom:18px;

}

.valor h3{

    color:var(--vino);

    margin-bottom:12px;

}

.valor p{

    color:var(--texto);

}

/*=========================================
    GALERIA
=========================================*/

.galeria{

    padding:90px 0;

    background:white;

}

.galeria h2{

    text-align:center;

    color:var(--vino);

    font-size:42px;

    margin-bottom:50px;

}

.contenedor-carrusel{

    width:92%;

    margin:auto;

}

.owl-carousel img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:18px;

    transition:.4s;

}

.owl-carousel img:hover{

    transform:scale(1.05);

}

.owl-nav{

    text-align:center;

    margin-top:25px;

}

.owl-nav span{

    color:var(--dorado);

    font-size:45px;

}

/*=========================================
    BOTON HOME
=========================================*/

.home{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

}

.home img{

    width:70px;

    height:70px;

    border-radius:50%;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

    transition:.3s;

}

.home img:hover{

    transform:scale(1.1);

}

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

@media(max-width:992px){

.hero{

    height:70vh;

}

.hero h1{

    font-size:48px;

}

.frase{

    font-size:20px;

}

.texto h2{

    text-align:center;

}

.texto{

    order:2;

}

.imagen{

    order:1;

}

}

@media(max-width:768px){

.hero{

    height:60vh;

}

.hero h1{

    font-size:36px;

}

.frase{

    font-size:18px;

}

.texto h2{

    font-size:34px;

}

.valores h2,

.galeria h2{

    font-size:34px;

}

.card{

    padding:25px;

}

.owl-carousel img{

    height:200px;

}

}

@media(max-width:480px){

.hero h1{

    font-size:30px;

}

.frase{

    font-size:16px;

}

.texto h2{

    font-size:28px;

}

.valores h2,

.galeria h2{

    font-size:28px;

}

.home img{

    width:60px;

    height:60px;

}

}