.elementor-6181 .elementor-element.elementor-element-2f3cdff{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-bc45ae6{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-42716bf{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-9b40ed8{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-aa7726e{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-37d96d0{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-4957e07{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6181 .elementor-element.elementor-element-6e24161{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-2f3cdff *//*======================================
 HERO
======================================*/

.night-hero{

position:relative;
width:100%;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:#040404;

}

.night-video{

position:absolute;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
filter:brightness(.45) saturate(1.2);

}

.night-overlay{

position:absolute;
inset:0;
background:
linear-gradient(to top,#050505 5%,rgba(0,0,0,.35),rgba(0,0,0,.6));
z-index:1;

}

.night-gradient{

position:absolute;
inset:0;
background:

radial-gradient(circle at 15% 20%,rgba(0,255,255,.18),transparent 35%),

radial-gradient(circle at 85% 25%,rgba(255,0,180,.18),transparent 35%),

radial-gradient(circle at 50% 90%,rgba(120,0,255,.20),transparent 45%);

mix-blend-mode:screen;

z-index:2;

}

.night-container{

position:relative;
z-index:10;
width:90%;
max-width:1250px;
text-align:center;

}

.hero-badge{

display:inline-flex;
align-items:center;
gap:10px;

padding:12px 24px;

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

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

backdrop-filter:blur(18px);

border-radius:60px;

font-size:.9rem;

color:white;

letter-spacing:1px;

margin-bottom:35px;

animation:fadeUp 1s;

}

.night-container h1{

font-size:clamp(3rem,6vw,6.8rem);

font-weight:900;

line-height:1;

color:white;

margin-bottom:35px;

text-transform:uppercase;

animation:fadeUp 1.3s;

}

.night-container h1 span{

background:linear-gradient(90deg,#ff00b7,#7b5cff,#00f5ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.night-container p{

max-width:850px;

margin:auto;

font-size:1.25rem;

line-height:1.8;

color:#ededed;

opacity:.9;

animation:fadeUp 1.6s;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

animation:fadeUp 1.9s;

}

.btn-primary{

padding:18px 38px;

border-radius:60px;

background:linear-gradient(90deg,#ff008c,#ff4bd8);

color:white;

font-weight:700;

text-decoration:none;

transition:.4s;

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

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 0 60px rgba(255,0,180,.7);

}

.btn-secondary{

padding:18px 38px;

border-radius:60px;

text-decoration:none;

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

color:white;

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

backdrop-filter:blur(14px);

transition:.4s;

}

.btn-secondary:hover{

background:white;

color:#111;

}

.hero-stats{

margin-top:70px;

display:flex;

justify-content:center;

gap:80px;

flex-wrap:wrap;

}

.hero-stats strong{

display:block;

font-size:2rem;

background:linear-gradient(90deg,#00F5FF,#FF00A8);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-stats span{

color:#d5d5d5;

font-size:.95rem;

}

.light{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.55;

animation:floatLight 8s ease-in-out infinite;

z-index:1;

}

.light1{

width:320px;

height:320px;

background:#ff0095;

left:-120px;

top:10%;

}

.light2{

width:350px;

height:350px;

background:#00f7ff;

right:-140px;

bottom:10%;

animation-delay:2s;

}

.light3{

width:280px;

height:280px;

background:#7b4dff;

left:40%;

bottom:-120px;

animation-delay:4s;

}

.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:20;

}

.scroll-indicator span{

display:block;

width:26px;

height:46px;

border:2px solid rgba(255,255,255,.5);

border-radius:20px;

position:relative;

}

.scroll-indicator span::before{

content:"";

position:absolute;

left:50%;

top:8px;

transform:translateX(-50%);

width:6px;

height:6px;

background:white;

border-radius:50%;

animation:scroll 2s infinite;

}

@keyframes scroll{

0%{opacity:0;transform:translate(-50%,0);}

50%{opacity:1;}

100%{opacity:0;transform:translate(-50%,18px);}

}

@keyframes floatLight{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-45px);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:768px){

.night-hero{

height:100svh;

padding:30px 0;

}

.hero-stats{

gap:35px;

}

.night-container p{

font-size:1.02rem;

line-height:1.7;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;
max-width:340px;

text-align:center;

}

.hero-badge{

font-size:.75rem;

padding:10px 18px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-46d2e76 *//* ==========================================
SECCIÓN 2 · NIGHTLIFE TRANSFORM
========================================== */

.xp-night-transform {
    --xp-pink: #ff008c;
    --xp-pink-soft: #ff4db8;
    --xp-cyan: #00eaff;
    --xp-blue: #2575ff;
    --xp-purple: #8d3cff;
    --xp-green: #00f5b0;
    --xp-white: #ffffff;
    --xp-muted: #b8b8c5;
    --xp-bg: #030306;

    position: relative;
    width: 100%;
    padding: 135px 6% 125px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 0%, rgba(87, 32, 113, .12), transparent 38%),
        linear-gradient(180deg, #030306 0%, #05040a 50%, #030306 100%);
}

/* ==========================================
CAPAS DE FONDO
========================================== */

.xp-night-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

/* Textura sutil */

.xp-night-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .55) 1px, transparent 1.5px);
    background-size: 42px 42px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .2),
        rgba(0, 0, 0, .95) 45%,
        transparent 100%
    );
    animation: xpNightDots 24s linear infinite;
}

/* Viñeta */

.xp-night-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .75),
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, .75)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .4),
            transparent 25%,
            transparent 70%,
            rgba(0, 0, 0, .8)
        );
}

/* Luces flotantes */

.xp-night-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .34;
    will-change: transform;
}

.xp-night-orb--pink {
    width: 620px;
    height: 620px;
    top: 18%;
    left: -260px;
    background: var(--xp-pink);
    animation: xpNightOrbPink 13s ease-in-out infinite;
}

.xp-night-orb--blue {
    width: 680px;
    height: 680px;
    top: 15%;
    right: -290px;
    background: var(--xp-cyan);
    animation: xpNightOrbBlue 15s ease-in-out infinite;
}

.xp-night-orb--purple {
    width: 480px;
    height: 480px;
    bottom: -230px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--xp-purple);
    opacity: .2;
    animation: xpNightOrbPurple 10s ease-in-out infinite;
}

/* Láseres */

.xp-night-laser {
    position: absolute;
    width: 2px;
    height: 110%;
    top: -10%;
    opacity: 0;
    filter: blur(.3px);
    transform-origin: top center;
    box-shadow: 0 0 12px currentColor;
}

.xp-night-laser::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    filter: blur(5px);
    opacity: .5;
}

.xp-night-laser--1 {
    left: 12%;
    color: var(--xp-pink);
    transform: rotate(-28deg);
    animation: xpNightLaser 7s ease-in-out infinite;
}

.xp-night-laser--2 {
    left: 34%;
    color: var(--xp-purple);
    transform: rotate(-12deg);
    animation: xpNightLaser 8.5s ease-in-out 1.5s infinite;
}

.xp-night-laser--3 {
    right: 28%;
    color: var(--xp-cyan);
    transform: rotate(18deg);
    animation: xpNightLaser 7.5s ease-in-out 3s infinite;
}

.xp-night-laser--4 {
    right: 9%;
    color: var(--xp-blue);
    transform: rotate(31deg);
    animation: xpNightLaser 9s ease-in-out 4.5s infinite;
}

/* Flash ambiente */

.xp-night-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 255, 255, .23),
            rgba(0, 234, 255, .06) 18%,
            transparent 48%
        );
    animation: xpNightFlash 9s steps(1) infinite;
}

/* Partículas */

.xp-night-particles {
    position: absolute;
    inset: 0;
}

.xp-night-particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--xp-white);
    box-shadow:
        0 0 10px var(--xp-white),
        0 0 22px currentColor;
    opacity: 0;
    animation: xpNightParticle 9s linear infinite;
}

.xp-night-particles span:nth-child(odd) {
    color: var(--xp-cyan);
    background: var(--xp-cyan);
}

.xp-night-particles span:nth-child(even) {
    color: var(--xp-pink);
    background: var(--xp-pink);
}

.xp-night-particles span:nth-child(1) {
    left: 8%;
    top: 70%;
    animation-delay: 0s;
}

.xp-night-particles span:nth-child(2) {
    left: 17%;
    top: 85%;
    animation-delay: 1.2s;
}

.xp-night-particles span:nth-child(3) {
    left: 25%;
    top: 65%;
    animation-delay: 2.8s;
}

.xp-night-particles span:nth-child(4) {
    left: 37%;
    top: 88%;
    animation-delay: .8s;
}

.xp-night-particles span:nth-child(5) {
    left: 46%;
    top: 78%;
    animation-delay: 3.7s;
}

.xp-night-particles span:nth-child(6) {
    left: 54%;
    top: 90%;
    animation-delay: 1.8s;
}

.xp-night-particles span:nth-child(7) {
    left: 63%;
    top: 72%;
    animation-delay: 4.2s;
}

.xp-night-particles span:nth-child(8) {
    left: 71%;
    top: 86%;
    animation-delay: 2.3s;
}

.xp-night-particles span:nth-child(9) {
    left: 79%;
    top: 67%;
    animation-delay: 5.2s;
}

.xp-night-particles span:nth-child(10) {
    left: 89%;
    top: 82%;
    animation-delay: 3.2s;
}

.xp-night-particles span:nth-child(11) {
    left: 31%;
    top: 75%;
    animation-delay: 6s;
}

.xp-night-particles span:nth-child(12) {
    left: 68%;
    top: 80%;
    animation-delay: 6.8s;
}

/* Piso futurista */

.xp-night-floor {
    position: absolute;
    width: 160%;
    height: 520px;
    left: -30%;
    bottom: -330px;
    transform: perspective(650px) rotateX(68deg);
    transform-origin: center top;
    opacity: .22;
    background-image:
        linear-gradient(rgba(0, 234, 255, .35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 140, .35) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), transparent 78%);
    animation: xpNightFloor 8s linear infinite;
}

/* Ecualizador */

.xp-night-equalizer {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 74px;
    opacity: .18;
}

.xp-night-equalizer span {
    width: 5px;
    height: var(--h);
    border-radius: 10px;
    transform-origin: bottom;
    background: linear-gradient(
        to top,
        var(--xp-pink),
        var(--xp-purple),
        var(--xp-cyan)
    );
    box-shadow: 0 0 12px currentColor;
    animation: xpNightEqualizer .85s ease-in-out var(--d) infinite alternate;
}

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

.xp-night-shell {
    position: relative;
    width: min(1420px, 100%);
    margin: 0 auto;
    z-index: 2;
}

/* ==========================================
ENCABEZADO
========================================== */

.xp-night-heading {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
}

.xp-night-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 26px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.xp-night-kicker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xp-pink);
    box-shadow:
        0 0 8px var(--xp-pink),
        0 0 18px var(--xp-pink);
    animation: xpNightKickerPulse 1.8s ease-in-out infinite;
}

.xp-night-heading h2 {
    max-width: 850px;
    margin: 0 auto 24px;
    color: var(--xp-white);
    font-size: clamp(2.8rem, 5.5vw, 5.4rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -3.5px;
    text-wrap: balance;
}

.xp-night-heading h2 span {
    display: block;
    margin-top: 8px;
    color: transparent;
    background: linear-gradient(
        90deg,
        var(--xp-cyan) 0%,
        #667dff 38%,
        var(--xp-purple) 67%,
        var(--xp-pink) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: xpNightTextGradient 5s linear infinite;
}

.xp-night-heading p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--xp-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* ==========================================
COMPARATIVA
========================================== */

.xp-night-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
}

/* Tarjetas */

.xp-night-card {
    position: relative;
    min-width: 0;
    padding: 40px 38px 32px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .025)
        );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.xp-night-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .25),
        rgba(255, 255, 255, .02) 45%,
        rgba(255, 255, 255, .11)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.xp-night-card::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 680px;
    top: -240px;
    left: -220px;
    transform: rotate(26deg);
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, .12),
        transparent
    );
    transition: left .8s ease;
}

.xp-night-card:hover {
    transform: translateY(-12px);
}

.xp-night-card:hover::after {
    left: 115%;
}

/* Borde según lado */

.xp-night-card--problem {
    border: 1px solid rgba(255, 0, 140, .33);
    box-shadow:
        0 26px 80px rgba(0, 0, 0, .45),
        inset 0 0 50px rgba(255, 0, 140, .025);
}

.xp-night-card--problem:hover {
    border-color: rgba(255, 0, 140, .85);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .55),
        0 0 42px rgba(255, 0, 140, .16),
        inset 0 0 65px rgba(255, 0, 140, .045);
}

.xp-night-card--solution {
    border: 1px solid rgba(0, 234, 255, .3);
    box-shadow:
        0 26px 80px rgba(0, 0, 0, .45),
        inset 0 0 50px rgba(0, 234, 255, .025);
}

.xp-night-card--solution:hover {
    border-color: rgba(0, 234, 255, .85);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .55),
        0 0 42px rgba(0, 234, 255, .16),
        inset 0 0 65px rgba(0, 234, 255, .045);
}

/* Glow interno */

.xp-night-card-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    top: -190px;
    right: -140px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .24;
}

.xp-night-card--problem .xp-night-card-glow {
    background: var(--xp-pink);
}

.xp-night-card--solution .xp-night-card-glow {
    background: var(--xp-cyan);
}

/* Cabecera de tarjetas */

.xp-night-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.xp-night-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 1.35rem;
    font-weight: 900;
    background: rgba(255, 255, 255, .055);
}

.xp-night-card--problem .xp-night-card-icon {
    color: var(--xp-pink-soft);
    border: 1px solid rgba(255, 0, 140, .44);
    box-shadow: 0 0 22px rgba(255, 0, 140, .12);
}

.xp-night-card--solution .xp-night-card-icon {
    color: var(--xp-cyan);
    border: 1px solid rgba(0, 234, 255, .44);
    box-shadow: 0 0 22px rgba(0, 234, 255, .12);
}

.xp-night-card-label {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .45);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.xp-night-card h3 {
    margin: 0;
    color: var(--xp-white);
    font-size: 1.42rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.xp-night-card--problem h3 {
    color: var(--xp-pink-soft);
}

.xp-night-card--solution h3 {
    color: var(--xp-cyan);
}

/* Listas */

.xp-night-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xp-night-list li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.xp-night-list li:last-child {
    border-bottom: 0;
}

.xp-night-list-icon {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 900;
}

.xp-night-card--problem .xp-night-list-icon {
    color: var(--xp-pink-soft);
    background: rgba(255, 0, 140, .08);
    border: 1px solid rgba(255, 0, 140, .2);
}

.xp-night-card--solution .xp-night-list-icon {
    color: var(--xp-green);
    background: rgba(0, 245, 176, .08);
    border: 1px solid rgba(0, 245, 176, .2);
}

.xp-night-list p {
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-size: .96rem;
    line-height: 1.5;
}

/* Estado inferior */

.xp-night-card-status {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding: 9px 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.xp-night-card-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.xp-night-card--problem .xp-night-card-status span {
    background: var(--xp-pink);
    box-shadow: 0 0 12px var(--xp-pink);
    animation: xpNightWarning 1.5s ease-in-out infinite;
}

.xp-night-card--solution .xp-night-card-status span {
    background: var(--xp-green);
    box-shadow: 0 0 12px var(--xp-green);
    animation: xpNightActive 1.5s ease-in-out infinite;
}

/* ==========================================
VS CENTRAL
========================================== */

.xp-night-vs {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100%;
}

.xp-night-vs-line {
    position: absolute;
    top: 4%;
    bottom: 4%;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--xp-pink) 22%,
        var(--xp-purple) 50%,
        var(--xp-cyan) 78%,
        transparent
    );
    box-shadow:
        0 0 12px rgba(255, 0, 140, .5),
        0 0 24px rgba(0, 234, 255, .4);
}

.xp-night-vs-circle {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background:
        linear-gradient(#07070d, #07070d) padding-box,
        linear-gradient(
            135deg,
            var(--xp-pink),
            var(--xp-purple),
            var(--xp-cyan)
        ) border-box;
    border: 3px solid transparent;
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, .025),
        0 0 30px rgba(255, 0, 140, .25),
        0 0 45px rgba(0, 234, 255, .2);
}

.xp-night-vs-circle span {
    color: var(--xp-white);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.xp-night-vs-pulse {
    position: absolute;
    z-index: 1;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    animation: xpNightVsPulse 2.2s ease-out infinite;
}

/* ==========================================
CIERRE
========================================== */

.xp-night-result {
    position: relative;
    margin-top: 82px;
    text-align: center;
}

.xp-night-result-line {
    display: block;
    width: 120px;
    height: 2px;
    margin: 0 auto 28px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--xp-pink),
        var(--xp-cyan),
        transparent
    );
    box-shadow:
        0 0 18px rgba(255, 0, 140, .35),
        0 0 18px rgba(0, 234, 255, .35);
    animation: xpNightResultLine 3s ease-in-out infinite;
}

.xp-night-result > p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 600;
}

.xp-night-result h3 {
    max-width: 860px;
    margin: 0 auto;
    color: var(--xp-white);
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -2px;
}

.xp-night-result h3 span {
    color: transparent;
    background: linear-gradient(
        90deg,
        var(--xp-pink),
        var(--xp-purple),
        var(--xp-cyan)
    );
    background-size: 180% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: xpNightTextGradient 4s linear infinite;
}

.xp-night-mini-results {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.xp-night-mini-results div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .085);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.xp-night-mini-results p {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.xp-night-mini-icon {
    color: var(--xp-cyan);
    font-weight: 900;
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes xpNightDots {
    to {
        background-position: 42px -42px;
    }
}

@keyframes xpNightOrbPink {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(90px, 70px, 0) scale(1.12);
    }
}

@keyframes xpNightOrbBlue {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-95px, 85px, 0) scale(1.08);
    }
}

@keyframes xpNightOrbPurple {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.22);
    }
}

@keyframes xpNightLaser {
    0%,
    13%,
    100% {
        opacity: 0;
    }

    18%,
    26% {
        opacity: .42;
    }

    31% {
        opacity: .08;
    }
}

@keyframes xpNightFlash {
    0%,
    8%,
    11%,
    100% {
        opacity: 0;
    }

    9% {
        opacity: .55;
    }

    10% {
        opacity: .08;
    }
}

@keyframes xpNightParticle {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.6);
    }

    15% {
        opacity: .75;
    }

    100% {
        opacity: 0;
        transform: translate3d(40px, -420px, 0) scale(1.8);
    }
}

@keyframes xpNightFloor {
    to {
        background-position: 0 58px, 58px 0;
    }
}

@keyframes xpNightEqualizer {
    from {
        transform: scaleY(.28);
        opacity: .35;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes xpNightKickerPulse {
    0%,
    100% {
        transform: scale(.8);
        opacity: .65;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

@keyframes xpNightTextGradient {
    to {
        background-position: 200% center;
    }
}

@keyframes xpNightVsPulse {
    0% {
        transform: scale(.8);
        opacity: .75;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes xpNightWarning {
    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

@keyframes xpNightActive {
    0%,
    100% {
        transform: scale(.75);
        opacity: .6;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes xpNightResultLine {
    0%,
    100% {
        width: 100px;
        opacity: .55;
    }

    50% {
        width: 190px;
        opacity: 1;
    }
}

/* ==========================================
TABLET
========================================== */

@media (max-width: 1024px) {

    .xp-night-transform {
        padding: 110px 5% 105px;
    }

    .xp-night-compare {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .xp-night-vs {
        min-height: 90px;
    }

    .xp-night-vs-line {
        top: 50%;
        left: 7%;
        right: 7%;
        bottom: auto;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(
            90deg,
            transparent,
            var(--xp-pink),
            var(--xp-purple),
            var(--xp-cyan),
            transparent
        );
    }

    .xp-night-card {
        padding: 38px 34px 30px;
    }

    .xp-night-floor {
        bottom: -380px;
    }

}

/* ==========================================
MÓVIL
========================================== */

@media (max-width: 767px) {

    .xp-night-transform {
        padding: 90px 20px 88px;
    }

    .xp-night-heading {
        margin-bottom: 55px;
    }

    .xp-night-kicker {
        padding: 9px 13px;
        font-size: .64rem;
        letter-spacing: 1.35px;
    }

    .xp-night-heading h2 {
        font-size: clamp(2.4rem, 12vw, 3.6rem);
        letter-spacing: -2px;
    }

    .xp-night-heading p {
        font-size: .98rem;
        line-height: 1.7;
    }

    .xp-night-card {
        padding: 30px 22px 25px;
        border-radius: 24px;
    }

    .xp-night-card-top {
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .xp-night-card-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .xp-night-card h3 {
        font-size: 1.17rem;
    }

    .xp-night-card-label {
        font-size: .62rem;
        letter-spacing: 1.1px;
    }

    .xp-night-list li {
        grid-template-columns: 24px minmax(0, 1fr);
        padding: 12px 0;
    }

    .xp-night-list p {
        font-size: .9rem;
    }

    .xp-night-vs {
        min-height: 72px;
    }

    .xp-night-vs-circle {
        width: 60px;
        height: 60px;
    }

    .xp-night-vs-pulse {
        width: 60px;
        height: 60px;
    }

    .xp-night-result {
        margin-top: 64px;
    }

    .xp-night-result h3 {
        font-size: clamp(2rem, 10vw, 2.9rem);
        letter-spacing: -1.5px;
    }

    .xp-night-mini-results {
        gap: 9px;
    }

    .xp-night-mini-results div {
        padding: 9px 13px;
    }

    .xp-night-mini-results p {
        font-size: .68rem;
    }

    .xp-night-laser {
        opacity: .15;
    }

    .xp-night-equalizer {
        bottom: 18px;
        transform: translateX(-50%) scale(.78);
    }

}

/* ==========================================
REDUCIR MOVIMIENTO
========================================== */

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

    .xp-night-transform *,
    .xp-night-transform *::before,
    .xp-night-transform *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-187f5f2 *//* ==========================================
SECCIÓN 3 · CENTRO DE OPERACIONES XPACIO
========================================== */

.xp-club-operations {
    --club-pink: #ff008c;
    --club-purple: #9747ff;
    --club-blue: #3478ff;
    --club-cyan: #00eaff;
    --club-green: #00f0a8;
    --club-orange: #ff9e45;
    --club-white: #ffffff;
    --club-muted: #aaaabb;
    --club-bg: #040407;

    position: relative;
    width: 100%;
    padding: 135px 6% 125px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(53, 28, 91, .18),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #030306 0%,
            #07060c 50%,
            #030306 100%
        );
}

/* ==========================================
FONDO DINÁMICO
========================================== */

.xp-club-operations-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

/* Luces ambientales */

.xp-club-operations-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .23;
}

.xp-club-operations-orb--one {
    width: 650px;
    height: 650px;
    top: 10%;
    left: -290px;
    background: var(--club-pink);
    animation: clubOperationsOrbOne 14s ease-in-out infinite;
}

.xp-club-operations-orb--two {
    width: 680px;
    height: 680px;
    right: -300px;
    bottom: 5%;
    background: var(--club-cyan);
    animation: clubOperationsOrbTwo 16s ease-in-out infinite;
}

/* Retícula tecnológica */

.xp-club-operations-grid {
    position: absolute;
    inset: 0;
    opacity: .11;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );
    background-size: 65px 65px;
    mask-image:
        radial-gradient(
            ellipse at center,
            #000 8%,
            transparent 75%
        );
    animation: clubOperationsGrid 20s linear infinite;
}

/* Barrido de luz */

.xp-club-operations-scan {
    position: absolute;
    top: -30%;
    left: 0;
    width: 100%;
    height: 200px;
    opacity: 0;
    transform: rotate(-8deg);
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 234, 255, .1),
        transparent
    );
    animation: clubOperationsScan 9s linear infinite;
}

/* Haces */

.xp-club-operations-beam {
    position: absolute;
    width: 2px;
    height: 900px;
    top: -320px;
    opacity: .15;
    transform-origin: top;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, .8),
        currentColor,
        transparent
    );
    filter: blur(.4px);
    box-shadow: 0 0 18px currentColor;
}

.xp-club-operations-beam--one {
    left: 18%;
    color: var(--club-pink);
    transform: rotate(-24deg);
    animation: clubOperationsBeam 8s ease-in-out infinite;
}

.xp-club-operations-beam--two {
    left: 50%;
    color: var(--club-purple);
    transform: rotate(4deg);
    animation: clubOperationsBeam 10s ease-in-out 2s infinite;
}

.xp-club-operations-beam--three {
    right: 18%;
    color: var(--club-cyan);
    transform: rotate(24deg);
    animation: clubOperationsBeam 9s ease-in-out 4s infinite;
}

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

.xp-club-operations-shell {
    position: relative;
    z-index: 2;
    width: min(1440px, 100%);
    margin: 0 auto;
}

/* ==========================================
ENCABEZADO
========================================== */

.xp-club-operations-heading {
    max-width: 940px;
    margin: 0 auto 95px;
    text-align: center;
}

.xp-club-operations-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-club-operations-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--club-cyan);
    box-shadow:
        0 0 10px var(--club-cyan),
        0 0 20px var(--club-cyan);
    animation: clubOperationsKicker 1.6s ease-in-out infinite;
}

.xp-club-operations-heading h2 {
    max-width: 900px;
    margin: 0 auto 24px;
    color: var(--club-white);
    font-size: clamp(2.9rem, 5.5vw, 5.5rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -4px;
    text-wrap: balance;
}

.xp-club-operations-heading h2 span {
    display: block;
    margin-top: 10px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--club-pink),
            var(--club-purple),
            var(--club-cyan)
        );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: clubOperationsGradient 5s linear infinite;
}

.xp-club-operations-heading p {
    max-width: 800px;
    margin: 0 auto;
    color: var(--club-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* ==========================================
SISTEMA CENTRAL
========================================== */

.xp-club-system {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 340px)
        minmax(0, 1fr);
    gap: 55px;
    align-items: center;
}

/* ==========================================
COLUMNAS
========================================== */

.xp-club-services-column {
    display: grid;
    gap: 24px;
}

/* Desfase para mayor dinamismo */

.xp-club-services-column--left {
    transform: translateY(-15px);
}

.xp-club-services-column--right {
    transform: translateY(15px);
}

/* ==========================================
TARJETAS
========================================== */

.xp-club-service {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    padding: 27px 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    background:
        linear-gradient(
            140deg,
            rgba(255, 255, 255, .065),
            rgba(255, 255, 255, .018)
        );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.xp-club-service::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -120px;
    right: -100px;
    border-radius: 50%;
    background: currentColor;
    filter: blur(65px);
    opacity: .1;
    transition: opacity .45s ease;
}

.xp-club-service::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 320px;
    top: -130px;
    left: -160px;
    transform: rotate(28deg);
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .13),
            transparent
        );
    transition: left .8s ease;
}

.xp-club-service:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: currentColor;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .48),
        0 0 30px color-mix(in srgb, currentColor 18%, transparent);
}

.xp-club-service:hover::before {
    opacity: .2;
}

.xp-club-service:hover::after {
    left: 120%;
}

/* Colores */

.xp-club-service--pink {
    color: var(--club-pink);
}

.xp-club-service--purple {
    color: var(--club-purple);
}

.xp-club-service--blue {
    color: var(--club-blue);
}

.xp-club-service--cyan {
    color: var(--club-cyan);
}

.xp-club-service--green {
    color: var(--club-green);
}

.xp-club-service--orange {
    color: var(--club-orange);
}

/* Número */

.xp-club-service-number {
    position: absolute;
    top: 13px;
    right: 17px;
    color: rgba(255, 255, 255, .18);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 1px;
}

/* Icono */

.xp-club-service-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid currentColor;
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .07),
            rgba(255, 255, 255, .015)
        );
    box-shadow:
        0 0 22px color-mix(in srgb, currentColor 17%, transparent),
        inset 0 0 15px color-mix(in srgb, currentColor 7%, transparent);
}

.xp-club-service-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Contenido */

.xp-club-service-content {
    position: relative;
    z-index: 2;
}

.xp-club-service-content > span {
    display: block;
    margin-bottom: 5px;
    color: currentColor;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.xp-club-service-content h3 {
    margin: 0 0 10px;
    color: var(--club-white);
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.2;
}

.xp-club-service-content p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .88rem;
    line-height: 1.6;
}

/* Punto de conexión */

.xp-club-service-status {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 0 8px currentColor,
        0 0 18px currentColor;
    animation: clubOperationsStatus 1.8s ease-in-out infinite;
}

.xp-club-services-column--left .xp-club-service-status {
    right: -4px;
}

.xp-club-services-column--right .xp-club-service-status {
    left: -4px;
}

/* ==========================================
NÚCLEO CENTRAL
========================================== */

.xp-club-core {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    max-width: 340px;
    margin: 0 auto;
}

.xp-club-core-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74%;
    aspect-ratio: 1;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255, 255, 255, .1),
            rgba(8, 7, 15, .94) 55%
        );
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        0 0 45px rgba(151, 71, 255, .18),
        0 0 75px rgba(0, 234, 255, .1),
        inset 0 0 45px rgba(255, 255, 255, .025);
}

.xp-club-core-content::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background:
        conic-gradient(
            from 0deg,
            var(--club-pink),
            var(--club-purple),
            var(--club-cyan),
            var(--club-purple),
            var(--club-pink)
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: clubOperationsCoreBorder 7s linear infinite;
}

.xp-club-core-label {
    margin-bottom: 13px;
    color: var(--club-cyan);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: 3px;
}

.xp-club-core-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
    border-radius: 50%;
    color: var(--club-white);
    background:
        linear-gradient(
            135deg,
            var(--club-pink),
            var(--club-purple),
            var(--club-cyan)
        );
    box-shadow:
        0 0 22px rgba(151, 71, 255, .42);
}

.xp-club-core-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-club-core-content h3 {
    margin: 0 0 10px;
    color: var(--club-white);
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    font-weight: 900;
    line-height: 1;
}

.xp-club-core-content h3 strong {
    display: block;
    margin-top: 5px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--club-pink),
            var(--club-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.xp-club-core-content p {
    max-width: 210px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: .8rem;
    line-height: 1.5;
}

.xp-club-core-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(0, 240, 168, .2);
    border-radius: 999px;
    color: rgba(255, 255, 255, .7);
    background: rgba(0, 240, 168, .045);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.xp-club-core-live span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--club-green);
    box-shadow: 0 0 12px var(--club-green);
    animation: clubOperationsLive 1.4s ease-in-out infinite;
}

/* Anillos */

.xp-club-core-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.xp-club-core-ring--one {
    inset: 5%;
    border:
        1px solid rgba(255, 255, 255, .08);
    border-top-color: var(--club-pink);
    border-right-color: var(--club-cyan);
    animation: clubOperationsSpin 12s linear infinite;
}

.xp-club-core-ring--two {
    inset: 13%;
    border:
        1px dashed rgba(255, 255, 255, .13);
    animation: clubOperationsSpinReverse 16s linear infinite;
}

.xp-club-core-ring--three {
    inset: 21%;
    border:
        1px solid rgba(151, 71, 255, .26);
    box-shadow:
        0 0 25px rgba(151, 71, 255, .1);
    animation: clubOperationsRingPulse 3s ease-in-out infinite;
}

/* Partículas del núcleo */

.xp-club-core-particles span {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--club-cyan);
    box-shadow: 0 0 12px currentColor;
}

.xp-club-core-particles span:nth-child(1) {
    top: 5%;
    left: 48%;
    color: var(--club-pink);
    background: currentColor;
    animation: clubOperationsParticleOne 6s ease-in-out infinite;
}

.xp-club-core-particles span:nth-child(2) {
    top: 48%;
    right: 4%;
    color: var(--club-cyan);
    background: currentColor;
    animation: clubOperationsParticleTwo 7s ease-in-out infinite;
}

.xp-club-core-particles span:nth-child(3) {
    bottom: 6%;
    left: 48%;
    color: var(--club-purple);
    background: currentColor;
    animation: clubOperationsParticleOne 8s ease-in-out reverse infinite;
}

.xp-club-core-particles span:nth-child(4) {
    top: 48%;
    left: 4%;
    color: var(--club-pink);
    background: currentColor;
    animation: clubOperationsParticleTwo 7.5s ease-in-out reverse infinite;
}

/* ==========================================
CONECTORES
========================================== */

.xp-club-connectors {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.xp-club-connector {
    position: absolute;
    height: 1px;
    width: 10%;
    opacity: .55;
    overflow: hidden;
}

.xp-club-connector::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            currentColor,
            transparent
        );
}

.xp-club-connector::after {
    content: "";
    position: absolute;
    top: -2px;
    width: 14px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 13px currentColor;
    animation: clubOperationsSignal 2.2s linear infinite;
}

/* Izquierda */

.xp-club-connector--one,
.xp-club-connector--two,
.xp-club-connector--three {
    left: 31%;
    color: var(--club-pink);
}

.xp-club-connector--one {
    top: 18%;
    transform: rotate(9deg);
}

.xp-club-connector--two {
    top: 50%;
    color: var(--club-purple);
}

.xp-club-connector--three {
    top: 82%;
    color: var(--club-blue);
    transform: rotate(-9deg);
}

/* Derecha */

.xp-club-connector--four,
.xp-club-connector--five,
.xp-club-connector--six {
    right: 31%;
    color: var(--club-cyan);
}

.xp-club-connector--four {
    top: 18%;
    transform: rotate(-9deg);
}

.xp-club-connector--five {
    top: 50%;
    color: var(--club-green);
}

.xp-club-connector--six {
    top: 82%;
    color: var(--club-orange);
    transform: rotate(9deg);
}

/* ==========================================
FRANJA CENTRALIZACIÓN
========================================== */

.xp-club-centralized {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-top: 80px;
    padding: 28px 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 26px;
    background:
        linear-gradient(
            120deg,
            rgba(255, 0, 140, .07),
            rgba(151, 71, 255, .055),
            rgba(0, 234, 255, .07)
        ),
        rgba(255, 255, 255, .025);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.xp-club-centralized::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 500px;
    top: -200px;
    left: -280px;
    transform: rotate(25deg);
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .09),
            transparent
        );
    animation: clubOperationsCentralShine 7s ease-in-out infinite;
}

.xp-club-centralized-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(0, 234, 255, .25);
    border-radius: 19px;
    color: var(--club-cyan);
    background: rgba(0, 234, 255, .055);
    box-shadow: 0 0 28px rgba(0, 234, 255, .08);
}

.xp-club-centralized-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-club-centralized-copy > span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .52);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.xp-club-centralized-copy h3 {
    margin: 0;
    color: var(--club-white);
    font-size: clamp(1.55rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.12;
}

.xp-club-centralized-copy h3 strong {
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--club-pink),
            var(--club-purple),
            var(--club-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

/* Botón */

.xp-club-centralized-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 56px;
    padding: 0 25px;
    border-radius: 999px;
    color: var(--club-white);
    background:
        linear-gradient(
            90deg,
            var(--club-pink),
            var(--club-purple)
        );
    box-shadow:
        0 13px 35px rgba(255, 0, 140, .22);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.xp-club-centralized-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s ease;
}

.xp-club-centralized-button:hover {
    color: var(--club-white);
    transform: translateY(-5px);
    box-shadow:
        0 18px 45px rgba(255, 0, 140, .4);
}

.xp-club-centralized-button:hover svg {
    transform: translateX(5px);
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes clubOperationsOrbOne {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(110px, 80px, 0) scale(1.15);
    }

}

@keyframes clubOperationsOrbTwo {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-100px, -70px, 0) scale(1.12);
    }

}

@keyframes clubOperationsGrid {

    to {
        background-position: 65px 65px;
    }

}

@keyframes clubOperationsScan {

    0% {
        top: -30%;
        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    75% {
        opacity: .25;
    }

    100% {
        top: 120%;
        opacity: 0;
    }

}

@keyframes clubOperationsBeam {

    0%,
    100% {
        opacity: .03;
    }

    45%,
    55% {
        opacity: .25;
    }

}

@keyframes clubOperationsKicker {

    0%,
    100% {
        transform: scale(.75);
        opacity: .6;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

}

@keyframes clubOperationsGradient {

    to {
        background-position: 200% center;
    }

}

@keyframes clubOperationsStatus {

    0%,
    100% {
        transform: translateY(-50%) scale(.7);
        opacity: .5;
    }

    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 1;
    }

}

@keyframes clubOperationsCoreBorder {

    to {
        transform: rotate(360deg);
    }

}

@keyframes clubOperationsSpin {

    to {
        transform: rotate(360deg);
    }

}

@keyframes clubOperationsSpinReverse {

    to {
        transform: rotate(-360deg);
    }

}

@keyframes clubOperationsRingPulse {

    0%,
    100% {
        transform: scale(.94);
        opacity: .5;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }

}

@keyframes clubOperationsLive {

    0%,
    100% {
        transform: scale(.75);
        opacity: .55;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

}

@keyframes clubOperationsParticleOne {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(12px, 18px, 0);
    }

}

@keyframes clubOperationsParticleTwo {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-18px, 8px, 0);
    }

}

@keyframes clubOperationsSignal {

    from {
        left: -15px;
    }

    to {
        left: 100%;
    }

}

@keyframes clubOperationsCentralShine {

    0%,
    20% {
        left: -280px;
    }

    70%,
    100% {
        left: 120%;
    }

}

/* ==========================================
TABLET
========================================== */

@media (max-width: 1100px) {

    .xp-club-operations {
        padding: 110px 5% 105px;
    }

    .xp-club-system {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 280px)
            minmax(0, 1fr);
        gap: 25px;
    }

    .xp-club-service {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        padding: 23px 20px 22px;
    }

    .xp-club-service-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .xp-club-service-content h3 {
        font-size: 1rem;
    }

    .xp-club-service-content p {
        font-size: .8rem;
    }

    .xp-club-connectors {
        display: none;
    }

}

/* ==========================================
MÓVIL Y TABLET VERTICAL
========================================== */

@media (max-width: 850px) {

    .xp-club-operations {
        padding: 90px 20px 88px;
    }

    .xp-club-operations-heading {
        margin-bottom: 60px;
    }

    .xp-club-operations-heading h2 {
        font-size: clamp(2.45rem, 11vw, 4rem);
        letter-spacing: -2.5px;
    }

    .xp-club-operations-heading p {
        font-size: .98rem;
        line-height: 1.7;
    }

    .xp-club-system {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .xp-club-services-column {
        width: 100%;
        transform: none;
    }

    .xp-club-services-column--left {
        order: 2;
    }

    .xp-club-core {
        order: 1;
        max-width: 300px;
        margin-bottom: 15px;
    }

    .xp-club-services-column--right {
        order: 3;
    }

    .xp-club-service {
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 25px 22px;
    }

    .xp-club-service-status {
        display: none;
    }

    .xp-club-centralized {
        grid-template-columns: auto minmax(0, 1fr);
        margin-top: 55px;
    }

    .xp-club-centralized-button {
        grid-column: 1 / -1;
        width: 100%;
    }

}

/* ==========================================
MÓVIL PEQUEÑO
========================================== */

@media (max-width: 520px) {

    .xp-club-operations-kicker {
        padding: 9px 14px;
        font-size: .63rem;
        letter-spacing: 1.4px;
    }

    .xp-club-service {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        padding: 23px 18px 22px;
        border-radius: 21px;
    }

    .xp-club-service-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .xp-club-service-icon svg {
        width: 23px;
        height: 23px;
    }

    .xp-club-service-content h3 {
        font-size: 1rem;
    }

    .xp-club-service-content p {
        font-size: .82rem;
        line-height: 1.55;
    }

    .xp-club-core {
        max-width: 270px;
    }

    .xp-club-core-content {
        padding: 24px;
    }

    .xp-club-centralized {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        text-align: center;
    }

    .xp-club-centralized-icon {
        margin: 0 auto;
    }

    .xp-club-centralized-copy h3 {
        font-size: 1.65rem;
    }

}

/* ==========================================
MOVIMIENTO REDUCIDO
========================================== */

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

    .xp-club-operations *,
    .xp-club-operations *::before,
    .xp-club-operations *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a9be6eb *//* ==========================================
SECCIÓN 4 · CAMPAÑAS PARA EVENTOS
========================================== */

.xp-event-campaign {
    --event-pink: #ff008c;
    --event-magenta: #ff36c8;
    --event-purple: #8c3cff;
    --event-blue: #3278ff;
    --event-cyan: #00eaff;
    --event-green: #00f0a8;
    --event-white: #ffffff;
    --event-muted: #aaaabb;
    --event-bg: #030306;

    position: relative;
    width: 100%;
    padding: 140px 0 120px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(106, 33, 120, .18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #030306 0%,
            #07040b 48%,
            #030306 100%
        );
}

/* ==========================================
FONDO DINÁMICO
========================================== */

.xp-event-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

/* Textura */

.xp-event-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .75) 1px,
            transparent 1.5px
        );
    background-size: 48px 48px;
    animation: xpEventTexture 25s linear infinite;
}

/* Viñeta */

.xp-event-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .75),
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, .75)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .22),
            transparent 30%,
            transparent 75%,
            rgba(0, 0, 0, .72)
        );
}

/* Orbes */

.xp-event-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    opacity: .27;
    will-change: transform;
}

.xp-event-orb--pink {
    width: 680px;
    height: 680px;
    top: 25%;
    left: -340px;
    background: var(--event-pink);
    animation: xpEventOrbPink 14s ease-in-out infinite;
}

.xp-event-orb--cyan {
    width: 680px;
    height: 680px;
    top: 34%;
    right: -340px;
    background: var(--event-cyan);
    animation: xpEventOrbCyan 17s ease-in-out infinite;
}

.xp-event-orb--purple {
    width: 540px;
    height: 540px;
    bottom: -280px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--event-purple);
    opacity: .16;
    animation: xpEventOrbPurple 12s ease-in-out infinite;
}

/* Haces de luz */

.xp-event-beam {
    position: absolute;
    width: 3px;
    height: 1100px;
    top: -430px;
    opacity: 0;
    transform-origin: top;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .8),
            currentColor 15%,
            transparent 80%
        );
    filter: blur(.4px);
    box-shadow:
        0 0 15px currentColor,
        0 0 35px currentColor;
}

.xp-event-beam--one {
    left: 15%;
    color: var(--event-pink);
    transform: rotate(-27deg);
    animation: xpEventBeam 9s ease-in-out infinite;
}

.xp-event-beam--two {
    left: 50%;
    color: var(--event-purple);
    transform: rotate(3deg);
    animation: xpEventBeam 11s ease-in-out 2.5s infinite;
}

.xp-event-beam--three {
    right: 14%;
    color: var(--event-cyan);
    transform: rotate(27deg);
    animation: xpEventBeam 10s ease-in-out 5s infinite;
}

/* Flash */

.xp-event-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(255, 255, 255, .22),
            rgba(255, 0, 140, .06) 18%,
            transparent 48%
        );
    animation: xpEventFlash 10s steps(1) infinite;
}

/* Humo digital */

.xp-event-smoke {
    position: absolute;
    width: 750px;
    height: 370px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .09;
}

.xp-event-smoke--one {
    left: -270px;
    bottom: 18%;
    background: var(--event-pink);
    animation: xpEventSmokeOne 18s ease-in-out infinite;
}

.xp-event-smoke--two {
    right: -270px;
    bottom: 30%;
    background: var(--event-cyan);
    animation: xpEventSmokeTwo 21s ease-in-out infinite;
}

/* Partículas */

.xp-event-stars span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    opacity: 0;
    animation: xpEventStar 9s linear infinite;
}

.xp-event-stars span:nth-child(odd) {
    color: var(--event-pink);
}

.xp-event-stars span:nth-child(even) {
    color: var(--event-cyan);
}

.xp-event-stars span:nth-child(1) {
    left: 7%;
    top: 75%;
    animation-delay: 0s;
}

.xp-event-stars span:nth-child(2) {
    left: 18%;
    top: 86%;
    animation-delay: 1.5s;
}

.xp-event-stars span:nth-child(3) {
    left: 31%;
    top: 72%;
    animation-delay: 3.2s;
}

.xp-event-stars span:nth-child(4) {
    left: 46%;
    top: 88%;
    animation-delay: .8s;
}

.xp-event-stars span:nth-child(5) {
    left: 61%;
    top: 78%;
    animation-delay: 4.5s;
}

.xp-event-stars span:nth-child(6) {
    left: 73%;
    top: 89%;
    animation-delay: 2.5s;
}

.xp-event-stars span:nth-child(7) {
    left: 84%;
    top: 74%;
    animation-delay: 5.8s;
}

.xp-event-stars span:nth-child(8) {
    left: 93%;
    top: 85%;
    animation-delay: 3.8s;
}

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

.xp-event-shell {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ==========================================
ENCABEZADO
========================================== */

.xp-event-heading {
    width: min(940px, calc(100% - 40px));
    margin: 0 auto 65px;
    text-align: center;
}

.xp-event-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-event-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--event-pink);
    box-shadow:
        0 0 10px var(--event-pink),
        0 0 20px var(--event-pink);
    animation: xpEventKicker 1.6s ease-in-out infinite;
}

.xp-event-heading h2 {
    max-width: 900px;
    margin: 0 auto 24px;
    color: var(--event-white);
    font-size: clamp(2.9rem, 5.5vw, 5.6rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -4px;
    text-wrap: balance;
}

.xp-event-heading h2 span {
    display: block;
    margin-top: 10px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--event-pink),
            var(--event-purple),
            var(--event-cyan)
        );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: xpEventGradient 5s linear infinite;
}

.xp-event-heading p {
    max-width: 790px;
    margin: 0 auto;
    color: var(--event-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* ==========================================
MARQUESINA
========================================== */

.xp-event-marquee {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    background: rgba(255, 255, 255, .018);
}

.xp-event-marquee::before,
.xp-event-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 140px;
    pointer-events: none;
}

.xp-event-marquee::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--event-bg),
        transparent
    );
}

.xp-event-marquee::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--event-bg),
        transparent
    );
}

.xp-event-marquee-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    padding: 17px 0;
    animation: xpEventMarquee 28s linear infinite;
}

.xp-event-marquee-track span {
    color: rgba(255, 255, 255, .48);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: 2.2px;
    white-space: nowrap;
}

.xp-event-marquee-track i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--event-pink),
        var(--event-cyan)
    );
    box-shadow: 0 0 12px var(--event-pink);
}

/* ==========================================
SLIDER
========================================== */

.xp-event-showcase {
    position: relative;
    width: 100%;
    padding: 20px 0 75px;
}

.xp-event-showcase::before,
.xp-event-showcase::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 9%;
    pointer-events: none;
}

.xp-event-showcase::before {
    left: 0;
    background: linear-gradient(
        to right,
        #030306 5%,
        transparent
    );
}

.xp-event-showcase::after {
    right: 0;
    background: linear-gradient(
        to left,
        #030306 5%,
        transparent
    );
}

.xp-event-slider {
    width: 100%;
    overflow: hidden;
}

.xp-event-track {
    display: flex;
    gap: 28px;
    width: max-content;
    padding: 25px 0;
    animation: xpEventSlider 48s linear infinite;
}

.xp-event-track:hover {
    animation-play-state: paused;
}

/* Flyers */

.xp-event-poster {
    position: relative;
    flex: 0 0 310px;
    width: 310px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 27px;
    background: #101014;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateZ(0);
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.xp-event-poster:nth-child(even) {
    transform: translateY(22px);
}

.xp-event-poster:hover {
    z-index: 5;
    transform: translateY(-14px) scale(1.035);
    border-color: rgba(0, 234, 255, .75);
    box-shadow:
        0 32px 75px rgba(0, 0, 0, .58),
        0 0 38px rgba(0, 234, 255, .16);
}

.xp-event-poster:nth-child(even):hover {
    transform: translateY(8px) scale(1.035);
}

.xp-event-poster::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .98) 0%,
            rgba(0, 0, 0, .65) 30%,
            transparent 66%
        );
}

.xp-event-poster::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 140px;
    height: 620px;
    top: -170px;
    left: -220px;
    transform: rotate(26deg);
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .2),
            transparent
        );
    transition: left .9s ease;
}

.xp-event-poster:hover::after {
    left: 135%;
}

.xp-event-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .7s ease,
        filter .7s ease;
}

.xp-event-poster:hover img {
    transform: scale(1.08);
    filter: saturate(1.15) contrast(1.06);
}

.xp-event-poster-overlay {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    z-index: 4;
}

.xp-event-poster-overlay > span {
    display: block;
    margin-bottom: 7px;
    color: var(--event-cyan);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.xp-event-poster-overlay h3 {
    margin: 0 0 7px;
    color: var(--event-white);
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.1;
}

.xp-event-poster-overlay p {
    margin: 0;
    color: rgba(255, 255, 255, .63);
    font-size: .78rem;
    line-height: 1.5;
}

.xp-event-poster-number {
    position: absolute;
    top: 17px;
    right: 17px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: rgba(255, 255, 255, .72);
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: .65rem;
    font-weight: 900;
}

/* ==========================================
CAMPAÑA INTEGRAL
========================================== */

.xp-event-campaign-system {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
    gap: 70px;
    align-items: center;
    width: min(1400px, calc(100% - 80px));
    margin: 45px auto 0;
    padding: 68px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 36px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 0, 140, .055),
            rgba(140, 60, 255, .035),
            rgba(0, 234, 255, .055)
        ),
        rgba(255, 255, 255, .02);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.xp-event-campaign-label {
    display: block;
    margin-bottom: 14px;
    color: var(--event-pink);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.xp-event-campaign-copy h3 {
    max-width: 650px;
    margin: 0 0 23px;
    color: var(--event-white);
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -2.8px;
}

.xp-event-campaign-copy h3 strong {
    display: block;
    margin-top: 8px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--event-pink),
            var(--event-purple),
            var(--event-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.xp-event-campaign-copy > p {
    max-width: 610px;
    margin: 0;
    color: var(--event-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.xp-event-campaign-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.xp-event-campaign-tags span {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: rgba(255, 255, 255, .68);
    background: rgba(255, 255, 255, .035);
    font-size: .72rem;
    font-weight: 700;
}

/* ==========================================
DISPOSITIVOS
========================================== */

.xp-event-devices {
    position: relative;
    min-height: 520px;
}

.xp-event-device-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 390px;
    height: 390px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            var(--event-pink),
            var(--event-purple),
            var(--event-cyan),
            var(--event-pink)
        );
    filter: blur(100px);
    opacity: .18;
    animation: xpEventDeviceGlow 8s linear infinite;
}

/* Celular */

.xp-event-phone {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: 235px;
    aspect-ratio: 9 / 18.5;
    padding: 9px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .22);
    border-radius: 37px;
    background: #060608;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .6),
        0 0 45px rgba(140, 60, 255, .16),
        inset 0 0 0 2px rgba(255, 255, 255, .04);
    transform: translate(-50%, -50%) rotate(5deg);
    animation: xpEventPhoneFloat 5s ease-in-out infinite;
}

.xp-event-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 29px;
}

.xp-event-phone-speaker {
    position: absolute;
    top: 17px;
    left: 50%;
    z-index: 4;
    width: 68px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #030305;
}

.xp-event-phone-ui {
    position: absolute;
    right: 20px;
    bottom: 22px;
    z-index: 4;
    display: grid;
    gap: 9px;
}

.xp-event-phone-ui span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--event-white);
    box-shadow: 0 0 10px rgba(255, 255, 255, .55);
}

/* Story */

.xp-event-story-card {
    position: absolute;
    z-index: 3;
    top: 30px;
    left: 5%;
    width: 170px;
    aspect-ratio: 9 / 16;
    padding: 7px;
    border: 1px solid rgba(255, 0, 140, .4);
    border-radius: 24px;
    background: rgba(8, 6, 12, .88);
    box-shadow:
        0 25px 55px rgba(0, 0, 0, .45),
        0 0 28px rgba(255, 0, 140, .12);
    transform: rotate(-10deg);
    animation: xpEventStoryFloat 6s ease-in-out infinite;
}

.xp-event-story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.xp-event-story-label {
    position: absolute;
    top: 17px;
    left: 17px;
    z-index: 4;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--event-white);
    background: rgba(0, 0, 0, .55);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}

/* Reel */

.xp-event-reel-card,
.xp-event-ad-card {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(12, 10, 18, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .4);
}

.xp-event-reel-card {
    top: 85px;
    right: 1%;
    animation: xpEventReelFloat 5.5s ease-in-out infinite;
}

.xp-event-reel-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--event-white);
    background:
        linear-gradient(
            135deg,
            var(--event-pink),
            var(--event-purple)
        );
    box-shadow: 0 0 20px rgba(255, 0, 140, .25);
}

.xp-event-reel-card small,
.xp-event-ad-card small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .4);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.xp-event-reel-card strong,
.xp-event-ad-card strong {
    color: var(--event-white);
    font-size: .78rem;
}

/* Meta Ads */

.xp-event-ad-card {
    right: 3%;
    bottom: 55px;
    animation: xpEventAdFloat 6s ease-in-out infinite;
}

.xp-event-ad-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--event-green);
    box-shadow:
        0 0 10px var(--event-green),
        0 0 20px var(--event-green);
    animation: xpEventAdStatus 1.4s ease-in-out infinite;
}

.xp-event-ad-arrow {
    margin-left: 8px;
    color: var(--event-cyan);
    font-size: 1.2rem;
    font-weight: 900;
}

/* Anillos */

.xp-event-device-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.xp-event-device-ring--one {
    width: 430px;
    height: 430px;
    border: 1px dashed rgba(255, 255, 255, .1);
    animation: xpEventRing 22s linear infinite;
}

.xp-event-device-ring--two {
    width: 350px;
    height: 350px;
    border: 1px solid rgba(140, 60, 255, .12);
    animation: xpEventRingReverse 17s linear infinite;
}

/* ==========================================
CIERRE
========================================== */

.xp-event-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    width: min(1400px, calc(100% - 80px));
    margin: 65px auto 0;
    padding: 31px 34px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.xp-event-bottom-copy > span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .46);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.xp-event-bottom-copy h3 {
    margin: 0;
    color: var(--event-white);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 900;
    line-height: 1.08;
}

.xp-event-bottom-copy h3 strong {
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--event-pink),
            var(--event-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

/* Botón */

.xp-event-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 58px;
    padding: 0 27px;
    border-radius: 999px;
    color: var(--event-white);
    background:
        linear-gradient(
            90deg,
            var(--event-pink),
            var(--event-purple)
        );
    box-shadow:
        0 15px 38px rgba(255, 0, 140, .27);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.xp-event-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s ease;
}

.xp-event-button:hover {
    color: var(--event-white);
    transform: translateY(-5px);
    box-shadow:
        0 20px 48px rgba(255, 0, 140, .42);
}

.xp-event-button:hover svg {
    transform: translateX(5px);
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes xpEventTexture {

    to {
        background-position: 48px -48px;
    }

}

@keyframes xpEventOrbPink {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(130px, 85px, 0) scale(1.14);
    }

}

@keyframes xpEventOrbCyan {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-125px, -70px, 0) scale(1.12);
    }

}

@keyframes xpEventOrbPurple {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.24);
    }

}

@keyframes xpEventBeam {

    0%,
    12%,
    100% {
        opacity: 0;
    }

    20%,
    34% {
        opacity: .37;
    }

    40% {
        opacity: .05;
    }

}

@keyframes xpEventFlash {

    0%,
    9%,
    11%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: .5;
    }

}

@keyframes xpEventSmokeOne {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(180px, -50px, 0) scale(1.18);
    }

}

@keyframes xpEventSmokeTwo {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-170px, 45px, 0) scale(1.15);
    }

}

@keyframes xpEventStar {

    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.5);
    }

    15% {
        opacity: .8;
    }

    100% {
        opacity: 0;
        transform: translate3d(30px, -420px, 0) scale(1.8);
    }

}

@keyframes xpEventKicker {

    0%,
    100% {
        transform: scale(.7);
        opacity: .55;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

}

@keyframes xpEventGradient {

    to {
        background-position: 200% center;
    }

}

@keyframes xpEventMarquee {

    to {
        transform: translateX(-50%);
    }

}

@keyframes xpEventSlider {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 14px));
    }

}

@keyframes xpEventDeviceGlow {

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes xpEventPhoneFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(5deg);
    }

    50% {
        transform: translate(-50%, calc(-50% - 14px)) rotate(3deg);
    }

}

@keyframes xpEventStoryFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-10deg);
    }

    50% {
        transform: translateY(-17px) rotate(-7deg);
    }

}

@keyframes xpEventReelFloat {

    0%,
    100% {
        transform: translateY(0) rotate(3deg);
    }

    50% {
        transform: translateY(-14px) rotate(0deg);
    }

}

@keyframes xpEventAdFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(13px) rotate(1deg);
    }

}

@keyframes xpEventAdStatus {

    0%,
    100% {
        transform: scale(.7);
        opacity: .55;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

}

@keyframes xpEventRing {

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes xpEventRingReverse {

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }

}

/* ==========================================
TABLET
========================================== */

@media (max-width: 1050px) {

    .xp-event-campaign-system {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 52px;
    }

    .xp-event-campaign-copy {
        text-align: center;
    }

    .xp-event-campaign-copy h3,
    .xp-event-campaign-copy > p {
        margin-right: auto;
        margin-left: auto;
    }

    .xp-event-campaign-tags {
        justify-content: center;
    }

    .xp-event-devices {
        width: min(620px, 100%);
        margin: 0 auto;
    }

    .xp-event-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* ==========================================
MÓVIL
========================================== */

@media (max-width: 767px) {

    .xp-event-campaign {
        padding: 95px 0 90px;
    }

    .xp-event-heading {
        margin-bottom: 45px;
    }

    .xp-event-heading h2 {
        font-size: clamp(2.45rem, 11vw, 4rem);
        letter-spacing: -2.5px;
    }

    .xp-event-heading p {
        font-size: .98rem;
        line-height: 1.7;
    }

    .xp-event-kicker {
        padding: 9px 14px;
        font-size: .63rem;
        letter-spacing: 1.4px;
    }

    .xp-event-marquee {
        margin-bottom: 35px;
    }

    .xp-event-poster {
        flex-basis: 245px;
        width: 245px;
        border-radius: 23px;
    }

    .xp-event-track {
        gap: 18px;
        animation-duration: 40s;
    }

    .xp-event-poster:nth-child(even) {
        transform: translateY(13px);
    }

    .xp-event-poster-overlay {
        right: 17px;
        bottom: 17px;
        left: 17px;
    }

    .xp-event-poster-overlay h3 {
        font-size: 1.1rem;
    }

    .xp-event-campaign-system {
        width: calc(100% - 40px);
        margin-top: 20px;
        padding: 37px 22px;
        border-radius: 27px;
    }

    .xp-event-campaign-copy h3 {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
        letter-spacing: -2px;
    }

    .xp-event-devices {
        min-height: 430px;
        transform: scale(.88);
        margin-top: -20px;
        margin-bottom: -25px;
    }

    .xp-event-phone {
        width: 205px;
    }

    .xp-event-story-card {
        width: 138px;
        left: -5%;
    }

    .xp-event-reel-card {
        right: -7%;
    }

    .xp-event-ad-card {
        right: -5%;
        bottom: 40px;
    }

    .xp-event-device-ring--one {
        width: 360px;
        height: 360px;
    }

    .xp-event-device-ring--two {
        width: 295px;
        height: 295px;
    }

    .xp-event-bottom {
        width: calc(100% - 40px);
        margin-top: 45px;
        padding: 28px 0;
        text-align: center;
    }

    .xp-event-bottom-copy {
        width: 100%;
    }

    .xp-event-button {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

}

/* ==========================================
MÓVIL PEQUEÑO
========================================== */

@media (max-width: 480px) {

    .xp-event-poster {
        flex-basis: 220px;
        width: 220px;
    }

    .xp-event-devices {
        min-height: 390px;
        transform: scale(.76);
        width: 125%;
        margin-left: -12.5%;
    }

    .xp-event-campaign-tags span {
        font-size: .65rem;
    }

}

/* ==========================================
MOVIMIENTO REDUCIDO
========================================== */

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

    .xp-event-campaign *,
    .xp-event-campaign *::before,
    .xp-event-campaign *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-45b150c *//* ==========================================
SECCIÓN 5 · MÉTODO XPACIO
========================================== */

.xp-night-method {
    --method-pink: #ff008c;
    --method-purple: #9a42ff;
    --method-blue: #3478ff;
    --method-cyan: #00eaff;
    --method-green: #00ed8a;
    --method-orange: #ff7a24;
    --method-white: #ffffff;
    --method-muted: #a9a8b7;
    --method-dark: #030306;

    position: relative;
    width: 100%;
    padding: 135px 5% 120px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(89, 32, 114, .16),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #030306 0%,
            #07050c 50%,
            #030306 100%
        );
}

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

.xp-night-method__background {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.xp-night-method__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .7),
            transparent 16%,
            transparent 84%,
            rgba(0, 0, 0, .7)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .15),
            transparent 28%,
            transparent 72%,
            rgba(0, 0, 0, .72)
        );
}

/* Luces ambientales */

.xp-night-method__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(135px);
    opacity: .22;
    will-change: transform;
}

.xp-night-method__orb--pink {
    width: 650px;
    height: 650px;
    top: 14%;
    left: -330px;
    background: var(--method-pink);
    animation: methodOrbPink 15s ease-in-out infinite;
}

.xp-night-method__orb--blue {
    width: 690px;
    height: 690px;
    top: 20%;
    right: -350px;
    background: var(--method-cyan);
    animation: methodOrbBlue 18s ease-in-out infinite;
}

.xp-night-method__orb--purple {
    width: 550px;
    height: 550px;
    bottom: -300px;
    left: 50%;
    background: var(--method-purple);
    transform: translateX(-50%);
    opacity: .14;
    animation: methodOrbPurple 12s ease-in-out infinite;
}

/* Luces de discoteca */

.xp-night-method__spot {
    position: absolute;
    top: -360px;
    width: 3px;
    height: 950px;
    opacity: 0;
    transform-origin: top;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .8),
            currentColor 15%,
            transparent 78%
        );
    box-shadow:
        0 0 15px currentColor,
        0 0 32px currentColor;
}

.xp-night-method__spot--one {
    left: 16%;
    color: var(--method-pink);
    transform: rotate(-27deg);
    animation: methodSpot 9s ease-in-out infinite;
}

.xp-night-method__spot--two {
    left: 50%;
    color: var(--method-purple);
    transform: rotate(4deg);
    animation: methodSpot 11s ease-in-out 2.5s infinite;
}

.xp-night-method__spot--three {
    right: 15%;
    color: var(--method-cyan);
    transform: rotate(27deg);
    animation: methodSpot 10s ease-in-out 5s infinite;
}

/* Puntos */

.xp-night-method__dots {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .8) 1px,
            transparent 1.4px
        );
    background-size: 48px 48px;
    mask-image:
        linear-gradient(
            to bottom,
            #000,
            #000 55%,
            transparent 88%
        );
    animation: methodDots 24s linear infinite;
}

/* Flash */

.xp-night-method__flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 255, 255, .18),
            rgba(0, 234, 255, .05) 17%,
            transparent 47%
        );
    animation: methodFlash 10s steps(1) infinite;
}

/* Ecualizador */

.xp-night-method__equalizer {
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    height: 72px;
    opacity: .11;
}

.xp-night-method__equalizer span {
    width: 5px;
    height: var(--height);
    border-radius: 999px;
    transform-origin: bottom;
    background:
        linear-gradient(
            to top,
            var(--method-pink),
            var(--method-purple),
            var(--method-cyan)
        );
    animation:
        methodEqualizer .8s ease-in-out var(--delay) infinite alternate;
}

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

.xp-night-method__container {
    position: relative;
    z-index: 2;
    width: min(1480px, 100%);
    margin: 0 auto;
}

/* ==========================================
ENCABEZADO
========================================== */

.xp-night-method__header {
    width: min(940px, 100%);
    margin: 0 auto 85px;
    text-align: center;
}

.xp-night-method__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-night-method__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--method-pink);
    box-shadow:
        0 0 10px var(--method-pink),
        0 0 19px var(--method-pink);
    animation: methodIndicator 1.6s ease-in-out infinite;
}

.xp-night-method__header h2 {
    max-width: 920px;
    margin: 0 auto 24px;
    color: var(--method-white);
    font-size: clamp(2.8rem, 5.2vw, 5.3rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -4px;
    text-wrap: balance;
}

.xp-night-method__header h2 span {
    display: block;
    margin-top: 9px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--method-pink),
            var(--method-purple),
            var(--method-cyan)
        );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: methodGradient 5s linear infinite;
}

.xp-night-method__header p {
    max-width: 780px;
    margin: 0 auto;
    color: var(--method-muted);
    font-size: 1.06rem;
    line-height: 1.8;
}

/* ==========================================
PROCESO
========================================== */

.xp-night-method__process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    padding-top: 52px;
}

/* Línea superior */

.xp-night-method__energy {
    position: absolute;
    top: 25px;
    right: 7.5%;
    left: 7.5%;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
}

.xp-night-method__energy-base {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            var(--method-pink),
            var(--method-purple),
            var(--method-blue),
            var(--method-cyan),
            var(--method-green),
            var(--method-orange)
        );
    opacity: .55;
}

.xp-night-method__energy-runner {
    position: absolute;
    top: -3px;
    left: -70px;
    width: 70px;
    height: 8px;
    border-radius: 999px;
    background: var(--method-white);
    box-shadow:
        0 0 10px var(--method-white),
        0 0 22px var(--method-cyan);
    animation: methodEnergy 5.5s linear infinite;
}

/* ==========================================
PASOS
========================================== */

.xp-night-method__step {
    position: relative;
    display: flex;
    min-width: 0;
    color: var(--method-purple);
}

.xp-night-method__step--pink {
    color: var(--method-pink);
}

.xp-night-method__step--purple {
    color: var(--method-purple);
}

.xp-night-method__step--blue {
    color: var(--method-blue);
}

.xp-night-method__step--cyan {
    color: var(--method-cyan);
}

.xp-night-method__step--green {
    color: var(--method-green);
}

.xp-night-method__step--orange {
    color: var(--method-orange);
}

/* Número */

.xp-night-method__number {
    position: absolute;
    top: -52px;
    left: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    transform: translateX(-50%);
    border-radius: 50%;
    color: var(--method-white);
    background:
        linear-gradient(#08080d, #08080d) padding-box,
        linear-gradient(
            135deg,
            currentColor,
            rgba(255, 255, 255, .85),
            currentColor
        ) border-box;
    border: 2px solid transparent;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, .018),
        0 0 25px color-mix(
            in srgb,
            currentColor 26%,
            transparent
        );
}

.xp-night-method__number::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .28;
    animation: methodNumberPulse 2.4s ease-out infinite;
}

.xp-night-method__number span {
    font-size: .78rem;
    font-weight: 900;
}

/* Tarjeta */

.xp-night-method__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 355px;
    padding: 28px 22px 23px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .068),
            rgba(255, 255, 255, .017)
        );
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.xp-night-method__card::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -105px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: currentColor;
    filter: blur(65px);
    opacity: .1;
    transition: opacity .4s ease;
}

.xp-night-method__card::after {
    content: "";
    position: absolute;
    top: -130px;
    left: -180px;
    width: 100px;
    height: 380px;
    transform: rotate(28deg);
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .12),
            transparent
        );
    transition: left .75s ease;
}

.xp-night-method__card:hover {
    transform: translateY(-10px);
    border-color: currentColor;
    box-shadow:
        0 28px 65px rgba(0, 0, 0, .48),
        0 0 28px color-mix(
            in srgb,
            currentColor 14%,
            transparent
        );
}

.xp-night-method__card:hover::before {
    opacity: .2;
}

.xp-night-method__card:hover::after {
    left: 125%;
}

/* Icono */

.xp-night-method__icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 23px;
    border: 1px solid currentColor;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .07),
            rgba(255, 255, 255, .018)
        );
    box-shadow:
        0 0 22px color-mix(
            in srgb,
            currentColor 16%,
            transparent
        );
}

.xp-night-method__icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-night-method__label {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 8px;
    color: currentColor;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.xp-night-method__card h3 {
    position: relative;
    z-index: 2;
    min-height: 53px;
    margin: 0 0 14px;
    color: var(--method-white);
    font-size: 1.13rem;
    font-weight: 900;
    line-height: 1.2;
}

.xp-night-method__card > p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, .61);
    font-size: .84rem;
    line-height: 1.65;
}

/* Etiquetas */

.xp-night-method__tags {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
}

.xp-night-method__tags span {
    padding: 7px 10px;
    border: 1px solid color-mix(
        in srgb,
        currentColor 28%,
        transparent
    );
    border-radius: 999px;
    color: currentColor;
    background:
        color-mix(
            in srgb,
            currentColor 6%,
            transparent
        );
    font-size: .59rem;
    font-weight: 700;
}

/* ==========================================
RESULTADO FINAL
========================================== */

.xp-night-method__result {
    position: relative;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 315px;
    gap: 48px;
    align-items: center;
    margin-top: 65px;
    padding: 48px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 7% 50%,
            rgba(255, 0, 140, .1),
            transparent 32%
        ),
        radial-gradient(
            circle at 94% 50%,
            rgba(0, 234, 255, .09),
            transparent 32%
        ),
        rgba(255, 255, 255, .022);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.xp-night-method__result::before {
    content: "";
    position: absolute;
    top: -220px;
    left: -280px;
    width: 190px;
    height: 650px;
    transform: rotate(28deg);
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .08),
            transparent
        );
    animation: methodResultShine 8s ease-in-out infinite;
}

/* Visual */

.xp-night-method__result-visual {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
}

.xp-night-method__crown {
    position: relative;
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    color: var(--method-white);
    background:
        radial-gradient(
            circle,
            rgba(154, 66, 255, .16),
            rgba(5, 5, 9, .82) 65%
        );
    box-shadow:
        0 0 50px rgba(154, 66, 255, .13),
        inset 0 0 40px rgba(255, 255, 255, .025);
}

.xp-night-method__crown::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .09);
}

.xp-night-method__crown svg {
    position: relative;
    z-index: 3;
    width: 82px;
    height: 82px;
    fill: none;
    stroke: url("#methodGradient");
    stroke: var(--method-purple);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 9px var(--method-pink))
        drop-shadow(0 0 15px var(--method-purple));
    animation: methodCrownFloat 4s ease-in-out infinite;
}

.xp-night-method__crown-ring {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .11);
    animation: methodRing 18s linear infinite;
}

.xp-night-method__crown-ring:nth-child(2) {
    inset: -22px;
    border-color: rgba(0, 234, 255, .1);
    animation-direction: reverse;
    animation-duration: 23s;
}

/* Texto */

.xp-night-method__result-copy {
    position: relative;
    z-index: 2;
}

.xp-night-method__result-label {
    display: block;
    margin-bottom: 11px;
    color: rgba(255, 255, 255, .48);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.xp-night-method__result-copy h3 {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--method-white);
    font-size: clamp(2.1rem, 3.5vw, 3.7rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -2.5px;
}

.xp-night-method__result-copy h3 strong {
    display: block;
    margin-top: 7px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--method-pink),
            var(--method-purple),
            var(--method-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.xp-night-method__result-copy > p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, .61);
    font-size: .95rem;
    line-height: 1.75;
}

/* Botón */

.xp-night-method__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 55px;
    margin-top: 26px;
    padding: 0 25px;
    border-radius: 999px;
    color: var(--method-white);
    background:
        linear-gradient(
            90deg,
            var(--method-pink),
            var(--method-purple)
        );
    box-shadow:
        0 14px 34px rgba(255, 0, 140, .23);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.xp-night-method__button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s ease;
}

.xp-night-method__button:hover {
    color: var(--method-white);
    transform: translateY(-5px);
    box-shadow:
        0 19px 45px rgba(255, 0, 140, .4);
}

.xp-night-method__button:hover svg {
    transform: translateX(5px);
}

/* Beneficios */

.xp-night-method__benefits {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    padding: 8px 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 23px;
    background: rgba(3, 3, 7, .43);
}

.xp-night-method__benefit {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.xp-night-method__benefit:last-child {
    border-bottom: 0;
}

.xp-night-method__benefit > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 234, 255, .22);
    border-radius: 12px;
    color: var(--method-cyan);
    background: rgba(0, 234, 255, .045);
}

.xp-night-method__benefit svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-night-method__benefit p {
    margin: 0;
    color: rgba(255, 255, 255, .83);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes methodOrbPink {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(120px, 80px, 0) scale(1.14);
    }
}

@keyframes methodOrbBlue {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-125px, 75px, 0) scale(1.12);
    }
}

@keyframes methodOrbPurple {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.24);
    }
}

@keyframes methodSpot {
    0%,
    12%,
    100% {
        opacity: 0;
    }

    20%,
    32% {
        opacity: .34;
    }

    38% {
        opacity: .04;
    }
}

@keyframes methodDots {
    to {
        background-position: 48px -48px;
    }
}

@keyframes methodFlash {
    0%,
    9%,
    11%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: .48;
    }
}

@keyframes methodEqualizer {
    from {
        transform: scaleY(.25);
        opacity: .3;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes methodIndicator {
    0%,
    100% {
        transform: scale(.72);
        opacity: .55;
    }

    50% {
        transform: scale(1.28);
        opacity: 1;
    }
}

@keyframes methodGradient {
    to {
        background-position: 200% center;
    }
}

@keyframes methodEnergy {
    from {
        left: -70px;
    }

    to {
        left: 100%;
    }
}

@keyframes methodNumberPulse {
    0% {
        transform: scale(.78);
        opacity: .65;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes methodResultShine {
    0%,
    22% {
        left: -280px;
    }

    70%,
    100% {
        left: 120%;
    }
}

@keyframes methodCrownFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-9px) scale(1.03);
    }
}

@keyframes methodRing {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
PORTÁTILES Y TABLETS HORIZONTALES
========================================== */

@media (max-width: 1250px) {

    .xp-night-method__process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 68px 18px;
        padding-top: 52px;
    }

    .xp-night-method__energy {
        display: none;
    }

    .xp-night-method__card {
        min-height: 320px;
    }

    .xp-night-method__result {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .xp-night-method__benefits {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 8px 20px;
    }

    .xp-night-method__benefit {
        padding: 15px;
        border-right: 1px solid rgba(255, 255, 255, .075);
        border-bottom: 0;
    }

    .xp-night-method__benefit:last-child {
        border-right: 0;
    }

}

/* ==========================================
TABLET VERTICAL
========================================== */

@media (max-width: 900px) {

    .xp-night-method {
        padding: 110px 28px 100px;
    }

    .xp-night-method__header {
        margin-bottom: 75px;
    }

    .xp-night-method__process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 68px 18px;
    }

    .xp-night-method__result {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 35px;
        padding: 38px;
    }

    .xp-night-method__crown {
        width: 145px;
        height: 145px;
    }

    .xp-night-method__crown svg {
        width: 63px;
        height: 63px;
    }

    .xp-night-method__benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xp-night-method__benefit:nth-child(2) {
        border-right: 0;
    }

    .xp-night-method__benefit:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, .075);
    }

}

/* ==========================================
MÓVIL
========================================== */

@media (max-width: 650px) {

    .xp-night-method {
        padding: 92px 20px 88px;
    }

    .xp-night-method__header {
        margin-bottom: 58px;
    }

    .xp-night-method__eyebrow {
        padding: 9px 14px;
        font-size: .62rem;
        letter-spacing: 1.4px;
    }

    .xp-night-method__header h2 {
        font-size: clamp(2.35rem, 11vw, 3.7rem);
        letter-spacing: -2.4px;
    }

    .xp-night-method__header p {
        font-size: .96rem;
        line-height: 1.7;
    }

    /* Ruta vertical */

    .xp-night-method__process {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 0 0 37px;
    }

    .xp-night-method__process::before {
        content: "";
        position: absolute;
        top: 24px;
        bottom: 24px;
        left: 13px;
        width: 2px;
        border-radius: 999px;
        background:
            linear-gradient(
                to bottom,
                var(--method-pink),
                var(--method-purple),
                var(--method-blue),
                var(--method-cyan),
                var(--method-green),
                var(--method-orange)
            );
        opacity: .45;
    }

    .xp-night-method__step {
        display: block;
    }

    .xp-night-method__number {
        top: 24px;
        left: -24px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .xp-night-method__number span {
        font-size: .67rem;
    }

    .xp-night-method__card {
        min-height: 0;
        padding: 24px 20px 22px;
        border-radius: 21px;
    }

    .xp-night-method__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 18px;
        border-radius: 15px;
    }

    .xp-night-method__icon svg {
        width: 25px;
        height: 25px;
    }

    .xp-night-method__card h3 {
        min-height: 0;
        font-size: 1.08rem;
    }

    .xp-night-method__card > p {
        font-size: .86rem;
    }

    .xp-night-method__tags {
        margin-top: 17px;
        padding-top: 0;
    }

    /* Resultado final */

    .xp-night-method__result {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 52px;
        padding: 32px 23px;
        text-align: center;
    }

    .xp-night-method__crown {
        width: 135px;
        height: 135px;
    }

    .xp-night-method__result-copy h3 {
        font-size: clamp(2rem, 9.5vw, 2.9rem);
        letter-spacing: -1.7px;
    }

    .xp-night-method__result-copy > p {
        font-size: .91rem;
    }

    .xp-night-method__button {
        width: 100%;
        min-height: 58px;
        padding: 13px 20px;
        white-space: normal;
        line-height: 1.35;
    }

    .xp-night-method__benefits {
        grid-template-columns: 1fr;
        padding: 8px 18px;
        text-align: left;
    }

    .xp-night-method__benefit,
    .xp-night-method__benefit:nth-child(-n + 2) {
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .075);
    }

    .xp-night-method__benefit:last-child {
        border-bottom: 0;
    }

}

/* ==========================================
MÓVIL PEQUEÑO
========================================== */

@media (max-width: 390px) {

    .xp-night-method {
        padding-right: 15px;
        padding-left: 15px;
    }

    .xp-night-method__process {
        padding-left: 32px;
    }

    .xp-night-method__number {
        left: -21px;
        width: 38px;
        height: 38px;
    }

    .xp-night-method__card {
        padding: 22px 17px 20px;
    }

}

/* ==========================================
REDUCIR MOVIMIENTO
========================================== */

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

    .xp-night-method *,
    .xp-night-method *::before,
    .xp-night-method *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f75e13b *//* ==========================================
SECCIÓN 6 · ESTRATEGIAS PERSONALIZADAS
========================================== */

.xp-custom-strategy {
    --custom-pink: #ff008c;
    --custom-purple: #9847ff;
    --custom-blue: #3478ff;
    --custom-cyan: #00eaff;
    --custom-green: #00f0a8;
    --custom-red: #ff416c;
    --custom-white: #ffffff;
    --custom-muted: #aaaabb;
    --custom-bg: #030306;

    position: relative;
    width: 100%;
    padding: 140px 6% 120px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(95, 32, 116, .16),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #030306 0%,
            #07050c 50%,
            #030306 100%
        );
}

/* ==========================================
FONDO DINÁMICO
========================================== */

.xp-custom-strategy__background {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.xp-custom-strategy__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .72),
            transparent 17%,
            transparent 83%,
            rgba(0, 0, 0, .72)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .1),
            transparent 25%,
            transparent 75%,
            rgba(0, 0, 0, .72)
        );
}

/* Orbes */

.xp-custom-strategy__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .22;
    will-change: transform;
}

.xp-custom-strategy__orb--pink {
    width: 680px;
    height: 680px;
    top: 16%;
    left: -350px;
    background: var(--custom-pink);
    animation: customStrategyOrbPink 15s ease-in-out infinite;
}

.xp-custom-strategy__orb--cyan {
    width: 690px;
    height: 690px;
    top: 26%;
    right: -360px;
    background: var(--custom-cyan);
    animation: customStrategyOrbCyan 18s ease-in-out infinite;
}

.xp-custom-strategy__orb--purple {
    width: 540px;
    height: 540px;
    bottom: -290px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--custom-purple);
    opacity: .14;
    animation: customStrategyOrbPurple 12s ease-in-out infinite;
}

/* Haces */

.xp-custom-strategy__beam {
    position: absolute;
    top: -400px;
    width: 3px;
    height: 1050px;
    opacity: 0;
    transform-origin: top;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .8),
            currentColor,
            transparent 78%
        );
    box-shadow:
        0 0 16px currentColor,
        0 0 34px currentColor;
}

.xp-custom-strategy__beam--one {
    left: 17%;
    color: var(--custom-pink);
    transform: rotate(-27deg);
    animation: customStrategyBeam 10s ease-in-out infinite;
}

.xp-custom-strategy__beam--two {
    right: 16%;
    color: var(--custom-cyan);
    transform: rotate(27deg);
    animation: customStrategyBeam 11s ease-in-out 4s infinite;
}

/* Cuadrícula */

.xp-custom-strategy__grid {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image:
        radial-gradient(
            ellipse at center,
            #000 8%,
            transparent 78%
        );
    animation: customStrategyGrid 22s linear infinite;
}

/* Escáner */

.xp-custom-strategy__scan {
    position: absolute;
    top: -25%;
    left: -10%;
    width: 120%;
    height: 180px;
    opacity: 0;
    transform: rotate(-6deg);
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 234, 255, .09),
            transparent
        );
    animation: customStrategyScan 10s linear infinite;
}

/* Partículas */

.xp-custom-strategy__particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    opacity: 0;
    animation: customStrategyParticle 9s linear infinite;
}

.xp-custom-strategy__particles span:nth-child(odd) {
    color: var(--custom-pink);
}

.xp-custom-strategy__particles span:nth-child(even) {
    color: var(--custom-cyan);
}

.xp-custom-strategy__particles span:nth-child(1) {
    left: 10%;
    top: 84%;
    animation-delay: 0s;
}

.xp-custom-strategy__particles span:nth-child(2) {
    left: 25%;
    top: 78%;
    animation-delay: 1.8s;
}

.xp-custom-strategy__particles span:nth-child(3) {
    left: 42%;
    top: 88%;
    animation-delay: 3.4s;
}

.xp-custom-strategy__particles span:nth-child(4) {
    left: 61%;
    top: 81%;
    animation-delay: .9s;
}

.xp-custom-strategy__particles span:nth-child(5) {
    left: 78%;
    top: 87%;
    animation-delay: 4.7s;
}

.xp-custom-strategy__particles span:nth-child(6) {
    left: 91%;
    top: 76%;
    animation-delay: 2.8s;
}

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

.xp-custom-strategy__container {
    position: relative;
    z-index: 2;
    width: min(1420px, 100%);
    margin: 0 auto;
}

/* ==========================================
ENCABEZADO
========================================== */

.xp-custom-strategy__header {
    max-width: 1020px;
    margin: 0 auto 90px;
    text-align: center;
}

.xp-custom-strategy__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-custom-strategy__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--custom-pink);
    box-shadow:
        0 0 10px var(--custom-pink),
        0 0 20px var(--custom-pink);
    animation: customStrategyIndicator 1.6s ease-in-out infinite;
}

.xp-custom-strategy__header h2 {
    max-width: 980px;
    margin: 0 auto 25px;
    color: var(--custom-white);
    font-size: clamp(2.9rem, 5.3vw, 5.5rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -4px;
    text-wrap: balance;
}

.xp-custom-strategy__header h2 span {
    display: block;
    margin-top: 10px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--custom-pink),
            var(--custom-purple),
            var(--custom-cyan)
        );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: customStrategyGradient 5s linear infinite;
}

.xp-custom-strategy__header p {
    max-width: 800px;
    margin: 0 auto;
    color: var(--custom-muted);
    font-size: 1.06rem;
    line-height: 1.8;
}

/* ==========================================
COMPARACIÓN
========================================== */

.xp-custom-strategy__comparison {
    display: grid;
    grid-template-columns: minmax(0, .9fr) 95px minmax(0, 1.1fr);
    gap: 28px;
    align-items: stretch;
}

/* Tarjetas */

.xp-custom-strategy__generic,
.xp-custom-strategy__xpacio {
    position: relative;
    min-width: 0;
    padding: 38px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .065),
            rgba(255, 255, 255, .018)
        );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Genérica */

.xp-custom-strategy__generic {
    border: 1px solid rgba(255, 65, 108, .28);
}

.xp-custom-strategy__generic-noise {
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 4px,
            rgba(255, 255, 255, .2) 5px
        );
    animation: customStrategyNoise .5s steps(2) infinite;
}

/* XPACIO */

.xp-custom-strategy__xpacio {
    border: 1px solid rgba(0, 234, 255, .3);
}

.xp-custom-strategy__xpacio-glow {
    position: absolute;
    top: -190px;
    right: -140px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--custom-cyan);
    filter: blur(90px);
    opacity: .16;
}

/* Cabecera tarjetas */

.xp-custom-strategy__card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 30px;
}

.xp-custom-strategy__card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 17px;
    color: var(--custom-white);
    background: rgba(255, 255, 255, .045);
}

.xp-custom-strategy__generic .xp-custom-strategy__card-icon {
    color: var(--custom-red);
    border-color: rgba(255, 65, 108, .3);
}

.xp-custom-strategy__xpacio .xp-custom-strategy__card-icon {
    color: var(--custom-cyan);
    border-color: rgba(0, 234, 255, .3);
}

.xp-custom-strategy__card-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-custom-strategy__card-header span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .43);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.xp-custom-strategy__card-header h3 {
    margin: 0;
    color: var(--custom-white);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.15;
}

/* ==========================================
PLAN GENÉRICO
========================================== */

.xp-custom-strategy__fake-plan {
    position: relative;
    z-index: 2;
    padding: 28px;
    border: 1px solid rgba(255, 65, 108, .15);
    border-radius: 24px;
    background: rgba(5, 4, 8, .5);
}

.xp-custom-strategy__fake-plan-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.xp-custom-strategy__fake-plan-top > span {
    color: var(--custom-red);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.xp-custom-strategy__fake-plan-top strong {
    color: var(--custom-white);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: .75;
}

.xp-custom-strategy__fake-plan-top small {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, .42);
    font-size: .65rem;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
}

.xp-custom-strategy__fake-plan ul {
    display: grid;
    gap: 0;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.xp-custom-strategy__fake-plan li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
    color: rgba(255, 255, 255, .67);
    font-size: .9rem;
    line-height: 1.5;
}

.xp-custom-strategy__fake-plan li:last-child {
    border-bottom: 0;
}

.xp-custom-strategy__fake-plan li > span {
    color: var(--custom-red);
    font-weight: 900;
}

.xp-custom-strategy__generic-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 65, 108, .14);
    border-radius: 999px;
    color: rgba(255, 255, 255, .52);
    background: rgba(255, 65, 108, .04);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.xp-custom-strategy__generic-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--custom-red);
    box-shadow: 0 0 12px var(--custom-red);
    animation: customStrategyWarning 1.5s ease-in-out infinite;
}

/* ==========================================
CENTRO VS
========================================== */

.xp-custom-strategy__center {
    position: relative;
    display: grid;
    place-items: center;
}

.xp-custom-strategy__center-line {
    position: absolute;
    top: 4%;
    bottom: 4%;
    width: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--custom-red),
            var(--custom-purple),
            var(--custom-cyan),
            transparent
        );
    box-shadow:
        0 0 15px rgba(255, 0, 140, .35),
        0 0 22px rgba(0, 234, 255, .3);
}

.xp-custom-strategy__center-core {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: var(--custom-white);
    background:
        linear-gradient(#08080d, #08080d) padding-box,
        linear-gradient(
            135deg,
            var(--custom-red),
            var(--custom-purple),
            var(--custom-cyan)
        ) border-box;
    border: 3px solid transparent;
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, .02),
        0 0 32px rgba(152, 71, 255, .2);
}

.xp-custom-strategy__center-core span {
    font-size: 1rem;
    font-weight: 900;
}

.xp-custom-strategy__center-pulse {
    position: absolute;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    animation: customStrategyVsPulse 2.2s ease-out infinite;
}

/* ==========================================
CONFIGURADOR
========================================== */

.xp-custom-strategy__builder {
    position: relative;
    z-index: 2;
    padding: 28px;
    border: 1px solid rgba(0, 234, 255, .15);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(0, 234, 255, .035),
            rgba(152, 71, 255, .025)
        ),
        rgba(4, 4, 9, .55);
}

.xp-custom-strategy__builder-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.xp-custom-strategy__builder-top > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--custom-cyan);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.xp-custom-strategy__builder-top strong {
    color: var(--custom-white);
    font-size: 1.1rem;
}

.xp-custom-strategy__builder-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(0, 240, 168, .18);
    border-radius: 999px;
    color: rgba(255, 255, 255, .65);
    background: rgba(0, 240, 168, .04);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.xp-custom-strategy__builder-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--custom-green);
    box-shadow: 0 0 12px var(--custom-green);
    animation: customStrategyLive 1.4s ease-in-out infinite;
}

/* Variables */

.xp-custom-strategy__variables {
    display: grid;
    gap: 20px;
    margin-top: 25px;
}

.xp-custom-strategy__variable {
    position: relative;
}

.xp-custom-strategy__variable-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.xp-custom-strategy__variable-top > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 234, 255, .17);
    border-radius: 11px;
    color: var(--custom-cyan);
    background: rgba(0, 234, 255, .04);
}

.xp-custom-strategy__variable-top svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-custom-strategy__variable-top p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    font-weight: 700;
}

.xp-custom-strategy__bar {
    position: relative;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .065);
}

.xp-custom-strategy__bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--width);
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--custom-pink),
            var(--custom-purple),
            var(--custom-cyan)
        );
    transform-origin: left;
    animation: customStrategyBar 2.5s ease-in-out infinite alternate;
}

/* Resultado */

.xp-custom-strategy__builder-result {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 27px;
    padding: 16px;
    border: 1px solid rgba(0, 240, 168, .14);
    border-radius: 17px;
    background: rgba(0, 240, 168, .035);
}

.xp-custom-strategy__builder-result-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #04130e;
    background: var(--custom-green);
    box-shadow: 0 0 20px rgba(0, 240, 168, .22);
    font-weight: 900;
}

.xp-custom-strategy__builder-result small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .38);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.xp-custom-strategy__builder-result strong {
    color: var(--custom-white);
    font-size: .82rem;
}

/* ==========================================
VARIABLES ANALIZADAS
========================================== */

.xp-custom-strategy__analysis {
    display: grid;
    grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
    gap: 65px;
    align-items: center;
    margin-top: 85px;
    padding: 55px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(255, 0, 140, .07),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 50%,
            rgba(0, 234, 255, .065),
            transparent 36%
        ),
        rgba(255, 255, 255, .02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.xp-custom-strategy__analysis-label {
    display: block;
    margin-bottom: 12px;
    color: var(--custom-pink);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.xp-custom-strategy__analysis-copy h3 {
    margin: 0 0 18px;
    color: var(--custom-white);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2.7px;
}

.xp-custom-strategy__analysis-copy h3 strong {
    display: block;
    margin-top: 7px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--custom-pink),
            var(--custom-purple),
            var(--custom-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.xp-custom-strategy__analysis-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: .95rem;
    line-height: 1.75;
}

/* Cuadrícula */

.xp-custom-strategy__analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.xp-custom-strategy__analysis-item {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 19px;
    background: rgba(255, 255, 255, .025);
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.xp-custom-strategy__analysis-item:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 234, 255, .25);
    background: rgba(0, 234, 255, .035);
}

.xp-custom-strategy__analysis-item > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 14px;
    color: var(--custom-cyan);
    background: rgba(0, 234, 255, .045);
    border: 1px solid rgba(0, 234, 255, .15);
    font-size: .65rem;
    font-weight: 900;
}

.xp-custom-strategy__analysis-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--custom-white);
    font-size: .9rem;
}

.xp-custom-strategy__analysis-item p {
    margin: 0;
    color: rgba(255, 255, 255, .48);
    font-size: .76rem;
    line-height: 1.5;
}

/* ==========================================
CIERRE
========================================== */

.xp-custom-strategy__closing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 25px;
    align-items: center;
    margin-top: 60px;
    padding: 30px 32px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.xp-custom-strategy__closing-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(0, 234, 255, .23);
    border-radius: 19px;
    color: var(--custom-cyan);
    background: rgba(0, 234, 255, .045);
}

.xp-custom-strategy__closing-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-custom-strategy__closing-copy > span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .42);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.xp-custom-strategy__closing-copy h3 {
    margin: 0;
    color: var(--custom-white);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 900;
    line-height: 1.08;
}

.xp-custom-strategy__closing-copy h3 strong {
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--custom-pink),
            var(--custom-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

/* Botón */

.xp-custom-strategy__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 57px;
    padding: 0 27px;
    border-radius: 999px;
    color: var(--custom-white);
    background:
        linear-gradient(
            90deg,
            var(--custom-pink),
            var(--custom-purple)
        );
    box-shadow:
        0 15px 38px rgba(255, 0, 140, .25);
    font-size: .85rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.xp-custom-strategy__button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s ease;
}

.xp-custom-strategy__button:hover {
    color: var(--custom-white);
    transform: translateY(-5px);
    box-shadow:
        0 20px 48px rgba(255, 0, 140, .42);
}

.xp-custom-strategy__button:hover svg {
    transform: translateX(5px);
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes customStrategyOrbPink {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(125px, 85px, 0) scale(1.14);
    }

}

@keyframes customStrategyOrbCyan {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-125px, 70px, 0) scale(1.12);
    }

}

@keyframes customStrategyOrbPurple {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.24);
    }

}

@keyframes customStrategyBeam {

    0%,
    12%,
    100% {
        opacity: 0;
    }

    20%,
    32% {
        opacity: .34;
    }

    38% {
        opacity: .04;
    }

}

@keyframes customStrategyGrid {

    to {
        background-position: 70px 70px;
    }

}

@keyframes customStrategyScan {

    0% {
        top: -25%;
        opacity: 0;
    }

    16% {
        opacity: .5;
    }

    100% {
        top: 120%;
        opacity: 0;
    }

}

@keyframes customStrategyParticle {

    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.5);
    }

    15% {
        opacity: .7;
    }

    100% {
        opacity: 0;
        transform: translate3d(30px, -420px, 0) scale(1.8);
    }

}

@keyframes customStrategyIndicator {

    0%,
    100% {
        transform: scale(.7);
        opacity: .55;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

}

@keyframes customStrategyGradient {

    to {
        background-position: 200% center;
    }

}

@keyframes customStrategyNoise {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(5px);
    }

}

@keyframes customStrategyWarning {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }

}

@keyframes customStrategyVsPulse {

    0% {
        transform: scale(.8);
        opacity: .7;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }

}

@keyframes customStrategyLive {

    0%,
    100% {
        transform: scale(.7);
        opacity: .55;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

}

@keyframes customStrategyBar {

    from {
        transform: scaleX(.72);
        opacity: .65;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }

}

/* ==========================================
TABLET Y PORTÁTILES
========================================== */

@media (max-width: 1050px) {

    .xp-custom-strategy {
        padding: 115px 5% 105px;
    }

    .xp-custom-strategy__comparison {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .xp-custom-strategy__center {
        min-height: 90px;
    }

    .xp-custom-strategy__center-line {
        top: 50%;
        right: 7%;
        bottom: auto;
        left: 7%;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
        background:
            linear-gradient(
                90deg,
                transparent,
                var(--custom-red),
                var(--custom-purple),
                var(--custom-cyan),
                transparent
            );
    }

    .xp-custom-strategy__analysis {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .xp-custom-strategy__analysis-copy p {
        max-width: 730px;
        margin: 0 auto;
    }

}

/* ==========================================
TABLET VERTICAL
========================================== */

@media (max-width: 800px) {

    .xp-custom-strategy {
        padding: 95px 25px 90px;
    }

    .xp-custom-strategy__header {
        margin-bottom: 65px;
    }

    .xp-custom-strategy__generic,
    .xp-custom-strategy__xpacio {
        padding: 30px;
    }

    .xp-custom-strategy__analysis {
        padding: 40px 30px;
    }

    .xp-custom-strategy__analysis-grid {
        grid-template-columns: 1fr;
    }

    .xp-custom-strategy__closing {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .xp-custom-strategy__button {
        grid-column: 1 / -1;
        width: 100%;
    }

}

/* ==========================================
MÓVIL
========================================== */

@media (max-width: 600px) {

    .xp-custom-strategy {
        padding: 90px 18px 85px;
    }

    .xp-custom-strategy__eyebrow {
        padding: 9px 14px;
        font-size: .61rem;
        letter-spacing: 1.3px;
    }

    .xp-custom-strategy__header h2 {
        font-size: clamp(2.35rem, 11vw, 3.6rem);
        letter-spacing: -2.3px;
    }

    .xp-custom-strategy__header p {
        font-size: .96rem;
        line-height: 1.7;
    }

    .xp-custom-strategy__generic,
    .xp-custom-strategy__xpacio {
        padding: 23px 19px;
        border-radius: 24px;
    }

    .xp-custom-strategy__card-header {
        align-items: flex-start;
        gap: 14px;
    }

    .xp-custom-strategy__card-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        border-radius: 14px;
    }

    .xp-custom-strategy__card-icon svg {
        width: 23px;
        height: 23px;
    }

    .xp-custom-strategy__card-header h3 {
        font-size: 1.12rem;
    }

    .xp-custom-strategy__fake-plan,
    .xp-custom-strategy__builder {
        padding: 21px 17px;
        border-radius: 20px;
    }

    .xp-custom-strategy__fake-plan-top {
        align-items: flex-start;
    }

    .xp-custom-strategy__fake-plan-top strong {
        font-size: 2.7rem;
    }

    .xp-custom-strategy__fake-plan li {
        font-size: .84rem;
    }

    .xp-custom-strategy__builder-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .xp-custom-strategy__analysis {
        margin-top: 55px;
        padding: 32px 20px;
        border-radius: 25px;
    }

    .xp-custom-strategy__analysis-copy h3 {
        font-size: clamp(2.1rem, 10vw, 3rem);
        letter-spacing: -1.8px;
    }

    .xp-custom-strategy__analysis-item {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 17px;
        text-align: left;
    }

    .xp-custom-strategy__analysis-item > span {
        width: 40px;
        height: 40px;
    }

    .xp-custom-strategy__closing {
        grid-template-columns: 1fr;
        padding: 28px 0;
        text-align: center;
    }

    .xp-custom-strategy__closing-icon {
        margin: 0 auto;
    }

    .xp-custom-strategy__button {
        white-space: normal;
        line-height: 1.3;
    }

}

/* ==========================================
REDUCIR MOVIMIENTO
========================================== */

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

    .xp-custom-strategy *,
    .xp-custom-strategy *::before,
    .xp-custom-strategy *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-41d1b1a *//* ==========================================
SECCIÓN 7 · CTA FINAL
========================================== */

.xp-club-final {
    --final-pink: #ff008c;
    --final-magenta: #ff36c8;
    --final-purple: #9147ff;
    --final-blue: #3278ff;
    --final-cyan: #00eaff;
    --final-green: #00f0a8;
    --final-white: #ffffff;
    --final-muted: #aaaabb;
    --final-dark: #020204;

    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 110px 6% 70px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(87, 24, 111, .2),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020204 0%,
            #06030a 52%,
            #020204 100%
        );
}

/* ==========================================
FONDO DINÁMICO
========================================== */

.xp-club-final__background {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

/* Viñeta */

.xp-club-final__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .8),
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, .8)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .35),
            transparent 22%,
            transparent 68%,
            rgba(0, 0, 0, .85)
        );
}

/* Luces ambientales */

.xp-club-final__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .3;
    will-change: transform;
}

.xp-club-final__orb--pink {
    width: 720px;
    height: 720px;
    top: 12%;
    left: -370px;
    background: var(--final-pink);
    animation: finalOrbPink 14s ease-in-out infinite;
}

.xp-club-final__orb--cyan {
    width: 740px;
    height: 740px;
    top: 20%;
    right: -380px;
    background: var(--final-cyan);
    animation: finalOrbCyan 17s ease-in-out infinite;
}

.xp-club-final__orb--purple {
    width: 580px;
    height: 580px;
    bottom: -300px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--final-purple);
    opacity: .18;
    animation: finalOrbPurple 11s ease-in-out infinite;
}

/* Láseres */

.xp-club-final__laser {
    position: absolute;
    top: -420px;
    width: 3px;
    height: 1150px;
    opacity: 0;
    transform-origin: top;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .85),
            currentColor 14%,
            transparent 78%
        );
    box-shadow:
        0 0 16px currentColor,
        0 0 38px currentColor;
}

.xp-club-final__laser--one {
    left: 10%;
    color: var(--final-pink);
    transform: rotate(-31deg);
    animation: finalLaser 8s ease-in-out infinite;
}

.xp-club-final__laser--two {
    left: 33%;
    color: var(--final-purple);
    transform: rotate(-13deg);
    animation: finalLaser 10s ease-in-out 2s infinite;
}

.xp-club-final__laser--three {
    right: 32%;
    color: var(--final-cyan);
    transform: rotate(14deg);
    animation: finalLaser 9s ease-in-out 4s infinite;
}

.xp-club-final__laser--four {
    right: 9%;
    color: var(--final-blue);
    transform: rotate(31deg);
    animation: finalLaser 11s ease-in-out 5.5s infinite;
}

/* Flash */

.xp-club-final__flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(255, 255, 255, .24),
            rgba(145, 71, 255, .07) 20%,
            transparent 50%
        );
    animation: finalFlash 9s steps(1) infinite;
}

/* Piso en perspectiva */

.xp-club-final__floor {
    position: absolute;
    width: 170%;
    height: 650px;
    left: -35%;
    bottom: -410px;
    transform: perspective(720px) rotateX(68deg);
    transform-origin: center top;
    opacity: .22;
    background-image:
        linear-gradient(
            rgba(0, 234, 255, .28) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 0, 140, .3) 1px,
            transparent 1px
        );
    background-size: 68px 68px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .95),
            transparent 80%
        );
    animation: finalFloor 8s linear infinite;
}

/* ==========================================
PORTAL DE LUZ
========================================== */

.xp-club-final__portal {
    position: absolute;
    top: 2%;
    left: 50%;
    width: min(880px, 80vw);
    height: 80%;
    transform: translateX(-50%);
    opacity: .42;
}

.xp-club-final__portal-line {
    position: absolute;
    border: 1px solid;
    border-bottom: 0;
    border-radius: 300px 300px 0 0;
}

.xp-club-final__portal-line--one {
    inset: 5% 4% 0;
    border-color: rgba(255, 0, 140, .3);
    box-shadow:
        0 0 20px rgba(255, 0, 140, .15);
    animation: finalPortalPulse 4s ease-in-out infinite;
}

.xp-club-final__portal-line--two {
    inset: 12% 12% 0;
    border-color: rgba(145, 71, 255, .27);
    animation: finalPortalPulse 4s ease-in-out .8s infinite;
}

.xp-club-final__portal-line--three {
    inset: 19% 20% 0;
    border-color: rgba(50, 120, 255, .25);
    animation: finalPortalPulse 4s ease-in-out 1.6s infinite;
}

.xp-club-final__portal-line--four {
    inset: 26% 28% 0;
    border-color: rgba(0, 234, 255, .3);
    box-shadow:
        0 0 22px rgba(0, 234, 255, .14);
    animation: finalPortalPulse 4s ease-in-out 2.4s infinite;
}

.xp-club-final__portal-glow {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 300px;
    height: 600px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .14),
            rgba(145, 71, 255, .09),
            transparent
        );
    filter: blur(60px);
    animation: finalPortalGlow 5s ease-in-out infinite;
}

/* ==========================================
PARTÍCULAS
========================================== */

.xp-club-final__particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    opacity: 0;
    animation: finalParticle 9s linear infinite;
}

.xp-club-final__particles span:nth-child(odd) {
    color: var(--final-pink);
}

.xp-club-final__particles span:nth-child(even) {
    color: var(--final-cyan);
}

.xp-club-final__particles span:nth-child(1) {
    left: 7%;
    top: 82%;
    animation-delay: 0s;
}

.xp-club-final__particles span:nth-child(2) {
    left: 18%;
    top: 89%;
    animation-delay: 1.3s;
}

.xp-club-final__particles span:nth-child(3) {
    left: 29%;
    top: 76%;
    animation-delay: 2.8s;
}

.xp-club-final__particles span:nth-child(4) {
    left: 41%;
    top: 91%;
    animation-delay: .7s;
}

.xp-club-final__particles span:nth-child(5) {
    left: 51%;
    top: 81%;
    animation-delay: 4.1s;
}

.xp-club-final__particles span:nth-child(6) {
    left: 62%;
    top: 88%;
    animation-delay: 2s;
}

.xp-club-final__particles span:nth-child(7) {
    left: 73%;
    top: 78%;
    animation-delay: 5.3s;
}

.xp-club-final__particles span:nth-child(8) {
    left: 84%;
    top: 91%;
    animation-delay: 3.2s;
}

.xp-club-final__particles span:nth-child(9) {
    left: 92%;
    top: 75%;
    animation-delay: 6.1s;
}

.xp-club-final__particles span:nth-child(10) {
    left: 36%;
    top: 85%;
    animation-delay: 6.8s;
}

/* Ecualizador */

.xp-club-final__equalizer {
    position: absolute;
    right: 0;
    bottom: 27px;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    height: 85px;
    opacity: .12;
}

.xp-club-final__equalizer span {
    width: 6px;
    height: var(--h);
    border-radius: 999px;
    transform-origin: bottom;
    background:
        linear-gradient(
            to top,
            var(--final-pink),
            var(--final-purple),
            var(--final-cyan)
        );
    animation:
        finalEqualizer .85s ease-in-out var(--d) infinite alternate;
}

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

.xp-club-final__container {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
}

/* ==========================================
BARRA SUPERIOR
========================================== */

.xp-club-final__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
    padding: 0 8px;
}

.xp-club-final__topbar-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xp-club-final__status-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--final-green);
    box-shadow:
        0 0 11px var(--final-green),
        0 0 24px var(--final-green);
    animation: finalStatus 1.5s ease-in-out infinite;
}

.xp-club-final__topbar-status small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .38);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.xp-club-final__topbar-status strong {
    color: rgba(255, 255, 255, .78);
    font-size: .76rem;
}

.xp-club-final__topbar-brand {
    color: rgba(255, 255, 255, .35);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: 2px;
}

/* ==========================================
PANEL PRINCIPAL
========================================== */

.xp-club-final__panel {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 68px 72px 48px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 40px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, .075),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .065),
            rgba(255, 255, 255, .018)
        );
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow:
        0 45px 120px rgba(0, 0, 0, .55),
        0 0 75px rgba(145, 71, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.xp-club-final__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 0, 140, .4),
            rgba(255, 255, 255, .08) 34%,
            rgba(0, 234, 255, .4)
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.xp-club-final__panel::after {
    content: "";
    position: absolute;
    top: -190px;
    left: -260px;
    width: 160px;
    height: 720px;
    transform: rotate(28deg);
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .12),
            transparent
        );
    animation: finalPanelShine 8s ease-in-out infinite;
}

.xp-club-final__panel-glow {
    position: absolute;
    top: -250px;
    left: 50%;
    width: 560px;
    height: 420px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            var(--final-pink),
            var(--final-purple),
            var(--final-cyan),
            var(--final-pink)
        );
    filter: blur(130px);
    opacity: .17;
    animation: finalPanelGlow 9s linear infinite;
}

/* Eyebrow */

.xp-club-final__eyebrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 29px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .045);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 1.9px;
    text-transform: uppercase;
}

.xp-club-final__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--final-pink);
    box-shadow:
        0 0 10px var(--final-pink),
        0 0 21px var(--final-pink);
    animation: finalStatus 1.6s ease-in-out infinite;
}

/* Título */

.xp-club-final__panel h2 {
    position: relative;
    z-index: 2;
    max-width: 1010px;
    margin: 0 auto 27px;
    color: var(--final-white);
    font-size: clamp(3rem, 6vw, 6.3rem);
    font-weight: 900;
    line-height: .93;
    letter-spacing: -5px;
    text-wrap: balance;
}

.xp-club-final__panel h2 span {
    display: block;
    margin-top: 12px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--final-pink),
            var(--final-purple),
            var(--final-blue),
            var(--final-cyan)
        );
    background-size: 210% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: finalGradient 5s linear infinite;
}

.xp-club-final__intro {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    color: var(--final-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* ==========================================
DECLARACIÓN
========================================== */

.xp-club-final__statement {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    max-width: 850px;
    margin: 35px auto 0;
    padding: 20px 23px;
    text-align: left;
    border: 1px solid rgba(0, 234, 255, .13);
    border-radius: 22px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 0, 140, .04),
            rgba(145, 71, 255, .04),
            rgba(0, 234, 255, .05)
        );
}

.xp-club-final__statement-icon {
    display: grid;
    place-items: center;
    flex: 0 0 51px;
    width: 51px;
    height: 51px;
    border: 1px solid rgba(0, 234, 255, .25);
    border-radius: 16px;
    color: var(--final-cyan);
    background: rgba(0, 234, 255, .045);
    box-shadow: 0 0 25px rgba(0, 234, 255, .07);
}

.xp-club-final__statement-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-club-final__statement p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: .92rem;
    line-height: 1.6;
}

.xp-club-final__statement strong {
    color: var(--final-white);
}

/* ==========================================
SERVICIOS
========================================== */

.xp-club-final__services {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    max-width: 900px;
    margin: 31px auto 0;
}

.xp-club-final__services > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 999px;
    color: rgba(255, 255, 255, .67);
    background: rgba(255, 255, 255, .03);
    font-size: .68rem;
    font-weight: 700;
}

.xp-club-final__services i {
    color: var(--final-cyan);
    font-size: .57rem;
    font-style: normal;
    font-weight: 900;
}

/* ==========================================
BOTONES
========================================== */

.xp-club-final__actions {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 38px;
}

.xp-club-final__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

/* Principal */

.xp-club-final__button--primary {
    gap: 14px;
    min-height: 68px;
    padding: 8px 19px 8px 10px;
    border-radius: 22px;
    color: var(--final-white);
    background:
        linear-gradient(
            100deg,
            var(--final-pink),
            var(--final-purple)
        );
    box-shadow:
        0 18px 45px rgba(255, 0, 140, .3);
    text-align: left;
}

.xp-club-final__button-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 16px;
    color: var(--final-white);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .16);
}

.xp-club-final__button-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-club-final__button--primary > span:nth-child(2) {
    min-width: 190px;
    font-size: .88rem;
    font-weight: 900;
}

.xp-club-final__button--primary small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .65);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.xp-club-final__button-arrow {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s ease;
}

.xp-club-final__button--primary:hover {
    color: var(--final-white);
    transform: translateY(-6px);
    box-shadow:
        0 24px 58px rgba(255, 0, 140, .45);
}

.xp-club-final__button--primary:hover .xp-club-final__button-arrow {
    transform: translateX(5px);
}

/* Secundario */

.xp-club-final__button--secondary {
    gap: 10px;
    min-height: 68px;
    padding: 0 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .045);
    font-size: .79rem;
    font-weight: 800;
}

.xp-club-final__button--secondary svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s ease;
}

.xp-club-final__button--secondary:hover {
    color: var(--final-white);
    transform: translateY(-6px);
    border-color: rgba(0, 234, 255, .38);
    background: rgba(0, 234, 255, .055);
    box-shadow:
        0 18px 42px rgba(0, 234, 255, .09);
}

.xp-club-final__button--secondary:hover svg {
    transform: translateX(5px);
}

/* ==========================================
CONFIANZA
========================================== */

.xp-club-final__trust {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 48px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    text-align: left;
}

.xp-club-final__trust-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 0 25px;
    border-right: 1px solid rgba(255, 255, 255, .075);
}

.xp-club-final__trust-item:first-child {
    padding-left: 0;
}

.xp-club-final__trust-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.xp-club-final__trust-item > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 234, 255, .19);
    border-radius: 13px;
    color: var(--final-cyan);
    background: rgba(0, 234, 255, .04);
}

.xp-club-final__trust-item svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-club-final__trust-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--final-white);
    font-size: .82rem;
}

.xp-club-final__trust-item p {
    margin: 0;
    color: rgba(255, 255, 255, .47);
    font-size: .7rem;
    line-height: 1.5;
}

/* ==========================================
CIERRE
========================================== */

.xp-club-final__closing {
    margin-top: 45px;
    text-align: center;
}

.xp-club-final__closing-line {
    display: block;
    width: 120px;
    height: 2px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--final-pink),
            var(--final-cyan),
            transparent
        );
    box-shadow:
        0 0 15px rgba(255, 0, 140, .3),
        0 0 15px rgba(0, 234, 255, .3);
    animation: finalClosingLine 3s ease-in-out infinite;
}

.xp-club-final__closing p {
    margin: 0 0 5px;
    color: rgba(255, 255, 255, .4);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.xp-club-final__closing strong {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes finalOrbPink {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(140px, 90px, 0) scale(1.15);
    }

}

@keyframes finalOrbCyan {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-140px, 80px, 0) scale(1.13);
    }

}

@keyframes finalOrbPurple {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.25);
    }

}

@keyframes finalLaser {

    0%,
    12%,
    100% {
        opacity: 0;
    }

    18%,
    31% {
        opacity: .38;
    }

    37% {
        opacity: .05;
    }

}

@keyframes finalFlash {

    0%,
    9%,
    11%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: .52;
    }

}

@keyframes finalFloor {

    to {
        background-position: 0 68px, 68px 0;
    }

}

@keyframes finalPortalPulse {

    0%,
    100% {
        opacity: .3;
        transform: scale(.98);
    }

    50% {
        opacity: .78;
        transform: scale(1.015);
    }

}

@keyframes finalPortalGlow {

    0%,
    100% {
        opacity: .18;
        transform: translateX(-50%) scale(.9);
    }

    50% {
        opacity: .38;
        transform: translateX(-50%) scale(1.1);
    }

}

@keyframes finalParticle {

    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.5);
    }

    14% {
        opacity: .8;
    }

    100% {
        opacity: 0;
        transform: translate3d(32px, -460px, 0) scale(1.9);
    }

}

@keyframes finalEqualizer {

    from {
        transform: scaleY(.24);
        opacity: .3;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }

}

@keyframes finalStatus {

    0%,
    100% {
        transform: scale(.72);
        opacity: .55;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

}

@keyframes finalPanelShine {

    0%,
    21% {
        left: -260px;
    }

    70%,
    100% {
        left: 125%;
    }

}

@keyframes finalPanelGlow {

    to {
        transform: translateX(-50%) rotate(360deg);
    }

}

@keyframes finalGradient {

    to {
        background-position: 210% center;
    }

}

@keyframes finalClosingLine {

    0%,
    100% {
        width: 100px;
        opacity: .55;
    }

    50% {
        width: 190px;
        opacity: 1;
    }

}

/* ==========================================
TABLET
========================================== */

@media (max-width: 950px) {

    .xp-club-final {
        min-height: auto;
        padding: 105px 35px 75px;
    }

    .xp-club-final__panel {
        padding: 58px 45px 43px;
    }

    .xp-club-final__trust {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .xp-club-final__trust-item,
    .xp-club-final__trust-item:first-child,
    .xp-club-final__trust-item:last-child {
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .075);
    }

    .xp-club-final__trust-item:last-child {
        border-bottom: 0;
    }

}

/* ==========================================
MÓVIL
========================================== */

@media (max-width: 650px) {

    .xp-club-final {
        padding: 88px 18px 65px;
    }

    .xp-club-final__topbar {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .xp-club-final__topbar-brand {
        display: none;
    }

    .xp-club-final__panel {
        padding: 43px 20px 30px;
        border-radius: 29px;
    }

    .xp-club-final__eyebrow {
        padding: 9px 13px;
        font-size: .59rem;
        letter-spacing: 1.2px;
    }

    .xp-club-final__panel h2 {
        font-size: clamp(2.55rem, 12.5vw, 4.2rem);
        letter-spacing: -3px;
        line-height: .96;
    }

    .xp-club-final__panel h2 span {
        margin-top: 9px;
    }

    .xp-club-final__intro {
        font-size: .95rem;
        line-height: 1.7;
    }

    .xp-club-final__statement {
        align-items: flex-start;
        padding: 17px;
    }

    .xp-club-final__statement-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
    }

    .xp-club-final__statement p {
        font-size: .83rem;
    }

    .xp-club-final__services {
        justify-content: flex-start;
    }

    .xp-club-final__services > span {
        font-size: .62rem;
    }

    .xp-club-final__actions {
        flex-direction: column;
    }

    .xp-club-final__button {
        width: 100%;
    }

    .xp-club-final__button--primary {
        justify-content: flex-start;
        padding-right: 15px;
    }

    .xp-club-final__button--primary > span:nth-child(2) {
        min-width: 0;
        flex: 1;
    }

    .xp-club-final__button--secondary {
        min-height: 57px;
    }

    .xp-club-final__trust {
        margin-top: 38px;
    }

    .xp-club-final__portal {
        width: 120vw;
        opacity: .25;
    }

}

/* ==========================================
MÓVIL PEQUEÑO
========================================== */

@media (max-width: 390px) {

    .xp-club-final {
        padding-right: 14px;
        padding-left: 14px;
    }

    .xp-club-final__panel {
        padding-right: 16px;
        padding-left: 16px;
    }

    .xp-club-final__button-icon {
        width: 44px;
        height: 44px;
    }

    .xp-club-final__button--primary {
        gap: 10px;
    }

    .xp-club-final__button-arrow {
        display: none;
    }

}

/* ==========================================
REDUCIR MOVIMIENTO
========================================== */

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

    .xp-club-final *,
    .xp-club-final *::before,
    .xp-club-final *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5356dfb *//* ==========================================
SECCIÓN 8 · FAQ FINAL
========================================== */

.xp-night-faq {
    --faq-pink: #ff008c;
    --faq-purple: #9447ff;
    --faq-cyan: #00eaff;
    --faq-green: #00efa2;
    --faq-white: #ffffff;
    --faq-muted: #aaaabb;
    --faq-dark: #030306;

    position: relative;
    width: 100%;
    padding: 130px 6% 115px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(87, 32, 113, .13),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #030306 0%,
            #06040a 52%,
            #030306 100%
        );
}

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

.xp-night-faq__background {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.xp-night-faq__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .72),
            transparent 16%,
            transparent 84%,
            rgba(0, 0, 0, .72)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .1),
            transparent 28%,
            transparent 76%,
            rgba(0, 0, 0, .75)
        );
}

.xp-night-faq__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(145px);
    opacity: .19;
}

.xp-night-faq__orb--pink {
    width: 680px;
    height: 680px;
    top: 18%;
    left: -360px;
    background: var(--faq-pink);
    animation: faqOrbPink 15s ease-in-out infinite;
}

.xp-night-faq__orb--cyan {
    width: 700px;
    height: 700px;
    right: -370px;
    bottom: 5%;
    background: var(--faq-cyan);
    animation: faqOrbCyan 18s ease-in-out infinite;
}

/* Cuadrícula */

.xp-night-faq__grid {
    position: absolute;
    inset: 0;
    opacity: .065;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    mask-image:
        radial-gradient(
            ellipse at center,
            #000 10%,
            transparent 76%
        );
    animation: faqGridMove 24s linear infinite;
}

/* Onda inferior */

.xp-night-faq__wave {
    position: absolute;
    right: -10%;
    bottom: -190px;
    left: -10%;
    height: 330px;
    opacity: .16;
    border-radius: 50%;
    border-top: 1px solid rgba(0, 234, 255, .4);
    box-shadow:
        0 -20px 60px rgba(0, 234, 255, .07),
        0 -30px 90px rgba(255, 0, 140, .05);
    animation: faqWave 6s ease-in-out infinite;
}

/* Partículas */

.xp-night-faq__particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    color: var(--faq-cyan);
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    opacity: 0;
    animation: faqParticle 9s linear infinite;
}

.xp-night-faq__particles span:nth-child(odd) {
    color: var(--faq-pink);
}

.xp-night-faq__particles span:nth-child(1) {
    left: 8%;
    top: 83%;
    animation-delay: 0s;
}

.xp-night-faq__particles span:nth-child(2) {
    left: 25%;
    top: 89%;
    animation-delay: 1.7s;
}

.xp-night-faq__particles span:nth-child(3) {
    left: 43%;
    top: 79%;
    animation-delay: 3.5s;
}

.xp-night-faq__particles span:nth-child(4) {
    left: 61%;
    top: 88%;
    animation-delay: .8s;
}

.xp-night-faq__particles span:nth-child(5) {
    left: 78%;
    top: 81%;
    animation-delay: 4.8s;
}

.xp-night-faq__particles span:nth-child(6) {
    left: 92%;
    top: 89%;
    animation-delay: 2.6s;
}

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

.xp-night-faq__container {
    position: relative;
    z-index: 2;
    width: min(1380px, 100%);
    margin: 0 auto;
}

/* ==========================================
ENCABEZADO
========================================== */

.xp-night-faq__header {
    max-width: 930px;
    margin: 0 auto 80px;
    text-align: center;
}

.xp-night-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 1.9px;
    text-transform: uppercase;
}

.xp-night-faq__eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--faq-cyan);
    box-shadow:
        0 0 10px var(--faq-cyan),
        0 0 20px var(--faq-cyan);
    animation: faqStatus 1.6s ease-in-out infinite;
}

.xp-night-faq__header h2 {
    margin: 0 0 24px;
    color: var(--faq-white);
    font-size: clamp(2.8rem, 5.2vw, 5.3rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -4px;
}

.xp-night-faq__header h2 span {
    display: block;
    margin-top: 9px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--faq-pink),
            var(--faq-purple),
            var(--faq-cyan)
        );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: faqGradient 5s linear infinite;
}

.xp-night-faq__header p {
    max-width: 770px;
    margin: 0 auto;
    color: var(--faq-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ==========================================
LAYOUT
========================================== */

.xp-night-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    gap: 38px;
    align-items: start;
}

/* ==========================================
ACORDEONES
========================================== */

.xp-night-faq__questions {
    display: grid;
    gap: 13px;
}

.xp-night-faq__item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .017)
        );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    transition:
        border-color .35s ease,
        background .35s ease,
        transform .35s ease;
}

.xp-night-faq__item:hover {
    transform: translateX(5px);
    border-color: rgba(0, 234, 255, .22);
}

.xp-night-faq__item[open] {
    border-color: rgba(0, 234, 255, .35);
    background:
        linear-gradient(
            145deg,
            rgba(0, 234, 255, .045),
            rgba(148, 71, 255, .025)
        ),
        rgba(255, 255, 255, .018);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .34),
        0 0 28px rgba(0, 234, 255, .06);
}

/* Quitar marcador nativo */

.xp-night-faq__item summary {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 38px;
    gap: 15px;
    align-items: center;
    padding: 21px 23px;
    cursor: pointer;
    list-style: none;
}

.xp-night-faq__item summary::-webkit-details-marker {
    display: none;
}

.xp-night-faq__number {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(0, 234, 255, .16);
    border-radius: 14px;
    color: var(--faq-cyan);
    background: rgba(0, 234, 255, .035);
    font-size: .64rem;
    font-weight: 900;
}

.xp-night-faq__question {
    color: rgba(255, 255, 255, .88);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.4;
}

/* Botón + */

.xp-night-faq__toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

.xp-night-faq__toggle::before,
.xp-night-faq__toggle::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 2px;
    border-radius: 999px;
    background: var(--faq-white);
    transition: transform .35s ease;
}

.xp-night-faq__toggle::after {
    transform: rotate(90deg);
}

.xp-night-faq__item[open] .xp-night-faq__toggle {
    border-color: rgba(0, 234, 255, .28);
    background: rgba(0, 234, 255, .05);
}

.xp-night-faq__item[open] .xp-night-faq__toggle::after {
    transform: rotate(0deg);
}

/* Respuesta */

.xp-night-faq__answer {
    padding:
        0
        76px
        23px
        83px;
}

.xp-night-faq__answer p {
    margin: 0;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    color: rgba(255, 255, 255, .59);
    font-size: .89rem;
    line-height: 1.72;
}

/* ==========================================
PANEL DE CONTACTO
========================================== */

.xp-night-faq__contact {
    position: sticky;
    top: 30px;
    padding: 36px 32px 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 29px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(0, 234, 255, .075),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .065),
            rgba(255, 255, 255, .018)
        );
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    box-shadow:
        0 28px 75px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.xp-night-faq__contact::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 0, 140, .35),
            transparent 42%,
            rgba(0, 234, 255, .34)
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.xp-night-faq__contact-glow {
    position: absolute;
    top: -170px;
    right: -130px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: var(--faq-cyan);
    filter: blur(95px);
    opacity: .12;
}

.xp-night-faq__contact-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 28px;
}

.xp-night-faq__contact-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(0, 234, 255, .25);
    border-radius: 18px;
    color: var(--faq-cyan);
    background: rgba(0, 234, 255, .045);
    box-shadow: 0 0 24px rgba(0, 234, 255, .08);
}

.xp-night-faq__contact-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-night-faq__contact-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(0, 239, 162, .16);
    border-radius: 999px;
    color: rgba(255, 255, 255, .6);
    background: rgba(0, 239, 162, .035);
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.xp-night-faq__contact-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--faq-green);
    box-shadow: 0 0 11px var(--faq-green);
    animation: faqStatus 1.5s ease-in-out infinite;
}

.xp-night-faq__contact-label {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 9px;
    color: var(--faq-pink);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.xp-night-faq__contact h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    color: var(--faq-white);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -2px;
}

.xp-night-faq__contact h3 strong {
    display: block;
    margin-top: 6px;
    color: transparent;
    background:
        linear-gradient(
            90deg,
            var(--faq-pink),
            var(--faq-purple),
            var(--faq-cyan)
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.xp-night-faq__contact > p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, .57);
    font-size: .9rem;
    line-height: 1.72;
}

/* Puntos */

.xp-night-faq__contact-points {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    margin-top: 25px;
}

.xp-night-faq__contact-points > div {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.xp-night-faq__contact-points span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(0, 239, 162, .2);
    border-radius: 9px;
    color: var(--faq-green);
    background: rgba(0, 239, 162, .04);
    font-size: .72rem;
    font-weight: 900;
}

.xp-night-faq__contact-points p {
    margin: 0;
    color: rgba(255, 255, 255, .69);
    font-size: .78rem;
    line-height: 1.45;
}

/* Botón */

.xp-night-faq__button {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-top: 29px;
    padding: 9px 16px 9px 9px;
    border-radius: 20px;
    color: var(--faq-white);
    background:
        linear-gradient(
            100deg,
            var(--faq-pink),
            var(--faq-purple)
        );
    box-shadow:
        0 16px 40px rgba(255, 0, 140, .25);
    text-align: left;
    text-decoration: none;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.xp-night-faq__button:hover {
    color: var(--faq-white);
    transform: translateY(-6px);
    box-shadow:
        0 23px 52px rgba(255, 0, 140, .4);
}

.xp-night-faq__button-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .13);
}

.xp-night-faq__button-icon svg,
.xp-night-faq__button-arrow {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-night-faq__button > span:nth-child(2) {
    font-size: .79rem;
    font-weight: 900;
}

.xp-night-faq__button small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .62);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.xp-night-faq__button-arrow {
    width: 19px;
    height: 19px;
    transition: transform .35s ease;
}

.xp-night-faq__button:hover .xp-night-faq__button-arrow {
    transform: translateX(5px);
}

/* Respuesta humana */

.xp-night-faq__response {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
}

.xp-night-faq__response span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--faq-green);
    box-shadow: 0 0 10px var(--faq-green);
}

.xp-night-faq__response p {
    margin: 0;
    color: rgba(255, 255, 255, .4);
    font-size: .62rem;
}

/* ==========================================
FOOTER
========================================== */

.xp-night-footer {
    --footer-pink: #ff008c;
    --footer-purple: #9447ff;
    --footer-cyan: #00eaff;
    --footer-green: #00efa2;
    --footer-white: #ffffff;

    position: relative;
    overflow: hidden;
    padding: 75px 6% 28px;
    background:
        linear-gradient(
            180deg,
            #030306,
            #010102
        );
    border-top: 1px solid rgba(255, 255, 255, .075);
}

.xp-night-footer__glow {
    position: absolute;
    top: -290px;
    left: 50%;
    width: 750px;
    height: 460px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        linear-gradient(
            90deg,
            var(--footer-pink),
            var(--footer-purple),
            var(--footer-cyan)
        );
    filter: blur(145px);
    opacity: .08;
}

.xp-night-footer__container {
    position: relative;
    z-index: 2;
    width: min(1380px, 100%);
    margin: 0 auto;
}

/* Superior */

.xp-night-footer__top {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) auto minmax(280px, .75fr);
    gap: 70px;
    align-items: start;
}

.xp-night-footer__logo {
    display: inline-block;
    color: var(--footer-white);
    font-size: 2.15rem;
    font-weight: 900;
    letter-spacing: -2px;
    text-decoration: none;
}

.xp-night-footer__logo span {
    color: var(--footer-pink);
}

.xp-night-footer__brand > p {
    max-width: 390px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .46);
    font-size: .83rem;
    line-height: 1.7;
}

.xp-night-footer__specialty {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: rgba(255, 255, 255, .6);
    font-size: .68rem;
    font-weight: 700;
}

.xp-night-footer__specialty span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--footer-cyan);
    box-shadow: 0 0 11px var(--footer-cyan);
}

/* Navegación */

.xp-night-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 55px;
}

.xp-night-footer__nav > div {
    display: grid;
    gap: 12px;
}

.xp-night-footer__nav-title {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.xp-night-footer__nav a {
    color: rgba(255, 255, 255, .43);
    font-size: .75rem;
    text-decoration: none;
    transition:
        color .3s ease,
        transform .3s ease;
}

.xp-night-footer__nav a:hover {
    color: var(--footer-cyan);
    transform: translateX(4px);
}

/* CTA footer */

.xp-night-footer__cta {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 23px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 0, 140, .045),
            rgba(0, 234, 255, .035)
        ),
        rgba(255, 255, 255, .018);
}

.xp-night-footer__cta > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .38);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.xp-night-footer__cta h3 {
    margin: 0;
    color: var(--footer-white);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.15;
}

.xp-night-footer__cta a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 19px;
    color: var(--footer-cyan);
    font-size: .73rem;
    font-weight: 800;
    text-decoration: none;
}

.xp-night-footer__cta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.xp-night-footer__cta a:hover svg {
    transform: translateX(5px);
}

/* Divisor */

.xp-night-footer__divider {
    width: 100%;
    height: 1px;
    margin: 52px 0 25px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .1),
            transparent
        );
}

/* Inferior */

.xp-night-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 25px;
    align-items: center;
}

.xp-night-footer__bottom > p {
    margin: 0;
    color: rgba(255, 255, 255, .32);
    font-size: .64rem;
}

.xp-night-footer__bottom-center {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .35);
    font-size: .62rem;
}

.xp-night-footer__bottom-center span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--footer-green);
    box-shadow: 0 0 10px var(--footer-green);
}

.xp-night-footer__back {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    color: rgba(255, 255, 255, .47);
    font-size: .65rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .3s ease;
}

.xp-night-footer__back svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.xp-night-footer__back:hover {
    color: var(--footer-cyan);
}

.xp-night-footer__back:hover svg {
    transform: translateY(-4px);
}

/* ==========================================
ANIMACIONES
========================================== */

@keyframes faqOrbPink {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(125px, 80px, 0) scale(1.14);
    }
}

@keyframes faqOrbCyan {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-125px, -70px, 0) scale(1.12);
    }
}

@keyframes faqGridMove {
    to {
        background-position: 72px 72px;
    }
}

@keyframes faqWave {
    0%,
    100% {
        transform: translateY(0) scaleX(1);
    }

    50% {
        transform: translateY(-18px) scaleX(1.06);
    }
}

@keyframes faqParticle {
    0% {
        opacity: 0;
        transform: translateY(0) scale(.5);
    }

    15% {
        opacity: .7;
    }

    100% {
        opacity: 0;
        transform: translateY(-390px) scale(1.7);
    }
}

@keyframes faqStatus {
    0%,
    100% {
        transform: scale(.72);
        opacity: .55;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

@keyframes faqGradient {
    to {
        background-position: 200% center;
    }
}

/* ==========================================
TABLET
========================================== */

@media (max-width: 1000px) {

    .xp-night-faq {
        padding: 110px 5% 100px;
    }

    .xp-night-faq__layout {
        grid-template-columns: 1fr;
    }

    .xp-night-faq__contact {
        position: relative;
        top: auto;
    }

    .xp-night-footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .xp-night-footer__cta {
        grid-column: 1 / -1;
    }

    .xp-night-footer__bottom {
        grid-template-columns: 1fr auto;
    }

    .xp-night-footer__bottom-center {
        display: none;
    }

}

/* ==========================================
MÓVIL
========================================== */

@media (max-width: 650px) {

    .xp-night-faq {
        padding: 90px 18px 82px;
    }

    .xp-night-faq__header {
        margin-bottom: 55px;
    }

    .xp-night-faq__eyebrow {
        padding: 9px 14px;
        font-size: .6rem;
        letter-spacing: 1.3px;
    }

    .xp-night-faq__header h2 {
        font-size: clamp(2.4rem, 11vw, 3.7rem);
        letter-spacing: -2.4px;
    }

    .xp-night-faq__header p {
        font-size: .95rem;
        line-height: 1.7;
    }

    .xp-night-faq__item {
        border-radius: 19px;
    }

    .xp-night-faq__item summary {
        grid-template-columns: 39px minmax(0, 1fr) 34px;
        gap: 11px;
        padding: 17px 15px;
    }

    .xp-night-faq__number {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

    .xp-night-faq__question {
        font-size: .86rem;
    }

    .xp-night-faq__toggle {
        width: 34px;
        height: 34px;
    }

    .xp-night-faq__answer {
        padding:
            0
            15px
            19px
            65px;
    }

    .xp-night-faq__answer p {
        font-size: .82rem;
    }

    .xp-night-faq__contact {
        padding: 29px 21px 25px;
        border-radius: 24px;
    }

    .xp-night-faq__contact-top {
        align-items: flex-start;
    }

    .xp-night-faq__contact-status {
        font-size: .52rem;
    }

    .xp-night-faq__contact h3 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .xp-night-faq__button {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .xp-night-faq__button-arrow {
        display: none;
    }

    /* Footer */

    .xp-night-footer {
        padding: 62px 18px 25px;
    }

    .xp-night-footer__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .xp-night-footer__nav {
        gap: 28px;
    }

    .xp-night-footer__cta {
        grid-column: auto;
    }

    .xp-night-footer__bottom {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }

    .xp-night-footer__back {
        justify-self: center;
    }

}

/* ==========================================
MÓVIL PEQUEÑO
========================================== */

@media (max-width: 390px) {

    .xp-night-faq {
        padding-right: 14px;
        padding-left: 14px;
    }

    .xp-night-faq__item summary {
        grid-template-columns: 36px minmax(0, 1fr) 31px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .xp-night-faq__number {
        width: 36px;
        height: 36px;
    }

    .xp-night-faq__toggle {
        width: 31px;
        height: 31px;
    }

    .xp-night-faq__answer {
        padding-left: 59px;
    }

    .xp-night-footer__nav {
        grid-template-columns: 1fr;
    }

}

/* ==========================================
REDUCIR MOVIMIENTO
========================================== */

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

    .xp-night-faq *,
    .xp-night-faq *::before,
    .xp-night-faq *::after,
    .xp-night-footer *,
    .xp-night-footer *::before,
    .xp-night-footer *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}/* End custom CSS */