/* style.css - Versión FINAL y Corregida para MetaMusic */

/* Variables CSS para facilitar la gestión de temas y colores */
:root {
    --color-primary-dark: #333333;
    --color-white: #FFFFFF;
    --color-light-gray: #f8f8f8;
    --gradient-main: linear-gradient(to right, #00B894, #0984E3);
    --gradient-main-reverse: linear-gradient(to left, #00B894, #0984E3);
    --gradient-bg-main-page: linear-gradient(135deg, #00B894, #0984E3);
    --shadow-light: 0 5px 20px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.2);
    --shadow-cta-hover-primary: 0 0 30px rgba(0, 184, 148, 0.8);
    --shadow-cta-hover-secondary: 0 0 30px rgba(9, 132, 227, 0.8);
}

/* -------------------------------------------------------------------------- */
/* General Body and Typography */
/* -------------------------------------------------------------------------- */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    line-height: 1.7;
    overflow-x: hidden; /* Previene el scroll horizontal por animaciones */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    color: var(--color-primary-dark);
    margin-bottom: 20px;
    text-shadow: none;
    text-align: center;
}

/* Fluid font sizes with clamp() for general headings */
h1 {
    font-size: clamp(2.3em, 8vw, 4.5em); /* Min 2.5em, preferred 8vw, max 4.5em */
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 10px;
}

h2 {
    font-size: clamp(1.8em, 5vw, 3em); /* Min 1.8em, preferred 5vw, max 3em */
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-main);
    border-radius: 2px;
}

h3 {
    font-size: 2em;
    color: var(--color-primary-dark);
    margin-bottom: 25px;
}

p {
    margin-bottom: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

strong {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left;
    max-width: fit-content; /* Permite que la lista se ajuste al contenido */
    margin-left: auto;
    margin-right: auto;
}

ul li {
    padding-left: 1.8em;
    position: relative;
    margin-bottom: 12px;
    text-align: left;
}

/* Flechas de lista limpias y con color sólido */
ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #0984E3; /* Azul del degradado para la flecha, más limpio que text-fill-color */
    font-weight: bold;
    font-size: 1.2em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Padding por defecto para los lados */
}

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

/* -------------------------------------------------------------------------- */
/* Navbar */
/* -------------------------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%); /* Inicialmente oculto por JS */
    transition: transform 0.5s ease-out;
}

.navbar.visible {
    transform: translateY(0%);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo img {
    height: 40px; /* Tamaño para el logo en la nav */
    transition: transform 0.3s ease-in-out;
}
.nav-logo img:hover {
    transform: scale(1.1);
}

.nav-links {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

/* FIX: Eliminar flechas de los nav-links */
.nav-links li::before {
    content: none;
}

.nav-links li {
    padding-left: 0; /* Asegura que no haya padding extra para el espacio de la flecha */
}

.nav-links li a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    position: relative;
    transition: color 0.3s ease-in-out;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-main);
    transition: width 0.3s ease-in-out;
}

.nav-links li a:hover {
    color: #0984E3; /* Color azul al pasar el ratón */
}

.nav-links li a:hover::after {
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Main Page / Hero de Inicio (Primera pantalla de "desbloqueo") */
/* -------------------------------------------------------------------------- */
.main-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--gradient-bg-main-page);
    color: var(--color-white);
    position: fixed; /* Fija la página de inicio para el efecto de desbloqueo */
    top: 0; left: 0; width: 100%; z-index: 1000;
    transition: opacity 1s ease-in-out; /* Animación de desvanecimiento para el "unlocked" */
}

.main-page.locked {
    opacity: 1;
    pointer-events: auto; /* Permite interacciones */
}

.main-page.unlocked {
    opacity: 0;
    pointer-events: none; /* Desactiva interacciones cuando está oculto */
}

.background-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2); /* Oscurece el fondo para el contraste */
    z-index: 0;
}

.main-page-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; /* Distribuye el espacio uniformemente entre los ítems */
    padding: max(20px, 5vh) 20px; /* Padding vertical más generoso y responsive */
    position: relative;
    max-width: 90%; /* Limita el ancho en pantallas muy grandes */
    height: 90%; /* Permite que flexbox distribuya en toda la altura del viewport */
    box-sizing: border-box; /* Incluye padding en el cálculo del height */
}

.main-logo {
    width: clamp(100px, 15vw, 150px); /* Logo responsive */
    height: auto;
    /* margin-bottom: clamp(25px, 3.5vw, 50px); */ /* Se controla con gap de main-page-content */
}

/* Títulos con "glitch" en la página de inicio */
.main-page-content h1 {
    font-size: clamp(3em, 10vw, 4.5em); /* Más fluido y con control de tamaño */
    letter-spacing: clamp(2px, 1vw, 5px); /* Espaciado de letras responsive */
    color: var(--color-white); /* Asegura el color blanco */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    /* margin-bottom: clamp(15px, 2vw, 25px); */ /* Se controla con gap de main-page-content */
}

.main-page-content h2 {
    font-size: clamp(1.8em, 6vw, 3.5em); /* Más fluido y con control de tamaño */
    color: var(--color-white); /* Asegura el color blanco */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    /* margin-bottom: clamp(30px, 5vw, 60px); */ /* Se controla con gap de main-page-content */
}

.main-page-content h2::after {
    display: none; /* Oculta la línea de h2 en esta sección */
}

.main-page-content p {
    font-size: clamp(1em, 2.5vw, 1.8em); /* Párrafo más fluido */
    color: #e0e0e0;
    max-width: 700px;
    /* margin-bottom: clamp(40px, 6vw, 80px); */ /* Se controla con gap de main-page-content */
}

.unlock-button {
    display: inline-block;
    padding: clamp(15px, 3vw, 20px) clamp(30px, 6vw, 45px); /* Padding responsive */
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.4s ease-in-out;
    font-size: clamp(1em, 2vw, 1.2em); /* Tamaño de fuente responsive */
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* margin-top: clamp(20px, 4vw, 40px); */ /* Se controla con gap de main-page-content */
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.unlock-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Efecto Ripple para el botón de desbloqueo (CSS puro) */
.unlock-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}
.unlock-button:active::after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

/* Efecto Glitch para los títulos principales (main-page) */
.glitch {
    position: relative;
    animation: glitch-skew 1s infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before {
    left: 2px; text-shadow: -2px 0 #FF00FF;
    animation: glitch-top 1s infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(0 0 100% 0);
}
.glitch::after {
    left: -2px; text-shadow: -2px 0 #00FFFF;
    animation: glitch-bottom 1.5s infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(100% 0 0 0);
}
@keyframes glitch-top {
    0% { clip-path: inset(100% 0 0 0); } 10% { clip-path: inset(80% 0 0 0); }
    20% { clip-path: inset(60% 0 0 0); } 30% { clip-path: inset(10% 0 0 0); }
    40% { clip-path: inset(100% 0 0 0); } 50% { clip-path: inset(0 0 0 0); }
    60% { clip-path: inset(20% 0 0 0); } 70% { clip-path: inset(40% 0 0 0); }
    80% { clip-path: inset(60% 0 0 0); } 90% { clip-path: inset(80% 0 0 0); }
    100% { clip-path: inset(100% 0 0 0); }
}
@keyframes glitch-bottom {
    0% { clip-path: inset(0 0 0 0); } 10% { clip-path: inset(0 0 80% 0); }
    20% { clip-path: inset(0 0 60% 0); } 30% { clip-path: inset(0 0 10% 0); }
    40% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 0 100% 0); }
    60% { clip-path: inset(0 0 20% 0); } 70% { clip-path: inset(0 0 40% 0); }
    80% { clip-path: inset(0 0 60% 0); } 90% { clip-path: inset(0 0 80% 0); }
    100% { clip-path: inset(0 0 100% 0); }
}
@keyframes glitch-skew {
    0% { transform: skew(0deg); } 10% { transform: skew(-5deg); }
    20% { transform: skew(5deg); } 30% { transform: skew(-2deg); }
    40% { transform: skew(2deg); } 50% { transform: skew(0deg); }
    100% { transform: skew(0deg); }
}

/* Efecto de "sub-glitch" para subtítulos (main-page) */
.sub-glitch {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.sub-glitch::before, .sub-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    color: var(--color-white);
    text-shadow: none;
}
.sub-glitch::before {
    left: 1px; text-shadow: 1px 0 0 #FF00FF;
    animation: sub-glitch-top 2s infinite alternate ease-in-out;
}
.sub-glitch::after {
    left: -1px; text-shadow: -1px 0 0 #00FFFF;
    animation: sub-glitch-bottom 2.5s infinite alternate ease-in-out;
}
@keyframes sub-glitch-top {
    0%, 100% { clip-path: inset(0 0 0% 0); opacity: 1; }
    25% { clip-path: inset(0 0 70% 0); opacity: 0.8; }
    50% { clip-path: inset(0 0 30% 0); opacity: 0.7; }
    75% { clip-path: inset(0 0 90% 0); opacity: 0.9; }
}
@keyframes sub-glitch-bottom {
    0%, 100% { clip-path: inset(0% 0 0 0); opacity: 1; }
    25% { clip-path: inset(70% 0 0 0); opacity: 0.8; }
    50% { clip-path: inset(30% 0 0 0); opacity: 0.7; }
    75% { clip-path: inset(90% 0 0 0); opacity: 0.9; }
}


/* -------------------------------------------------------------------------- */
/* Contenido Principal del Sitio (Inicialmente oculto por JS) */
/* -------------------------------------------------------------------------- */
#website-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#website-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------------------------- */
/* Hero Section (después de desbloquear) */
/* -------------------------------------------------------------------------- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-primary-dark);
    position: relative;
    overflow: hidden; /* Esencial para el parallax */
    padding-top: 60px; /* Base para dejar espacio a la nav, ajustado en hero-content */
    border-bottom: 8px solid;
    border-image: var(--gradient-main) 1;
}

.parallax-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; /* Asegura que las capas parallax se recorten */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.parallax-layer {
    position: absolute;
    width: 120%; /* Aumenta el ancho para dar más margen al parallax y evitar bordes vacíos */
    height: 120%; /* Aumenta el alto por la misma razón */
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* URLs de fondo de alta resolución para Parallax. ¡Considera optimizarlas y reemplazarlas! */
.parallax-layer.layer-1 {
    background-image: url('https://source.unsplash.com/1920x1080/?futuristic-music-abstract,light');
    opacity: 0.6;
    z-index: 1;
}

.parallax-layer.layer-2 {
    background-image: url('https://source.unsplash.com/1920x1080/?sound-waves-minimal,tech');
    opacity: 0.4;
    z-index: 2;
}

.hero-content {
    z-index: 3;
    position: relative;
    color: var(--color-primary-dark);
    padding: 20px; /* Padding general para los bordes */
    max-width: 90%; /* Limita el ancho del contenido del hero */
    /* Ajustes CRÍTICOS para el espaciado vertical en el hero post-unlock */
    display: flex; /* Asegura el comportamiento flex */
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; /* Distribuye el espacio uniformemente */
    padding-top: max(50px, 8vh); /* Mínimo 50px o 8% del alto del viewport */
    padding-bottom: max(50px, 8vh); /* Mínimo 50px o 8% del alto del viewport */
    height: 100%; /* Permite que flexbox actúe sobre toda la altura disponible */
    box-sizing: border-box; /* Incluye padding en el cálculo del height */
}

.hero-logo {
    width: clamp(100px, 15vw, 150px); /* Logo responsive */
    height: auto;
    /* margin-bottom: clamp(25px, 3.5vw, 50px); */ /* Se controla con gap de hero-content */
}

/* Títulos con efecto "Text Stroke" en el hero */
.hero-content h1 {
    font-size: clamp(2.4em, 9vw, 6em); /* Título principal del hero más fluido */
    letter-spacing: clamp(3px, 1.5vw, 8px); /* Espaciado de letras fluido */
    color: transparent; /* Texto transparente para el stroke */
    -webkit-text-stroke: 2px var(--color-white); /* Borde blanco */
    text-stroke: 2px var(--color-white);
    /* margin-bottom: clamp(15px, 2vw, 25px); */ /* Se controla con gap de hero-content */
}

/* Títulos con efecto "Text Fill" en el hero (subtítulo) */
.hero-content h2 {
    font-size: clamp(1.5em, 5vw, 3em); /* Subtítulo del hero más fluido */
    color: var(--color-white); /* Color blanco para el subtítulo */
    text-shadow: 0 0 10px rgba(0, 184, 148, 0.5); /* Sombra para el glow */
    /* margin-bottom: clamp(30px, 5vw, 60px); */ /* Se controla con gap de hero-content */
}

.hero-content h2::after {
    display: none; /* Quitamos la línea para estos títulos de Hero */
}

.hero-content p {
    font-size: clamp(0.9em, 1.5vw, 1.2em); /* Párrafo del hero más fluido */
    color: #e0e0e0; /* Color claro para el párrafo */
    max-width: 600px;
    margin-bottom: 0; /* Último párrafo de la sección, no necesita margen inferior */
}

/* Hover effects for text stroke/fill */
.text-stroke:hover {
    -webkit-text-stroke-color: #00B894;
    text-stroke-color: #00B894;
}

.text-fill:hover {
    color: #0984E3;
    text-shadow: 0 0 20px rgba(9, 132, 227, 0.7);
}

/* -------------------------------------------------------------------------- */
/* Secciones Generales y Animaciones Scroll-Driven */
/* -------------------------------------------------------------------------- */
.section {
    padding: 100px 0;
    background-color: var(--color-white);
    margin-bottom: 0;
    box-shadow: var(--shadow-light);
    overflow: hidden;
    position: relative;
    opacity: 0; /* Controlado por GSAP */
    transform: translateY(50px); /* Controlado por GSAP */
}

.section:nth-child(even) {
    background-color: var(--color-light-gray);
}

.section .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 0 40px;
}

.split-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

.split-layout .content-left,
.split-layout .content-right {
    flex: 1;
    padding: 20px;
    flex-basis: 48%; /* Adjust for spacing when wrapping */
}

/* Para la nueva sección de tecnología, invertir orden en mobile */
.split-layout.reverse-order-mobile {
    flex-direction: row-reverse; /* Default for desktop */
}

/* -------------------------------------------------------------------------- */
/* Image Placeholders / Mockups / Videos (Futuristic Visuals) */
/* -------------------------------------------------------------------------- */
.image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Altura mínima para el contenedor del video/mockup */
    background-color: #f0f0f0;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Ocultar mockups si se usan videos en su lugar */
.visualizer-mockup, .brainwave-mockup {
    display: none; /* Asegura que no se muestren si se ha puesto un video */
}
.visualizer-mockup::before, .visualizer-mockup::after,
.brainwave-mockup::before, .brainwave-mockup::after {
    content: none; /* Elimina sus pseudo-elementos */
}

/* Estilo para videos dentro de secciones (Ej: .tech-video, .section-video) */
.tech-video, .section-video {
    width: 100%; /* El video ocupa el 100% del ancho de su contenedor */
    height: 100%; /* El video ocupa el 100% del alto de su contenedor */
    object-fit: cover; /* CLAVE: El video cubrirá el área sin distorsionarse, recortando si es necesario */
    border-radius: 15px; /* Para que coincida con el border-radius del image-placeholder */
    position: absolute; /* Para que ocupe todo el image-placeholder */
    top: 0;
    left: 0;
    z-index: 1; /* Asegura que esté por encima del fondo del image-placeholder si lo hubiera */
}

/* Specific Mockup Animations (if still used elsewhere, otherwise these can be removed) */
@keyframes animateBars {
    0% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0.5); }
}

@keyframes waveEffect {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

@keyframes drawWave {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes subtleGlow {
    0% { box-shadow: 0 0 20px rgba(0, 184, 148, 0.3); }
    50% { box-shadow: 0 0 50px rgba(9, 132, 227, 0.5); }
    100% { box-shadow: 0 0 20px rgba(0, 184, 148, 0.3); }
}

.waveform-animation-mockup {
    width: 80%; height: 180px; margin: 40px auto;
    background: linear-gradient(90deg, rgba(0,184,148,0.1), rgba(9,132,227,0.1));
    border-radius: 10px; position: relative; overflow: hidden;
    box-shadow: var(--shadow-light); border: 1px solid rgba(0, 0, 0, 0.05);
    background-size: 200% 100%; animation: backgroundPan 10s infinite linear;
}
.waveform-animation-mockup::before {
    content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 5px;
    background: var(--gradient-main); transform: translateY(-50%);
    animation: drawWave 4s infinite linear; transform-origin: left center;
}

@keyframes backgroundPan {
    0% { background-position: 0% 50%; }
    100% { background-position: -200% 50%; }
}

.event-glow-mockup {
    width: 80%; height: 250px; margin: 40px auto;
    background: #e0e0e0; border-radius: 15px; position: relative; overflow: hidden;
    box-shadow: 0 0 40px rgba(9, 132, 227, 0.2);
}
.event-glow-mockup::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 184, 148, 0.3) 0%, rgba(9, 132, 227, 0.3) 50%, transparent 80%);
    animation: subtleGlow 4s infinite alternate;
}
.event-glow-mockup::after {
    content: '🎶 immersive experience 🎵'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-family: 'Orbitron', sans-serif;
    font-size: 1.5em; color: var(--color-primary-dark); opacity: 0.8;
}

/* -------------------------------------------------------------------------- */
/* Call to Action */
/* -------------------------------------------------------------------------- */
.call-to-action {
    background-color: var(--color-light-gray);
    text-align: center;
    padding: 120px 0;
    border-top: 8px solid;
    border-image: var(--gradient-main) 1;
    position: relative;
    z-index: 5;
}

.cta-buttons {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.button {
    display: inline-block;
    padding: 20px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.3em;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: var(--shadow-medium);
    text-align: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: skewX(-20deg);
    z-index: -1;
}

.button:hover::before {
    left: 100%;
}

.button.primary {
    background: var(--gradient-main);
    color: var(--color-white);
    border: none;
}

.button.primary:hover {
    background: var(--gradient-main-reverse);
    box-shadow: var(--shadow-cta-hover-primary);
    transform: translateY(-5px) scale(1.02);
}

.button.secondary {
    background-color: transparent;
    color: var(--color-primary-dark);
    border: 3px solid #0984E3;
}

.button.secondary:hover {
    background-color: #0984E3;
    color: var(--color-white);
    box-shadow: var(--shadow-cta-hover-secondary);
    transform: translateY(-5px) scale(1.02);
}

/* -------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------- */
footer {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid #555555;
    font-size: 0.9em;
}

.footer-link {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Animations (General) */
/* -------------------------------------------------------------------------- */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.2s ease-out forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.8s; }
.fade-in-up.delay-2 { animation-delay: 1.2s; }

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

.animate-pulse-light {
    animation: pulseLight 3s infinite alternate;
}
@keyframes pulseLight {
    0% { filter: drop-shadow(0 0 5px rgba(0, 184, 148, 0.3)); }
    100% { filter: drop-shadow(0 0 15px rgba(9, 132, 227, 0.5)); }
}

.animate-pulse-medium {
    animation: pulseMedium 4s infinite alternate;
}
@keyframes pulseMedium {
    0% { box-shadow: 0 0 15px rgba(0, 184, 148, 0.4); }
    100% { box-shadow: 0 0 35px rgba(9, 132, 227, 0.6); }
}

.animate-bounce {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

.animate-float {
    animation: floatEffect 5s ease-in-out infinite alternate;
}
@keyframes floatEffect {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

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

/* -------------------------------------------------------------------------- */
/* Mockup/Video Specific Animations and Styles */
/* -------------------------------------------------------------------------- */

/* Ocultar mockups si se usan videos en su lugar */
.visualizer-mockup, .brainwave-mockup {
    display: none; /* Asegura que no se muestren si se ha puesto un video */
}
.visualizer-mockup::before, .visualizer-mockup::after,
.brainwave-mockup::before, .brainwave-mockup::after {
    content: none; /* Elimina sus pseudo-elementos */
}

/* Estilo para videos dentro de secciones (Ej: .tech-video, .section-video) */
.tech-video, .section-video {
    width: 100%; /* El video ocupa el 100% del ancho de su contenedor */
    height: 100%; /* El video ocupa el 100% del alto de su contenedor */
    object-fit: cover; /* CLAVE: El video cubrirá el área sin distorsionarse, recortando si es necesario */
    border-radius: 15px; /* Para que coincida con el border-radius del image-placeholder */
    position: absolute; /* Para que ocupe todo el image-placeholder */
    top: 0;
    left: 0;
    z-index: 1; /* Asegura que esté por encima del fondo del image-placeholder si lo hubiera */
}

/* Specific Mockup Animations (if still used elsewhere, otherwise these can be removed) */
@keyframes animateBars {
    0% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0.5); }
}

@keyframes waveEffect {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

@keyframes drawWave {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes subtleGlow {
    0% { box-shadow: 0 0 20px rgba(0, 184, 148, 0.3); }
    50% { box-shadow: 0 0 50px rgba(9, 132, 227, 0.5); }
    100% { box-shadow: 0 0 20px rgba(0, 184, 148, 0.3); }
}

.waveform-animation-mockup {
    width: 80%; height: 180px; margin: 40px auto;
    background: linear-gradient(90deg, rgba(0,184,148,0.1), rgba(9,132,227,0.1));
    border-radius: 10px; position: relative; overflow: hidden;
    box-shadow: var(--shadow-light); border: 1px solid rgba(0, 0, 0, 0.05);
    background-size: 200% 100%; animation: backgroundPan 10s infinite linear;
}
.waveform-animation-mockup::before {
    content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 5px;
    background: var(--gradient-main); transform: translateY(-50%);
    animation: drawWave 4s infinite linear; transform-origin: left center;
}

@keyframes backgroundPan {
    0% { background-position: 0% 50%; }
    100% { background-position: -200% 50%; }
}

.event-glow-mockup {
    width: 80%; height: 250px; margin: 40px auto;
    background: #e0e0e0; border-radius: 15px; position: relative; overflow: hidden;
    box-shadow: 0 0 40px rgba(9, 132, 227, 0.2);
}
.event-glow-mockup::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 184, 148, 0.3) 0%, rgba(9, 132, 227, 0.3) 50%, transparent 80%);
    animation: subtleGlow 4s infinite alternate;
}
.event-glow-mockup::after {
    content: '🎶 immersive experience 🎵'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-family: 'Orbitron', sans-serif;
    font-size: 1.5em; color: var(--color-primary-dark); opacity: 0.8;
}

/* -------------------------------------------------------------------------- */
/* Call to Action */
/* -------------------------------------------------------------------------- */
.call-to-action {
    background-color: var(--color-light-gray);
    text-align: center;
    padding: 120px 0;
    border-top: 8px solid;
    border-image: var(--gradient-main) 1;
    position: relative;
    z-index: 5;
}

.cta-buttons {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.button {
    display: inline-block;
    padding: 20px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.3em;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: var(--shadow-medium);
    text-align: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: skewX(-20deg);
    z-index: -1;
}

.button:hover::before {
    left: 100%;
}

.button.primary {
    background: var(--gradient-main);
    color: var(--color-white);
    border: none;
}

.button.primary:hover {
    background: var(--gradient-main-reverse);
    box-shadow: var(--shadow-cta-hover-primary);
    transform: translateY(-5px) scale(1.02);
}

.button.secondary {
    background-color: transparent;
    color: var(--color-primary-dark);
    border: 3px solid #0984E3;
}

.button.secondary:hover {
    background-color: #0984E3;
    color: var(--color-white);
    box-shadow: var(--shadow-cta-hover-secondary);
    transform: translateY(-5px) scale(1.02);
}

/* -------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------- */
footer {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid #555555;
    font-size: 0.9em;
}

.footer-link {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Responsive Design (Breakpoints y Ajustes Finos) */
/* -------------------------------------------------------------------------- */

/* Tablet & Smaller Desktop Screens (<= 992px) */
@media (max-width: 992px) {
    .container {
        padding: 0 30px;
    }

    /* Navbar adjustments for smaller screens */
    .navbar .container {
        flex-direction: column;
        gap: 10px;
    }
    .nav-links {
        gap: 15px;
    }
    .nav-links li a {
        font-size: 1em;
    }

    /* Main Page / Initial Hero Adjustments */
    .main-page-content {
        padding-top: max(40px, 6vh); /* Ajuste más agresivo para laptops y tablets */
        padding-bottom: max(40px, 6vh);
    }
    .main-logo {
        margin-bottom: clamp(20px, 3vw, 40px); /* Ajuste de margen */
    }
    .main-page-content h1 {
        margin-bottom: clamp(10px, 1.5vw, 20px);
    }
    .main-page-content h2 {
        margin-bottom: clamp(20px, 3.5vw, 40px);
    }
    .main-page-content p {
        margin-bottom: clamp(30px, 5vw, 60px);
    }
    .unlock-button {
        margin-top: clamp(20px, 3.5vw, 30px);
    }

    /* Hero Section (after unlock) Adjustments */
    .hero-content {
        padding-top: max(40px, 6vh); /* Ajuste de padding para el hero */
        padding-bottom: max(40px, 6vh);
    }
    .hero-logo {
        margin-bottom: clamp(20px, 3vw, 40px); /* Ajuste de margen */
    }
    .hero-content h1 {
        margin-bottom: clamp(10px, 1.5vw, 20px);
    }
    .hero-content h2 {
        margin-bottom: clamp(20px, 3.5vw, 40px);
    }

    /* Section layout adjustments */
    .section { padding: 80px 0; }
    .section .container { gap: 40px; }
    .split-layout { flex-direction: column; align-items: center; }
    .split-layout .content-left, .split-layout .content-right {
        flex-basis: auto; width: 100%; max-width: 600px;
        text-align: center; padding: 20px 0;
    }
    .image-placeholder { min-height: 280px; width: 90%; max-width: 450px; }
    ul { text-align: left; margin-left: auto; margin-right: auto; }
    ul li { padding-left: 1.8em; text-align: left; margin-bottom: 10px; }
    ul li::before { position: absolute; left: 0; margin-right: 0; display: inline-block; }
    .split-layout.reverse-order-mobile { flex-direction: column; }
    .cta-buttons { flex-direction: column; gap: 20px; }
    .button { width: 80%; max-width: 350px; font-size: 1.2em; padding: 18px 30px; }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    h3 { font-size: 1.6em; }
    p { font-size: 0.95em; }

    /* Navbar adjustments */
    .navbar { padding: 10px 0; }
    .nav-links { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .nav-links li a { font-size: 0.9em; }
    .nav-logo img { height: 35px; }

    /* Main Page / Initial Hero Adjustments */
    .main-page-content {
        padding-top: max(30px, 5vh); /* Más reducido para móviles */
        padding-bottom: max(30px, 5vh);
    }
    .main-logo {
        margin-bottom: clamp(15px, 2.5vw, 30px);
    }
    .main-page-content h1 {
        letter-spacing: clamp(1px, 0.8vw, 2px);
    }
    .main-page-content h2 {
        margin-bottom: clamp(20px, 3vw, 40px);
    }
    .main-page-content p {
        margin-bottom: clamp(25px, 4vw, 50px);
    }
    .unlock-button {
        margin-top: clamp(15px, 3vw, 30px);
    }

    /* Hero Section (after unlock) Adjustments */
    .hero {
        height: 60vh; /* Ajuste para que se vea más completo en móvil, puedes probar 70vh también */
        padding-top: max(30px, 5vh);
        padding-bottom: max(30px, 5vh);
    }
    .hero-logo {
        margin-bottom: clamp(15px, 2.5vw, 30px);
    }
    .hero-content p {
        font-size: 1.1em;
    }

    /* Section layout adjustments */
    .section { padding: 60px 0; }
    .section .container { gap: 30px; }
    .split-layout .content-left, .split-layout .content-right { padding: 15px 0; }
    .image-placeholder { min-height: 220px; width: 95%; }
    .waveform-animation-mockup, .event-glow-mockup {
        width: 95%; height: 150px; margin: 30px auto;
    }
    .event-glow-mockup::after { font-size: 1.2em; }
    .call-to-action { padding: 80px 0; }
    .cta-buttons { gap: 15px; }
    .button { width: 95%; max-width: 280px; padding: 15px 25px; font-size: 1.1em; }
}

/* Smallest Mobile Screens (<= 480px) */
@media (max-width: 480px) {
    .container { padding: 0 15px; }
    h3 { font-size: 1.3em; }
    p { font-size: 0.9em; }

    /* Navbar adjustments */
    .navbar .container { flex-direction: column; gap: 5px; }
    .nav-links { gap: 8px; font-size: 0.8em; }
    .nav-logo img { height: 30px; }

    /* Main Page / Initial Hero Adjustments */
    .main-page-content {
        padding-top: max(20px, 4vh);
        padding-bottom: max(20px, 4vh);
    }
    .main-logo {
        margin-bottom: clamp(10px, 2vw, 20px);
    }
    .main-page-content h1 {
        letter-spacing: clamp(1px, 0.5vw, 2px);
    }
    .main-page-content h2 {
        margin-bottom: clamp(15px, 2.5vw, 30px);
    }
    .main-page-content p {
        margin-bottom: clamp(20px, 3vw, 40px);
    }
    .unlock-button {
        margin-top: clamp(10px, 2vw, 20px);
    }

    /* Hero Section (after unlock) Adjustments */
    .hero {
        height: 55vh; /* Ajuste final para móviles pequeños */
        padding-top: max(20px, 3vh);
        padding-bottom: max(20px, 3vh);
    }
    .hero-logo {
        margin-bottom: clamp(10px, 2vw, 20px);
    }
    .hero-content p {
        font-size: 0.95em;
    }

    /* Section layout adjustments */
    .section { padding: 40px 0; }
    .section .container { gap: 20px; }
    .image-placeholder { min-height: 180px; }
    .waveform-animation-mockup, .event-glow-mockup {
        height: 120px;
    }
    .event-glow-mockup::after { font-size: 1em; }
    .call-to-action { padding: 60px 0; }
    .button { padding: 12px 20px; font-size: 1em; }

    /* Simplify/Disable Animations on Very Small Screens for Performance */
    .visualizer-mockup::before, .visualizer-mockup::after,
    .brainwave-mockup::before, .brainwave-mockup::after,
    .waveform-animation-mockup::before,
    .event-glow-mockup::before, .event-glow-mockup::after,
    .glitch::before, .glitch::after,
    .sub-glitch::before, .sub-glitch::after {
        animation: none !important;
        content: none !important;
        background-image: none !important;
        text-shadow: none !important;
        clip-path: none !important;
    }
    .glitch, .sub-glitch,
    .waveform-animation-mockup {
        animation: none !important;
    }
    /* Asegura que el color del texto sea visible cuando se deshabilitan los glitches */
    .glitch, .sub-glitch {
        color: var(--color-white) !important;
    }
}


.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(Gemini_Generated_Image_7mxjzv7mxjzv7mxj.png);
  background-size: cover; /* Ajusta la imagen para cubrir todo el elemento */
  background-position: center; /* Centra la imagen en el elemento */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  min-height: 100vh; /* Asegura que el hero ocupe al menos toda la altura de la ventana */
  display: flex; /* Para centrar el contenido verticalmente si lo deseas */
  align-items: center; /* Para centrar el contenido verticalmente */
  justify-content: center; /* Para centrar el contenido horizontalmente */
  color: #ffffff; /* Color del texto para que sea blanco */
  text-align: center; /* Centra el texto */

}

.hero-logo{
    width: 100px;
    padding: 0;
    margin: 0;
}