/* Variables y Reset Básico */
 :root {
     --color-primary: #008000;
     /* Verde principal */
     --color-secondary: #FFD700;
     /* Amarillo/Oro para acentos */
     --color-text-dark: #222;
     --color-text-light: #fff;
     --color-background-light: #f9f9f9;
     --color-background-white: #fff;
     --font-family: 'Inter', sans-serif;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-family);
     color: var(--color-text-dark);
     background-color: var(--color-background-white);
     line-height: 1.6;
 }

 /* --- Estilos del Header/Navegación --- */
 header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: rgba(255, 255, 255, 0.95);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     z-index: 1000;
     padding: 1rem 5%;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     font-size: 1.75rem;
     font-weight: 800;
     color: var(--color-primary);
     text-decoration: none;
 }

 .logo span {
     color: var(--color-secondary);
 }

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

 .nav-links a {
     text-decoration: none;
     color: var(--color-text-dark);
     font-weight: 600;
     padding: 0.5rem 0;
     transition: color 0.3s;
     position: relative;
 }

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

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

 .hamburger {
     display: none;
     cursor: pointer;
     border: none;
     background: none;
     color: var(--color-primary);
     font-size: 1.5rem;
     padding: 0.5rem;
 }

 /* --- Estilos para secciones genéricas --- */
 section {
     padding: 6rem 5%;
     min-height: 100vh;
 }

 h2 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--color-primary);
     margin-bottom: 2rem;
     text-align: center;
 }

 .text-center {
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
 }

 .green-text {
    color: var(--color-primary);
    justify-content: center;
}

 /* --- Estilos del Hero (CRÍTICO) --- */
 #hero {
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Fruta.jpg');
     background-size: cover;
     background-position: center;
     color: var(--color-text-light);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding-top: 5rem;
     /* Espacio para el header fijo */
 }

 #hero h1 {
     font-size: clamp(2.5rem, 8vw, 4.5rem);
     font-weight: 900;
     margin-bottom: 1rem;
     text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 }

 #hero p {
     font-size: clamp(0.8rem, 3vw, 1.2rem);
     font-weight: 400;
     max-width: 700px;
     margin-bottom: 2rem;
 }

 .cta-button {
     display: inline-block;
     background-color: var(--color-secondary);
     color: var(--color-primary);
     padding: 1rem 2.5rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: background-color 0.3s, transform 0.1s;
     box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }

 .cta-button:hover {
     background-color: #FFEA61;
     transform: translateY(-2px);
     box-shadow: 0 7px 20px rgba(255, 215, 0, 0.5);
 }

 /* --- Sección Nosotros --- */
 #about {
     background-color: var(--color-background-light);
 }

 .about-content {
     display: flex;
     align-items: center;
     gap: 3rem;
 }

 .about-text {
     flex: 1;
 }

 .about-image {
     flex: 1;
     max-width: 500px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .about-image img {
     width: 100%;
     height: auto;
     border-radius: 15px;
     display: block;
 }

 /* --- Sección Productos (GRID) --- */
 #products {
     background-color: var(--color-background-white);
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .product-card {
     background-color: #fff;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     text-align: center;
     transition: transform 0.3s, box-shadow 0.3s;
     border: 1px solid #eee;
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 }

 .product-card img {
     width: 100%;
     height: 200px;
     object-fit: cover;
     /* Placeholder para mantener la estética */
 }

 .product-info {
     padding: 1.5rem;
 }

 .product-info h3 {
     font-size: 1.4rem;
     color: var(--color-primary);
     margin-bottom: 0.5rem;
 }

 .product-info p {
     color: #666;
     font-size: 0.95rem;
 }

 /* --- Sección Contacto/Formulario --- */
 

.contact-section {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-align: center;
}

.contact-section h2 {
    color: var(--color-secondary);
}

.contact-section p {
    margin-bottom: 30px;
}

.contact-form {
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    gap: 15px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    background-color: #443c37;
    color: var(--color-text-light);
    font-size: 1rem;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}


.contact-form .cta-button {
    width: 100%;
}

.email-info {
    margin-top: 20px;
    font-size: 1.1rem;
}

.gold-text {
    color:#e5b800;
    justify-content: center;
}



 /* --- Footer --- */
 footer {
     background-color: var(--color-primary);
     color: var(--color-background-light);
     text-align: center;
     padding: 1.5rem 5%;
     font-size: 0.9rem;
 }

 footer p {
     margin: 0;
 }


 /* --- MEDIA QUERIES (Responsiveness) --- */

 /* Tablet y Móvil */
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         text-align: center;
     }

     .about-image {
         order: -1;
     }

     section {
         padding: 4rem 5%;
     }
 }

 /* Móvil (Hamburger Menu) */
 @media (max-width: 768px) {

     h2 {
         font-size: 2rem;
     }

     .nav-links {
         display: none;
         flex-direction: column;
         position: absolute;
         top: 100%;
         /* Justo debajo del header */
         right: 0;
         width: 70%;
         background-color: rgba(255, 255, 255, 0.98);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
         padding: 1rem 0;
         border-radius: 0 0 0 10px;
         transition: right 0.3s ease-in-out;
     }

     .nav-links.active {
         display: flex;
     }

     .nav-links li {
         width: 100%;
         text-align: center;
     }

     .nav-links a {
         padding: 0.75rem 0;
         display: block;
         border-bottom: 1px solid #eee;
     }

     .nav-links a:hover::after {
         width: 0;
         /* Deshabilitar la línea inferior en móvil */
     }

     .hamburger {
         display: block;
     }
 }


 /* --- Estilos para el Logo con Imagen en el Header --- */
 .header-logo-container {
     display: flex;
     align-items: center;
     /* Alinea verticalmente el logo y el texto */
 }

 .logo-link {
     display: flex;
     /* Para que la imagen y el texto estén en línea */
     align-items: center;
     /* Alinea verticalmente el logo y el texto */
     text-decoration: none;
     /* Quita el subrayado del enlace */
 }

 .header-logo {
     height: 50px;
     /* Ajusta la altura del logo, puedes cambiarla */
     width: auto;
     /* Mantiene la proporción */
     margin-right: 10px;
     /* Espacio entre el logo y el texto */
     /* filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));  Puedes añadir una sombra si quieres */
 }

 .logo-text {
     font-size: 1.75rem;
     /* Mantén el tamaño original del texto */
     font-weight: 800;
     color: var(--color-primary);
     white-space: nowrap;
     /* Evita que el texto se rompa en varias líneas */
 }

 .logo-text span {
     color: var(--color-secondary);
 }

 /* Ajustes para el header para centrar si es necesario, o mantener espacio */
 header {
     /* Asegúrate de que el header use flexbox para alinear bien */
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* Media Query para ajustar el tamaño del logo en móviles si es necesario */
 @media (max-width: 768px) {
     .header-logo {
         height: 30px;
         /* Un poco más pequeño en móviles */
         margin-right: 5px;
     }

     .logo-text {
         font-size: 1.5rem;
         /* Texto del logo más pequeño en móviles */
     }
 }