/* 2025-11-12 developer3: Estilos CSS Movil y Tablet */

/* Componente tipográfico para textos de 14px */
.em-subtitulo-tiendas{
    font-family: 'Poppins Semi-Bold', sans-serif;
    font-size: clamp(12px, 1.5vw + 0.5rem, 14px) ; /* Si tu framework sobrescribe, mantén el !important, sino elimínalo */
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.em-caja-tiendas-wrapper {
    margin: 50px 0;
}

.em-btn-tiendas {
    width: 100%;
    max-width: 196px;
    min-height: 45px;
    height: auto;
    font-size: clamp(12px, 1.5vw + 0.5rem, 14px) !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8px 16px;
    box-sizing: border-box;
    transition: max-width 0.3s ease, font-size 0.3s ease;
}

.em-contenedor-tiendas {
    padding-top: 2.5%;
    padding-bottom: 4%;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* .em-caja-tiendas {
  background-color: white;
} */

/* .em-caja-tiendas:hover,
.em-caja-corner:hover {
  background-color: rgba(148, 178, 207, 0.161);
} */

.container-corners {
  /* background-color: #FFFFFF; */
  padding-top: 30px;
}

/* .em-caja-corner {
  background-color: #FFFFFF;
} */

/* --- Título --- */
.em-titulo-tiendas {
  font-weight: 400;
  font-family: Neon;
  font-size: 28px;
  margin-top: 75px;
  text-align: center;
  width: 100%;
}

.em-icon-svg {
    width: 15px;
    margin-bottom: 3px;
    margin-right:5px
}

.em-link-whatsapp {
    text-decoration: none;
    color: inherit;
}

/* --- Contenido (Info) --- */
.em_tiendas_contenedor_info {
  padding-left: 8%;
  margin-top: 30px;
}

.em_tiendas_contenedor_info.context-black-friday {
  padding-left: 12%;
}

.contenedor_iframe_em,
.contenedor_iframe_em iframe {
  width: 100% !important;
}

/* Contenedor de botones (el .col-md-4) */

/* .desktop-none .em_tiendas_contenedor_botones {
  opacity: 1;
  display: flex;
  width: 100%;
  padding-left: 5%;
  margin-top: 30px;
} */

.em_tiendas_contenedor_botones {
  margin-top: 30px;
}

/* 1. Contenedor padre: Necesita position relative para contener la imagen absoluta */
.em-tiendas-contenedor-imagen {
    position: relative;
    width: 100%;
}

/* 2. Reglas base para AMBAS imágenes */
.em-tienda-img-bg {
    width: 80%;
    height: 20vh;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease-in-out; /* UI/UX: Transición suave elegante */
}

/* 3. Imagen Activa (Por defecto visible) */
.em-activo.em-tienda-img-bg {
    opacity: 1;
}

/* 4. Imagen Inactiva (Hover): Se coloca EXACTAMENTE sobre la activa */
.em-inactivo.em-tienda-img-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto sobre la activa */
    opacity: 0;

    /* CRÍTICO: Anulamos el legacy CSS que escondía esta caja (visibility: hidden, width:0) */
    visibility: visible !important;
    width: 80% !important;
    height: 20vh !important;
}

/* =========================================
   EFECTO HOVER (Crossfade)
   ========================================= */

/* Oculta la activa */
.em-contenedor-tiendas:hover .em-tiendas-contenedor-imagen .em-activo.em-tienda-img-bg {
    opacity: 0;
}

/* Muestra la inactiva (Nota: Typo del guion bajo '_' corregido) */
.em-contenedor-tiendas:hover .em-tiendas-contenedor-imagen .em-inactivo.em-tienda-img-bg {
    opacity: 1;
}

.em-botones-tiendas:hover {
    background-color: black;
    color: white !important;
    border-color: white;
    cursor: pointer;
}

.container-corners {
    background-color:  #F8F8F8;
}

/* Regla por defecto (Sobreescribe cualquier .em-caja-tiendas huérfano) */
.em-caja-tiendas.em-tienda-background {
    background-color: #F8F8F8 !important; /* Si tienes media queries viejos dando guerra, usa !important como salvavidas temporal, aunque el encadenamiento debería bastar */
}

/* Regla si es un Corner */
.em-caja-tiendas.em-corner-background {
    background-color: #FFF !important;
}

/* Efecto Hover unificado */
.em-caja-tiendas.em-tienda-background:hover,
.em-caja-tiendas.em-corner-background:hover {
    background-color: rgb(148, 178, 207, 16.1%) !important;
}

.em-botones-tiendas, a.em-botones-tiendas {
    background: none;
    font-weight: 800;
    border: 1px solid #000;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.em_tiendas_contenedor_botones.context-black-friday {
    padding-left: 12%;
}

/* El .row que envuelve los .col-4 de los botones */
.em_tiendas_contenedor_botones .row {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.em-botones-tiendas,
a.em-botones-tiendas {
    background: none;
    font-weight: 800;
    border: 1px solid #000;
    text-align: center;
    color: black;
    cursor: pointer;
    text-decoration: none;
    padding: 8px 5px;
    transition: all 0.2s ease-in-out;

    /* ELIMINADO: margin: 0 auto; y width: 70%; de aquí */
}

.em-botones-tiendas:hover,
a.em-botones-tiendas:hover {
    background-color: black;
    color: white;
    border-color: white;
}

.em-botones-tiendas:hover,
a.em-botones-tiendas:hover {
    background-color: black;
    color: white;
    border-color: white;
}

/* --- Banner Black Friday --- */
.black-days-banner-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.black-days-banner {
    background-color: #000;
    color: #FFF;
    font-size: 1rem;
    height: 100%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 8px;
}

.black-days-banner p {
    margin: 0;
}

/* --- Utilidades --- */
.em-activo {
    display: block;
}

.em-inactivo {
    visibility: hidden !important;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

.em-div-vacio { height: 0; }


/* .em-caja-tiendas {
    background-color: #F8F8F8;
} */

@media (width <= 768px) {
    .em_tiendas_contenedor_botones button,
    .em_tiendas_contenedor_botones a {
        flex: 1;              /* cada botón/a ocupa el mismo ancho */
        width: 100%;          /* se adaptan al contenedor flex */
        border: 1px solid #000;
        font-size: 12px;
        margin: 0 auto;
        text-align: center;
        background: none;
        color: black;
        cursor: pointer;
    }

    .em-tiendas-contenedor-botones .em-botones-tiendas {
        flex: 1; /* Ocupan todo el ancho posible equitativamente */
        font-size: 12px;
    }

    /* Espaciado horizontal: Margen derecho a todos EXCEPTO al último */
    .em-tiendas-contenedor-botones .em-botones-tiendas:not(:last-child) {
        margin-right: 8px;

        /* margin-bottom: 0; */
    }

    .em_tiendas_contenedor_botones {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        --padding-normal: 5%;   /* Valor normal en móvil */
        --padding-bf: 12%;

        padding-left: var(--padding-normal);
    }

    .em_tiendas_contenedor_botones.context-black-friday {
        padding-left: var(--padding-bf);
    }

    .em_tiendas_contenedor_botones .row {
        flex: 1;             /* el contenido interno ocupa todo el espacio */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .em_tiendas_contenedor_info {
        --padding-normal: 5%;   /* Valor normal en móvil */
        --padding-bf: 12%;

        padding-left: var(--padding-normal);
    }

    .em_tiendas_contenedor_info.context-black-friday {
        padding-left: var(--padding-bf);
    }

    .em-botones-tiendas {
        width: 25%;
    }

    /* --- Contenido (Info) (Desktop) --- */
   .em_tiendas_contenedor_info {
        padding-left: 8%; /* Padding desktop */
        margin-top: 0 !important; /* Reseteamos el margin-top del HTML */
    }

    .em_tiendas_contenedor_info.context-black-friday {
        padding-left: 5%;
    }

    /* .em-caja-tiendas:hover {
        background-color: rgba(148, 178, 207, 0.161);
    } */

    /* --- Botones (Desktop) --- */

    /* El .col-md-4 que contiene los botones */
    .em_tiendas_contenedor_botones {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 0; /* Reseteamos padding */
    }

    /* Los botones finales */
    .em-botones-tiendas,
    a.em-botones-tiendas {
        flex: none; /* Reseteamos flex de móvil */
        width: 70%; /* Ancho de desktop */
        font-size: 16px;
        margin: 4px auto; /* Margen vertical para separar botones */
    }

    /* --- Imagen (Desktop) --- */
    .em_tiendas_contenedor_imagen {
        margin-top: 0 !important; /* Reseteamos el margin-top del HTML */
    }

    /* Ajustamos el div de la imagen */
    .em_tiendas_contenedor_imagen > div {
        height: 182px !important; /* Ajusta esta altura si es necesario */
        width: 100% !important; /* Ocupa el 100% de su col-md-4 */
    }

    /* --- Utilidades (Desktop) --- */
    .em-div-vacio {
        height: 15px;
    }
}

/* 2025-11-12 developer3: Estilos CSS Desktop */
@media (width >= 769px) {
    .em-tiendas-contenedor-botones{
        margin-top: 30px;
    }

    .em-tiendas-contenedor-botones .em-botones-tiendas {
        width: 70%; /* Como pediste: no ocupan el 100% */
        font-size: 16px;
    }

    /* Espaciado vertical: Margen inferior a todos EXCEPTO al último */
    .em-tiendas-contenedor-botones .em-botones-tiendas:not(:last-child) {
        margin-bottom: 12px;

        /* margin-right: 0; /* Aseguramos que no haya margen lateral */
    }


        /* --- Contenedores y Cajas --- */

    /* .em-caja-tiendas, .container-corners {
        background-color: #F8F8F8;
    } */

    .container-corners {
        padding-top: 30px;
    }

    .em-titulo-tiendas {
        font-weight: 400;
        font-family: Neon;
        text-align: left;
        width: 80%;
        margin: 0 auto;
        font-size: 24px;
    }

    /* Alineamos las 3 columnas (.col-md-4) verticalmente al centro */
    .mobile-none .em-contenedor-tiendas {
        align-items: center;
        padding-left: 5%;
    }

    .em-div-vacio {
        height: 70px;
    }

    /* 2025-11-06 developer3: Estilos banner black friday */
    .black-days-banner-container {
        position: absolute; /* Lo saca del flujo normal */
        top: 0;
        left: 0;
        bottom: 0;     /* Ocupa el 100% de la altura del padre */
        z-index: 2;    /* Se pone por encima del contenido */
    }

    /* --- 2. El Banner (Estilos visuales) --- */
    .black-days-banner {
        background-color: #000;
        color: #FFF;
        font-size: 1rem;
        height: 100%;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 8px;
    }

    .black-days-banner p {
    margin: 0; /* Quita el margen del párrafo */
    }

    /* --- 3. El Contenedor del Contenido --- */
    .tiendas-content-wrapper {
    /* ¡CRÍTICO! Deja un hueco a la izquierda
        para que el contenido no quede debajo del banner */

    /* Ajusta este valor para que sea un poco más
        ancho que tu banner (padding + font-size) */
        padding-left: 50px;
    }

}