/* --- Variables de Color y Estilos Globales --- */
:root {
    --color-principal: #32620e; /* Verde */
    --color-acento: #ff914d;   /* Naranja */
    --color-fondo: #F6F9FC;
    --color-texto: #333;
    --color-blanco: #FFFFFF;
    --font-principal: 'Montserrat', sans-serif;
    --font-secundario: 'Lato', sans-serif;
    --font-display: var(--font-principal);
}

/* Bloquea el scroll del body cuando el menú está abierto */
body.menu-open {
    overflow: hidden;
}




/* --- Reset y Globales --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secundario);
    margin: 0;
    color: var(--color-texto);
    line-height: 1.6;
    background-color: var(--color-blanco);
    padding-top: 0; /* Se ajustará con JS */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: var(--font-principal);
    color: var(--color-principal);
    font-weight: 700;
}



/* --- Top Bar --- */
.top-bar {
    background-color: var(--color-acento);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
    font-size: 0.85rem;
    transition: all 0.4s ease;
    z-index: 1001;
    position: relative;
}

.top-bar.hidden {
    transform: translateY(-100%);
    padding: 0;
    opacity: 0;
}

.top-bar .container {
    display: flex;
    justify-content: center;
}

.top-bar-info {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.top-bar-info i {
    margin-right: 8px;
    color: var(--color-acento);
}

.top-bar-info a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

/* --- Header y Navegación --- */
.main-header {
    position: relative; /* Ya no es fijo por defecto */
    z-index: 1000;
    transition: background-color 0.4s ease, padding 0.4s ease; /* Transición suave */
}

/* Clase que se añade con JS al hacer scroll */
.main-header.fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
}

/* Ajuste para que el header no tenga fondo al inicio */
.main-header:not(.scrolled) {
    background-color: var(--color-principal);
    padding: 1rem 0;
}

/* Estilo del header cuando se hace scroll */
.main-header.scrolled {
    background-color: var(--color-acento); /* Cambia a naranja al hacer scroll */
    padding: 0.5rem 0; /* Añadimos un padding vertical para que no se vea apretado */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

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

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    animation: logoFadeIn 0.8s ease-out 0.2s forwards;
}

.logo img {
    height: 50px;
    filter: brightness(0) invert(1); /* Logo siempre en blanco */
}

.logo span {
    font-size: 1.6rem; /* Hacemos el nombre más grande */
    font-weight: 700;
    font-family: var(--font-principal);
    color: var(--color-blanco);
    transition: color 0.4s ease;
}

.main-nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 25px;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-blanco);
    font-weight: 700;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* --- Estilos para el Menú Desplegable --- */
.dropdown {
    position: relative;
}

.dropdown .fa-chevron-down, .dropdown .fa-chevron-right {
    font-size: 0.7em;
    margin-left: 5px;
}

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-blanco);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 280px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--color-texto);
    font-weight: normal;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background-color: var(--color-fondo);
    color: var(--color-acento);
}

/* Submenú */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* Regla clave para mostrar los menús al pasar el ratón */
.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* Estilo para el hover y para el enlace activo */
.main-nav a:hover,
.main-nav a.active {
    color: var(--color-acento);
}

/* Cuando el header tiene fondo, el hover y el activo cambian a verde */
.main-header.scrolled .main-nav a:hover,
.main-header.scrolled .main-nav a.active {
    color: var(--color-principal);
}

/* Línea animada debajo de los enlaces del menú */
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-acento);
    transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

/* La línea inferior también cambia de color sobre el fondo naranja */
.main-header.scrolled .main-nav a::after {
    background-color: var(--color-principal);
}

/* Botón de menú móvil */
.mobile-nav-toggle {
    display: none; /* Oculto por defecto en escritorio */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}
.mobile-nav-toggle span { display: block; width: 25px; height: 3px; background-color: var(--color-blanco); margin: 5px 0; transition: all 0.3s ease; }


.switchers {
    display: flex;
    gap: 10px;
    align-items: center;
}

.theme-switcher-btn {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1.2rem; /* Aumenta el tamaño del emoji */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-switcher-btn:hover {
    background-color: var(--color-acento);
}

        /* --- Language Switcher Dropdown --- */
        .lang-dropdown {
            position: relative;
        }

        .lang-globe-icon {
            font-size: 1.2rem;
            color: var(--color-blanco);
            padding: 10px;
            display: inline-block;
            transition: color 0.3s ease;
        }

        .lang-globe-icon:hover {
            color: var(--color-acento);
        }

        .main-header.scrolled .lang-globe-icon:hover {
            color: var(--color-principal);
        }

        .lang-dropdown .dropdown-menu {
            right: 0;
            left: auto;
            min-width: 180px; /* Adjust width */
        }

        .lang-option.active {
            font-weight: 700;
            color: var(--color-acento);
            background-color: var(--color-fondo);
        }

/* --- Nueva Sección Hero Slider (V3 - Dinámico) --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 95vh;
    overflow: hidden;
    background-color: #111;
}

.hero-slider .hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s;
}

.hero-slider .hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-slide .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.15);
    transition: transform 9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slide.active .hero-background {
    transform: scale(1);
}

/* Gradientes por defecto (izquierda a derecha) */
.hero-slide.gradient-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

/* Gradiente para texto a la derecha (derecha a izquierda) */
.hero-slide.gradient-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

.hero-slide .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-content {
    color: var(--color-blanco);
    max-width: 550px;
}

.hero-content.align-left { text-align: left; }
.hero-content.align-right { text-align: right; margin-left: auto; }

/* --- Lógica de Animación --- */

/* Estado inicial para todos los elementos animados */
.hero-content h1, .hero-content h2, .hero-content p, .hero-content .cta-button {
    opacity: 1; /* Cambiado de 0 a 1 para asegurar visibilidad */
}

/* Keyframes de Entrada */
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { to { opacity: 1; transform: translateX(0); } }

/* Keyframes de Salida */
@keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
@keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
@keyframes fadeOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); } }
@keyframes fadeOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }

/* Aplicación de animaciones de ENTRADA en la diapositiva activa */
.hero-slide.active .animate-from-bottom h1, .hero-slide.active .animate-from-bottom h2 { transform: translateY(20px); animation: fadeInUp 1s ease 0.6s forwards; }
.hero-slide.active .animate-from-bottom p { transform: translateY(20px); animation: fadeInUp 1s ease 0.9s forwards; }
.hero-slide.active .animate-from-bottom .cta-button { transform: translateY(20px); animation: fadeInUp 1s ease 1.2s forwards; }

.hero-slide.active .animate-from-top h1, .hero-slide.active .animate-from-top h2 { transform: translateY(-20px); animation: fadeInDown 1s ease 0.6s forwards; }
.hero-slide.active .animate-from-top p { transform: translateY(-20px); animation: fadeInDown 1s ease 0.9s forwards; }
.hero-slide.active .animate-from-top .cta-button { transform: translateY(-20px); animation: fadeInDown 1s ease 1.2s forwards; }

.hero-slide.active .animate-from-left h1, .hero-slide.active .animate-from-left h2 { transform: translateX(-20px); animation: fadeInLeft 1s ease 0.6s forwards; }
.hero-slide.active .animate-from-left p { transform: translateX(-20px); animation: fadeInLeft 1s ease 0.9s forwards; }
.hero-slide.active .animate-from-left .cta-button { transform: translateX(-20px); animation: fadeInLeft 1s ease 1.2s forwards; }

.hero-slide.active .animate-from-right h1, .hero-slide.active .animate-from-right h2 { transform: translateX(20px); animation: fadeInRight 1s ease 0.6s forwards; }
.hero-slide.active .animate-from-right p { transform: translateX(20px); animation: fadeInRight 1s ease 0.9s forwards; }
.hero-slide.active .animate-from-right .cta-button { transform: translateX(20px); animation: fadeInRight 1s ease 1.2s forwards; }

/* Aplicación de animaciones de SALIDA en la diapositiva que se va */
.hero-slide.exiting .animate-from-bottom h1, .hero-slide.exiting .animate-from-bottom h2, .hero-slide.exiting .animate-from-bottom p, .hero-slide.exiting .animate-from-bottom .cta-button { animation: fadeOutDown 0.5s ease forwards; }
.hero-slide.exiting .animate-from-top h1, .hero-slide.exiting .animate-from-top h2, .hero-slide.exiting .animate-from-top p, .hero-slide.exiting .animate-from-top .cta-button { animation: fadeOutUp 0.5s ease forwards; }
.hero-slide.exiting .animate-from-left h1, .hero-slide.exiting .animate-from-left h2, .hero-slide.exiting .animate-from-left p, .hero-slide.exiting .animate-from-left .cta-button { animation: fadeOutLeft 0.5s ease forwards; }
.hero-slide.exiting .animate-from-right h1, .hero-slide.exiting .animate-from-right h2, .hero-slide.exiting .animate-from-right p, .hero-slide.exiting .animate-from-right .cta-button { animation: fadeOutRight 0.5s ease forwards; }


/* Estilos de Texto y Botón */
.hero-content h1, .hero-content h2 {
    font-family: var(--font-display);
    color: var(--color-blanco);
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.15;
    text-shadow: 1px 1px 15px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    margin-bottom: 35px;
    font-weight: 400;
    max-width: 500px;
    text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}

.hero-content .cta-button {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border: 2px solid var(--color-acento);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hero-content .cta-button:hover {
    background-color: transparent;
    color: var(--color-acento);
    transform: translateY(-3px);
}

/* Navegación del Slider */
.slider-nav {
    position: absolute;
    bottom: 60px;
    right: 60px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.nav-arrow {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    user-select: none;
}

.nav-arrow:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-blanco);
    color: var(--color-blanco);
}

.slider-dots {
    position: absolute;
    bottom: 80px;
    left: 60px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
}

.slider-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.slider-dot:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.slider-dot.active {
    background-color: var(--color-blanco);
    transform: scale(1.2);
}

.slider-dot.active::before {
    border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .hero-content.align-right { margin-left: 0; }
    .hero-content {
        text-align: center;
        padding: 0 15px;
        max-width: 100%;
    }
    .hero-slide.gradient-left::before, .hero-slide.gradient-right::before {
        background: rgba(0,0,0,0.6);
    }
    .slider-dots { left: 50%; transform: translateX(-50%); flex-direction: row; bottom: 20px; }
    .slider-nav { display: none; }
}


/* --- Secciones Generales --- */
section {
    padding: 80px 0;
}

section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

/* --- About Section --- */
.about-section {
    background-color: var(--color-fondo);
}

/* --- Sección de Productos --- */
.product-section {
    background-color: var(--color-blanco);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    perspective: 1000px;
    padding-top: 20px;
}

.product-card {
    background-color: var(--color-blanco);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.product-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

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

.product-card h3 {
    margin-top: 20px;
}

.product-card p {
    padding: 0 20px;
    flex-grow: 1;
}

.info-button {
    display: inline-block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: var(--color-principal);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.info-button:hover, .card-button:hover {
    background-color: var(--color-acento);
}

/* --- Sección de Novedades --- */
.news-section {
    background-color: var(--color-fondo);
}

.news-item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    font-size: 0.9rem;
    color: #777;
}

.news-item a {
    color: var(--color-acento);
    font-weight: 700;
    text-decoration: none;
}

/* --- Sección de Testimonios --- */
.testimonials-section {
    background-color: var(--color-fondo);
}

.testimonial-carousel-wrapper {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.testimonial-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    min-width: 100%;
    box-sizing: border-box;
    padding: 40px;
    text-align: center;
}

.testimonial-quote {
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
}

.testimonial-quote::before {
    content: '“';
    font-family: 'Georgia', serif;
    font-size: 4rem;
    color: var(--color-acento);
    position: absolute;
    top: -20px;
    left: -30px;
    opacity: 0.5;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-dots {
    text-align: center;
    margin-top: 20px;
}

.testimonial-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.testimonial-dot.active {
    background-color: var(--color-acento);
}

/* --- Sección de Suscripción --- */
.subscription-section {
    background: linear-gradient(to right, #232526, #414345);
    color: #fff;
    text-align: center;
}



.subscription-section h2 {
    color: #fff;
}



.subscription-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.subscription-form input {
    padding: 15px;
    width: 300px;
    max-width: 100%;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

.subscription-form button {
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    background-color: var(--color-acento);
    color: var(--color-blanco);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscription-form button:hover {
    background-color: #d96f1c;
}

#form-message {
    margin-top: 15px;
    font-weight: bold;
}
#form-message.success { color: #7FFF00; }
#form-message.error { color: #FF4747; }

/* --- Footer --- */
.main-footer {
    background: linear-gradient(to right, var(--color-principal), var(--color-acento));
    color: #ccc;
    padding: 40px 0 20px;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 20px;
    font-size: 0.9rem;
}



.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.logo-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 15px;
}

.logo-footer img {
    height: 40px;
    filter: brightness(0) invert(1); /* Logo del footer en blanco */
}

.logo-footer .logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-principal);
    color: var(--color-blanco);
}

.footer-desc {
    font-size: 0.9rem;
}

.main-footer h4 {
    font-family: var(--font-principal);
    color: var(--color-blanco);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.footer-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav li {
    margin-bottom: 8px;
}

.footer-nav a {
    text-decoration: none;
    color: #ccc;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--color-blanco);
}

.footer-social a {
    margin-right: 15px;
}

.footer-social img {
    height: 24px;
    transition: opacity 0.3s ease;
}

/* --- Media Queries para Responsividad --- */
@media (max-width: 768px) {
    /* --- INICIO: Estilos del Panel de Navegación Móvil --- */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; /* Oculto fuera de la pantalla */
        width: 280px; /* Un poco más de ancho para mejor visibilidad */
        height: 100vh;
        background-color: var(--color-principal);
        flex-direction: column;
        justify-content: space-between; /* Empuja los switchers al final */
        padding: 80px 0 40px 0; /* Padding superior e inferior */
        transition: right 0.4s ease-in-out;
        z-index: 1000;
        gap: 0;
        overflow-y: auto; /* Permite scroll si el menú es muy largo */
    }

    .main-nav.open {
        right: 0; /* Muestra el menú */
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    }

    .mobile-nav-toggle {
        display: block; /* Muestra el botón hamburguesa */
    }

    /* Estilo del botón 'X' para cerrar */
    .mobile-nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
    
    /* --- Estilos Mejorados para Menú Móvil y Submenús --- */

    /* Contenedor de la lista principal y los switchers */
    .main-nav .nav-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Ajustes para los ítems del menú principal */
    .main-nav > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        padding: 0;
    }
    .main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-nav > ul > li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-nav a {
        padding: 15px 20px; /* Aumenta el área táctil */
        display: block;
        width: 100%;
        color: var(--color-blanco) !important;
        font-size: 1rem;
    }
    .main-nav a:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }
    .main-nav a::after {
        display: none; /* Elimina la línea animada en móvil */
    }

    /* Posicionamiento del icono de flecha */
    .dropdown > a, .dropdown-submenu > a {
        position: relative;
    }
    .dropdown .fa-chevron-down, .dropdown .fa-chevron-right {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        padding: 10px; /* Aumenta área táctil del icono */
    }
    
    /* Gira la flecha cuando el submenú está abierto */
    .dropdown.submenu-open > a > .fa-chevron-down,
    .dropdown-submenu.submenu-open > a > .fa-chevron-right {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Reinicio de estilos de submenú para móvil */
    .dropdown-menu {
        opacity: 1;
        visibility: visible;
        position: static;
        display: none; /* Oculto por defecto, JS lo mostrará */
        min-width: 100%;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.2); /* Fondo para distinguir jerarquía */
        padding: 0;
        margin: 0;
        transition: none;
        border-radius: 0;
    }

    /* Muestra el submenú cuando el elemento padre tiene la clase .submenu-open */
    .dropdown.submenu-open > .dropdown-menu,
    .dropdown-submenu.submenu-open > .dropdown-menu {
        display: block;
    }

    /* Indentación para los elementos del submenú */
    .dropdown-menu a {
        padding-left: 40px;
    }
    .dropdown-submenu .dropdown-menu a {
        padding-left: 60px;
    }
    
    /* Estilos para los Switchers de Idioma y Tema */
    .main-nav .switchers {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 20px;
        margin-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }


    /* --- FIN: Estilos de Navegación Móvil --- */


    /* --- Otros estilos responsive que ya tenías --- */
    .main-header .container {
        justify-content: space-between;
    }

    .hero {
        padding: 150px 0;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

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

    .form-row {
        flex-direction: column;
    }

    .testimonial-submit-wrapper {
        grid-template-columns: 1fr;
    }
}

/* --- Botón Volver Arriba --- */
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top-btn:hover {
    background-color: var(--color-principal);
    transform: scale(1.1);
}

/* --- Página de Contacto --- */
.contact-page-section {
    padding: 60px 0;
    background-color: var(--color-fondo);
}

.contact-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

.main-contact-form {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-blanco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.form-row {
    display: flex;
    gap: 20px;
}


.form-group {
    margin-bottom: 20px;
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--color-texto);
}

.required-asterisk {
    color: var(--color-acento);
    margin-left: 4px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--font-secundario);
    background-color: var(--color-blanco); /* Para asegurar visibilidad en modo oscuro */
    color: var(--color-texto);
}

.form-group textarea {
    resize: vertical;
}

#contact-form-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    display: none; /* Se muestra con JS */
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

#testimonial-form-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    display: none; /* Se muestra con JS */
}

/* --- Nuevo Formulario de Testimonios --- */
.testimonial-submit-wrapper {
    max-width: 800px;
    margin: 60px auto 0 auto;
    padding: 40px;
    background-color: var(--color-blanco);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

.testimonial-submit-intro h3 {
    font-size: 1.8rem;
    margin-top: 0;
}

.testimonial-submit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.testimonial-submit-form .form-group {
    margin-bottom: 0;
}

.testimonial-submit-form .full-width {
    grid-column: 1 / -1;
}

.testimonial-submit-form input,
.testimonial-submit-form textarea {
    background-color: var(--color-fondo);
    border: 1px solid #e0e0e0;
}

@media (max-width: 768px) {
    .testimonial-submit-wrapper {
        grid-template-columns: 1fr;
    }
}

/* --- Widget de Chat Integrado con Colores Corporativos --- */
.chat-button { position: fixed; bottom: 20px; right: 80px; background-color: var(--color-principal); color: var(--color-blanco); width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1051; transition: transform 0.3s ease, background-color 0.3s ease; }
.chat-button:hover { transform: scale(1.1); background-color: var(--color-acento); }
.chat-window { position: fixed; bottom: 90px; right: 20px; width: 350px; max-width: 90vw; background: var(--color-blanco); border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; z-index: 1050; transform: scale(0); transform-origin: bottom right; transition: transform 0.3s ease-in-out; }
.chat-window.open { transform: scale(1); }
.chat-header { background-color: var(--color-principal); color: var(--color-blanco); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }
.chat-header h3 { margin: 0; font-size: 1.1rem; color: white; }
.chat-close { background: none; border: none; color: var(--color-blanco); font-size: 2rem; cursor: pointer; line-height: 1; padding: 0; }
.chat-end-btn { background-color: transparent; border: 1px solid var(--color-blanco); color: var(--color-blanco); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; transition: background-color 0.3s, color 0.3s; }
.chat-end-btn:hover { background-color: var(--color-blanco); color: var(--color-principal); }
.chat-body { flex-grow: 1; padding: 15px; height: 300px; overflow-y: auto; background-color: var(--color-fondo); }
.message { margin-bottom: 15px; display: flex; max-width: 80%; }
.message img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    align-self: flex-end;
}
.message p { margin: 0; padding: 10px 15px; border-radius: 18px; line-height: 1.4; }
.message.received { align-self: flex-start; }
.message.received p { background-color: #e0f2e9; color: #1e4620; border-bottom-left-radius: 4px; }
.message.typing p {
    font-style: italic;
    color: #555;
    background-color: #e9e9e9;
}
.message.sent { margin-left: auto; }
.message.sent p { background-color: var(--color-acento); color: var(--color-blanco); border-bottom-right-radius: 4px; }
.chat-footer { display: flex; padding: 10px; border-top: 1px solid #ddd; background-color: var(--color-blanco); }
.chat-footer { position: relative; /* Necesario para posicionar el picker */ display: flex; align-items: center; padding: 10px; border-top: 1px solid #ddd; background-color: var(--color-blanco); }
.chat-footer input { flex-grow: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px; font-size: 1rem; }
.chat-footer input:focus { outline: none; border-color: var(--color-acento); }
.chat-footer button { background-color: var(--color-acento); border: none; border-radius: 50%; width: 40px; height: 40px; margin-left: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Estilos para el selector de Emojis */
.emoji-btn {
    background: none;
    border: none;
    font-size: 1.2rem; /* Tamaño reducido */
    cursor: pointer;
    padding: 0 8px 0 0;
    margin-left: 0;
    width: auto;
    height: auto;
    display: flex; /* Para centrar el contenido */
    align-items: center;
}

.emoji-picker {
    position: absolute;
    bottom: 60px; /* Justo encima del footer del chat */
    left: 10px;
    width: 300px;
    background: var(--color-blanco);
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px;
    display: none; /* Oculto por defecto */
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
}
.emoji-picker.open { display: grid; }
.emoji-picker span { cursor: pointer; font-size: 1.5rem; text-align: center; border-radius: 4px; padding: 2px; }
.emoji-picker span:hover { background-color: #eee; }

/* Estilos para el selector de Avatares */
.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; margin-top: 10px; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; border-radius: 4px; }
.avatar-picker label { cursor: pointer; text-align: center; }
.avatar-picker img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; transition: transform 0.2s; }
.avatar-picker input[type="radio"] { display: none; }
.avatar-picker input[type="radio"]:checked + img { transform: scale(1.1); box-shadow: 0 0 10px var(--color-acento); }


/* --- Modales (Inactividad y Valoración) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--color-blanco);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.link-button {
    background: none;
    border: none;
    color: var(--color-principal);
    cursor: pointer;
    text-decoration: underline;
}

.modal-content h4 {
    margin-top: 0;
    font-size: 1.5rem;
}

.star-rating {
    direction: rtl;
    display: inline-block;
    padding: 20px 0;
}

.star-rating .star {
    font-size: 3rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating .star:hover,
.star-rating .star:hover ~ .star,
.star-rating .star.selected,
.star-rating .star.selected ~ .star {
    color: var(--color-acento);
}

#rating-comment {
    width: 100%;
    height: 80px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc; /* Corregido: --color-borde no estaba definido */
    margin-bottom: 20px;
    font-family: var(--font-secundario);
}

#submit-rating-btn {
    opacity: 1; /* Sobrescribir la opacidad inicial de cta-button */
}

/* --- Modal de Información de Producto --- */
.product-info-modal-content {
    text-align: left;
}

.product-info-modal-content h3 {
    text-align: center;
    margin-top: 0;
}

.product-info-modal-content .options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.product-info-modal-content .option-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-info-modal-content .option-card:hover {
    border-color: var(--color-acento);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-info-modal-content .option-card h4 {
    margin: 0 0 5px 0;
}

.product-info-modal-content .option-card p {
    margin: 0;
    font-size: 0.9rem;
}

/* =====================================================================================
   REGLAS PARA OCULTAR LA BARRA Y ELEMENTOS DE GOOGLE TRANSLATE
   ===================================================================================== */

/* Elimina el espacio superior que añade el banner */
body {
    top: 0 !important;
}

/* Oculta el banner, el tooltip y otros elementos emergentes de Google Translate */
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.goog-tooltip,
#goog-gt-tt {
    display: none !important;
}

.goog-tooltip:hover {
    display: none !important;
}

/* Evita el resaltado del texto traducido */
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fix para botones de formulario invisibles */
#main-contact-form .cta-button,
#testimonial-submit-form .cta-button {
    opacity: 1;
}

/* --- Estilos para Indicador de Estado de Mensaje --- */
.message.sent p {
    position: relative;
    padding-right: 45px; /* Espacio para el indicador y el tick */
}

.status-indicator {
    position: absolute;
    bottom: 6px;
    right: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.status-indicator.sent {
    color: rgba(255, 255, 255, 0.7);
}

.status-indicator.delivered {
    color: rgba(255, 255, 255, 0.7);
}

.status-indicator.read {
    color: #34B7F1; /* Azul para el estado de leído */
}