/* CSS para el sistema de anuncios publicitarios */
/* Este archivo maneja el layout responsive con anuncios */

/* Contenedor principal que se ajusta con los anuncios laterales */
.main-content-wrapper {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Estilos base para todos los contenedores principales */
.container,
.container-fluid,
.service,
.about,
.video,
.blog {
    transition: all 0.3s ease;
}

/* Asegurar que los modales y elementos flotantes estén por encima de los anuncios */
.modal,
.dropdown-menu,
.tooltip,
.popover {
    z-index: 1050 !important;
}

/* Header y navegación siempre visibles */
header,
.navbar,
.main-header {
    z-index: 1100 !important;
}

/* Footer no afectado por anuncios laterales */
footer {
    z-index: 10;
    position: relative;
}

/* Mejoras visuales para los anuncios */
.advertisement-section {
    position: relative;
    overflow: hidden;
}

/* Animaciones suaves para los anuncios */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%) translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%) translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

.skyscraper-ads-left {
    animation: slideInFromLeft 0.8s ease-out;
}

.skyscraper-ads-right {
    animation: slideInFromRight 0.8s ease-out;
}

/* Indicadores de carga para anuncios */
.ad-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Estilos para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    .skyscraper-ad-item:hover,
    .leaderboard-ad-item:hover {
        transform: none;
    }
    
    .skyscraper-ad-item,
    .leaderboard-ad-item {
        transform: none !important;
    }
}

/* Optimización para dispositivos de alto DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .skyscraper-ad-image,
    .leaderboard-ad-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accesibilidad: Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .skyscraper-ad-item,
    .leaderboard-ad-item,
    .skyscraper-ads-left,
    .skyscraper-ads-right {
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles - ocultar anuncios al imprimir */
@media print {
    .skyscraper-ads-container,
    .leaderboard-ads-section {
        display: none !important;
    }
    
    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}