.elementor-143 .elementor-element.elementor-element-f18ee29{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:-61px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-143 .elementor-element.elementor-element-6555ce5{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-143 .elementor-element.elementor-element-d937ed3{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-143 .elementor-element.elementor-element-a95320a{padding:0px 0px 0px 0px;}.elementor-143 .elementor-element.elementor-element-db33135{margin:-34px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-143 .elementor-element.elementor-element-c1f10b9{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:-62px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-143 .elementor-element.elementor-element-f18ee29{--grid-auto-flow:row;}.elementor-143 .elementor-element.elementor-element-d937ed3{--grid-auto-flow:row;}.elementor-143 .elementor-element.elementor-element-c1f10b9{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-143 .elementor-element.elementor-element-f18ee29{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-143 .elementor-element.elementor-element-d937ed3{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-143 .elementor-element.elementor-element-c1f10b9{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-4bebb85 *//*==========================================================
JOJOSARI HERO
==========================================================*/

.jojo-hero{

    position:relative;
    width:100%;
    min-height:100vh;
    background:#090909;
    overflow:hidden;

}

/*==========================
FONDO
==========================*/

.jojo-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 70% 35%,rgba(255,0,0,.18),transparent 35%),
    radial-gradient(circle at 75% 80%,rgba(255,0,0,.10),transparent 45%),
    linear-gradient(90deg,#090909 0%,#111 40%,#220707 100%);

    z-index:1;

}

.jojo-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(255,0,0,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,0,0,.03) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.35;

    z-index:2;

}

.jojo-glow{

    position:absolute;

    width:900px;
    height:900px;

    right:-180px;
    top:-80px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,0,0,.35),
    rgba(120,0,0,.15),
    transparent 70%);

    filter:blur(60px);

    z-index:2;

}

/*==========================
CONTENEDOR
==========================*/

.jojo-container{

    width:90%;
    max-width:1650px;

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:46% 54%;

    align-items:center;

    position:relative;

    z-index:10;

}

/*==========================
IZQUIERDA
==========================*/

.jojo-left{

    color:#fff;

}

.jojo-topline{

    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:35px;

}

.line{

    width:70px;
    height:2px;
    background:#ff2d2d;

}

.subtitle{

    color:#ff4646;

    font-size:16px;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

}

.slashes{

    color:#ff2d2d;

    letter-spacing:3px;

    font-weight:bold;

}

/*==========================*/

.jojo-left h1{

    font-size:100px;

    line-height:.92;

    font-weight:900;

    text-transform:uppercase;

    margin:0;

    color:#F2F2F2;

}

.jojo-left h1 span{

    color:#E31C1C;

}

/*==========================*/

.jojo-left p{

    margin-top:40px;

    color:#B5B5B5;

    font-size:28px;

    line-height:1.6;

}

/*==========================
BOTÓN
==========================*/

.jojo-btn{

    margin-top:60px;

    display:inline-flex;

    align-items:center;

    overflow:hidden;

    border:2px solid #E31C1C;

    text-decoration:none;

    transition:.35s;

    background:transparent;

}

.jojo-btn span{

    padding:22px 34px;

    color:#fff;

    font-weight:700;

    letter-spacing:1px;

    transition:.35s;

}

.btn-arrow{

    width:65px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#E31C1C;

    color:#fff;

    font-size:22px;

    transition:.35s;

}

.jojo-btn:hover{

    box-shadow:0 0 35px rgba(227,28,28,.35);

}

.jojo-btn:hover span{

    background:#E31C1C;

}

.jojo-btn:hover .btn-arrow{

    width:90px;

}
/*==========================
DERECHA
==========================*/

/* CONTENEDOR DERECHO */
.jojo-right{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 900px;
    overflow: visible;
}

/* IMAGEN */
.jojo-model{
    position: relative;
    width: auto;
    max-width: 820px;
    max-height: 960px;
    height: auto;
    z-index: 5;
    object-fit: contain;

    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,.45));
}

/* Si todavía se corta, usa este */
.jojo-model img{
    width:100%;
    height:auto;
    display:block;
}

/*==========================*/

.red-circle{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,30,30,.28),
    rgba(120,0,0,.10),
    transparent 70%);

    filter:blur(10px);

}

/*==========================*/

.jojo-right img{

    position:absolute;

    bottom:-114px;

    right:20px;

    width:640px;

    max-width:none;

    z-index:15;

    filter:drop-shadow(0 30px 45px rgba(0,0,0,.55));

}

/*==========================
HUD
==========================*/

.big-square{

    position:absolute;

    width:170px;

    height:170px;

    border:1px solid rgba(255,0,0,.25);

    top:180px;

    left:90px;

}

.small-square{

    position:absolute;

    width:130px;

    height:130px;

    border:1px solid rgba(255,0,0,.25);

    right:120px;

    bottom:220px;

}

/*==========================*/

.hud-level{

    position:absolute;

    right:40px;

    top:70px;

    border:1px solid #D91A1A;

    background:rgba(10,10,10,.65);

    padding:18px 22px;

    z-index:20;

}

.hud-level span{

    display:block;

    color:#fff;

    font-size:28px;

    font-weight:800;

}

.bars{

    display:flex;

    gap:4px;

    margin-top:12px;

}

.bars i{

    display:block;

    width:7px;

    height:22px;

    background:#FF2424;

}

/*==========================*/

.hud-status{

    position:absolute;

    right:50px;

    bottom:60px;

    border:1px solid #B71A1A;

    background:rgba(10,10,10,.65);

    padding:18px 25px;

    z-index:20;

}

.hud-status small{

    display:block;

    color:#8B8B8B;

    font-size:12px;

    letter-spacing:2px;

}

.hud-status strong{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:6px;

    font-size:28px;

    color:#fff;

}

.hud-status strong span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ff2323;

    box-shadow:0 0 15px #ff2323;

}

/*==================================================
TABLET
==================================================*/
@media (max-width:1024px){

.jojo-container{
    width:92%;
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:90px 0 40px;
    gap:0;
}

.jojo-left{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.jojo-topline{
    justify-content:center;
    gap:16px;
    margin-bottom:18px;
}

.jojo-left h1{
    font-size:64px;
    line-height:.95;
}

.jojo-left p{
    margin-top:22px;
    font-size:24px;
    line-height:1.6;
}

.jojo-btn{
    margin-top:28px;
    display:flex;
    max-width:380px;
    width:100%;
    justify-content:space-between;
    position:relative;
    z-index:30;
}

.big-square,
.small-square,
.hud-level,
.hud-status{
    display:none;
}

.jojo-right{
    position:relative;
    width:100%;
    min-height:520px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    margin-top:-10px;
}

.jojo-right img{
    position:relative;
    width:420px;
    max-width:90%;
    right:auto;
    bottom:0;
}

.red-circle{
    width:420px;
    height:420px;
}

}

/*==================================================
MOVIL
==================================================*/
@media (max-width:768px){

.jojo-container{
    width:92%;
    padding:70px 0 20px;
}

.line{
    width:40px;
}

.subtitle{
    font-size:11px;
    letter-spacing:2px;
}

.slashes{
    font-size:13px;
}

.jojo-left h1{
    font-size:42px;
}

.jojo-left p{
    font-size:17px;
    line-height:1.55;
    max-width:320px;
    margin-top:16px;
}

.jojo-btn{

    width:92%;

    max-width:330px;

    margin:-10px auto -80px;
    
    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;
    
    
    top:250px;   /* <-- mueve SOLO el botón */

    z-index:999;

    background:#111;

    border:2px solid #E31C1C;

}

.jojo-btn span{

    flex:1;

    padding:18px 20px;

    text-align:center;

    font-size:14px;

    background:#111;

}

.btn-arrow{

    width:60px;

    height:58px;

    background:#E31C1C;

    color:#fff;

    font-size:18px;

}

.jojo-right{

    position:relative;

    min-height:280px;

    margin-top:-15px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.jojo-right img{

    width:300px;

    max-width:none;

    position:relative;

    top:-10px;

}

.red-circle{
    width:290px;
    height:290px;
}

.jojo-glow{
    opacity:.45;
}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-44c5b25 *//*======================================
        FEATURES
======================================*/

.jojo-features{

    width:100%;

    background:#070707;

    padding:70px 4%;

}

.features-container{

    width:100%;

    border:1px solid rgba(255,0,0,.18);

    padding:55px 70px;

    position:relative;

}

.features-container::before{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(255,0,0,.08);

    pointer-events:none;

}

/*------------- TITULO -------------*/

.features-header{

    margin-bottom:55px;

}

.features-header h2{

    display:flex;

    align-items:flex-end;

    gap:22px;

    flex-wrap:wrap;

    margin:0;

}

.outline{

    font-size:82px;

    font-weight:900;

    line-height:1;

    color:transparent;

    -webkit-text-stroke:2px rgba(255,255,255,.14);

    text-transform:uppercase;

}

.solid{

    font-size:62px;

    font-weight:900;

    color:#ff1b1b;

    text-transform:uppercase;

    line-height:1;

}

.solid em{

    font-style:normal;

    color:#ff1b1b;

    letter-spacing:6px;

}

.features-header p{

    margin-top:25px;

    color:#d0d0d0;

    font-size:22px;

    line-height:1.7;

}

/*------------- GRID -------------*/

.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

}

/*------------- ITEM -------------*/

.feature-item{

    text-align:center;

    padding:35px 20px;

    border-left:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.feature-item:first-child{

    border-left:none;

}

/* ICONOS */

.feature-item i{

    font-size:42px;

    color:#ff2020;

    margin-bottom:22px;

    text-shadow:0 0 18px rgba(255,0,0,.45);

    transition:.35s;

}

/* TITULO */

.feature-item h4{

    font-size:24px;

    color:#fff;

    margin-bottom:10px;

    font-weight:700;

    letter-spacing:1px;

}

/* SUBTITULO */

.feature-item span{

    display:block;

    font-size:17px;

    color:#c9c9c9;

    letter-spacing:2px;

}

/* Hover */

.feature-item:hover{

    transform:translateY(-8px);

}

.feature-item:hover i{

    transform:scale(1.12);

    text-shadow:0 0 28px rgba(255,0,0,.9);

}

/* Responsive */

@media(max-width:991px){

    .features-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .feature-item:nth-child(3){

        border-left:none;

    }

}

@media(max-width:768px){

    .features-container{

        padding:45px 25px;

    }

    .features-header{

        text-align:center;

        margin-bottom:40px;

    }

    .features-header h2{

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:5px;

    }

    .outline{

        font-size:54px;

        text-align:center;

    }

    .solid{

        font-size:42px;

        text-align:center;

    }

    .features-header p{

        text-align:center;

        font-size:18px;

        line-height:1.7;

        max-width:320px;

        margin:20px auto 0;

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .feature-item{

        border:none;

        border-top:1px solid rgba(255,255,255,.08);

        padding:35px 10px;

        text-align:center;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a95320a *//*==========================================
=           GALERÍA JOJOSARI              =
==========================================*/

.jojo-gallery{
    width:100%;
    background:#090909;
    padding:70px 5%;
    position:relative;
    overflow:hidden;
}

/* HEADER */

.gallery-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:45px;
    flex-wrap:wrap;
    gap:20px;
}

.gallery-title h2{
    margin:0;
    font-size:64px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#ffffff;
    line-height:1;
}

.gallery-title span{
    color:#ff2323;
}

.gallery-title em{
    color:#ff2323;
    font-style:normal;
    margin-left:8px;
}

.gallery-link{

      color:#ff2323 !important;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.3s;

}
.gallery-link:hover{

    color:#ffffff;

    transform:translateX(8px);

}

/* GALERÍA */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:22px;
}


/* TARJETAS */

.gallery-card{
    position:relative;
    overflow:hidden;
    border:2px solid rgba(255,35,35,.55);
    border-radius:16px;
    aspect-ratio:9/14;
    display:block;
    transition:.35s;
    background:#111;
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;

    filter:
        blur(7px)
        brightness(.65)
        saturate(.85);

    transform:scale(1.06);
    transition:.45s;
}


/* Overlay */

.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:52px;
    color:#fff;
    background:rgba(0,0,0,.12);
    backdrop-filter:blur(1px);
}


/* Glow rojo */

.gallery-card::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:16px;

    box-shadow:
        inset 0 0 30px rgba(255,0,0,.18),
        0 0 22px rgba(255,0,0,.15);

    pointer-events:none;
}


/* Hover */

.gallery-card:hover{

    transform:translateY(-10px);

    border-color:#ff2323;

    box-shadow:
    0 0 35px rgba(255,0,0,.35);

}

.gallery-card:hover img{

    filter:
        blur(2px)
        brightness(.95);

    transform:scale(1.1);

}

.gallery-card:hover .gallery-overlay{

    background:rgba(0,0,0,.05);

    font-size:58px;

}


/* Responsive */

@media(max-width:1400px){

.gallery-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.gallery-header{

flex-direction:column;
align-items:flex-start;

}

.gallery-title h2{

font-size:42px;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:500px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-title h2{

font-size:34px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-db33135 */.jojo-stats{

    width:100%;
    background:#080808;
    padding:40px 4% 80px;

}

.stats-box{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    background:rgba(20,20,20,.92);

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.05);

    border-radius:2px;

    overflow:hidden;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 30px rgba(0,0,0,.45);

}

.stat-item{

    position:relative;

    padding:32px 20px;

    text-align:center;

}

.stat-item:not(:last-child){

    border-right:1px solid rgba(255,255,255,.04);

}

/* NÚMEROS */

.stat-item h2{

    margin:0;

    font-family:'Bebas Neue',sans-serif;

    font-size:64px;

    font-weight:400;

    letter-spacing:3px;

    color:#d91818;

    text-shadow:

        0 0 8px rgba(255,0,0,.12);

}

/* TEXTO */

.stat-item span{

    display:block;

    margin-top:10px;

    font-family:'Oswald',sans-serif;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#8d8d8d;

}

/* Hover */

.stat-item{

    transition:.35s;

}

.stat-item:hover{

    background:rgba(255,255,255,.015);

}

.stat-item:hover h2{

    color:#ff3535;

    text-shadow:

        0 0 18px rgba(255,0,0,.35);

}


/*======================================
STATS RESPONSIVE
======================================*/

@media (max-width:768px){

.jojo-stats{

    padding:30px 20px 50px;

}

.stats-box{

    grid-template-columns:repeat(2,1fr);

}

.stat-item{

    padding:30px 15px;

    border-right:none !important;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.stat-item:nth-child(odd){

    border-right:1px solid rgba(255,255,255,.05) !important;

}

.stat-item:nth-last-child(-n+2){

    border-bottom:none;

}

.stat-item h2{

    font-size:52px;

    letter-spacing:2px;

}

.stat-item span{

    font-size:14px;

    line-height:1.5;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3ac3b8d *//*======================================
        REDES SOCIALES
======================================*/

.jojo-social{

    width:100%;

    background:#080808;

    padding:80px 4%;

}

/* CONTENEDOR */

.social-box{

    width:100%;

    max-width:none;

    background:linear-gradient(180deg,#111111,#0a0a0a);

    border:1px solid rgba(255,0,0,.12);

    position:relative;

    padding:50px;

    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 20px 50px rgba(0,0,0,.45);

}

.social-box::before{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(255,0,0,.05);

    pointer-events:none;

}

/*======================================
            TITULO
======================================*/

.social-title{

    margin-bottom:45px;

}

.social-title h2{

    margin:0;

    font-family:'Bebas Neue',sans-serif;

    font-size:62px;

    font-weight:400;

    letter-spacing:3px;

    color:#ffffff;

    text-transform:uppercase;

}

.social-title span{

    color:#ff2323;

}

/*======================================
            GRID
======================================*/

.social-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/*======================================
            TARJETA
======================================*/

.social-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:20px;

    padding:24px 28px;

    background:#121212;

    border:1px solid rgba(255,255,255,.05);

    text-decoration:none;

    overflow:hidden;

    transition:.35s;

}

/* Línea roja animada */

.social-item::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(90deg,

        transparent,

        rgba(255,0,0,.08),

        transparent

    );

    transition:.6s;

}

.social-item:hover::before{

    left:100%;

}

/* Hover */

.social-item:hover{

    transform:translateY(-8px);

    border-color:rgba(255,40,40,.45);

    background:#171717;

    box-shadow:

        0 0 25px rgba(255,0,0,.18);

}

/*======================================
            ICONOS
======================================*/

.social-item img{

    width:60px;

    height:60px;

    object-fit:contain;

    transition:.35s;

}

.social-item:hover img{

    transform:scale(1.1);

    filter:drop-shadow(0 0 12px rgba(255,0,0,.45));

}

/*======================================
            TEXTO
======================================*/

.social-info{

    flex:1;

}

.social-info h3{

    margin:0;

    color:#ffffff;

    font-size:23px;

    font-weight:700;

}

.social-info p{

    margin-top:5px;

    color:#8b8b8b;

    font-size:15px;

    letter-spacing:1px;

}

/*======================================
            FLECHA
======================================*/

.social-arrow{

    font-size:34px;

    color:#6d6d6d;

    transition:.35s;

}

.social-item:hover .social-arrow{

    color:#ff2323;

    transform:translateX(10px);

}

.social-item:hover .social-info h3{

    color:#ff2323;

}

/*======================================
            RESPONSIVE
======================================*/

@media(max-width:1100px){

.social-list{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.social-box{

padding:30px;

}

.social-title h2{

font-size:46px;

}

.social-item{

padding:18px;

}

.social-item img{

width:50px;

height:50px;

}

.social-info h3{

font-size:20px;

}

.social-info p{

font-size:14px;

}

.social-arrow{

font-size:28px;

}

}/* End custom CSS */