/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--accent-color);
    transition: padding-right 0.3s ease; /* Para cuando el scroll se desactiva */
}

/* Definición de variables */
:root {
    --primary-color: forestgreen;
    --secondary-color: #81c784;
    --accent-color: #f0f0f0;
    --highlight-color: #f9f9f9;
    --dark-color: #333;
}



/* Estilo del header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave debajo del header */
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.menu-toggle:focus-visible {
    outline: 2px solid #ff0;
}

/* Estilo del menú */
.menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 10px;
    width: 200px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000; /* Asegura que el menú esté sobre el contenido */
    background-color: var(--highlight-color);
}

.menu.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

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

.menu li {
    border-bottom: 1px solid #555;
}

.menu li:last-child {
    border-bottom: none;
}

.menu a {
    display: block;
    padding: 10px 20px;
    color: var(--dark-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.menu a:hover {
    background-color: var(--accent-color);
}

.menu a:focus-visible {
    background-color: #ddd;
}

/* Adaptación para pantallas grandes */
@media (min-width: 768px) {
    .menu {
        display: flex;
        position: static;
        flex-direction: row;
        background: none;
        box-shadow: none;
        width: auto;
        border-radius: 0;
        opacity: 1;
        transform: none;
    }

    .menu ul {
        display: flex;
    }

    .menu li {
        border: none;
        padding: 10px 20px;
    }

    .menu-toggle {
        display: none;
    }
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 767px) {
    .menu-toggle {
        display: block;
    }

    .menu {
        display: none;
        flex-direction: column;
        position: fixed; /* Menú en posición fija sobre el contenido */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 999; /* Menú sobre todo */
        overflow-y: auto;
    }

    .menu.visible {
        display: flex;
    }

    .menu a {
        padding: 15px 20px;
        border-bottom: 1px solid #ddd;
    }
}

/* Para evitar que el body haga scroll cuando el menú está visible */
body.no-scroll {
    overflow: hidden; /* Desactiva el scroll */
}

/* Estilo de las secciones */
main {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    transition: margin-right 0.3s ease; /* Para ajustar el contenido cuando se activa el no-scroll */
}

/* Sección de productos */
#productos {
    background-color: var(--highlight-color);
    padding: 40px 20px;
    text-align: center;
    color: var(--dark-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(6, 5, 5, 0.1);
    margin-bottom: 40px;
}

#productos h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: bold;
}

#productos p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
}



#products button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

#products button:hover {
    background-color: darkgreen;
}

/* Estilo para la sección de Acerca de Nosotros */
#acerca {
    background-color: var(--highlight-color);
    padding: 40px 20px;
    text-align: center;
    color: var(--dark-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

#acerca h3 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: bold;
}

#acerca p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.8;
    text-align: justify;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#acerca h3 + h3 {
    margin-top: 40px;
}

#acerca .vision-mision {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}

.acerca-box {
    background-color: #fff;
    padding: 20px;
    width: 45%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.acerca-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.acerca-box h4 {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: bold;
}

.acerca-box p {
    font-size: 16px;
    line-height: 1.6;
}

/* Estilos para pantallas grandes */
@media (min-width: 768px) {
    .acerca-box {
        width: 30%;
    }
}

/* Estilo para la sección de Contáctanos */
#contacto {
    background-color: var(--highlight-color);
    padding: 40px 20px;
    text-align: center;
    color: var(--dark-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

#contacto h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: bold;
}

#contacto p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
}

#contacto form input, #contacto form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
}

#contacto form button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#contacto form button:hover {
    background-color: darkgreen;
}

/* Ajuste de la sección de preguntas frecuentes */
#faq {
    background-color: var(--highlight-color);
    padding: 40px 20px;
    text-align: center;
    color: var(--dark-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 10px;
    margin-bottom: 40px;
}

#faq h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: bold;
}

#faq ul {
    list-style: none;
    padding: 0;
}

#faq li {
    margin-bottom: 15px;
}

#faq a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 18px;
}

#faq a:hover {
    text-decoration: underline;
}

/* Ajustes visuales */
img {
    max-width: 100%;
    height: auto;
}

/* Ocultar todas las secciones por defecto */
section {
    display: none;
}

/* Mostrar solo la sección activa */
section.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

/* Animación para la transición suave */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#btn-click {
    background-color:#81c784; /* Fondo azul */
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño del texto */
    border: none; /* Sin bordes */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano al pasar el mouse */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efecto al pasar el mouse */
#btn-click:hover {
    background-color:forestgreen; /* Azul más oscuro */
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
}

/* Efecto al hacer clic */
#btn-click:active {
    background-color: #003f7f; /* Azul más oscuro aún */
    transform: scale(0.95); /* Reduce ligeramente el tamaño */
}

/* Accesibilidad: al enfocarlo con teclado */
#btn-click:focus-visible {
    outline: 2px solid #ffcc00; /* Borde amarillo */
    background-color: #004080; /* Azul medio */
}

#faq {
    background-color: var(--highlight-color);
    padding: 40px 20px;
    text-align: center;
    color: var(--dark-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 10px;
    margin-bottom: 40px;
}

#faq h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: bold;
}

.faq-item {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.faq-item h3 {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: bold;
}

.faq-answer {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    display: none;
    overflow: hidden; 
    transition: max-height 0.3s ease-out;
    display: block;
    /* Las respuestas están ocultas por defecto */
}

/* Cuando el contenedor tiene la clase active, mostramos la respuesta */
.faq-item.active .faq-answer {
    display: block;
}

/* Estilos para el hover de las preguntas */
.faq-item h3:hover {
    color: var(--primary-color);
    cursor: pointer;
}

/* Aseguramos que las imágenes no se desborden */
#contacto img {
    max-width: 100%; /* Limita el ancho máximo al 100% del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina cualquier espacio debajo de las imágenes */
    margin: 0 auto; /* Centra las imágenes dentro de su contenedor */
}

/* Opcional: Definir un tamaño máximo para las imágenes */
#contacto .image-grid div {
    max-width: 250px; /* Ajusta el tamaño máximo de las imágenes dentro de cada contenedor */
    margin: 10px; /* Espaciado entre los bloques */
}

/* Responsive: Ajuste para pantallas de laptop */
@media (min-width: 768px) {
    #contacto .image-grid {
        display: flex;
        justify-content: center; /* Centra los elementos */
        gap: 20px; /* Espaciado entre los elementos */
    }

    #contacto .image-grid div {
        width: 200px; /* Limita el tamaño de cada imagen */
    }
}

/* Aseguramos que las imágenes no se desborden */
#contacto img {
    max-width: 100%; /* Limita el ancho máximo al 100% del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina cualquier espacio debajo de las imágenes */
    margin: 0 auto; /* Centra las imágenes dentro de su contenedor */
}

/* Estilo para el contenedor de las imágenes en móviles */
#contacto .image-grid {
    display: flex;
    flex-direction: column; /* Coloca las imágenes una debajo de la otra en modo móvil */
    align-items: center; /* Centra los elementos de forma horizontal */
    gap: 20px; /* Espaciado entre los elementos */
    padding: 20px; /* Espacio interno alrededor del contenedor */
}

/* Opcional: Ajuste para pantallas más grandes (p. ej., tabletas o laptops) */
@media (min-width: 768px) {
    #contacto .image-grid {
        flex-direction: row; /* Coloca las imágenes en una fila en pantallas más grandes */
        justify-content: center; /* Centra las imágenes horizontalmente */
    }

    #contacto .image-grid div {
        width: 200px; /* Limita el tamaño de cada imagen */
    }
}

nav {
    background-color: #4CAF50; /* Color de fondo de la barra */
    padding: 10px 0; /* Espaciado vertical */
    text-align: center; /* Centra el contenido dentro de la barra */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
}

/* Estilo para los enlaces del menú */
nav ul {
    list-style-type: none; /* Elimina los puntos */
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block; /* Hace que los elementos de lista estén en línea */
    margin: 0 20px; /* Espacio entre los elementos */
}

nav ul li a {
    color: white; /* Color del texto */
    text-decoration: none; /* Elimina el subrayado */
    font-size: 16px; /* Tamaño de la fuente */
    font-weight: bold; /* Negrita para destacar */
    transition: color 0.3s; /* Transición suave cuando cambia el color */
}

/* Cambio de color de los enlaces al pasar el ratón */
nav ul li a:hover {
    color:#4CAF50; /* Color dorado al pasar el ratón */
}

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    nav ul {
        display: flex;
        flex-direction: column; /* Cambia a columna en pantallas más pequeñas */
        align-items: center; /* Centra los elementos */
    }

    nav ul li {
        margin: 10px 0; /* Espacio vertical entre los elementos */
    }
}

header {
    background: linear-gradient(to right, #4CAF50, #81C784); /* Verde suave de izquierda a derecha */
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header {
    background: url('IMG/herbolaria.jpeg') no-repeat center center;
    background-size: cover;
    padding: 20px;
    color: white;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.fade-in {
    animation: fadeIn 2s ease-out;
}

#languageButton {
    background-color:#4CAF50; /* Color de fondo (azul por defecto) */
    color: white;             /* Color del texto */
    border: none;             /* Sin borde */
    padding: 10px 20px;       /* Espaciado interno */
    border-radius: 5px;       /* Bordes redondeados */
    font-size: 16px;          /* Tamaño del texto */
    cursor: pointer;          /* Cambiar el cursor al pasar */
    transition: background-color 0.3s; /* Animación suave para el hover */
}

/* Cambiar color al pasar el cursor */
#languageButton:hover {
    background-color:#4CAF50; /* Color más oscuro al pasar el cursor */
}

#languageButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color:#4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px; /* Redondeado tipo burbuja */
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra ligera */
    z-index: 1000; /* Siempre visible sobre otros elementos */
}
#languageButton:hover {
    background-color:#4CAF50;
}

.menu + #languageButton {
    margin-top: 15px; /* Separación adicional si está inmediatamente después del menú */
}

#acerca {
    padding: 20px;
    text-align: center; /* Centra el texto y la imagen */
}

#acerca img {
    max-width: 50%;   /* Ajusta el tamaño de la imagen al 50% del contenedor */
    height: auto;     /* Mantiene la proporción de la imagen */
    margin-bottom: 20px; /* Espacio debajo de la imagen */
}


.productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.producto {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.producto img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.producto h3 {
    margin: 1rem 0;
    color: #0e0f0f;
}

.precio {
    color: #171818;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.boton-agregar {
    background-color: #62d98a;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.boton-agregar:hover {
    background-color: #197548;
}

.carrito {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    background-color: #3e9944;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.pago {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: none;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pago.mostrar {
    display: block;
}

.pago h2, .pago h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.metodos-pago {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.metodo {
    margin: 0.5rem 0;
}

.metodo label {
    margin-left: 0.5rem;
    color: #2c3e50;
}

.formulario-pago {
    margin: 1.5rem 0;
}

.formulario-pago input {
    width: 100%;
    padding: 0.8rem;
    margin: 0.5rem 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.fila {
    display: flex;
    gap: 1rem;
}

.fila input {
    width: 50%;
}

.datos-bancarios {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.datos-bancarios p {
    margin: 0.5rem 0;
    color: #2c3e50;
}

.info {
    color: #666;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.info-envio {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

.boton-pagar {
    background-color: #0e0f0e;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}

.boton-pagar:hover {
    background-color: #0b0d0c;
}

@media (max-width: 600px) {
    .pago {
        margin: 1rem;
        padding: 1.5rem;
    }

    .fila {
        flex-direction: column;
    }

    .fila input {
        width: 100%;
    }
}


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

.producto { display: block; margin: 10px; padding: 10px; border: 1px solid #ccc; }
.oculto { display: none; }

select {
    width: 100%;  /* Se adapta al contenedor */
    max-width: 250px; /* Tamaño predeterminado */
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
}

/* 📱 Móviles: Aumenta el tamaño para mejor accesibilidad */
@media (max-width: 600px) {
    select {
        width: 90%;
        font-size: 18px;
        padding: 12px;
    }
}

/* 🖥️ Pantallas grandes: Reduce aún más el tamaño */
@media (min-width: 1024px) {
    select {
        width: 180px;  /* Más pequeño en pantallas grandes */
        font-size: 14px; /* Reduce la fuente */
        padding: 8px; /* Menos padding */
    }
}

/* 🖥️ Pantallas muy grandes (4K o ultra wide) */
@media (min-width: 1600px) {
    select {
        width: 150px; /* Se hace aún más pequeño */
        font-size: 14px;
        padding: 6px;
    }
}

.precio {
    font-size: 20px;
    color: #2a6d31; /* Un color rojo anaranjado */
    font-weight: bold;
    background-color: #f0f0f0; /* Fondo claro */
    padding: 5px 10px;
    border-radius: 5px;
}

.music-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer; /* Hace que el cursor sea una flechita */
    padding: 15px;
    border-radius: 12px;
    background: #397029;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.music-container:hover {
    background: #397029;
    transform: scale(1.1);
}
.music-icon {
    font-size: 50px;
}
.music-text {
    font-size: 16px;
    margin-top: 5px;
}
.hand-icon {
    font-size: 20px;
    margin-left: 5px;
    animation: bounce 1s infinite alternate;
}
@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}