@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/* Estilos Generales y Reset Básico */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Ajustado a la altura del menú */
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* Animación de Fondo con Degradado tipo Ola */
@keyframes animatedGradientWaves {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    color: #f0f0f0;
    font-family: sans-serif;
    font-weight: normal;
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /* Fondo Animado con colores más oscuros y neutros */
    background: linear-gradient(
        135deg,
        #001529, /* Azul muy oscuro */
        #5d00a6, /* Morado oscuro */
        #a82b23, /* Rojo oscuro/terracota */
        #aaaaaa, /* Gris claro (neutro) */
        #004b8d, /* Azul oscuro */
        #b39b00, /* Amarillo/Mostaza oscuro */
        #0f2e1a  /* Verde oscuro original */
    );
    background-size: 400% 400%; /* Tamaño grande del fondo */
    animation: animatedGradientWaves 20s ease infinite; /* Animación más lenta */
}

p {
    color: #ccc;
    padding: 0.5em 1em;
    line-height: 1.6;
    font-size: 1rem;
    text-align: justify;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    margin: 0.5em 0;
}

h1, h2, h3, h4, h5, h6 {
    color: whitesmoke;
    font-family: 'EB Garamond', serif;
    font-weight: bolder;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h2.subtitle, h2.subtitle2 {
     text-align: left;
     font-size: 2rem;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 2px solid #4d90fe; /* Azul claro para borde */
     display: inline-block;
     font-weight: 700;
}

a {
    color: #87CEFA; /* LightSkyBlue para enlaces */
    text-decoration: none;
    transition: color 0.3s ease, font-size 0.3s ease;
}

a:hover, a:focus {
    color: #ADD8E6; /* LightBlue en hover */
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Contenedor Principal */
.main-content-area {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    padding: 40px 30px;
    background-color: rgba(15, 15, 15, 0.8); /* Un poco más opaco para legibilidad */
    border-radius: 10px;
    flex-grow: 1;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* --- Estilos del Menú de Navegación --- */
.nav--container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(5, 5, 5, 0.97);
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.div--title { margin: 0; flex-shrink: 0; }
.div--title h1 { margin: 0; font-size: 2.4rem; color: #e8e8e8; font-family: 'EB Garamond', serif; font-weight: 600; letter-spacing: 1px; }
.nav--container nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex-grow: 1; margin-left: 30px; }
.nav--container a.link--menu { color: #d8d8d8; font-size: 1.25rem; font-family: 'EB Garamond', serif; font-weight: 500; margin: 5px 15px; padding: 10px 8px; text-align: center; text-decoration: none; position: relative; transition: color 0.4s ease; overflow: hidden; }
.nav--container a.link--menu:hover, .nav--container a.link--menu:focus { color: #ffffff; }
.nav--container a.link--menu::after { content: ''; position: absolute; bottom: 8px; left: 50%; width: 0; height: 2px; background-color: #87CEFA; transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1); transform: translateX(-50%); }
.nav--container a.link--menu:hover::after, .nav--container a.link--menu:focus::after { width: 90%; }
/* --- Fin Estilos Menú --- */


/* Hero Section */
.background--home {
    width: 100%;
    height: 100vh;
    background-image: url('../src/IMG/IMG_20250203_200608794.jpg'); /* CONFIRMA ESTA RUTA */
    background-position: center 70%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.9) 85%, #000000 100% );
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}
.Home--Title {
    color: whitesmoke;
    font-family: 'EB Garamond', serif;
    font-size: 3rem;
    font-weight: bolder;
    padding: 20px;
    background: none;
    text-shadow: 3px 3px 7px rgba(0,0,0,0.9);
    z-index: 2;
}
/* --- Fin Hero --- */


/* Estructura de Contenido General */
.content-section { padding: 40px 5%; margin-bottom: 50px; background-color: rgba(255, 255, 255, 0.04); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); overflow: hidden; }
.content-section:last-child { margin-bottom: 0; }
.two-column-section { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; }
.two-column-section > div { flex: 1 1 300px; min-width: 280px; padding: 20px; background-color: rgba(255, 255, 255, 0.06); border-radius: 5px; }
.two-column-section > .column-image { padding: 0; min-height: 350px; background-size: cover; background-position: center; border-radius: 10px; position: relative; border: none; }
.full-width-column { flex-basis: 100%; background-color: transparent !important; padding: 0 !important; }
.div--content0 { background-image: url(../src/IMG/berrys/berry_img--1.jpg); }
.div--content3 { background-image: url(../src/IMG/berrys/berry_img--3.jpg); }
.div--content6 { background-image: url(../src/IMG/berrys/berry_img--2.jpg); }
.opacity--100 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(68, 66, 66, 0.3), rgba(179, 174, 174, 0.1)); border-radius: inherit; pointer-events: none; }
/* --- Fin Contenido --- */


/* Documentos y Botones de Descarga */
.document-section { text-align: center; }
.document-section > div { margin-bottom: 25px; padding: 20px; background-color: rgba(255, 255, 255, 0.06); border-radius: 5px; }
.document-section p { color: #e0e0e0; font-weight: bold; margin-bottom: 15px; text-align: center; font-family: sans-serif; font-size: 1.05rem; }
.descargar-boton { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background-color: #4d90fe; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-family: sans-serif; font-weight: bold; font-size: 1rem; transition: background-color 0.3s ease, transform 0.2s ease; margin: 5px; }
.descargar-boton:hover { background-color: #357ae8; transform: translateY(-2px); text-decoration: none; }
.icono-descarga { display: inline-block; width: 20px; height: 20px; margin-right: 10px; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"%3E%3Cpath d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/%3E%3C/svg%3E'); background-size: cover; }
/* --- Fin Documentos --- */


/* Footer */
.div--footer { width: 100%; background-color: #050505; color: #aaa; padding: 30px 5%; text-align: center; margin-top: auto; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); font-size: 0.9rem; position: relative; z-index: 2; }
.div--footer p { color: #aaa; margin: 5px 0; text-align: center; font-family: sans-serif; font-size: 0.85rem; }
.div--footer a { color: #87CEFA; }
.div--footer a:hover { color: #ADD8E6; }
/* --- Fin Footer --- */


/* --- Media Queries --- */
@media (max-width: 992px) {
    html { scroll-padding-top: 70px; }
    .main-content-area { width: 95%; padding: 30px 20px; }
    .Home--Title { font-size: 2.5rem; }
    h2.subtitle, h2.subtitle2 { font-size: 1.8rem; }
    .background--home { background-attachment: scroll; }
    .nav--container { min-height: 70px; }
    .div--title h1 { font-size: 2rem; }
    .nav--container a.link--menu { font-size: 1.1rem; margin: 5px 10px;}
    body { background-size: 400% 400%; animation-duration: 22s; } /* Ajuste velocidad tablet */
}
@media (max-width: 768px) {
    html { scroll-padding-top: 60px; }
    .nav--container { flex-direction: column; padding: 10px 3%; min-height: 0; }
    .div--title { width: 100%; text-align: center; margin-bottom: 10px; }
    .nav--container nav { justify-content: center; margin-left: 0; width: 100%; margin-top: 5px; }
    .nav--container a.link--menu { font-size: 1.05rem; margin: 5px 8px; }
    .Home--Title { font-size: 2.2rem; padding: 10px; }
    .content-section h2.subtitle, .content-section h2.subtitle2 { font-size: 1.6rem; width: 100%; text-align: center; }
    p { font-size: 0.95rem; }
    .descargar-boton { padding: 12px 24px; font-size: 1rem; }
    .background--home { background-position: center 60%; }
    .hero-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,0.95) 90%, #000000 100% ); }
    .main-content-area { background-color: rgba(15, 15, 15, 0.85); } /* Más opaco */
}
@media (max-width: 480px) {
    .div--title h1 { font-size: 1.8rem; }
    .nav--container a.link--menu { font-size: 1rem; margin: 4px 6px; padding: 8px 4px; }
    .nav--container a.link--menu::after { bottom: 5px; }
    .Home--Title { font-size: 2rem; }
    .content-section h2.subtitle, .content-section h2.subtitle2 { font-size: 1.5rem; }
    p { font-size: 0.9rem; }
    .main-content-area { width: 98%; padding: 20px 15px; margin-bottom: 20px; background-color: rgba(15, 15, 15, 0.9); } /* Casi opaco en móvil */
    .content-section { padding: 25px 4%; margin-bottom: 30px; }
    .descargar-boton { width: 85%; display: flex; margin: 15px auto; }
    .two-column-section > div { padding: 15px; }
    .background--home { background-position: center 50%; }
    body { background-size: 500% 500%; animation-duration: 25s;} /* Ajuste velocidad móvil */
}
/* --- Fin Media Queries --- */