/* Navbar */
.navbar { padding: 1rem 0; background-color: #ffffff; transition: all 0.3s ease; }
.navbar-brand .logo { max-height: 70px; width: auto; object-fit: contain; }
.navbar .nav-link { color: #333333; font-weight: 500; margin: 0 1.2rem; transition: color 0.3s, transform 0.3s; }
.navbar .nav-link:hover { color: #0d6efd; transform: translateY(-3px); }
.navbar .nav-link.active { color: #0d6efd; font-weight: 600; }

/* Hero con imagen de fondo nítida */
.hero {
  position: relative;
  overflow: hidden;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-image: url('../img/maquinaria/3.jpg'); /* reemplaza con tu imagen */
  background-size: cover;
  background-position: center;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-text-bg {
  background-color: rgba(0,0,0,0.45); /* Fondo semitransparente para legibilidad */
  display: inline-block;
  padding: 2rem;
  border-radius: 15px;
}

/* Hero Titles */
.hero-title { font-weight: 700; }

/* Botón animado */
.btn-animated { transition: all 0.3s ease; }
.btn-animated:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.shadow-btn { box-shadow: 0 6px 15px rgba(0,0,0,0.25); border-radius: 8px; font-weight: 600; }
.shadow-btn:hover { background-color: #f8f9fa; box-shadow: 0 10px 25px rgba(0,0,0,0.35); }

/* Section Titles */
.section-title { font-weight: 700; transition: color 0.3s ease, text-decoration 0.3s ease; }
.section-title:hover { color: #0d6efd; text-decoration: underline; }

/* Cards Services */
.card-animated {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
  border-radius: 15px; background: linear-gradient(145deg,#ffffff,#f0f0f0); border: none;
  overflow: hidden; cursor: pointer;
}
.card-animated:hover, .card-animated:active { transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 35px rgba(0,0,0,0.25); }
.card-animated i { font-size: 3rem; }
.card-title { font-weight: 600; margin-bottom: 0.5rem; }
.card-text { color: #555; }
.services-grid { width: 80px; height: 4px; background: #0d6efd; border-radius: 2px; }

/* Swiper */
.swiper { width: 100%; padding: 20px 0; }
.swiper-slide { display: flex; justify-content: center; align-items: center; }

/* Tarjeta Maquinaria */
.maquinaria-card { position: relative; border-radius: 12px; overflow: hidden; width: 100%; max-width: 280px; }
.maquinaria-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; transition: transform 0.4s ease; }
.maquinaria-card:hover img { transform: scale(1.1); }
.maquinaria-card .overlay { position: absolute; bottom: 0; left:0; right:0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); color: #fff; text-align: center; padding: 15px; font-weight: 600; font-size: 1rem; opacity:0; transition: opacity 0.4s ease; }
.maquinaria-card:hover .overlay { opacity:1; }

/* Fade-in Animation */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Footer */
.footer { background-color: #222; color: #fff; }
.footer-logo { max-height: 80px; width: auto; }
.footer-title { font-weight: 700; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 0.5rem; }
.footer ul li a { color: #fff; text-decoration: none; transition: color 0.3s ease; }
.footer ul li a:hover { color: #0d6efd; text-decoration: underline; }
.footer ul li i { color: #0d6efd; font-size: 1.2rem; }
.footer ul li.d-flex i { margin-right: 6px; }
.footer-bottom { font-size: 14px; color: #aaa; margin-top: 20px; }

/* Responsive */
@media (max-width: 768px){
  .navbar .nav-link { margin: 0.5rem 0; }
  .navbar-collapse { text-align: center; }
  .maquinaria-card img { aspect-ratio: 1/1; }
  .footer .row { text-align: center; }
  .footer .text-md-start, .footer .text-md-end { text-align: center !important; }
  .footer ul li { justify-content: center; }
  .footer ul li.d-flex { justify-content: center; }
}

/* Efecto tap/rebote para móviles */
@media (hover: none){
  .card-animated:active { transform: scale(0.97); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
}