.elementor-4767 .elementor-element.elementor-element-ad2693b > .elementor-background-overlay{background-color:#020101E3;opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4767 .elementor-element.elementor-element-ad2693b > .elementor-container{min-height:571px;}.elementor-4767 .elementor-element.elementor-element-ad2693b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-60px;margin-bottom:0px;z-index:1;}.elementor-4767 .elementor-element.elementor-element-4845839 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-4767 .elementor-element.elementor-element-4845839 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-4767 .elementor-element.elementor-element-224e018 > .elementor-widget-container{margin:150px 0px 0px 65px;}.elementor-4767 .elementor-element.elementor-element-224e018{z-index:2;font-family:"Poppins", Sans-serif;font-size:0px;font-weight:800;line-height:90px;}.elementor-4767 .elementor-element.elementor-element-224e018 p{margin-block-end:10px;}.elementor-4767 .elementor-element.elementor-element-78fab4b > .elementor-widget-container{margin:-10px 0px 0px 65px;}.elementor-4767 .elementor-element.elementor-element-78fab4b{z-index:2;text-align:start;font-family:"Poppins", Sans-serif;font-weight:200;line-height:1px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-4767 .elementor-element.elementor-element-69bbb4d > .elementor-element-populated{margin:-220px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-4767 .elementor-element.elementor-element-69bbb4d{z-index:2;}.elementor-4767 .elementor-element.elementor-element-a1cdaf4:not(.elementor-motion-effects-element-type-background), .elementor-4767 .elementor-element.elementor-element-a1cdaf4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4767 .elementor-element.elementor-element-a1cdaf4{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:30px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-a1cdaf4 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4767 .elementor-element.elementor-element-ff090ea > .elementor-widget-container{margin:0px 0px -10px 0px;padding:30px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-ff090ea{text-align:center;font-family:"Poppins", Sans-serif;font-size:40px;font-weight:600;color:#01153D;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-4767 .elementor-element.elementor-element-64667b2{--divider-border-style:solid;--divider-color:#16B877;--divider-border-width:5px;z-index:2;}.elementor-4767 .elementor-element.elementor-element-64667b2 > .elementor-widget-container{margin:-8px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-64667b2 .elementor-divider-separator{width:10%;margin:0 auto;margin-center:0;}.elementor-4767 .elementor-element.elementor-element-64667b2 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-4767 .elementor-element.elementor-element-1df5450 > .elementor-widget-container{margin:-20px -20px 0px -20px;}.elementor-4767 .elementor-element.elementor-element-b353359 > .elementor-widget-container{margin:-40px 0px 30px 0px;}.elementor-4767 .elementor-element.elementor-element-d8141d1{--divider-border-style:solid;--divider-color:#E0E0E0;--divider-border-width:2px;width:100%;max-width:100%;z-index:0;}.elementor-4767 .elementor-element.elementor-element-d8141d1 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-d8141d1 .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-4767 .elementor-element.elementor-element-d8141d1 .elementor-divider{text-align:center;padding-block-start:8px;padding-block-end:8px;}.elementor-4767 .elementor-element.elementor-element-bcd0f81:not(.elementor-motion-effects-element-type-background), .elementor-4767 .elementor-element.elementor-element-bcd0f81 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4767 .elementor-element.elementor-element-bcd0f81{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:20px;padding:0px 0px 20px 0px;}.elementor-4767 .elementor-element.elementor-element-bcd0f81 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4767 .elementor-element.elementor-element-fc72688 > .elementor-widget-container{margin:0px 0px -10px 0px;padding:30px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-fc72688{text-align:center;font-family:"Poppins", Sans-serif;font-size:40px;font-weight:600;color:#01153D;}.elementor-4767 .elementor-element.elementor-element-366cbb9{--divider-border-style:solid;--divider-color:#16B877;--divider-border-width:5px;z-index:2;}.elementor-4767 .elementor-element.elementor-element-366cbb9 > .elementor-widget-container{margin:-4px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-366cbb9 .elementor-divider-separator{width:10%;margin:0 auto;margin-center:0;}.elementor-4767 .elementor-element.elementor-element-366cbb9 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-4767 .elementor-element.elementor-element-6239534 > .elementor-widget-container{margin:10px 0px 20px 0px;padding:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-6239534{text-align:center;font-family:"Poppins", Sans-serif;font-size:19px;font-weight:400;color:#000000;}.elementor-4767 .elementor-element.elementor-element-b56450b{--divider-border-style:solid;--divider-color:#E0E0E0;--divider-border-width:2px;width:100%;max-width:100%;z-index:0;}.elementor-4767 .elementor-element.elementor-element-b56450b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-b56450b .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-4767 .elementor-element.elementor-element-b56450b .elementor-divider{text-align:center;padding-block-start:8px;padding-block-end:8px;}.elementor-4767 .elementor-element.elementor-element-7c12daa{margin-top:20px;margin-bottom:0px;padding:10px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-bfe6be4 > .elementor-widget-container{margin:20px 0px 0px 0px;padding:20px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-bfe6be4{text-align:center;font-family:"Poppins", Sans-serif;font-size:40px;font-weight:600;line-height:1.5em;letter-spacing:-0.1px;color:#01153D;}.elementor-4767 .elementor-element.elementor-element-3c4c64c{--divider-border-style:solid;--divider-color:#16B877;--divider-border-width:5px;z-index:2;}.elementor-4767 .elementor-element.elementor-element-3c4c64c > .elementor-widget-container{margin:-15px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-3c4c64c .elementor-divider-separator{width:10%;margin:0 auto;margin-center:0;}.elementor-4767 .elementor-element.elementor-element-3c4c64c .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-4767 .elementor-element.elementor-element-fca19ef > .elementor-widget-container{margin:-20px 0px 40px 0px;}.elementor-4767 .elementor-element.elementor-element-476f3cb:not(.elementor-motion-effects-element-type-background), .elementor-4767 .elementor-element.elementor-element-476f3cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4767 .elementor-element.elementor-element-476f3cb{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-476f3cb > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4767 .elementor-element.elementor-element-f348b9c > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-1afc375 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-0018519{--divider-border-style:solid;--divider-color:#E0E0E0;--divider-border-width:2px;width:100%;max-width:100%;z-index:0;}.elementor-4767 .elementor-element.elementor-element-0018519 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-0018519 .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-4767 .elementor-element.elementor-element-0018519 .elementor-divider{text-align:center;padding-block-start:8px;padding-block-end:8px;}.elementor-4767 .elementor-element.elementor-element-0e477c9 > .elementor-widget-container{background-color:#FFFFFF;margin:0px 0px -50px 0px;padding:20px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-0e477c9{text-align:center;font-family:"Poppins", Sans-serif;font-size:30px;font-weight:600;line-height:1.7em;letter-spacing:-0.1px;color:#01153D;}.elementor-4767 .elementor-element.elementor-element-194c252 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-4767 .elementor-element.elementor-element-507cc69{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:-60px;--margin-left:0px;--margin-right:0px;}.elementor-4767 .elementor-element.elementor-element-507cc69:not(.elementor-motion-effects-element-type-background), .elementor-4767 .elementor-element.elementor-element-507cc69 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4767 .elementor-element.elementor-element-75a82bc{color:#000000;}@media(max-width:767px){.elementor-4767 .elementor-element.elementor-element-224e018 > .elementor-widget-container{margin:170px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-224e018{font-size:49px;}.elementor-4767 .elementor-element.elementor-element-224e018 p{margin-block-end:-20px;}.elementor-4767 .elementor-element.elementor-element-78fab4b > .elementor-widget-container{margin:10px 60px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-78fab4b{text-align:center;font-size:30px;}.elementor-4767 .elementor-element.elementor-element-78fab4b p{margin-block-end:-20px;}.elementor-4767 .elementor-element.elementor-element-ff090ea{text-align:center;font-size:27px;line-height:0.9em;}.elementor-4767 .elementor-element.elementor-element-64667b2 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-4767 .elementor-element.elementor-element-fc72688{text-align:center;font-size:27px;line-height:0.9em;}.elementor-4767 .elementor-element.elementor-element-366cbb9 > .elementor-widget-container{margin:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-4767 .elementor-element.elementor-element-4845839{width:100%;}}/* Start custom CSS for text-editor, class: .elementor-element-224e018 *//* === ESTILOS BASE (Escritorio / General) === */
.Ntextt {
    font-size: clamp(25px, 4vw, 85px) !important;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    /* Subimos un poco el interlineado base para evitar choques si la pantalla es mediana */
    line-height: 0.5 !important; 
    display: block; /* Asegura que ocupe su propia línea */
}

.bigText {
    font-size: clamp(40px, 8vw, 120px) !important;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #FFD800;
    line-height: 1.2 !important;
    display: block; /* Asegura que ocupe su propia línea */
    /* Pequeño margen negativo arriba si quieres que esté pegado al texto anterior, 
       o positivo si quieres separarlo */
    margin-top: -5px; 
}

/* === PANTALLAS GRANDES (Full HD+) === */
@media (min-width: 1920px) {
    .bigText {
        font-size: 120px !important;
        line-height: 1 !important;
    }
}

/* === TABLETS Y Laptops Pequeñas (max 768px) === */
@media (max-width: 768px) {
    .Ntextt {
        /* Reduje un poco el mínimo (20px) para evitar saltos bruscos */
        font-size: clamp(20px, 5vw, 40px) !important;
        
        /* Aumentamos el interlineado para que "respire" */
        line-height: 1.6 !important; 
        
        /* Asegura que la caja ocupe todo el ancho y empuje lo de abajo */
        display: block !important; 
        width: 100%;
    }
    
    .bigText {
        font-size: clamp(32px, 8vw, 60px) !important;
        line-height: 1.1 !important;
        
        /* Asegura que se comporte como bloque */
        display: block !important; 
        width: 100%;
    }
}

/* === MÓVILES ESTÁNDAR (max 480px) === */
@media (max-width: 480px) {
    .Ntextt {
        font-size: 22px !important; 
        line-height: 1.4 !important; 
    }

    .bigText {
        font-size: 36px !important; 
        line-height: 1.4 !important;
        
        /* Añadimos margen arriba extra por si acaso */
        margin-top: 5px !important; 
    }
}

/* === MÓVILES PEQUEÑOS (max 360px) === */
@media (max-width: 360px) {
    .Ntextt {
        font-size: 18px !important;
    }

    .bigText {
        font-size: 28px !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-78fab4b */.Text {
font-size: clamp(16px, 2.5vw, 22px);
font-weight: 400;
 font-family: 'Poppins', sans-serif;
 line-height: 1.4;

}

@media (min-width: 1920px) {
    .Text {
        font-size: 28px; /* Tamaño fijo para pantallas grandes */
    }
}

@media (max-width: 768px) {
    .Text {
        font-size: clamp(14px, 4vw, 22px); /* Ajuste más cómodo en móvil */
        line-height: 1.3;
    }
      .elementor-widget-text-editor {
    padding-left: 15px !important;
    padding-right: 15px !important;
     text-align: left!important
  }

}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-4845839 */@media (min-width: 1920px) {
    .Agrupar{
        position: absolute;
        top:4%!important;
           }
}
@media (min-width: 1024px) {
    .Agrupar{
        position: absolute;
        top:-10%;
       
           }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-ad2693b *//* ===============================
   SOLUCIÓN OPTIMIZADA PARA ELIMINAR LÍNEA BLANCA
   Elemento: ad2693b
   =============================== */

/* Configuración base del body y html */
html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Configuración base del contenedor - SIMPLIFICADA */
.elementor-element-ad2693b {
    height: 87svh !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
    
    /* CLAVE: Color de fondo que coincida con el primer frame del video */
    background-color: #1a1a1a !important; /* Ajusta este color al tono principal de tu video */
    
    /* Elimina completamente cualquier espacio que cause líneas blancas */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    
    /* Elimina espacios de texto */
    line-height: 0 !important;
    font-size: 0 !important;
    
    /* Optimización de rendimiento */
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Configuración del video - SIN animaciones complejas */
.elementor-element-ad2693b .elementor-background-video-hosted {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /*height: 100% !important;*/
    object-fit: cover !important;
    object-position: center top !important;
    z-index: 1 !important;
    
    /* Asegurar que esté visible inmediatamente */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    
    /* Optimizaciones para renderizado suave */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    
    /* CLAVE: Eliminar cualquier margen o borde del video */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* SOLUCIÓN ESPECÍFICA para la línea blanca: Expandir ligeramente el video */
.elementor-element-ad2693b .elementor-background-video-hosted {
    /* Expandir el video 1px en todas las direcciones para cubrir posibles gaps */
    top: -1px !important;
    left: -1px !important;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
}

/* Video wrapper general - CORREGIDO */
.video-responsive-wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    background: transparent !important; /* Cambiar de #000 a transparent */
    margin: 0 !important;
    padding-top: 0 !important;
    border: none !important;
}

/* Estilos para videos e iframes internos - MEJORADO */
.video-responsive-wrapper video,
.video-responsive-wrapper iframe,
.elementor-background-video-hosted {
    object-fit: cover !important;
    object-position: center top !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Eliminar TODOS los espacios en contenedores internos de Elementor */
.elementor-element-ad2693b .elementor-container,
.elementor-element-ad2693b .elementor-row,
.elementor-element-ad2693b .elementor-column,
.elementor-element-ad2693b .elementor-column-wrap,
.elementor-element-ad2693b .elementor-widget-wrap,
.elementor-element-ad2693b .elementor-section-wrap,
.elementor-element-ad2693b > .elementor-container,
.elementor-element-ad2693b .elementor-background-video-container,
.elementor-element-ad2693b .elementor-background-video-embed {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    min-height: inherit !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

/* Asegurar que el contenido esté por encima del video */
.elementor-element-ad2693b > .elementor-container {
    position: relative !important;
    z-index: 2 !important;
    /*min-height: 100svh !important;*/
}

/* Header por encima del video - MEJORADO */
.elementor-location-header,
header,
.elementor-header {
    position: relative !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Evita que se "desplace" el stretch de Elementor - CORREGIDO */
.elementor-section.elementor-section-stretched {
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustes para pantallas grandes */
@media (min-width: 1920px) {
    .elementor-element-ad2693b {
        height: 94vh !important;
        min-height: 94vh !important;
    }
    
    .elementor-element-ad2693b .elementor-background-video-hosted {
        object-position: center top !important;
    }
}

/* Ajustes para tablets */
@media (max-width: 1024px) and (min-width: 769px) {
    .elementor-element-ad2693b {
        height: 571px !important;
        min-height: 571px !important;
        margin-top: 0 !important;
    }
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .elementor-element-ad2693b {
        height: 100svh !important;
        min-height: 100svh !important;
        margin-top: 0 !important;
    }
    
    .elementor-element-ad2693b .elementor-background-video-hosted {
        object-position: center center !important;
    }
}

/* Ajuste adicional para eliminar cualquier línea en la parte superior */
.elementor-element-ad2693b:first-child {
    margin-top: 0 !important;
}

/* Alternativa: Si aún se ve la línea, usar un pseudo-elemento del mismo color */
.elementor-element-ad2693b::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #1a1a1a !important; /* Mismo color que el fondo */
    z-index: 3 !important;
    pointer-events: none !important;
}

/* Forzar que el video se cargue inmediatamente */
.elementor-element-ad2693b .elementor-background-video-hosted {
    preload: auto !important;
}

/* Fallback para navegadores antiguos */
@supports not (height: 100svh) {
    .elementor-element-ad2693b {
        min-height: 571px !important;
        height: 571px !important;
    }
    
    .elementor-element-ad2693b .elementor-background-video-hosted {
        height: 571px !important;
    }
}

/* ===============================
   CORRECCIÓN PARA DOBLE SCROLL EN MÓVILES
   Elemento: ad2693b
   =============================== */

/* Configuración correcta del overflow para evitar doble scroll */
html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
}

/* Eliminar la expansión problemática del video en móviles */
@media (max-width: 1024px) {
    .elementor-element-ad2693b .elementor-background-video-hosted {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Eliminar el pseudo-elemento en móviles que puede causar scroll extra */
@media (max-width: 1024px) {
    .elementor-element-ad2693b::after {
        display: none !important;
    }
}

/* Asegurar que el contenedor no cause overflow en móviles */
@media (max-width: 1024px) {
    .elementor-element-ad2693b {
        overflow: hidden !important;
        position: relative !important;
    }
}

/* Corrección específica para el contenido interno en móviles */
@media (max-width: 1024px) {
    .elementor-element-ad2693b > .elementor-container {
        overflow: hidden !important;
        max-height: 100svh !important;
    }
}/* End custom CSS */
/* Start custom CSS for global, class: .elementor-global-4164 *//* Importar fuentes premium - Preload para mejor rendimiento */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

  /* Variables CSS para consistencia y mantenibilidad */
  :root {
    --ok-primary-color: #FF6B00;
    --ok-secondary-color: #FF9500;
    --ok-primary-hover: #FF5500;
    --ok-secondary-hover: #FF7E00;
    --ok-accent-color: #65d0f1;
    --ok-accent-secondary: #65d0f1;
    --ok-dark-blue: #001a4d;
    --ok-blue-gradient-start: rgba(0, 60, 175, 0.95);
    --ok-blue-gradient-end: rgba(0, 28, 85, 0.98);
    --ok-border-radius: 10px;
    --ok-button-radius: 50px;
    --ok-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ok-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --ok-font-family: 'Poppins', sans-serif;
  }

  /* Contenedor principal */
  .ok-contacto-container-footer {
    font-family: var(--ok-font-family);
    position: relative;
  }

  /* Estilos para el botón de contacto */
  .ok-contacto-container-footer .btn-contact {
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, var(--ok-accent-color), var(--ok-accent-secondary));
  color: var(--ok-dark-blue);
  text-decoration: none;
  padding: 16px 40px;
  border-radius: var(--ok-button-radius);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: none !important;
 /* transition: var(--ok-transition);*/
  opacity: 1;
  transform: translateY(0);
  cursor: pointer !important;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  font-family: var(--ok-font-family);
  /* Agregar will-change para mejor performance */
  will-change: transform, box-shadow, background;
  }

  .ok-contacto-container-footer .btn-contact::before {
content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
  pointer-events: none; /* Evitar interferencias con el hover */
  }

  .ok-contacto-container-footer .btn-contact:hover {
background: #00A4E5; /* Mantener gradient coherente */
  box-shadow: 0 15px 30px rgba(0, 164, 229, 0.5); /* Color coherente con el fondo */
  transform: scale(1.02) ; /* Combinar transformaciones */ 
  
  }

  .ok-contacto-container-footer .btn-contact:hover::before {
    left: 100%;
  }

  .ok-contacto-container-footer .btn-contact:active {
  transform: scale(0.98) translateY(0);
  transition: all 0.1s ease;
  }
  /* FOCUS state para accesibilidad */
.ok-contacto-container-footer .btn-contact:focus {
  outline: 2px solid rgba(0, 164, 229, 0.5);
  outline-offset: 2px;
}

  /* FORMULARIO EMERGENTE - Asegurar que esté realmente oculto */
  #popup-formulario-footer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,10,40,0.8);
    display: none; /* Cambiado de flex a none para asegurar que esté oculto */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: var(--ok-transition);
    backdrop-filter: blur(10px);
     padding-top: 100px; 
  }

  #popup-formulario-footer.visible {
    display: flex; /* Mostrar con flex cuando esté visible */
    visibility: visible;
    opacity: 1;
  }

  .formulario-contenido-footer {
    position: relative;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    transform: scale(0.8) translateY(30px);
    transition: var(--ok-transition);
    border-radius: 16px;
    overflow: visible;
  }

  #popup-formulario-footer.visible .formulario-contenido-footer {
    transform: scale(1) translateY(0);
  }

  #cerrar-formulario-footer {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    z-index: 1001;
    transition: var(--ok-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  #cerrar-formulario-footer:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
  }

  #formulario-footer {
    background: linear-gradient(135deg, var(--ok-blue-gradient-start), var(--ok-blue-gradient-end));
    padding: 35px;
    border-radius: 16px;
    box-shadow: var(--ok-box-shadow);
    text-align: center;
    max-height: 75vh;
    overflow-y: auto;
    position: relative;
    font-family: var(--ok-font-family);
    color: #fff;
  }

  /* Decoración de fondo para el formulario */
  #formulario-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 255, 204, 0.1), transparent 50%),
                radial-gradient(circle at bottom left, rgba(0, 102, 255, 0.1), transparent 50%);
    z-index: -1;
    border-radius: 16px;
  }
  
  #formulario-footer p {
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    display: inline-block;
  }

  #formulario-footer p::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--ok-accent-color);
    border-radius: 3px;
  }

  #formulario-footer img {
    width: 90px;
    height: auto;
    margin-bottom: 20px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 5px 15px rgba(0,255,204,0.3));
  }

  #formulario-footer img:hover {
    transform: scale(1.1) rotate(5deg);
  }

  #formulario-footer .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
  }
  
  /* Estilizar scrollbar para mejor experiencia de usuario */
  #formulario-footer::-webkit-scrollbar {
    width: 8px;
  }
  
  #formulario-footer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  
  #formulario-footer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
  }
  
  #formulario-footer::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  #formulario-footer form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Estilizar campos de formulario */
  #formulario-footer input,
  #formulario-footer select,
  #formulario-footer textarea {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--ok-border-radius);
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.1);
    color: white;
    transition: var(--ok-transition);
    font-family: var(--ok-font-family);
  }

  #formulario-footer input::placeholder,
  #formulario-footer textarea::placeholder,
  #formulario-footer select {
    color: rgba(255,255,255,0.7);
  }

  #formulario-footer input:focus,
  #formulario-footer select:focus,
  #formulario-footer textarea:focus {
    outline: none;
    border-color: var(--ok-accent-color);
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 0 3px rgba(0, 255, 204, 0.3);
    transform: translateY(-2px);
  }

  /* Botón de envío */
  #formulario-footer button[type="submit"] {
    background: linear-gradient(45deg, var(--ok-accent-color), var(--ok-accent-secondary));
    color: var(--ok-dark-blue);
    border: none;
    padding: 16px;
    border-radius: var(--ok-border-radius);
    cursor: pointer;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--ok-transition);
    box-shadow: 0 10px 20px rgba(0, 255, 204, 0.3);
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    font-family: var(--ok-font-family);
  }

  #formulario-footer button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
  }

  #formulario-footer button[type="submit"]:hover {
    background: linear-gradient(45deg, #00ebbd, #00b8eb);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 255, 204, 0.4);
    letter-spacing: 2px;
  }

  #formulario-footer button[type="submit"]:hover::before {
    left: 100%;
  }

  #formulario-footer button[type="submit"]:active {
    transform: translateY(-1px);
  }

  /* Ventana de confirmación */
  #popup-imagen-footer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,10,40,0.8);
    display: none; /* Cambiado de flex a none para asegurar que esté oculto */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: var(--ok-transition);
    backdrop-filter: blur(10px);
  }

  #popup-imagen-footer.visible {
    display: flex; /* Mostrar con flex cuando está visible */
    visibility: visible;
    opacity: 1;
  }

  .popup-contenido-footer {
    background: linear-gradient(135deg, #ffffff, #f5f9ff);
    padding: 40px;
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    box-shadow: var(--ok-box-shadow);
    transform: scale(0.8) translateY(30px);
    transition: var(--ok-transition);
    position: relative;
    overflow: hidden;
    font-family: var(--ok-font-family);
  }

  /* Efecto gráfico para el popup de confirmación */
  .popup-contenido-footer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 204, 0.1), transparent 60%);
    z-index: 0;
  }

  #popup-imagen-footer.visible .popup-contenido-footer {
    transform: scale(1) translateY(0);
  }

  .popup-contenido-footer img {
    max-width: 120px;
    height: auto;
    margin-bottom: 25px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    animation: pulse-footer 2s infinite;
    position: relative;
    z-index: 1;
  }

  @keyframes pulse-footer {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  .popup-contenido-footer b {
    display: block;
    font-size: 22px;
    margin-bottom: 30px;
    color: #003399;
    position: relative;
    z-index: 1;
  }

  .popup-contenido-footer button {
    background: linear-gradient(45deg, #003399, #0052cc);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: var(--ok-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    transition: var(--ok-transition);
    box-shadow: 0 10px 20px rgba(0, 51, 153, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: var(--ok-font-family);
  }

  .popup-contenido-footer button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
  }

  .popup-contenido-footer button:hover {
    background: linear-gradient(45deg, #002e8a, #0048b8);
   
    box-shadow: 0 15px 30px rgba(0, 51, 153, 0.4);
  }

  .popup-contenido-footer button:hover::before {
    left: 100%;
  }

  .popup-overlay-footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Clase para animación de shake */
  .shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  }

  @keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
  }

  /* Responsive */
  @media (max-width: 576px) {
    .ok-contacto-container-footer .btn-contact {
      padding: 14px 30px;
      font-size: 0.9rem;
    }
    #formulario-footer .form-row {
      flex-direction: column;
    }
    #formulario-footer {
      padding: 25px;
    }
  }
  /* ========================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ======================================== */
   
   @media (min-width: 1920px){
       .btn-contact{
               /* Aumenta ligeramente el tamaño */

       }
   }

/* Tablets y pantallas medianas (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .formulario-contenido-footer {
    max-width: 450px;
    margin: 0 20px;
  }
  
  #formulario-footer {
    padding: 35px 25px 25px;
  }
  
  #formulario-titulo {
    font-size: 22px;
  }
}

/* Tablets pequeñas (576px - 768px) */
@media screen and (max-width: 768px) {
  .formulario-contenido-footer {
    max-width: 400px;
    margin: 0 15px;
  }
    
  #cerrar-formulario-footer {
    position: absolute !important;
    top: 85px !important;
    right: 15px !important;
    z-index: 10001 !important;
    /* Mantener el diseño actual */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
  }
  
  /* Asegurar que el formulario tenga posición relativa */
  #formulario-footer {
    position: fixed !important;
    top: 80px !important;
    position: relative !important; /* Para que el botón se posicione respecto al formulario */
    padding: 30px 20px 20px;
   
  }
  
  #formulario-titulo {
    font-size: 20px;
    margin-bottom: 25px;
  }
  
  #formulario-footer img {
    width: 80px;
    height: 80px;
  }
  
  .popup-contenido-footer {
    width: 350px;
    padding: 35px 25px;
  }
  
  .popup-contenido-footer img {
    width: 100px;
    height: 100px;
  }
}

/* Móviles grandes (480px - 576px) */
@media screen and (max-width: 576px) {
  #popup-formulario-footer {
    padding: 15px;
  }
  
  .formulario-contenido-footer {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 15px;
  }
  
  #formulario-footer {
    padding: 25px 15px 15px;
  }
  
  #formulario-titulo {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  #formulario-footer img {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
  }
  
  #contactForm-footer {
    gap: 15px;
  }
  
  /* Hacer que los inputs en fila se apilen en móviles */
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  #formulario-footer input,
  #formulario-footer select,
  #formulario-footer textarea {
    padding: 12px;
    font-size: 16px; /* Previene zoom en iOS */
  }
  
  #formulario-footer textarea {
    min-height: 80px;
  }
  
  #contactForm-footer button[type="submit"] {
    padding: 12px 25px;
    font-size: 15px;
  }
  
  /* Botón de cerrar más grande en móviles */
  #cerrar-formulario-footer {
    top: 10px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  
  /* Popup de confirmación responsivo */
  .popup-contenido-footer {
    width: calc(100% - 30px);
    max-width: 300px;
    padding: 30px 20px;
  }
  
  .popup-contenido-footer img {
    width: 80px;
    height: 80px;
  }
  
  .popup-contenido-footer b {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

/* Móviles muy pequeños (menos de 480px) */
@media screen and (max-width: 480px) {
  .btn-contact {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  #popup-formulario-footer {
    padding: 10px;
  }
  
  .formulario-contenido-footer {
    border-radius: 10px;
  }
  
  #formulario-footer {
    padding: 20px 12px 12px;
  }
  
  #formulario-titulo {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  #formulario-footer img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  
  #contactForm-footer {
    gap: 12px;
  }
  
  #formulario-footer input,
  #formulario-footer select,
  #formulario-footer textarea {
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .popup-contenido-footer {
    padding: 25px 15px;
  }
  
  .popup-contenido-footer img {
    width: 70px;
    height: 70px;
  }
  
  .popup-contenido-footer b {
    font-size: 15px;
  }
  
  .popup-contenido-footer button {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* Ajustes para pantallas muy altas en orientación vertical */
@media screen and (max-height: 600px) and (orientation: portrait) {
  .formulario-contenido-footer {
    max-height: 85vh;
  }
  
  #formulario-footer {
    padding: 20px 15px 15px;
  }
  
  #formulario-titulo {
    margin-bottom: 15px;
  }
  
  #contactForm-footer {
    gap: 12px;
  }
}

/* Ajustes para orientación horizontal en móviles */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #popup-formulario-footer {
    align-items: flex-start;
    padding-top: 20px;
  }
  
  .formulario-contenido-footer {
    max-height: 90vh;
    width: 100%;
    max-width: 600px;
  }
  
  #formulario-footer {
    padding: 15px;
  }
  
  #formulario-titulo {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  #formulario-footer img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  
  .form-row {
    flex-direction: row;
  }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-69bbb4d *//* Apunta directamente a tu contenedor personalizado */
.ok-contacto-container-footer {
  display: flex;
  justify-content: flex-start; /* Izquierda */
  align-items: flex-end;       /* Abajo */
  min-height: 200px;           /* Ajusta según necesidad */
  flex-wrap: wrap;   
  position: relative;
}

/* Botón en la esquina inferior izquierda */
.ok-contacto-container-footer #btn-contactanos-footer {
  position: absolute;
  bottom: 55%; /* distancia desde abajo */
  left: 70%;   /* distancia desde la izquierda */
  margin: 0;    /* quita márgenes que tenga Elementor o tu CSS global */
}
/* En pantallas menores a 768px, centrar el botón */
@media (max-width: 768px) {
  .ok-contacto-container-footer #btn-contactanos-footer {
    left: 50%;
    transform: translateX(-50%);
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-ff090ea */.centrarL {
     text-align: center!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fc72688 */.centrarL {
     text-align: center!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-6239534 */.elementor-4767 .elementor-element.elementor-element-6239534 p {
    margin-bottom: 0px ;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-bfe6be4 */.centrarL {
     text-align: center!important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fca19ef *//*
 * Archivo: style.css (o el nombre de tu archivo CSS)
 * Descripción: Estilos para el diseño de tarjetas de servicios responsivas.
 * Autor: openkenen
 * Fecha: [Fecha Actual, por ejemplo, 17 de junio de 2025]
 * Versión: 1.0
 */

/* === Variables CSS (Opcional pero recomendado para colores y espaciados) === */
/* Estas variables facilitan la gestión de colores y tamaños en todo el CSS. */
:root {
    --primary-color: #01153D; /* Azul oscuro para títulos */
    --secondary-color: #16B877; /* Verde para CTA */
    --text-color-light: #555; /* Gris para descripciones */
    --card-bg: #f8f9fa; /*anteior: f8f9fa Fondo de las tarjetas */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --border-light: rgba(255, 255, 255, 0.2);
    --gap-desktop: 30px;
    --gap-mobile: 20px;
    --padding-card-desktop: 30px;
    --padding-card-mobile: 25px;
}


/* === Estilos Base y Reset (Ajusta según las necesidades de tu proyecto o framework) === */
/* Aquí se pueden incluir resets básicos o estilos globales del body. */


*, *::before, *::after {
    box-sizing: inherit; /* Hereda box-sizing para todos los elementos 
}

/* === Contenedor Principal === */
/* Limita el ancho máximo del contenido y lo centra en la página. */
.container {
    max-width: 1200px; /* Ancho máximo en pantallas grandes */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    padding: 0 15px; /* Pequeño padding lateral para evitar que el contenido pegue en los bordes */
}

/* === Títulos de Página === */
/* Estilos para el título y subtítulo principales de la sección. */
.page-title {
    text-align: center;
    color: var(--primary-color); /* Color principal para el título */
    font-size: 2.8rem; /* Tamaño de fuente responsivo para el título */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px var(--shadow-light);
    font-weight: 700; /* Asegura que el título sea negrita */
}

.page-subtitle {
    text-align: center;
    color: rgba(var(--primary-color), 0.9); /* Subtítulo ligeramente más transparente */
    font-size: 1.3rem; /* Tamaño de fuente responsivo para el subtítulo */
    margin-bottom: 40px;
}

/* === Grilla de Servicios (Contenedor de las tarjetas) === */
/* Utiliza CSS Grid para crear un diseño flexible de columnas. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual ancho por defecto (desktop) */
    gap: var(--gap-desktop); /* Espacio entre las tarjetas */
    margin-top: 20px;
}

/* === Tarjeta de Servicio Individual === */
/* Define el estilo y el layout interno de cada tarjeta. */
.service-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: var(--padding-card-desktop);
    text-align: center;
    box-shadow: 0 5px 5px var(--shadow-light);
    transition: all 0.3s ease; /* Transición suave para efectos de hover */
    backdrop-filter: blur(10px); /* Efecto de desenfoque de fondo */
    border: 1px solid var(--border-light);
    position: relative; /* Necesario para posicionar el pseudo-elemento ::before */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */

    /* PROPIEDADES FLEXBOX PARA ALINEACIÓN INTERNA (CRUCIAL PARA LA MISMA ALTURA) */
    display: flex; /* Convierte la tarjeta en un contenedor flex */
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    /* Esto empuja el 'card-cta' al final de la tarjeta, manteniendo la alineación */
   
    
}

/* Efecto al pasar el ratón sobre la tarjeta 
.service-card:hover {
    transform: translateY(-10px); /* Ligeramente hacia arriba 
    box-shadow: 0 25px 50px var(--shadow-medium);  Sombra más pronunciada 
}*/

/* Pseudo-elemento para un efecto de brillo o gradiente sutil al pasar el ratón */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Asegura que no interfiera con clics */
}

.service-card:hover::before {
    opacity: 1; /* Hace visible el pseudo-elemento al hover */
}

/* === Imagen de la Tarjeta === */
.card-image {
    width: 100%;
    height: 200px!important; /* Altura fija para las imágenes */
    border-radius: 85px; /* Bordes muy redondeados */
    object-fit: cover!important; /* Asegura que la imagen cubra el área sin distorsionarse */
    margin-bottom: 20px;
    transition: transform 0.3s ease; /* Transición suave para el efecto de zoom */
}

/* Efecto de zoom en la imagen al pasar el ratón sobre la tarjeta */
.service-card:hover .card-image {
    transform: scale(1.05);
}

/* === Título de la Tarjeta === */
.card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === Descripción de la Tarjeta === */
.card-description {
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1rem;
    flex-grow: 1; /* Permite que la descripción ocupe el espacio vertical restante */
    /* Esto es crucial para empujar el CTA al fondo y alinear las tarjetas */
}

/* === Llamada a la Acción (CTA) de la Tarjeta === */
.card-cta {
    display: inline-block; /* Para aplicar padding y margenes como un bloque pero dentro del flujo */
    color: var(--secondary-color);
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto; /* Empuja el CTA al final del contenedor flex */
    /* margin-top: 10px; también funciona si no quieres que el CTA se 'pegue' tanto al final */
    padding: 10px 15px; /* Añade un poco de padding para que sea clicable */
    text-decoration: none; /* Quita el subrayado si es un enlace */
    border-radius: 5px; /* Bordes ligeramente redondeados */
     margin-bottom: -0px; /*reduce el tamaño de abajo para que se vea con menos espacio desperdiciado*/
    
}




/* === MEDIA QUERIES (PARA RESPONSIVIDAD) === */

/* Para pantallas de tabletas y laptops pequeñas (máximo 992px de ancho) */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Cambia a 2 columnas */
        gap: var(--gap-mobile); /* Usa un gap más pequeño */
    }

    .card-image {
        height: 180px; /* Ajusta la altura de la imagen */
    }

    .card-title {
        font-size: 1.4rem; /* Ajusta el tamaño del título */
    }

    .card-description {
        font-size: 0.95rem; /* Ajusta el tamaño de la descripción */
    }

    .card-cta {
        font-size: 0.9rem; /* Ajusta el tamaño del CTA */
    }
}

/* Para pantallas de móviles grandes y tabletas en orientación vertical (máximo 768px de ancho) */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Una sola columna para móviles */
        gap: var(--gap-mobile);
    }

    .service-card {
        padding: var(--padding-card-mobile); /* Padding más pequeño en móviles */
    }
    
    .page-title {
        font-size: 2.2rem; /* Ajusta el tamaño del título de página */
    }

    .page-subtitle {
        font-size: 1.1rem; /* Ajusta el tamaño del subtítulo de página */
        margin-bottom: 30px;
    }
}

/* Para pantallas de móviles pequeños (máximo 480px de ancho) */
@media (max-width: 480px) {
    body {
        padding: 10px; /* Reduce el padding global del body */
    }
    .container {
        padding: 0 10px; /* Reduce el padding lateral del contenedor */
    }
    .page-title {
        font-size: 1.8rem;
    }
    .page-subtitle {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    .card-image {
        height: 160px; /* Altura más pequeña para imágenes en móviles pequeños */
        border-radius: 60px; /* Redondeado más acorde */
    }
    .card-title {
        font-size: 1.2rem;
    }
    .card-description {
        font-size: 0.9rem;
    }
    .card-cta {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0e477c9 */.Txtinterlineado{
    line-height: 1.3!important;
}/* End custom CSS */