:root {
  --verde-pepa: #303B0F;
  --blanco-hueso: #F1F4EB;
  --negro-pepa: #0D0D0D;
  --dorado-pepa: #E1A730;
}

body {
  /* Imagen de fondo */
  background-image: url('../img/fondoweb.png');
  background-attachment: fixed; /* El fondo se queda quieto al bajar */
  background-size: cover;       /* Cubre toda la pantalla */
  background-position: center;
  background-color: var(--blanco-hueso); /* Color de respaldo */
  color: var(--negro-pepa);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Ajuste para que el contenido principal destaque sobre el fondo */
main.container {
  background-color: rgba(241, 244, 235, 0.85); /* Fondo hueso con transparencia */
  border-radius: 20px;
  padding: 40px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Ajuste del contenedor principal para la Navbar Sticky */
main {
    padding: 2rem;
    padding-top: 20px; /* Reducido para que respete el flujo de Bootstrap */
}

/* Navbar Personalizada */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--blanco) !important; /* Forzamos el fondo blanco */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--verde-pepa) !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--dorado-pepa) !important;
    transform: scale(1.05);
}

.navbar {
    background-color: var(--blanco-hueso) !important; /* Fondo sólido opaco */
    border-bottom: 2px solid var(--verde-pepa);      /* Una línea fina elegante */
    z-index: 1000;                                   /* Asegura que siempre esté por encima */
    transition: all 0.3s ease;
}

/* Color de los enlaces del menú */
.nav-link {
    color: var(--verde-pepa) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* El logo también merece un toque de color si es texto, o margen si es imagen */
.navbar-brand {
    color: var(--verde-pepa) !important;
}

/* Animaciones */
.animate-logo {
    animation: fadeIn 1.2s ease-in-out;
}

.animate-navbar {
    animation: fadeInDown 0.8s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

footer .social-icon i, footer a i {
    color: var(--dorado-pepa) !important;
    transition: transform 0.3s;
}

footer .social-icon i:hover {
    color: white !important;
    transform: scale(1.2);
}

/* Media Queries para coherencia */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--blanco);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 10px;
    }
}

/* Ajuste para pantallas grandes (27" o más) */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px; /* Esto mantiene el contenido centrado y recogido */
  }
}

/* Para que los formularios no se vean gigantes a lo ancho */
.form-container, form {
    max-width: 900px; /* Un formulario de más de 900px es difícil de leer */
    margin-left: auto;
    margin-right: auto;
}

/* Opcional: Centrar el contenido de la historia si queda muy estirado */
.seccion-historia {
    max-width: 1100px;
    margin: 0 auto;
}

.navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Efecto opcional: que el logo se haga un pelín más pequeño al hacer scroll 
   (si usas una clase 'scrolled' con JS), o simplemente para asegurar que 
   en móviles no rompa el diseño */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 80px !important; /* En móviles lo mantenemos más comedido */
    }
}

.animate-logo:hover {
    transform: scale(1.05); /* Un pequeño toque de dinamismo al pasar el ratón */
}

link[rel="icon"] {
        border-radius: 50%;
    }

    /* Estilo para los enlaces normales */
.navbar-nav .nav-link {
    color: #303B0F !important; /* Tu verde oscuro */
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

/* Efecto HOVER (al pasar el ratón) */
.navbar-nav .nav-link:hover {
    color: #E1A730 !important; /* Dorado */
    transform: scale(1.1); /* Lo hace un poco más grande */
}

/* ESTILO PARA LA PÁGINA ACTIVA */
.navbar-nav .nav-link.active {
    color: #E1A730 !important; /* Dorado fijo */
    font-weight: 500; /* Texto más grueso/grande */
    transform: scale(1.1); /* Mantiene el tamaño grande */
}