/**
 * MotherFader Live - Estilos Personalizados
 * 
 * Este archivo contiene estilos específicos para live.motherfader.es
 * que sobreescriben o extienden los estilos base de st05.css
 */

/* ========================================
   BANNER - Relación de aspecto panorámica
   ======================================== */
.banner .img_banner {
    width: 100%;
    height: auto;
    max-height: 260px;
    /*object-fit: cover;*/
    object-position: center;
}

@media (max-width: 768px) {
    .banner .img_banner {
        max-height: 180px;
    }
}

/* ========================================
   PERSONALIZACIONES FUTURAS
   ======================================== */
/* Añade aquí más estilos específicos de Live */

/* ========================================
   SUBMENU - Dos columnas para servicios
   ======================================== */
/* Submenu de dos columnas - Desktop */
ul.menu_top li .submenu.submenu-2cols {
    min-width: 500px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    padding: 0.75em;
}

ul.menu_top li:hover .submenu.submenu-2cols {
    display: grid;
}

/* Estilos para ítems del submenu desktop - bordes redondeados */
ul.menu_top li .submenu.submenu-2cols li {
    border-radius: 6px;
    border: 1px solid rgba(78, 78, 221, 0.1);
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

ul.menu_top li .submenu.submenu-2cols li:hover {
    border-color: rgba(78, 78, 221, 0.3);
    background: rgba(78, 78, 221, 0.08);
    transform: translateX(3px);
}

/* Submenu móvil - Dos columnas */
.submenu-nested {
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    padding: 0.5em;
}

/* Cuando el submenu está visible, usar grid */
.submenu-nested[style*="display: block"],
.submenu-nested[style*="display: flex"] {
    display: grid !important;
}

/* Mantener el sticky header en móvil con ancho completo */
.submenu-nested .menu-back-sticky {
    grid-column: 1 / -1;
}

/* Estilos para ítems del submenu móvil - bordes redondeados */
.submenu-nested li:not(.menu-back-sticky) {
    border-radius: 6px;
    border: 1px solid rgba(78, 78, 221, 0.15);
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5em !important;
    transition: all 0.2s ease;
}

.submenu-nested li:not(.menu-back-sticky):hover {
    border-color: rgba(78, 78, 221, 0.4);
    background: rgba(78, 78, 221, 0.1);
    transform: scale(1.02);
}

.submenu-nested li:not(.menu-back-sticky) a {
    display: block;
    text-align: center;
}

@media (max-width: 480px) {

    /* En móviles muy pequeños, volver a una columna */
    .submenu-nested {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   HEADER MÓVIL - Estilo Live personalizado
   ======================================== */
@media (max-width: 991px) {

    /* Fondo del header con gradiente */
    .headerBL {
        background: linear-gradient(135deg, #4e4edd 0%, #6b5ce7 100%);
        padding: 0.5em 0.75em;
        box-shadow: 0 4px 12px rgba(78, 78, 221, 0.25);
    }

    /* Logo con borde redondeado y sombra suave */
    .headerBL .h_logo .img-logo {
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    /* Botón del menú con nuevo estilo */
    #idMenuResponsive {
        background: rgba(255, 255, 255, 0.95);
        color: #4e4edd;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        font-weight: 600;
        transition: all 0.3s ease;
    }

    #idMenuResponsive:hover {
        background: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        border-color: rgba(255, 255, 255, 0.8);
    }

    #idMenuResponsive:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }

    /* Icono del menú */
    #idMenuResponsive .fa-navicon {
        color: #4e4edd;
    }

    /* Texto del botón MENU */
    .idMenuText {
        color: #4e4edd;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
}

/* ========================================
   ICONOS DE SERVICIOS - Ad Section
   ======================================== */
.ad-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
}

.ad-icon {
    color: #ededed;
    font-size: 9rem;
}

@media (max-width: 768px) {
    .ad-icon {
        font-size: 5rem;
    }

    .ad-icon-wrapper {
        min-height: 150px;
    }
}

/* ========================================
   MENU STD - Estilo Live personalizado
   ======================================== */
.menuSTD {
    background: linear-gradient(270deg, #495bb3 0% 0%, #4242d1 50%);
    color: #ffffff;
    border-radius: 3px;
    padding: 0.35rem 0.6rem;
    box-shadow: 0px 3px 20px 3px rgb(24 24 179 / 52%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.18s ease-in-out;
}

.menuSTD a,
.menuSTD>li>a {
    color: #ffffff !important;
}

/* Enlaces del submenu 'Servicios' dentro de menuSTD: texto negro */
.menuSTD .submenu a,
.menuSTD .submenu li a,
.menuSTD .submenu.submenu-2cols a,
.menuSTD .submenu-nested a {
    color: #000000 !important;
}

@media (max-width: 768px) {
    .menuSTD {
        background: linear-gradient(180deg, #6b5ce7 0%, #4e4edd 100%);
        padding: 0.5rem 0.75rem;
    }
}