.elementor-kit-601{--e-global-color-primary:#FF0000;--e-global-color-secondary:#101010;--e-global-color-text:#151515;--e-global-color-accent:#209E2E;--e-global-color-fed1e35:#EAF0DA;--e-global-color-a219aa4:#97B545;--e-global-color-f45b7f8:#FFFFFF;--e-global-color-88e2e72:#000000;--e-global-color-d61c747:#BDD7C0;--e-global-color-dd6be87:#209E2E30;--e-global-color-73f6f6c:#00000000;--e-global-color-efda431:#024DB8;--e-global-color-4df03d2:#06004D;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.5em;--e-global-typography-1c93028-font-family:"Poppins";--e-global-typography-1c93028-font-size:72px;--e-global-typography-1c93028-font-weight:700;--e-global-typography-1c93028-line-height:1.1em;--e-global-typography-5cdd9b2-font-family:"Poppins";--e-global-typography-5cdd9b2-font-size:60px;--e-global-typography-5cdd9b2-font-weight:600;--e-global-typography-5cdd9b2-line-height:1.2em;--e-global-typography-b5291ce-font-family:"Poppins";--e-global-typography-b5291ce-font-size:46px;--e-global-typography-b5291ce-font-weight:600;--e-global-typography-b5291ce-line-height:1.2em;--e-global-typography-efede2a-font-family:"Poppins";--e-global-typography-efede2a-font-size:36px;--e-global-typography-efede2a-font-weight:600;--e-global-typography-efede2a-line-height:1.2em;--e-global-typography-a8082ae-font-family:"Poppins";--e-global-typography-a8082ae-font-size:24px;--e-global-typography-a8082ae-font-weight:600;--e-global-typography-a8082ae-line-height:1.3em;--e-global-typography-051bedc-font-family:"Poppins";--e-global-typography-051bedc-font-size:18px;--e-global-typography-051bedc-font-weight:600;--e-global-typography-051bedc-line-height:1.4em;--e-global-typography-10ec539-font-family:"Poppins";--e-global-typography-10ec539-font-size:14px;--e-global-typography-10ec539-font-weight:600;--e-global-typography-10ec539-line-height:1.5em;--e-global-typography-2cf8f12-font-family:"Roboto";--e-global-typography-2cf8f12-font-size:14px;--e-global-typography-2cf8f12-font-weight:400;--e-global-typography-2cf8f12-line-height:1.5em;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-601 button,.elementor-kit-601 input[type="button"],.elementor-kit-601 input[type="submit"],.elementor-kit-601 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );color:var( --e-global-color-f45b7f8 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:50px 50px 50px 50px;padding:13px 26px 13px 26px;}.elementor-kit-601 button:hover,.elementor-kit-601 button:focus,.elementor-kit-601 input[type="button"]:hover,.elementor-kit-601 input[type="button"]:focus,.elementor-kit-601 input[type="submit"]:hover,.elementor-kit-601 input[type="submit"]:focus,.elementor-kit-601 .elementor-button:hover,.elementor-kit-601 .elementor-button:focus{background-color:var( --e-global-color-73f6f6c );color:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:50px 50px 50px 50px;}.elementor-kit-601 e-page-transition{background-color:#FFBC7D;}.elementor-kit-601 a{color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-601 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-5cdd9b2-font-family ), Sans-serif;font-size:var( --e-global-typography-5cdd9b2-font-size );font-weight:var( --e-global-typography-5cdd9b2-font-weight );line-height:var( --e-global-typography-5cdd9b2-line-height );}.elementor-kit-601 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-b5291ce-font-family ), Sans-serif;font-size:var( --e-global-typography-b5291ce-font-size );font-weight:var( --e-global-typography-b5291ce-font-weight );line-height:var( --e-global-typography-b5291ce-line-height );}.elementor-kit-601 h3{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-efede2a-font-family ), Sans-serif;font-size:var( --e-global-typography-efede2a-font-size );font-weight:var( --e-global-typography-efede2a-font-weight );line-height:var( --e-global-typography-efede2a-line-height );}.elementor-kit-601 h4{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-a8082ae-font-family ), Sans-serif;font-size:var( --e-global-typography-a8082ae-font-size );font-weight:var( --e-global-typography-a8082ae-font-weight );line-height:var( --e-global-typography-a8082ae-line-height );}.elementor-kit-601 h5{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-051bedc-font-family ), Sans-serif;font-size:var( --e-global-typography-051bedc-font-size );font-weight:var( --e-global-typography-051bedc-font-weight );line-height:var( --e-global-typography-051bedc-line-height );}.elementor-kit-601 h6{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-10ec539-font-family ), Sans-serif;font-size:var( --e-global-typography-10ec539-font-size );font-weight:var( --e-global-typography-10ec539-font-weight );line-height:var( --e-global-typography-10ec539-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-601{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-601 a{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-601 h1{font-size:var( --e-global-typography-5cdd9b2-font-size );line-height:var( --e-global-typography-5cdd9b2-line-height );}.elementor-kit-601 h2{font-size:var( --e-global-typography-b5291ce-font-size );line-height:var( --e-global-typography-b5291ce-line-height );}.elementor-kit-601 h3{font-size:var( --e-global-typography-efede2a-font-size );line-height:var( --e-global-typography-efede2a-line-height );}.elementor-kit-601 h4{font-size:var( --e-global-typography-a8082ae-font-size );line-height:var( --e-global-typography-a8082ae-line-height );}.elementor-kit-601 h5{font-size:var( --e-global-typography-051bedc-font-size );line-height:var( --e-global-typography-051bedc-line-height );}.elementor-kit-601 h6{font-size:var( --e-global-typography-10ec539-font-size );line-height:var( --e-global-typography-10ec539-line-height );}.elementor-kit-601 button,.elementor-kit-601 input[type="button"],.elementor-kit-601 input[type="submit"],.elementor-kit-601 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-601{--e-global-typography-5cdd9b2-font-size:41px;--e-global-typography-b5291ce-font-size:30px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-601 a{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-601 h1{font-size:var( --e-global-typography-5cdd9b2-font-size );line-height:var( --e-global-typography-5cdd9b2-line-height );}.elementor-kit-601 h2{font-size:var( --e-global-typography-b5291ce-font-size );line-height:var( --e-global-typography-b5291ce-line-height );}.elementor-kit-601 h3{font-size:var( --e-global-typography-efede2a-font-size );line-height:var( --e-global-typography-efede2a-line-height );}.elementor-kit-601 h4{font-size:var( --e-global-typography-a8082ae-font-size );line-height:var( --e-global-typography-a8082ae-line-height );}.elementor-kit-601 h5{font-size:var( --e-global-typography-051bedc-font-size );line-height:var( --e-global-typography-051bedc-line-height );}.elementor-kit-601 h6{font-size:var( --e-global-typography-10ec539-font-size );line-height:var( --e-global-typography-10ec539-line-height );}.elementor-kit-601 button,.elementor-kit-601 input[type="button"],.elementor-kit-601 input[type="submit"],.elementor-kit-601 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
   METALLIC DARK BLUE UI
   Custom Global CSS for Elementor
========================================================== */

:root {
    --metal-blue-1: #102A43;
    --metal-blue-2: #1E4E79;
    --metal-blue-3: #2F6FA3;
    --metal-blue-4: #4B91C7;

    --metal-black: #071018;
    --metal-white: #ffffff;
    --metal-light: #e6f3ff;

    --metal-shadow: rgba(0, 0, 0, 0.45);
    --metal-blue-glow: rgba(75, 145, 199, 0.50);

    --metal-radius: 16px;
    --metal-transition: 0.35s ease;
}


/* ==========================================================
   1. TEXTO METÁLICO BLANCO + AZUL
   Clase Elementor:
   metallic-text
========================================================== */

.metallic-text {
    display: inline-block;

    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8f5ff 18%,
        #9fc9e8 35%,
        #4B91C7 52%,
        #2F6FA3 65%,
        #d9efff 82%,
        #ffffff 100%
    );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.15),
        0 2px 0 rgba(23,73,110,0.40),
        0 4px 3px rgba(0,0,0,0.25),
        0 8px 16px rgba(0,0,0,0.25);

    transition: all 0.35s ease;
}


/* Efecto al pasar el cursor */

.metallic-text:hover {
    background-position: 100% center;

    transform: translateY(-2px);

    text-shadow:
        0 1px 0 rgba(255,255,255,0.18),
        0 2px 0 #0b2545,
        0 3px 0 #07111f,
        0 5px 8px rgba(0,0,0,0.5),
        0 0 18px rgba(77, 151, 221, 0.35);
}


/* ==========================================================
   2. TEXTO METÁLICO MÁS MARCADO / PREMIUM
   Clase Elementor:
   metallic-text-premium
========================================================== */

.metallic-text-premium {
    display: inline-block;

    background: linear-gradient(
        120deg,
        #ffffff 0%,
        #8cb5da 18%,
        #ffffff 34%,
        #163d66 52%,
        #4f82b2 68%,
        #ffffff 84%,
        #a4ceef 100%
    );

    background-size: 250% 250%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        1px 1px 0 rgba(255,255,255,0.08),
        2px 2px 0 rgba(8,27,48,0.8),
        3px 3px 0 rgba(4,15,28,0.65),
        6px 8px 15px rgba(0,0,0,0.4);

    transition: 0.4s ease;
}

.metallic-text-premium:hover {
    transform: translateY(-3px) scale(1.015);
    background-position: 100% 50%;
}


/* ==========================================================
   3. CONTENEDOR AZUL METÁLICO + NEGRO
   Clase Elementor:
   metallic-container
========================================================== */

.metallic-container {
    position: relative;
    overflow: hidden;

    border-radius: var(--metal-radius);

    background:
        linear-gradient(
            145deg,
            #081722 0%,
            #153A5B 28%,
            #2B6695 55%,
            #0C1D2B 100%
        );

    border: 1px solid rgba(122, 190, 240, 0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 8px 18px rgba(0,0,0,0.30);

    transition:
        transform var(--metal-transition),
        box-shadow var(--metal-transition),
        border-color var(--metal-transition);
}


/* Luz metálica */

.metallic-container::before {
    content: "";
    position: absolute;

    width: 170%;
    height: 80%;

    top: -60%;
    left: -40%;

    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(255,255,255,0.08) 45%,
        rgba(70,147,216,0.12) 50%,
        transparent 70%
    );

    transform: rotate(-10deg);

    transition: 0.6s ease;

    pointer-events: none;
}


/* Hover */

.metallic-container:hover {
    transform: translateY(-5px) scale(1.025);

    border-color: rgba(91, 161, 225, 0.35);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -2px 0 rgba(0,0,0,0.8),
        0 5px 0 #02070d,
        0 10px 0 #010306,
        0 18px 30px rgba(0,0,0,0.5),
        0 0 25px var(--metal-blue-glow);
}

.metallic-container:hover::before {
    top: 20%;
    left: 20%;
}


/* ==========================================================
   4. CONTENEDOR MÁS OSCURO
   Clase Elementor:
   metallic-container-dark
========================================================== */

.metallic-container-dark {
    position: relative;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(28, 93, 153, 0.20),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #06101c 0%,
            #020407 55%,
            #0b1d32 100%
        );

    border: 1px solid rgba(120, 180, 230, 0.12);

    border-radius: 18px;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.07),
        0 12px 25px rgba(0,0,0,0.38);

    transition: 0.35s ease;
}

.metallic-container-dark:hover {
    transform: scale(1.025) translateY(-4px);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.1),
        0 4px 0 #081725,
        0 9px 0 #020609,
        0 18px 30px rgba(0,0,0,0.5),
        0 0 25px rgba(26, 99, 163, 0.3);
}


/* ==========================================================
   5. BOTÓN METÁLICO 3D
   Coloca la clase en el widget Button:
   metallic-button
========================================================== */

.metallic-button .elementor-button {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #4B91C7 0%,
            #2F6FA3 30%,
            #1E4E79 65%,
            #163B5D 100%
        );

    color: #ffffff;

    border: 1px solid rgba(170, 220, 255, 0.35);

    border-radius: 10px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -2px 0 rgba(0,0,0,0.30),
        0 4px 0 #0A2234,
        0 8px 14px rgba(0,0,0,0.25);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}


/* Brillo botón */

.metallic-button .elementor-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        110deg,
        transparent 10%,
        rgba(255,255,255,0.08) 35%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.08) 65%,
        transparent 90%
    );

    transform: skewX(-20deg);

    transition: 0.6s ease;
}


/* Hover botón */

.metallic-button .elementor-button:hover {
    transform: translateY(-4px) scale(1.04);

    filter: brightness(1.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.45),
        0 6px 0 #02070c,
        0 10px 0 #010305,
        0 16px 25px rgba(0,0,0,0.4),
        0 0 20px rgba(37, 116, 185, 0.45);
}

.metallic-button .elementor-button:hover::before {
    left: 150%;
}


/* Al hacer click */

.metallic-button .elementor-button:active {
    transform: translateY(1px) scale(1.01);

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.35),
        0 2px 0 #02070c,
        0 5px 10px rgba(0,0,0,0.3);
}


/* ==========================================================
   6. BOTÓN METÁLICO CON BORDE AZUL
   Clase:
   metallic-button-outline
========================================================== */

.metallic-button-outline .elementor-button {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(4,14,25,0.95),
            rgba(8,31,55,0.95)
        );

    border: 1px solid #27669d;

    border-radius: 10px;

    box-shadow:
        inset 0 0 12px rgba(43, 118, 184, 0.12),
        0 4px 0 #03101b,
        0 8px 14px rgba(0,0,0,0.3);

    transition: 0.3s ease;
}

.metallic-button-outline .elementor-button:hover {
    transform: translateY(-4px) scale(1.04);

    background:
        linear-gradient(
            145deg,
            #16466f,
            #061522
        );

    border-color: #72b9f3;

    box-shadow:
        inset 0 0 16px rgba(78, 161, 230, 0.18),
        0 6px 0 #03101b,
        0 12px 20px rgba(0,0,0,0.4),
        0 0 18px rgba(42, 124, 194, 0.4);
}


/* ==========================================================
   7. TARJETA / CARD PREMIUM
   Clase:
   metallic-card
========================================================== */

.metallic-card {
    position: relative;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(58, 132, 195, 0.18),
            transparent 28%
        ),
        linear-gradient(
            150deg,
            #0a2037 0%,
            #04090f 50%,
            #071829 100%
        );

    border: 1px solid rgba(113, 176, 228, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.4);

    transition: 0.35s cubic-bezier(.2,.7,.2,1);
}

.metallic-card:hover {
    transform:
        perspective(800px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(-6px)
        scale(1.025);

    border-color: rgba(95, 169, 230, 0.38);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 5px 0 #05101a,
        0 10px 0 #02060a,
        0 20px 35px rgba(0,0,0,0.48),
        0 0 25px rgba(33, 111, 177, 0.30);
}


/* ==========================================================
   8. EFECTO GLOW AZUL
   Puedes combinar esta clase con otra.
   Ejemplo:
   metallic-container metallic-glow
========================================================== */

.metallic-glow {
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4),
        0 0 18px rgba(35, 111, 178, 0.18);
}

.metallic-glow:hover {
    box-shadow:
        0 15px 35px rgba(0,0,0,0.48),
        0 0 30px rgba(48, 137, 214, 0.38);
}


/* ==========================================================
   9. EFECTO 3D GENÉRICO
   Combinar con contenedores, imágenes, iconos, etc.
   Clase:
   effect-3d
========================================================== */

.effect-3d {
    transition: 0.35s cubic-bezier(.2,.7,.2,1);
}

.effect-3d:hover {
    transform: translateY(-5px) scale(1.025);

    filter:
        drop-shadow(0 6px 0 rgba(2,10,18,0.8))
        drop-shadow(0 12px 12px rgba(0,0,0,0.35));
}


/* ==========================================================
   10. MOVIMIENTO SUAVE DEL BRILLO DEL TEXTO
========================================================== */

@keyframes metallicShine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.metallic-text-animated {
    display: inline-block;

    background: linear-gradient(
        110deg,
        #ffffff 10%,
        #81afd5 30%,
        #173f65 45%,
        #ffffff 55%,
        #315f88 70%,
        #ffffff 90%
    );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: metallicShine 5s linear infinite;

    text-shadow:
        0 2px 2px rgba(0,0,0,0.3),
        0 5px 9px rgba(0,0,0,0.35);
}


/* ==========================================================
   11. MOBILE
========================================================== */

@media (max-width: 767px) {

    .metallic-container:hover,
    .metallic-container-dark:hover,
    .metallic-card:hover,
    .effect-3d:hover {
        transform: translateY(-3px) scale(1.01);
    }

    .metallic-button .elementor-button:hover,
    .metallic-button-outline .elementor-button:hover {
        transform: translateY(-2px) scale(1.02);
    }
}


/* ==========================================================
   12. ACCESIBILIDAD - REDUCIR MOVIMIENTOS
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .metallic-text,
    .metallic-text-premium,
    .metallic-container,
    .metallic-container-dark,
    .metallic-card,
    .effect-3d,
    .metallic-button .elementor-button,
    .metallic-button-outline .elementor-button {
        transition: none;
    }

    .metallic-text-animated {
        animation: none;
    }
}

/* =========================================
   TEXTO METÁLICO AZUL ANIMADO
   Clase: .blue-metal-text
   ========================================= */

.blue-metal-text {
    background: linear-gradient(
        110deg,
        #061a35 0%,
        #0b3d73 15%,
        #1f75c5 30%,
        #8fd3ff 42%,
        #ffffff 50%,
        #69b9ef 58%,
        #155a9e 72%,
        #06264a 88%,
        #1c6db5 100%
    );

    background-size: 300% 100%;
    background-position: 0% 50%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    color: transparent;

    display: inline-block;

    animation: blueMetalShine 5s ease-in-out infinite;

    /* Realce metálico */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

/* Animación del brillo */
@keyframes blueMetalShine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Brillo más intenso al pasar el mouse */
.blue-metal-text:hover {
    animation-duration: 2s;
}/* End custom CSS */