/* Fuente y estilo global */
body {
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
  transition: all 0.3s ease;
}

/* HERO */
.hero {
  background: url('../img/hero.jpg') center/cover no-repeat;
  min-height: 100vh;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 100, 0, 0.5);
}
.hero .container {
  position: relative;
  z-index: 1;
}

/* Navbar normal */
.navbar {
  background-color: #fff; /* blanco por defecto */
  transition: background 0.3s;
}

/* Cards */
.card img {
  height: 220px;
  object-fit: cover;
}

/* Carousel */
.carousel img {
  height: 450px;
  object-fit: cover;
  border-radius: 15px;
}

/* Animaciones */
.animate__fadeIn {
  animation: fadeIn 1s ease-in-out;
}
.animate__fadeInUp {
  animation: fadeInUp 1s ease-in-out;
}
/* Cambia color del texto de los enlaces en modo oscuro */
body.dark-mode .nav-link {
  color: #fff !important;
}

body.dark-mode .nav-link:hover {
  color: #90ee90 !important; /* verde claro al pasar el mouse */
}

/* Cambia el color del texto en modo oscuro */
body.dark-mode .text-muted,
body.dark-mode .lead.text-muted {
  color: #fff !important;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(30px);}
  to {opacity: 1; transform: translateY(0);}
}

/* Modo oscuro */
.dark-mode {
  background-color: #121212 !important;
  color: #eaeaea;
}
.dark-mode .navbar,
.dark-mode footer {
  background-color: #0a2f0a !important;
}
.dark-mode .bg-light {
  background-color: #1e1e1e !important;
}
.dark-mode .card {
  background-color: #262626;
  color: #fff;
}
.dark-mode .btn-outline-success {
  color: #90ee90;
  border-color: #90ee90;
}
.dark-mode .btn-outline-success:hover {
  background-color: #90ee90;
  color: #000;
}
.py-custom {
    padding-top: 4.5rem !important;
    padding-bottom: 3rem !important; /* o lo que quieras */
}

.hero-logo {
  width: 150px;              /* tamaño ajustable */
  height: 150px;
  border-radius: 40%;        /* lo hace circular */
  object-fit: cover;         /* recorta bien dentro del círculo */
  border: 3px solid #fff;    /* borde blanco elegante */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
.hero-logo1 {
  border-radius: 40%;        /* lo hace circular */
  object-fit: cover;         /* recorta bien dentro del círculo */
  border: 3px solid #fff;    /* borde blanco elegante */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}