*{
    /*border: .5px solid #ff000030;*/
}
.section-blue-3{
        background: #fff;
    background-image: url(../befam/befam-fondo-loop.png);
    background-position: center top 190px;
       background-size: 700px;
    background-repeat: repeat-x;
}


.BeFam-pill{
    padding: 10px;
    background: white;
    min-height: 200px;
}
.BeFam-pill-wrap{
    
}
.BeFam-pill-content{
    min-height: 120px;
}
.BeFam-pill-content-text{
    display: block;
    padding-top: 6px;
    min-height: 76px;
}
.BeFam-pill-content p{
    line-height: 110%;
}
.BeFam-pill-content figure{
    background-image: url(../befam/logo-befam.png);
    background-position: center left 0px;
    background-size: 70px;
    background-repeat: no-repeat;
    border: none;
    width: 100%;
    height: 37px;
    margin-top: -16px;
    margin-bottom: -9px;
    
}

.BeFam-pill-img{
    width: 100%;
    height: 290px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
}
.promo-bot{
    display: inline-block;
    color: white;
    line-height: 100%;
    cursor: pointer;
    user-select: none;
    background-color: #E30613;
    padding: 8px 58px 7px 20px;
    margin: 0px;
    border-radius: 6px;
    background-position: right 10px center;
    transition: 0.2s;
    font-weight: 700;
    background-image: url(../befam/bot-arrow.png);
    background-repeat: no-repeat;
    background-size: 17px;
    background-position: center right 16px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

.buttons-swiper{
    width: 140px;
    margin: 20px 0 20px auto;
    display: flex;
    justify-content: center;
}


.buttons-swiper .swiper-button-next, 
.buttons-swiper .swiper-button-prev {
    color: white;
    width: 40px !important;
    height: 40px !important;
    border: none;
    background-color: #E30613;
    border-radius: 25px;
    transition: all .2s ease;
    
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 4px;
    
}


.buttons-swiper .swiper-button-prev:after, 
.buttons-swiper .swiper-rtl .swiper-button-next:after{
    content: "";
    font-size: 20px !important;
    position: relative;
    right: 2px;
    color: white;
    transition: all .2s ease;
    font-family: none;
    background-image: url(../befam/bot-arrow-2.png);
    background-repeat: no-repeat;
    background-size: 16px;
    width: 40px;
    height: 40px;
    background-position: 14px 12px;
}
.buttons-swiper .swiper-button-next:after, 
.buttons-swiper .swiper-rtl .swiper-button-prev:after{
    content: "";
    font-size: 20px !important;
    position: relative;
    right: 0px;
    color: white;
    transition: all .2s ease;
    font-family: none;
    background-image: url(../befam/bot-arrow.png);
    background-repeat: no-repeat;
    background-size: 16px;
    width: 40px;
    height: 40px;
    background-position: 10px 12px;
}
.buttons-swiper .swiper-button-prev:hover, 
.buttons-swiper .swiper-button-next:hover{
    border: none;   
}


.section-crema-1 {
    background-color: #F9F7F0;
    background-image: url(../befam/befam-fondo-2.png);
    background-repeat: no-repeat;
    background-size: 1130px;
    background-position: center right;
}
.section-crema-2 {
    background-color: #F9F7F0;
    background-image: url(../befam/befam-fondo-4.png);
    background-repeat: no-repeat;
    background-size: 1130px;
    background-position: center left;
}
.promo-bot-insta{
    background-image: url(../befam/icon-instagram.png);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center left 10px;
    color: white;
    padding: 10px 40px;
    min-width: 170px;
}
.promo-bot-tiktok{
    background-image: url(../befam/icon-tiktok.png);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center left 10px;
    color: white;
    padding: 10px 40px;
    min-width: 170px;
}
.promo-bot figure{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 40px;
    background: transparent;
    background-image: url(../befam/bot-arrow.png);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 8px 12px;
    border-left: 1px solid #ffffff75;
}
.promo-bot:hover,
.promo-bot:visited,
.promo-bot:focus{
    color: white;
}


.BeFam-paso-pill{
    padding: 90px 20px 20px 20px;
    background: white;
    min-height: 200px;
    border-radius: 20px;
    background-size: 60px;
    background-position: top 20px left 20px;
    background-repeat: no-repeat;
    min-height: 280px;
}




.section-blue-4{

    background-color: #64C6F3;
    background-image: url(../befam/befam-fondo-3.png);
    background-repeat: no-repeat;
    background-size: 1130px;
    background-position: center left;
    
}

.col-ganadores{
    flex: 0 0 auto;
    width: 19% !important;
    background: white;
    padding: 10px;
    border-radius: 6px;
    margin-right: 1%;
    margin-bottom: 1%;
    min-height: 64px;
    display: flex;
    align-items: center;
    
    
    background: #5bc2e7;
    color: white;
}
#month-buttons .btn.btn-primary, 
#month-buttons a.btn.btn-primary{
    background-color: #e30613;
    border-color: #e30613;
    color: #fff;
}
#month-buttons .btn{
    margin-right: 1%;
    margin-bottom: 1%;
}

#month-buttons .btn-outline-primary {
    color: white;
    border-color: white;
}
#month-buttons .btn-outline-primary:hover {
    background-color: transparent;
}

.wrap-befam-drops {
    display: block;
    margin: 0;
    background-color: white;
    border-radius: 14px;
    padding: 70px 40px;
}

.wrap-befam-drops-1{
    background-image: url(../befam/card-fondo-1.png);
    background-repeat: no-repeat;
    background-size: 240px;
    background-position: bottom right;

}
.wrap-befam-drops-2{
    background-image: url(../befam/card-fondo-2.png);
    background-repeat: no-repeat;
    background-size: 240px;
    background-position: bottom -1px right;

}
.wrap-befam-drops img{
    display: inline;
    margin: 0;
    width: 80px;
    position: relative;
    bottom: 4px;
}
.promo-bot-arrow{
    background-image: none;
    padding: 10px 70px 10px 40px;
    font-size: 16px;
}


.section-crema{
    background-color: #F9F7F0;
}

#map{
    height:100vh;
    width:100%;
    max-height: 600px;
    border-radius: 20px;
}
    .leaflet-control { z-index: 1000; }
    /* Estilo para popup limpio */
    .leaflet-popup-content { font-size: 14px; line-height: 1.5; }
    .leaflet-popup-content b { color: #004481; }
.leaflet-control-attribution{display: none;}



.ganadores-logo-duo{
    display: flex;
    justify-content: center;
}
.ganadores-logo-duo img{
     margin: -10px 0 0 16px;
}
   

.BeFam-gallery-box {
    width: 100%;
    height: 280px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 980px) {
    .BeFam-gallery-box {
        height: auto;        /* Permite que aspect-ratio controle el alto */
        aspect-ratio: 1 / 1; /* Proporción cuadrada */
    }
}

#Swiper3{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.buttons-swiper-3{
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 0 10px 0;
    width: 100px;
}

.befam-ancla{
    color: red !important;
    display: block;
    padding: 7px 36px 7px 0;
    background-image: url(../befam/hogar-hero-mobile-2.png);
    background-repeat: no-repeat;
    background-size: 42px;
    background-position: center right;
    display: inline-block;
}
.befam-ancla:hover{
    text-decoration: underline !important;
}
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
@media (min-width: 768px) {
    
    
    .buttons-swiper-2 {
        display: none !important; /* Oculta los botones en desktop */
    }
    #Swiper2 .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); /* Ajusta el número de columnas que desees */
        gap: 20px;
        transform: none !important;
    }
    #Swiper2 .swiper-slide {
        height: 100% !important;
        margin-right: 0 !important;
        width: auto !important;
    }
    

    #Swiper3 .swiper-wrapper {
        
    }
    #Swiper3 .swiper-slide {
        height: 100% !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
   
}

/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
/*///////////////////////////////////////*/
@media screen and (max-width: 980px) {
    #logoBefamBig{
        max-width: 200px;
    }
    .promo-bot-insta,
    .promo-bot-tiktok{
        min-width: 190px;
    }
    #month-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
        scrollbar-width: thin; /* Firefox */
    }
    .BeFam-pill-img {
        height: 230px;
    }
    /* Ocultar scrollbar en WebKit (Chrome, Safari) si quieres look limpio */
    #month-buttons::-webkit-scrollbar {
        height: 6px;
    }

    #month-buttons::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

    /* Los botones NO se deben comprimir */
    .month-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .col-ganadores {
        width: 49% !important;
        margin-right: 1%;
        margin-bottom: 1%;
    }
    
    .wrap-befam-drops-1 {
        margin-bottom: 20px;
    }
    #map {
        max-height: 400px;
    }
    .wrap-befam-drops {
        padding: 50px 40px;
    }
    .wrap-befam-drops-1,
    .wrap-befam-drops-2{
        background-size: 170px;
    }

}