/* Estilos personalizados (no Bootstrap) */

/************* Navegación *************/
/* Conserva los items del menú de barrita, estilizados con Bootstrap por defecto */
.navbar-brand{ font-weight:600; }
.menu{
	background-color: #0e0e0e;
	color: #fff;
}
/* Adaptación de .menu ul li a y hover del estilo original */
.menu .navbar-nav{ 
  --bs-nav-link-color: inherit; 
  --bs-nav-link-hover-color: inherit; 
  display: flex !important; 
  flex-direction: row !important; 
}
.menu .navbar-nav .nav-item{ 
  margin: 4px; 
  width: 100px; 
  text-align: center; 
  display: inline-block; 
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  position: relative;
  overflow: hidden;
}
.menu .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.1s; }
.menu .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.2s; }
.menu .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.3s; }
.menu .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.4s; }
.menu .navbar-nav .nav-item:hover{ 
  background-color:#C0C; 
  width: 140px;
}
.menu .navbar-nav .nav-link{ 
  color:#FCF; 
  text-decoration:none; 
  padding:.5rem .75rem; 
  display:block; 
  transition: all .3s ease; 
  transform: translateX(0);
}
.menu .navbar-nav .nav-item:hover .nav-link{ 
  color:#FFF; 
  transform: translateX(0);
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Efecto de aparición para los items del menú */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  .menu .navbar-collapse {
    background-color: #0e0e0e;
    padding: .25rem 0;
  }
  .menu .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .menu .navbar-nav .nav-item {
    width: 100% !important;
    margin: 0;
  }
  .menu .navbar-nav .nav-item:hover {
    width: 100% !important;
  }
  .menu .navbar-nav .nav-link {
    text-align: left;
    padding: .75rem 1rem;
  }
}

/************* Sección hero *************/
.section-hero{ 
  padding: 0; 
  margin: 0; 
}
.section-hero .row {
  margin: 0;
}
.section-hero .col-12,
.section-hero .col-md-6 {
  padding: 0;
}
.section-hero .hero-img{ 
  width: 100%; 
  height: auto; 
  display: block; 
  margin: 0;
  padding: 0;
}

/************* Cards *************/
.section-cards{ padding-top: 2rem; padding-bottom: 2rem; }
.section-cards .card img{ object-fit: cover; }

/************* Banner transferencia *************/
.section-banner{ margin-top: 2rem; margin-bottom: 0; }
.section-banner img{ width:100%; height:auto; display:block; }

/************* Dirección y mapa *************/
.section-direccion{ 
  padding: 0; 
  margin: 0;
}
.section-direccion .row {
  margin: 0;
}
.section-direccion .col-12:first-child{ 
  background:#800000; 
  padding: 2rem; 
  border-radius: 0; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
}
.section-direccion .col-12:last-child {
  padding: 0;
}
.address-card{ 
  background: transparent; 
  color:#ffffff; 
  border-radius: 0; 
  padding: 0; 
  margin-bottom: 2rem; 
}
.address-card h5{ margin-bottom: .75rem; font-weight:700; }
.address-card p{ margin-bottom: .25rem; }
.whatsapp-btn{ width:100%; max-width: 480px; height:auto; display:block; }
.section-direccion .col-12:last-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/************* Acordeones *************/
.accordion-button{ font-weight:600; }

/************* Utilidades *************/
.separator-y{ margin-top:1rem; margin-bottom:1rem; }

#imageModal .modal-body{ position: relative; }
.image-modal-close{ position: absolute; top: .5rem; right: .5rem; opacity: .6; }
.image-modal-close:hover, .image-modal-close:focus{ opacity: .95; }