/* =========================================
   logos.css — Estilos globales para logos
   
   Centraliza todos los estilos relacionados 
   con visibilidad, contraste y layout de 
   logotipos en el portal corporativo.
   ========================================= */

/* ──────────────────────────────────────
   REGLAS GLOBALES: object-fit para todos
────────────────────────────────────────── */

/* Asegurar que todos los logos usen contain para no deformarse */
.actor-imagen,
.logo-marca,
.tarjeta-imagen-wrap img,
.panel-banner-logo {
    object-fit: contain;
}

/* ──────────────────────────────────────
   CONTRASTE PARA LOGOS CON TRAZOS OSCUROS
   
   Los logos con trazos oscuros se muestran
   sobre fondos blancos para conservar legibilidad.
────────────────────────────────────────── */

/* Logos con contraste en el teatro (servicios.blade.php sección 1) */
.actor-imagen.logo-con-contraste {
    filter: drop-shadow(0 0 20px rgba(240, 165, 0, 0.2))
            drop-shadow(0 2px 12px rgba(255, 255, 255, 0.5))
            brightness(1.1)
            contrast(1.15);
}

/* Logos con contraste en tarjetas de servicios (servicios.blade.php sección 2) */
.tarjeta-imagen-wrap img.logo-con-contraste {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12));
}

/* Logos con contraste en panel de marca (servicios.blade.php sección 3) */
.panel-banner-logo.logo-con-contraste {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12));
}

/* Logos con contraste en carrusel y servicios (welcome.blade.php) */
.logo-marca.logo-con-contraste {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2))
            brightness(1.08)
            contrast(1.1);
}

/* Versión específica para tarjetas de servicio en welcome */
.tarjeta-servicio .logo-con-contraste {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2))
            brightness(1.05);
}

/* ──────────────────────────────────────
   ASEGURAR VISIBILIDAD EN CONTENEDORES
────────────────────────────────────────── */

/* Mantener los logos sobre un fondo blanco uniforme. */
.tarjeta-imagen-wrap {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarjeta-imagen-wrap.tarjeta-imagen-oscura {
    background: #ffffff;
    border-radius: 18px;
}

/* Los fondos decorativos de panel se desactivan para no oscurecer los logos. */
.panel-banner--oscuro::before {
    background: rgba(0, 0, 0, 0.70);
}

.panel-banner::before {
    background: rgba(0, 20, 40, 0.55);
}

/* ──────────────────────────────────────
   MEDIA QUERIES: Responsive
────────────────────────────────────────── */

@media (max-width: 768px) {
    .actor-imagen {
        max-width: 300px;
        max-height: 300px;
    }
    
    .panel-banner-logo {
        max-height: 140px;
        max-width: 80%;
    }
}

@media (max-width: 540px) {
    .actor-imagen {
        max-width: 200px;
        max-height: 200px;
    }
    
    .panel-banner-logo {
        max-height: 100px;
        max-width: 90%;
    }
}