/* Componente: huecos de publicidad
   Vive en components/ (y no en pages/home.css) porque el super leaderboard superior es
   global: se pinta en inc/marcaprivada/header.php y sale en todas las páginas. */

/* Fondo que delimita el hueco real del banner y centra el texto placeholder
   (mismo lenguaje visual que .mp-ph para los huecos de imagen) */
.ad-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.ad-label {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-align: center;
}

.ad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    height: 50px;
    padding: var(--space-xs);
    background: repeating-linear-gradient(45deg, var(--border-hair) 0 11px, var(--border-hair-soft) 11px 22px);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

@media (min-width: 1024px) {
    .ad-box {
        max-width: 970px;
        height: 90px;
    }
}

/* Slot real de Google Ad Manager (super leaderboard). Sin el rayado de .ad-box, que es solo el
   placeholder de maqueta: aquí basta con reservar la altura de la creatividad (anti-CLS), con los
   mismos tramos que el sizeMapping de inc/marcaprivada/head.php: 320/300x50 en móvil, 728x90
   desde 768 y 970x90 desde 1024. El ancho no se fija: .ad-container centra la creatividad aunque
   por un scrollbar o el padding del .container sobresalga unos píxeles hacia el margen. */
.ad-slot {
    min-height: 50px;
}

@media (min-width: 768px) {
    .ad-slot {
        min-height: 90px;
    }
}

/* Extiende .ad-box con los formatos fijos (independientes del breakpoint del leaderboard) */
.ad--skyscraper .ad-box {
    width: 300px;
    height: 600px;
    max-width: none;
}

.ad--halfpage .ad-box {
    width: 300px;
    height: 250px;
    max-width: none;
}

/* Banda del super leaderboard superior — primera franja de la página, por encima de la
   mancheta y del menú principal. Al ir antes del bloque sticky (mancheta top:0 + header
   top:4px) se desplaza con el scroll y no interfiere con el pegado de la cabecera, ni
   interrumpe el hero del detalle ni las imágenes de los informes. */
.mp-ad-top {
    background: var(--surface-page);
    /* Relleno mínimo y sin rótulo: la banda es lo primero de la página y cada píxel resta
       contenido visible. Con esto la banda mide 58px en móvil y 98px desde tablet (768), es decir la
       altura de la creatividad (50/90) más un hilo de aire contra el borde del viewport y
       contra la mancheta. No subir sin motivo. */
    padding: var(--space-2xs) 0;
}

/* Reserva de espacio: .ad-box mantiene altura fija (50/90) a propósito, para que la creatividad
   de Google Ad Manager no provoque salto de layout (CLS) al cargar.
   Si no hay campaña, GAM deja el slot relleno con su propio <div>, así que :empty no basta:
   la integración deberá añadir una clase de colapso desde el evento slotRenderEnded (isEmpty). */
.mp-ad-top:empty,
.mp-ad-top--vacia {
    display: none;
}