/* =========== RESET BÁSICO Y ESTILOS GLOBALES =========== */
:root {
    /*--color-primary: #386641; /* Verde principal */
    --color-primary: #664288; /* Verde principal */
    /*--color-secondary: #6A994E; /* Verde más claro */
    --color-secondary: #775398; /* Verde más claro */
    --color-light-green: #F2E8CF; /* Verde muy claro para fondos */
    --color-text: #333;
    --color-text-light: #f8f9fa;
    --color-white: #ffffff;
    --color-gray: #6c757d;
    --font-family-base: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background-color: #fdfdfd;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 90%;
    
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    
}

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

/* =========== CABECERA Y NAVEGACIÓN =========== */
.main-header {
    /*background-color: var(--color-white);*/
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #7fb362;
    background-color: #ad8fc2;

}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    height: 125px;
    
}

.logo {
    font-size: 1.75rem;
    font-weight: 700;
    /*color: var(--color-primary);*/
       
}

/*.logo img {

    border-radius: 20%;
    width: 150px;
    position: relative
       
}*/

.logo_1 img {
  
    width: 200px;
    position: relative;
    
    
    

}

.logo_2 img {

    width: 100px;
    position: relative;
    
    
    
}

.nav-desktop {
    display: none; /* Oculto en móvil */
    align-items: center;
    gap: 1.5rem;
}

/* EFECTO DE LOS TEXTO LINK DE CABECERA*/
.nav-desktop a {
    font-weight: 500;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.nav-desktop a:hover {
    color: var(--color-primary);
}

.menu-button {
    display: block; /* Visible en móvil */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}



.nav-mobile {
    display: none; /* Oculto por defecto */
    background-color: var(--color-white);
    border-top: 1px solid #eee;
}


/* ========================================================== */
/* =========== INICIO: CAMBIO PARA CORREGIR EL MENÚ =========== */
/* ========================================================== */
/* Esta nueva clase se encargará de mostrar el menú */
.nav-mobile.is-open {
    display: block;
}
/* ======================================================== */
/* =========== FIN: CAMBIO PARA CORREGIR EL MENÚ ============ */
/* ======================================================== */


.nav-mobile a {
    display: block;
    padding: 1rem 5%; /* 5% es el mismo margen que el container */
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.nav-mobile a:hover {
    background-color: #f7f7f7;
}

/* =========== BOTONES =========== */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px; /* píldora */
    font-weight: 700;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* =========== SECCIONES GENERALES =========== */
.section {
    padding: 4rem 0;
}

.bg-light-green {
    background-color: var(--color-light-green);
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    color: var(--color-gray);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================================== */
/* =========== INICIO: ESTILOS MODIFICADOS (Video Héroe) ====== */
/* ========================================================== */
.hero-section {
    color: var(--color-white);
    position: relative; /* Clave para posicionar los hijos absolutos */
    height: 80vh; /* Altura de la sección */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Oculta partes del video que se salgan */
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del overlay */
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra todo el espacio sin deformarse */
    filter: blur(3px); /* El desenfoque solicitado */
}

.hero-overlay {
    position: relative; /* Para que esté por encima del video */
    z-index: 2; /* Encima del video */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4rem 0;
}
/* ======================================================== */
/* =========== FIN: ESTILOS MODIFICADOS (Video Héroe) ======= */
/* ======================================================== */

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

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.25rem;
    max-width: 650px;
    margin: 0 auto 2rem auto;
}

/* =========== GRIDS Y COLUMNAS =========== */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-4-cols {
    grid-template-columns: 1fr;
}

.grid-3-cols {
    grid-template-columns: 1fr;
}

.section-content-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.column-half {
    flex: 1;
    width: 100%;
}
.column-text {
    text-align: center;
}



/* ===================================================================== */
/* =========== INICIO: PARTE AGREGADA (ESTILOS PARA VIDEO VERTICAL) ====== */
/* ===================================================================== */
.column-half .farm-video {
    /* El video ocupará el 100% del ancho de su contenedor, pero... */
    width: 100%;
    
    /* ...nunca será más ancho de 350px. Esto ayuda a mantener la proporción vertical. */
    max-width: 350px; 
    
    /* Se establece una altura fija de 500px para crear el formato vertical (más alto que ancho). */
    height: 500px;    
    
    /* Esta propiedad es clave: hace que el video llene todo el espacio (350x500px)
       sin deformarse. Si el video original no tiene esta proporción, se recortará
       para encajar, pero mantendrá su aspecto natural. */
    object-fit: cover; 
    
    /* Suaviza las esquinas del video para un look más moderno. */
    border-radius: 12px;
    
    /* Centra el video horizontalmente dentro de su columna si la columna es más ancha. */
    margin: 0 auto; 
    
    /* Asegura que el video se comporte como un bloque para que el margen funcione correctamente. */
    display: block;
    
    /* Añade una sombra sutil para darle profundidad y destacarlo del fondo. */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    
    /* Cambia el cursor a una mano para indicar que el elemento es interactivo. */
    cursor: pointer;
    
    /* Prepara una transición suave para cualquier cambio en la propiedad 'transform'. */
    transition: transform 0.3s ease;
}

/* Estilo para cuando el cursor está sobre el video */
.column-half .farm-video:hover {
    /* Aumenta ligeramente el tamaño del video (un 3%) para dar feedback visual al usuario. */
    transform: scale(1.03); 
}
/* ===================================================================== */
/* ============= FIN: PARTE AGREGADA (ESTILOS PARA VIDEO VERTICAL) ======= */
/* ===================================================================== */




/* =========== TARJETAS (CARD) =========== */
.card {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

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

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.card-text {
    color: var(--color-gray);
}

/*ESTILO PARA LOS BOTONES " + " */
.section-button-container {
    text-align: center;
    margin-top: 3rem; /* Espacio entre la grilla y el botón */
}


/* ======================================================== */
/* =========== INICIO: ESTILOS AGREGADOS (Boletín) =========== */
/* ======================================================== */
.newsletter-section {
    background-color: var(--color-light-green); /* Coincide con la sección "Por qué leche de cabra" */
}

.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Apilado en móvil por defecto */
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input {
    width: 100%;
    padding: 0.85rem 1.25rem;
    border: 1px solid #ccc;
    border-radius: 9999px;
    font-size: 1rem;
    font-family: var(--font-family-base);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 102, 65, 0.2);
}

.newsletter-form .btn {
    width: 100%; /* Ocupa todo el ancho en móvil */
}

.success-message {
    margin-top: 1rem;
    color: var(--color-primary);
    font-weight: 500;
    display: none; /* Oculto por defecto */
    transition: opacity 0.5s;
}
/* ====================================================== */
/* =========== FIN: ESTILOS AGREGADOS (Boletín) =========== */
/* ====================================================== */


/* =========== PIE DE PÁGINA (FOOTER) =========== */
.main-footer {
    background-color: #212529;
    color: var(--color-text-light);
    padding: 3rem 0 2rem 0;
}

/*AGREGADO PARA QUE TODO LOS ELEMENTOS DE PIE DE PAGINA SE PONGA A LADO DEL OTRO*/
.footer-grid{

    display: flex;
    flex-wrap: wrap;
    gap: 120px;

}

.footer-grid h4 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-grid ul li {
    margin-bottom: 0.5rem;
}

.footer-grid ul a {
    color: #ced4da;
    transition: color 0.3s ease;
}

.footer-grid ul a:hover {
    color: var(--color-secondary);
}

.social-icons {
    display: flex;
    gap: 1rem;
}
.social-icons a svg {
    width: 24px;
    height: 24px;
    transition: color 0.3s ease;
}
.social-icons a:hover {
    color: var(--color-secondary);
}

.footer-bottom {
    border-top: 1px solid #495057;
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--color-gray);
}

/*----------------------MARCA PERU LOGO --------------------*/
.marca-peru {
    grid-column: span 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
}

.marca-peru img {
    max-width: 160px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
    
   
.marca-peru img:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}
/*----------------------MARCA PERU LOGO --------------------*/



/* =========== ANIMACIONES DE SCROLL =========== */
.animate-on-load,
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-load {
    transition-delay: var(--delay, 0s);
}

.animate-on-load.is-visible,
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay para los elementos del Héroe */
.hero-content h1 { --delay: 0.2s; }
.hero-content p { --delay: 0.4s; }
.hero-content .btn { --delay: 0.6s; }

/* =========== DISEÑO RESPONSIVO (Media Queries) =========== */
@media (min-width: 640px) { /* sm */
    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    .newsletter-form {
        flex-direction: row; /* Formulario horizontal en pantallas más grandes */
    }
    .newsletter-input {
        flex-grow: 1; /* El input ocupa el espacio disponible */
    }
    .newsletter-form .btn {
       width: auto; /* El botón tiene su ancho natural */
    }
}

@media (min-width: 768px) { /* md */
    .nav-desktop {
        display: flex;
    }
    .menu-button {
        display: none;
    }
    .grid-3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    .section-content-columns {
        flex-direction: row;
        gap: 3rem;
    }
    .column-text {
        text-align: left;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) { /* lg */
    .grid-4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
     .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}