/* =========================================================
   RESPONSIVE GENERAL BODEGAR
========================================================= */

*{
    box-sizing:border-box;
}

html{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
}

img,
video,
iframe,
svg{
    max-width:100%;
}

img{
    height:auto;
}

section,
main,
article,
div{
    min-width:0;
}

/* CONTENEDORES */

.hero-content,
.bodegas-header,
.bodegas-home-grid,
.category-row,
.map-section,
.footer-bodegar-container,
.detalle-bodega,
.detalle-degustacion,
.detalle-visitas,
.detalle-eventos,
.servicios-grid,
.experiencias-grid{
    width:min(100%, 1200px);
    margin-left:auto;
    margin-right:auto;
}

/* TEXTOS LARGOS */

h1,
h2,
h3,
p,
a,
span{
    overflow-wrap:break-word;
}

/* IFRAME Y MAPAS */

iframe{
    width:100%;
    border:0;
}

/* =========================================================
   TABLETS
========================================================= */

@media(max-width:1000px){

    header{
        height:auto;
        min-height:75px;
        padding:8px 24px;
        gap:15px;
        flex-wrap:wrap;
    }

    .logo img{
        height:72px;
    }

    nav{
        gap:3px;
    }

    .menu-btn{
        font-size:11px;
        padding:10px 8px;
    }

    .btn-publicar{
        font-size:12px;
        padding:10px 14px;
        height:auto;
        white-space:normal;
        text-align:center;
    }

    .hero{
        height:auto;
        min-height:560px;
        padding:60px 25px;
    }

    .hero h1{
        font-size:clamp(48px, 8vw, 70px);
    }

    .hero-subtitle{
        font-size:20px;
    }

    .hero-description{
        font-size:16px;
    }

    .hero-stats{
        grid-template-columns:repeat(2, 1fr);
    }

    .category-row{
        grid-template-columns:repeat(2, 1fr);
    }

    .bodegas-home-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .map-section{
        grid-template-columns:1fr;
        padding:55px 30px;
    }

    .map-info{
        text-align:center;
    }

    .province-list{
        max-width:100%;
    }

    .footer-bodegar-container{
        grid-template-columns:repeat(2, 1fr);
        gap:40px;
    }
}

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

@media(max-width:700px){

    header{
        position:relative;
        padding:10px 16px 14px;
        justify-content:center;
    }

    .logo{
        width:100%;
        justify-content:center;
    }

    .logo img{
        height:65px;
    }

    nav{
        width:100%;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:2px;
    }

    .menu-btn{
        font-size:10px;
        padding:8px 7px;
    }

    .dropdown-content{
        position:fixed;
        left:50%;
        transform:translateX(-50%);
        width:min(92%, 350px);
        z-index:1500;
    }

    .btn-publicar{
        width:100%;
        max-width:330px;
        margin:4px auto 0;
    }

    .hero{
        min-height:620px;
        padding:55px 18px;
        background-position:center;
    }

    .hero-content{
        width:100%;
    }

    .hero h1{
        font-size:clamp(45px, 14vw, 60px);
        line-height:.95;
    }

    .hero-subtitle{
        font-size:18px;
        line-height:1.55;
    }

    .hero-description{
        font-size:15px;
        line-height:1.7;
    }

    .hero-stats{
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
        width:100%;
    }

    .stat-card{
        padding:14px 8px;
        text-align:center;
    }

    .stat-card strong{
        font-size:24px;
    }

    .stat-card span{
        font-size:10px;
    }

    .categories,
    .bodegas-home,
    .bodegas-destacadas,
    .experiencias-section,
    .servicios-bodega,
    .todas-bodegas{
        padding:45px 16px;
    }

    .category-row,
    .bodegas-home-grid,
    .bodegas-grid,
    .servicios-grid,
    .visitas-grid,
    .eventos-grid,
    .degustacion-grid{
        grid-template-columns:1fr;
    }

    .category-card{
        height:220px;
    }

    .bodega-home-card{
        height:290px;
    }

    .bodegas-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .bodegas-header h2,
    .map-info h2,
    .section-title h2,
    .categories h2{
        font-size:clamp(30px, 9vw, 42px);
    }

    .map-section{
        padding:45px 16px;
    }

    .map-wrapper{
        width:100%;
        max-width:390px;
    }

    .province-list{
        display:flex;
        flex-direction:column;
    }

    .province-list a{
        padding:17px 18px;
    }

    .banner-publicitario{
        width:calc(100% - 30px);
        grid-template-columns:1fr;
    }

    .banner-publicitario__imagen{
        height:210px;
    }

    .banner-publicitario__contenido{
        padding:25px 20px 30px;
        text-align:center;
        align-items:center;
    }

    .banner-publicitario__logo{
        display:none;
    }

    .footer-bodegar-container{
        grid-template-columns:1fr;
        text-align:center;
        padding:38px 20px;
    }

    .footer-bodegar-logo,
    .footer-bodegar p{
        margin-left:auto;
        margin-right:auto;
    }

    .footer-bodegar-bottom{
        flex-direction:column;
        gap:8px;
        text-align:center;
        padding:16px 20px;
    }

    .logos-auspiciantes{
        align-items:center;
    }

    .mapa-restaurante{
        margin:30px 0;
        border-radius:12px;
    }

    .mapa-restaurante iframe{
        height:320px;
    }
}

/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media(max-width:420px){

    .hero{
        min-height:650px;
    }

    .hero h1{
        font-size:44px;
    }

    .hero-stats{
        grid-template-columns:1fr 1fr;
    }

    .menu-btn{
        font-size:9px;
        padding:7px 5px;
    }

    .category-card,
    .bodega-home-card{
        height:245px;
    }

    .mapa-restaurante iframe{
        height:280px;
    }
}