/* ══════════════════════════════════════════════════════════
   BANNER ZONES — no editar este archivo desde el admin WP
   ══════════════════════════════════════════════════════════ */

.et-banner-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f0f0f0;
    overflow: hidden;
}

.et-banner-zone img,
.et-banner-zone picture {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Picture hereda el comportamiento de bloque */
.et-banner-zone picture img { max-width: 100%; display: block; margin: 0 auto; }

/* 980×90 */
.et-banner-980x90 {
    min-height: 90px;
    padding: 25px 0;
    border-top: 1px solid var(--et-border);
    border-bottom: 1px solid var(--et-border);
}

/* 300×600 */
.et-banner-300x600 {
    min-height: 600px;
    width: 100%;
}

/* Placeholder cuando no hay banner activo */
.et-banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 2px dashed #c0c0c0;
    color: #999;
    font-size: 13px;
    font-style: italic;
    background: #f8f8f8;
    letter-spacing: 0.5px;
    padding: 10px;
    text-align: center;
}

/* Rotador: slide oculto por defecto, activo con fade */
.et-banner-rotator {
    width: 100%;
}
.et-banner-slide {
    display: none;
}
.et-banner-slide.active {
    display: block;
    animation: et-banner-fadein 0.5s ease;
}
@keyframes et-banner-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.et-banner-rotator img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Modo smart: columna apilada + rotación por pares */
.et-banner-smart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.et-banner-smart-slot {
    width: 100%;
    text-align: center;
}
.et-banner-smart-slot img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Zona lateral de portada (banners apilados, sin fondo) */
.et-banner-lateral-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
    padding: 0;
    min-height: unset;
}

/* Responsive */
@media (max-width: 767px) {
    /* Si hay imagen móvil, el contenedor se adapta a ella automáticamente */
    .et-banner-980x90 {
        min-height: 50px;
        max-height: none;   /* permite que la imagen móvil dicte la altura */
        padding: 15px 0;
    }
    .et-banner-300x600 { min-height: 250px; }
}

/* Rotador: la imagen dentro de picture también debe ser full-width */
.et-banner-rotator picture,
.et-banner-rotator picture img,
.et-banner-smart-slot picture,
.et-banner-smart-slot picture img { width: auto; max-width: 100%; display: block; margin: 0 auto; }