/* --- INICIO BLOQUE NUEVO PARA EFECTO REVEAL --- */
/* Estilos para el footer global. Ahora es colapsable. */
.footer-section {
    background-image: linear-gradient(45deg, var(--pa-arriba-orange-force), var(--pa-arriba-orange-light), var(--pa-arriba-orange-force));    background-size: 250% 250%;
    background-size: 250% 250%;
    animation: animateBackgroundGradient 8s linear infinite alternate;
    color: var(--color-background-dark);
    padding: 32px 16px; /* Padding ajustado para el contenedor principal del footer */
    margin-top: 40px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden; /* Asegura que el contenido oculto no se desborde */
    border-top-left-radius: 0.75rem; /* rounded-t-xl */
    border-top-right-radius: 0.75rem; /* rounded-t-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
}

/* Estilos para el contenido del acordeón del footer */
.footer-accordion-content {
    max-height: 0; /* Inicialmente colapsado */
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Transición para la expansión/contracción */
}

/* Cuando el footer está expandido */
.footer-section.expanded .footer-accordion-content {
    max-height: 500px; /* Un valor lo suficientemente grande para contener el contenido */
}

/* Icono del acordeón */
.footer-accordion-header .accordion-icon {
    transition: transform 0.3s ease-out; /* Transición para la rotación del icono */
}

/* Rotar el icono cuando el footer está expandido */
.footer-section.expanded .footer-accordion-header .accordion-icon {
    transform: rotate(180deg); /* Flecha hacia arriba cuando está expandido */
}

/* Nuevos keyframes para la animación de degradado de fondo */
@keyframes animateBackgroundGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* --- FIN BLOQUE NUEVO PARA EFECTO REVEAL --- */

/* Aplicamos box-sizing: border-box globalmente para un manejo consistente del modelo de caja */
* {
    box-sizing: border-box;
}

/* Variables de Colores de Pa'arriba (¡Ahora exactos de Penpot!) */
:root {
    --color-background-dark: #000000; /* Fondo general oscuro: Negro puro de Penpot */
    --color-blue-section: #0D47A1; /* Azul oscuro para sección de prototipos de Penpot */
    --color-gray-section: #212121; /* Gris oscuro para filosofía y testimonios de Penpot */
    --color-light-bg-box: #F5F5DC; /* Color de fondo de las cajas de prototipos (Beige/crema de Penpot) */
    --color-text-light: #FFFFFF; /* Texto general blanco puro de Penpot */
    --color-text-gray: #B0B0B0; /* Gris para algunos textos secundarios y autores en testimonios de Penpot */
    --color-border-testimonial: #E8E8EA; /* Borde gris muy claro para testimonios de Penpot */
    --color-placeholder-photo: #B0C4DE; /* Azul grisáceo claro para fotos de testimonios de Penpot */
    --color-green-slogan: #4CAF50; /* Tu color verde para el slogan "Crece, Avanza..." */
    --color-orange-accent: #FF5C00; /* Tu color naranja para acentos, si es necesario */
    --color-accent-gold: #FFD700; /* Tu dorado para el Círculo Dorado */
    /* Nuevos colores para la tienda */
    --pa-arriba-orange-light: #FF8C42; /* Naranja más claro para enlaces y hover */
    --pa-arriba-orange-force: #FF5C00; /* Naranja principal de la marca */
    --pa-arriba-blue-dark: #0D47A1; /* Azul oscuro para títulos */
    --pa-arriba-blue-light: #42A5F5; /* Azul claro para categorías */
}

/* Estilos generales */
html, body { /* Aseguramos que tanto html como body ocupen el 100% y sin márgenes */
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Aseguramos que el html y body no tengan scrollbars extra */
}

body {
    /* MODIFICADO: Aplicamos el degradado animado de tu marca al body */
    background-image: linear-gradient(45deg, var(--color-background-dark), #333333, var(--color-background-dark));    background-size: 120% 250%; /* Mismo tamaño para la animación */
    background-size: 250% 250%; /* Mismo tamaño para la animación */
    animation: animateBackgroundGradient 5s linear infinite alternate; /* Misma animación */
    
    color: var(--color-text-light); /* Texto por defecto en blanco (se sobrescribirá) */
    font-family: 'Montserrat', sans-serif; /* Usamos Montserrat como la fuente principal */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar horizontalmente */
    min-height: 100vh;
    overflow-x: hidden;
    transition: padding-top 0.3s ease-in-out; /* Transición suave para el padding del body */
    position: relative; /* CLAVE: Establece un contexto de posicionamiento para la onda */
}

.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 180px 20px; /* Ajustado el PADDING INFERIOR para la bombilla */
    text-align: center;
    width: 100%;
    max-width: 1200px; /* Limitar ancho para escritorio */
    margin: 0; /* Centrar */
    position: relative; /* CLAVE: Permite posicionamiento absoluto de elementos hijos */
    z-index: 1; /* Asegura que el contenido del hero esté por encima de la onda */
}

/* --- NUEVO: Contenedor para el logo y la onda que se hará sticky --- */
.sticky-header-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    position: relative; /* Para que el logo y la onda se posicionen dentro de él */
    padding-top: 20px; /* Espacio superior para el logo */
    padding-bottom: 20px; /* Espacio inferior para la onda */
    background-color: transparent; /* Por defecto transparente */
    z-index: 1000; /* Asegura que el header sticky esté por encima de todo */
}

.sticky-header-content.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Altura reducida cuando es sticky */
    background-color: var(--color-background-dark); /* Fondo oscuro para el header fijo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Sombra sutil */
    z-index: 1000; /* Asegura que esté por encima de otras secciones */
    flex-direction: row; /* Cambia a fila para centrar horizontalmente */
    justify-content: center;
    align-items: center;
    padding: 0 20px; /* Quita padding vertical y añade horizontal */
    overflow: hidden; /* Asegura que nada se salga */
}

/* Ajustes para el logo y la onda cuando el contenedor es sticky */
.sticky-header-content.is-sticky .logo-animado {
    width: 60px; /* Logo más pequeño */
    height: 60px;
    margin-bottom: 0; /* Elimina margen inferior */
    margin-right: 15px; /* Espacio entre logo y onda */
}

.sticky-header-content.is-sticky .frequency-wave-container {
    height: 60px; /* Onda más pequeña */
    position: absolute; /* Vuelve a relativo para fluir con el logo */
    left: auto;
    right: auto;
    top: 50%; /* Centra verticalmente la onda dentro del sticky header */
    transform: translateY(-50%); /* Ajuste para centrado perfecto */
    width: 100%; /* Asegura que ocupe el 100% del ancho del sticky header */
    z-index: 0; /* Asegura que la onda esté detrás del logo en el sticky header */
}

/* Ocultar el texto principal y la bombilla cuando el header es sticky */
.sticky-header-content.is-sticky ~ h1,
.sticky-header-content.is-sticky ~ p,
.sticky-header-content.is-sticky ~ .lightbulb-container {
    display: none;
}
/* --- FIN NUEVO: Contenedor para el logo y la onda que se hará sticky --- */

.hero-section h1 {
    font-size: 2.5em; /* Ajustado para ser imponente */
    font-weight: 900; /* Montserrat Black/Extra Bold para el slogan */
    margin-bottom: 10px;
    color: #1877f2; /* Manteniendo azul para el slogan */
    /* NUEVO: Efecto 3D/Relieve/Glitch en Título H1 */
    text-shadow: 
        3px 3px 6px rgba(0,0,0,0.8), /* Sombra más fuerte para relieve */
        -3px -3px 6px rgba(255,255,255,0.3); /* Luz más fuerte para relieve */
    animation: glitchEffect 2.5s infinite alternate; /* Aplicar efecto glitch, más frecuente y notorio */
}

.hero-section p {
    font-size: 1.1em;
    font-weight: 300; /* Light */
    max-width: 600px;
    color: var(--color-text-light); /* Texto de "Impulsando..." en blanco */
}

/* Sección Filosofía */
.filosofia-section {
    /* Degradado animado con colores más perceptibles y velocidad ajustada */
    background-image: linear-gradient(45deg, rgba(33, 33, 33, 0.7), rgba(74, 74, 74, 0.7), rgba(33, 33, 33, 0.7)); 
    background-size: 250% 250%; /* Permite el movimiento del degradado más pronunciado */
    animation: animateBackgroundGradient 8s linear infinite alternate; /* Animación de fondo más rápida */
    padding: 30px 20px;
    margin-top: 40px; /* Ajustado para dar espacio después del hero */
    width: 100%; /* Ocupa el 100% del ancho disponible */
    max-width: 900px; /* Limita el ancho máximo */
    margin: 0 auto; /* Centra la sección */
    border-radius: 8px;
    position: relative; /* ¡CLAVE PARA LAS PARTÍCULAS! Establece un contexto de posicionamiento para #tsparticles */
    overflow: hidden; /* Asegura que las partículas no se salgan de la sección */
}

.filosofia-section h2 {
    font-size: 2em; /* Título de sección */
    font-weight: 900; /* Extra Bold como en "Nuestros Prototipos" */
    text-align: center;
    margin-bottom: 20px;
    color: var(--color-text-light); /* Blanco puro */
    position: relative; /* Asegura que el contenido esté por encima de las partículas */
    z-index: 1; /* Asegura que el contenido esté por encima de las partículas */
    /* --- MODIFICADO: Efecto 3D/Relieve/Glitch en Títulos (más visible) --- */
    text-shadow: 
        3px 3px 6px rgba(0,0,0,0.8), /* Sombra más fuerte para relieve */
        -3px -3px 6px rgba(255,255,255,0.3); /* Luz más fuerte para relieve */
    animation: glitchEffect 2.5s infinite alternate; /* Aplicar efecto glitch, más frecuente y notorio */
    /* --- FIN MODIFICADO --- */
}

/* Keyframes para el efecto Glitch/Vibración en títulos (más pronunciado) */
@keyframes glitchEffect {
    0% { transform: translate(0); text-shadow: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgba(255,255,255,0.3); }
    2% { transform: translate(-4px, -4px); text-shadow: 4px 4px 7px rgba(0,0,0,0.9), -4px -4px 7px rgba(255,255,255,0.4); }
    4% { transform: translate(4px, 4px); text-shadow: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgba(255,255,255,0.3); }
    6% { transform: translate(-3px, 3px); text-shadow: 4px 4px 7px rgba(0,0,0,0.9), -4px -4px 7px rgba(255,255,255,0.4); }
    8% { transform: translate(3px, -3px); text-shadow: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgba(255,255,255,0.3); }
    10% { transform: translate(0); text-shadow: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgba(255,255,255,0.3); }
    /* El resto del tiempo no hay glitch */
    100% { transform: translate(0); text-shadow: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgba(255,255,255,0.3); }
}

.filosofia-section .content-box {
    position: relative; /* Asegura que el contenido esté por encima de las partículas */
    z-index: 1; /* Asegura que el contenido esté por encima de las partículas */
}

.filosofia-section .content-box h3 {
    font-size: 1.5em; /* Subtítulos (Misión, Visión, Valores) */
    font-weight: 600; /* Semi-bold */
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--color-text-light); /* Blanco puro */
}

.filosofia-section .content-box p {
    font-size: 1em; /* Texto de misión/visión */
    font-weight: 300; /* Light */
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--color-text-light); /* Blanco para contraste sobre gris oscuro */
}

.filosofia-section .content-box ul {
    list-style: none;
    padding-left: 0; /* Quitar padding por defecto de listas */
}

.filosofia-section .content-box li {
    font-size: 1em; /* Texto de valores */
    font-weight: 300; /* Light */
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--color-text-light); /* Blanco */
}

.filosofia-section .golden-circle {
    position: relative; /* Asegura que el contenido esté por encima de las partículas */
    z-index: 1; /* Asegura que el contenido esté por encima de las partículas */
}

.filosofia-section .golden-circle h3 {
    font-size: 1.3em; /* Texto de "Nuestro Propósito..." */
    font-weight: 600; /* Semi-bold */
    text-align: center;
    margin-top: 30px;
    color: var(--color-accent-gold); /* Dorado */
}

/* Estilos para la sección de Prototipos */
.prototipos-section {
    background-image: linear-gradient(45deg, var(--color-blue-section), #3F72AF, var(--color-blue-section)); /* Degradado animado con colores más perceptibles y velocidad ajustada */
    background-size: 250% 250%; /* Permite el movimiento del degradado más pronunciado */
    animation: animateBackgroundGradient 8s linear infinite alternate; /* Animación de fondo más rápida */
    padding: 40px 20px;
    margin-top: 40px;
    width: 100%;
    text-align: center;
    position: relative; /* También a esta sección para futuros efectos o z-index */
    overflow: hidden;
}

.prototipos-section h2 {
    color: var(--color-text-light); /* Blanco */
    font-size: 28px; /* Tamaño exacto de Penpot */
    font-weight: 900; /* Montserrat Black/Extra Bold de Penpot */
    margin-bottom: 20px;
    /* --- MODIFICADO: Efecto 3D/Relieve/Glitch en Títulos (más visible) --- */
    text-shadow: 
        3px 3px 6px rgba(0,0,0,0.8), /* Sombra más fuerte para relieve */
        -3px -3px 6px rgba(255,255,255,0.3); /* Luz más fuerte para relieve */
    animation: glitchEffect 2.5s infinite alternate; /* Aplicar efecto glitch, más frecuente y notorio */
    /* --- FIN MODIFICADO --- */
}

.prototipos-section p {
    color: var(--color-text-light); /* Blanco */
    font-size: 14px; /* Tamaño exacto de Penpot */
    font-weight: 300; /* Light de Penpot */
    max-width: 800px;
    margin: 0 auto 30px auto;
    line-height: 1.2; /* Ajustado para Penpot */
}

.prototipos-grid {
    display: grid;
    /* NUEVO: Columnas responsivas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 40px; /* Mantén este valor */
    max-width: 1000px;
    margin: 0 auto;
}

.prototipo-item {
    background-color: var(--color-light-bg-box);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    overflow: visible; /* Aseguramos que el contenido no se oculte */
}

.prototipo-item h3 {
    color: var(--color-background-dark); /* Negro para el título sobre fondo claro */
    font-size: 31px; /* Tamaño exacto de Penpot */
    font-weight: 300; /* Light de Penpot */
    margin-bottom: 15px;
}

/* Contenedor para el video */
.video-container {
    width: 100%; /* Ocupa todo el ancho disponible en el item */
    max-width: 900px; /* Limita el ancho máximo del contenedor del video */
    margin: 0 auto; /* Centra el contenedor del video dentro de su padre */
    padding-top: 177.77%; /* NUEVO: Relación de aspecto 1:2 (altura es el doble del ancho) para videos verticales */
    position: relative;
    margin-bottom: 15px;
    border-radius: 6px; /* Bordes redondeados para el contenedor del video */
    overflow: hidden; /* Asegura que el video no se salga de los bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra sutil para el video */
}
.prototipo-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que el video cubra el contenedor sin distorsión */
    border-radius: 6px; /* Bordes redondeados para el video mismo */
}

.prototipo-item p {
    color: var(--color-background-dark) !important; /* Forzamos el negro para que contraste con el fondo crema */
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 20px;
    /* Aseguramos que no se oculte por overflow en su propio nivel */
    overflow: visible !important;
    /* Aseguramos que no tenga display: none o visibility: hidden */
    display: block !important;
    visibility: visible !important;
}

/* Estilos para el botón CTA */
.cta-button {
    background-color: var(--color-orange-accent) !important; /* Forzar el color naranja */
    color: var(--color-text-light) !important; /* Forzar el texto blanco */
    padding: 12px 25px;
    border: none;
    border-radius: 50px; /* Botón ovalado */
    font-size: 1em;
    font-weight: 700; /* Bold */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 92, 0, 0.4); /* Sombra naranja */
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 0.5px;
}

.cta-button:hover {
    background-color: #FF7F33 !important; /* Naranja ligeramente más claro en hover */
    transform: translateY(-3px); /* Efecto de "levantar" */
    box-shadow: 0 6px 15px rgba(255, 92, 0, 0.6);
}

.cta-button:active {
    transform: translateY(0); /* Efecto de "presionar" */
    box-shadow: 0 2px 5px rgba(255, 92, 0, 0.3);
}


/* Estilos para la sección de Testimonios */
.testimonios-section {
    /* Degradado animado con colores más perceptibles y velocidad ajustada */
    background-image: linear-gradient(45deg, var(--color-gray-section), #4a4a4a, var(--color-gray-section));
    background-size: 250% 250%; /* Permite el movimiento del degradado más pronunciado */
    animation: animateBackgroundGradient 8s linear infinite alternate; /* Animación de fondo más rápida */
    padding: 50px 20px;
    margin-top: 40px;
    width: 100%;
    text-align: center;
    position: relative; /* También a esta sección para futuros efectos o z-index */
    overflow: hidden;
}

.testimonios-section h2 {
    color: var(--color-text-light); /* Blanco */
    font-size: 28px; /* Tamaño exacto de Penpot */
    font-weight: 900; /* Montserrat Black/Extra Bold de Penpot */
    margin-bottom: 30px;
    /* --- MODIFICADO: Efecto 3D/Relieve/Glitch en Títulos (más visible) --- */
    text-shadow: 
        3px 3px 6px rgba(0,0,0,0.8), /* Sombra más fuerte para relieve */
        -3px -3px 6px rgba(255,255,255,0.3); /* Luz más fuerte para relieve */
    animation: glitchEffect 2.5s infinite alternate; /* Aplicar efecto glitch, más frecuente y notorio */
    /* --- FIN MODIFICADO --- */
}

.testimonios-grid {
    display: grid !important; /* MODIFICADO: Forzar display: grid */
    grid-template-columns: 1fr;
    gap: 50px !important; /* MODIFICADO: Forzar el gap */
    max-width: 1000px;
    margin: 0 auto; /* Centra el grid */
}

.testimonio-item {
    background-color: transparent; /* Fondo transparente */
    padding: 25px;
    border: 2px solid var(--color-border-testimonial); /* Borde gris claro de Penpot */
    border-radius: 8px; /* Mantener bordes redondeados, Penpot no especifica aquí */
    text-align: left;
    box-shadow: none; /* Eliminar sombra, no se ve en Penpot */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonio-item p {
    color: #333; /* MODIFICADO: Cambiado a gris muy oscuro para legibilidad por defecto */
    font-size: 12px; /* Tamaño exacto de Penpot */
    font-weight: 300; /* Light de Penpot */
    line-height: 1.2; /* Ajustado para Penpot */
    margin-bottom: 15px;
}

.testimonio-item .autor {
    font-size: 12px; /* Tamaño exacto de Penpot */
    font-weight: 300; /* Light de Penpot */
    color: #555; /* MODIFICADO: Cambiado a gris medio para legibilidad por defecto */
    font-style: normal; /* No cursiva en Penpot */
    text-align: right;
    margin-top: auto;
}

.testimonio-item .testimonio-foto-placeholder {
    width: 80px; /* Ancho según el prototipo de Penpot */
    height: 80px; /* Alto igual para que sea un cuadrado */
    background-color: var(--color-placeholder-photo); /* Azul grisáceo de Penpot */
    border-radius: 50%; /* Para que sea circular, como suelen ser las fotos de perfil/testimonio */
    margin: 0 auto 15px auto; /* Centrar y darle margen inferior */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-background-dark); /* Color de texto si se añade un icono o iniciales */
    font-size: 0.9em;
}

/* Estilos para el Pie de Página (Footer) */
/* NOTA: La regla .footer-section ya está definida al inicio del archivo, se elimina la duplicidad aquí. */

.footer-content {
    margin-bottom: 20px;
    text-align: center; /* NUEVO: Centra el contenido */
}

.footer-content p {
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--color-text-gray); /* Gris claro como en Penpot */
}

.footer-content a {
    color: var(--color-text-gray); /* Gris claro como en Penpot */
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-content a:hover {
    color: var(--color-orange-accent); /* Naranja vibrante en hover */
}

.social-links {
    margin-top: 15px;
    text-align: center; /* NUEVO: Centra el contenido inline-block */
}

.social-links a {
    display: inline-block;
    margin: 0 15px;
    font-size: 1.1em;
    /* MODIFICADO: Color de los iconos sociales del footer a negro */
    color: var(--color-background-dark); 
    border-radius: 5px; /* Opcional: para esquinas ligeramente redondeadas */
    text-decoration: none; /* Opcional: para quitar el subrayado por defecto */
    /* NUEVO: Animación glitch para los iconos sociales del footer */
    animation: glitchEffect 2.5s infinite alternate;
}

.copyright {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--color-background-dark); /* Gris claro como en Penpot */
    margin-top: 20px;
}

/* --- MEDIA QUERIES para Responsividad (Ajustados con las nuevas fuentes/tamaños) --- */

/* Para pantallas medianas (tabletas, min-width: 768px) */
@media (min-width: 768px) {
    .hero-section {
        padding: 60px 40px 200px 40px; /* Ajustado el PADDING INFERIOR para tabletas */
    }
    /* Ajustes para el sticky header en tabletas */
    .sticky-header-content.is-sticky {
        height: 70px; /* Altura ligeramente menor para tabletas */
    }
    .sticky-header-content.is-sticky .logo-animado {
        width: 50px;
        height: 50px;
    }
    .sticky-header-content.is-sticky .frequency-wave-container {
        height: 50px; /* AJUSTE PARA TABLETAS: Aseguramos que la onda se vea bien */
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        }
    .frequency-wave-container {
        height: 100px; /* Mantén la altura normal de la onda */
        top: 300px; /* Ajuste vertical para tabletas si es necesario */
        width: 100%;
    }
    .lightbulb-container {
        width: 70px;
        height: 161px; /* Ajuste de altura para tabletas (70px * 2.3) */
        bottom: 0; /* Ancla el contenedor a la parte inferior de hero-section */
    }

    .prototipos-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tabletas */
    }
}

/* Para pantallas grandes (escritorios, min-width: 1024px) */
@media (min-width: 1024px) {
    .hero-section {
        padding: 80px 60px 220px 60px; /* Ajustado el PADDING INFERIOR para escritorio */
    }
    /* Ajustes para el sticky header en escritorio */
    .sticky-header-content.is-sticky {
        height: 80px; /* Altura estándar para escritorio */
    }
    .sticky-header-content.is-sticky .logo-animado {
        width: 60px;
        height: 60px;
    }
    .sticky-header-content.is-sticky .frequency-wave-container {
        height: 60px; /* AJUSTE PARA ESCRITORIOS: Aseguramos que la onda se vea bien */
        width: 100%; /* Asegura el 100% del ancho */
        transform: translateY(-50%);
    }
    
    .frequency-wave-container {
        height: 100px; /* Mantén la altura normal de la onda */
        top: 300px; /* Ajuste vertical para escritorios si es necesario */
        width: 100%;
    }
    .lightbulb-container {
        width: 80px;
        height: 192px; /* Ajuste de altura para escritorios (80px * 2.3) */
        bottom: 0; /* Ancla el contenedor a la parte inferior de hero-section */
    }

    .prototipos-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columnas en escritorio */
    }
}

/* Ajustar padding del body para compensar el header fijo */
body.sticky-header-active { /* Esta clase será añadida por JS cuando el header sticky esté activo */
    padding-top: 80px; /* Altura del header sticky */
}

/* Media queries para el padding del body en modo sticky */
@media (min-width: 768px) {
    body.sticky-header-active {
        padding-top: 70px; /* Ajuste para la altura del header sticky en tabletas */
    }
}

@media (min-width: 1024px) {
    body.sticky-header-active {
        padding-top: 80px; /* Ajuste para la altura del header sticky en escritorios */
    }
}

/* MODIFICADO: Las animaciones de revelado de secciones ahora se aplican a las tarjetas de acordeón */
/* Cuando el body tiene 'revealed', las tarjetas de acordeón se animan para aparecer */
/* NOTA: Estas reglas se han movido y ajustado en la sección #accordion-container.revealed .accordion-card */

/* --- NUEVOS ESTILOS PARA EL ACORDEÓN 3D FLOTANTE --- */

/* Contenedor principal de las tarjetas de acordeón */
#accordion-container {
    width: 100%;
    max-width: 900px; /* Mismo ancho máximo que tus secciones */
    margin: 40px auto; /* Espacio superior e inferior */
    display: none; /* INICIALMENTE OCULTO COMPLETAMENTE */
    flex-direction: column;
    gap: 20px; /* Espacio entre las tarjetas */
    /* Eliminamos opacity, visibility, max-height, overflow y transition de aquí */
    /* La transición de aparición de las tarjetas se manejará en .accordion-card */
}

/* Cuando la bombilla se enciende, el contenedor de acordeón se revela */
#accordion-container.revealed {
    display: flex; /* REVELADO: Se muestra como flexbox */
    /* Eliminamos opacity, transform, visibility, max-height, overflow de aquí */
}

/* Estilos base para cada tarjeta de acordeón */
.accordion-card {
    margin-bottom: 20px;
    border-radius: 12px; /* Bordes más redondeados para un look moderno */
    overflow: hidden; /* Asegura que el contenido no se salga */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), /* Sombra principal para efecto 3D */
                0 0 40px rgba(255, 255, 255, 0.05) inset; /* Brillo interno sutil */
    transition: all 0.8s ease-in-out, transform 0.3s ease-out; /* Transiciones suaves */
    position: relative; /* Para el efecto flotante */
    transform-style: preserve-3d; /* CLAVE para el efecto 3D */
    perspective: 1000px; /* Perspectiva para el giro 3D */
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */

    /* CLAVE: Ocultar cada tarjeta individualmente por defecto */
    opacity: 0;
    transform: translateY(50px);
    visibility: hidden;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0.8s ease-out; /* Transición para la animación de entrada */
}

/* Efecto flotante 3D al pasar el ratón */
.accordion-card:hover {
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); /* Ligeramente arriba y rotado */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6),
                0 0 50px rgba(255, 255, 255, 0.1) inset;
}

/* Cuando el contenedor principal se revela, las tarjetas individuales se animan */
#accordion-container.revealed .accordion-card {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Retrasos escalonados para la animación de entrada */
#accordion-container.revealed .accordion-card:nth-child(1) { animation-delay: 0.4s; }
#accordion-container.revealed .accordion-card:nth-child(2) { animation-delay: 0.6s; }
#accordion-container.revealed .accordion-card:nth-child(3) { animation-delay: 0.8s; }
#accordion-container.revealed .accordion-card:nth-child(4) { animation-delay: 1.0s; }


/* Colores de fondo para cada tipo de tarjeta, coincidiendo con sus secciones */
.filosofia-card {
    background-color: var(--color-gray-section); /* Gris oscuro */
}

.prototipos-card {
    background-color: var(--color-blue-section); /* Azul oscuro */
}

.testimonios-card {
    background-color: var(--color-gray-section); /* Gris oscuro */
}

.footer-card {
    background-color: var(--color-background-dark); /* Negro */
}

/* Encabezado de la tarjeta */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    color: var(--color-text-light);
    font-weight: 700; /* Bold para el título */
    font-size: 1.4em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Línea divisoria sutil */
    transition: background-color 0.3s ease;
}

.accordion-header h2 {
    margin: 0; /* Elimina márgenes por defecto del h2 */
    font-size: 1.2em; /* Ajustado para el tamaño del header de la tarjeta */
    font-weight: 900; /* Extra Bold como tus títulos de sección */
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.7), /* Sombra para relieve */
        -2px -2px 4px rgba(255,255,255,0.2); /* Luz para relieve */
    animation: glitchEffect 2.5s infinite alternate; /* Mantenemos el glitch en los títulos */
}

.accordion-icon {
    font-size: 1.8em; /* Tamaño del icono + / - */
    font-weight: 300; /* Ligero */
    transition: transform 0.3s ease;
    user-select: none; /* Evita que el texto del icono sea seleccionable */
}

/* Contenido de la tarjeta (sección real) */
.accordion-content {
    max-height: 0; /* Inicialmente colapsado */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; /* Transición suave */
    padding: 0 25px; /* Padding horizontal, vertical se animará */
    overflow-y: auto; /* Permite el scroll vertical si el contenido excede el max-height */
    -webkit-overflow-scrolling: touch;
}

/* Cuando la tarjeta está expandida */
.accordion-card.expanded .accordion-content {
    max-height: 9999px; /* Suficientemente grande para cualquier contenido */
    padding-top: 25px; /* Añade padding superior al expandir */
    padding-bottom: 25px; /* Añade padding inferior al expandir */
}

/* Estilos para las secciones internas dentro del acordeón */
/* Aseguramos que las secciones dentro del acordeón no tengan margen superior extra */
.accordion-content section,
.accordion-content footer { /* CORREGIDO: Incluir footer aquí */
    margin-top: 0 !important; /* Anula el margin-top de las secciones originales */
    padding: 0 !important; /* Anula el padding de las secciones originales, se maneja por .accordion-content */
    background-image: none !important; /* Elimina el degradado de fondo de las secciones, lo tiene la tarjeta */
    animation: none !important; /* Desactiva animaciones de fondo de las secciones */
    border-radius: 0 !important; /* Elimina border-radius de las secciones */
    box-shadow: none !important; /* Elimina sombras de las secciones */
    display: block !important; /* Asegura que la sección interna sea visible dentro de la tarjeta expandida */
    opacity: 1 !important; /* Asegura que la sección interna sea visible */
    transform: none !important; /* Elimina transformaciones de la sección interna */
    position: relative !important; /* Asegura el posicionamiento para el contenido interno */
    overflow: visible !important; /* Permite que el contenido interno se muestre */
}

/* Ajustes específicos para el contenido dentro de las secciones acordeón */
.accordion-content .filosofia-section .content-box,
.accordion-content .filosofia-section .golden-circle {
    /* Restauramos los estilos de z-index y posición si es necesario */
    position: relative;
    z-index: 1;
}

/* Asegurar que las partículas se muestren solo dentro de la tarjeta de filosofía expandida */
.accordion-card.filosofia-card .accordion-content #tsparticles {
    display: block; /* Muestra el contenedor de partículas */
}
/* Ocultar las partículas cuando la tarjeta no está expandida */
.accordion-card:not(.expanded) .accordion-content #tsparticles {
    display: none;
}

/* Ajustes para el texto dentro de las secciones para que se vea bien en las tarjetas */
.accordion-content .filosofia-section h2,
.accordion-content .prototipos-section h2,
.accordion-content .prototipos-section p, /* Agregado para que el texto de prototipos se vea bien */
.accordion-content .testimonios-section h2 {
    display: none; /* Oculta los títulos de sección duplicados dentro del contenido expandido */
}

.accordion-content .prototipos-section p {
    margin-bottom: 15px; /* Ajusta margen para que no haya doble margen */
}
.accordion-content .testimonios-section .testimonio-foto-placeholder {
    margin-top: 0; /* Ajusta margen para que no haya doble margen */
}
/* CORREGIDO: Asegurar que el contenido del footer se muestre correctamente */
.accordion-content .footer-section .footer-content,
.accordion-content .footer-section .copyright {
    display: block !important; /* Asegura que estos elementos no estén ocultos por alguna regla */
    opacity: 1 !important; /* Asegura que sean completamente visibles */
    /* Puedes añadir más ajustes de margen/padding si es necesario */
}


/* Media Queries para las tarjetas de acordeón */
@media (min-width: 768px) {
    #accordion-container {
        gap: 30px; /* Más espacio entre tarjetas en pantallas grandes */
    }
    .accordion-header {
        padding: 20px 25px; /* Revertido a valores originales para consistencia */
        font-size: 1.4em; /* Revertido a valores originales para consistencia */
    }
    .accordion-header h2 {
        font-size: 1.2em; /* Revertido a valores originales para consistencia */
    }
    .accordion-icon {
        font-size: 1.8em; /* Revertido a valores originales para consistencia */
    }
    .accordion-content {
        padding: 0 25px; /* Revertido a valores originales para consistencia */
    }
}

/* Para pantallas grandes (escritorios, min-width: 1024px) */
@media (min-width: 1024px) {
    .hero-section {
        padding: 80px 60px 220px 60px; /* Ajustado el PADDING INFERIOR para escritorio */
    }
    /* Ajustes para el sticky header en escritorio */
    .sticky-header-content.is-sticky {
        height: 80px; /* Altura estándar para escritorio */
    }
    .sticky-header-content.is-sticky .logo-animado {
        width: 60px;
        height: 60px;
    }
    .sticky-header-content.is-sticky .frequency-wave-container {
        height: 40px;
        width: 150px;
    }
    .frequency-wave-container {
        left: 60px; /* Alineado con el padding izquierdo de hero-section en escritorios */
        right: 60px; /* Alineado con el padding derecho de hero-section en escritorios */
        top: 150px; /* Ajuste vertical para escritorios */
    }
    .lightbulb-container {
        width: 80px;
        height: 192px; /* Ajuste de altura para escritorios (80px * 2.3) */
        bottom: 0; /* Ancla el contenedor a la parte inferior de hero-section */
    }

    .prototipos-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columnas en escritorio */
    }
}

/* Ajustar padding del body para compensar el header fijo */
body.sticky-header-active { /* Esta clase será añadida por JS cuando el header sticky esté activo */
    padding-top: 80px; /* Altura del header sticky */
}

/* Media queries para el padding del body en modo sticky */
@media (min-width: 768px) {
    body.sticky-header-active {
        padding-top: 70px; /* Ajuste para la altura del header sticky en tabletas */
    }
}

@media (min-width: 1024px) {
    body.sticky-header-active {
        padding-top: 80px; /* Ajuste para la altura del header sticky en escritorios */
    }
}

/* MODIFICADO: Las animaciones de revelado de secciones ahora se aplican a las tarjetas de acordeón */
/* Cuando el body tiene 'revealed', las tarjetas de acordeón se animan para aparecer */
/* NOTA: Estas reglas se han movido y ajustado en la sección #accordion-container.revealed .accordion-card */


/* Nueva animación para el efecto de aparición de las tarjetas */
@keyframes fadeInScaleUp {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ANIMACIONES INDIVIDUALES DE PROTOTIPOS */
.prototipo-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
    animation-play-state: paused; /* Inicia pausada hasta que se active .revealed */
}

/* Activar animación cuando la tarjeta padre está expandida */
.accordion-card.expanded .prototipo-item {
    animation-play-state: running;
}

/* Retraso escalonado para cada tarjeta */
.prototipo-item:nth-child(1) {
    animation-delay: 0.2s;
}
.prototipo-item:nth-child(2) {
    animation-delay: 0.4s;
}
.prototipo-item:nth-child(3) {
    animation-delay: 0.6s;
}
.prototipo-item:nth-child(4) {
    animation-delay: 0.8s;
}

/* Keyframes para efecto FadeIn + Up */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ANIMACIONES INDIVIDUALES DE TESTIMONIOS */
.testimonio-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
    animation-play-state: paused;
}

/* Activar animación cuando la tarjeta padre está expandida */
.accordion-card.expanded .testimonio-item {
    animation-play-state: running;
}

.testimonio-item:nth-child(1) {
    animation-delay: 0.2s;
}
.testimonio-item:nth-child(2) {
    animation-delay: 0.4s;
}
.testimonio-item:nth-child(3) {
    animation-delay: 0.6s;
}

.prototipo-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prototipo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.testimonio-item {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.testimonio-item:hover {
    background-color: #333; /* Fondo oscuro al pasar el cursor (gris muy oscuro/casi negro) */
    border-color: #333; /* Borde también oscuro */
    transform: translateY(-3px);
}

.testimonio-item:hover p,
.testimonio-item:hover .autor {
    color: var(--color-text-light); /* Cambiar texto a blanco al pasar el cursor */
}


.bulb-svg {
    transition: transform 0.2s ease;
}

.bulb-svg:active {
    transform: scale(0.95) rotate(-2deg);
}

.footer-content a,
.social-links a {
    position: relative;
    transition: color 0.3s ease;
}

.footer-content a::after,
.social-links a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-orange-accent);
    transition: width 0.3s ease;
}

.footer-content a:hover::after,
.social-links a:hover::after {
    width: 100%;
}

.lightbulb-container,
.testimonio-item,
.prototipo-item,
.footer-content a,
.social-links a {
    cursor: pointer;
}

/* --- Corrección para la visibilidad del Canvas de tsParticles --- */
/* Aseguramos que el canvas dentro de #tsparticles se comporte como un bloque para respetar sus dimensiones */
#tsparticles canvas {
    display: block !important; /* Forzamos display: block para que ocupe el 100% del ancho/alto de su padre */
}

/* --- Animaciones para la transformación digital de Pa'arriba (Restauradas y Ajustadas) --- */

/* Animación para el logo: Efecto de revelado/activación */
@keyframes logoReveal {
    0% {
        opacity: 0;
        transform: scale(0.5); /* Empieza pequeño */
    }
    50% {
        opacity: 1;
        transform: scale(1.1); /* Rebote sutil: un poco más grande de lo normal */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Vuelve a su tamaño normal */
    }
}

/* Contenedor del logo y donde se aplican los pseudo-elementos */
.logo-animado {
    position: relative; /* ¡Esencial para los pseudo-elementos! */
    width: 170px; /* Tamaño del contenedor, donde queremos que se dibuje el logo y las líneas */
    height: 170px; /* Tamaño del contenedor */
    margin: 0 auto; /* Para centrarlo horizontalmente */
    margin-top: -20px; /* NUEVO: Mueve el logo 20px hacia arriba. Ajusta este valor si necesitas más o menos */
    display: flex; /* Usamos flexbox para centrar la imagen dentro */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    overflow: hidden; /* ¡MUY IMPORTANTE: ESTA LÍNEA DEBE ESTAR ACTIVA PARA UN MEJOR EFECTO DE ESCANEO! */
    animation: logoReveal 1.5s ease-out forwards;
    z-index: 1;
    perspective: 600px; /* CLAVE: Define la perspectiva para el efecto 3D en el logo */
}

/* Estilos para la etiqueta <img> dentro del contenedor .logo-animado */
.logo-image {
    max-width: 100%; /* La imagen no será más ancha que su contenedor de 200px */
    max-height: 100%; /* La imagen no será más alta que su contenedor de 200px */
    display: block; /* Para evitar espacios extra */
    object-fit: contain; /* Ajusta la imagen dentro del contenedor sin recortarla */
    position: relative; /* ¡CLAVE: La imagen debe tener position para que z-index funcione! */
    z-index: 10000; /* Aseguramos que la imagen esté por encima del contenedor (z-index 1) */
    animation: logoHeartbeat 1s ease-in-out infinite; /* Nueva animación de latido para el logo */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7)); /* Más brillo para que resalte */
}

/* NUEVOS ESTILOS PARA LA ONDA DE FRECUENCIA */
.frequency-wave-container {
    height: 100px;
    overflow: hidden;
    position: absolute; /* CAMBIADO: Vuelve a ser absoluto */
    left: 0; /* NUEVO: Se ancla al borde izquierdo */
    right: 0; /* NUEVO: Se ancla al borde derecho */
    top: 97px;
    z-index: 9998;
    width: auto; /* CAMBIADO: Permite que left/right definan el ancho. Opcionalmente, puedes usar width: 100%; */
}

.frequency-wave {
    width: 220%; /* Doble ancho para permitir la animación de bucle suave */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* El SVG para la onda. Color de trazo blanco para consistencia. */
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 600 100' xmlns='http://www.w3.org/2000/svg'><polyline fill='none' stroke='%23FFFFFF' stroke-width='1.5' points='0,50 50,50 70,10 90,90 110,50 200,50 230,30 260,70 290,50 600,50' /></svg>");
    background-repeat: repeat-x; /* Repite la onda horizontalmente */
    background-size: 600px 100px; /* Tamaño de un patrón de SVG repetido */
    animation: moveWave 2s linear infinite, fadeWave 4s ease-in-out infinite; /* Combinamos animaciones */
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)); /* Efecto de destello/glow más difuso */
}

@keyframes moveWave {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Mueve una longitud de patrón completa para un bucle perfecto */
    }
}

/* Nueva animación para el efecto de fade in/fade out (destello) */
@keyframes fadeWave {
    0%, 100% {
        opacity: 0.1; /* Reducimos la opacidad mínima al 10% */
    }
    50% {
        opacity: 0.8; /* Opacidad máxima al 80% */
    }
}

/* Nueva animación para el latido del logo */
@keyframes logoHeartbeat {
    0%, 100% {
        transform: scale(1) rotateY(0deg); /* Vuelve a su estado normal, sin giro */
        opacity: 1;
    }
    50% {
        transform: scale(1.05) rotateY(5deg); /* Ligeramente más grande y con un giro sutil para efecto 3D */
        opacity: 0.9; /* Ligeramente menos opaco para el efecto de "titileo" */
    }
}

/* Estilos para la bombilla y la cadena */
.lightbulb-container {
    position: absolute; /* Posicionamiento absoluto dentro de hero-section */
    bottom: 0; /* Ancla el contenedor a la parte inferior de hero-section */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
    width: 60px; /* Ancho del contenedor */
    height: 144px; /* Alto del contenedor (60px * 2.3) para el SVG */
    z-index: 10001; /* Asegurar que esté por encima de todo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alinea el SVG al inicio (arriba) del contenedor */
    cursor: pointer;
    animation: swingChain 2s ease-in-out infinite alternate; /* Aplicamos la animación aquí */
}

/* Clase para ocultar la bombilla (si se usa en JS, aunque no la estamos usando activamente ahora) */
.lightbulb-container.hidden-bulb {
    opacity: 0;
    pointer-events: none; /* Deshabilita clics cuando está oculta */
    transform: translate(-50%, -50px); /* Opcional: moverla un poco hacia arriba al ocultar */
}

/* Estilos del SVG de la bombilla */
.bulb-svg {
    width: 100%;
    height: 100%;
    overflow: visible; /* Permitir que el glow se extienda */
}

.bulb-glass {
    fill: #FFFFFF; /* Color del vidrio de la bombilla apagada */
    stroke: #888;
    stroke-width: 2;
    transition: fill 0.5s ease-out;
}

.bulb-svg.on .bulb-glass {
    fill: #fff6d2 !important; /* Color del vidrio de la bombilla encendida */
    stroke: #ffdc73 !important; /* Añadido !important */
}

.glass-reflection {
    fill: #ffffff;
    opacity: 0.3;
}

.base-top, .base-middle, .base-bottom {
    fill: #696969; /* Color de la base metálica */
    stroke: #505050;
}

.base-top { stroke-width: 1; }
.base-middle { stroke-width: 1; }
.base-bottom { stroke-width: 0.5; }

.chain-line {
    stroke: #CCC;
    stroke-width: 1px; /* Grosor más delgado para las líneas de la cadena */
    stroke-dasharray: 4 2; /* Para simular eslabones: 4px de línea, 2px de espacio */
}
.chain-end {
    fill: #CCC;
    display: block; /* Hacemos visible el círculo final de la cadena */
    stroke: #888; /* Borde para el pasador */
    stroke-width: 0.5; /* Grosor del borde */
}

/* Círculo de luz (apagado por defecto) */
.bulb-glow {
    fill: yellow;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(10px);
}

/* Clase activa para encender */
/* Ahora el selector es más específico y coincide con el JS */
.bulb-svg.on .bulb-glow {
    opacity: 0.4 !important; /* Añadido !important */
}

/* Animación de balanceo para la bombilla y la cadena (aplicada al contenedor) */
@keyframes swingChain {
    0% { transform: translateX(-50%) rotate(-3deg); }
    100% { transform: translateX(-50%) rotate(3deg); }
}

/* Corrección para eliminar la barra de desplazamiento en el footer */
.footer-card .accordion-content {
    overflow: hidden; /* Asegura que no haya barras de desplazamiento */
}

/* Ajuste específico para el botón "Comprar Ahora" en el modal de la tienda */
#buy-now-btn {
    /* Forzamos el color de fondo naranja de tu variable --pa-arriba-orange-force */
    background-color: var(--pa-arriba-orange-force) !important;
    /* Forzamos el color de texto blanco de tu variable --color-text-light */
    color: var(--color-text-light) !important;
    /* Aseguramos que la opacidad de Tailwind sea 1 para que el color no se vea transparente */
    --tw-bg-opacity: 1 !important;
    /* Aseguramos que no haya background-image que lo anule, ya que algunos navegadores pueden tenerla por defecto */
    background-image: none !important;
    /* Aseguramos que el borde sea sólido y del mismo color si es necesario, aunque 'border: none;' ya lo hace */
    border: none !important;
}

/* Ajuste para el estado hover del botón */
#buy-now-btn:hover {
    background-color: var(--pa-arriba-orange-light) !important; /* Naranja ligeramente más claro en hover */
}

/* Aseguramos que los iconos de Font Awesome dentro de las tarjetas de categoría sean naranja */
.category-card .fas,
.category-card .far,
.category-card .fab {
    color: var(--pa-arriba-orange-force) !important; /* Forzamos el color naranja de tu marca */
}

/* =============================================================================
   Estilos para las Secciones de Galería Dinámica y Certificaciones (CONSOLIDADO Y CORREGIDO)
   ============================================================================= */
.full-width-gallery-container {
    width: 100%;
    overflow: hidden; /* Oculta el desbordamiento para el carrusel */
    background-color: var(--color-gray-section); /* Fondo al mismo gris de la landing */
    padding-bottom: 50px; /* Espacio debajo del carrusel */
}

.full-width-gallery-container h2 {
    color: var(--color-text-light); /* Título en blanco */
    margin-top: 50px; /* Margen superior para el título */
    margin-bottom: 30px; /* Margen inferior para el título */
}

.carousel-wrapper {
    overflow: hidden; /* Asegura que solo se vea el contenido del carrusel */
    width: 100%;
    position: relative;
    padding: 20px 0; /* Un poco de padding vertical para las imágenes */
}

.carousel-track {
    display: flex;
    white-space: nowrap; /* Evita que los ítems se envuelvan */
    animation: scrollCarousel 80s linear infinite; /* MODIFICADO: Aumentado la duración para más items */
    will-change: transform; /* Optimización para la animación */
}

/* Estilos generales para los ítems del carrusel (por defecto para las imágenes de la galería) */
.carousel-item {
    flex-shrink: 0; /* Evita que los ítems se encojan */
    width: 300px; /* Ancho base para las imágenes de la galería */
    height: 225px; /* Altura base para las imágenes de la galería (proporción 4:3) */
    margin-right: 20px; /* Espacio entre imágenes */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra para profundidad */
    transition: transform 0.3s ease-in-out; /* Transición suave para el efecto de expansión */
    cursor: pointer; /* Indica que es interactuable */
    border: 3px solid transparent; /* Borde transparente por defecto */
    position: relative; /* Necesario para posicionar el overlay */
    overflow: hidden; /* Oculta el contenido que se desborda al escalar */
}

/* Estilos para la imagen dentro del carousel-item (general) */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Estilos específicos para los ítems de logotipos (SOBRESCRITOS para .carousel-item) */
.carousel-item.logo-item {
    width: 180px; /* Ancho más pequeño para los logotipos */
    height: 180px; /* Altura igual para que sean cuadrados */
    margin-right: 30px; /* Más espacio entre logos */
    background-color: white; /* Fondo blanco para los logos */
    display: flex; /* Para centrar el logo verticalmente */
    align-items: center;
    justify-content: center;
    padding: 10px; /* Padding interno para el logo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más suave para logos */
}

/* Estilos específicos para la imagen dentro de un logo-item */
.carousel-item.logo-item img {
    width: 80%; /* Hacer el logo un poco más pequeño dentro del contenedor */
    height: 80%;
    object-fit: contain; /* CRÍTICO: 'contain' para logos para que no se corten o distorsionen */
}

/* Estilos para el overlay de texto */
.carousel-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente oscuro, un poco más opaco */
    display: flex;
    flex-direction: column; /* Para texto y quizás un icono */
    align-items: center;
    justify-content: center;
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.3s ease-in-out; /* Transición suave para la aparición */
    pointer-events: none; /* Permite hacer clic en la imagen subyacente si es necesario */
    padding: 10px; /* Padding para el texto del overlay */
}

.overlay-text {
    color: white;
    font-size: 1.2em; /* Tamaño de fuente ajustado para logos */
    font-weight: bold; /* Negrita */
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra para mejor legibilidad */
    font-family: 'Montserrat', sans-serif; /* Fuente de tu marca */
    white-space: normal; /* Permite que el texto se envuelva */
    line-height: 1.2;
}

/* Efecto de expansión y aparición del overlay al pasar el cursor */
.carousel-item:hover {
    transform: scale(1.2); /* Expansión del 20% */
    border-color: var(--pa-arriba-orange-force); /* Borde de color de marca al hover */
    z-index: 10; /* Asegura que la imagen expandida esté por encima */
}

.carousel-item:hover .carousel-item-overlay {
    opacity: 1; /* Hace visible el overlay al pasar el cursor */
}

/* Animación de desplazamiento del carrusel */
@keyframes scrollCarousel {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Se desplaza la mitad del track (el duplicado) */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-item {
        width: 250px; /* Ancho más pequeño en móviles */
        height: 187.5px; /* Altura ajustada */
        margin-right: 15px;
    }
    .carousel-track {
        animation: scrollCarousel 60s linear infinite; /* Animación más rápida en móviles */
    }
    .overlay-text {
        font-size: 1em; /* Tamaño de fuente ajustado para móviles */
    }
    .carousel-item.logo-item {
        width: 120px; /* Ancho más pequeño en móviles */
        height: 120px; /* Altura ajustada */
        margin-right: 20px;
    }
}

@media (max-width: 480px) {
    .carousel-item {
        width: 200px; /* Ancho aún más pequeño en móviles muy pequeños */
        height: 150px;
        margin-right: 10px;
    }
    .carousel-track {
        animation: scrollCarousel 60s linear infinite; /* Animación aún más rápida */
    }
    .overlay-text {
        font-size: 0.9em; /* Tamaño de fuente ajustado para móviles pequeños */
    }
    .carousel-item.logo-item {
        width: 100px; /* Ancho aún más pequeño en móviles muy pequeños */
        height: 100px;
        margin-right: 15px;
    }
}






/* =========================================
   CORRECCIONES FINALES DE DISEÑO (V3 - Definitiva)
   (Reemplaza el bloque anterior con este)
   ========================================= */

/* 1. FOOTER: Orden Nuclear para Color Negro */
/* Usamos el asterisco * para decir: "A todo lo que esté dentro del footer" */
footer, footer *, 
.footer-section, .footer-section * {
    color: #000000 !important; /* Negro puro obligatorio */
    font-weight: 700 !important; /* Negrita para que se lea bien */
}

/* Excepción: Al pasar el mouse por enlaces, se ponen blancos */
footer a:hover, .footer-section a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* 2. ZONA DE LA BOMBILLA */
.interaction-zone {
    position: relative; 
    display: inline-block;
    /* Añadimos margen arriba para que no tape el eslogan */
    margin-top: 50px; 
    /* Altura mínima para asegurar espacio */
    min-height: 200px;
}

/* 3. ANIMACIÓN (UBICACIÓN CORREGIDA) */
.click-hint-animation {
    position: absolute;
    /* CAMBIO CLAVE: Lo movemos DEBAJO del foco */
    top: 110%; 
    left: 50%;
    transform: translateX(-50%); /* Solo centramos horizontalmente */
    
    z-index: 999;
    pointer-events: none; 
    text-align: center;
    width: 250px; /* Un poco más ancho */
    
    animation: pulseEffect 1.5s infinite alternate;
}

.click-hint-animation span {
    display: block;
    /* Fondo blanco semitransparente para que se lea sobre cualquier fondo */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 4px 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@keyframes pulseEffect {
    0% { transform: translateX(-50%) scale(1); }
    100% { transform: translateX(-50%) scale(1.1); }
}

.hint-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease;
}