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

body{
    font-family:Arial, Helvetica, sans-serif;
}

/* ========================= */
/* PRIMERA PANTALLA */
/* ========================= */

.hero{

    min-height:100vh;

    background-image:url("../img/fondo-bosque.png");

    background-size:cover;

    background-position:center;
    
    position:relative;

}

.overlay{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}

.hero-contenido{
    width:100%;
    height:auto;

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

    padding-top:80px;
}

/* ========================= */
/* LOGOS */
/* ========================= */

.logos{

    position:relative;

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

    gap:6vw;

    width:100%;

    margin-top:80px;
}

.logo-rancho{

    width:30%;
    max-width:490px;
    min-width:220px;
    height:auto;
    transform: translateX(0px) translateY(95px) scale(1.0);
}

.logo-tejedoras{

    width:35%;
    max-width:690px;
    min-width:250px;
    height:auto;
     transform: translateX(10px) translateY(55px) scale(1.1);
}

/* ========================= */
/* MEN脷 */
/* ========================= */

.menu{
    position:relative;

    display:flex;
    justify-content:center;

    gap:2vw;

    flex-wrap:wrap;

    width:100%;

    margin-top:-60px;
    margin-bottom:20px;

    transform:translateX(15px);

}

.menu a{

    font-size:clamp(14px,1.2vw,20px);

    color:white;

    text-decoration:none;

    text-transform:uppercase;

    font-weight:normal;

    letter-spacing:1px;
}

.menu a:hover{

    color:#d4b000;
}

/* ========================= */
/* SEGUNDA PANTALLA */
/* ========================= */

.best-sellers{

    min-height:1200px;
    background-image:url("../img/fondo-bosque.png");
    background-size:cover;
    background-position:center;
    padding:80px 60px;
    position:relative;
    text-align:center;

    z-index:auto;

}

.best-sellers h2{

    position:relative;

    top:-30px;

    left:-480px;

    color:white;

    font-size:80px;

    margin-bottom:80px;

    letter-spacing:4px;

    font-family:"Montserrat", sans-serif;

    font-weight:700;

}

.productos{

    position:relative;

    height:900px;
}

.producto{

    position:absolute;

    width:220px;

    background:none;

    text-align:center;
}

.producto > img{

    width:100%;

    height:auto;

    object-fit:contain;
}

.producto h3{

    color:white;

    margin-top:20px;

    font-size:26px;

    font-weight:normal;

    letter-spacing:1px;
}

.texto-producto{

    position:absolute;

    color:white;

    font-size:12px;

    line-height:1.4;

    width:180px;

    text-align:center;
}

.texto-1{

    top:120px;

    right:650px;
}

.texto-2{

    top:350px;

    left:650px;
}

.texto-3{

    top:580px;

    right:650px;
}

.btn-compra{
    width:120px !important;
    height:auto;
    display:block;
    margin:15px auto 0;
}

.card-producto a img{
    width:120px !important;
    height:auto;
}

.producto-1{

    top:-120px;

    right:350px;

    width:290px;
}

.producto-2{

    top:220px;

    left:350px;

    width:290px;
}

.producto-3{

    top:440px;

    right:350px;

    width:290px;
}

.producto h3{

    color:white;

    margin-top:20px;

    font-size:26px;

    font-weight:normal;

    letter-spacing:1px;
}

/* ========================= */
/* ICONOS SUPERIORES */
/* ========================= */

.iconos-superiores{

    position:absolute;

    top:30px;

    left:30px;

    z-index:999;

    display:flex;

    align-items:center;

    gap:15px;
}

/* CASA */

.icono-casa{

    width:40px;
    
     transform:translateX(-5px) translateY(8px);
}

/* CARRITO */

.icono-carrito{

    width:45px;
    
     transform:translateX(-5px) translateY(10px);
}

/* MAPA */

.icono-mapa{

    width:29px;
    
     transform:translateX(-5px) translateY(10px);
}

.descripcion{

    position:absolute;

    width:250px;

    color:white;
}

.descripcion h3{

    font-size:35px;

    margin-bottom:10px;
}

.descripcion p{

    font-size:18px;

    line-height:1.5;
}

.descripcion-1{

    top:10px;

    right:650px;
    
}

.descripcion-2{

    top:320px;

    left:650px;
    
}

.descripcion-3{

    top:610px;

    right:650px;
    
}

.tercera-seccion{

    min-height:2050px;

    background-image:url("../img/fondos/fondo.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;
    
    margin-top:-310px;
}

.img-separador{

    width:100%;
    display:block;

    position:relative;

    top:-150px;

    z-index:100;

}

.persona{

    position:absolute;

    width:550px;

    right:1000px;

    top:150px;
}

.boton-compra{
    position: absolute;
}

.boton-compra img{

    width:150px;
    height:auto;

    border:3px solid rgba(255,255,255,.9);
    border-radius:50px;

}

.quienes-somos{

    position:absolute;

    left:1050px;

    top:250px;

    width:500px;

    color:black;
}

.quienes-somos h2{

    font-size:80px;

    margin-bottom:20px;
    
    color:black;
    
    font-weight:700;
    
    font-family: "Montserrat", sans-serif;
}

.quienes-somos p{

    font-size:21px;

    line-height:1.8;
    
    font-weight:510;
}

.abre-tus-alas{

    position:absolute;

    top:900px;

    left:300px;

    color:black;
}

.abre-tus-alas h2{

    font-size:60px;
    
    font-weight:700;
    
    font-family: "Montserrat", sans-serif;
}

.nuestras-experiencias{

    position:absolute;

    top:1000px;

    left:500px;

    color:black;
    
}

.nuestras-experiencias h2{

    font-size:60px;
    
    font-weight:700;
    
    font-family: "Montserrat", sans-serif;
}

.experiencias{

    position:absolute;

    top:1150px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:40px;
    
    width: 1500px; 
}

.experiencia img{

    width:400px;

    height:500px;

    object-fit:cover;
}

.boton-experiencias{

    position:absolute;

    top:1700px;

    left:50%;

    transform:translateX(-50%);
}

.boton-experiencias img{

    width:280px;

    height:auto;
}

.cuarta-seccion{

    min-height:auto;

    position:relative;

    background-image:url("../img/fondos/fondo.png");

    background-size:100% 100%;

    background-repeat:no-repeat;
    
    margin-top:-300px;
}

.mapa-completo{

    width:100%;
}

.mapa-completo iframe{

    width:100%;

    height:650px;

    display:block;

    border:none;
}

/* ========================= */
/* QUINTA HOJA */
/* ========================= */

.quinta-seccion{

    min-height:800px;

    background-image:url("../img/fondos/fondo.png");

    background-size:100% 100%;

    background-repeat:no-repeat;

    position:relative;
}

.bloque-izquierdo{

    position:absolute;

    top:150px;

    left:8%;

    width:35%;
}

.bloque-izquierdo h2{

    font-size:clamp(35px,4vw,60px);

    margin-bottom:30px;
}

.bloque-izquierdo p{

    font-size:20px;

    line-height:1.8;
}

.bloque-derecho{

    position:absolute;

    top:150px;

    right:8%;

    width:35%;
}

.bloque-derecho h2{

    font-size:clamp(35px,4vw,60px);

    margin-bottom:30px;
}

.bloque-derecho p{

    font-size:20px;

    line-height:1.8;
}


html{

    scroll-behavior:smooth;
}

img{
    max-width:100%;
    height:auto;
}

body{
    overflow-x:hidden;
}

@media (max-width:1200px){

    .logos{
        gap:4vw;
    }

    .menu{
        gap:20px;
    }

}

@media (max-width:992px){

    .logos{

        flex-direction:column;

        gap:30px;
    }

    .logo-rancho{
        width:50%;
    }

    .logo-tejedoras{
        width:60%;
    }

}


/* LAPTOPS MEDIANAS */

@media (max-width:1600px){

    .logo-rancho{
        width:25%;
    }

    .logo-tejedoras{
        width:32%;
    }
    
    
    .logos{

        transform:translateY(-20px);

    }

    .menu{

        margin-top:200px;
        
        transform:translateX(-20px);

    }

}


/* LAPTOPS GRANDES */

@media (min-width:1601px){

    .logo-rancho{
        width:30%;
    }

    .logo-tejedoras{
        width:37%;
    }

    .menu{

        margin-top:290px;

    }

}

h2,
h3,
.menu a{
    font-family: "Julius Sans One", sans-serif;
    font-weight: normal;
}

/*==============================*/
/* TIENDA */
/*==============================*/

.tienda{

    background-image:url("../img/fondo-bosque.png");

    background-size:cover;

    background-position:center;

    min-height:100vh;

    padding:80px;

}

.tienda h2{

    text-align:center;

    color:white;

    font-size:60px;

    margin-bottom:60px;

}

.grid-productos{

    display:flex;

    justify-content:center;

    gap:50px;

    flex-wrap:wrap;
}

.card-producto{

    background:white;

    border-radius:25px;

    padding:20px;

    height:520px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/* 馃憞 AQU脥 VA ESTE BLOQUE */
.card-producto > img{
    width:180px;
    height:auto;
    display:block;
    margin:0 auto;
}

/* bot贸n */
.card-producto a img{
    width:120px !important;
    height:auto;
    display:block;
    margin:20px auto 0;
}

.card-producto h3{

    margin-top:20px;

    font-size:28px;

}

.card-producto p{

    font-size:24px;

    margin:20px 0;

}

.card-producto a img{
    width:120px !important;
    height:auto;
    display:block;
    margin:20px auto 0;
    cursor:pointer;
}

/*==============================*/
/* CARRITO */
/*==============================*/

.carrito{

    max-width:1200px;

    margin:80px auto;

    background:white;

    padding:40px;

    border-radius:20px;

}

.carrito h2{

    text-align:center;

    margin-bottom:30px;

}

#lista-carrito{

    min-height:120px;

    border:2px dashed #ccc;

    padding:20px;

    margin-bottom:30px;

}

.carrito h3{

    text-align:right;

    font-size:30px;

}

.botones-carrito{

    margin-top:30px;

    display:flex;

    justify-content:flex-end;

    gap:20px;

}

.botones-carrito button{

    padding:15px 30px;

    font-size:18px;

    cursor:pointer;

}
.producto a img{
    width: 110px !important;
    max-width: 150px !important;
    height: auto;
    display: block;
    margin: 20px auto 0;
}

/* MIEL */
.boton-miel{
    top:270px;
    left:-120px;
}

/* TORTILLAS */
.boton-tortillas{
    top:230px;
    left:290px;
}

/* INFUSIONES */
.boton-infusiones{
    top:299px;
    left:-120px;
}

.boton-hoja3{
    position: absolute;

    top: 630px;      /* Arriba / abajo */
    left: 1200px;    /* Izquierda / derecha */
}

.boton-hoja3 img{
    width: 280px;
    height: auto;
}

/*==============================*/
/* NUEVA TIENDA */
/*==============================*/

.tienda{

    min-height:auto;

    background:#ffffff;

    background-size:cover;

    background-position:center;

    padding:80px 8%;

}

.encabezado-tienda{

    text-align:center;

    margin-bottom:60px;

}

.encabezado-tienda h1{

    color:#2D5A3D;

    font-size:70px;

    margin-bottom:15px;

    letter-spacing:3px;

}

.encabezado-tienda p{

    color:#666;

    font-size:22px;

    margin-bottom:35px;

}

#buscador{

    width:500px;

    max-width:90%;

    padding:18px;

    border:none;

    border-radius:40px;

    font-size:18px;

    outline:none;

}

.categorias{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

    margin-bottom:60px;

    flex-wrap:wrap;

}

.categorias button{

    padding:12px 28px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    background:white;

    font-size:17px;

    transition:.3s;

}

.categorias button:hover{

    background:#294834;

    color:white;

}

.categorias .activo{

    background:#294834;

    color:white;

}

#contenedor-productos{
    display:flex;
}

/*==============================*/
/* TARJETAS DE PRODUCTOS */
/*==============================*/

.card-producto{

    background:white;

    border-radius:25px;

    overflow:hidden;

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

    transition:.3s;

    text-align:center;

    padding:25px;

}

.card-producto:hover{

    transform:translateY(-12px);

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

}

.card-producto:hover .imagen-producto{

    transform:scale(1.07);

}

.imagen-producto{

    width:100%;

    height:300px;

    object-fit:contain;

    margin-bottom:20px;

}

.card-producto h3{

    font-size:20px;

    color:#284B3A;

    line-height:1.4;

    margin-bottom:12px;

    min-height:60px;

    text-align:center;

}

.precio{

    font-size:18px;

    color:#9A6C2F;

    font-weight:bold;

    text-align:left;

}

.card-producto a{

    display:inline-block;

}

.card-producto a img{

    width:170px;

    transition:.3s;

}

.card-producto a img:hover{

    transform:scale(1.08);

}

/*==============================*/
/* P脕GINAS LEGALES */
/*==============================*/

.pagina-legal{

    max-width:1000px;

    margin:80px auto;

    padding:50px;

    background:white;

    border-radius:20px;

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

}

.pagina-legal h1{

    font-size:55px;

    margin-bottom:30px;

    color:#294834;

}

.pagina-legal p{

    font-size:20px;

    line-height:1.8;

}

.volver{

    display:inline-block;

    margin-top:40px;

    text-decoration:none;

    font-size:20px;

    color:#294834;

    font-weight:bold;

}

/*==============================*/
/* CONTADOR DEL CARRITO */
/*==============================*/

.carrito-icono{

    position:relative;

    display:inline-block;

}

#contador-carrito{

    position:absolute;

    top:-8px;

    right:-10px;

    width:22px;

    height:22px;

    background:#d62828;

    color:white;

    border-radius:50%;

    display:none;

    justify-content:center;

    align-items:center;

    font-size:12px;

    font-weight:bold;

}

/*==============================*/
/* NOTIFICACI脫N */
/*==============================*/

.notificacion{

    position:fixed;

    top:30px;

    right:-400px;

    background:#2d6a4f;

    color:white;

    padding:18px 25px;

    border-radius:12px;

    font-size:18px;

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

    transition:.5s;

    z-index:99999;

}

.notificacion.mostrar{

    right:30px;

}

/*==============================*/
/* NUEVO DISE脩O CARRITO */
/*==============================*/

.carrito{

    max-width:1200px;

    margin:80px auto;

    background:white;

    padding:50px;

    border-radius:30px;

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

}


.carrito h2{

    text-align:center;

    font-size:45px;

    color:#294834;

    margin-bottom:40px;

}


#lista-carrito{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.item-carrito{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f5f5f5;

    padding:25px;

    border-radius:20px;

}


.item-carrito h3{

    color:#294834;

}


.item-carrito button{

    background:#8B6B2E;

    color:white;

    border:none;

    padding:10px 20px;

    border-radius:20px;

    cursor:pointer;

}


.resumen-carrito{

    margin-top:40px;

    text-align:right;

}


.resumen-carrito h3{

    font-size:35px;

    color:#294834;

}


#vaciar{

    background:#8B6B2E;

    color:white;

    border:none;

    border-radius:25px;

    padding:15px 30px;

    cursor:pointer;

    font-size:18px;

}

/*==============================*/
/* ITEMS DEL CARRITO */
/*==============================*/

.item-carrito{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#f7f7f7;

    border-radius:20px;

    padding:25px;

    margin-bottom:20px;

}

.imagen-carrito{

    width:120px;

    height:120px;

    object-fit:contain;

}

.info-carrito{

    flex:1;

    margin-left:30px;

}

.info-carrito h3{

    color:#294834;

    font-size:28px;

}

.info-carrito p{

    font-size:18px;

    margin:10px 0;

}

.info-carrito h4{

    color:#8B6B2E;

    font-size:26px;

}

.info-carrito button{

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    margin:0 10px;

    font-size:20px;

}

.btn-eliminar{

    background:#b22222;

    color:white;

    border:none;

    width:60px;

    height:60px;

    border-radius:50%;

    font-size:25px;

    cursor:pointer;

}

/*==============================*/
/* SWIPER */
/*==============================*/

.miSwiper{
    width:100%;
    padding:20px 60px 70px;
}

.swiper-slide{
    display:flex;
    justify-content:center;
}

.swiper-button-next,
.swiper-button-prev{
    color:#294834;
}

.swiper-pagination-bullet{
    background:#8B6B2E;
    opacity:.5;
}

.swiper-pagination-bullet-active{
    opacity:1;
}

.swiper-pagination{
    position: relative !important;
    margin-top: 40px;
}

.barra-superior{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    padding:20px 8%;

    background:#f8f6f1;

}

.volver-inicio{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#294834;

    font-size:20px;

    font-weight:bold;

}

.volver-inicio img{

    width:35px;

    transition:.3s;

}

.volver-inicio:hover img{

    transform:scale(1.15);

}

.casa-productos{
    width: 35px;
    filter: grayscale(100%) brightness(45%);
}


/*==============================*/
/* EFECTO TARJETAS */
/*==============================*/

.card-producto{

    background:white;

    border-radius:25px;

    overflow:hidden;

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

    transition:.35s;

    text-align:center;

    padding:20px;

}

.card-producto:hover{

    transform:translateY(-5px);

}

.imagen-producto{

    transition:.35s ease;

}

.card-producto:hover .imagen-producto{

    transform:scale(1.12);

}

.card-producto a img{

    transition:.3s ease;

}

.card-producto a:hover img{

    transform:scale(1.08);

}

.pagina-producto{

    background:#f8f8f8;
    padding:70px 8%;

}

.contenedor-producto{

    max-width:1300px;

    margin:auto;

    display:flex;

    gap:100px;

    align-items:center;

    background:#fff;

    padding:70px;

    border-radius:25px;

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

}

.producto-imagen{

    flex:1;

    text-align:center;

}

.producto-imagen{

    overflow:hidden;

}

.producto-imagen img{

    width:100%;

    max-width:520px;

    object-fit:contain;

    transition:.35s ease;

    cursor:zoom-in;

}

.producto-imagen img:hover{

    transform:scale(1.08);

}

.producto-info{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    text-align:left;
    
    

}

.producto-info h1{

    font-size:48px;

    color:#355E3B;

    margin-bottom:15px;

    font-weight:normal;

}

.producto-info h2{

    color:#d62828;

    font-size:52px;

    margin-bottom:30px;

    position:relative;

    left:-140px;

}

.producto-info p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:40px;

}

.boton-comprar{

    background:#355E3B;

    color:white;

    border:none;

    padding:18px 40px;

    font-size:20px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

.boton-comprar:hover{

    background:#244129;

}

@media(max-width:900px){

.contenedor-producto{

    flex-direction:column;

}

.producto-info{

    text-align:center;

}

}

.selector-cantidad{

    display:flex;

    align-items:center;

    gap:20px;

    margin:35px 0;

}

.selector-cantidad button{

    width:45px;

    height:45px;

    border:none;

    background:#355E3B;

    color:white;

    font-size:24px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

.selector-cantidad button:hover{

    background:#244129;

}

.selector-cantidad span{

    font-size:28px;

    font-weight:bold;

    min-width:40px;

    text-align:center;

}

#categoria-producto{

    font-size:22px;

    color:#355E3B;

    margin-bottom:15px;

}

#stock-producto{

    font-size:20px;

    color:#666;

    margin-bottom:35px;

}

#descripcion-producto{

    font-size:18px;

    line-height:1.8;

    color:#555;

    margin-bottom:40px;

}

.producto-imagen img:hover{

    transform:scale(1.08);

}

.datos-producto{

    margin:25px 0;

}

.datos-producto p{

    font-size:22px;

    color:#355646;

    margin-bottom:12px;

}

/*==============================*/
/* FILA DE COMPRA */
/*==============================*/

.fila-compra{

    display:flex;

    align-items:center;

    gap:30px;

    margin-top:20px;

}

.selector-cantidad{

    display:flex;

    align-items:center;

    border:1px solid transparent;

    border-radius:10px;

    overflow:hidden;

}

.selector-cantidad button{

    width:45px;

    height:45px;

    border:none;

    background:#355E3B;

    color:white;

    font-size:24px;

    cursor:pointer;

}

.selector-cantidad span{

    width:55px;

    text-align:center;

    font-size:22px;

    font-weight:bold;

}

.boton-comprar{

    flex:1;

    height:45px;

    background:#355E3B;

    color:white;

    border:none;

    border-radius:10px;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.boton-comprar:hover{

    background:#244129;

}

#categoria-producto,
#stock-producto,
#sku-producto{

    font-size:18px;

    color:#666;

    margin-bottom:12px;

}

#categoria-producto strong{

    color:#355E3B;

}

/*==============================*/
/* PRODUCTOS RELACIONADOS */
/*==============================*/

.subtitulo-relacionados{

    font-size:13px;
    letter-spacing:5px;
    color:#b57b38;
    margin-bottom:8px;

}

.relacionados h2{

    text-align:center;

    font-size:27px;

    letter-spacing:6px;

    text-transform:uppercase;

    color:#b57b38;

    font-weight:400;

    margin-bottom:55px;
    
    margin-top: 40px;

}

.grid-relacionados{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,280px));

    justify-content:center;

    gap:14px;

}

.btn-ver-producto{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#355E3B;

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.btn-ver-producto:hover{

    background:#27452d;

}

.card-relacionado{

    width:260px;

    background:#fff;

    border:none;

    border-radius:10px;

    padding:25px;

    text-align:left;

    transition:.3s;
    
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    
    overflow:hidden;
    
    cursor:pointer;


}

.card-relacionado:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);
    
    border-color:#355E3B;

}

.card-relacionado:hover .imagen-relacionado{

    transform:scale(1.06);

}

.imagen-relacionado{

    width:100%;
    height:300px;
    object-fit:contain;
    margin-bottom:18px;

    transition:.35s ease;

}

.card-relacionado h3{

    margin-top:10px;
    margin-bottom:8px;

    font-size:22px;

    line-height:1.4;
    
    font-weight:500;

}

.precio{

    font-size:28px;

    color:#b57b38;

    font-weight:bold;

    transform:translateX(85px);

}

.btn-agregar-relacionado{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#355E3B;

    color:white;

    font-size:16px;

    cursor:pointer;

    opacity:0;

    transform:translateY(15px);

    transition:.35s ease;

}

.card-relacionado:hover .btn-agregar-relacionado{

    opacity:1;

    transform:translateY(0);

}

.btn-agregar-relacionado:hover{

    background:#284B3A;

}

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

.footer-nuevo{

    background:#1f1f1f;

    color:white;

    padding:70px 8% 25px;

}

.footer-contenedor{

    display:flex;

    justify-content:space-between;

    gap:60px;

    flex-wrap:wrap;

}

.footer-columna{

    flex:1;

    min-width:220px;

}

.footer-logo{

    width:180px;

    margin-bottom:20px;

}

.footer-columna h3{

    font-family:"Montserrat",sans-serif;

    font-size:28px;

    margin-bottom:20px;

    color:#d6c58d;

}

.footer-columna p{

    font-size:18px;

    line-height:1.8;

    color:#e8e8e8;

}

.footer-columna a{

    display:block;

    color:#e8e8e8;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;

    font-size:17px;

}

.footer-columna a:hover{

    color:#b9d28b;

    transform:translateX(5px);

}

.footer-copy{

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    color:#bdbdbd;

    font-size:16px;

}

/* RESPONSIVE */

@media(max-width:900px){

.footer-contenedor{

    flex-direction:column;

    text-align:center;

}

.footer-logo{

    margin:auto auto 20px;

}

}

/*==============================*/
/* ANIMACI脫N SUAVE BOTONES */
/*==============================*/

.producto a img,
.boton-hoja3 img,
.boton-experiencias img{

    transition: .25s ease;

}

.producto a:hover img,
.boton-hoja3:hover img,
.boton-experiencias:hover img{

    transform: translateY(-2px);

}

.iconos-superiores a img{
    transition: .2s;
}

.iconos-superiores a:hover .icono-casa{
    content: url("../img/iconos/casa-verde.png");
}

.iconos-superiores a:hover .icono-carrito{
    content: url("../img/iconos/carrito-verde.png");
}

.iconos-superiores a:hover .icono-mapa{
    content: url("../img/iconos/mapa-verde.png");
}

/*==============================*/
/* ICONOS SUPERIORES */
/*==============================*/

.icono-superior{

    width:42px;
    height:42px;

    stroke:white;

    transition:.25s ease;

}

.iconos-superiores a:hover .icono-superior{

    stroke:#B8D18A;

}

html{

    scroll-behavior:smooth;

}

#precio-producto{

    width:100%;

    text-align:center;

}

/* ========================= */
/* ADAPTACI脫N LAPTOPS */
/* SEGUNDA PANTALLA */
/* ========================= */

@media(max-width:1600px){

    .best-sellers h2{

        left:-430px;

        font-size:70px;

    }


    .producto-1{

        right:300px;

        width:250px;

    }


    .producto-2{

        left:300px;

        width:250px;

    }


    .producto-3{

        right:300px;

        width:250px;

    }


    .descripcion-1{

    right:550px;

}

.descripcion-2{

    left:550px;

}

.descripcion-3{

    right:520px;

}

.best-sellers{

    min-height:950px;

}

}

/* ========================= */
/* ADAPTACI脫N LAPTOPS */
/* TERCERA HOJA */
/* ========================= */

@media (max-width:1600px){

    /* Reducimos la altura total */
    .tercera-seccion{

        min-height:1800px;

        margin-top:-250px;

    }

    /* Imagen principal */
    .persona{

        width:500px;

        right:890px;

        top:90px;

    }

    /* Qui茅nes somos */
    .quienes-somos{

        left:950px;

        top:200px;

        width:420px;

    }

    .quienes-somos h2{

        font-size:65px;

    }

    .quienes-somos p{

        font-size:19px;

    }

    /* Abre tus alas */
    .abre-tus-alas{

        top:760px;

        left:220px;

    }

    .abre-tus-alas h2{

        font-size:50px;

    }

    /* Nuestras experiencias */
    .nuestras-experiencias{

        top:860px;

        left:350px;

    }

    .nuestras-experiencias h2{

        font-size:50px;

    }

    /* Galer铆a */
    .experiencias{

        top:980px;

        width:1200px;

        gap:25px;

    }

    .experiencia img{

        width:300px;

        height:420px;

    }

    /* Bot贸n */
    .boton-experiencias{

        top:1470px;

    }

    .boton-experiencias img{

        width:240px;

    }
    
    .boton-hoja3{

    top:520px;
    left:1100px;

}

.boton-hoja3 img{

    width:240px;

}

}

/* ========================= */
/* ADAPTACI脫N LAPTOPS */
/* CUARTA HOJA */
/* ========================= */

@media(max-width:1600px){

    .mapa-completo iframe{

        height:500px;

    }

}

/* ========================= */
/* ADAPTACI脫N LAPTOPS */
/* FOOTER */
/* ========================= */

@media(max-width:1600px){

    .footer-nuevo{

        padding:50px 6% 20px;

    }

    .footer-contenedor{

        gap:40px;

    }

    .footer-logo{

        width:160px;

    }

    .footer-columna h3{

        font-size:24px;

    }

    .footer-columna p{

        font-size:16px;

        line-height:1.6;

    }

    .footer-columna a{

        font-size:16px;

    }

    .footer-copy{

        margin-top:35px;

        padding-top:20px;

        font-size:15px;

    }

}

/* ========================= */
/* CELULARES */
/* ========================= */

@media (max-width:768px){
    
    .hero{

    min-height:auto;

    padding:20px 0 50px;
    
}

.hero-contenido{

    padding-top:20px;

}

.logos{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

    margin-top:40px;

}

.logo-tejedoras{

    width:75%;

    max-width:320px;

    min-width:0;

    transform:none;

}

.logo-rancho{

    width:55%;

    max-width:230px;

    min-width:0;

    transform:none;

}

.menu{

    margin-top:35px;

    transform:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.iconos-superiores{

    top:15px;

    right:15px;

    gap:15px;

}

.icono-superior{

    width:28px;

    height:28px;

}

/* ========================= */
/* SEGUNDA HOJA */
/* ========================= */

.best-sellers{

    min-height:auto;

    padding:60px 20px;

}

.best-sellers h2{

    position:static;

    left:auto;

    top:auto;

    font-size:50px;

    text-align:center;

    margin-bottom:50px;

}

.productos{

    position:static;

    height:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:70px;

}

.producto{

    position:static;

    width:260px;

}

.producto-1,
.producto-2,
.producto-3{

    top:auto;

    left:auto;

    right:auto;

    width:260px;

}

.descripcion{

    position:static;

    width:100%;

    text-align:center;

    margin-top:20px;

}

.descripcion h3{

    font-size:30px;

    margin-bottom:15px;

}

.descripcion p{

    font-size:18px;

    line-height:1.6;

}

.boton-compra{

    position:static;

    display:flex;

    justify-content:center;

    margin-top:20px;

}

.boton-compra img{

    width:170px;

}

/* ========================= */
/* TERCERA HOJA */
/* ========================= */

.tercera-seccion{

    min-height:auto;

    margin-top:-120px;

    padding:120px 20px 80px;

}

.persona{

    position:static;

    display:block;

    width:260px;

    margin:0 auto 40px;

}

.quienes-somos{

    position:static;

    width:100%;

    text-align:center;

    margin-bottom:50px;

}

.quienes-somos h2{

    font-size:45px;

    margin-bottom:25px;

}

.quienes-somos p{

    font-size:18px;

    line-height:1.8;

}

.boton-hoja3{

    position:static;

    display:flex;

    justify-content:center;

    margin:35px 0 60px;

}

.boton-hoja3 img{

    width:220px;

}

.abre-tus-alas{

    position:static;

    text-align:center;

    margin-bottom:35px;

}

.abre-tus-alas h2{

    font-size:38px;

}

.nuestras-experiencias{

    position:static;

    text-align:center;

    margin-bottom:40px;

}

.nuestras-experiencias h2{

    font-size:40px;

}

.experiencias{

    position:static;

    transform:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    gap:30px;

}

.experiencia img{

    width:90%;

    max-width:320px;

    height:auto;

}

.boton-experiencias{

    position:static;

    transform:none;

    margin-top:40px;

    display:flex;

    justify-content:center;

}

.boton-experiencias img{

    width:240px;

}

/* ========================= */
/* CUARTA HOJA */
/* ========================= */

.cuarta-seccion{

    margin-top:-120px;

    min-height:auto;

}

.mapa-completo{

    width:100%;

}

.mapa-completo iframe{

    width:100%;

    height:380px;

}

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

.footer-nuevo{

    padding:50px 25px;

}

.footer-contenedor{

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:45px;

}

.footer-columna{

    width:100%;

}

.footer-logo{

    width:170px;

    margin-bottom:20px;

}

.footer-columna h3{

    font-size:24px;

}

.footer-columna p{

    font-size:17px;

}

.footer-columna a{

    font-size:17px;

}

.footer-copy{

    margin-top:35px;

    font-size:15px;

}

/*================================*/
/* EXPERIENCIAS */
/*================================*/

.pagina-experiencia{

    background:#f8f8f8;

    padding:80px 8%;

}

.contenedor-experiencia{

    max-width:1300px;

    margin:auto;

    display:flex;

    gap:60px;

    align-items:center;

    background:white;

    border-radius:25px;

    padding:60px;

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

}

.imagen-experiencia{

    flex:1;

    text-align:center;

}

.imagen-experiencia img{

    width:100%;

    max-width:650px;

    border-radius:25px;

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

    transition:.4s;

    object-fit:cover;

}

.imagen-experiencia img:hover{

    transform:scale(1.03);

}

.info-experiencia{

    padding-left:40px;

}

.info-experiencia h1{

    font-size:58px;

    color:#355E3B;

    margin-bottom:15px;

    line-height:1.2;

    font-family:"Montserrat",sans-serif;

}

.info-experiencia p{

    font-size:20px;

    line-height:1.8;

}

/*================================*/
/* BOTONES EXPERIENCIAS */
/*================================*/

.botones-experiencia{

    display:flex;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

.btn-experiencia,
.btn-whatsapp{

    padding:18px 35px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    font-weight:bold;

    transition:.3s;

}

.btn-experiencia{

    background:#355E3B;

}

.btn-whatsapp{

    background:#25D366;

}

.btn-experiencia:hover,
.btn-whatsapp:hover{

    transform:translateY(-3px);

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

}

/*================================*/
/* BOT脫N REGRESAR */
/*================================*/

.volver{

    position:fixed;

    top:30px;

    left:30px;

    background:#355E3B;

    color:white;

    text-decoration:none;

    padding:12px 22px;

    border-radius:30px;

    font-family:"Montserrat",sans-serif;

    transition:.3s;

    z-index:999;

}

.volver:hover{

    background:#244129;

}

}   /* ← ESTA LLAVE FALTA */

/*================================*/
/* EXPERIENCIA */
/*================================*/

.info-experiencia h1{

    font-size:52px;

    color:#355E3B;

    margin-bottom:15px;

}

#ubicacion-experiencia{

    color:#666;

    font-size:20px;

    margin-bottom:15px;

}

#precio-experiencia{

    color:#b8860b;

    font-size:48px;

    font-weight:700;

    margin:20px 0;

}

#descripcion-experiencia{

    font-size:21px;

    line-height:1.8;

    color:#444;

    margin-bottom:35px;

}

#contenido-experiencia h3{

    font-size:34px;

    margin:35px 0 20px;

    color:#355E3B;

}

#contenido-experiencia ul{

    padding-left:28px;

}

#contenido-experiencia li{

    font-size:20px;

    margin-bottom:16px;

}

/*================================*/
/* CALENDARIO */
/*================================*/

.titulo-calendario{

    margin-top:50px;

    margin-bottom:20px;

    font-size:34px;

    color:#355E3B;

}

.calendario{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.fecha{

    background:#f6f6f6;

    border:2px solid #355E3B;

    border-radius:15px;

    padding:18px;

    text-align:center;

    transition:.3s;

}

.fecha:hover{

    background:#355E3B;

    color:white;

    cursor:pointer;

}

.fecha h4{

    margin-bottom:10px;

    font-size:22px;

}

.fecha p{

    margin:0;

    font-size:17px;

}

/*================================*/
/* PROXIMAS FECHAS */
/*================================*/

.titulo-fechas{

    margin-top:60px;

    margin-bottom:25px;

    font-size:36px;

    color:#355E3B;

    font-weight:700;

    text-align:center;

}


/*================================*/
/* PROXIMAS FECHAS MEJORADAS */
/*================================*/

#lista-fechas{

    max-width:900px;

    margin:40px auto 80px;

    display:grid;

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

    gap:30px;

}


.tarjeta-fecha{

    background:white;

    border-radius:25px;

    padding:35px;

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

    border-top:6px solid #355E3B;

    transition:.35s ease;

    text-align:center;

}


.tarjeta-fecha:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}


.tarjeta-fecha h4{

    font-size:30px;

    color:#355E3B;

    margin-bottom:25px;

}

.fecha-grande{

    font-size:55px;

    font-weight:700;

    color:#355E3B;

    line-height:1;

}


.mes-fecha{

    font-size:22px !important;

    color:#b08d57 !important;

    font-weight:bold;

    margin-bottom:25px !important;

}


.tarjeta-fecha p{

    font-size:18px;

    color:#555;

    margin:15px 0;

}


.tarjeta-fecha strong{

    color:#355E3B;

}


.estado{

    background:#e8f5e9;

    color:#2e7d32 !important;

    padding:10px;

    border-radius:20px;

    font-weight:bold;

}


.btn-reservar-fecha{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:80%;

    margin-top:25px;

    padding:16px;

    background:#355E3B;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    transition:.3s;

}


.btn-reservar-fecha:hover{

    background:#244129;

    transform:scale(1.05);

}

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

.hero-experiencia{

    position:relative;

    height:650px;

    overflow:hidden;

}

.hero-experiencia img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.03);

    transition:1.5s;

}

.hero-experiencia:hover img{

    transform:scale(1.08);

}

.hero-overlay{

    position:absolute;
    inset:0;

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

    text-align:center;

    padding:60px 10%;

    background:linear-gradient(
        rgba(0,0,0,.60),
        rgba(0,0,0,.45)
    );

}

.hero-overlay h1{

    font-size:68px;

    font-weight:700;

    line-height:1.1;

    margin:0;

    text-shadow:0 4px 20px rgba(0,0,0,.45);

}

.hero-overlay h2{

    font-size:52px;

    color:#e6d29a;

    margin:5px 0;

    font-weight:700;

    text-shadow:0 3px 15px rgba(0,0,0,.35);

}

.hero-overlay p{

    font-size:22px;

    line-height:1.8;

    max-width:850px;

    margin:0;

}

/*================================*/
/* CONTENIDO */
/*================================*/

.contenido-experiencia{

    max-width:1200px;

    margin:auto;

    padding:80px 8%;

}

#contenido-experiencia{

    font-size:20px;

    line-height:1.9;

}


/*================================*/
/* TARJETAS DE EXPERIENCIA */
/*================================*/

.seccion-info{

    max-width:1100px;

    margin:50px auto;

    padding:40px;

    background:#ffffff;

    border-radius:20px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s ease;

}

.seccion-info:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(0,0,0,.15);

}

.seccion-info h2{

    font-size:34px;

    color:#5f7045;

    margin-bottom:25px;

    font-family:'Julius Sans One', sans-serif;
    
    text-align:center;

}

.seccion-info p{

    font-size:20px;

    line-height:1.9;

    color:#555;

}

.seccion-info ul{

    list-style:none;

    padding:0;

    margin-top:25px;

}

.seccion-info li{

    position:relative;

    padding-left:38px;

    margin-bottom:18px;

    font-size:19px;

    color:#444;

}

.seccion-info li::before{

    content:">";

    position:absolute;

    left:0;

    color:#5f7045;

    font-weight:bold;

}

/*================================*/
/* TARJETA DE PAGO */
/*================================*/

.tarjeta-pago{

    max-width:500px;

    margin:40px auto;

    background:#fdfcf8;

    border-radius:20px;

    padding:35px;

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

    text-align:center;

}

.tarjeta-pago h3{

    color:#5f7045;

    font-size:30px;

}

.anticipo{

    width:110px;

    height:110px;

    margin:20px auto;

    border-radius:50%;

    background:#5f7045;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:35px;

    font-weight:bold;

}

.monto{

    font-size:28px;

    font-weight:bold;

    color:#b08d57;

}

.dato-banco{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

    font-size:18px;

}

.btn-copiar{

    margin-top:20px;

    padding:15px 25px;

    border:none;

    border-radius:50px;

    background:#5f7045;

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.btn-copiar:hover{

    background:#465437;

}

/*================================*/
/* TARJETAS INFORMACIÓN RÁPIDA */
/*================================*/

.info-rapida{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:50px 0;

}

.dato{

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

    border-radius:20px;

    padding:25px;

    text-align:center;

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

    transition:.35s;

}

.dato:hover{

    transform:translateY(-8px);

}

.icono{

    font-size:42px;

    margin-bottom:15px;

}

.dato h3{

    font-size:20px;

    color:#355E3B;

    margin-bottom:10px;

    font-family:"Montserrat",sans-serif;

}

.dato p{

    font-size:18px;

    color:#555;

    margin:0;

}

/*================================*/
/* BOTONES EXPERIENCIA */
/*================================*/

.botones-experiencia{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin:60px auto;

    flex-wrap:wrap;

}


.btn-experiencia,
.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 35px;

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}


.btn-experiencia{

    background:#5f7045;

    color:white;

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

}


.btn-experiencia:hover{

    background:#465437;

    transform:translateY(-4px);

}


.btn-whatsapp{

    background:#25D366;

    color:white;

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

}


.btn-whatsapp:hover{

    background:#1da851;

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(37,211,102,.35);

}

@media(max-width:900px){

    .info-rapida{

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

    }

}


@media(max-width:500px){

    .info-rapida{

        grid-template-columns:1fr;

    }

    .contenido-experiencia{

        padding:50px 20px;

    }

    .seccion-info{

        padding:25px;

    }

    .hero-overlay{

        padding:20px;

    }

    .tarjeta-pago{

        margin:25px 15px;

    }

    .btn-experiencia,
    .btn-whatsapp{

        width:90%;

    }

}

.hero-overlay h1{
    color:white;
}

.hero-overlay p{
    color:white;
}

#descripcion-experiencia{

    font-size:22px;

    line-height:1.8;

    color:white;

    font-weight:600;

    max-width:850px;

    margin:0 auto;

}

#ubicacion-experiencia{
    color:white;
}

/*================================*/
/* EXPERIENCIA - RESPONSIVE */
/*================================*/

@media (max-width:768px){

/* HERO */

.hero-experiencia{

    height:auto;

}

.hero-experiencia img{

    height:420px;

}

.hero-overlay{

    position:absolute;

    padding:25px 20px;

}

.hero-overlay h1{

    font-size:34px;

    line-height:1.2;

}

.hero-overlay h2{

    font-size:30px;

}

.hero-overlay p{

    font-size:17px;

    line-height:1.6;

}

/* TARJETAS SUPERIORES */

.info-rapida{

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:30px;

}

.dato{

    padding:18px;

}

.icono{

    font-size:30px;

}

.dato h3{

    font-size:17px;

}

.dato p{

    font-size:15px;

}

/* CONTENIDO */

.contenido-experiencia{

    padding:50px 20px;

}

.seccion-info{

    padding:25px;

    margin:30px auto;

}

.seccion-info h2{

    font-size:28px;

}

.seccion-info p{

    font-size:18px;

}

.seccion-info li{

    font-size:17px;

}

/* TARJETAS DE FECHAS */

#lista-fechas{

    grid-template-columns:1fr;

}

.tarjeta-fecha{

    padding:28px 20px;

}

.tarjeta-fecha h4{

    font-size:24px;

}

.btn-reservar-fecha{

    width:100%;

}

/* TARJETA DE PAGO */

.tarjeta-pago{

    padding:25px;

}

.dato-banco{

    flex-direction:column;

    gap:5px;

    text-align:center;

}

/* BOTONES */

.botones-experiencia{

    flex-direction:column;

}

.btn-experiencia,
.btn-whatsapp{

    width:100%;

    max-width:340px;

}

}

/*================================*/
/* CALENDARIO DE RESERVAS */
/*================================*/

#calendario{

    max-width:900px;
    margin:40px auto;
    background:white;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    padding:30px;

}

.cal-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;

}

.cal-header h3{

    color:#355E3B;
    font-size:32px;
    margin:0;

}

.cal-grid{

    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;

}

.cal-dia{

    aspect-ratio:1;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:15px;
    font-size:18px;
    font-weight:bold;

}

.cal-vacio{

    background:transparent;

}

.cal-disponible{

    background:#355E3B;
    color:white;
    cursor:pointer;
    transition:.3s;

}

.cal-disponible:hover{

    transform:scale(1.08);

}

.cal-completo{

    background:#ddd;
    color:#888;

}

.cal-hoy{

    border:3px solid #b08d57;

}

.cal-grid .cal-dia strong{

    color:#355E3B;

    font-size:16px;

}

.cal-seleccionado{

    background:#8b5e34 !important;
    color:white;
    transform:scale(1.1);

}

button:disabled{

    opacity:.7;
    cursor:not-allowed;

}