/*******************************************
***          YT Framework: css          ***
*******************************************/

/* ==========================================================================
   1. ESTILOS GLOBALES (Aplicados a todas las pantallas: Móvil y Desktop)
   ========================================================================== */
/* Tarjetas de artículos con sombras suaves, bordes redondeados y transiciones premium */
.blog .item, 
.blog-featured .item, 
.category-list .item, 
.itemsPopular .item,
.itemList .catItemView {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
    border-radius: 10px !important;
    border: 1px solid #eaeaea !important;
    background: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: hidden;
    margin-bottom: 25px !important;
}

/* ==========================================================================
   1.3. TIPOGRAFÍA Y LEGIBILIDAD PREMIUM (K2 Y PUBLICACIONES)
   ========================================================================== */
/* Títulos de las publicaciones (Películas) en la cartelera */
.itemList .catItemTitle,
.catItemView .catItemTitle {
    font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 800 !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    line-height: 1.35 !important;
}

.itemList .catItemTitle a,
.catItemView .catItemTitle a {
    font-size: 20px !important; /* Títulos grandes, nítidos y elegantes en desktop */
    color: #222222 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.itemList .catItemTitle a:hover,
.catItemView .catItemTitle a:hover {
    color: #3ab5a0 !important; /* Brillo turquesa interactivo */
}

/* Texto introductorio o resúmenes de películas */
.itemList .catItemIntroText,
.catItemView .catItemIntroText,
.itemList .catItemIntroText p,
.catItemView .catItemIntroText p,
.itemList .catItemView p.fer,
.itemList .catItemView p.fer + p, /* Respaldo para párrafos hermanos creados por el bug de anidamiento HTML */
.itemList .catItemView p.fer + p + p,
.itemList .catItemView p.fer p,
.itemList .catItemView p, /* Respaldo universal para todos los párrafos de las publicaciones */
.catItemView p.fer,
.catItemView p.fer + p,
.catItemView p.fer p,
.catItemView p,
p.fer,
p.fer p,
p.fer + p {
    font-size: 15px !important; /* Legibilidad nítida en pantallas modernas */
    line-height: 1.65 !important; /* Interlineado aireado premium */
    color: #555555 !important;
}

/* Metadatos (Autor, comentarios) */
.catItemHeaderFooter,
.catItemHeaderFooter li,
.catItemAuthor,
.catItemCommentsLink {
    font-size: 12.5px !important;
    color: #777777 !important;
}

.catItemHeaderFooter li a,
.catItemAuthor a,
.catItemCommentsLink a {
    font-size: 12.5px !important;
    color: #666666 !important;
}

/* ==========================================================================
   1.1. MÓDULO BIENVENIDOS (GRID DE REDES SOCIALES COMPACTO - COLUMNA IZQUIERDA)
   ========================================================================== */
/* Relleno interno premium para los contenidos de los módulos laterales (Izquierda y Derecha) */
#left .module .modcontent,
#right .module .modcontent {
    padding: 16px 15px !important; /* Margen compacto optimizado para móviles */
    border-top: none !important; /* Eliminamos el borde divisorio gris para una apariencia flotante ultra-limpia */
}

.welcome-title {
    font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 23px !important; /* Incrementado para destacar de forma premium */
    background: linear-gradient(45deg, #e03a9f 0%, #3ab5a0 50%, #7d3ab5 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-top: 5px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
    line-height: normal !important;
}

.welcome-text {
    font-size: 15px !important; /* Ajustado perfectamente al tamaño de letra del contenido principal de la web (15px) */
    line-height: 1.65 !important;
    color: #555555 !important;
    margin-bottom: 18px !important;
}

.welcome-subtitle {
    font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important; /* Ajustado proporcionalmente */
    color: #222222 !important;
    margin-bottom: 12px !important;
}

/* Contenedor del Grid */
.welcome-social-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Dos columnas simétricas */
    gap: 8px !important; /* Espaciado compacto premium */
    margin-top: 12px !important;
}

/* El último elemento (Grupo Telegram) se expande a dos columnas para rellenar */
.welcome-social-grid .w-social-btn.w-telegram-group {
    grid-column: span 2 !important;
}

/* Botón Social Individual */
.w-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 14px !important; /* Incrementado para mejor centrado táctil */
    border-radius: 8px !important;
    background: #f7f8fa !important;
    border: 1px solid #eef0f4 !important;
    color: #444444 !important;
    font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important; /* Letra más grande y legible para los botones */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    height: 42px !important; /* Botón ligeramente más alto para un aspecto súper estético y touch-friendly */
}

/* Iconos de FontAwesome */
.w-social-btn i.fa {
    font-size: 14px !important;
    width: 16px !important;
    margin-right: 8px !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

.w-social-btn span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Efectos de Hover Generales */
.w-social-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    border-color: transparent !important;
}

.w-social-btn:hover i.fa {
    transform: scale(1.2) !important;
}

/* Colores y Hover Personalizados por Marca */
.w-facebook:hover {
    background: #3b5998 !important; /* Azul Facebook */
}

.w-email:hover {
    background: #e03a3a !important; /* Rojo Email */
}

.w-telegram:hover {
    background: #0088cc !important; /* Celeste Telegram */
}

.w-messenger:hover {
    background: #0084ff !important; /* Azul Messenger */
}

.w-twitter:hover {
    background: #1da1f2 !important; /* Azul Twitter */
}

.w-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; /* Degradado Instagram */
}

.w-telegram-group:hover {
    background: linear-gradient(135deg, #0088cc 0%, #3ab5a0 100%) !important; /* Degradado Telegram a Turquesa */
}

/* ==========================================================================
   1.2. REDISEÑO DE PAGINACIÓN K2 (CÁPSULA MINIMALISTA)
   ========================================================================== */
/* Contenedor principal de la paginación K2 */
.k2Pagination {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: row-reverse !important; /* Pone los números a la izquierda y el botón a la derecha */
    justify-content: space-between !important;
    align-items: center !important;
    margin: 25px 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
    height: auto !important; /* Previene colapso o alturas forzadas de la plantilla */
}

/* Indicador de resultados: Página X de Y */
.catPaginationResults {
    font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    background: #f5f6f8 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #eef0f4 !important;
    margin: 0 !important;
    float: none !important;
    display: inline-block !important;
}

/* Reset de alineación flotante del framework de la plantilla */
.k2Pagination .pull-right {
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.k2Pagination ul.pagination {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important; /* Centrado vertical absoluto en flex */
    list-style: none !important;
    gap: 8px !important;
    height: auto !important; /* Resetea el height: 40px heredado */
}

.k2Pagination ul.pagination li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Botones y enlaces de paginación */
.k2Pagination ul.pagination li a,
.k2Pagination ul.pagination li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 18px !important;
    background: #2b2b2b !important; /* Gris carbón premium */
    color: #ffffff !important;
    font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    vertical-align: middle !important; /* Quita el vertical-align: top de la plantilla */
    line-height: normal !important; /* Quita el line-height: 40px de la plantilla */
}

/* Flechas con FontAwesome para Siguiente/Anterior */
.k2Pagination ul.pagination li a[title*="Siguiente"]::after {
    content: "\f105" !important;
    font-family: FontAwesome !important;
    margin-left: 8px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    transition: transform 0.25s ease !important;
}

.k2Pagination ul.pagination li a[title*="Anterior"]::before {
    content: "\f104" !important;
    font-family: FontAwesome !important;
    margin-right: 8px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    transition: transform 0.25s ease !important;
}

/* Efectos Hover */
.k2Pagination ul.pagination li a:hover {
    background: #3ab5a0 !important; /* Brillo turquesa */
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(58, 181, 160, 0.25) !important;
}

.k2Pagination ul.pagination li a[title*="Siguiente"]:hover::after {
    transform: translateX(3px) !important;
}

.k2Pagination ul.pagination li a[title*="Anterior"]:hover::before {
    transform: translateX(-3px) !important;
}

/* Responsividad en celulares muy angostos */
@media (max-width: 480px) {
    .k2Pagination {
        flex-direction: column-reverse !important; /* Coloca los números arriba y el botón abajo en la pila vertical móvil */
        gap: 12px !important;
        text-align: center !important;
        padding: 16px 15px !important;
    }
    .k2Pagination .pull-right {
        width: 100% !important;
    }
    .k2Pagination ul.pagination {
        justify-content: center !important;
        width: 100% !important;
    }
    .k2Pagination ul.pagination li a {
        width: 100% !important;
    }
}

/* ==========================================================================
   2. MEJORAS EXCLUSIVAS PARA LA VERSIÓN DESKTOP (Pantallas Grandes ≥ 980px)
   ========================================================================== */
@media (min-width: 980px) {
    /* Efecto Hover Premium en Desktop: Elevación suave y acento de color turquesa */
    .blog .item:hover, 
    .blog-featured .item:hover,
    .itemList .catItemView:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
        border-color: #3ab5a0 !important;
    }

    /* Módulos de la barra lateral izquierda con bordes limpios y sombras */
    #left .module {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
        border-radius: 10px !important;
        border: 1px solid #eaeaea !important;
        overflow: hidden;
        margin-bottom: 30px !important;
        background: #ffffff !important;
    }
    
    /* Relleno más espacioso y holgado para la barra lateral en pantallas grandes (Desktop) */
    #left .module .modcontent,
    #right .module .modcontent {
        padding: 22px 20px !important;
    }
    
    /* Encabezado del módulo lateral con diseño limpio */
    #left .module .modtitle {
        border-top: 3px solid #3ab5a0 !important;
        background: #fafafa !important;
        font-weight: bold !important;
    }

    /* Reducir el gran espacio vacío debajo del menú en Desktop */
    #content {
        padding-top: 10px !important; /* Reducido de 20px a 10px para diseño ultra compacto */
        padding-bottom: 35px !important;
    }

    .k2Pagination.k2PaginationTop {
        margin-top: 15px !important; /* Espacio de separación del menú para mostrar el sombreado y esquinas redondeadas */
        margin-bottom: 15px !important;
        /* Usamos el relleno vertical estándar de la cápsula (14px) definido globalmente para mantener la simetría perfecta */
    }

    /* ==========================================================================
       NUEVO DISEÑO PREMIUM PARA EL MENÚ DE ESCRITORIO
       ========================================================================== */
    /* Barra contenedora del menú (Soft Medium Slate Bar) */
    #yt_menu {
        background: #5c6275 !important; /* Gris pizarra medio, suave y nada extremo */
        border: none !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        margin-bottom: 0px !important; /* Elimina espacio debajo del menú en Escritorio */
    }

    #yt_mainmenu,
    .mainmenu-wrapper {
        height: 52px !important;
        line-height: normal !important;
    }

    /* Estado fijo (Sticky) al hacer scroll hacia abajo */
    #yt_menu.navbar-fixed-top {
        background: rgba(92, 98, 117, 0.94) !important; /* Translúcido pizarra medio suave */
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: none !important;
    }

    /* Ajuste del tamaño y padding de los enlaces principales */
    #meganavigator > li > .item-link {
        font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        color: rgba(255, 255, 255, 0.88) !important; /* Texto en blanco suave para contraste excelente */
        padding: 16px 24px !important;
        height: 52px !important; /* Altura simétrica perfecta */
        line-height: 20px !important; /* Centrado vertical */
        box-sizing: border-box !important;
        background: transparent !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
    }

    /* Sobrescribimos el fondo plano antiguo para evitar el botón marrón cuadrado de los hovers */
    #meganavigator > li:hover,
    #meganavigator > li.active {
        background: transparent !important;
    }

    #meganavigator > li:hover > .item-link {
        color: #3ab5a0 !important; /* Brillo turquesa del menú al hacer hover */
    }

    /* Indicador inferior animado sutil en la pestaña ACTIVA */
    #meganavigator > li.active > .item-link {
        color: #ffffff !important; /* Blanco brillante para destacar en activo */
    }

    #meganavigator > li.active > .item-link::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 24px !important;
        right: 24px !important;
        height: 3px !important;
        background: linear-gradient(90deg, #e03a9f 0%, #3ab5a0 100%) !important; /* Degradado brillante sobre fondo oscuro */
        border-radius: 3px 3px 0 0 !important;
        transition: all 0.3s ease !important;
    }

    /* Efecto de línea inferior expansible interactiva al hacer HOVER en otras pestañas */
    #meganavigator > li:not(.active) > .item-link::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        right: 50% !important;
        height: 2px !important;
        background-color: #3ab5a0 !important;
        border-radius: 2px 2px 0 0 !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 0;
    }

    #meganavigator > li:not(.active):hover > .item-link::after {
        left: 24px !important;
        right: 24px !important;
        opacity: 1 !important;
    }

    /* DESPLEGABLES DEL MEGAMENU (Graphite Glassmorphism Premium) */
    #meganavigator .mega-content {
        background: rgba(92, 98, 117, 0.97) !important; /* Desplegable oscuro esmerilado suave pizarra medio */
        -webkit-backdrop-filter: blur(15px) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: 3px solid #3ab5a0 !important; /* Borde superior turquesa para acento de marca */
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
        padding: 10px 0 !important;
        transform: translateY(10px) !important;
        opacity: 0 !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease !important;
        display: block !important;
        pointer-events: none !important;
    }

    /* Mostrar con efecto deslizante al hacer hover */
    #meganavigator > li:hover .mega-content {
        transform: translateY(0px) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Columnas internas limpias y sin bordes toscos */
    #meganavigator .mega-content .mega-col {
        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    #meganavigator .mega-content .mega-col.first {
        border-left: none !important;
    }

    /* Enlaces internos del submenú desplegable */
    #meganavigator .mega-content ul.subnavi li .item-link,
    #meganavigator .mega-content .menu li .item-link {
        font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.75) !important;
        border-bottom: none !important;
        padding: 8px 20px !important;
        transition: all 0.25s ease !important;
    }

    #meganavigator .mega-content ul.subnavi li:hover > .item-link,
    #meganavigator .mega-content .menu li:hover > .item-link {
        color: #3ab5a0 !important;
        background-color: rgba(58, 181, 160, 0.08) !important;
        padding-left: 23px !important;
    }
}


/* --- 3. CORRECCIONES EXCLUSIVAS PARA DISPOSITIVOS MÓVILES (Pantallas < 992px) --- */
@media (max-width: 991px) {
    
    /* --- A. Iconos de Redes Sociales, Login y Búsqueda (Top Bar Unificados) --- */
    #yt_spotlight1 .row,
    #yt_spotlight1 .modcontent {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    
    .module .login-form-wrapper {
        display: inline-block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .module .social-top a,
    .module .login-form-wrapper a,
    .module .login-form-wrapper a.dropdown-toggle {
        margin: 6px 8px !important; /* Compactamos ligeramente para asegurar espacio */
        padding: 0 !important;
        font-size: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.12) !important;
        transition: all 0.3s ease !important;
        line-height: 38px !important;
        color: #ffffff !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    /* Remover fondos y paddings que rompan el círculo del buscador */
    .module .social-top a span.yt-icon {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Efecto hover/pulsado táctil unificado en móvil */
    .module .social-top a:hover,
    .module .social-top a:active,
    .module .login-form-wrapper a:hover,
    .module .login-form-wrapper a:active {
        background: #3ab5a0 !important;
        color: #ffffff !important;
        transform: scale(1.1) !important;
    }

    #yt_header {
        padding-top: 10px !important;
        padding-bottom: 0px !important; /* Completamente sin espacio inferior en cabecera */
        margin-bottom: 0px !important; /* Forzar sin margen inferior */
        height: auto !important;
    }

    #yt_menu {
        margin-top: 0 !important;
        margin-bottom: 0px !important; /* Sin espacio inferior en contenedor de menú */
        height: 0 !important; /* Colapsa la altura a 0 en el flujo normal para eliminar el gap gris de fondo */
        padding: 0 !important;
        border: none !important;
        overflow: visible !important; /* Permite que el botón hamburguesa posicionado absoluto sea visible */
    }
    
    .homepage .block {
        margin-bottom: 0px !important; /* Eliminamos el margen entre bloques para acoplar la cabecera */
    }
    
    /* Ocultar de forma segura bloques estructurales vacíos/inutilizados en la Página de Inicio en móvil */
    .homepage #yt_spotlight2,
    .homepage #yt_spotlight3,
    .homepage #yt_spotlight4,
    .homepage #yt_breadcrumb {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Eliminar gran espacio antes del contenido principal */
    #content,
    body#bd section#content,
    section#content.com_k2 {
        padding-top: 0px !important; /* Resetea el padding de 60px a 0 en móvil */
        margin-top: 0px !important;
    }
    
    .homepage #content,
    body#bd.homepage section#content.com_k2 {
        padding-top: 15px !important; /* Elegante espacio gris de 15px bajo el banner en la home móvil */
        margin-top: 0px !important;
    }
    
    .page-content-wrapper {
        padding-top: 0 !important;
    }
    
    /* Reseteo en cascada absoluto de espaciados en los contenedores del contenido */
    #content .container,
    #content .row,
    #content_left,
    #left,
    #content_left .module {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #content_left,
    #left {
        margin-bottom: 15px !important;
    }

    #left .module:first-child,
    #right .module:first-child {
        margin-top: 0 !important; /* Previene empujar hacia abajo */
    }

    /* --- B. Rediseño Compacto "Soy Fer" y Redes Sociales en Móvil --- */
    /* Compactamos el relleno del módulo lateral en móviles */
    #left .module .modcontent {
        padding: 10px 12px !important;
    }
    
    .welcome-title {
        font-size: 20px !important;
        margin-top: 2px !important;
        margin-bottom: 8px !important;
    }
    
    .welcome-text {
        font-size: 14.5px !important; /* Aumentado de 13px a 14.5px para legibilidad cómoda en móviles */
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
    
    .welcome-subtitle {
        font-size: 14.5px !important; /* Aumentado proporcionalmente para jerarquía clara */
        margin-bottom: 8px !important;
    }

    /* Convertimos los botones de redes en una cinta horizontal de burbujas */
    .welcome-social-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }
    
    .welcome-social-grid .w-social-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        justify-content: center !important;
        flex: 0 0 36px !important; /* Forzar forma redonda y evitar estiramientos */
        box-sizing: border-box !important;
    }
    
    .welcome-social-grid .w-social-btn span {
        display: none !important; /* Ocultar textos de redes en móviles */
    }
    
    .welcome-social-grid .w-social-btn i.fa {
        margin-right: 0 !important; /* Centrado perfecto de iconos FontAwesome */
        font-size: 14px !important;
    }
    
    /* El botón del grupo de telegram ahora se comporta igual de redondo */
    .welcome-social-grid .w-social-btn.w-telegram-group {
        grid-column: auto !important;
    }

    /* --- C. Alineación y Escalado de Banners y Widgets --- */
    #left .module .bannergroup img,
    #left .module img,
    .bannergroup .banneritem img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Centrar PayPal en su bloque lateral en móvil */
    #left .module form[action*="paypal"] {
        text-align: center !important;
        padding: 15px 0 !important;
    }

    /* --- D. Solución de Colisiones y Superposición de Texto (Tags Overlap) --- */
    /* Desactivar posicionamiento absoluto en móvil para evitar que los tags pisen el texto */
    .itemList .catItemImageBlock,
    .blog .item-image,
    .itemsPopular .item {
        position: relative !important;
    }
    
    span.catItemCategory, 
    .item-image span.tag,
    .item-image .catItemCategory,
    .catItemImageBlock .catItemCategory {
        position: relative !important;
        display: inline-block !important;
        margin: 10px 0 10px 10px !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 5 !important;
        float: none !important;
    }
    
    /* Asegurar espacio adecuado y evitar solapamiento de títulos y resúmenes */
    .itemList .catItemHeader,
    .blog .item .item-title,
    .itemsPopular .item .item-title,
    .catItemView .catItemHeader {
        margin-top: 8px !important;
        padding-top: 0 !important;
        clear: both !important;
        display: block !important;
    }
    
    .itemList .catItemIntroText,
    .blog .item .item-introtext,
    .catItemView .catItemIntroText {
        padding-top: 5px !important;
        margin-top: 5px !important;
        clear: both !important;
    }

    /* --- E. Optimización de Formularios e Inputs (Escribe a Fer) --- */
    .module.contact-ajax form, 
    #left .module form {
        padding: 10px !important;
    }
    
    /* Forzar que los campos de nombre y correo estén en paralelo (lado a lado) */
    .dj-simple-contact-form {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .dj-simple-contact-form-row.name,
    .dj-simple-contact-form-row.email {
        flex: 1 1 calc(50% - 4px) !important;
        width: auto !important;
        margin: 0 !important;
    }
    
    .dj-simple-contact-form-row.message {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Texto introductorio más compacto */
    .dj-simple-contact-form-introtext {
        font-size: 13px !important; /* Aumentado a 13px para mejor claridad */
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
        display: block !important;
        width: 100% !important;
    }

    .module.contact-ajax input, 
    .module.contact-ajax textarea,
    #left .module input.inputbox,
    #left .module textarea.inputbox,
    .form-vertical input, 
    .form-vertical textarea {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
        border: 1px solid #dcdcdc !important;
        padding: 8px 12px !important; /* Relleno compacto que mantiene la perfecta ubicación y tamaño */
        box-sizing: border-box !important;
        font-size: 15px !important; /* Aumentado a 15px para legibilidad perfecta y evitar el auto-zoom en iPhone */
        box-shadow: none !important;
        transition: all 0.3s ease !important;
        background-color: #fcfcfc !important;
    }
    
    /* Reducir altura del campo de mensaje */
    .module.contact-ajax textarea,
    #left .module textarea.inputbox {
        height: 75px !important; /* Altura micro que preserva la perfecta ubicación y tamaño */
        min-height: 75px !important;
    }

    /* Estilo limpio para etiquetas de los campos */
    .dj-simple-contact-form-row label.form-label {
        font-size: 12.5px !important; /* Aumentado a 12.5px en negrita para una lectura súper fácil */
        margin-bottom: 2px !important;
        color: #666666 !important;
        font-weight: 600 !important;
    }
    
    /* Centrar reCAPTCHA para asegurar que no desborde pantallas móviles */
    .djeasycontact-g-recaptcha {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px auto !important;
    }
    
    /* Reducción de escala de reCAPTCHA para pantallas ultra angostas (<360px) */
    @media (max-width: 360px) {
        .djeasycontact-g-recaptcha {
            transform: scale(0.9) !important;
            transform-origin: center center !important;
        }
    }

    /* Enfoque dinámico */
    .module.contact-ajax input:focus, 
    .module.contact-ajax textarea:focus,
    #left .module input.inputbox:focus,
    #left .module textarea.inputbox:focus {
        border-color: #3ab5a0 !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 8px rgba(58, 181, 160, 0.25) !important;
        outline: none !important;
    }
    
    /* Botones adaptados para pantalla táctil en móvil */
    .module.contact-ajax button,
    #left .module button,
    #left .module .btn,
    .module.contact-ajax input[type="submit"],
    #left .module input[type="submit"] {
        width: 100% !important;
        height: 44px !important;
        border-radius: 8px !important;
        background-color: #3ab5a0 !important;
        color: #ffffff !important;
        font-weight: bold !important;
        border: none !important;
        font-size: 15px !important;
        text-transform: uppercase !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 3px 10px rgba(58, 181, 160, 0.2) !important;
        cursor: pointer !important;
    }
    
    .module.contact-ajax button:hover,
    #left .module button:hover {
        background-color: #2e9b88 !important;
        box-shadow: 0 4px 12px rgba(58, 181, 160, 0.3) !important;
    }

    /* --- F. Optimización Módulo PayPal (Compacto en Móvil) --- */
    /* Ocultamos los párrafos explicativos largos en móvil */
    .module:has(form[action*="paypal"]) .modcontent p:nth-child(1),
    .module:has(form[action*="paypal"]) .modcontent p:nth-child(2),
    .module:has(form[action*="paypal"]) .modcontent p:nth-child(4) {
        display: none !important;
    }
    
    /* Dejamos solo la frase de valor de acceso VIP compactada */
    .module:has(form[action*="paypal"]) .modcontent p {
        text-align: center !important;
        font-size: 13.5px !important; /* Aumentado de 13px a 13.5px para mayor nitidez */
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
        color: #666666 !important;
    }
    
    /* Centrar botón de donación de Paypal */
    .module:has(form[action*="paypal"]) form {
        text-align: center !important;
        padding: 5px 0 0 0 !important;
    }
}

/* ==========================================================================
   4. OPTIMIZACIÓN CABECERA EDITORIAL (Propuesta 1)
   ========================================================================== */
/* Alineación de la cabecera en pantallas de Escritorio y Tablets */
@media (min-width: 992px) {
    #yt_header {
        height: auto !important;
        padding: 12px 0 !important;
        background-color: #ffffff !important;
    }
    
    #yt_header .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    #yt_logo {
        text-align: left !important;
        width: auto !important;
        float: left !important;
    }
    
    #yt_logo .logo {
        margin: 0 !important;
        text-align: left !important;
        padding: 0 !important; /* El contenedor flex lo centra verticalmente de forma natural */
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
        height: 75px !important;
    }
    
    #yt_logo .logo img {
        height: 55px !important; /* Escalado premium del logotipo */
        width: auto !important;
    }
    
    /* INYECCIÓN DE TÍTULO DEGRADADO PREMIUM AL COSTADO DEL LOGO EN ESCRITORIO (MÁS COMPACTO Y AMPLIO) */
    #yt_logo .logo::after {
        content: "SerGayenelPeru.com" !important;
        font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
        font-weight: 800 !important;
        font-size: 28px !important; /* Más grande y premium para escritorio */
        letter-spacing: -1px !important;
        margin-left: 15px !important;
        display: inline-block !important;
        
        /* Mismo degradado premium multicolor */
        background: linear-gradient(45deg, #e03a9f 0%, #3ab5a0 50%, #7d3ab5 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        line-height: normal !important;
    }
    
    /* Contenedor del banner en la posición top3 - PERFECTAMENTE ALINEADO A LA DERECHA Y CENTRADO VERTICALMENTE */
    #yt_header .col-md-8,
    #yt_header .col-sm-7 {
        display: flex !important;
        justify-content: flex-end !important; /* Alineación al borde derecho del sitio */
        align-items: center !important;
        height: 75px !important; /* Igual al alto de la fila del logo para simetría perfecta */
    }
    
    /* Ajustes del módulo dentro de top3 */
    #yt_header .module {
        margin: 0 !important;
        display: inline-block !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    
    /* Hace que la imagen de anuncio se adapte automáticamente al contenedor */
    #yt_header .module img,
    #yt_header img {
        max-height: 75px !important; /* Se limita al alto de la fila para una cabecera compacta */
        width: auto !important;
        display: block !important;
        border-radius: 6px !important; /* Esquinas redondeadas premium */
    }
}

/* Alineación en pantallas móviles y tablets */
@media (max-width: 991px) {
    #yt_header {
        position: relative !important;
        background-color: #ffffff !important;
        padding: 0 0 0px 0 !important; /* Reducido a 0 para eliminar espacio en blanco */
        height: auto !important; /* Permite que el header se expanda para alojar el logo y el aviso debajo */
    }
    
    #yt_logo {
        text-align: left !important;
        width: auto !important;
        float: left !important;
        height: 75px !important; /* Revertido a la altura original de 75px */
        display: flex !important;
        align-items: center !important;
    }
    
    #yt_logo .logo {
        margin: 0 !important;
        text-align: left !important;
        padding: 12px 0 12px 15px !important; /* Revertido al relleno original */
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    
    /* Escalar logotipo en móvil para que se vea súper nítido y elegante */
    #yt_logo .logo img {
        max-height: 48px !important;
        width: auto !important;
    }
    
    /* INYECCIÓN DE TÍTULO DEGRADADO PREMIUM AL COSTADO DEL LOGO EN CELULARES (MÁS COMPACTO Y AMPLIO) */
    #yt_logo .logo::after {
        content: "SerGayenelPeru.com" !important;
        font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
        font-weight: 800 !important;
        font-size: 22px !important; /* Aumentado de 19px a 22px para ocupar todo el espacio */
        letter-spacing: -0.8px !important; /* Espaciado premium ajustado para máxima anchura */
        margin-left: 10px !important;
        display: inline-block !important;
        
        /* Mismo degradado premium multicolor */
        background: linear-gradient(45deg, #e03a9f 0%, #3ab5a0 50%, #7d3ab5 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        line-height: normal !important;
    }
    
    /* Posicionar el botón hamburguesa en el extremo superior derecho */
    /* Posicionar el contenedor del menú móvil de forma independiente a la barra negra superior */
    #yt_menu {
        position: absolute !important;
        top: 48px !important; /* Ubicado exactamente debajo de la barra de iconos sociales (altura 48px) */
        right: 0 !important;
        width: auto !important;
        height: 75px !important; /* Revertido a la altura de 75px para simetría original */
        background: transparent !important;
        border: none !important;
        z-index: 99999 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Botón hamburguesa elegante en el área blanca del header al costado derecho del logo */
    #yt_menu .btn-hamburger {
        position: absolute !important;
        top: 8px !important; /* Ajustado para alinear perfectamente con el nivel del logotipo en móvil */
        right: 15px !important; /* Separación estética del borde derecho */
        z-index: 100000 !important;
        background: rgba(0, 0, 0, 0.05) !important; /* Fondo circular gris translúcido ultra limpio */
        border: none !important;
        font-size: 0 !important;
        padding: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    #yt_menu .btn-hamburger:hover,
    #yt_menu .btn-hamburger:active {
        background: rgba(58, 181, 160, 0.15) !important; /* Sutil brillo turquesa al interactuar */
    }
    
    /* Icono del menú hamburguesa en color gris carbón visible sobre el fondo blanco */
    #yt_menu .btn-hamburger i.fa {
        font-size: 18px !important;
        color: #222222 !important; /* Color gris oscuro de alto contraste */
    }
    
    /* Mostrar el aviso (TOP3) en móviles, centrado debajo del logotipo */
    #top3.hidden-xs {
        display: block !important; /* Sobrescribe la clase hidden-xs de Bootstrap */
        clear: both !important;    /* Salto de línea para ubicarse debajo del logo y la hamburguesa */
        width: 100% !important;
        text-align: center !important;
        padding: 10px 15px 0 15px !important; /* Revertido al padding original */
        margin: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    #top3 .module {
        display: inline-block !important;
        margin: 0 auto !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    #top3 .bannergroup,
    #top3 .banneritem {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #top3 .module img {
        max-width: 100% !important; /* Se adapta perfectamente al ancho móvil sin desbordar */
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 6px !important; /* Esquinas redondeadas premium */
    }
    
    /* Ajuste de contenedor del slider móvil para colapsar si está vacío */
    #yt_spotlight2 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* ==========================================================================
       5. REDISEÑO PREMIUM DEL MENÚ MÓVIL (PROPUESTA A - GLASSMORPHISM OVERLAY)
       ========================================================================== */
    /* BLOQUEAR EL DESPLAZAMIENTO LATERAL DE LA PÁGINA (MODO OVERLAY) */
    .slideout-open #yt_wrapper,
    .slideout-open .slideout-panel {
        transform: none !important; /* Evita que el contenido de la web se corra a la derecha */
        position: relative !important;
    }
    
    /* Contenedor exterior del menú slideout */
    #menu.slideout-menu {
        background: transparent !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1000000 !important; /* Por encima del fondo oscuro de la web */
        display: none !important;
        width: 260px !important;
        height: 100% !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Mostrar el menú cuando está activo */
    .slideout-open #menu.slideout-menu {
        display: block !important;
        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* CAPA DE OSCURECIMIENTO Y DESENFOQUE (BACKDROP OVERLAY) DETRÁS DEL MENÚ */
    .slideout-open::before {
        content: "" !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important; /* Oscurece el resto de la web */
        -webkit-backdrop-filter: blur(4px) !important; /* Desenfoque sutil del contenido de atrás */
        backdrop-filter: blur(4px) !important;
        z-index: 999999 !important; /* Justo debajo del menú, pero sobre la web */
        pointer-events: none !important; /* Permite que los toques pasen a través del overlay y cierren el menú */
    }
    
    /* Lista principal del menú responsive - CRISTAL ESMERILADO (GLASSMORPHISM) */
    ul.resmenu {
        background: rgba(15, 15, 15, 0.78) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        backdrop-filter: blur(15px) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        height: 100% !important;
        padding: 25px 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Título o cabecera interna del menú */
    ul.resmenu::before {
        content: "MENÚ PRINCIPAL" !important;
        display: block !important;
        font-family: 'Outfit', 'Montserrat', sans-serif !important;
        font-weight: 800 !important;
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.4) !important;
        letter-spacing: 2px !important;
        padding: 10px 25px 20px 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        margin-bottom: 15px !important;
    }
    
    /* Estructura de cada botón de menú */
    ul.resmenu li {
        border: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Estilo de los enlaces principales */
    ul.resmenu li a {
        font-family: 'Outfit', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 12px 20px !important;
        margin: 4px 14px !important; /* Estilo de botón flotante */
        border-radius: 12px !important; /* Esquinas redondeadas elegantes */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        text-align: left !important;
        box-sizing: border-box !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    /* Efecto Hover táctil para los enlaces */
    ul.resmenu li a:hover,
    ul.resmenu li a:focus,
    ul.resmenu li a:active {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        padding-left: 25px !important; /* Desplazamiento interactivo sutil */
    }
    
    /* ESTADO ACTIVO - EL GANADOR: GRADIENTE DE MARCA CON BRILLO SOFT */
    ul.resmenu li a.active,
    ul.resmenu li.active > a {
        background: linear-gradient(135deg, #e03a9f 0%, #3ab5a0 55%, #7d3ab5 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 15px rgba(224, 58, 159, 0.35) !important;
        padding-left: 22px !important;
    }
    
    /* Separadores de alta definición muy finos */
    ul.resmenu li:not(:last-child)::after {
        content: "" !important;
        display: block !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        margin: 4px 28px !important;
    }
    
    /* --- Submenús / Navegación Anidada --- */
    ul.resmenu ul.nav {
        background: rgba(0, 0, 0, 0.25) !important;
        margin: 5px 14px 10px 24px !important;
        padding: 5px 0 !important;
        border-left: 2px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        display: block !important;
        height: auto !important;
    }
    
    ul.resmenu ul.nav li a {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin: 2px 10px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
    }
    
    ul.resmenu ul.nav li a:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        padding-left: 16px !important;
    }
    
    ul.resmenu ul.nav li a.active {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   6. OPTIMIZACIÓN GLOBAL DE GAPS Y COLAPSO DE POSICIONES VACÍAS
   ========================================================================== */
/* Colapsar de forma segura bloques vacíos de posiciones inactivas */
#yt_spotlight2:not(:has(.module)),
#yt_spotlight3:not(:has(.module)),
#yt_spotlight4:not(:has(.module)),
#yt_breadcrumb:not(:has(.module)) {
    display: none !important;
}