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

::-webkit-scrollbar-track {
    background: #fafafa;
}

::-webkit-scrollbar-thumb {
    background: #3B82F6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #60A5FA;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #3B82F6 #fafafa;
}

/* Color de selección de texto */
::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #0f172a;
}

::-moz-selection {
    background: rgba(59, 130, 246, 0.35);
    color: #0f172a;
}

.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: none;
    border: solid 1px #ffffff22;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.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);
}

/* Efectos hover para el botón del nav */
.btn-nav:hover {
    transform: scale(1.05);
    box-shadow: none !important;
    background-color: #f8f8f8;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-nav:hover img {
    transform: rotate(5deg) scale(1.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-nav:hover span {
    transform: translateX(2px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-nav img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-nav span {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.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.btn-consulta-gratuita {
    background-color: #101010 !important;
    color: white !important;
    animation: perpetual-hover 3s ease-in-out infinite;
    box-shadow: none !important;
}

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

.btn.btn-consulta-gratuita .txt-wrapper span {
    color: white !important;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-consulta-gratuita::before {
    animation: perpetual-hover-before 3s ease-in-out infinite;
    box-shadow: none !important;
}

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

.btn.btn-consulta-gratuita .btn-svg {
    fill: #e8e8e8 !important;
    filter: drop-shadow(0 0 2px #ffffff99);
    animation: perpetual-hover-svg 3s ease-in-out infinite;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado hover para botón de consulta gratuita - fondo blanco y texto negro */
.btn.btn-consulta-gratuita {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-consulta-gratuita:hover {
    background-color: white !important;
    color: black !important;
    transform: scale(1.05);
    box-shadow: none !important;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn.btn-consulta-gratuita:hover .txt-wrapper span {
    color: black !important;
    transform: translateX(2px);
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-consulta-gratuita:hover .btn-svg {
    fill: black !important;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    animation: none;
    transform: rotate(5deg) scale(1.1);
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn.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: #fafafa;
}

body {
    min-height: 100%;
    min-height: -webkit-fill-available;
    min-height: 100vh;
    min-height: 100dvh;
    background: #fafafa;
}

/* 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.3;
    background-image:
        linear-gradient(to right, #1a1a1a 1px, transparent 1px),
        linear-gradient(to bottom, #1a1a1a 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 sutil 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.05) 0%,
            rgba(0, 0, 0, 0.03) 15%,
            rgba(0, 0, 0, 0.01) 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(0);
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Hero en móvil */
    #hero {
        padding-top: 7rem;
    }

    /* Alineación a la izquierda del título del hero en móvil */
    .hero-desktop-text {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .hero-title {
        padding: 0;
        font-size: clamp(2.25rem, 8vw, 3rem);
        word-break: normal;
        overflow-wrap: break-word;
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .hero-title span {
        display: block;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        word-break: normal;
        overflow-wrap: break-word;
        white-space: normal;
        width: 100%;
    }

    /* Prevenir que se rompa la palabra "emprendedores" */
    .hero-title span span:last-child {
        white-space: nowrap;
    }

    .hero-desktop-text {
        padding: 0;
    }

    .hero-subtitle {
        padding: 0 0.5rem;
        font-size: clamp(0.95rem, 4vw, 1.25rem);
    }
}

.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.01em;
    word-break: normal;
    overflow-wrap: break-word;
}

.hero-title span {
    line-height: 1.1;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.hero-title span span {
    display: inline;
}

@media (min-width: 640px) {
    .hero-title {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        min-width: 0;
    }

    .hero-title span {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        display: block;
        width: 100%;
        text-align: center;
        overflow: visible;
    }

    .hero-title span span {
        white-space: nowrap;
        display: inline;
    }
}

/* Ancho máximo del hero restaurado */
.hero-desktop-content {
    max-width: 1200px !important;
}

@media (min-width: 1024px) {
    .hero-desktop-content {
        max-width: 1400px !important;
    }

    .hero-title {
        font-size: clamp(3rem, 7vw, 6rem);
    }
}

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

.hero-desktop-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

@media (min-width: 1024px) {
    .hero-desktop-text {
        overflow-x: visible;
    }
}

.hero-desktop-text .hero-title {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (max-width: 640px) {
    .hero-desktop-text .hero-title {
        margin-left: 0 !important;
        margin-right: auto !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
}

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

@media (max-width: 640px) {
    .hero-desktop-text .hero-title span {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

.hero-desktop-text .hero-subtitle {
    max-width: 1200px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* 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;
}

/* Frase lateral sticky */
#sticky-left-rail {
    position: fixed;
    left: 1.5rem;
    top: 2.5rem;
    width: 300px;
    z-index: 45;
    pointer-events: none;
    margin-top: 3rem;
}

.left-sticky-card {
    background: linear-gradient(135deg, #3B82F6, #2563eb);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    padding: 1.75rem 2rem;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: auto;
}

.left-sticky-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.left-sticky-label {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.35rem;
}

.left-sticky-text {
    font-family: 'Unbounded', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #f8fafc;
}

/* Tarjeta de contacto sticky */
.left-sticky-contact-card {
    margin-top: 1rem;
}

.left-sticky-contact-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.left-sticky-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #f8fafc;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.left-sticky-contact-item:hover {
    opacity: 0.9;
    transform: translateX(4px);
}

.left-sticky-contact-item svg {
    flex-shrink: 0;
}

.left-sticky-contact-text {
    font-family: 'Unbounded', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f8fafc;
}

/* Tarjeta de estadísticas sticky */
.left-sticky-stats-card {
    margin-top: 1rem;
}

.left-sticky-stats-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.left-sticky-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.left-sticky-stat-value {
    font-family: 'Unbounded', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.left-sticky-stat-label {
    font-family: 'Unbounded', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

/* Ocultar labels del menú lateral en pantallas menores de 1600px */
.nav-label-desktop {
    display: none;
}

@media (min-width: 1600px) {
    .nav-label-desktop {
        display: block;
    }
}

/* Carrusel de casos de estudio */
#casos-carousel {
    display: flex;
    width: 100%;
}

#casos-carousel>div {
    flex-shrink: 0;
    width: 100%;
    max-height: 750px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#casos-carousel img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 750px;
    object-fit: contain;
}

.casos-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.casos-indicator.active {
    background-color: #ffffff !important;
    width: 1rem !important;
}

/* Segundo carrusel de casos de estudio */
#casos2-carousel {
    display: flex;
    width: 100%;
}

#casos2-carousel>div {
    flex-shrink: 0;
    width: 100%;
    max-height: 750px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#casos2-carousel img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 750px;
    object-fit: contain;
}

.casos2-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.casos2-indicator.active {
    background-color: #ffffff !important;
    width: 1rem !important;
}

/* Tarjetas del hero más compactas */
#hero .grid>div.rounded-xl {
    padding: 0.75rem 1rem !important;
}

@media (min-width: 1024px) {
    #hero .grid>div.rounded-xl {
        padding: 0.95rem 1.15rem !important;
    }
}

@media (max-width: 1023px) {
    #sticky-left-rail {
        display: none !important;
    }
}

/* Menú lateral de navegación */
#side-nav {
    pointer-events: auto;
}

.nav-dot {
    cursor: pointer;
    position: relative;
}

.nav-dot.active {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
    transform: scale(1.25);
}

.nav-dot.active .nav-label {
    opacity: 1 !important;
}

.nav-dot:hover {
    transform: scale(1.25);
}

.nav-dot:hover .nav-label {
    opacity: 1 !important;
}

/* Ocultar menú lateral en móvil */
@media (max-width: 1023px) {
    #side-nav {
        display: none !important;
    }
}

/* Opacidad al 100% para las tarjetas de condiciones salariales */
#condiciones-laborales .rounded-2xl {
    opacity: 1 !important;
}

#condiciones-laborales .bg-white {
    opacity: 1 !important;
}

/* Ancho máximo de todas las secciones restaurado a valores estándar de Tailwind */
section .max-w-7xl,
section.max-w-7xl,
.max-w-7xl {
    max-width: 1280px !important;
}

section .max-w-6xl,
section.max-w-6xl,
.max-w-6xl {
    max-width: 1152px !important;
}

section .max-w-5xl,
section.max-w-5xl,
.max-w-5xl {
    max-width: 1024px !important;
}

section .max-w-3xl,
section.max-w-3xl,
.max-w-3xl {
    max-width: 768px !important;
}

section .max-w-2xl,
section.max-w-2xl,
.max-w-2xl {
    max-width: 672px !important;
}

/* Galería Masonry */
.masonry-gallery {
    column-count: 1;
    column-gap: 2rem;
    width: 100%;
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 2rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
}

.masonry-item iframe {
    width: 100%;
    display: block;
}

/* 2 columnas desde tablets en adelante */
@media (min-width: 768px) {
    .masonry-gallery {
        column-count: 2;
        column-gap: 2rem;
    }
}

/* Estilos para el menú hamburguesa móvil */
.mobile-nav-item.active {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.mobile-nav-item.active span:first-child {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

.mobile-nav-item.active span:last-child {
    color: #3B82F6 !important;
    font-weight: 600;
}