.elementor-2164 .elementor-element.elementor-element-6e41681{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:180px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-2164 .elementor-element.elementor-element-6e41681:not(.elementor-motion-effects-element-type-background), .elementor-2164 .elementor-element.elementor-element-6e41681 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background-image:url("https://green-dog-204455.hostingersite.com/wp-content/uploads/2026/08/IMG_2709-scaled.jpg");}.elementor-2164 .elementor-element.elementor-element-ae882f8{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#FFFFFF70;--border-color:#FFFFFF70;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-2164 .elementor-element.elementor-element-8fb84c4{text-align:center;}.elementor-2164 .elementor-element.elementor-element-8fb84c4 .elementor-heading-title{font-family:"RR Beaver Font", Sans-serif;font-size:24px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:58px;letter-spacing:0.3px;color:var( --e-global-color-9c6a161 );}.elementor-2164 .elementor-element.elementor-element-18c0366{text-align:center;}.elementor-2164 .elementor-element.elementor-element-18c0366 .elementor-heading-title{font-family:var( --e-global-typography-41784d2-font-family ), Sans-serif;font-size:var( --e-global-typography-41784d2-font-size );font-weight:var( --e-global-typography-41784d2-font-weight );text-transform:var( --e-global-typography-41784d2-text-transform );font-style:var( --e-global-typography-41784d2-font-style );text-decoration:var( --e-global-typography-41784d2-text-decoration );line-height:var( --e-global-typography-41784d2-line-height );letter-spacing:var( --e-global-typography-41784d2-letter-spacing );color:var( --e-global-color-9c6a161 );}.elementor-2164 .elementor-element.elementor-element-b2048a1{margin:27px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-2164 .elementor-element.elementor-element-b2048a1 .elementor-heading-title{font-size:22px;}.elementor-2164 .elementor-element.elementor-element-c946619{--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:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2164 .elementor-element.elementor-element-c946619:not(.elementor-motion-effects-element-type-background), .elementor-2164 .elementor-element.elementor-element-c946619 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-2164 .elementor-element.elementor-element-6fb1bdd{margin:-200px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2164 .elementor-element.elementor-element-489cb56{--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:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2164 .elementor-element.elementor-element-489cb56:not(.elementor-motion-effects-element-type-background), .elementor-2164 .elementor-element.elementor-element-489cb56 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-2164 .elementor-element.elementor-element-7c35527{margin:-200px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}@media(min-width:768px){.elementor-2164 .elementor-element.elementor-element-ae882f8{--width:100%;}}@media(max-width:1024px){.elementor-2164 .elementor-element.elementor-element-6e41681{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-2164 .elementor-element.elementor-element-ae882f8{--padding-top:0px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-2164 .elementor-element.elementor-element-8fb84c4 .elementor-heading-title{font-size:38px;line-height:44px;}.elementor-2164 .elementor-element.elementor-element-18c0366 .elementor-heading-title{font-size:var( --e-global-typography-41784d2-font-size );line-height:var( --e-global-typography-41784d2-line-height );letter-spacing:var( --e-global-typography-41784d2-letter-spacing );}}@media(max-width:767px){.elementor-2164 .elementor-element.elementor-element-6e41681{--margin-top:-140px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-2164 .elementor-element.elementor-element-ae882f8{--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2164 .elementor-element.elementor-element-8fb84c4 .elementor-heading-title{font-size:28px;line-height:34px;}.elementor-2164 .elementor-element.elementor-element-18c0366 .elementor-heading-title{font-size:var( --e-global-typography-41784d2-font-size );line-height:var( --e-global-typography-41784d2-line-height );letter-spacing:var( --e-global-typography-41784d2-letter-spacing );}.elementor-2164 .elementor-element.elementor-element-c946619{--margin-top:1px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2164 .elementor-element.elementor-element-489cb56{--margin-top:1px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for container, class: .elementor-element-6e41681 *//* ============================================================
   BLOQUE: BANNER "ABOUT" ESTILO CYBER
   CAMBIOS APLICADOS:
   1) Colores actualizados a los de marca — antes usaba cian
      (#00FFFF/#00AAFF), morado (#8000FF) y magenta (#FF00FF) de
      plantilla. Ahora: Blue #0080FF · Sky Green #00CC66 · Purple #800080.
   2) Se agregó el estilo ".about-tag" para la etiqueta "ABOUT PALEROO"
      que pide el PDF (agrégala como widget de texto en Elementor,
      arriba del título, y ponle esta clase en Advanced > CSS Classes).
   CAMBIAR LA IMAGEN DE FONDO: se cambia desde Elementor, no aquí.
   ============================================================ */

.BannerAbout{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;
    background-size:cover !important;
    background-position:center center !important;
    animation: bgDriftAbout 7s ease-in-out infinite alternate;
}

/* =============================================
   OSCURECIDO SOBRE LA IMAGEN DE FONDO (sin cambios)
   ============================================= */

.BannerAbout::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,10,25,.72) 40%,
            rgba(0,0,0,.65) 100%
        );
    z-index:1;
}

/* =============================================
   LÍNEAS DE ENERGÍA ANIMADAS
   COLOR ACTUALIZADO: cian -> Blue de marca, morado -> Purple de marca
   ============================================= */

.BannerAbout::after{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        repeating-linear-gradient(
            115deg,
            transparent 0px,
            transparent 70px,
            rgba(0,128,255,.14) 74px,
            transparent 78px,
            transparent 130px,
            rgba(128,0,128,.14) 134px,
            transparent 138px
        );
    filter:blur(10px);
    opacity:.9;
    animation: energyMove 2.5s linear infinite;
    z-index:2;
}

.BannerAbout .e-con-inner{
    position:relative;
    z-index:5;
}

/* =============================================
   NUEVO: ETIQUETA "ABOUT PALEROO"
   Agrega un widget de texto en Elementor arriba del título, con el
   texto "ABOUT PALEROO", y ponle la clase CSS "about-tag" (en el
   panel Advanced > CSS Classes del widget) para que tome este estilo.
   ============================================= */

.about-tag{
    display:inline-block;
    color:#0080FF;
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:16px;
    position:relative;
    z-index:5;
    animation: fadeUpAbout 1s ease both;
}

/* =============================================
   TÍTULO (H1 / H2)
   ============================================= */

.BannerAbout h1,
.BannerAbout h2{
    position:relative;
    text-shadow: 0 10px 35px rgba(0,0,0,.45);
    animation: titleRevealAbout .9s cubic-bezier(.2,.8,.2,1);
}

/* Línea de color debajo del título.
   COLOR ACTUALIZADO: degradado de 4 colores de plantilla (cian/azul/
   morado/magenta) -> degradado de 3 colores de marca */
.BannerAbout h1::after,
.BannerAbout h2::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-24px;
    transform:translateX(-50%);
    width:220px;
    height:5px;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #0080FF,
            #00CC66,
            #800080
        );
    box-shadow:
        0 0 15px rgba(0,128,255,.55),
        0 0 35px rgba(0,204,102,.40),
        0 0 55px rgba(128,0,128,.35);
}

/* =============================================
   PÁRRAFO
   ============================================= */

.BannerAbout p{
    color: rgba(255,255,255,.86);
    animation: fadeUpAbout 1.3s ease both;
}

/* =============================================
   BOTÓN (usa el botón nativo de Elementor)
   COLOR ACTUALIZADO: cian -> Blue de marca, morado -> Purple de marca
   ============================================= */

.BannerAbout .elementor-button{
    border: 1px solid rgba(0,128,255,.4);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 25px rgba(0,128,255,.14);
    transition: all .3s ease;
}

.BannerAbout .elementor-button:hover{
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 0 25px rgba(0,128,255,.35),
        0 0 50px rgba(128,0,128,.28);
}

/* =============================================
   ANIMACIONES (sin cambios)
   ============================================= */

@keyframes energyMove{
    0%{ transform: translateX(-120px) translateY(0); }
    100%{ transform: translateX(120px) translateY(-80px); }
}

@keyframes titleRevealAbout{
    0%{
        opacity:0;
        transform: translateY(60px);
        filter:blur(12px);
    }
    100%{
        opacity:1;
        transform: translateY(0);
        filter:blur(0);
    }
}

@keyframes fadeUpAbout{
    0%{
        opacity:0;
        transform: translateY(24px);
    }
    100%{
        opacity:1;
        transform: translateY(0);
    }
}

@keyframes bgDriftAbout{
    0%{
        background-position: center center;
        transform: scale(1) rotate(0deg);
    }
    25%{
        background-position: 48% 52%;
        transform: scale(1.04) rotate(.4deg);
    }
    50%{
        background-position: 52% 48%;
        transform: scale(1.07) rotate(-.4deg);
    }
    75%{
        background-position: 49% 51%;
        transform: scale(1.03) rotate(.3deg);
    }
    100%{
        background-position: center top;
        transform: scale(1.08) rotate(0deg);
    }
}/* End custom CSS */