/* --- SISTEMA DE DISEÑO (Variables) --- */
:root {
    /* Paleta corporativa B2B: Azul y Rojo */
    --color-primario: #0D47A1; 
    --color-secundario: #D32F2F; 
    --color-fondo: #F4F6F8; 
    --color-texto: #1C2833; 
    --color-blanco: #FFFFFF;
    /* Nueva Tipografía Global */
    --fuente-principal: 'Montserrat', sans-serif;
} 

/* --- COMPORTAMIENTO GENERAL DEL SITIO --- */
html {
    /* Deslizamiento suave al hacer clic en los enlaces del menú */
    scroll-behavior: smooth; 
    
    /* El margen de seguridad para compensar la altura de tu Navbar */
    scroll-padding-top: 90px; 
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* --- NAVBAR --- */
/* --- NAVBAR (Diseño Corporativo Azul y Rojo) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    background-color: var(--color-primario); /* Fondo Azul Corporativo */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra un poco más marcada */
    position: sticky;
    top: 0;
    z-index: 100;
}
/* --- CONTENEDOR DEL LOGO Y TEXTO --- */
.logo-contenedor {
    display: flex;
    align-items: center; /* Alinea la imagen y el texto perfectamente al medio verticalmente */
    gap: 1rem; /* Crea un espacio elegante entre el dibujo y las letras */
    text-decoration: none; /* Evita que el texto parezca un enlace subrayado */
    transition: transform 0.3s ease;
}

.logo-contenedor:hover {
    transform: scale(1.02); /* Animación suave a todo el conjunto */
}

/* La imagen del silo */
.logo-img {
    height: 50px;       /* Fijamos el alto */
    width: 50px;        /* Fijamos el ancho idéntico para forzar un cuadrado perfecto */
    background-color: var(--color-blanco); /* Fondo blanco puro */
    border-radius: 50%; /* Esta es la magia que convierte el cuadrado en un círculo */
    padding: 6px;       /* Espacio de respiración entre el logo y el borde del círculo */
    object-fit: contain;/* Asegura que el logo no se deforme dentro del círculo */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Sombra sutil para darle volumen y separarlo del fondo azul */
}
/* El texto "Agro La Gloria" */
.logo-texto {
    font-family: 'Montserrat', sans-serif; /* Usamos la fuente corporativa fuerte */
    font-size: 1.5rem;
    font-weight: 800; /* Extra bold para dar solidez */
    color: var(--color-blanco); /* Letras blancas para contrastar con el navbar azul */
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Convertimos todo a mayúsculas para más autoridad */
}

/* --- AJUSTE RESPONSIVO (Móviles) --- */
@media (max-width: 768px) {
    .logo-img {
        max-height: 40px;
    }
    
    .logo-texto {
        font-size: 1.2rem; /* Achicamos un poco el texto en celulares */
    }
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-blanco); /* Texto blanco para contrastar con el azul */
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Efecto hover sutil para los enlaces normales */
.nav-links a:hover {
    color: #E0E0E0; /* Un gris muy clarito para indicar que es clickeable */
}

/* Destacamos el enlace de contacto con el Rojo (Botón CTA) */
.nav-links a.btn-contacto {
    background-color: var(--color-secundario); /* Rojo intenso */
    color: var(--color-blanco);
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Efecto al pasar el cursor por el botón de contacto */
.nav-links a.btn-contacto:hover {
    background-color: #B71C1C; /* Un rojo un poco más oscuro */
    color: var(--color-blanco);
    transform: translateY(-2px); /* Pequeña elevación */
}
/* --- HERO --- */
/* --- HERO CARRUSEL --- */
.hero {
    position: relative; /* Vital para contener los elementos absolutos */
    height: 80vh;
    display: flex;
    align-items: center;
    padding: 0 5%;
    overflow: hidden; /* Evita desbordamientos */
}

/* --- BOTONES DEL HERO (Estilos y Glassmorfismo) --- */
.hero-botones {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Base compartida para ambos botones */
.hero-botones a {
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 50px; /* Bordes bien redondeados para un look más moderno y amable */
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Botón Primario: Fondo blanco sólido y elegante */
.btn-primario {
    background-color: rgba(255, 255, 255, 0.15); /* Blanco al 15% de opacidad */
    color: var(--color-blanco);
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde blanco sutil */
    backdrop-filter: blur(8px); /* La magia: difumina la foto que pasa por detrás */
}

/* Efecto al pasar el mouse por el primario */
.btn-primario:hover {
    background-color: var(--color-blanco);
    color: var(--color-primario);
    transform: translateY(-3px);
}

/* Botón Secundario: Efecto Cristal (Blanco fugaz y discreto) */
.btn-secundario {
    background-color: rgba(255, 255, 255, 0.15); /* Blanco al 15% de opacidad */
    color: var(--color-blanco);
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde blanco sutil */
    backdrop-filter: blur(8px); /* La magia: difumina la foto que pasa por detrás */
}

/* Efecto al pasar el mouse por el secundario */
.btn-secundario:hover {
    background-color: var(--color-blanco);
    color: var(--color-primario);
    transform: translateY(-3px);
}

/* --- AJUSTE RESPONSIVO PARA MÓVILES --- */
@media (max-width: 768px) {
    .hero-botones {
        flex-direction: column;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .hero-botones a {
        text-align: center; /* Centramos el texto cuando los botones se apilan */
        width: 100%;
        box-sizing: border-box;
    }
}

/* El contenedor de las imágenes */
.carrusel-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Nivel 1: Al fondo del todo */
}

/* Estructura base de cada imagen del carrusel */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeCarrusel 15s infinite; /* 15s de ciclo total (5s por foto) */
}

/* URLs de prueba (Puedes reemplazarlas por fotos reales de tus productos) */
.slide-1 {
    background-image: url(Content/Images/Campo1.jpg); /* Trigo */
    animation-delay: 0s;
}

.slide-2 {
    background-image: url(Content/Images/Campo2.jpg); /* Cosecha */
    animation-delay: 5s; /* Entra a los 5 segundos */
}

.slide-3 {
    background-image: url(Content/Images/Campo3.jpg); /* Limones */
    animation-delay: 10s; /* Entra a los 10 segundos */
}

/* La magia de la animación (Fade In / Fade Out) */
@keyframes fadeCarrusel {
    0%, 100% { opacity: 0; }
    10%, 33% { opacity: 1; }
    43% { opacity: 0; }
}

/* El Overlay oscuro que garantiza la lectura del texto */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Negro al 60% de opacidad */
    z-index: 2; /* Nivel 2: Por encima de las fotos */
}

/* Elevamos el texto para que quede sobre el overlay */
.hero-contenido {
    position: relative;
    z-index: 3; /* Nivel 3: Hasta arriba de todo */
    max-width: 600px;
}

/* Modificamos el color del título a blanco para que resalte sobre el fondo oscuro */
.hero-contenido h1 {
    font-size: 3.5rem;
    color: var(--color-blanco); 
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-contenido p {
    color: #E0E0E0; /* Un gris muy clarito para el subtítulo */
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* --- PRODUCTOS (Tarjetas Visuales) --- */
.productos {
    padding: 5rem 5%;
    background-color: var(--color-blanco);
    text-align: center;
}

.productos h2 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 3rem;
}

/* El sistema de grilla que hace la magia responsive */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Estilo individual de cada tarjeta */
.tarjeta-producto {
    background-color: var(--color-fondo);
    border-radius: 8px; /* Bordes suaves para dar "cercanía" */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación suave */
}

/* Efecto al pasar el cursor (Hover) */
.tarjeta-producto:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.servicios {
    padding: 5rem 5%;
    background-color: var(--color-fondo); /* Intercalamos el color de fondo para separar secciones */
    text-align: center;
}

.servicios h2 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 3rem;
    font-family: var(--fuente-principal);
}

.info-tarjeta {
    padding: 2rem;
    text-align: left;
}

.info-tarjeta h3 {
    color: var(--color-secundario);
    margin-bottom: 1rem;
}

.info-tarjeta p {
    color: var(--color-texto);
    line-height: 1.6;
}

/* Ocultamos la lista de productos por defecto */
.info-tarjeta p {
    color: var(--color-texto);
    line-height: 1.6;
    max-height: 0; /* Colapsa el tamaño */
    opacity: 0; /* Lo hace transparente */
    overflow: hidden; /* Evita que el texto sobresalga */
    transition: all 0.4s ease-in-out; /* Animación suave de 0.4 segundos */
    margin: 0; /* Quitamos el margen inicial */
}

/* Revelamos la lista cuando el mouse pasa sobre la tarjeta */
.tarjeta-producto:hover .info-tarjeta p {
    max-height: 150px; /* Expande el espacio (ajusta según necesites) */
    opacity: 1; /* Lo hace visible */
    margin-top: 1rem; /* Separa el texto del título */
}


/* --- SOBRE NOSOTROS --- */
.sobre-nosotros {
    padding: 5rem 5%;
    background-color: var(--color-fondo); /* Volvemos al beige para contrastar */
    text-align: center;
}

.contenedor-nosotros {
    max-width: 800px;
    margin: 0 auto;
}

.sobre-nosotros h2 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 1.5rem;
}

.texto-historia {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-texto);
    margin-bottom: 3rem;
}

/* Misión y Visión */
.grid-mision-vision {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.card-mv {
    background-color: var(--color-blanco);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex: 1;
}

.card-mv h3 {
    color: var(--color-secundario);
    margin-bottom: 1rem;
}

/* Valores */
.valores h3 {
    color: var(--color-primario);
    margin-bottom: 1.5rem;
}

.lista-valores {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-weight: bold;
    color: var(--color-secundario);
}

/* --- CONTACTO --- */
.contacto {
    padding: 5rem 5%;
    background-color: var(--color-blanco);
}

.contenedor-contacto {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

/* Columna Izquierda */
.info-contacto {
    flex: 1;
}

.info-contacto h2 {
    font-size: 2.2rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.info-contacto p {
    color: var(--color-texto);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.datos-contacto {
    list-style: none;
    padding: 0;
    line-height: 2;
    color: var(--color-secundario);
    font-weight: 500;
}

/* Columna Derecha (Formulario) */
.formulario-contacto {
    flex: 1;
    background-color: var(--color-fondo);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
}

.grupo-input {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.grupo-input label {
    margin-bottom: 0.5rem;
    color: var(--color-primario);
    font-weight: 500;
}

.grupo-input input,
.grupo-input textarea {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--fuente-principal);
}

.btn-enviar {
    width: 100%;
    padding: 1rem;
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-enviar:hover {
    background-color: var(--color-primario);
}



/* --- FOOTER --- */
.footer {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 2rem 5%;
    text-align: center;
}

.footer a {
    color: var(--color-blanco);
    text-decoration: none;
    margin: 0 0.5rem;
}

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

/* --- RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
    .contenedor-contacto {
        flex-direction: column; /* Apila las columnas en móviles */
        gap: 2rem;
    }
    
    .hero-contenido h1 {
        font-size: 2.5rem;
    }
}

.btn-whatsapp {
    position: fixed; /* Lo fija en la pantalla sin importar el scroll */
    bottom: 30px;    /* Separación desde abajo */
    right: 30px;     /* Separación desde la derecha */
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Verde oficial de WhatsApp */
    color: var(--color-blanco);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 1000; /* Asegura que nunca quede tapado por otra sección */
    transition: all 0.3s ease;
    animation: latido-suave 2.5s infinite; /* Llamado a la atención discreto */
}

/* El tamaño y color del icono SVG */
.btn-whatsapp svg {
    width: 35px;
    height: 35px;
    fill: currentColor; /* Toma el color blanco del texto del padre */
}

/* Efecto Hover: detenemos el latido y lo elevamos un poco */
.btn-whatsapp:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); /* Brillo verde */
    animation: none; 
}

/* Animación Keyframes para el latido suave */
@keyframes latido-suave {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* --- AJUSTE RESPONSIVO (Móviles) --- */
@media (max-width: 768px) {
    .btn-whatsapp {
        bottom: 20px; /* Un poco más cerca del borde en celulares */
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    .btn-whatsapp svg {
        width: 32px;
        height: 32px;
    }
}


/* =========================================
   DISEÑO RESPONSIVO (Móviles y Tablets)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. NAVBAR: Apilamos los enlaces para que no se amontonen */
    .navbar {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* 2. HERO: Reducimos el tamaño de la fuente y ajustamos márgenes */
    .hero {
        height: auto;
        padding: 4rem 5%;
        text-align: center;
    }

    .hero-contenido h1 {
        font-size: 2.2rem; /* Más pequeño para que entre en la pantalla */
    }

    .hero-botones {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* 3. SOBRE NOSOTROS: Apilamos las tarjetas de Misión y Visión */
    .grid-mision-vision {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* 4. CONTACTO: Colocamos la información arriba y el formulario abajo */
    .contenedor-contacto {
        flex-direction: column;
        gap: 3rem;
    }
    
    .formulario-contacto {
        padding: 1.5rem; /* Menos espacio interior en móviles */
    }
}

/* --- MENSAJE DE ÉXITO DEL FORMULARIO --- */
.mensaje-oculto {
    display: none; /* Lo esconde por defecto */
}

.mensaje-visible {
    display: block; /* Lo muestra cuando JS se lo ordene */
    color: #25D366; /* Verde de éxito (mismo de WhatsApp) */
    font-weight: bold;
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: rgba(37, 211, 102, 0.1);
    border-radius: 4px;
}