/* Main variables */
:root {
    --main-color: #0074FF;
    --green-color: #00FB69;
    --dark-blue: #0F0937;
    --white: #FFFFFF;
    --transition-speed: 0.5s;
}

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--white);
    background-color: var(--dark-blue);
    overflow: hidden;
}

.section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    opacity: 1; /* Make all sections visible by default */
}

.content {
    max-width: 1200px;
    width: 90%;
    text-align: center;
    position: relative;
    z-index: 10; /* Ensure content is always above background effects */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* Enhanced iOS Style Navigation Button */
.btn-next, .btn-access, .btn-contact {
    background: linear-gradient(135deg, var(--blue-color), var(--green-color));
    color: var(--white);
    border: none;
    border-radius: 25px;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(9, 7, 51, 0.4);
    transition: all var(--transition-speed);
    margin-top: 2rem;
    outline: none;
    /* display: none; /* Ocultos inicialmente, se mostrarán después de la animación */
    opacity: 0; /* Ocultos inicialmente */
    visibility: hidden; /* Ocultos y no ocupan espacio interactivo */
    pointer-events: none; /* No interactivos cuando están ocultos */
}

.btn-next:hover, .btn-access:hover, .btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(9, 7, 51, 0.5);
}

.btn-next i, .btn-contact i {
    margin-left: 8px;
}

.video-next {
    margin-top: 2rem;
    opacity: 0;
}

.video-next.visible {
    opacity: 1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 251, 105, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 251, 105, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 251, 105, 0);
    }
}

/* Section 1: Welcome - Initial Hidden State */
[data-anchor="section1"] .logo-container,
[data-anchor="section1"] .slogan,
[data-anchor="section1"] .stat-badge,
[data-anchor="section1"] .subtitle,
[data-anchor="section1"] #welcome-next {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform; 
}

/* Section 2: Hook - Initial Hidden State */
[data-anchor="section2"] .hook-message,
[data-anchor="section2"] .hook-submessage,
[data-anchor="section2"] .inline-contrast,
[data-anchor="section2"] #hook-next {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

/* Section 4: Access Form - Initial Hidden State */
[data-anchor="section4"] h2,
[data-anchor="section4"] #access-form,
[data-anchor="section4"] .form-footnote,
[data-anchor="section4"] .footnote,
[data-anchor="section4"] .form-container {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

/* Section 6: Video - Initial Hidden State */
[data-anchor="section6"] .section-header,
[data-anchor="section6"] .video-caption,
[data-anchor="section6"] #video-next,
[data-anchor="section6"] .footnote {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

/* Section 7: ROI Snapshot - Initial Hidden State */
[data-anchor="section7"] .roi-title,
[data-anchor="section7"] .kpi-list,
[data-anchor="section7"] .disclaimer-line,
[data-anchor="section7"] #roi-next,
[data-anchor="section7"] .footnote {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

/* Section 8: Closing - Initial Hidden State */
[data-anchor="section8"] .closing-message,
[data-anchor="section8"] .closing-submessage,
[data-anchor="section8"] #investor-call-btn,
[data-anchor="section8"] .fact-stack,
[data-anchor="section8"] .final-logo {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

/* Section 1: Welcome */
#welcome {
    background: linear-gradient(135deg, var(--dark-blue), var(--main-color));
}

.logo-container {
    margin-bottom: 2rem;
    /* display: flex; */ /* Revert flex display */
    /* align-items: center; */ /* Revert flex alignment */
    /* justify-content: center; */ /* Revert flex justify */
    /* gap: 1.5rem; */ /* Revert flex gap */
    /* width: auto; */ /* Revert width */
    /* max-width: 100%; */ /* Revert max-width */
    text-align: center; /* Center inline content (logo and tagline) */
}

.logo {
    width: 200px;
    max-width: 70%;
    height: auto;
}

.logos-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

img.xtracking-logo {
    width: 450px !important;
    max-width: 100% !important; 
    height: auto;
    margin-bottom: 1.5rem;
}

.logo {
    width: 240px;
    max-width: 80%;
    height: auto;
}

/* Added styles for new elements */
.micro-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    /* margin-left: 0; */ /* Remove margin */
    /* white-space: nowrap; */ /* Remove nowrap */
    margin-top: 0.5rem; /* Add margin above tagline for spacing */
    display: block; /* Ensure it takes its own line */
}

.stat-badge {
    display: inline-block;
    background-color: rgba(77, 255, 196, 0.15); /* Accent color with low opacity */
    color: #E0FDFC; /* Light cyan text */
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    margin: 0 auto;
    margin-bottom: 1.5rem; /* Space above subtitle */
    border: 1px solid rgba(77, 255, 196, 0.3);
    font-weight: 500;
    text-align: center;
}

.inline-contrast {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem; /* Space below subtitle */
    max-width: 600px;
    line-height: 1.5;
}

.inline-contrast strong {
    color: #4DFFC4; /* Accent color */
    font-weight: 600;
}

.form-footnote {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1.5rem; /* Increased margin to space it below the container */
    /* text-align: right; */ /* Changed alignment */
    text-align: center; /* Center align below container */
    /* width: 100%; */ /* Removed width constraint, let it center naturally */
    width: auto; /* Let the width be natural based on content */
    display: block; /* Ensure it takes block space for centering */
}

.form-footnote strong {
    color: #E0FDFC; /* Light cyan text */
    font-weight: 600;
}

.fact-stack {
    display: flex;
    gap: 1.5rem; /* Space between facts */
    margin-top: -1.5rem; /* Position closer to button */
    margin-bottom: 2.5rem; /* Space above logo */
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.fact-stack span {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0.7rem;
    border-radius: 10px;
}

.fact-stack strong {
    color: #4DFFC4; /* Accent color */
    font-weight: 600;
}
/* End of added styles */

/* Improved Typewriter effect for text with mobile cursor */
.typewriter {
    display: block;
    overflow: visible;
    position: relative;
    margin: 0 auto;
    letter-spacing: -0.01em; /* Reducir el espaciado entre letras */
    text-align: center;
    width: 100%;
    word-spacing: normal;
}

.text-container {
    display: inline-block;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    word-break: keep-all;
    white-space: normal;
    word-wrap: normal;
    padding: 0 10px;
}

/* Estilos para palabras individuales */
.word {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
}

.cursor {
    display: inline-block;
    width: 3px;
    height: 1.2em;
    background-color: var(--green-color);
    margin-left: 0;
    position: absolute;
    vertical-align: middle;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

/* Add typed animation to each character */
.typed-char {
    opacity: 1;
    display: inline-block;
    letter-spacing: -0.01em; /* Reducir el espaciado entre caracteres */
}

.slogan, .hook-message, .closing-message {
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    word-wrap: normal;
    word-break: keep-all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.slogan {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--white);
    text-shadow: 0 0 10px rgba(0, 251, 105, 0.3);
    opacity: 0; /* Handled by JS animation */
    word-wrap: break-word;
    min-height: 1.4em; /* ADDED: Reserve vertical space */
}

.slogan.active {
    opacity: 1;
}

.hook-message {
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.4;
    color: var(--white);
    opacity: 0;
    word-wrap: break-word;
}

.hook-message.active {
    opacity: 1;
}

.hook-submessage, .closing-submessage {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-duration: 1s, 1.2s;
}

.hook-submessage.active, .closing-submessage.active {
    opacity: 0.8;
    transform: translateY(0) scale(1);
}

/* Section 3: Access Form */
#access {
    background: linear-gradient(135deg, var(--dark-blue), var(--main-color));
}

.form-container {
    background: rgba(15, 9, 55, 0.8);
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

.form-container h2 {
    margin-bottom: 2rem;
    color: var(--white);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1rem;
    text-align: center;
}

input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 116, 255, 0.2);
    border-radius: 10px;
    color: var(--white);
    transition: all var(--transition-speed);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

input:focus {
    outline: none;
    border-color: var(--green-color);
    box-shadow: 0 0 10px rgba(0, 251, 105, 0.3);
}

.btn-access {
    background: linear-gradient(135deg, rgba(0, 116, 255, 0.3), rgba(0, 116, 255, 0.2));
    color: var(--white);
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    display: inline-block;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 0 15px rgba(0, 116, 255, 0.2);
    letter-spacing: 0.5px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-access::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--main-color), var(--green-color));
    border-radius: 50px;
    z-index: -1;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.btn-access:hover {
    background: linear-gradient(135deg, rgba(0, 116, 255, 0.4), rgba(0, 116, 255, 0.3));
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(255, 255, 255, 0.2) inset,
                0 0 20px rgba(0, 116, 255, 0.3);
}

.btn-access:hover::after {
    opacity: 0.5;
}

.btn-access:active {
    transform: translateY(1px) scale(0.98);
}

.error-message {
    color: #ff4d4d;
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 20px;
}

/* Section 4: Mensaje Personalizado */
#personalized {
    background: linear-gradient(135deg, var(--dark-blue), var(--main-color));
}

.personalized-message {
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.4;
    color: var(--white);
    opacity: 0;
    word-wrap: break-word;
}

.personalized-message.active {
    opacity: 1;
}

/* Estilos para la nueva estructura de mensajes personalizados */
.personalized-message-part {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    display: block;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    overflow: visible;
    position: relative;
    word-wrap: normal;
    word-break: keep-all;
    letter-spacing: -0.01em;
    text-shadow: 0 0 10px rgba(0, 251, 105, 0.3);
    white-space: normal;
}

.personalized-message-part .text-container {
    display: inline-block;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    word-break: keep-all;
    white-space: normal;
    word-wrap: normal;
    padding: 0 10px;
}

.personalized-message-part .word {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
}

.personalized-message-part .typed-char {
    opacity: 1;
    display: inline-block;
    letter-spacing: -0.01em;
}

.personalized-message-part.active {
    opacity: 1;
    visibility: visible;
}

/* Section 5: Video */
#video {
    background: var(--dark-blue);
}

.video-container {
    width: 80%;
    max-width: 1000px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease-out;
    z-index: 15; /* Mayor z-index para estar sobre el smoke effect */
    position: relative; /* Necesario para que z-index funcione */
}

.video-container.visible {
    opacity: 1;
    transform: scale(1);
}

video {
    width: 100%;
    height: auto;
    display: block;
    z-index: 16; /* Asegurar que el video esté sobre todo */
    position: relative; /* Para que z-index funcione */
}

.smoke-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 116, 255, 0.3) 0%, var(--dark-blue) 70%);
    opacity: 0;
    z-index: 5; /* Menor z-index para estar detrás del video */
    pointer-events: none; /* No interceptar eventos de mouse */
}

/* Section 5: Closing */
#closing {
    background: linear-gradient(135deg, var(--dark-blue), var(--main-color));
}

.closing-message {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--white);
    opacity: 0;
    word-wrap: break-word;
}

.closing-message.active {
    opacity: 1;
}

.btn-contact {
    background: linear-gradient(135deg, rgba(0, 251, 105, 0.3), rgba(0, 251, 105, 0.2));
    color: var(--white);
    border: none;
    padding: 1.2rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 3rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 0 15px rgba(0, 251, 105, 0.2);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, 
                rgba(255, 255, 255, 0) 0%, 
                rgba(255, 255, 255, 0.1) 50%, 
                rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
    z-index: -1;
}

.btn-contact::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--green-color), var(--main-color));
    border-radius: 50px;
    z-index: -2;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.btn-contact:hover {
    background: linear-gradient(135deg, rgba(0, 251, 105, 0.4), rgba(0, 251, 105, 0.3));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(255, 255, 255, 0.2) inset,
                0 0 20px rgba(0, 251, 105, 0.3);
}

.btn-contact:hover::before {
    transform: translateX(100%);
}

.btn-contact:hover::after {
    opacity: 0.5;
}

.btn-contact:active {
    transform: translateY(1px) scale(0.98);
}

.final-logo {
    margin-top: 3rem;
    opacity: 0.7;
    /* display: flex; */ /* Keep default block stacking or use flex column */
    /* justify-content: center; */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    gap: 0.5rem; /* Add small gap between logo and tagline */
}

/* Responsive styles - Mejoras */
@media (max-width: 768px) {
    .slogan, .hook-message, .closing-message {
        font-size: 1.8rem;
    }
    
    .form-container {
        padding: 2rem;
        width: 90%;
    }
    
    .video-container {
        width: 95%;
    }

    .btn-next, .btn-access, .btn-contact {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .logo {
        width: 220px;
    }
    
    .hook-submessage, .closing-submessage {
        font-size: 1rem;
    }

    .wave {
        opacity: 0.1; /* Lower opacity on mobile */
    }
    
    .particle {
        opacity: 0.15; /* Lower opacity on mobile */
    }
    
    /* Optimize animations for mobile performance */
    .wave-blue, .wave-purple, .wave-form, .wave-personalized, .wave-video, .wave-closing {
        animation-duration: 30s; /* Slower animations for better performance */
    }
    
    .wave-blue-2, .wave-purple-2, .wave-form-2, .wave-personalized-2, .wave-video-2, .wave-closing-2 {
        animation-duration: 35s; /* Slower animations for better performance */
    }
    
    .xtracking-logo {
        width: 310px;
    }
    
    .cosmic-logo-final .xtracking-logo,
    .cosmic-initial .cosmic-logo .xtracking-logo {
        width: 250px;
    }

    .logos-wrapper {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .slogan, .hook-message, .closing-message {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .logo {
        width: 180px;
    }
    
    .hook-submessage, .closing-submessage {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .btn-next, .btn-access, .btn-contact {
        padding: 0.7rem 1.3rem;
        font-size: 0.85rem;
        margin-top: 1.5rem;
    }
    
    .form-container {
        padding: 1.5rem;
    }
    
    input {
        padding: 0.8rem;
    }
    
    .form-container h2 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    
    /* Mejorar tamaño para interacción táctil */
    .btn-next, .btn-access, .btn-contact {
        min-height: 44px; /* Mínimo recomendado para elementos táctiles */
    }
    
    .xtracking-logo {
        width: 280px;
        margin-top: 1rem;
    }
    
    .cosmic-logo-final .xtracking-logo,
    .cosmic-initial .cosmic-logo .xtracking-logo {
        width: 220px;
    }

    .logos-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 360px) {
    .xtracking-logo {
        width: 240px;
    }
    
    .cosmic-logo-final .xtracking-logo,
    .cosmic-initial .cosmic-logo .xtracking-logo {
        width: 200px;
    }
    
    .final-logo .xtracking-logo {
        width: 260px;
    }
}

/* Específico para dispositivos en modo horizontal (landscape) */
@media (max-height: 480px) and (orientation: landscape) {
    .logo-container {
        margin-bottom: 1rem;
    }
    
    .logo {
        width: 150px;
    }
    
    .slogan, .hook-message, .closing-message {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .hook-submessage, .closing-submessage {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
    
    .btn-next, .btn-access, .btn-contact {
        margin-top: 1rem;
        padding: 0.5rem 1.2rem;
    }
    
    .content {
        padding: 1rem 0;
    }
    
    /* Ajustar el formulario en landscape */
    .form-container {
        padding: 1rem;
        max-width: 80%;
    }
    
    .form-group {
        margin-bottom: 0.8rem;
    }
    
    .final-logo {
        margin-top: 1rem;
    }
    
    .xtracking-logo {
        width: 250px;
    }
    
    .cosmic-logo-final .xtracking-logo,
    .cosmic-initial .cosmic-logo .xtracking-logo {
        width: 200px;
    }
    
    .final-logo .xtracking-logo {
        width: 270px;
    }
}

/* Mejoras de accesibilidad táctil */
@media (hover: none) and (pointer: coarse) {
    .btn-next, .btn-access, .btn-contact {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }
    
    input {
        font-size: 16px; /* Evitar zoom automático en iOS */
    }
    
    .video-container {
        margin-bottom: 1rem;
    }
}

/* Pantallas más grandes */
@media (min-width: 1200px) {
    .content {
        max-width: 1600px;
    }
    
    .slogan, .hook-message, .closing-message {
        font-size: 2.8rem;
    }
    
    .hook-submessage, .closing-submessage {
        font-size: 1.3rem;
    }
    
    .video-container {
        max-width: 1200px;
    }
}

/* Asegurar que los videos sean responsivos */
video {
    width: 100%;
    height: auto;
    display: block;
    z-index: 16;
    position: relative;
    max-height: 80vh; /* Limitar altura en pantallas altas */
    object-fit: contain; /* Mantener proporción correcta */
}

/* Hide Fullpage.js navigation */
#fp-nav {
    display: none !important;
}

/* Fade out animation only */
.fade-out {
    animation: fadeOut 0.8s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Wave Effects - Background enhancements */
.wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Glowing light trail effects */
.light-trail {
    position: absolute;
    filter: blur(60px);
    opacity: 0.15;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-color), var(--green-color));
    transform-origin: center center;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

/* Section 1 - Welcome light trails */
.trail-blue-1 {
    width: 35vw;
    height: 80vh;
    bottom: -20vh;
    right: 10vw;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    background: linear-gradient(135deg, #0074FF, #00cfff);
    filter: blur(40px);
    opacity: 0.2;
    animation: morph-trail-1 25s ease-in-out infinite alternate;
}

.trail-blue-2 {
    width: 25vw;
    height: 60vh;
    top: -10vh;
    left: 5vw;
    border-radius: 50% 40% 30% 70% / 60% 30% 70% 40%;
    background: linear-gradient(135deg, #2546bd, #4389ff);
    filter: blur(60px);
    opacity: 0.15;
    animation: morph-trail-2 28s ease-in-out infinite alternate;
}

.trail-blue-3 {
    width: 40vw;
    height: 40vh;
    bottom: 20vh;
    left: -15vw;
    border-radius: 30% 70% 40% 60% / 50% 30% 70% 50%;
    background: linear-gradient(135deg, #0074FF, #001aff);
    filter: blur(50px);
    opacity: 0.1;
    animation: morph-trail-3 30s ease-in-out infinite alternate;
}

/* Section 2 - Hook light trails */
.trail-purple-1 {
    width: 45vw;
    height: 70vh;
    top: -20vh;
    left: -5vw;
    border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%;
    background: linear-gradient(135deg, #4200ff, #9c00ff);
    filter: blur(60px);
    opacity: 0.18;
    animation: morph-trail-4 32s ease-in-out infinite alternate;
}

.trail-purple-2 {
    width: 30vw;
    height: 60vh;
    bottom: -10vh;
    right: -10vw;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    background: linear-gradient(135deg, #6200af, #9b5de5);
    filter: blur(50px);
    opacity: 0.12;
    animation: morph-trail-5 28s ease-in-out infinite alternate;
}

.trail-purple-3 {
    width: 25vw;
    height: 50vh;
    top: 10vh;
    right: 5vw;
    border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
    background: linear-gradient(135deg, #5a00db, #cb6ce6);
    filter: blur(45px);
    opacity: 0.1;
    animation: morph-trail-6 26s ease-in-out infinite alternate;
}

/* Section 3 - Form light trails */
.trail-form-1 {
    width: 40vw;
    height: 65vh;
    bottom: -20vh;
    left: -5vw;
    border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
    background: linear-gradient(135deg, var(--green-color), var(--main-color));
    filter: blur(55px);
    opacity: 0.15;
    animation: morph-trail-7 28s ease-in-out infinite alternate;
}

.trail-form-2 {
    width: 30vw;
    height: 60vh;
    top: -15vh;
    right: 0;
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
    background: linear-gradient(135deg, #00a8ff, #0057ff);
    filter: blur(65px);
    opacity: 0.1;
    animation: morph-trail-8 30s ease-in-out infinite alternate;
}

/* Section 4 - Personalized light trails */
.trail-personalized-1 {
    width: 50vw;
    height: 70vh;
    top: -30vh;
    right: -10vw;
    border-radius: 30% 70% 50% 50% / 50% 50% 40% 60%;
    background: linear-gradient(135deg, #00a8ff, var(--green-color));
    filter: blur(70px);
    opacity: 0.13;
    animation: morph-trail-1 35s ease-in-out infinite alternate;
}

.trail-personalized-2 {
    width: 35vw;
    height: 65vh;
    bottom: -20vh;
    left: -10vw;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    background: linear-gradient(135deg, #0070ff, #00ffbe);
    filter: blur(60px);
    opacity: 0.12;
    animation: morph-trail-2 28s ease-in-out infinite alternate;
}

/* Section 5 - Video light trails */
.trail-video-1 {
    width: 60vw;
    height: 80vh;
    bottom: -40vh;
    right: -20vw;
    border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
    background: linear-gradient(135deg, #0F0937, #201a64);
    filter: blur(80px);
    opacity: 0.2;
    animation: morph-trail-3 38s ease-in-out infinite alternate;
}

.trail-video-2 {
    width: 40vw;
    height: 60vh;
    top: -20vh;
    left: -10vw;
    border-radius: 50% 50% 30% 70% / 40% 60% 50% 50%;
    background: linear-gradient(135deg, #0074ff, #150f58);
    filter: blur(65px);
    opacity: 0.15;
    animation: morph-trail-4 32s ease-in-out infinite alternate;
}

/* Section 6 - Closing light trails */
.trail-closing-1 {
    width: 55vw;
    height: 75vh;
    bottom: -30vh;
    left: -15vw;
    border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
    background: linear-gradient(135deg, var(--green-color), var(--main-color));
    filter: blur(70px);
    opacity: 0.18;
    animation: morph-trail-5 35s ease-in-out infinite alternate;
}

.trail-closing-2 {
    width: 45vw;
    height: 65vh;
    top: -25vh;
    right: -10vw;
    border-radius: 50% 50% 30% 70% / 30% 70% 50% 50%;
    background: linear-gradient(135deg, #00aeff, #00fbff);
    filter: blur(65px);
    opacity: 0.15;
    animation: morph-trail-6 30s ease-in-out infinite alternate;
}

/* Floating light dots with enhanced glow */
.light-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(2px);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.3);
    animation: float-particle 15s infinite ease-in-out;
}

/* Morphing animations for the fluid effect */
@keyframes morph-trail-1 {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 60% 40% 50% 50% / 30% 60% 40% 70%;
        transform: rotate(10deg) scale(1.05);
    }
    100% {
        border-radius: 30% 70% 40% 60% / 50% 30% 70% 50%;
        transform: rotate(-5deg) scale(0.95);
    }
}

@keyframes morph-trail-2 {
    0% {
        border-radius: 50% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 50%;
        transform: rotate(-7deg) scale(1.05);
    }
    100% {
        border-radius: 60% 40% 50% 50% / 40% 50% 60% 50%;
        transform: rotate(7deg) scale(0.98);
    }
}

@keyframes morph-trail-3 {
    0% {
        border-radius: 30% 70% 40% 60% / 50% 30% 70% 50%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 60% 40% 30% 70% / 40% 50% 60% 50%;
        transform: rotate(5deg) scale(1.02);
    }
    100% {
        border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%;
        transform: rotate(-10deg) scale(0.98);
    }
}

@keyframes morph-trail-4 {
    0% {
        border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 50% 50% 40% 60% / 30% 70% 50% 50%;
        transform: rotate(-8deg) scale(1.05);
    }
    100% {
        border-radius: 60% 40% 50% 50% / 50% 40% 60% 40%;
        transform: rotate(12deg) scale(0.95);
    }
}

@keyframes morph-trail-5 {
    0% {
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 30% 70% 60% 40% / 40% 50% 60% 50%;
        transform: rotate(10deg) scale(1.08);
    }
    100% {
        border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
        transform: rotate(-5deg) scale(0.92);
    }
}

@keyframes morph-trail-6 {
    0% {
        border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 70% 30% 50% 50% / 50% 50% 40% 60%;
        transform: rotate(-12deg) scale(1.04);
    }
    100% {
        border-radius: 40% 60% 60% 40% / 60% 40% 50% 50%;
        transform: rotate(8deg) scale(0.96);
    }
}

@keyframes morph-trail-7 {
    0% {
        border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 40% 60% 70% 30% / 60% 40% 50% 50%;
        transform: rotate(-5deg) scale(1.02);
    }
    100% {
        border-radius: 60% 40% 50% 50% / 50% 60% 40% 60%;
        transform: rotate(10deg) scale(0.97);
    }
}

@keyframes morph-trail-8 {
    0% {
        border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 50% 50% 30% 70% / 60% 40% 70% 30%;
        transform: rotate(8deg) scale(1.06);
    }
    100% {
        border-radius: 30% 70% 60% 40% / 40% 60% 30% 70%;
        transform: rotate(-12deg) scale(0.94);
    }
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
        filter: blur(2px);
    }
    25% {
        transform: translateY(-50px) translateX(30px);
        opacity: 0.5;
        filter: blur(3px);
    }
    50% {
        transform: translateY(-100px) translateX(-20px);
        opacity: 0.6;
        filter: blur(4px);
    }
    75% {
        transform: translateY(-50px) translateX(-40px);
        opacity: 0.4;
        filter: blur(2px);
    }
}

/* Optimize for mobile */
@media (max-width: 768px) {
    .light-trail {
        opacity: 0.1; /* Lower opacity on mobile */
        filter: blur(40px); /* Less intense blur for performance */
    }
    
    .particle {
        opacity: 0.2;
        filter: blur(1px);
        box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
    }
    
    /* Optimize animations for mobile performance */
    .trail-blue-1, .trail-blue-2, .trail-blue-3,
    .trail-purple-1, .trail-purple-2, .trail-purple-3,
    .trail-form-1, .trail-form-2,
    .trail-personalized-1, .trail-personalized-2,
    .trail-video-1, .trail-video-2,
    .trail-closing-1, .trail-closing-2 {
        animation-duration: 40s; /* Slower animations for better performance */
    }
}

/* High-end device optimizations using feature detection */
@supports (backdrop-filter: blur(10px)) {
    .wave-bg {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

/* Section 6 - AI Assistant light trails */
.trail-ai-1 {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(13, 217, 155, 0.2) 0%, rgba(77, 255, 196, 0.1) 50%, rgba(77, 255, 196, 0) 70%);
    opacity: 0.2;
    border-radius: 40%;
    animation: rotate-ai-1 30s linear infinite;
    z-index: -1;
}

.trail-ai-2 {
    position: absolute;
    top: -40%;
    left: -30%;
    width: 180%;
    height: 180%;
    background: radial-gradient(ellipse at center, rgba(13, 103, 217, 0.2) 0%, rgba(64, 84, 178, 0.1) 50%, rgba(84, 46, 253, 0) 70%);
    opacity: 0.15;
    border-radius: 43%;
    animation: rotate-ai-2 25s linear infinite reverse;
    z-index: -2;
}

.trail-ai-3 {
    position: absolute;
    top: -45%;
    left: -40%;
    width: 190%;
    height: 190%;
    background: radial-gradient(ellipse at center, rgba(13, 217, 188, 0.1) 0%, rgba(27, 75, 111, 0.1) 50%, rgba(30, 32, 96, 0) 70%);
    opacity: 0.12;
    border-radius: 45%;
    animation: rotate-ai-3 35s linear infinite;
    z-index: -3;
}

@keyframes rotate-ai-1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-ai-2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-ai-3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .trail-ai-1, .trail-ai-2, .trail-ai-3 {
        opacity: 0.1; /* Reducir la opacidad en móviles para mejor visibilidad */
    }
}

/* AI Assistant Section Styles */
.ai-message {
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    color: var(--white);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.ai-message.active {
    opacity: 1;
    transform: translateY(0);
}

.ai-submessage {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: var(--white);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.2s;
}

.ai-submessage.active {
    opacity: 0.8;
    transform: translateY(0);
}

.ai-interaction-area {
    background: rgba(15, 9, 55, 0.4);
    padding: 2rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 2rem auto;
    width: 90%;
    max-width: 600px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ai-status {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--white);
}

.ai-instruction {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    color: var(--white);
    opacity: 0.8;
}

/* Responsive adjustments for AI section */
@media (max-width: 768px) {
    .ai-message {
        font-size: 1.8rem;
    }
    
    .ai-submessage {
        font-size: 1rem;
    }
    
    .ai-interaction-area {
        padding: 1.5rem;
    }
    
    .ai-status {
        font-size: 1.5rem;
    }
    
    .ai-instruction {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .ai-message {
        font-size: 1.5rem;
    }
    
    .ai-submessage {
        font-size: 0.9rem;
    }
    
    .ai-interaction-area {
        padding: 1rem;
    }
    
    .ai-status {
        font-size: 1.3rem;
    }
    
    .ai-instruction {
        font-size: 0.8rem;
    }
}

.custom-vapi-btn {
    background-color: #3d5afe;
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0, 157, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: pulse-vapi 2s infinite alternate;
}

.custom-vapi-btn img {
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}

.custom-vapi-btn.loading {
    background-color: #555;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: none;
}

.spinning {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.custom-vapi-btn.active {
    background-color: #f44336;
    box-shadow: 0 5px 15px rgba(244, 67, 54, 0.5);
}

.custom-vapi-btn.active img {
    transform: rotate(180deg);
}

.custom-vapi-btn img {
    filter: brightness(0) invert(1);
}

/* Estilos específicos para el botón pre-podcast - SOBRESCRITOS PARA EL NUEVO DISEÑO */
#pre-podcast-vapi-btn {
    background: transparent;
    box-shadow: none;
}

#pre-podcast-vapi-btn.loading {
    background: transparent;
}

#pre-podcast-vapi-btn.active {
    background: transparent;
}

@keyframes pulse-vapi {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgba(0, 157, 255, 0.5);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 255, 162, 0.6);
    }
}

/* Estilos para ocultar el botón original de Vapi */
.vapi-widget-container,
.vapi-button,
.vapi-btn,
.vapi-floating-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    z-index: -9999 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#vapi-container {
    position: fixed !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Futuristic AI Assistant UI */
.futuristic-ai-section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow: hidden;
}

.futuristic-ai-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 5px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 4px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    z-index: 1;
    opacity: 0.15;
    pointer-events: none;
    animation: twinkle 10s infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.15;
    }
}

.futuristic-ai-section .light-trail {
    z-index: 2;
    opacity: 0.2;
    filter: blur(30px);
}

.futuristic-ai-section .light-particles {
    z-index: 2;
}

.cosmic-container {
    position: relative;
    width: 90%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
    padding: 0 1rem;
    z-index: 20;
    margin: 0 auto;
}

.cosmic-container.visible {
    opacity: 1;
    visibility: visible;
}

.cosmic-container.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.cosmic-heading-final {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    max-width: 900px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.cosmic-initial {
    position: relative;
    width: 90%;
    max-width: 800px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 30;
    will-change: opacity, transform;
    margin: 0 auto;
}

.cosmic-initial.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important; /* Asegurarse de que baje también el z-index */
}

/* Section 3: AI Demo - Initial Hidden State */
[data-anchor="section3"] .cosmic-initial,
[data-anchor="section3"] #ai-demo-fallback {
    transform: translateY(20px); /* Optional: slight initial offset */
    will-change: opacity, transform;
}

/* Hide final container OFF-SCREEN initially */
[data-anchor="section3"] .cosmic-container {
    opacity: 0; 
    visibility: hidden;
    will-change: opacity, transform;
}

.cosmic-subtitle {
    font-size: 1.5rem;
    color: #4DFFC4;
    text-align: center;
    margin-bottom: 5rem; /* Aumentado de 3rem a 5rem para mayor espaciado */
    font-weight: 400;
    max-width: 700px;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: fadeInDelayed 0.8s 0.2s forwards;
}

.b-button-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 4rem;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: fadeInDelayed 0.8s 0.4s forwards;
}

.cosmic-cta {
    font-size: 1.2rem;
    color: white;
    text-align: center;
    margin: 1.5rem auto;
    font-weight: 400;
    text-shadow: 0 0 10px rgba(77, 255, 196, 0.6);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: fadeInDelayed 0.8s 0.6s forwards;
    max-width: 700px;
}

.cosmic-logo-final {
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: fadeInDelayed 0.8s 0.8s forwards;
    width: 100%;
}

.cosmic-logo-final .logo {
    width: 180px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: all 0.3s ease;
}

.cosmic-initial .cosmic-logo {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease-out;
}

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

/* Estilos para los elementos del botón y otros que fueron eliminados */
.ai-tooltip {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-size: 1rem;
    color: white;
    white-space: nowrap;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(77, 255, 196, 0.2);
    pointer-events: none;
    z-index: 20;
    animation: pulse-tooltip 3s infinite alternate;
    width: max-content;
    max-width: 90%;
}

.ai-tooltip::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.1);
}

.b-button {
    position: relative;
    width: 160px;
    height: 160px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    animation: float-subtle 5s infinite ease-in-out;
    z-index: 20;
    pointer-events: auto !important;
    margin: 0 auto;
    border-radius: 50%;
}

.b-button:hover .b-core {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(77, 255, 196, 0.9);
}

.b-button:hover {
    animation-play-state: paused;
}

.b-button:focus {
    outline: none;
}

.b-core {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(77, 255, 196, 0.9), rgba(0, 145, 255, 0.7));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(77, 255, 196, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    z-index: 5;
    overflow: visible;
}

.b-core::before {
    content: '';
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 50%;
    border: 2px solid rgba(77, 255, 196, 0.3);
    animation: pulse 2s infinite;
    z-index: 1;
}

.b-core::after {
    content: '';
    position: absolute;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border-radius: 50%;
    border: 1px solid rgba(77, 255, 196, 0.2);
    animation: pulse 2s infinite 0.3s;
    z-index: 1;
}

.mic-icon {
    width: 45px;
    height: 45px;
    z-index: 2;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    transition: all 0.3s ease;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animaciones para el botón y estados */
@keyframes float-subtle {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

@keyframes pulse-tooltip {
    0% {
        box-shadow: 0 0 15px rgba(77, 255, 196, 0.2);
    }
    100% {
        box-shadow: 0 0 25px rgba(77, 255, 196, 0.4);
    }
}

/* Button states */
.b-button.loading .b-core {
    background: radial-gradient(circle at center, rgba(255, 156, 77, 0.9), rgba(255, 77, 106, 0.7));
    box-shadow: 0 0 30px rgba(255, 156, 77, 0.8);
    animation: loading-pulse 1s infinite;
}

.b-button.loading .mic-icon {
    animation: spin 1.5s linear infinite;
}

@keyframes loading-pulse {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(0.95);
    }
}

.b-button.active .b-core {
    background: radial-gradient(circle at center, rgba(255, 77, 77, 0.9), rgba(255, 0, 0, 0.7));
    box-shadow: 0 0 30px rgba(255, 77, 77, 0.8);
}

.b-button.active .mic-icon {
    transform: rotate(135deg);
}

/* Subtle glow animation for the microphone button */
@keyframes glow-mic {
    0% {
        box-shadow: 0 0 30px rgba(77, 255, 196, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(77, 255, 196, 0.9), inset 0 0 30px rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 30px rgba(77, 255, 196, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

@keyframes fadeInDelayed {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Móviles y tablets */
@media (max-width: 768px) {
    .cosmic-initial .cosmic-heading,
    .cosmic-heading-final {
        font-size: 2.5rem;
        padding: 0 1rem;
    }
    
    .cosmic-subtitle {
        font-size: 1.2rem;
        padding: 0 1rem;
    }
    
    .b-button {
        width: 140px;
        height: 140px;
    }
    
    .b-core {
        width: 90px;
        height: 90px;
    }
    
    .mic-icon {
        width: 36px;
        height: 36px;
    }
    
    .cosmic-cta {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .cosmic-logo-final .logo,
    .cosmic-initial .cosmic-logo .logo {
        width: 140px;
    }
    
    .xtracking-logo {
        width: 310px;
    }
    
    .cosmic-logo-final .xtracking-logo,
    .cosmic-initial .cosmic-logo .xtracking-logo {
        width: 250px;
    }

    .logos-wrapper {
        gap: 2rem;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para la animación inicial centrada */
.pre-video-message {
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.4;
    color: var(--white);
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
    transform: translateY(20px);
}

.pre-video-message.active {
    opacity: 1;
    transform: translateY(0);
}

.pre-video-submessage {
    font-size: 1.5rem;
    max-width: 700px;
    margin: 2rem auto;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
    transform: translateY(20px);
}

.pre-video-submessage.active {
    opacity: 0.8;
    transform: translateY(0);
}

.pre-post-message {
    font-size: 2.5rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.4;
    color: var(--white);
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
    transform: translateY(20px);
}

.pre-post-message.active {
    opacity: 1;
    transform: translateY(0);
}

.pre-post-submessage {
    font-size: 1.5rem;
    max-width: 700px;
    margin: 2rem auto;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
    transform: translateY(20px);
}

.pre-post-submessage.active {
    opacity: 0.8;
    transform: translateY(0);
}

.post-podcast-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90%;
    max-width: 800px;
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
    padding: 0 1rem;
    z-index: 20;
    position: relative;
}

.post-podcast-container .b-core {
    background-color: rgb(224, 87, 87);
    box-shadow: 0 0 30px rgba(224, 87, 87, 0.8);
}

.post-podcast-container .ai-tooltip {
    background: linear-gradient(135deg, #d33a3a, #ff6b6b);
}

/* Estilos para la sección de encuesta (post-podcast) */
.survey-ai-section {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0F0937, #1a237e);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.survey-ai-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(46, 91, 173, 0.4) 0%, rgba(30, 60, 114, 0.1) 70%, rgba(25, 50, 95, 0) 100%);
    animation: twinkle 8s infinite alternate;
}

.survey-glow-1,
.survey-glow-2,
.survey-glow-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
}

.survey-glow-1 {
    width: 30vw;
    height: 30vw;
    background: rgba(103, 58, 183, 0.4);
    top: 20%;
    left: 15%;
    animation: survey-glow-1 10s infinite alternate;
}

.survey-glow-2 {
    width: 40vw;
    height: 40vw;
    background: rgba(63, 81, 181, 0.3);
    bottom: 10%;
    right: 15%;
    animation: survey-glow-2 15s infinite alternate;
}

.survey-glow-3 {
    width: 25vw;
    height: 25vw;
    background: rgba(77, 255, 196, 0.2);
    top: 50%;
    right: 25%;
    animation: survey-glow-3 12s infinite alternate;
}

@keyframes survey-glow-1 {
    0% { transform: translate(0, 0); opacity: 0.4; }
    100% { transform: translate(5vw, 3vh); opacity: 0.6; }
}

@keyframes survey-glow-2 {
    0% { transform: translate(0, 0); opacity: 0.3; }
    100% { transform: translate(-4vw, -2vh); opacity: 0.5; }
}

@keyframes survey-glow-3 {
    0% { transform: translate(0, 0); opacity: 0.25; }
    100% { transform: translate(3vw, -3vh); opacity: 0.4; }
}

.survey-particle {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    box-shadow: 0 0 15px 5px rgba(77, 255, 196, 0.5);
}

/* Layout de la encuesta */
.survey-layout {
    display: flex;
    width: 90%;
    max-width: 1100px;
    background: rgba(16, 24, 64, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(77, 255, 196, 0.15);
    overflow: hidden;
    z-index: 20;
}

/* Sección informativa */
.survey-info {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: rgba(15, 9, 55, 0.5);
}

.survey-heading {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
    text-align: left;
    position: relative;
}

.survey-heading::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #6c63ff, #4DFFC4);
    margin-top: 0.8rem;
}

.survey-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    line-height: 1.6;
    text-align: left;
}

.survey-benefits {
    width: 100%;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(24, 144, 255, 0.8);
    border-radius: 50%;
    margin-right: 12px;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
}

.benefit-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

/* Sección de interacción */
.survey-interaction {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.survey-button-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.survey-button {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 1.5rem 0;
    outline: none;
    transition: transform 0.3s ease;
}

.survey-button:hover {
    transform: scale(1.05);
}

.survey-button-inner {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6c63ff, #4DFFC4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 25px rgba(77, 255, 196, 0.6);
    transition: all 0.3s ease;
}

.survey-button-inner::before {
    content: '';
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 2px solid rgba(77, 255, 196, 0.4);
    animation: pulse-survey 2s infinite;
}

.survey-icon {
    width: 28px;
    height: 28px;
    color: white;
}

.survey-instruction {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-top: 1rem;
    max-width: 80%;
}

.survey-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
}

.survey-footer .logo {
    width: 160px;
    margin-bottom: 0.5rem;
}

.survey-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-style: italic;
}

.survey-tooltip {
    background: linear-gradient(135deg, #6c63ff, #4DFFC4);
}

@keyframes pulse-survey {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    70% {
        transform: scale(1.1);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Estados activos del botón de encuesta */
.survey-button.active .survey-button-inner {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.6);
}

.survey-button.loading .survey-button-inner {
    animation: loading-survey 1.5s infinite;
}

@keyframes loading-survey {
    0% {
        box-shadow: 0 0 15px rgba(77, 255, 196, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(77, 255, 196, 0.8);
    }
    100% {
        box-shadow: 0 0 15px rgba(77, 255, 196, 0.6);
    }
}

/* Estilos responsive */
@media (max-width: 992px) {
    .survey-layout {
        flex-direction: column;
    }
    
    .survey-info {
        padding: 2rem 1.5rem;
    }
    
    .survey-interaction {
        padding: 2rem 1.5rem;
    }
    
    .survey-heading {
        font-size: 2rem;
    }
}

/* Video Progress Bar Styles */
.video-progress-container {
    width: 80%; /* Or match video width */
    max-width: 600px; /* Limit width */
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin: 15px auto 10px; /* Spacing below caption and above button */
    overflow: hidden;
    position: relative;
    opacity: 0; /* Hidden initially */
    transition: opacity 0.5s ease-in-out;
}

.video-progress-container.visible {
    opacity: 1;
}

.video-progress-bar {
    height: 100%;
    width: 0%; /* Starts at 0% */
    background-color: #4DFFC4; /* Use accent color */
    border-radius: 4px;
    transition: width 0.1s linear; /* Smooth transition */
}

.video-progress-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 8px; /* Match container height */
}

/* Section 7: Interactive AI Assistant (After Video) - Survey */
.survey-ai-section {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0F0937, #1a237e);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.survey-ai-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(46, 91, 173, 0.4) 0%, rgba(30, 60, 114, 0.1) 70%, rgba(25, 50, 95, 0) 100%);
    animation: twinkle 8s infinite alternate;
}

.survey-glow-1,
.survey-glow-2,
.survey-glow-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
}

.survey-glow-1 {
    width: 30vw;
    height: 30vw;
    background: rgba(103, 58, 183, 0.4);
    top: 20%;
    left: 15%;
    animation: survey-glow-1 10s infinite alternate;
}

.survey-glow-2 {
    width: 40vw;
    height: 40vw;
    background: rgba(63, 81, 181, 0.3);
    bottom: 10%;
    right: 15%;
    animation: survey-glow-2 15s infinite alternate;
}

.survey-glow-3 {
    width: 25vw;
    height: 25vw;
    background: rgba(77, 255, 196, 0.2);
    top: 50%;
    right: 25%;
    animation: survey-glow-3 12s infinite alternate;
}

@keyframes survey-glow-1 {
    0% { transform: translate(0, 0); opacity: 0.4; }
    100% { transform: translate(5vw, 3vh); opacity: 0.6; }
}

@keyframes survey-glow-2 {
    0% { transform: translate(0, 0); opacity: 0.3; }
    100% { transform: translate(-4vw, -2vh); opacity: 0.5; }
}

@keyframes survey-glow-3 {
    0% { transform: translate(0, 0); opacity: 0.25; }
    100% { transform: translate(3vw, -3vh); opacity: 0.4; }
}

.survey-particle {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    box-shadow: 0 0 15px 5px rgba(77, 255, 196, 0.5);
}

/* Layout de la encuesta */
.survey-layout {
    display: flex;
    width: 90%;
    max-width: 1100px;
    background: rgba(16, 24, 64, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(77, 255, 196, 0.15);
    overflow: hidden;
    z-index: 20;
}

/* Sección informativa */
.survey-info {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: rgba(15, 9, 55, 0.5);
}

.survey-heading {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
    text-align: left;
    position: relative;
}

.survey-heading::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #6c63ff, #4DFFC4);
    margin-top: 0.8rem;
}

.survey-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    line-height: 1.6;
    text-align: left;
}

.survey-benefits {
    width: 100%;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(24, 144, 255, 0.8);
    border-radius: 50%;
    margin-right: 12px;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
}

.benefit-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

/* Sección de interacción */
.survey-interaction {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.survey-button-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.survey-button {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 1.5rem 0;
    outline: none;
    transition: transform 0.3s ease;
}

.survey-button:hover {
    transform: scale(1.05);
}

.survey-button-inner {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6c63ff, #4DFFC4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 25px rgba(77, 255, 196, 0.6);
    transition: all 0.3s ease;
}

.survey-button-inner::before {
    content: '';
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 2px solid rgba(77, 255, 196, 0.4);
    animation: pulse-survey 2s infinite;
}

.survey-icon {
    width: 28px;
    height: 28px;
    color: white;
}

.survey-instruction {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-top: 1rem;
    max-width: 80%;
}

.survey-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
}

.survey-footer .logo {
    width: 160px;
    margin-bottom: 0.5rem;
}

.survey-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-style: italic;
}

.survey-tooltip {
    background: linear-gradient(135deg, #6c63ff, #4DFFC4);
}

@keyframes pulse-survey {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    70% {
        transform: scale(1.1);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Estados activos del botón de encuesta */
.survey-button.active .survey-button-inner {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.6);
}

.survey-button.loading .survey-button-inner {
    animation: loading-survey 1.5s infinite;
}

@keyframes loading-survey {
    0% {
        box-shadow: 0 0 15px rgba(77, 255, 196, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(77, 255, 196, 0.8);
    }
    100% {
        box-shadow: 0 0 15px rgba(77, 255, 196, 0.6);
    }
}

/* Estilos responsive */
@media (max-width: 992px) {
    .survey-layout {
        flex-direction: column;
    }
    
    .survey-info {
        padding: 2rem 1.5rem;
    }
    
    .survey-interaction {
        padding: 2rem 1.5rem;
    }
    
    .survey-heading {
        font-size: 2rem;
    }
}

/* === Styles added for Investor Deck Refactor === */

/* Fixed Rotating KPI Badge */
#rotating-kpi-badge {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(21, 20, 46, 0.85);
    color: var(--white);
    padding: 0px 15px;
    border-radius: 8px;
    font-size: 0.87rem;
    font-weight: 500;
    z-index: 1000;
    border: 1px solid rgba(86, 94, 225, 0.5);
    box-shadow: 0 0 15px rgba(94, 86, 225, 0.4);
    opacity: 1; /* Cambiado de 0 a 1 para hacerlo visible inicialmente */
    min-width: 220px;
    max-width: 400px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible; /* Permitir que el contenido sobresalga */
    height: auto;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease, background-color 0.3s ease;
    backdrop-filter: blur(5px);
    transform: translateX(0);
    animation: badgePulse 6s infinite ease-in-out;
}

@keyframes badgePulse {
    0% { box-shadow: 0 0 15px rgba(94, 86, 225, 0.4); }
    50% { box-shadow: 0 0 20px rgba(86, 94, 225, 0.6); }
    100% { box-shadow: 0 0 15px rgba(94, 86, 225, 0.4); }
}

#rotating-kpi-badge:hover {
    background-color: rgba(30, 28, 64, 0.95);
    transform: translateX(-5px);
    box-shadow: 0 0 20px rgba(94, 86, 225, 0.6);
    animation-play-state: paused;
}

/* Icon container for KPI Badge */
#rotating-kpi-badge::before {
    content: "";
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    background-image: url('../img/KPI_Icon.svg') !important;
    background-size: 80px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-right: 15px !important;
    margin-top: 5px !important;
    flex-shrink: 0 !important;
    align-self: center !important; /* Asegurar centrado vertical */
}

/* Style for the KPI text span */
#rotating-kpi-badge .kpi-text {
    padding: 0;
    display: block;
    flex-grow: 1;
    text-align: left;
    line-height: 1.4;
    align-self: center !important; /* Centrar verticalmente el texto */
    margin-right: 9px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #rotating-kpi-badge {
        max-width: 80%;
        font-size: 0.75rem;
        height: auto;
        bottom: 15px;
        right: 15px;
    }
    
    #rotating-kpi-badge::before {
        width: 50px !important;
        height: 50px !important;
        background-size: 50px !important;
        margin-right: 10px !important;
    }
}

/* Small screen adjustments */
@media (max-width: 480px) {
    #rotating-kpi-badge {
        max-width: 90%;
        font-size: 0.7rem;
        bottom: 10px;
        right: 10px;
    }
}

/* Estilos para la sección 7 (ROI Snapshot) */
.roi-title {
    font-size: 2.2rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 251, 105, 0.3);
}

.kpi-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 2rem;
    max-width: 700px;
    text-align: left;
}

.kpi-list li {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    line-height: 1.4;
    position: relative;
    padding-left: 1.5rem;
}

.kpi-list li::before {
    content: "•";
    color: rgba(77, 255, 196, 0.8);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -0.1rem;
}

.disclaimer-line {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    text-align: center;
    font-style: italic;
}

/* Ajustes responsivos para la sección 7 */
@media (max-width: 768px) {
    .roi-title {
        font-size: 1.8rem;
    }
    
    .kpi-list li {
        font-size: 0.95rem;
        padding-left: 1.2rem;
    }
    
    .kpi-list li::before {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .roi-title {
        font-size: 1.6rem;
    }
    
    .kpi-list {
        width: 90%;
    }
    
    .kpi-list li {
        font-size: 0.9rem;
    }
}

/* Estilos para cosmic-heading en sección 3 */
.cosmic-heading {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(77, 255, 196, 0.4);
    opacity: 0; /* Inicialmente oculto */
    visibility: hidden; /* Inicialmente oculto */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Section 3: AI Demo - Initial Hidden State - Corregido */
[data-anchor="section3"] .cosmic-initial,
[data-anchor="section3"] #ai-demo-fallback {
    opacity: 0; /* Inicialmente oculto */
    visibility: hidden; /* Inicialmente oculto */
    transform: translateY(20px); /* Mantener el offset inicial */
    will-change: opacity, transform;
}

.cosmic-initial {
    position: relative;
    width: 90%;
    max-width: 800px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 30;
    will-change: opacity, transform;
    margin: 0 auto;
}

.cosmic-initial.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important; /* Asegurarse de que baje también el z-index */
}

/* Specific container adjustments */
.cosmic-logo-final .logos-wrapper,
.cosmic-initial .cosmic-logo .logos-wrapper {
    flex-direction: column;
    gap: 0.3rem;
}

.cosmic-logo-final img.xtracking-logo,
.cosmic-initial .cosmic-logo img.xtracking-logo {
    width: 380px !important;
    max-width: 95% !important;
    margin-bottom: 1rem;
}

.cosmic-logo-final .logo:not(.xtracking-logo),
.cosmic-initial .cosmic-logo .logo:not(.xtracking-logo) {
    width: 180px;
    max-width: 65%;
}

.final-logo .logos-wrapper {
    flex-direction: column;
    gap: 0.3rem;
}

.final-logo img.xtracking-logo {
    width: 340px !important;
    max-width: 95% !important;
    margin-bottom: 1rem;
}

.final-logo .logo:not(.xtracking-logo) {
    width: 170px;
    max-width: 65%;
}

@media (max-width: 768px) {
    .logos-wrapper {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .logo:not(.xtracking-logo) {
        width: 160px;
        max-width: 65%;
    }
    
    img.xtracking-logo {
        width: 320px !important;
        max-width: 90% !important;
        margin-bottom: 1rem;
    }
    
    .cosmic-logo-final img.xtracking-logo,
    .cosmic-initial .cosmic-logo img.xtracking-logo,
    .final-logo img.xtracking-logo {
        width: 300px !important;
        max-width: 90% !important;
    }
}

@media (max-width: 480px) {
    .logos-wrapper {
        gap: 0.2rem;
    }
    
    .logo:not(.xtracking-logo) {
        width: 130px;
        max-width: 60%;
    }
    
    img.xtracking-logo {
        width: 260px !important;
        max-width: 90% !important;
    }
    
    .cosmic-logo-final img.xtracking-logo,
    .cosmic-initial .cosmic-logo img.xtracking-logo,
    .final-logo img.xtracking-logo {
        width: 240px !important;
        max-width: 90% !important;
    }
}

@media (max-width: 360px) {
    img.xtracking-logo {
        width: 220px !important;
        max-width: 90% !important;
    }
    
    .logo:not(.xtracking-logo) {
        width: 120px;
        max-width: 55%;
    }
    
    .cosmic-logo-final img.xtracking-logo,
    .cosmic-initial .cosmic-logo img.xtracking-logo,
    .final-logo img.xtracking-logo {
        width: 200px !important;
        max-width: 90% !important;
    }
    
    .final-logo .logo:not(.xtracking-logo) {
        width: 110px;
        max-width: 55%;
    }
}

/* Ocultar inicialmente fact-stack y final-logo en sección 4 */
[data-anchor="section4"] .fact-stack,
[data-anchor="section4"] .final-logo {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}