/* =========================
   Variables de color
========================= */
:root {
  --bs-primary: #296b90;
  --bs-secondary: #ffffff;
  --bs-info: #296b90;
  --bs-dark: #0a2540;
  --bs-light: #f8f9fa;

  /* Alto de la navbar fija (ajusta si tu navbar es más alta) */
  --nav-h: 56px;
}

/* =========================
   Navbar
========================= */
.navbar-blur {
  backdrop-filter: saturate(180%) blur(12px);
  background-color: rgba(10, 37, 64, 0.35);
}

/* =========================
   Estructura general
========================= */
.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.section-title {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.badge-dot::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bs-secondary);
  margin-right: .5rem;
}
footer a { text-decoration: none; }

/* =========================
   Íconos sociales (Contacto)
========================= */
.social-icons a {
  color: #6c757d;             /* gris por defecto */
  transition: color 0.3s ease;
}
.social-icons a:hover .bi-twitter-x { color: #000; }
.social-icons a:hover .bi-facebook  { color: #1877F2; }
.social-icons a:hover .bi-instagram { color: #E4405F; }
.social-icons a:hover .bi-whatsapp  { color: #25D366; }

/* =========================
   Scroll y anclas (navbar fija)
========================= */
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px); /* offset para #anclas */
}
/* Quitar: body { padding-top: var(--nav-h); } */

/* =========================
   HERO / CARROUSEL (estable)
========================= */
/* Usa vh real como primera opción, con fallbacks */
.hero,
.carousel-item {
  height: calc(var(--real-vh, 1vh) * 100);
  min-height: 100vh;   /* fallback para navegadores sin JS */
  overflow: hidden;
}


.carousel{ position: relative; } /* por si acaso */
.carousel .carousel-indicators{
  z-index: 3;          /* por encima del overlay/caption */
  bottom: 1.25rem;
}

.carousel-item img.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.carousel-item::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index:1;
}

.carousel-caption{
  position:absolute;
  z-index:2;
  padding-bottom:3.25rem; /* deja espacio para indicadores */
  color:#fff;
}

.fade-caption{ animation: fadeInUp 1.2s ease both; }
@keyframes fadeInUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.carousel-item.active .fade-caption{ animation-delay:.3s; }
.carousel-item.active img{ transform: scale(1.02); }

/* Foco por slide */
.carousel-item img.img-cover.pos-1{ object-position:50% 88%; } /* camión visible */
.carousel-item img.img-cover.pos-2{ object-position:50% 50%; }
.carousel-item img.img-cover.pos-3{ object-position:50% 45%; }

/* Monitores anchos: muestra más cielo/logo */
@media (min-aspect-ratio:16/9) and (min-width:1200px){
  .carousel-item img.img-cover.pos-1{ object-position:50% 80%; }
}

/* 16:10 aprox */
@media (max-aspect-ratio:16/10) and (min-width:992px){
  .carousel-item img.img-cover.pos-1{ object-position:50% 88%; }
  .carousel-caption{ bottom:7rem; }
}

/* Móvil */
@media (max-width:576px){
  .carousel-item img.img-cover.pos-1{ object-position:50% 40%; }
  .carousel-item img.img-cover.pos-3{ object-position:50% 50%; }
}