/* ESTILOS ADICIONALES ESPECÍFICOS */
/* ================================================= */

/* ── Fallback de fuente para caracteres acentuados en móvil ────────
   Sifonn-Basic y OpenSans-Light-webfont son subsets sin Latin Extended
   (ñ, í, é, ó, etc.). Se reemplaza con Google Fonts Open Sans que
   incluye unicode-range correcto para Latin Extended. */
body {
    font-family: 'Open Sans', 'OpenSans-Light-webfont', Arial, Helvetica, sans-serif;
    font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sifonn-Basic', Georgia, serif;
}

/* ── Reset global: sin rectángulo azul de foco en click de mouse ── */
*:focus { outline: none !important; box-shadow: none !important; }
*:focus-visible { outline: 2px solid rgba(201, 168, 76, 0.6) !important; outline-offset: 2px !important; box-shadow: none !important; }

/* Reducir la separación entre home y nosotros */
#about {
    padding-top: 0px !important; /* Eliminar el espaciado superior */
    margin-top: 0px !important; /* Eliminar cualquier margen superior */
}

/* Optimizar rendimiento de scroll en about-intro */
#about-intro {
    will-change: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#about-intro * {
    will-change: auto;
}

#about-intro [data-scrollreveal] {
    will-change: transform, opacity;
}

/* Optimizar video de fondo para mejor rendimiento */
#video_background {
    will-change: auto !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    pointer-events: none !important;
}

/* Optimizar elementos que están entre el video y nosotros */
.just_pattern {
    will-change: auto !important;
    transform: translateZ(0) !important;
    pointer-events: none !important;
    contain: strict !important;
}

.scroll-indicator {
    will-change: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    pointer-events: none !important;
    contain: layout style !important;
}

.scroll-arrow {
    will-change: auto !important;
    transform: translateZ(0) !important;
}

#home {
    will-change: auto;
    contain: layout style paint;
    isolation: isolate;
}

/* Eliminar espaciado adicional en video-sections */
#about .video-sections {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* Estilo para texto de descripción "Nosotros" más grande */
.about-description-large {
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    text-align: center !important; /* Alineación centrada */
}

/* Centrado para la sección about-intro */
#about-intro .about-description-large {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Limitar ancho del contenedor en desktop */
#about-intro .twelve.columns.offset-by-two {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 900px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    float: none !important;
}

/* Reducir distancia entre título y texto en about-intro */
#about-intro .header-text {
    margin-bottom: 10px !important;
}

/* Mejorar alineación del título "Nosotros" */
#about .nine.columns.padding-top-video-sec2 h5 {
    text-align: center !important;
    margin-bottom: 20px !important; /* Mejor espaciado con el párrafo */
}

/* Mejorar alineación general del contenedor de texto */
#about .nine.columns.padding-top-video-sec2 {
    text-align: left !important; /* Asegurar alineación base */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centrar verticalmente el contenido */
}

/* Extender el texto hacia la derecha */
#about .nine.columns.padding-top-video-sec2 {
    min-height: 550px !important;
    padding-bottom: 40px !important;
    width: 90% !important;
    margin-right: 10px !important;
    padding-right: 5px !important;
    padding-top: 10px !important; /* Reducir el espaciado superior */
    padding-left: 20px !important; /* Agregar padding izquierdo para mejor alineación */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centrar verticalmente el contenido */
}

/* Ajustar contenedor para mayor extensión */
#about .video-section-2 .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
}

/* Mantener altura del contenedor */
#about .video-section-2 {
    min-height: 550px !important;
    height: 550px !important;
    padding-bottom: 40px !important;
}

/* Ajustar el mapa para que coincida con el contenedor de texto */
#about .video-section-3 {
    min-height: 550px !important;
    height: 550px !important;
}

#about .video-section-3 img {
    height: 550px !important;
    object-fit: cover !important;
}

/* Ajustar iframe del mapa para que tenga el mismo tamaño que el contenedor del texto */
#about .video-section-3 iframe {
    height: 550px !important;
    width: 100% !important;
}

/* Configuraciones responsivas para extender el texto */
@media only screen and (min-width: 1200px) {
    #about .nine.columns.padding-top-video-sec2 {
        width: 92% !important;
        margin-right: 5px !important;
        padding-top: 10px !important; /* Reducir espaciado superior */
        padding-left: 25px !important; /* Mejor alineación en pantallas grandes */
    }
}

@media only screen and (max-width: 1199px) and (min-width: 768px) {
    #about .nine.columns.padding-top-video-sec2 {
        width: 88% !important;
        margin-right: 8px !important;
        padding-top: 10px !important; /* Reducir espaciado superior */
        padding-left: 20px !important; /* Mantener alineación en pantallas medianas */
    }
}

@media only screen and (max-width: 767px) {
    #about .nine.columns.padding-top-video-sec2 {
        width: 95% !important;
        margin-right: 5px !important;
        padding-right: 10px !important;
        padding-top: 8px !important; /* Reducir espaciado superior en móvil */
        padding-left: 15px !important; /* Alineación para móviles */
    }
    
    .about-description-large {
        text-align: center !important; /* Centrado en móvil */
        text-justify: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    #about .video-section-2 .container {
        padding-left: 20px !important;
        padding-right: 10px !important;
    }
    
    /* Corregir centrado en móvil para about-intro */
    #about-intro .twelve.columns.offset-by-two {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    #about-intro .about-description-large {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Responsivo para móviles */
@media only screen and (max-width: 767px) {
    .about-description-large {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Optimizaciones agresivas para móvil */
    #about-intro {
        will-change: auto !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        contain: layout style paint !important;
        content-visibility: auto !important;
        isolation: isolate !important;
    }
    
    /* Optimizar video de fondo en móvil */
    #video_background {
        will-change: auto !important;
        transform: translateZ(0) !important;
        pointer-events: none !important;
        visibility: visible !important;
    }
    
    /* Optimizar elementos entre video y nosotros en móvil */
    .just_pattern {
        will-change: auto !important;
        transform: translateZ(0) !important;
        pointer-events: none !important;
        contain: strict !important;
        opacity: 0.5 !important;
    }
    
    .scroll-indicator {
        bottom: 100px; /* más arriba para no tapar el botón del chatbot */
    }
    
    /* DESACTIVAR parallax en móvil */
    .parallax1,
    [class*="parallax"] {
        background-attachment: scroll !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Desactivar transiciones del menú en móvil durante scroll */
    .cbp-af-header,
    .cbp-af-header *,
    .cbp-af-header .logo,
    .cbp-af-header ul.slimmenu {
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        animation: none !important;
    }
    
    /* Menú oculto al inicio en móvil */
    .cbp-af-header {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-100%) !important;
        pointer-events: none !important;
    }
    
    /* Menú visible cuando aparece (después de scroll a "nosotros") */
    .cbp-af-header.cbp-af-header-shrink {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        background: rgba(60,60,60,0.95) !important;
        pointer-events: auto !important;
    }
    
    #home {
        will-change: auto !important;
        contain: strict !important;
        content-visibility: auto !important;
    }
    
    /* DESACTIVAR TODAS las animaciones de scrollreveal en móvil */
    [data-scrollreveal],
    [data-scrollreveal] * {
        will-change: auto !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Eliminar transformaciones y animaciones pesadas */
    #about-intro * {
        backface-visibility: visible !important;
        perspective: none !important;
        transform: none !important;
    }
    
    /* Forzar composición en GPU */
    #about-intro .container {
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }
    
    /* Ocultar la sección #about (la del final) solo en móvil */
    #about {
        display: none !important;
    }
    
    /* Asegurar que #about-intro tenga las mismas propiedades en móvil */
    #about-intro .about-description-large {
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #about .video-section-2 {
        min-height: 480px !important;
        height: 480px !important;
        padding-bottom: 50px !important;
    }
    
    #about .nine.columns.padding-top-video-sec2 {
        min-height: 480px !important;
        padding-bottom: 50px !important;
        padding-top: 8px !important; /* Reducir espaciado superior en móvil */
    }
    
    #about .video-section-3 {
        min-height: 480px !important;
        height: 480px !important;
    }
    
    #about .video-section-3 img {
        height: 480px !important;
    }
    
    #about .video-section-3 iframe {
        height: 480px !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .about-description-large {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    #about .video-section-2 {
        min-height: 550px !important;
        height: 550px !important;
        padding-bottom: 70px !important;
    }
    
    #about .nine.columns.padding-top-video-sec2 {
        min-height: 550px !important;
        padding-bottom: 60px !important;
        padding-top: 8px !important; /* Reducir espaciado superior en móvil pequeño */
    }
    
    #about .video-section-3 {
        min-height: 550px !important;
        height: 550px !important;
    }
    
    #about .video-section-3 img {
        height: 550px !important;
    }
    
    #about .video-section-3 iframe {
        height: 550px !important;
        width: 100% !important;
    }
}

/* Imagen del perro en la sección nosotros */
.video-section-3 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Estilos móviles para la imagen "Un día en la oficina" */
@media only screen and (max-width: 767px) {
    .video-section-3 {
        width: 100% !important;
        height: 270px !important;
        float: none !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    .video-section-3 img {
        width: 100vw !important;
        height: 100% !important;
        object-fit: cover !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    /* Asegurar que el contenedor padre no limite el ancho */
    .video-sections {
        overflow-x: visible !important;
    }
}

@media only screen and (max-width: 480px) {
    .video-section-3 {
        height: 200px !important;
    }
}

/* ESTILOS MÓVILES PARA LOGOS DE CLIENTES */
/* ================================================= */

/* Logos en 2 filas de 5 */
#clients #logos .sixteen.columns {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}

#clients .logos-wrap {
    flex: 0 0 20% !important;
    box-sizing: border-box !important;
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    width: auto !important;
}

/* GOL se queda más pequeño */
#clients .logos-wrap:has(img[src*="GOL"]) {
    padding: 18px 22px !important;
}

#clients .logos-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media only screen and (max-width: 767px) {
    #clients #logos .sixteen.columns {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #clients .logos-wrap {
        flex: 0 0 50% !important;
        width: 50% !important;
        height: 90px !important;
        float: none !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #clients .logos-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* GALERÍA DE VIDEOS DESTACADOS */
/* ================================================= */

#videos-destacados-gallery {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px;
    z-index: 2;
}

#videos-destacados-gallery .header-text h1 {
    color: #fff;
    text-align: center;
}

#videos-destacados-gallery .header-text p {
    color: rgba(255,255,255,0.6);
}

#videos-destacados-gallery .header-shadow-text {
    color: rgba(255,255,255,0.08);
    text-align: center;
}

#videos-destacados-gallery .header-text {
    text-align: center;
}

#videos-destacados-gallery .sixteen.columns {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
}

#videos-destacados-gallery .header-shadow-text {
    text-align: center;
}

#videos-destacados-gallery .container {
    width: 100% !important;
    max-width: 1400px;
    padding-left: 20px;
    padding-right: 20px;
}

#videos-destacados-gallery .video-gallery-row {
    margin-top: 50px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
}

/* Sin márgen lateral para que los videos llenen la sección */
#videos-destacados-gallery .one-third.column {
    width: 20% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    flex-shrink: 0;
}

/* Videos llenan toda la columna disponible */
#videos-destacados-gallery .video-gallery-item {
    min-height: auto;
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

/* Desktop: sin límite de ancho ni altura */
@media (min-width: 768px) {
    #videos-destacados-gallery .video-gallery-item {
        max-width: none;
    }
    
    #videos-destacados-gallery .video-thumbnail-rect {
        max-height: 70vh;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    #videos-destacados-gallery .video-gallery-item {
        max-width: none;
    }
    
    #videos-destacados-gallery .video-thumbnail-rect {
        max-height: 60vh;
    }
}

#videos-destacados-gallery .video-thumbnail-rect {
    width: 100%;
    height: 0;
    padding-bottom: 176.67%; /* proporción original 848/480 */
    position: relative;
    border-radius: 12px; /* Esquinas redondeadas completas */
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Optimización para móviles - miniaturas de video */
@media only screen and (max-width: 767px) {
    #videos-destacados-gallery .video-gallery-row {
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #videos-destacados-gallery .one-third.column {
        width: 80% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }

    #videos-destacados-gallery .video-thumbnail-rect {
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    #videos-destacados-gallery .video-gallery-item {
        margin-bottom: 15px;
    }
    
    .video-overlay-rect {
        backdrop-filter: none !important;
        background: rgba(0,0,0,0.15) !important;
    }
    
    .video-play-btn-rect {
        width: 70px !important;
        height: 70px !important;
    }
    
    .play-icon-rect {
        font-size: 28px !important;
    }
}

#videos-destacados-gallery .video-rect-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#videos-destacados-gallery .video-overlay-rect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px; /* Esquinas redondeadas en overlay */
}

#videos-destacados-gallery .inline-video-player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important; /* Videos destacados con esquinas redondeadas */
}

/* GALERÍA DE VIDEOS RECTANGULARES */
/* ================================================= */

#video-gallery {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background: #292929;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 60px;
    z-index: 2;
}

#video-gallery .header-text h1 {
    color: #fff;
}

#video-gallery .header-text p {
    color: rgba(255,255,255,0.6);
}

#video-gallery .header-shadow-text {
    color: rgba(255,255,255,0.08);
}

.video-gallery-row {
    margin-top: 50px;
    display: flex;
    flex-wrap: nowrap;
    gap: 30px; /* Aumentado de 25px para mejor separación */
    justify-content: center;
    align-items: stretch; /* Cambio para que todos tengan la misma altura */
    width: 100%;
    max-width: 1400px; /* Reducido para acomodar videos más pequeños */
    margin-left: auto;
    margin-right: auto;
}

.video-gallery-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255,255,255,0.05);
    flex: 1;
    max-width: 380px; /* Reducido de 480px para hacer videos más pequeños */
    width: 100%;
    display: flex;
    flex-direction: column; /* Para que el contenido se distribuya verticalmente */
    height: auto;
    min-height: 420px; /* Altura mínima para uniformidad */
}

.video-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.1);
}

/* GALERÍA DE VIDEOS DESTACADOS - REPRODUCCIÓN INLINE */
/* ================================================= */

.video-thumbnail-rect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 176.67%; /* Proporción 480x848 = 176.67% */
    overflow: hidden;
    cursor: default; /* NO clickeable */
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.video-thumbnail-rect:active {
    transform: none; /* Remover efecto al presionar */
    transition: none;
}

/* Para proyectos destacados - mantener formato rectangular pero con proporción correcta */
#video-gallery .video-thumbnail-rect {
    padding-bottom: 75%; /* Formato más panorámico para proyectos */
    height: 0;
}

/* Estilos para videos que se reproducen inline */
.inline-video-player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    z-index: 500 !important;
}

.inline-video-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(0,0,0,0.8) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(5px) !important;
}

.inline-video-close:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: scale(1.1) !important;
}

.video-rect-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: all 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(0.9) contrast(1.1);
}

.video-gallery-item:hover .video-rect-image {
    transform: scale(1.08);
    filter: brightness(1) contrast(1.2);
}

.video-overlay-rect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(41,41,41,0.8) 0%, rgba(0,0,0,0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(2px);
    border-radius: 12px 12px 0 0;
    pointer-events: auto; /* CAMBIADO: El overlay debe capturar clics */
    cursor: pointer; /* Añadir cursor pointer */
}

.video-thumbnail-rect:hover .video-overlay-rect,
.video-gallery-item:hover .video-overlay-rect {
    opacity: 1;
}

.video-play-btn-rect {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border: 2px solid rgba(255,255,255,0.8);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    pointer-events: auto; /* El botón debe capturar los clics */
    z-index: 2;
    position: relative;
}

.video-play-btn-rect:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
    transform: scale(1.15);
    border-color: #fff;
    box-shadow: 0 8px 30px rgba(255,255,255,0.2);
}

.play-icon-rect {
    font-size: 16px;
    color: #fff;
    margin-left: 3px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.video-info {
    padding: 30px 20px 35px; /* Más padding para separar el texto */
    text-align: left;
    background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
    border-radius: 0 0 12px 12px;
    position: relative;
    margin-top: 8px; /* Espacio adicional entre video y texto */
    flex-grow: 1; /* Para que ocupe el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alineación superior */
    min-height: 140px; /* Altura mínima para uniformidad */
}

.video-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
}

.video-info h4 {
    margin: 0 0 18px 0; /* Más espacio entre título y descripción */
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    letter-spacing: 2px; /* Más espaciado entre letras en títulos */
    line-height: 1.4; /* Mejor espaciado en líneas */
    position: relative;
    padding-left: 12px;
}

.video-info h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    border-radius: 2px;
}

.video-info p {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.8; /* Más espaciado entre líneas */
    letter-spacing: 0.3px; /* Espaciado entre letras */
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    padding-left: 12px;
    word-spacing: 1px; /* Espaciado entre palabras */
}

/* ESTILOS RESPONSIVE PARA GALERÍA */
/* ================================================= */

/* Responsive para la galería */
@media only screen and (max-width: 1200px) {
    .video-gallery-row {
        gap: 18px;
        max-width: 1300px;
        align-items: stretch; /* Mantener altura uniforme */
    }
    
    .video-gallery-item {
        max-width: 400px;
        min-height: 380px; /* Altura mínima ajustada */
    }
    
    .video-thumbnail-rect {
        height: 167px; /* Formato más panorámico */
    }
    
    /* Espaciado intermedio para tablets en videos destacados */
    #videos-destacados-gallery .one-third.column {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }
}

@media only screen and (max-width: 900px) {
    .video-gallery-row {
        gap: 20px; /* Ajustado para videos más pequeños */
        max-width: 1200px; /* Reducido */
        align-items: stretch; /* Mantener altura uniforme */
    }
    
    .video-gallery-item {
        max-width: 300px; /* Reducido de 320px */
        margin-bottom: 35px;
        min-height: 360px; /* Altura mínima ajustada */
    }
    
    .video-thumbnail-rect {
        height: 133px; /* Formato más panorámico */
    }
    
    .video-info {
        padding: 25px 15px 30px;
        min-height: 120px; /* Altura mínima para uniformidad */
    }
    
    .video-info h4 {
        font-size: 14px;
        margin-bottom: 15px;
        letter-spacing: 1.5px; /* Espaciado consistente */
    }
    
    .video-info p {
        font-size: 13px;
        line-height: 1.8; /* Mejor espaciado entre líneas */
        letter-spacing: 0.2px; /* Espaciado entre letras */
        word-spacing: 0.5px; /* Espaciado entre palabras */
    }
}

@media only screen and (max-width: 767px) {
    #video-gallery {
        padding: 50px 0;
    }
    
    .video-gallery-row {
        gap: 15px;
        margin-top: 30px;
        flex-direction: column;
        flex-wrap: nowrap;
        max-width: 100%;
        align-items: stretch; /* Mantener uniformidad en móvil */
    }
    
    .video-gallery-item {
        margin-bottom: 30px;
        border-radius: 10px;
        width: 100%;
        min-height: auto; /* Altura automática en móvil */
        max-width: 100%;
    }
    
    .video-thumbnail-rect {
        padding-bottom: 176.67%; /* Mantener proporción 480x848 en móvil para videos destacados */
        height: 0;
        border-radius: 10px 10px 0 0;
    }
    
    /* Para proyectos destacados en móvil - formato más panorámico */
    #video-gallery .video-thumbnail-rect {
        padding-bottom: 75%; /* Formato panorámico para proyectos en móvil */
        height: 0;
        border-radius: 10px 10px 0 0;
    }
    
    /* Para videos destacados en móvil - mantener formato vertical */
    #videos-destacados-gallery .video-thumbnail-rect {
        padding-bottom: 176.67%; /* Mantener proporción exacta 480x848 */
        height: 0;
        border-radius: 10px;
    }
    
    #videos-destacados-gallery .video-gallery-item {
        max-width: 200px; /* Ancho más controlado en móvil para videos verticales */
        margin: 0 auto 30px auto;
    }
    
    /* Reducir espaciado en móvil también */
    #videos-destacados-gallery .one-third.column {
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
    
    .video-overlay-rect {
        border-radius: 10px 10px 0 0;
    }
    
    .video-gallery-item:hover {
        transform: translateY(-4px);
    }
    
    .video-play-btn-rect {
        width: 60px;
        height: 60px;
    }
    
    .play-icon-rect {
        font-size: 18px;
    }
    
    .video-info {
        padding: 25px 15px 30px; /* Más espaciado en móvil también */
        border-radius: 0 0 10px 10px;
        margin-top: 5px;
        min-height: 120px; /* Altura mínima en móvil */
        margin-top: 5px;
    }
    
    .video-info h4 {
        font-size: 14px;
        letter-spacing: 1.5px; /* Espaciado mejorado */
        margin-bottom: 15px; /* Más espacio entre título y descripción */
    }
    
    .video-info h4::before {
        height: 14px;
    }
    
    .video-info p {
        font-size: 13px;
        line-height: 1.8; /* Mejor espaciado entre líneas */
        letter-spacing: 0.2px; /* Espaciado entre letras */
        word-spacing: 0.5px; /* Espaciado entre palabras */
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .video-gallery-row {
        gap: 15px;
    }
    
    .video-gallery-item {
        max-width: calc(33.333% - 12px);
        min-width: 280px;
    }
}

@media only screen and (max-width: 480px) {
    .video-gallery-row {
        gap: 10px;
    }
    
    .video-gallery-item {
        margin-bottom: 20px;
    }
    
    .video-info {
        padding: 18px 12px 22px;
    }
    
    .video-info h4 {
        font-size: 13px;
    }
    
    .video-info p {
        font-size: 12px;
    }
}

/* ESTILOS PARA SECCIÓN CONTACTO — REDISEÑO COMPLETO */
/* ================================================= */

#contact {
    color: #fff !important;
    z-index: 10 !important;
    position: relative !important;
}

#contact .container {
    z-index: 15 !important;
    position: relative !important;
}

#contact .header-text h1,
#contact .header-text h2 {
    color: #fff !important;
}

#contact .header-text p {
    color: rgba(255,255,255,0.8) !important;
}

#contact .header-shadow-text {
    color: rgba(255,255,255,0.08) !important;
}

#contact .parallax1,
#contact .just_pattern {
    z-index: 1 !important;
}

/* ---- LAYOUT DOS COLUMNAS ---- */

.contact-layout {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.contact-form-col {
    padding-right: 30px;
    box-sizing: border-box;
}

/* ---- FORMULARIO ---- */

/* Fila de dos campos en paralelo */
.contact-fields-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-field-half {
    flex: 1 1 0;
    min-width: 0;
}

.contact-field-full {
    flex: 1 1 100%;
}

.contact-field-group {
    margin-bottom: 18px;
}

#contact label {
    display: block !important;
    color: rgba(255,255,255,0.65) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
}

#contact input,
#contact textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1.5px solid rgba(255,255,255,0.14) !important;
    border-radius: 6px !important;
    padding: 11px 15px !important;
    font-size: 14px !important;
    z-index: 20 !important;
    position: relative !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
    margin-top: 6px !important;
}

#contact input:focus,
#contact textarea:focus {
    border-color: #FF8933 !important;
    box-shadow: 0 0 0 3px rgba(255,137,51,0.18) !important;
    outline: none !important;
    background: rgba(255,255,255,0.1) !important;
}

#contact input::placeholder,
#contact textarea::placeholder {
    color: rgba(255,255,255,0.28) !important;
}

#contact textarea {
    min-height: 140px !important;
    height: auto !important;
    resize: vertical !important;
}

#contact .error {
    color: rgba(255,200,100,0.85) !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
}

#contact #button-con {
    z-index: 25 !important;
    position: relative !important;
    margin-top: 6px !important;
    text-align: unset !important;
    width: 100% !important;
}

#contact #send {
    width: 100% !important;
    background: #FF8933 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    letter-spacing: 2.5px !important;
    height: auto !important;
    padding: 14px 0 !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    z-index: 30 !important;
    position: relative !important;
    pointer-events: auto !important;
    transition: background 0.25s, transform 0.15s !important;
}

#contact #send:hover {
    background: #e67020 !important;
    transform: translateY(-2px) !important;
}

#contact #send:active {
    transform: translateY(0) !important;
}

/* Mensaje de éxito */
#ajaxsuccess {
    background: rgba(255,137,51,0.1) !important;
    border: 1px solid rgba(255,137,51,0.3) !important;
    border-radius: 8px !important;
    color: #FF8933 !important;
    padding: 18px 20px !important;
    text-align: center !important;
    margin-top: 18px !important;
    font-size: 16px !important;
    height: auto !important;
}

/* ---- TARJETAS DE INFORMACIÓN ---- */

.contact-info-col {
    padding-left: 10px;
    box-sizing: border-box;
    padding-top: 30px; /* alinea con el primer input del formulario (label + gap) */
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    margin-bottom: 14px;
    transition: background 0.3s, border-color 0.3s;
}

.contact-card:hover {
    background: rgba(255,137,51,0.08);
    border-color: rgba(255,137,51,0.25);
}

.contact-card-icon {
    font-family: 'FontAwesome' !important;
    font-size: 20px;
    color: #FF8933;
    line-height: 1.4;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.contact-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-card-body strong {
    font-family: 'Sifonn-Basic', sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #FF8933;
    display: block;
    margin-bottom: 2px;
}

.contact-card-body span,
.contact-card-body a {
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    text-decoration: none;
    line-height: 1.5;
}

.contact-card-body a:hover {
    color: #FF8933;
}

.contact-card-body small {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    line-height: 1.4;
}

/* ---- RESPONSIVE ---- */

@media only screen and (max-width: 767px) {
    .contact-form-col,
    .contact-info-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
    .contact-card {
        padding: 16px 18px;
    }
    .contact-fields-row {
        flex-direction: column;
        gap: 0;
    }
    .contact-field-half {
        width: 100%;
    }
}

/* BOTÓN DE CIERRE DEL MAPA */
/* ================================================= */

.map-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(41, 41, 41, 0.9);
    color: #fff;
    border: 2px solid #FF8933;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.map-close-button:hover {
    background: #FF8933;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(255, 137, 51, 0.4);
}

.map-close-button:active {
    transform: scale(0.95);
}

#google_map {
    position: relative;
    height: 400px;
    width: 100%;
    display: none;
}

/* ESTILOS PARA SECCIÓN CLIENTES */
/* ================================================= */

#clients {
    position: relative;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px;
    z-index: 2;
    background: #292929;
}

/* ESTILOS PARA SECCIÓN ABOUT - GRADIENTE */
/* ================================================= */

#about {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d) !important;
}

/* ESTILOS PARA SECCIÓN WORK */
/* ================================================= */

#work {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    padding-bottom: 60px;
}

/* ESTILOS PARA SECCIÓN VIDEO-GALLERY - SÓLIDO */
/* ================================================= */

#video-gallery {
    background: #292929 !important;
}

/* ESTILOS PARA SECCIÓN SERVICES - GRADIENTE */
/* ================================================= */

#services {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d) !important;
}

/* BOTÓN FLOTANTE DE WHATSAPP */
/* ================================================= */

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%;
    color: white;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.whatsapp-float a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.3);
    transform: scale(1);
    opacity: 1;
    animation: pulse-ring 2s infinite;
}

.whatsapp-float a:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
    background: linear-gradient(135deg, #128c7e, #25d366);
}

.whatsapp-float a:active {
    transform: scale(0.95);
}

.whatsapp-icon {
    width: 32px;
    height: 32px;
    fill: white;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.whatsapp-float a:hover .whatsapp-icon {
    transform: scale(1.1);
}

@keyframes bounceIn {
    0% {
        transform: translateY(100px) scale(0.3);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
    70% {
        transform: translateY(5px) scale(0.95);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Responsive - Dispositivos móviles */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
    }
    
    .whatsapp-float a {
        width: 48px;
        height: 48px;
        font-size: 20px;
        box-shadow: 0 3px 12px rgba(37, 211, 102, 0.4);
    }
    
    .whatsapp-icon {
        width: 24px;
        height: 24px;
    }
    
    .whatsapp-float a:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.5);
    }
}

/* EXTENSIÓN DE CONTENEDORES DE SERVICIOS - SOLO ALTURA */
/* ===================================================== */

/* Ajustar altura de los 3 primeros cuadros de servicios para mejor proporción */
#services .container:nth-of-type(2) .one-third:nth-child(1) .services-offer,
#services .container:nth-of-type(2) .one-third:nth-child(2) .services-offer,
#services .container:nth-of-type(2) .one-third:nth-child(3) .services-offer {
    min-height: 280px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 25px 20px !important;
    box-sizing: border-box !important;
}

/* Asegurar que el contenido se distribuya bien en el espacio ajustado */
#services .container:nth-of-type(2) .one-third:nth-child(1) .services-offer p,
#services .container:nth-of-type(2) .one-third:nth-child(2) .services-offer p,
#services .container:nth-of-type(2) .one-third:nth-child(3) .services-offer p {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

/* FIX PARA CONTENEDORES DE SERVICIOS BTL Y IMPLEMENTACION REGIONAL EN MÓVIL */
/* ========================================================================= */

/* Corregir layout de servicios "BTL & Experiencias" e "Implementación Regional" en móvil */
@media only screen and (max-width: 767px) {
    /* Eliminar offset y ajustar ancho para columnas de servicios en móvil */
    #services .eight.columns.offset-by-two,
    #services .six.columns {
        padding-left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Asegurar que los contenedores de servicios tengan el ancho completo en móvil */
    #services .services-offer {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    
    /* Ajuste específico para el contenedor BTL & Experiencias */
    #services .container:nth-of-type(3) .eight.columns.offset-by-two .services-offer {
        min-height: 280px !important;
        height: auto !important;
    }
    
    /* Ajuste específico para el contenedor Implementación Regional */
    #services .container:nth-of-type(3) .six.columns .services-offer {
        min-height: 280px !important;
        height: auto !important;
    }
}

/* MEJORAS PARA REPRODUCCIÓN DE VIDEOS EN MÓVIL */
/* ============================================== */

/* Estilos mejorados para thumbnails de video en móvil */
@media (max-width: 768px) {
    /* Mejorar interacción táctil en videos destacados */
    #videos-destacados-gallery .video-thumbnail-rect {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }
    
    #videos-destacados-gallery .video-thumbnail-rect:active {
        transform: none !important; /* NO clickeable */
        opacity: 1 !important;
    }
    
    /* Asegurar que el overlay y botón sean clickeables, NO el thumbnail */
    #videos-destacados-gallery .video-overlay-rect,
    #video-gallery .video-overlay-rect {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Asegurar que los botones de play sean clickeables */
    #videos-destacados-gallery .video-play-btn-rect,
    #video-gallery .video-play-btn-rect {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* El thumbnail debe permitir eventos en sus hijos pero no tener cursor pointer */
    #videos-destacados-gallery .video-thumbnail-rect,
    #video-gallery .video-thumbnail-rect {
        cursor: default !important;
    }

    /* Mejorar botones de play en móvil */
    #videos-destacados-gallery .video-play-btn-rect {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
        background: rgba(0,0,0,0.8) !important;
        color: white !important;
        border: 2px solid white !important;
        border-radius: 50% !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        padding: 0 !important;
        line-height: 1 !important;
        margin-left: 1px !important; /* Centrar visualmente el ícono de play */
        pointer-events: auto !important;
    }
    
    #videos-destacados-gallery .video-play-btn-rect:active,
    #videos-destacados-gallery .video-play-btn-rect:hover {
        transform: scale(0.9) !important;
        background: rgba(0,0,0,1) !important;
        border-color: rgba(255,255,255,0.9) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
    }
    
    #videos-destacados-gallery .play-icon-rect {
        margin-left: 1px !important; /* Ajuste fino para centrar el triángulo */
        font-size: inherit !important;
    }
    
    /* Mejorar overlay de video en móvil */
    #videos-destacados-gallery .video-overlay-rect {
        background: rgba(0,0,0,0.4) !important;
        transition: all 0.3s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #videos-destacados-gallery .video-overlay-rect:active {
        background: rgba(0,0,0,0.6) !important;
    }
    
    /* Mejorar galería de videos principales en móvil */
    #video-gallery .video-thumbnail-rect {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    

    #video-gallery .video-thumbnail-rect:active {
        transform: none !important; /* NO clickeable */
        opacity: 1 !important;
    }

    #video-gallery .fancybox-button {
        width: 35px !important;
        height: 35px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        background: rgba(0,0,0,0.8) !important;
        color: white !important;
        border: 2px solid white !important;
        border-radius: 50% !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-left: 1px !important; /* Centrar visualmente el ícono de play */
    }
    
    #video-gallery .fancybox-button:active,
    #video-gallery .fancybox-button:hover {
        transform: scale(0.9) !important;
        background: rgba(0,0,0,1) !important;
        border-color: rgba(255,255,255,0.9) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
    }
    
    /* Mejorar información de video en móvil */
    .video-info h4 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        font-weight: bold !important;
    }
    
    .video-info p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    /* Feedback visual mejorado para toques */
    .video-gallery-item {
        transition: all 0.2s ease !important;
    }
    
    .video-gallery-item:active {
        transform: translateY(2px) !important;
    }
    
    /* Estilos para el contenedor de video fullscreen móvil */
    #mobile-video-fullscreen {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        user-select: none !important;
    }
    
    #mobile-video-fullscreen video {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }
    
    /* Mejorar controles de video nativos en móvil */
    video::-webkit-media-controls-panel {
        background: rgba(0,0,0,0.8) !important;
    }
    
    video::-webkit-media-controls-play-button {
        color: white !important;
    }
    
    video::-webkit-media-controls-timeline {
        color: white !important;
    }
    
    video::-webkit-media-controls-volume-slider {
        color: white !important;
    }
}

/* PRELOADER STYLES */
/* ================================================= */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* Or a color that matches your design */
    z-index: 9999; /* Ensure it's on top of everything */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Hide body content until preloader is hidden */
body._loader #home,
body._loader #menu-wrap,
body._loader #services,
body._loader #work,
body._loader #clients,
body._loader #videos-destacados-gallery,
body._loader #video-gallery,
body._loader #about,
body._loader #contact,
body._loader #footer,
body._loader #whatsapp-float {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Show content when preloader is removed */
body:not(._loader) #home,
body:not(._loader) #menu-wrap,
body:not(._loader) #services,
body:not(._loader) #work,
body:not(._loader) #clients,
body:not(._loader) #videos-destacados-gallery,
body:not(._loader) #video-gallery,
body:not(._loader) #about,
body:not(._loader) #contact,
body:not(._loader) #footer,
body:not(._loader) #whatsapp-float {
    opacity: 1;
    visibility: visible;
}

/* Ensure video is visible when preloader is gone */
#video_background {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    border: none !important;
    z-index: -1 !important;
}

/* Initially hide video until preloader is ready to fade out */
body._loader #video_background {
    opacity: 0;
    visibility: hidden;
}

/* Asegurar que el contenedor home oculte el overflow del video escalado */
#home {
    overflow: hidden !important;
    position: relative !important;
}

/* FIX PARA EL SELECTOR DE IDIOMA EN MÓVIL */
/* ================================================= */

@media (max-width: 768px) {
    ul.slimmenu.collapsed li.lang-menu-item {
        overflow: visible !important;
    }

    ul.slimmenu.collapsed {
        overflow: visible !important;
    }

    #lang-options {
        position: absolute !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: auto !important; 
        bottom: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* ── NAV: comprimir ítems para que entren en una línea ──── */
@media (min-width: 769px) {
    ul.slimmenu {
        padding-left: 150px !important;
        padding-right: 4px !important;
    }

    ul.slimmenu li a {
        font-size: 10.5px !important;
        margin: 0 5px !important;
        letter-spacing: 0.3px;
    }

    ul.slimmenu li {
        padding-left: 12px !important;
    }

    .cbp-af-header.cbp-af-header-shrink ul.slimmenu {
        padding-left: 140px !important;
    }

    /* Selector de idioma: reducir padding interno */
    #language-selector-menu > div:first-child {
        padding: 5px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
}

/* FORZAR ESTILOS DEL VIDEO BACKGROUND - MÁXIMA PRIORIDAD */
/* ================================================= */
iframe#video_background,
#home iframe#video_background,
main#home iframe#video_background {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.4) !important;
    -webkit-transform: translate(-50%, -50%) scale(1.4) !important;
    -moz-transform: translate(-50%, -50%) scale(1.4) !important;
    -ms-transform: translate(-50%, -50%) scale(1.4) !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none !important;
    border: none !important;
    z-index: -1 !important;
    opacity: 1 !important;
    object-fit: cover !important;
}

/* Asegurar que el contenedor principal tenga el tamaño correcto */
main#home {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustes específicos para móviles */
@media (max-width: 768px) {
    iframe#video_background,
    #home iframe#video_background,
    main#home iframe#video_background {
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -moz-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        width: 100vw !important;
        height: 177.78vw !important;
        min-height: 100vh !important;
        min-width: 56.25vh !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* ================================================= */
/* SECCIÓN MARKETING DIGITAL — CARRUSEL              */
/* ================================================= */

#marketing-digital {
    min-height: 100vh;
    padding: clamp(50px, 7vh, 80px) 0 clamp(40px, 5vh, 64px);
    background: #1e1e1e;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

#marketing-digital .header-text {
    margin-bottom: 0;
    padding-bottom: 10px;
}

/* Wrapper del carrusel */
.md-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 24px 0; /* espacio para que el drop-shadow no se corte arriba/abajo */
}

/* Expande el container del slide más allá de los 960px fijos del sitio */
.md-slide .container {
    width: min(92vw, 1280px);
    max-width: min(92vw, 1280px);
    padding: 0;
}

/* Track de slides */
.md-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

/* Slide individual */
.md-slide {
    min-width: 100%;
    box-sizing: border-box;
}

/* Layout interno: descripción izquierda | imagen derecha */
.md-slide-inner {
    display: flex;
    align-items: center;
    gap: clamp(28px, 3.5vw, 52px);
    padding: clamp(10px, 2vh, 24px) 0;
}

/* Columna izquierda: texto */
.md-slide-content {
    flex: 0 0 52%;
    max-width: 52%;
    padding-right: 8px;
    box-sizing: border-box;
}

/* Animación entrada slide (reservada) */

.md-slide-content h3 {
    font-size: clamp(13px, 1.2vw, 20px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 clamp(10px, 1.4vh, 16px);
    line-height: 1.28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-brand-logo-wrap + h3 {
    margin-top: 0;
}

.md-slide-tagline {
    margin-top: 12px;
    font-size: 13px;
    font-style: italic;
    color: #c9a84c;
    opacity: .9;
}

.md-client-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #c9a84c;
    border: 1px solid rgba(201,168,76,.45);
    border-radius: 3px;
    padding: 3px 9px;
    margin-bottom: 12px;
}

.md-brand-logo {
    display: block;
    max-height: 70px;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    filter: brightness(0) invert(1);
    opacity: .92;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.md-brand-logo-wrap {
    text-align: center;
    margin-bottom: 10px;
}

.md-slide-content p {
    font-size: clamp(13px, 1.15vw, 15.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: clamp(10px, 1.4vh, 16px);
}

.md-slide-content ul {
    list-style: none;
    margin: 0 0 clamp(10px, 1.2vh, 14px);
    padding: 0;
}

.md-slide-content ul li {
    font-size: clamp(12px, 1.05vw, 14px);
    color: rgba(255, 255, 255, 0.62);
    padding: clamp(4px, 0.7vh, 7px) 0 clamp(4px, 0.7vh, 7px) 20px;
    position: relative;
}

.md-slide-content ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #c9a84c;
    font-size: 11px;
}

/* Columna derecha: imagen — altura relativa al viewport */
.md-slide-image {
    flex: 0 0 44%;
    max-width: 44%;
    height: clamp(280px, calc(100vh - 280px), 500px);
    border-radius: 6px;
    box-sizing: border-box;
    overflow: visible;
    /* Flex para centrar la foto real dentro del cuadro */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lightbox zoom overlay: tamaño igual a la imagen visible */
.md-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.md-img-link img {
    /* El elemento img mide igual que la foto: border-radius y sombra quedan exactos */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.65));
    transition: transform 0.55s ease, filter 0.55s ease;
}

.md-slide-image:hover .md-img-link img {
    transform: scale(1.04);
    filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.75));
}

.md-zoom-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    transform: scale(0.7);
    opacity: 0;
    background: rgba(0, 0, 0, 0.55);
    border: 1.5px solid rgba(201, 168, 76, 0.7);
    color: #c9a84c;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.md-img-link:hover .md-zoom-icon {
    opacity: 1;
    transform: scale(1);
}

/* Flechas de navegación en bordes — siempre visibles */
.md-edge-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    z-index: 10;
    cursor: pointer;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.25s ease, background 0.25s ease;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
}
.md-edge-hint:focus,
.md-edge-hint:focus-visible,
.md-edge-hint:active { outline: none !important; box-shadow: none !important; }

.md-edge-hint--left {
    left: -52px;
    background: transparent;
}

.md-edge-hint--right {
    right: -52px;
    background: transparent;
}

.md-edge-hint:hover {
    color: #c9a84c;
    background: transparent;
}

.md-edge-hint:hover svg {
    filter: none;
}

.md-edge-hint svg {
    filter: none;
    transition: transform 0.2s ease;
}

.md-edge-hint--left:hover svg  { transform: translateX(-2px); }
.md-edge-hint--right:hover svg { transform: translateX(2px); }

/* Overlay que centra las flechas dentro del ancho del container */
.md-nav-overlay {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.md-nav-inner {
    position: relative;
    width: 100%;
    max-width: min(92vw, 1280px);
    pointer-events: none;
}
.md-nav-inner .md-edge-hint {
    pointer-events: all;
}

/* Cuando no hay espacio afuera del container, las flechas vuelven al borde */
@media screen and (max-width: 1080px) {
    .md-edge-hint--left  { left: 0; }
    .md-edge-hint--right { right: 0; }

    /* Separación suficiente entre flechas (52px) y contenido */
    .md-slide .container {
        padding-left: 70px;
        padding-right: 70px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ── Pantallas grandes (≥1400px) ─────────────────── */
@media (min-width: 1400px) {
    .md-slide-image {
        height: clamp(360px, calc(100vh - 260px), 560px);
    }
    /* h3 usa el clamp base — escala fluida sin salto */
}

/* ── Tablet (≤900px) ─────────────────────────────── */
@media (max-width: 900px) {
    #marketing-digital {
        min-height: auto;
        padding: clamp(40px, 5vh, 60px) 0 clamp(36px, 4.5vh, 54px);
    }

    .md-slide-inner {
        flex-direction: column-reverse;
        gap: 18px;
        padding: 0;
    }

    .md-slide-content,
    .md-slide-image {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .md-slide-image {
        height: clamp(200px, 38vw, 260px);
        overflow: visible;
    }

    .md-slide-content h3 {
        font-size: clamp(18px, 3.5vw, 22px);
        white-space: normal;
        text-overflow: clip;
    }

    .md-slide-content p {
        font-size: 14px;
    }
}

/* ── Móvil (≤600px) ──────────────────────────────── */
@media (max-width: 600px) {
    #marketing-digital {
        padding: 36px 0 32px;
    }

    /* Flechas más pequeñas en móvil para ceder espacio al contenido */
    .md-edge-hint {
        width: 40px;
    }
    .md-slide .container {
        padding-left: 56px;
        padding-right: 56px;
    }

    .md-slide-image {
        height: clamp(165px, 46vw, 205px);
        overflow: visible;
    }

    .md-slide-content h3 {
        font-size: clamp(16px, 4.5vw, 19px);
        white-space: normal;
        text-overflow: clip;
    }

    .md-slide-content p,
    .md-slide-content ul li {
        font-size: 13px;
    }
}

/* ── Móvil pequeño (≤380px) ──────────────────────── */
@media (max-width: 380px) {
    .md-edge-hint {
        width: 34px;
    }
    .md-slide .container {
        padding-left: 46px;
        padding-right: 46px;
    }

    .md-slide-image {
        height: 140px;
        overflow: visible;
    }

    .md-slide-content h3 {
        font-size: 15px;
        white-space: normal;
        text-overflow: clip;
    }

    .md-slide-content p,
    .md-slide-content ul li {
        font-size: 12px;
    }
}

/* ── Fancybox v2: quitar rectángulo azul de foco en flechas y cierre ── */
.fancybox-nav,
.fancybox-nav span,
.fancybox-prev,
.fancybox-next,
.fancybox-close,
.fancybox-wrap a,
.fancybox-wrap a:focus,
.fancybox-nav:focus,
.fancybox-prev:focus,
.fancybox-next:focus,
.fancybox-close:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* == Fancybox v2: titulo debajo de la imagen (type outside) - Galería Actualidad == */
.fancybox-title.fancybox-title-outside-wrap {
    color: #ffffff !important;
    background: rgba(13,13,13,0.95) !important;
    text-align: center !important;
    padding: 10px 20px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: Arial,sans-serif !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    border-radius: 0 0 4px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* == Fancybox v2: titulo centrado debajo de la imagen (type inside) - Galería Producciones == */
.fancybox-title.fancybox-title-inside-wrap {
    color: #ffffff !important;
    background: rgba(13, 13, 13, 0.95) !important;
    text-align: center !important;
    padding: 10px 20px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ================================================= */
/* OPTIMIZACIONES RENDIMIENTO MÓVIL - SCROLL FLUIDO */
/* ================================================= */
@media (max-width: 768px) {
    /* Eliminar filter (rasteriza toda la capa antes de compositar) */
    .md-img-link img {
        filter: none !important;
        transition: transform 0.25s ease !important;
    }
    .md-slide-image:hover .md-img-link img {
        filter: none !important;
        transform: none !important; /* sin escala en touch */
    }

    /* Eliminar backdrop-filter (la operación más costosa en GPU móvil) */
    .md-zoom-icon {
        display: none !important; /* no tiene sentido en dispositivos táctiles */
    }

    /* Reducir capas GPU del carrusel Actualidad */
    .md-track {
        will-change: auto !important;
    }
    .md-brand-logo {
        transform: none !important;
        -webkit-transform: none !important;
        backface-visibility: visible !important;
    }

    /* Reducir capas GPU de la sección about-intro */
    #about-intro,
    #about-intro * {
        will-change: auto !important;
    }
    #about-intro {
        transform: none !important;
        -webkit-transform: none !important;
        backface-visibility: visible !important;
    }

    /* Reduce la distancia de las animaciones de reels en móvil */
    #videos-destacados-gallery .video-gallery-row {
        contain: layout style;
    }

    /* Eliminar drop-shadow múltiple en galeria de imágenes (muy costoso) */
    .md-img-link {
        filter: none !important;
    }

    /* Simplificar transición del track para que no compita con el scroll */
    .md-track {
        transition: transform 0.4s ease !important;
    }
}