/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #7C3AED;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8B5CF6;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #7C3AED #1a1a1a;
}

.font-unbounded {
    font-family: 'Unbounded', sans-serif !important;
}

.border-gradient {
    position: relative;
}

.border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    background: linear-gradient(225deg,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.0) 100%);
    pointer-events: none;
}

/* Animated Generate Button Styles */
.btn-wrapper {
    position: relative;
    display: inline-block;
}

.btn {
    --border-radius: 9999px;
    --padding: 4px;
    --transition: 0.4s;
    --button-color: #101010;
    --highlight-color-hue: 270deg;
    user-select: none;
    display: flex;
    justify-content: center;
    background-color: var(--button-color);
    box-shadow:
        inset 0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 2px 2px rgba(255, 255, 255, 0.15),
        inset 0px 4px 4px rgba(255, 255, 255, 0.1),
        inset 0px 8px 8px rgba(255, 255, 255, 0.05),
        inset 0px 16px 16px rgba(255, 255, 255, 0.05),
        0px -1px 1px rgba(0, 0, 0, 0.02),
        0px -2px 2px rgba(0, 0, 0, 0.03),
        0px -4px 4px rgba(0, 0, 0, 0.05),
        0px -8px 8px rgba(0, 0, 0, 0.06),
        0px -16px 16px rgba(0, 0, 0, 0.08);
    border: solid 1px #ffffff22;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition:
        box-shadow var(--transition),
        border var(--transition),
        background-color var(--transition);
}

.btn-nav {
    --border-radius: 9999px;
    --padding: 4px;
    --transition: 0.4s;
    --button-color: #ffffff;
    --highlight-color-hue: 270deg;
    user-select: none;
    display: flex;
    justify-content: center;
    background-color: var(--button-color);
    box-shadow:
        0px -1px 1px rgba(0, 0, 0, 0.02),
        0px -2px 2px rgba(0, 0, 0, 0.03),
        0px -4px 4px rgba(0, 0, 0, 0.05),
        0px -8px 8px rgba(0, 0, 0, 0.06),
        0px -16px 16px rgba(0, 0, 0, 0.08);
    border: solid 1px #ffffff22;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition:
        box-shadow var(--transition),
        border var(--transition),
        background-color var(--transition);
}

.nav-cluster {
    pointer-events: none;
}

.nav-cluster>* {
    pointer-events: auto;
}

.nav-side-button {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.95), rgba(34, 34, 34, 0.95));
    color: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05),
        0 10px 24px rgba(0, 0, 0, 0.35);
    width: 160px;
    flex: 0 0 160px;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.nav-side-button:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    transform: translateY(-1px) scale(1.02);
}

.nav-side-button:active {
    transform: translateY(1px);
}

.nav-side-button--copied {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.95)) !important;
    color: #041407 !important;
    width: 160px;
}

.section-badge {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

@media (min-width: 640px) {
    .section-badge {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }
}


.btn::before {
    content: "";
    position: absolute;
    top: calc(0px - var(--padding));
    left: calc(0px - var(--padding));
    width: calc(100% + var(--padding) * 2);
    height: calc(100% + var(--padding) * 2);
    border-radius: calc(var(--border-radius) + var(--padding));
    pointer-events: none;

    z-index: -1;
    transition:
        box-shadow var(--transition),
        filter var(--transition);
    box-shadow:
        0 -8px 8px -6px #0000 inset,
        0 -16px 16px -8px #00000000 inset,
        1px 1px 1px #fff2,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(0deg,
            #fff,
            hsl(var(--highlight-color-hue), 100%, 70%),
            hsla(var(--highlight-color-hue), 100%, 70%, 50%),
            8%,
            transparent);
    background-position: 0 0;
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}


.btn-nav::before {
    content: "";
    position: absolute;
    top: calc(0px - var(--padding));
    left: calc(0px - var(--padding));
    width: calc(100% + var(--padding) * 2);
    height: calc(100% + var(--padding) * 2);
    border-radius: calc(var(--border-radius) + var(--padding));
    pointer-events: none;

    z-index: -1;
    transition:
        box-shadow var(--transition),
        filter var(--transition);

}

.btn-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(0deg,
            #fff,
            hsl(var(--highlight-color-hue), 100%, 70%),
            hsla(var(--highlight-color-hue), 100%, 70%, 50%),
            8%,
            transparent);
    background-position: 0 0;
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}

.btn-letter {
    position: relative;
    display: inline-block;
    color: #ffffff55;
    animation: letter-anim 2s ease-in-out infinite;
    transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}

@keyframes letter-anim {
    50% {
        text-shadow: 0 0 3px #ffffff88;
        color: #fff;
    }
}

.btn-svg {
    flex: 0 0 auto;
    height: 24px;
    margin-right: 0.5rem;
    fill: #e8e8e8;
    animation: flicker 2s linear infinite;
    animation-delay: 0.5s;
    filter: drop-shadow(0 0 2px #ffffff99);
    transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}

@keyframes flicker {
    50% {
        opacity: 0.3;
    }
}

.txt-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    min-width: 6.4em;
}

.txt-1,
.txt-2 {
    position: absolute;
    word-spacing: -1em;
}

.txt-1 {
    animation: appear-anim 1s ease-in-out forwards;
}

.txt-2 {
    opacity: 0;
}

@keyframes appear-anim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.btn:focus .txt-1,
.btn:focus-visible .txt-1 {
    animation: opacity-anim 0.3s ease-in-out forwards;
    animation-delay: 1s;
}

.btn:focus .txt-2,
.btn:focus-visible .txt-2 {
    animation: opacity-anim 0.3s ease-in-out reverse forwards;
    animation-delay: 1s;
}

@keyframes opacity-anim {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.btn:focus .btn-letter,
.btn:focus-visible .btn-letter {
    animation:
        focused-letter-anim 1s ease-in-out forwards,
        letter-anim 1.2s ease-in-out infinite;
    animation-delay: 0s, 1s;
}

@keyframes focused-letter-anim {

    0%,
    100% {
        filter: blur(0px);
    }

    50% {
        transform: scale(2);
        filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%));
    }
}

.btn:focus .btn-svg,
.btn:focus-visible .btn-svg {
    animation-duration: 1.2s;
    animation-delay: 0.2s;
}

.btn:focus::before,
.btn:focus-visible::before {
    box-shadow:
        0 -8px 12px -6px #fff3 inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset,
        1px 1px 1px #fff3,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn:focus::after,
.btn:focus-visible::after {
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(100%);
}



.btn:active {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
    background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}

.btn:active::before {
    box-shadow:
        0 -8px 12px -6px #fffa inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
        1px 1px 1px #fff4,
        2px 2px 2px #fff2,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn:active::after {
    opacity: 1;
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(200%);
}

.btn:active .btn-letter {
    text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 0.9);
    animation: none;
}


/* Animación láser perpetua */
@keyframes laser-sweep {
    0% {
        transform: translateX(-100%) skewX(-12deg);
    }

    100% {
        transform: translateX(100%) skewX(-12deg);
    }
}

.animate-laser-sweep {
    animation: laser-sweep 2s ease-in-out infinite;
}

/* Animación de la nave espacial */
@keyframes spaceship-float {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Animación de lanzamiento de la nave */
@keyframes spaceship-launch {
    0% {
        transform: translateX(-50%) translateY(0px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-100vh) scale(0.1);
        opacity: 0;
    }
}

.spaceship {
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 15;
    animation: spaceship-float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.7));
    display: inline-block;
}

.spaceship.launching {
    animation: spaceship-launch 2s ease-out forwards;
}

/* Animación de la nave desde arriba */
@keyframes spaceship-from-top {
    0% {
        transform: translateX(-50%) translateY(-100px);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) translateY(0px);
        opacity: 1.8;
    }
}

.animate-spaceship-from-top {
    animation: spaceship-from-top 2s ease-out forwards;
}

.spaceship img {
    width: auto;
    height: auto;
    max-width: 420px;
    max-height: 440px;
    display: block;
}

/* Responsive para la nave */
@media (max-width: 768px) {
    .spaceship img {
        max-width: 450px;
        max-height: 450px;
    }
}

@media (max-width: 480px) {
    .spaceship img {
        max-width: 350px;
        max-height: 350px;
    }
}

@media (max-width: 360px) {
    .spaceship img {
        max-width: 280px;
        max-height: 280px;
    }
}




/* Ocultar estrellas en vista móvil */
@media (max-width: 768px) {
    .star {
        display: none !important;
    }
}

/* Ocultar fotos de perfil en vista móvil */
@media (max-width: 768px) {
    .profile-photo {
        display: none !important;
    }
}



/* Reducir texto del proceso en móvil */
@media (max-width: 768px) {
    .process-title {
        font-size: 1.125rem !important;
        /* text-lg */
    }

    .process-description {
        font-size: 0.875rem !important;
        /* text-sm */
    }
}

/* Animación de parpadeo perpetuo para botones de consulta gratuita */
@keyframes perpetual-hover {

    0%,
    50% {
        border: solid 1px #ffffff22;
        box-shadow:
            inset 0px 1px 1px rgba(255, 255, 255, 0.2),
            inset 0px 2px 2px rgba(255, 255, 255, 0.15),
            inset 0px 4px 4px rgba(255, 255, 255, 0.1),
            inset 0px 8px 8px rgba(255, 255, 255, 0.05),
            inset 0px 16px 16px rgba(255, 255, 255, 0.05),
            0px -1px 1px rgba(0, 0, 0, 0.02),
            0px -2px 2px rgba(0, 0, 0, 0.03),
            0px -4px 4px rgba(0, 0, 0, 0.05),
            0px -8px 8px rgba(0, 0, 0, 0.06),
            0px -16px 16px rgba(0, 0, 0, 0.08);
    }

    12.5%,
    37.5%,
    62.5%,
    87.5% {
        border: solid 1px hsla(270deg, 100%, 80%, 0.2);
        box-shadow:
            inset 0px 1px 1px rgba(255, 255, 255, 0.3),
            inset 0px 2px 2px rgba(255, 255, 255, 0.25),
            inset 0px 4px 4px rgba(255, 255, 255, 0.2),
            inset 0px 8px 8px rgba(255, 255, 255, 0.15),
            inset 0px 16px 16px rgba(255, 255, 255, 0.1),
            0 0 10px rgba(124, 58, 237, 0.2),
            0 0 20px rgba(124, 58, 237, 0.1),
            0px -1px 1px rgba(0, 0, 0, 0.02),
            0px -2px 2px rgba(0, 0, 0, 0.03),
            0px -4px 4px rgba(0, 0, 0, 0.05),
            0px -8px 8px rgba(0, 0, 0, 0.06),
            0px -16px 16px rgba(0, 0, 0, 0.08);
    }

    25%,
    75% {
        border: solid 1px hsla(270deg, 100%, 80%, 0.4);
        box-shadow:
            inset 0px 1px 1px rgba(255, 255, 255, 0.4),
            inset 0px 2px 2px rgba(255, 255, 255, 0.35),
            inset 0px 4px 4px rgba(255, 255, 255, 0.3),
            inset 0px 8px 8px rgba(255, 255, 255, 0.25),
            inset 0px 16px 16px rgba(255, 255, 255, 0.2),
            0 0 20px rgba(124, 58, 237, 0.3),
            0 0 40px rgba(124, 58, 237, 0.1),
            0px -1px 1px rgba(0, 0, 0, 0.02),
            0px -2px 2px rgba(0, 0, 0, 0.03),
            0px -4px 4px rgba(0, 0, 0, 0.05),
            0px -8px 8px rgba(0, 0, 0, 0.06),
            0px -16px 16px rgba(0, 0, 0, 0.08);
    }
}

@keyframes perpetual-hover-before {

    0%,
    50% {
        box-shadow:
            0 -8px 8px -6px #0000 inset,
            0 -16px 16px -8px #00000000 inset,
            1px 1px 1px #fff2,
            2px 2px 2px #fff1,
            -1px -1px 1px #0002,
            -2px -2px 2px #0001;
    }

    12.5%,
    37.5%,
    62.5%,
    87.5% {
        box-shadow:
            0 -8px 8px -6px #fff4 inset,
            0 -16px 16px -8px hsla(270deg, 100%, 70%, 0.15) inset,
            1px 1px 1px #fff2,
            2px 2px 2px #fff1,
            -1px -1px 1px #0002,
            -2px -2px 2px #0001;
    }

    25%,
    75% {
        box-shadow:
            0 -8px 8px -6px #fffa inset,
            0 -16px 16px -8px hsla(270deg, 100%, 70%, 0.3) inset,
            1px 1px 1px #fff2,
            2px 2px 2px #fff1,
            -1px -1px 1px #0002,
            -2px -2px 2px #0001;
    }
}

@keyframes perpetual-hover-after {

    0%,
    50% {
        opacity: 0;
    }

    12.5%,
    37.5%,
    62.5%,
    87.5% {
        opacity: 0.5;
        -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
        mask-image: linear-gradient(0deg, #fff, transparent);
    }

    25%,
    75% {
        opacity: 1;
        -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
        mask-image: linear-gradient(0deg, #fff, transparent);
    }
}

@keyframes perpetual-hover-svg {

    0%,
    50% {
        fill: #e8e8e8;
        filter: drop-shadow(0 0 2px #ffffff99);
    }

    12.5%,
    37.5%,
    62.5%,
    87.5% {
        fill: #f0f0f0;
        filter:
            drop-shadow(0 0 2px #ffffff99) drop-shadow(0 0 1px hsl(270deg, 100%, 70%));
    }

    25%,
    75% {
        fill: #fff;
        filter:
            drop-shadow(0 0 3px hsl(270deg, 100%, 70%)) drop-shadow(0 -4px 6px #0009);
    }
}

/* Aplicar la animación a los botones de consulta gratuita */
.btn-consulta-gratuita {
    animation: perpetual-hover 3s ease-in-out infinite;
}

.btn-consulta-gratuita::before {
    animation: perpetual-hover-before 3s ease-in-out infinite;
}

.btn-consulta-gratuita::after {
    animation: perpetual-hover-after 3s ease-in-out infinite;
}

.btn-consulta-gratuita .btn-svg {
    animation: perpetual-hover-svg 3s ease-in-out infinite;
}

/* Estado hover para botón de consulta gratuita - fondo blanco y texto negro */
.btn-consulta-gratuita:hover {
    background-color: white !important;
    color: black;
}

.btn-consulta-gratuita:hover .txt-wrapper span {
    color: black;
}

.btn-consulta-gratuita:hover .btn-svg {
    fill: black;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    animation: none;
}

.btn-consulta-gratuita:hover::before {
    animation: none;
}

.btn-consulta-gratuita:hover::after {
    animation: none;
}

/* Fix para franja gris en móvil al hacer scroll */
html {
    height: 100%;
    height: -webkit-fill-available;
    background: radial-gradient(circle at center, #0d0d0d 0%, #1a1a1a 100%);
}

body {
    min-height: 100%;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(circle at center, #0d0d0d 0%, #1a1a1a 100%);
}

/* Fondo: Dashed Top Fade Grid */
.dashed-grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 130);
    min-height: 130vh;
    min-height: 130dvh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        linear-gradient(to right, #e7e5e4 1px, transparent 1px),
        linear-gradient(to bottom, #e7e5e4 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 0 0;
    -webkit-mask-image:
        repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px),
        repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px),
        radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
    mask-image:
        repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px),
        repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px),
        radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
    /* Intersección de máscaras para efecto de dashed */
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Fondo: Degradado negro desde la base hacia el centro */
.bottom-fade-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 130);
    min-height: 130vh;
    min-height: 130dvh;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.6) 15%,
            rgba(0, 0, 0, 0.3) 30%,
            rgba(0, 0, 0, 0.0) 50%);
}

/* Ajuste de posición de CONVERSIONES en móvil */
@media (max-width: 640px) {
    .conversiones-mobile {
        transform: translateX(-8px);
    }

    .nav-cluster {
        gap: 0.5rem;
    }

    .nav-side-button {
        width: 100px;
        flex: 0 0 100px;
        font-size: 0.58rem;
        padding: 0.28rem 0.55rem;
        gap: 0.4rem;
    }

    .nav-side-button--copied {
        width: 100px;
    }

    /* Eliminar sombra del nav en móvil */
    .btn-nav {
        box-shadow: none !important;
        transition: none !important;
    }

    .btn-nav::before,
    .btn-nav::after {
        transition: none !important;
    }

    /* CTA blanco con letras negras en móvil - manteniendo efectos */
    .btn-consulta-gratuita {
        background-color: white !important;
        color: black;
        animation: none !important;
        transition: none !important;
    }

    .btn-consulta-gratuita::before {
        animation: none !important;
        transition: none !important;
    }

    .btn-consulta-gratuita::after {
        animation: none !important;
        transition: none !important;
    }

    .btn-consulta-gratuita .txt-wrapper span {
        color: black !important;
    }

    .btn-consulta-gratuita .btn-svg {
        fill: black;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
        animation: none !important;
    }

    /* Eliminar todos los efectos hover del CTA en móvil */
    .btn-consulta-gratuita:hover {
        background-color: white !important;
        color: black !important;
    }

    .btn-consulta-gratuita:hover .txt-wrapper span {
        color: black !important;
    }

    .btn-consulta-gratuita:hover .btn-svg {
        fill: black !important;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)) !important;
        animation: none !important;
    }

    .btn-consulta-gratuita:hover::before {
        animation: none !important;
    }

    .btn-consulta-gratuita:hover::after {
        animation: none !important;
    }

    /* Eliminar animaciones parpadeantes del nav si las tiene */
    .btn-nav {
        animation: none !important;
    }

    .btn-nav::before {
        animation: none !important;
    }

    .btn-nav::after {
        animation: none !important;
    }
}

/* Hero: contenedor responsivo para video vertical */
.hero-video-wrapper {
    position: relative;
    aspect-ratio: 1080 / 1450;
    width: min(45%, 900px);
    max-width: 450px;
    height: auto;
    overflow: visible;
    box-shadow:
        0 20px 60px rgba(124, 58, 237, 0.8),
        0 50px 120px rgba(124, 58, 237, 0.65),
        0 90px 200px rgba(124, 58, 237, 0.5);
}

.hero-video-wrapper::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    height: 22px;
    background: linear-gradient(to bottom,
            rgba(124, 58, 237, 0.9),
            rgba(124, 58, 237, 0));
    border-top-left-radius: calc(1.5rem + 4px);
    border-top-right-radius: calc(1.5rem + 4px);
    pointer-events: none;
    z-index: 1;
}

.hero-video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    z-index: 2;
}

.hero-video-badge {
    position: absolute;
    left: 50%;
    z-index: 5;
    pointer-events: none;
}

.hero-video-badge--top {
    top: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.35);
}

.hero-video-badge--bottom {
    bottom: 0;
    transform: translate(-50%, 50%);
}

.hero-video-wrapper--desktop {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    border-radius: 2rem;
    overflow: visible;
    background: #050505;
    border: 4px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(124, 58, 237, 0.75);
}

.hero-video-wrapper--desktop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 10, 18, 0.35) 0%,
            rgba(8, 8, 18, 0.55) 100%);
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}

.hero-video-wrapper--desktop .hero-video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    z-index: 0;
}

.hero-video-wrapper--desktop .hero-video-frame iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video-wrapper--desktop .hero-video-badge {
    z-index: 4;
    pointer-events: auto;
}

.hero-video-wrapper--desktop .hero-video-badge--top {
    top: 0;
    transform: translate(-50%, calc(-50% - 8px));
    z-index: 6;
}

.hero-video-wrapper--desktop .hero-video-badge--bottom {
    bottom: 0;
    transform: translate(-50%, calc(50% + 8px));
    z-index: 6;
}

.hero-desktop {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.hero-desktop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.hero-title {
    font-size: clamp(2rem, 6.5vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.hero-title span {
    line-height: 1.05;
}

.hero-subtitle {
    font-size: clamp(1.05rem, 2.5vw, 1.75rem);
    line-height: 1.5;
}

.hero-desktop-text {
    text-align: center;
}

.hero-desktop-text .hero-title {
    margin-left: auto;
    margin-right: auto;
}

.hero-desktop-text .hero-subtitle {
    max-width: 880px;
    color: rgba(255, 255, 255, 0.9);
}

/* Modal de confirmación WhatsApp */
.whatsapp-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.whatsapp-dialog.hidden {
    opacity: 0;
    pointer-events: none;
}

.whatsapp-dialog-content {
    background: linear-gradient(135deg, #1D1D1D 0%, #2D2D2D 100%);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    max-width: 320px;
    width: 90%;
    animation: dialogFadeIn 0.3s ease-out;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.whatsapp-dialog-icon {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.whatsapp-dialog-icon svg {
    color: #25D366;
    filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.4));
}

.whatsapp-dialog-message {
    margin-top: 0.5rem;
}

.whatsapp-dialog-text {
    color: white;
    font-family: 'Unbounded', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Animación de puntos suspensivos */
.whatsapp-dialog-text::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60%,
    100% {
        content: '...';
    }
}

/* Animación radial de columnas (Column Reveal) */
@keyframes columnReveal {
    0% {
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }
    100% {
        clip-path: inset(0 0 0% 0);
        opacity: 1;
    }
}

.col-anim {
    animation: columnReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: clip-path;
    opacity: 0;
}

/* Delays escalonados para las columnas */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}

.delay-7 {
    animation-delay: 0.7s;
}