<!-- ================= CSS CRÍTICO INLINE ================= -->
<style>
/* ================= HEADER ================= */
.site-header {
    width: 100%;
    background: #fff;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* importante para que no baje el banner */
}

/* ================= LOGO ================= */
.site-logo {
    height: 90px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.custom-logo-link {
    height: 90px;
    display: flex;
    align-items: center;
}

.custom-logo {
    height: 90px;
    width: auto;
    max-height: 90px;
    display: block;
}

/* ================= BANNER ================= */
.header-ad {
    margin-left: auto; /* empuja banner a la derecha */
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.header-ad aside {
    width: auto !important;
    max-width: 728px;
}

.header-ad iframe,
.header-ad img {
    display: block;
    max-width: 728px;
}

/* Desktop */
.desktop-ad {
    display: block;
    width: 728px;
    max-width: 728px;
}

/* Mobile */
.mobile-ad {
    display: none;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        align-items: center;
        padding: 10px 0; /* quitar padding lateral */
    }

    .site-logo,
    .custom-logo-link {
        height: 60px;
    }

    .custom-logo {
        height: 60px;
        max-height: 60px;
    }

    .desktop-ad {
        display: none;
    }

    .mobile-ad {
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: center;
        box-sizing: border-box;
        padding: 0;
    }

    .mobile-ad iframe,
    .mobile-ad img {
        width: 728px;             /* ancho original */
        max-width: 100%;          /* nunca exceder contenedor */
        height: auto !important;  /* mantener proporción */
        display: block;
        margin: 0 auto;
        transform: scale(0.8);    /* ajustar escala según pantalla */
        transform-origin: top center;
    }
}
</style>

<!-- ================= CARGA DIFERIDA DEL RESTO DEL CSS ================= -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
