/**
 * /assets/ads.css v1.0
 * Estilos para anuncios. Diseño limpio, no distorsiona, etiqueta "Anuncio" obligatoria.
 */

.wh-ad {
    margin: 20px auto;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Etiqueta "Anuncio" — obligatoria por FTC y Google AdSense */
.wh-ad-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 4px;
    font-weight: 600;
    text-align: center;
}

.wh-ad-link {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.wh-ad-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Variant: cuadrado responsive (300x300, encoge en pantallas chicas) */
.wh-ad-square-responsive {
    max-width: 300px;
}
.wh-ad-square-responsive .wh-ad-link {
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    overflow: hidden;
    border-radius: 4px;
}
.wh-ad-square-responsive .wh-ad-img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* nunca distorsiona, nunca recorta */
    object-position: center;
}

/* Variant: cuadrado fijo 300x300 (para sidebar) */
.wh-ad-square {
    width: 300px;
    max-width: 100%;
}
.wh-ad-square .wh-ad-link {
    width: 300px;
    height: 300px;
    max-width: 100%;
    background: #f8fafc;
    overflow: hidden;
    border-radius: 4px;
}
.wh-ad-square .wh-ad-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Variant: banner horizontal — banda del ancho del container, imagen NÍTIDA en su tamaño nativo, centrada.
   v1.7: NO estirar la imagen (antes la deformaba/pixelaba). Si llega un banner 1280px lo ves grande;
   si llega 728×90 lo ves a 728×90 nítido y centrado. Igual que los periódicos profesionales. */
.wh-ad-wide {
    max-width: 1280px;
    width: 100%;
    margin: 20px auto;
}
.wh-ad-wide .wh-ad-frame {
    width: 100%;
}
.wh-ad-wide .wh-ad-link {
    display: inline-block;
    max-width: 100%;
}
.wh-ad-wide .wh-ad-img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Variant: leaderboard ancho completo */
.wh-ad-banner {
    max-width: 970px;
}
.wh-ad-banner .wh-ad-img {
    max-width: 100%;
    height: auto;
}

/* Variant: in-article — DENTRO del article-wrapper (~1000px). Estiramos la imagen al ancho
   del wrapper para que se vea "grande" al lado del texto del artículo. Factor 1.37x si la
   imagen es 728px nativa, aceptable. v1.9: !important para forzar precedencia sobre cualquier
   versión cacheada por LiteSpeed o navegador. */
.wh-ad-in-article {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 32px auto !important;
}
.wh-ad-in-article .wh-ad-frame {
    width: 100% !important;
    min-height: 90px;
}
.wh-ad-in-article .wh-ad-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff;
    border-radius: 4px;
}
.wh-ad-in-article .wh-ad-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}
.wh-ad-in-article .wh-ad-google {
    width: 100%;
    display: block;
    text-align: center;
}
.wh-ad-in-article .wh-ad-google ins.adsbygoogle {
    margin: 0 auto;
}

/* Wrapper específico para AdSense (sin background, lo controla google) */
.wh-ad-google {
    text-align: center;
}
.wh-ad-google ins.adsbygoogle {
    margin: 0 auto;
}

/* v2.1: MARCO de rayitas diagonales — SIEMPRE presente alrededor de cualquier anuncio */
/* v2.4: en BLOQUE (no flex) — AdSense responsive necesita un ancho real para pintar */
.wh-ad-frame {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, #f1f5f9 4px, #f1f5f9 5px);
    padding: 14px;
    border-radius: 6px;
    text-align: center;
    min-height: 60px;
}
/* El contenido del anuncio va sobre fondo sólido para legibilidad sobre las rayitas */
.wh-ad-frame .wh-ad-link,
.wh-ad-frame .wh-ad-google,
.wh-ad-frame amp-img,
.wh-ad-frame img {
    background: #fff;
}

/* Responsive: en móvil reducir margenes */
@media (max-width: 768px) {
    .wh-ad {
        margin: 16px auto;
    }
    .wh-ad-in-article {
        margin: 24px auto;
        padding: 12px 0;
    }
}

/* v1.4: si Google NO llena el AdSense (unfilled), colapsar el marco — no mostrar caja vacía */
.wh-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }
.wh-ad:has(ins.adsbygoogle[data-ad-status="error"])   { display: none !important; }