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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #3B82F6;
}

/* 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-nav {
    --border-radius: 0.75rem;
    --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--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-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);
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

@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%));
    }
}


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

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

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

.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 */

/* Ocultar fotos de perfil en vista móvil */


/* Reducir texto del proceso en móvil */

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

/* Estado hover para botón de consulta gratuita - fondo blanco y texto negro */

/* 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) {

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

    /* Reducir tamaño del h1 en móvil */
    .hero-title-main {
        font-size: clamp(1.75rem, 5vw + 1vh, 2.5rem) !important;
    }

    /* Añadir padding bottom al botón en móvil */
    .hero-cta-primary {
        padding-bottom: 1.25rem;
    }

    /* Alineación a la izquierda del título del hero en móvil */

    /* Prevenir que se rompa la palabra "emprendedores" */
}

.nav-cluster {
    gap: 0.5rem;
}

.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 */

/* Eliminar todos los efectos hover del CTA en móvil */

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

/* Ancho máximo del hero restaurado */

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

/* Delays escalonados para las columnas */

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


/* Carrusel de casos de estudio */

/* Segundo carrusel de casos de estudio */

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


/* Opacidad al 100% para las tarjetas de condiciones salariales */

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

/* 2 columnas desde tablets en adelante */

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

/* Hero Split Layout Styles */
.hero-split-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 2rem);
    overflow-x: hidden;
}

@media (min-width: 1024px) {
    .hero-split-container {
        grid-template-columns: 1fr;
        gap: clamp(3rem, 6vw, 5rem);
        align-items: center;
    }
}

.hero-content-left {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    text-align: center;
    align-items: center;
}

/* Pegatina del hero */
.hero-sticker {
    display: inline-block;
    margin-bottom: 1rem;
}

.hero-sticker-text {
    display: inline-block;
    background: linear-gradient(135deg, #FCD34D 0%, #FBBF24 50%, #F59E0B 100%);
    color: #1F2937;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.8rem, 1.5vw, 1.2rem);
    border-radius: 8px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
    position: relative;
}

.hero-sticker-text::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    border-radius: 8px;
    z-index: -1;
}

/* Badge cuadrado para beneficios */
.beneficios-badge-text {
    border-radius: 1rem !important;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
    padding: clamp(1.2rem, 1.8vw, 1.5rem) clamp(1.5rem, 2.2vw, 2rem) !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    text-align: left !important;
    white-space: normal !important;
}

.beneficios-badge-text::before {
    border-radius: 1rem !important;
}


.hero-eyebrow {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(107, 114, 128, 0.8);
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
}

.hero-title-main {
    font-size: clamp(2.75rem, 6vw + 2.5vh, 4.25rem);
    line-height: 1.1;
    font-weight: 600;
    color: #111827;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: -0.02em;
}

.hero-subheadline {
    font-size: clamp(1rem, 1.5vw + 0.5vh, 1.25rem);
    line-height: 1.6;
    color: #4b5563;
    font-family: 'Unbounded', sans-serif;
    max-width: 90%;
}

.hero-proof-line {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    line-height: 1.5;
    color: #6b7280;
    font-family: 'Unbounded', sans-serif;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.hero-cta-primary,
.hero-cta-secondary {
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    font-size: clamp(0.875rem, 1vw, 1rem);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-cta-primary {
    background: #3B82F6;
    color: white;
}

.hero-cta-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.hero-cta-primary:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.hero-cta-secondary {
    background: white;
    color: #111827;
    border: 2px solid #e5e7eb;
}

.hero-cta-secondary:hover {
    border-color: #3B82F6;
    color: #3B82F6;
    transform: translateY(-1px);
}

.hero-cta-secondary:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.hero-tertiary-link {
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    color: #6b7280;
    text-decoration: none;
    font-family: 'Unbounded', sans-serif;
    margin-top: 0.5rem;
    display: inline-block;
    transition: color 0.2s ease;
}

.hero-tertiary-link:hover {
    color: #3B82F6;
}

.hero-trust-microcopy {
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    color: #9ca3af;
    font-family: 'Unbounded', sans-serif;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Right Half - Section Summary Cards */
.hero-sections-summary {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.hero-section-card {
    background: white;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.hero-section-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.hero-section-card:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.hero-section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.hero-section-card-title {
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 600;
    color: #111827;
    font-family: 'Unbounded', sans-serif;
    margin: 0;
}

.hero-section-card-arrow {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hero-section-card:hover .hero-section-card-arrow {
    color: #3B82F6;
    transform: translateX(2px);
}

.hero-section-card-description {
    font-size: clamp(0.75rem, 0.85vw, 0.875rem);
    color: #6b7280;
    font-family: 'Unbounded', sans-serif;
    line-height: 1.4;
    margin: 0;
}

/* Responsive adjustments */
@media (max-height: 700px) {
    .hero-split-container {
        padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1rem, 4vw, 2rem);
        gap: 2rem;
    }

    .hero-title-main {
        font-size: clamp(2.25rem, 4.5vw + 1.75vh, 3.5rem) !important;
    }
}

@media (max-height: 600px) {
    .hero-split-container {
        gap: 1.5rem;
    }

    .hero-title-main {
        font-size: clamp(1.875rem, 4vw + 1.25vh, 3rem) !important;
    }
}

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

    .hero-section-card,
    .hero-cta-primary,
    .hero-cta-secondary {
        transition: none;
    }

    .hero-section-card:hover {
        transform: none;
    }
}

/* Tarjetas laterales responsive - mantener estilos existentes */
.left-sticky-card {
    padding: clamp(1rem, 2.5vh, 1.75rem) clamp(1.25rem, 3vh, 2rem) !important;
}

.left-sticky-label {
    font-size: clamp(0.8rem, 1.3vh, 0.9rem) !important;
    margin-bottom: clamp(0.25rem, 0.6vh, 0.35rem) !important;
}

.left-sticky-text {
    font-size: clamp(1.05rem, 2vh, 1.2rem) !important;
    line-height: 1.5 !important;
}

.left-sticky-contact-text {
    font-size: clamp(0.85rem, 1.5vh, 0.95rem) !important;
}

.left-sticky-stat-value {
    font-size: clamp(1.3rem, 2.5vh, 1.5rem) !important;
}

.left-sticky-stat-label {
    font-size: clamp(0.75rem, 1.3vh, 0.85rem) !important;
}

.left-sticky-contact-card,
.left-sticky-stats-card {
    margin-top: clamp(0.6rem, 1.2vh, 1rem) !important;
}

/* Floating Badge Styles */
.hero-floating-badge {
    position: absolute;
    top: 10%;
    right: 0;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 20;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(255, 255, 255, 0.5) inset;
    animation: badge-float 6s ease-in-out infinite;
    transform: rotate(12deg);
    transition: all 0.3s ease;
}

.hero-floating-badge:hover {
    transform: rotate(0deg) scale(1.05);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 25px 50px rgba(59, 130, 246, 0.15),
        0 0 0 4px rgba(255, 255, 255, 0.8) inset;
}

.hero-floating-badge-content {
    font-family: 'Unbounded', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
    padding: 1.25rem;
}

@keyframes badge-float {

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

    50% {
        transform: translateY(-15px) rotate(12deg);
    }
}

@media (max-width: 1024px) {
    .hero-floating-badge {
        width: 130px;
        height: 130px;
        top: 2%;
        right: 0;
        position: relative;
        /* On smaller screens, maybe stack it or keep absolute if space permits */
        position: absolute;
    }

    .hero-floating-badge-content {
        font-size: 0.75rem;
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-floating-badge {
        display: none;
        /* Hide on mobile to avoid overlapping content */
    }
}

/* Iconos flotantes alrededor del hero */
.floating-icon {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    animation: floatAround 20s ease-in-out infinite;
}

.floating-icon-img {
    height: 4rem;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.floating-icon:hover .floating-icon-img {
    transform: scale(1.1);
    filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.3));
}

@media (min-width: 640px) {
    .floating-icon-img {
        height: 5rem;
    }
}

@media (min-width: 1024px) {
    .floating-icon-img {
        height: 6rem;
    }
}

/* Posicionamiento de cada icono */
.floating-icon-html {
    top: 10%;
    left: 5%;
    animation: floatAroundHTML 18s ease-in-out infinite;
}

.floating-icon-css {
    top: 20%;
    right: 8%;
    animation: floatAroundCSS 22s ease-in-out infinite;
}

.floating-icon-js {
    bottom: 30%;
    left: 10%;
    animation: floatAroundJS 20s ease-in-out infinite;
}

.floating-icon-php {
    bottom: 20%;
    right: 12%;
    animation: floatAroundPHP 24s ease-in-out infinite;
}

.floating-icon-analytics {
    top: 35%;
    left: 3%;
    animation: floatAroundAnalytics 21s ease-in-out infinite;
}

.floating-icon-cursor {
    bottom: 40%;
    right: 5%;
    animation: floatAroundCursor 19s ease-in-out infinite;
}

/* Animaciones flotantes individuales */
@keyframes floatAroundHTML {

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

    25% {
        transform: translate(30px, -20px) rotate(5deg);
    }

    50% {
        transform: translate(-20px, 30px) rotate(-5deg);
    }

    75% {
        transform: translate(20px, 20px) rotate(3deg);
    }
}

@keyframes floatAroundCSS {

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

    25% {
        transform: translate(-25px, 25px) rotate(-4deg);
    }

    50% {
        transform: translate(30px, -15px) rotate(6deg);
    }

    75% {
        transform: translate(-15px, -25px) rotate(-3deg);
    }
}

@keyframes floatAroundJS {

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

    25% {
        transform: translate(25px, 20px) rotate(4deg);
    }

    50% {
        transform: translate(-30px, -25px) rotate(-6deg);
    }

    75% {
        transform: translate(20px, -15px) rotate(3deg);
    }
}

@keyframes floatAroundPHP {

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

    25% {
        transform: translate(-30px, -20px) rotate(-5deg);
    }

    50% {
        transform: translate(25px, 30px) rotate(5deg);
    }

    75% {
        transform: translate(-20px, 20px) rotate(-4deg);
    }
}

@keyframes floatAroundAnalytics {

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

    25% {
        transform: translate(25px, 25px) rotate(4deg);
    }

    50% {
        transform: translate(-25px, -15px) rotate(-4deg);
    }

    75% {
        transform: translate(15px, -25px) rotate(3deg);
    }
}

@keyframes floatAroundCursor {

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

    25% {
        transform: translate(-25px, 20px) rotate(-3deg);
    }

    50% {
        transform: translate(20px, -25px) rotate(4deg);
    }

    75% {
        transform: translate(-15px, -20px) rotate(-2deg);
    }
}

/* Responsive: ocultar en móviles pequeños para evitar sobreposición */
@media (max-width: 640px) {
    .floating-icon {
        display: none;
    }
}

/* En tablets, reducir tamaño y ajustar posiciones */
@media (min-width: 641px) and (max-width: 1024px) {
    .floating-icon-img {
        height: 4rem !important;
        width: auto !important;
    }

    .floating-icon-html {
        top: 5%;
        left: 2%;
    }

    .floating-icon-css {
        top: 15%;
        right: 3%;
    }

    .floating-icon-js {
        bottom: 25%;
        left: 5%;
    }

    .floating-icon-php {
        bottom: 15%;
        right: 5%;
    }

    .floating-icon-analytics {
        top: 30%;
        left: 1%;
    }

    .floating-icon-cursor {
        bottom: 35%;
        right: 2%;
    }
}

/* Estilos para testimonios tipo mensajes */
#testimonios-hero,
#hero .testimonial-message {
    position: relative;
}

.testimonial-message {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.testimonial-message:nth-child(1) {
    animation-delay: 0.1s;
}

.testimonial-message:nth-child(2) {
    animation-delay: 0.2s;
}

.testimonial-message:nth-child(3) {
    animation-delay: 0.3s;
}

.testimonial-message:nth-child(4) {
    animation-delay: 0.4s;
}

.testimonial-message:nth-child(5) {
    animation-delay: 0.5s;
}

.testimonial-message:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.message-bubble {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.message-bubble::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.2) 0%,
            rgba(59, 130, 246, 0.05) 50%,
            rgba(59, 130, 246, 0.2) 100%);
    -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;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.message-bubble:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(59, 130, 246, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.message-bubble:hover::before {
    opacity: 1;
}

.message-content {
    flex: 1;
    margin-bottom: 1rem;
}

.message-text {
    font-family: 'Unbounded', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
    margin: 0;
    position: relative;
    padding-left: 1.5rem;
}

.message-text::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -4px;
    font-size: 2rem;
    color: rgba(59, 130, 246, 0.3);
    font-family: Georgia, serif;
    line-height: 1;
}

.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(229, 231, 235, 0.8);
}

.message-author {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.author-info {
    flex: 1;
    min-width: 0;
}

.author-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.author-role {
    font-family: 'Unbounded', sans-serif;
    font-size: 0.75rem;
    color: #6b7280;
}

.message-stars {
    font-size: 0.85rem;
    color: #fbbf24;
    letter-spacing: 2px;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .message-bubble {
        padding: 1.25rem;
    }

    .message-text {
        font-size: 0.875rem;
        padding-left: 1.25rem;
    }

    .message-text::before {
        font-size: 1.5rem;
    }

    .author-photo {
        width: 40px;
        height: 40px;
    }

    .author-name {
        font-size: 0.85rem;
    }

    .author-role {
        font-size: 0.7rem;
    }

    .message-stars {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    #testimonios-hero {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .message-bubble {
        padding: 1rem;
        border-radius: 16px;
    }

    .message-text {
        font-size: 0.8rem;
        padding-left: 1rem;
    }

    .message-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .message-author {
        gap: 0.5rem;
    }

    .author-photo {
        width: 36px;
        height: 36px;
    }
}

/* Carrusel de logotipos */
.logos-carousel {
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logos-carousel-track {
    display: flex;
    width: max-content;
}

.logo-item {
    min-width: 120px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

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

.animate-scroll {
    animation: scroll 30s linear infinite;
}

.logos-carousel:hover .animate-scroll {
    animation-play-state: paused;
}

/* Estilos para la tarjeta de Reservar llamada en contacto */
#contacto a[href*="calendly"] {
    display: block;
    text-decoration: none;
    color: inherit;
}

#contacto a[href*="calendly"]:hover {
    text-decoration: none;
}

/* Efecto rotulador para subrayado */
.marker-highlight {
    position: relative;
    z-index: 1;
}

.marker-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.15em;
    width: 100%;
    height: 0.1em;
    background: linear-gradient(135deg, rgba(253, 224, 71, 0.6) 0%, rgba(250, 204, 21, 0.7) 50%, rgba(234, 179, 8, 0.6) 100%);
    transform: rotate(-1deg) skewX(-2deg);
    z-index: -1;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(234, 179, 8, 0.2);
}

/* Estilos para la sección de beneficios interactivos */
.beneficios-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.beneficio-trigger {
    position: relative;
    outline: none;
}

.beneficio-trigger:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

.beneficio-item.active .beneficio-trigger {
    background: linear-gradient(135deg, #3B82F6 0%, #2563eb 100%);
    border-color: #3B82F6;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.beneficio-item.active .beneficio-trigger span {
    color: white;
}

.beneficio-card {
    min-height: 400px;
    animation: fadeInCard 0.5s ease-in-out;
}

@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.beneficio-card-title,
.beneficio-card-description,
.beneficio-card-list {
    animation: fadeInContent 0.6s ease-in-out;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.beneficio-card-content {
    animation: fadeInContent 0.6s ease-in-out;
}

/* Estilos para tarjetas móviles */
.beneficio-card-mobile {
    animation: fadeInCard 0.5s ease-in-out;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.beneficio-design-wrapper {
    position: relative;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Diseño para Rápida - Líneas de velocidad */
.beneficio-design-wrapper[data-design="rapida"] {
    background: linear-gradient(135deg, #3B82F6 0%, #2563eb 50%, #1d4ed8 100%);
}

.beneficio-design-wrapper[data-design="rapida"]::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 20px,
            rgba(255, 255, 255, 0.1) 20px,
            rgba(255, 255, 255, 0.1) 40px);
    animation: speedLines 2s linear infinite;
}

.beneficio-design-wrapper[data-design="rapida"]::after {
    content: '⚡';
    font-size: 2.5rem;
    color: white;
    opacity: 0.9;
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    z-index: 1;
}

@keyframes speedLines {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(40px);
    }
}

@keyframes pulse {

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

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

/* Diseño para Posicionada - Gráfico de posición */
.beneficio-design-wrapper[data-design="posicionada"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    position: relative;
}

.beneficio-design-wrapper[data-design="posicionada"]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    clip-path: polygon(0 40%, 20% 20%, 40% 50%, 60% 10%, 80% 30%, 100% 0%, 100% 100%, 0 100%);
}

.beneficio-design-wrapper[data-design="posicionada"]::after {
    content: '📈';
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes float {

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

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

/* Diseño para Rentabilizada - Gráfico de crecimiento */
.beneficio-design-wrapper[data-design="rentabilizada"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    position: relative;
}

.beneficio-design-wrapper[data-design="rentabilizada"]::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: expand 3s ease-in-out infinite;
}

.beneficio-design-wrapper[data-design="rentabilizada"]::after {
    content: '💰';
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 4s linear infinite;
    z-index: 1;
}

@keyframes expand {

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

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

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

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

/* Diseño para Navegable - Rutas de navegación */
.beneficio-design-wrapper[data-design="navegable"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
    position: relative;
}

.beneficio-design-wrapper[data-design="navegable"]::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

.beneficio-design-wrapper[data-design="navegable"]::after {
    content: '🧭';
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: navigate 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes navigate {

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

    25% {
        transform: translate(-50%, -50%) translateX(15px) translateY(-10px);
    }

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

    75% {
        transform: translate(-50%, -50%) translateX(-15px) translateY(-10px);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .beneficios-list {
        flex-direction: column;
    }

    .beneficio-item {
        width: 100%;
    }

    .beneficio-card {
        padding: 1.5rem !important;
        min-height: auto;
    }

    .beneficios-mobile-container {
        display: block;
    }
}