/* ==== ESTILOS PÁGINA "NUESTRA HISTORIA" ==== */

/* --- Hero Banner --- */

.hero-container {
    padding: 0;
}

.hero-banner {
    /* ...otros estilos... */

    /*
      El primer ../ sube de 'nuestra-historia' a 'css'.
      El segundo ../ sube de 'css' a 'assets'.
      Luego baja a 'img'.
    */
    background-image: url('../../img/delcampoalaciudad.png');

    /* ...otros estilos... */
    background-size: cover;
    background-position: center;
    padding: 8rem 0;
    background-attachment: fixed;
    padding-top: 25px;
    padding-bottom: 25px;
    height: 400px;
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3rem;
    border-radius: 10px;
     height: 350px;
}

.hero-title {
    text-shadow: 2px 2px 4px #000;
    color: white;
    font-size: 3.5rem;

}

.hero-subtitle {
    text-shadow: 1px 1px 2px #000;
}


/* --- Sección Descubrimiento Café --- */

.img-cafe-cereza {
    width: 300px;
    height: 300px;
    object-fit: cover; /* Asegura que la imagen se vea bien y no se distorsione */
}


/* --- Sección Manifiesto --- */

.manifesto-banner {
    /* ¡Recunda cambiar la URL de la imagen! */
    background-image: url('URL_FAMILIA_EN_CAFETAL');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
}

.manifesto-overlay {
    background-color: rgba(0, 0, 0, 0.65);
    padding: 8rem 0;
    padding-top: 6rem;
}

.manifesto-content {
    max-width: 800px; /* Limita el ancho del texto para mejor lectura */
}

.manifesto-title {
    text-shadow: 2px 2px 4px #000;
}

.manifesto-text {
    font-size: 1.5rem;
    line-height: 1.8;
    text-shadow: 1px 1px 2px #000;
}


/* --- Mejora Sección "Un Viaje Hacia lo Orgánico" --- */
/* (HE BORRADO EL BLOQUE DUPLICADO QUE ESTABA AQUÍ ARRIBA) */

.container.my-5.py-5 {
    /* Fondo sutil */
    background-color: #f8f9fa; /* Un gris muy claro */
    border-radius: 15px; /* Bordes redondeados para el contenedor */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave */
    padding: 3rem; /* Ajusta el padding interno */
    margin-bottom: 5rem !important; /* Más espacio abajo */
}

.container.my-5.py-5 h2 {
    color: #343a40; /* Un color de texto más oscuro */
    margin-bottom: 1.5rem;
    font-size: 2.8rem; 
    line-height: 1.2;
}

/* zootecnia */
.container.my-5.py-5 p.lead {
    color: #333738; /* Un gris medio para el párrafo */
    font-size: 1.15rem;
    line-height: 1.8;
}

.oro{

     color: #333738; /* Un gris medio para el párrafo */
    font-size: 1.15rem;
    line-height: 1.8;
}

/* --- Estilos para las 3 imágenes (Marco Blanco, Redondeado y Sombra) --- */

.container.my-5.py-5 .row .col-lg-6:nth-child(2) img {

    /* 1. Esquinas redondeadas */
    border-radius: 15px !important; /* <-- ¡Añadido !important por si acaso! */

    /* 2. Marco blanco que pediste */
    border: 5px solid #ffffff;

    /* 3. Sombra para que "flote" */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* 4. Transición para el efecto hover */
    transition: all 0.3s ease;
    
    /* 5. Asegura que la imagen sea responsive dentro de su columna */
    width: 100%; 
}

/* --- Opcional: Efecto al pasar el ratón --- */

.container.my-5.py-5 .row .col-lg-6:nth-child(2) img:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    z-index: 10;
    position: relative;
}



/* ==== AJUSTES PARA MÓVILES (Max-width 768px) ==== */
@media (max-width: 768px) {
    
    /* 1. Ajuste del Título Principal (Nos movemos de la ciudad...) */
    .hero-title {
        font-size: 1.8rem !important; /* Bajamos de 3.5rem a 1.8rem */
        line-height: 1.2; /* Mejor espaciado entre líneas */
    }

    /* 2. Ajuste del contenedor gris transparente para que crezca con el texto */
    .hero-overlay {
        height: auto !important; /* Quitamos la altura fija de 350px */
        padding: 2rem 1rem; /* Reducimos el relleno */
    }

    /* 3. Ajuste del Título "Un Viaje Hacia lo Orgánico" */
    .container.my-5.py-5 h2 {
        font-size: 1.8rem !important; /* Bajamos de 2.8rem a 1.8rem */
    }
    
    /* 4. Ajuste del banner principal para que no corte el contenido */
    .hero-banner {
        height: auto !important; /* Quitamos la altura fija de 400px */
        padding: 4rem 0; /* Ajustamos el padding vertical */
    }
}