/* Universal box-sizing for easier layout calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- (NUEVO) Keyframes para la animación del banner --- */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- (NUEVO) Estilos para el Banner de Anuncios --- */
.announcement-banner {
    /* (MODIFICADO) Fondo rojo metálico con animación de brillo */
    background: linear-gradient(145deg, #c20000 0%, #ff6b6b 50%, #c20000 100%);
    background-size: 200% auto;
    color: white;
    padding: 0.75rem 0; /* (MODIFICADO) Eliminamos padding horizontal del contenedor */
    text-align: center;
    position: sticky; /* (MODIFICADO) Hacemos que el banner sea pegajoso */
    top: 0;
    z-index: 1002; /* Por encima del header */
    display: flex; justify-content: center; align-items: center;
    /* (MODIFICADO) Combinamos la animación de deslizamiento con la de brillo */
    animation: slideDown 0.5s ease-out forwards, rainbow-glow 5s linear infinite;
}
.announcement-banner p {
    margin: 0;
    font-weight: bold;
    display: inline;
    /* (NUEVO) Añadimos padding al contenido para que no toque los bordes*/
    padding: 0 2rem;
    /* (NUEVO) Sombra para que el texto resalte sobre el fondo animado */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.announcement-banner a {
    color: white;
    text-decoration: underline;
    margin-left: 0.5rem;
}
.announcement-close {
    position: absolute;
    right: 1.5rem;
    background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer;
}
/* (NUEVO) Ajuste para el botón de cerrar del banner en móviles */
@media (max-width: 768px) {
    .announcement-close { right: 0.5rem; }
}

:root {
    --primary-color: #00aaff;
    --bg-color: #121212;
    --text-color: #f1f1f1;
    --content-bg: #1e1e1e;
}

body {
    background-color: var(--bg-color); /* Color de respaldo por si la imagen no carga */
    /* (MODIFICADO) Se añade una capa oscura sobre la imagen de fondo para oscurecerla */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/back.png');
    background-size: cover; /* Hace que la imagen cubra toda la pantalla */
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen para que no se mueva al hacer scroll */
    color: var(--text-color);
    font-family: 'Lato', sans-serif;
    margin: 0;
    line-height: 1.6;


    /* (NUEVO) Medida de seguridad: Deshabilitar la selección de texto */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Estándar */
}
/* (NUEVO) Contenedor principal para la estructura flex */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.text-selectable {
    -webkit-user-select: auto; -ms-user-select: auto; user-select: auto;
}

.main-header {

    /* Efecto de vidrio esmerilado */
    background-color: rgba(30, 30, 30, 0.7); /* Aumentamos la opacidad al 70% */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Soporte para Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0; /* (MODIFICADO) Eliminamos padding horizontal para que ocupe todo el ancho */
    /* (NUEVO) Hacemos que el header sea "pegajoso" (sticky) */
    position: sticky;
    top: var(--banner-height, 0); /* (MODIFICADO) Se pega debajo del banner si existe */
    width: 100%;
    z-index: 1001;
}

.main-nav {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 4rem; /* Añade un espacio entre el logo y los enlaces de navegación */
}

.logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem; /* Aumentamos más el tamaño del texto */
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px; /* Espacio entre el texto y la imagen */
}

.logo-text-container {
    display: inline-block;
    /* (NUEVO) Evita que el texto del logo se divida en dos líneas */
    white-space: nowrap;
}

.logo-syenna {
    /* Rojo metálico más intenso */
    background: linear-gradient(145deg, #c20000 0%, #ff6b6b 50%, #c20000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Sombra para dar profundidad */
    
    /* Animación de brillo */
    background-size: 200% auto;
    animation: shine 3s linear infinite;
}

.logo-digital {
    /* Plateado metálico más intenso */
    background: linear-gradient(145deg, #9e9e9e 0%, #f5f5f5 50%, #9e9e9e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Sombra para dar profundidad */

    /* Animación de brillo */
    background-size: 200% auto;
    animation: shine 3s linear infinite;
}

/* Keyframes para la animación de brillo */
@keyframes shine {
    to {
        background-position: -200% center;
    }
}

/* (NUEVO) Keyframes para el brillo multicolor */
@keyframes rainbow-glow {
    to {
        filter: hue-rotate(360deg);
    }
}

/* (OPTIMIZADO) Animación de brillo para el botón de volver.
   Se anima la opacidad de un pseudo-elemento en lugar de 'box-shadow' para un rendimiento superior. */
.back-to-catalog-link {
    position: relative;
    z-index: 1;
}
.back-to-catalog-link::before {
    content: '';
    position: absolute;
    inset: -5px; /* Un poco más grande que el botón */
    border-radius: 50px;
    background: rgba(255, 107, 107, 0.7);
    filter: blur(10px);
    z-index: -1;
    opacity: 0;
    animation: subtle-glow 2.5s infinite ease-in-out;
}

.logo-img {
    height: 65px; /* Aumentamos más la altura del logo */
    width: auto;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    background-color: rgba(200, 0, 0, 0.6); /* Rojo con 60% de opacidad */
    padding: 0.5rem 1.5rem; /* Espaciado interno para crear el botón */
    border-radius: 50px; /* Bordes completamente redondeados (píldora) */
    border: 1px solid rgba(255, 107, 107, 0.5); /* Borde rojo sutil */
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    text-decoration: none; 
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-links a:hover {
    background-color: rgba(220, 0, 0, 0.85); /* Rojo más opaco al pasar el ratón */
    color: #fff;
    transform: translateY(-3px) scale(1.1); /* Efecto de elevación y escala más notorios */
}

/* (NUEVO) Estilo para el enlace de navegación activo */
.nav-links a.active-link {
    background-color: rgba(230, 57, 70, 0.9); /* Un rojo más brillante y opaco */
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.7); /* Un brillo para destacarlo */
    transform: none; /* Quitamos la animación de hover ya que está activo */
    cursor: default; /* El cursor no necesita ser un puntero si ya estamos en la página */
}


.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
}
.content-wrapper {
    max-width: 1200px;
    margin: 0.5rem auto; /* Reducimos más el margen superior */
    padding: 0 2rem; /* Restauramos el padding horizontal */
    flex-grow: 1; /* Hace que el contenido principal crezca para empujar el footer */
}
.content-wrapper {
    position: relative; /* Necesario para que z-index funcione correctamente */
}
.content-wrapper h1, .content-wrapper h2, .content-wrapper h3 {
    font-family: 'Montserrat', sans-serif;
}
/* --- Estilos para la nueva página de Inicio --- */

/* Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 2rem; /* Reducimos más el padding vertical */
    min-height: auto; /* Eliminamos la altura mínima para que se ajuste al contenido */
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    animation: title-glow 4s ease-in-out infinite;
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    color: #ccc;
}

/* Keyframes para la animación del título */
@keyframes title-glow {
    0%, 100% {
        text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    }
    50% {
        text-shadow: 2px 2px 15px rgba(255, 107, 107, 0.8), 0 0 30px rgba(255, 107, 107, 0.6);
    }
}

/* Section Title */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    font-family: 'Montserrat', sans-serif;
}

/* Catalog Page Specific */
.catalog-section {
    padding: 2.5rem 2rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    max-width: 600px;
    margin: -2rem auto 3rem auto;
    color: #ccc;
}
/* Benefits Section */
.benefits-section {
    display: flex;
    justify-content: space-around;
    gap: 1.5rem;
    padding: 2.5rem 2rem;
    text-align: center;
}

.benefit-item {
    background-color: rgba(30, 30, 30, 0.7);
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex: 1;
    max-width: 350px;
}

.benefit-item h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-top: 0;
}

/* Featured Products */
.featured-products {
    padding: 1.5rem 0;
}

.produtos {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* Reducimos el espacio para que quepan más elementos */
    flex-wrap: wrap;
}

.produto {
    background-color: rgba(30, 30, 30, 0.8);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* (MODIFICADO) Hacemos los productos más grandes, mostrando 3 por fila en escritorio */
    width: calc(33.333% - 1.5rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Mantenemos la transición para el hover */
    
    /* (MODIFICADO) Sombra base y animación de cambio de color */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); /* Sombra roja inicial */
    animation: rainbow-glow 5s linear infinite;
}

.produto:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    animation: none; /* Pausamos la animación de color en hover */
    filter: none; /* Reseteamos el filtro para que la sombra del hover sea la correcta */
}

.produto-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.produto h3 {
    padding: 1rem;
    margin: 0;
}

.btn-ver-mais {
    display: inline-block;
    /* (MODIFICADO) Cambiamos el color azul por el rojo de la marca */
    background-color: rgba(200, 0, 0, 0.7);
    color: white;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid rgba(255, 107, 107, 0.5); /* Borde sutil */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-ver-mais:hover {
    /* (MODIFICADO) Efecto de hover más intenso y consistente */
    background-color: rgba(220, 0, 0, 0.9);
    transform: translateY(-2px);
}

/* --- (NUEVO) Estilos para el Spinner de Carga del Catálogo --- */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Altura mínima para que el spinner sea visible */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #c20000; /* Color rojo de la marca */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.produtos.loading {
    display: none; /* Oculta los productos mientras carga */
}

/* How It Works Section */
.how-it-works {
    padding: 2.5rem 2rem;
}

.steps-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas más pequeñas */
}

.step {
    /* (MODIFICADO) Convertimos cada paso en una tarjeta */
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    flex: 1;
    max-width: 350px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(255, 107, 107, 0.5);
}

.step-icon {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 3px solid var(--bg-color);
}

.step-title {
    font-size: 1.4rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.step-description {
    color: #ccc;
    font-size: 1rem;
}

/* --- Social Links en el Footer --- */
.social-links {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-links a {
    color: #aaa;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #fff;
    transform: scale(1.2);
}

.main-footer {
    /* Efecto de vidrio esmerilado */
    background-color: rgba(30, 30, 30, 0.7); /* Mismo color y transparencia que el header */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Soporte para Safari */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil para separar */
    text-align: center;
    padding: 2rem; /* Restauramos el padding para el contenido interno */
    margin-top: 1.5rem;
    color: #aaa;
    font-size: 0.9rem;
}


/* (NUEVO) Estilos para el contador de visitas en el footer */
.visitor-counter {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #888;
}

/* --- FAQ Section --- */
.faq-section {
    padding: 2.5rem 2rem;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
}

.faq-item[open] {
    background-color: rgba(40, 40, 40, 0.8);
}

.faq-question {
    padding: 1.25rem;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    list-style: none; /* Oculta el marcador por defecto */
    font-family: 'Montserrat', sans-serif;
}

.faq-question::-webkit-details-marker {
    display: none; /* Oculta el marcador en Chrome/Safari */
}

.faq-question::after {
    content: '+'; /* Icono de "más" */
    position: absolute;
    right: 1.25rem;
    font-size: 1.5rem;
    transition: transform 0.2s ease-in-out;
}

.faq-item[open] .faq-question::after {
    transform: rotate(45deg); /* Gira el '+' para formar una 'x' */
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    margin: 0;
    color: #ccc;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- (NUEVO) Estilos para la Sección de Compatibilidad --- */
.compatibility-section {
    padding: 2.5rem 2rem;
    text-align: center;
}

.compatibility-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
}

.compat-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.compat-logo-item:hover {
    opacity: 1;
    transform: scale(1.1);
}

.compat-logo-item img {
    height: 60px; /* Ajusta el tamaño según tus logos */
}

    justify-content: center; /* Centra los logos */
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem; /* Espacio entre logos */
}

.compat-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 150px; /* Ancho fijo */
    height: 130px; /* Alto fijo */
    background-color: rgba(30, 30, 30, 0.6); /* Fondo semitransparente */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.compat-logo-item:hover {
    transform: translateY(-8px); /* Efecto de elevación */
    border-color: rgba(255, 107, 107, 0.7); /* Borde rojo al pasar el ratón */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6); /* Efecto de brillo neón rojo */
}

.compat-logo-item img {
    height: 60px; /* Ajusta el tamaño según tus logos */
}

/* --- (NUEVO) Estilos para la Sección de Testimonios --- */
.testimonials-section {
    padding: 2.5rem 2rem;
}

/* (MODIFICADO) Contenedor principal del carrusel */
.testimonial-carousel-wrapper {
    max-width: 700px; /* Ancho máximo para un solo testimonio */
    margin: 0 auto;
    overflow: hidden; /* Oculta los testimonios que no están en pantalla */
    position: relative; /* Necesario para posicionar los botones de navegación */
}

.testimonials-container {
    display: flex;
    /* (NUEVO) Transición suave para el deslizamiento */
    transition: transform 0.5s ease-in-out;
}

.testimonial-item {
    background-color: rgba(30, 30, 30, 0.7);
    border-left: 5px solid var(--primary-color);
    padding: 2rem;
    border-radius: 8px;    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* (MODIFICADO) Cada item ocupa el 100% del contenedor y no se encoge */
    flex: 0 0 100%;
    box-sizing: border-box;
}

.testimonial-comment {
    font-style: italic;
    font-size: 1.1rem;
    margin: 0 0 1.5rem 0;
    color: #ddd;
}

.testimonial-author {
    text-align: right;
    font-weight: bold;
    color: #ccc;
}

/* (NUEVO) Estilos para los botones de navegación del carrusel */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 10;
}
.carousel-btn:hover { background-color: rgba(0, 0, 0, 0.8); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }


/* --- Página de Detalles del Producto --- */
.product-page-container {
    padding: 1rem 0;
}

/* --- (NUEVO) Enlace para volver al catálogo --- */
.back-to-catalog-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.6rem 1.2rem;
    background-color: rgba(200, 0, 0, 0.7);
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    border: 1px solid rgba(255, 107, 107, 0.5);
    transition: background-color 0.3s ease, transform 0.2s ease;    
}
.back-to-catalog-link:hover {
    background-color: rgba(220, 0, 0, 0.9);
    transform: translateY(-2px);
    /* (OPTIMIZADO) Pausamos la animación del pseudo-elemento en hover */
}
.back-to-catalog-link:hover::before {
    animation-play-state: paused;
}

.product-detail-section {
    background-color: rgba(18, 18, 18, 0.6);
    border-radius: 10px;
    padding: 2rem;
}

.product-container {
    display: flex;
    gap: 3rem;
    margin-bottom: 3rem;
}

.product-gallery {
    flex: 1;
    max-width: 50%;
}

.main-image img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.thumbnail-images {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.thumbnail-images .thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.thumbnail-images .thumbnail:hover {
    border-color: var(--primary-color);
}

.thumbnail-images .thumbnail.active-thumbnail {
    border-color: var(--primary-color);
    opacity: 1;
}

.product-info {
    flex: 1;
}

.product-info h1 {
    font-size: 2.8rem;
    margin-top: 0;
}

.product-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.product-description {
    list-style: none;
    padding-left: 0;
}

.product-description li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.product-description li::before {
    content: '✓';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: 700;
}

.btn-comprar {
    display: inline-block;
    background-color: #c20000;
    color: white;
    padding: 1rem 2.5rem;
    margin-top: 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-comprar:hover {
    background-color: #ff6b6b;
    transform: scale(1.05);
}

/* Reviews Section */
.reviews-section {
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.review-item {
    background-color: rgba(30, 30, 30, 0.7);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-color);
}

.review-comment {
    font-style: italic;
    margin-bottom: 0.5rem;
}

.review-author {
    text-align: right;
    font-weight: 700;
    color: #ccc;
}

/* --- (NUEVO) Estilos para el Formulario de Opiniones --- */
.add-review-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* (NUEVO) Estilos para la fila del formulario */
.review-form .form-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.review-form .form-group-name { flex: 2; } /* El nombre ocupa más espacio */
.review-form .form-group-rating { flex: 1; }

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

.review-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.review-form input[type="text"],
.review-form textarea {
    width: 100%;
    padding: 0.75rem;
    background-color: #333;
    border: 1px solid #555;
    box-sizing: border-box;
    color: var(--text-color);
    border-radius: 4px;
    font-family: inherit;
}

.review-form textarea {
    resize: vertical;
}

.rating-stars {
    display: inline-block;
    direction: rtl; /* Pinta las estrellas de derecha a izquierda */
}

.rating-stars input[type="radio"] {
    display: none; /* Oculta los radio buttons */
}

.rating-stars label {
    /* (MODIFICADO) Reducimos el tamaño de las estrellas */
    font-size: 2rem;
    color: #444; /* Color de estrella vacía */
    cursor: pointer;
    transition: color 0.2s;
    /* (NUEVO) Asegura que las estrellas se muestren en una línea */
    display: inline-block;
}

/* Efecto hover: colorea la estrella y las anteriores */
.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input[type="radio"]:checked ~ label {
    color: #ffc107; /* Color de estrella llena */
}

.btn-submit-review {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.btn-submit-review:hover { background-color: #0088cc; }

/* --- Estilos para el Lightbox de Imágenes --- */
.lightbox {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo en la pantalla */
    z-index: 1003; /* (CORREGIDO) Aumentamos el z-index para que esté por encima del header y el banner */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si la imagen es muy grande */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro semitransparente */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-prev, .lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.lightbox-next { right: 0; border-radius: 3px 0 0 3px; }
.lightbox-prev { left: 0; }

.lightbox-prev:hover, .lightbox-next:hover { background-color: rgba(0,0,0,0.8); }

/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* (CORREGIDO) Añadimos position: relative para contener el menú de navegación móvil */
    .main-header {
        position: relative;
    }

    .main-nav {
        /* (MODIFICADO) Centramos el logo */
        justify-content: center;
        position: static; /* No es necesario position: relative si el hamburger se mueve */
        padding: 0 1rem;
    }

    .nav-links {
        display: none; /* Ocultar por defecto en pantallas pequeñas */
        position: absolute;
        top: 100%; /* (CORREGIDO) Se posiciona justo debajo del header */
        left: 0;
        width: 100%;
        background-color: rgba(30, 30, 30, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        text-align: center;
        padding: 2rem 0;
        gap: 1.5rem;
        z-index: 1000; /* Este z-index ahora es relativo al header */
    }

    .nav-links.active {
        display: flex; /* Mostrar cuando el menú está activo */
    }

    .hamburger-menu {
        display: flex;
        position: absolute;
        right: 1rem;
        top: 50%; /* Centrar verticalmente en el header */
        transform: translateY(-50%);
        z-index: 1003; /* Asegurar que esté por encima de todo */
    }

    .benefits-section, .steps-container, .product-container {
        flex-direction: column;
        align-items: center;
    }

    .product-gallery {
        max-width: 100%;
    }
    .produto {
        /* En pantallas medianas, volvemos a 2 por fila */
        width: calc(50% - 1.5rem);
    }
}

@media (max-width: 768px) {
    /* (CORREGIDO) Mejora el rendimiento y la visualización del fondo en móviles */
    /* (OPTIMIZADO) Cambiar background-attachment a 'scroll' en móviles es una mejora de rendimiento crucial. */
    body {
        background-attachment: scroll;
    }

    /* (CORREGIDO) Añadimos más espacio vertical en la sección principal en móvil */
    .hero-section {
        padding: 2rem 1rem;
    }
    /* (OPTIMIZADO) Reducimos el blur del header en móviles para mejorar rendimiento */
    .main-header { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
    .main-header {
        /* (MODIFICADO) Reducimos el padding vertical en móvil */
        padding: 0.8rem 0;
    }
    /* (NUEVO) Eliminamos el backdrop-filter en móviles pequeños para mejorar rendimiento */
    .nav-links {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .content-wrapper {
        /* (CORREGIDO) Forzamos el ancho al 100% para evitar desbordamiento */
        width: 100%;
        padding: 0 1rem; /* Reducimos el padding del contenido en móvil */
    }
    .logo {
        /* (MODIFICADO) Ajustamos el tamaño del logo y el espacio con la imagen */
        font-size: 2rem;
        gap: 15px;
    }
    .main-footer {
        padding: 1rem; /* Reducimos el padding en móvil */
        font-size: 0.9rem;
    }
    .logo-img {
        /* (MODIFICADO) Reducimos ligeramente la altura del logo en móvil */
        height: 55px;
    }
    .hero-title {
        /* (MODIFICADO) Hacemos el título del hero más grande y adaptable */
        font-size: clamp(2.2rem, 8vw, 2.8rem);
    }
    .hero-subtitle {
        /* (MODIFICADO) Ajustamos el tamaño de fuente para mejor lectura */
        font-size: 1.1rem;
    }
    /* (CORREGIDO) Ajustes para la sección de beneficios en móvil */
    .benefits-section {
        flex-direction: column; /* Forzamos la columna en móvil */
        align-items: center; /* Centramos los items */
        padding: 1.5rem 0.5rem; /* Reducir padding */
        gap: 1rem;
    }
    .benefit-item {
        padding: 1.5rem; /* Reducir padding interno */
    }
    .benefit-item h3 {
        font-size: 1.3rem;
    }
    /* (CORREGIDO) Forzamos la columna en la sección de pasos */
    .steps-container {
        flex-direction: column;
        align-items: center;
        padding: 0 1rem; /* (NUEVO) Añadimos padding para que no toque los bordes */
    }
    .section-title {
        font-size: 2rem;
    }
    .product-info h1 {
        font-size: 2.2rem;
    }
    .product-price {
        font-size: 1.8rem;
    }
    .produto {
        /* En pantallas pequeñas, 1 por fila */
        width: 90%;
    }
    /* (NUEVO) Ajustamos el padding del texto del banner en móvil */
    .announcement-banner p {
        padding: 0 1rem;
    }
    /* (MODIFICADO) Ajustamos la posición del botón de cerrar en móvil */
    .announcement-close {
        right: 0.5rem;
    }
    /* (MODIFICADO) Ajustes para la sección de compatibilidad en móvil */
    .compatibility-logos {
        gap: 1.5rem; /* Reducir espacio entre logos */
    }

    .compat-logo-item {
        width: 120px; /* Reducir ancho */
        height: 110px; /* Reducir alto */
        gap: 0.5rem;
        font-size: 0.9rem;
    }
    /* (CORREGIDO) Ajustamos la posición y tamaño de los botones del carrusel en móvil */
    .carousel-btn {
        width: 35px; /* Reducimos el tamaño */
        height: 35px;
    }
    .carousel-btn.prev {
        left: 5px; /* Más cerca del borde izquierdo */
    }
    .carousel-btn.next {
        right: 5px; /* Más cerca del borde derecho */
    }
    /* (CORREGIDO) Ajustamos el carrusel para móviles para evitar desbordamiento */
    .testimonial-carousel-wrapper { max-width: 100%; }
}

/* --- (CORREGIDO) Estilos para la página de Contacto con efecto Neón y transparencia --- */
.contact-social-links {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.contact-social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 150px;
    /* Fondo transparente con efecto blur */
    background-color: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid; /* El color se definirá por clase */
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.contact-social-link:hover {
    transform: translateY(-10px) scale(1.05);
}

.contact-social-link svg {
    width: 48px;
    height: 48px;
    margin-bottom: 0.8rem;
    transition: transform 0.3s ease;
}

.contact-social-link:hover svg {
    transform: scale(1.1);
}

.contact-social-link.whatsapp { border-color: #25D366; box-shadow: 0 0 15px rgba(37, 211, 102, 0.5); }
.contact-social-link.whatsapp:hover { background-color: rgba(37, 211, 102, 0.1); box-shadow: 0 0 25px rgba(37, 211, 102, 0.8); }

.contact-social-link.facebook { border-color: #1877F2; box-shadow: 0 0 15px rgba(24, 119, 242, 0.5); }
.contact-social-link.facebook:hover { background-color: rgba(24, 119, 242, 0.1); box-shadow: 0 0 25px rgba(24, 119, 242, 0.8); }

.contact-social-link.telegram { border-color: #2AABEE; box-shadow: 0 0 15px rgba(42, 171, 238, 0.5); }
.contact-social-link.telegram:hover { background-color: rgba(42, 171, 238, 0.1); box-shadow: 0 0 25px rgba(42, 171, 238, 0.8); }

.contact-social-link.email { border-color: #e63946; box-shadow: 0 0 15px rgba(230, 57, 70, 0.5); }
.contact-social-link.email:hover { background-color: rgba(230, 57, 70, 0.1); box-shadow: 0 0 25px rgba(230, 57, 70, 0.8); }

/* --- (NUEVO) Animación de aparición para secciones al hacer scroll --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px); /* Empieza ligeramente abajo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0); /* Vuelve a su posición original */
}

/* --- (NUEVO) Estilos para el botón "Volver Arriba" --- */
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(200, 0, 0, 0.8); /* Rojo de la marca */
    color: white;
    border: 1px solid rgba(255, 107, 107, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    /* Transición para aparecer y desaparecer suavemente */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top-btn:hover { background-color: rgba(220, 0, 0, 1); }