/* Estilos para los banners publicitarios */

/* Contenedor principal para todos los banners */
.sponsor-banner {
    display: block;
    margin: 15px auto;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.sponsor-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.sponsor-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Etiqueta de "Publicidad" superior */
.sponsor-banner::before {
    content: "Publicidad";
    display: block;
    font-size: 10px;
    color: #999;
    text-align: center;
    margin-bottom: 5px;
    font-family: Arial, sans-serif;
}

/* Estilos específicos por posición */
.sponsor-header {
    width: 100%;
    max-width: 728px; /* Tamaño estándar para banner horizontal grande */
    margin-bottom: 20px;
}

.sponsor-sidebar {
    width: 100%;
    max-width: 300px; /* Tamaño estándar para banner rectangular */
    margin-bottom: 20px;
}

.sponsor-content {
    width: 100%;
    max-width: 728px; /* Mismo tamaño que el header */
    margin: 20px auto;
}

.sponsor-footer {
    width: 100%;
    max-width: 728px;
    margin: 30px auto 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .sponsor-banner {
        margin: 10px auto;
    }
    
    .sponsor-header, 
    .sponsor-footer, 
    .sponsor-content {
        max-width: 100%;
    }
    
    /* En móvil, todos los banners se ajustan al ancho disponible */
    .sponsor-banner img {
        width: 100%;
        height: auto;
    }
}

/* Transición elegante al cargar la página */
.sponsor-banner {
    opacity: 0;
    animation: fade-in 0.5s ease forwards;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efecto de pulsación sutil para llamar la atención (opcional) */
.sponsor-banner.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    50% { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    100% { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
}