/* Scroll suave + anclas bajo navbar */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

.navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
body { padding-top: 72px; }           /* altura aproximada del nav en desktop */
@media (max-width: 992px){
  body { padding-top: 64px; }         /* un poco menos en móvil/tablet */
}

/* Utilidades */
.object-fit-cover { object-fit: cover; }
.ratio > img { width:100%; height:100%; object-fit:cover; }
.text-shadow { text-shadow: 0 2px 12px rgba(0,0,0,.55); }

/* === Hero / Carrusel: alturas consistentes === */
.hero-container {
  height: 70vh;        /* fallback */
  height: 70dvh;       /* viewport dinámico en móviles modernos */
}
@media (max-width: 992px){ .hero-container { height: 60vh; height: 60dvh; } }
@media (max-width: 768px){ .hero-container { height: 45vh; height: 45dvh; } }  /* menos recorte */
@media (max-width: 576px){ .hero-container { height: 40vh; height: 40dvh; } }  /* aún menos recorte */
@media (max-width: 400px){ .hero-container { height: 38vh; height: 38dvh; } }  /* opcional fino */

/* Imágenes del carrusel: llenar sin deformar */
.carousel-item { position: relative; height: 100%; }
.carousel-item img.hero-slide {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* si usas <picture>, asegura el 100% */
.carousel-item picture { display:block; height:100%; }
.carousel-item picture > img { width:100%; height:100%; object-fit:cover; }

/* Overlay y caption */
.hero-overlay { position: absolute; inset: 0; }
.carousel-caption { bottom: 12%; }
@media (max-width: 768px){ .carousel-caption { bottom: 10%; } }

/* === Ajustes solo para móvil chico === */
@media (max-width: 576px){
  /* Menos altura => menos recorte */
  .hero-container { height: 25vh; height: 25dvh; }

  /* Desplaza el foco del slide 1 un poco a la izquierda */
  #heroCarousel .carousel-item:nth-child(1) img.hero-slide {
    object-position: 40% 50%; /* X Y -> prueba 40–45% */
  }

  /* Que el caption no tape letras */
  #heroCarousel .carousel-caption {
    bottom: 8%;
  }
  #heroCarousel .carousel-caption .display-6 { font-size: 1.5rem; }
  #heroCarousel .carousel-caption .lead { font-size: 1rem; }
}