/* -----------------------------------------------------------
   1.  Anuncios genéricos
   ----------------------------------------------------------- */
   .advertisement{
    margin:10px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.ad-container{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:1rem auto;
    position:relative;
    background:#f8f9fa;
    width:100%;
    overflow:hidden;
}

.ad-container img{
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
}

.ad-all-devices,
.ad-mobile-only,
.ad-desktop-only{
    max-width:100%;
}

.ad-top   { margin-bottom:20px;text-align:center; }
.ad-bottom{ margin-top:20px; text-align:center; }
.ad-lateral{ max-width:100%;margin-bottom:20px; }

/* Animación de aparición */
.ad-image{ transition:opacity .3s ease; }

/* Oculta wrappers vacíos */
.ad-wrapper:empty{ display:none; }

/* -----------------------------------------------------------
   2.  Estructura de la página (tres columnas)
   ----------------------------------------------------------- */
.main-container{
    display:grid;
    grid-template-columns:minmax(160px,1fr) minmax(0,4fr) minmax(160px,1fr);
    gap:15px;
    width:100%;
    margin:0 auto;
    position:relative;
    overflow:hidden;           /* Evita scroll horizontal */
}

.main-content{
    grid-column:2;
    max-width:100%;
    padding:0 15px;
    position:relative;
    z-index:1;
}

/* -----------------------------------------------------------
   3.  Columna lateral (contenedor externo)
   ----------------------------------------------------------- */
.left-sidebar,
.right-sidebar{
    grid-column:1;             /* se sobrescribe en right */
    min-width:160px;
    max-width:300px;
    padding:10px;
}

.right-sidebar{ grid-column:3; }

/* -----------------------------------------------------------
   4.  Envoltorios fijos laterales
   ----------------------------------------------------------- */
/* 4.1 ▸ Wrapper exterior: área “inmutable” con ancho definido */
.left-sidebar-fixed,
.right-sidebar-fixed{
    position:relative;   /* referencia para .sidebar-inner */
    width:300px;         /* ajusta si usas otro tamaño de banner */
}

/* 4.2 ▸ Elemento que SE MUEVE y se centra verticalmente */
.sidebar-inner{
    position:fixed;      /* se pega a la ventana */
    top:50%;
    transform:translateY(-50%);  /* centra verticalmente */
    z-index:50;
    transition:top .15s ease;
}

/* Offset horizontal: lo ajustará tu JS con la custom‑prop */
.left-sidebar-fixed .sidebar-inner{ left: var(--sidebar-offset,10px); }
.right-sidebar-fixed .sidebar-inner{ right:var(--sidebar-offset,10px); }

/* -----------------------------------------------------------
   5.  Responsive helpers
   ----------------------------------------------------------- */
/* 5.1 ▸ ≥1200 px — reducimos un poco la columna lateral */
@media (max-width:1200px){
    .main-container{
        grid-template-columns:minmax(120px,1fr) minmax(0,4fr) minmax(120px,1fr);
    }
    .left-sidebar,
    .right-sidebar{
        min-width:120px;
    }
    .left-sidebar-fixed,
    .right-sidebar-fixed{ width:240px; }
}

/* 5.2 ▸ ≤992 px — ocultamos laterales y mostramos ads de móvil */
@media (max-width:992px){
    .main-container{ grid-template-columns:1fr; }
    .main-content { grid-column:1; }
    .left-sidebar,
    .right-sidebar{ display:none; }

    .ad-desktop-only{ display:none!important; }
    .ad-mobile-only,
    .ad-all-devices{ display:block!important; }
}

/* 5.3 ▸ >992 px — lo contrario: ocultar ads solo‑móvil */
@media (min-width:993px){
    .ad-mobile-only { display:none!important; }
    .ad-desktop-only,
    .ad-all-devices{ display:block!important; }
}

/* 5.4 ▸ Media intermedia (769–991) — quitar límites rígidos */
@media (min-width:769px) and (max-width:991px){
    .ad-container{ width:100%!important;overflow:visible!important; }
    .ad-container img{ max-width:none!important; }
}

/* 5.5 ▸ ≤768 px — banners full‑width */
@media (max-width:768px){
    .ad-container{
        width:100%!important;
        max-width:none!important;
        margin:.5rem auto!important;
        overflow:visible!important;
    }
    .ad-container img{
        width:100%!important;
        max-width:none!important;
    }
}