/* ===== Base ===== */
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* ===== Utilities ===== */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff9900;
  color: #fff;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  transition: background-color .3s ease, transform .3s ease;
}
.btn:hover { background-color: #e68a00; transform: scale(1.05); }

.btn-group button { font-weight: 600; letter-spacing: .5px; }
.btn-group .btn-light { background-color: #ff9900; color: #fff; border: none; }
.btn-group .btn-outline-light:hover { background-color: #ff9900; color: #fff; }

/* ===== Navbar (override Bootstrap dark) ===== */
.navbar-dark.bg-dark .navbar-brand,
.navbar-dark.bg-dark .navbar-nav .nav-link {
  color: #eaeaea !important;
  transition: color .25s ease;
}
.navbar-dark.bg-dark .navbar-brand:hover,
.navbar-dark.bg-dark .navbar-brand:focus,
.navbar-dark.bg-dark .navbar-nav .nav-link:hover,
.navbar-dark.bg-dark .navbar-nav .nav-link:focus {
  color: #ff9900 !important;
  text-decoration: none;
}
.navbar-dark.bg-dark .navbar-nav .nav-link.active,
.navbar-dark.bg-dark .navbar-nav .nav-link.active:hover,
.navbar-dark.bg-dark .navbar-nav .nav-link.active:focus {
  color: #ff9900 !important;
  font-weight: 600;
}

/* Make Get Quote stand out in navbar */
.navbar .btn.btn-sm { padding: 6px 12px; font-weight: 700; }

/* ===== Hero ===== */
.hero {
  text-align: center;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('/hauling_background.webp') center/cover no-repeat;
  color: #fff;
  padding: 4rem 1rem;
  position: relative;
}
/* Offset content for fixed navbar on home (only hero padding) */
.hero .btn { box-shadow: 0 4px 10px rgba(0,0,0,.25); }

/* ===== Services ===== */
.services { text-align: center; margin: 2rem auto; padding: 0 1rem; }
.services h2 { margin-bottom: 1rem; }
.services .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.service {
  background: #fff;
  margin: 0 auto;
  padding: 1.5rem;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.service:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,.2); }

/* ===== Contact (high contrast) ===== */
.contact-links {
  background:#222;
  color:#fff;
  padding:3rem 1rem;
  text-align:center;
  border-top:4px solid #ff9900;
}
.contact-links h2 {
  color:#ff9900;
  font-weight:700;
  margin-bottom:1.5rem;
  font-size:1.6rem;
  letter-spacing:.5px;
}
.contact-buttons {
  display:flex; justify-content:center; flex-wrap:wrap; gap:1rem;
}
.contact-buttons a {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 26px; border-radius:6px; text-decoration:none;
  font-weight:600; font-size:1rem;
  background:#ff9900; color:#fff;
  transition: all .3s ease; box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.contact-buttons a:hover { background:#e68a00; transform: translateY(-2px); }
.contact-buttons i { font-size:1.1rem; }

/* ===== Floating badge “Se Habla Español” ===== */
.floating-language {
  position: fixed;
  bottom: 12px; right: 12px;
  z-index: 1000;
  background: rgba(255,153,0,.9);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 8px 16px;
  font-size: .95rem;
  backdrop-filter: blur(3px);
}

/* ===== Gallery look & feel ===== */
.navbar .nav-link.active { color:#ff9900 !important; }
.gallery-page .wrap { padding: 40px 20px 80px; }

.gallery-page .filters { gap: 8px; }
.gallery-page .filters .btn {
  background:#fff; border:1px solid #e5e7eb; color:#333;
  padding:8px 14px; border-radius:999px; font-weight:600;
}
.gallery-page .filters .btn:hover,
.gallery-page .filters .btn.active { background:#ff9900; border-color:#ff9900; color:#fff; }

.gallery-page figure.card {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.06); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-page figure.card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* Thumbnails sin recorte */
.gallery-page .card img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.gallery-page .badge { background: rgba(0,0,0,.6); color:#fff; border:0; font-weight:600; }
.gallery-page figcaption { color:#374151; font-size:14px; }

/* Grid */
.gallery-page .grid {
  display:grid; gap:14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:700px){ .gallery-page .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1024px){ .gallery-page .grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== Lightbox ===== */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(5,8,12,.85);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox-inner { border-radius:14px; border:1px solid #1f2a36; overflow:hidden; }
.lightbox-bar { background:#1f2937; color:#fff; border-top:0; }
.lightbox .iconbtn {
  background:#ff9900; color:#fff; border:0;
  border-radius:8px; padding:8px 12px; font-weight:700;
}
.lightbox .iconbtn:hover { filter: brightness(.95); }

/* ===== Footer (stick to bottom) ===== */
footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  margin-top: auto;
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .hero { padding: 3rem 1rem; }
  .hero h2 { font-size: 2.2rem; line-height: 1.2; }
  .hero p { font-size: 1.05rem; max-width: 680px; margin: 0 auto; }
  .hero .btn { padding: .65rem 1.25rem; }

  .services .row { gap: 1.25rem; }
  .service { max-width: 640px; }

  .gallery-page .grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
    margin-bottom: 60px;
  }
  .gallery-page figure.card { margin: 0 auto; }
}

@media (max-width:768px){
  .btn-group .btn { padding: 6px 10px; }

  .hero { padding: 2.25rem 1rem; }
  .hero h2 { font-size: 1.8rem; }
  .hero p { font-size: .98rem; }

  .service { max-width: 520px; }

  .gallery-page .grid { grid-template-columns: 1fr; gap: 16px; }
  .lightbox-inner img { max-height: 72vh; object-fit: contain; }

  .contact-links { padding: 2.5rem 1rem 5rem; }
  .contact-buttons a { width: 90%; max-width: 340px; font-size: .95rem; }
}

@media (max-width:480px){
  .hero h2 { font-size: 1.6rem; }
  .hero p { font-size: .95rem; }

  .contact-buttons a { width: 100%; max-width: 360px; }

  .floating-language { font-size: .9rem; padding: 8px 14px; }
}

img {
  width: 100%;
  height: auto;
  object-fit: contain; /* muestra la imagen completa sin recortarla */
  max-width: 100%;
  display: block;
}

/* Si tus imágenes están dentro de un contenedor tipo galería o slider */
.image-container {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

/* Para asegurar buena visualización en móviles */
@media (max-width: 768px) {
  img {
    object-fit: contain;
  }
  .image-container {
    padding: 0;
    margin: 0;
  }
}

/* ==== Galería de imágenes ==== */
.image-gallery {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.image-gallery img {
  width: 100%;
  height: auto;
  object-fit: contain; /* evita que se recorten en móvil */
  display: block;
  border-radius: 8px;
}

/* ==== Botones Prev/Next ==== */
.image-gallery button {
  background-color: #ff9900;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  margin: 10px 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.image-gallery button:hover {
  background-color: #e68a00;
}

/* ==== Responsivo ==== */
@media (max-width: 768px) {
  .image-gallery img {
    object-fit: contain;  /* muestra la imagen completa */
    height: auto;
  }

  .image-gallery button {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ====== FIX: que NO se recorten en móvil ====== */
.gallery-page figure.card { overflow: visible; }

/* El “viewport” del thumbnail: mantiene 16:9 sin recortar la foto */
.gallery-page figure.card picture {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;   /* quita esto si no quieres barras laterales */
  background: #0d0d0d;    /* color de fondo detrás de la foto */
  border-radius: 8px;
  overflow: hidden;
}

/* La imagen siempre contenida (sin cortes) */
.gallery-page figure.card picture img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;     /* << clave para ver la foto completa */
  display: block;
}

/* Por si hay alguna regla previa que forzaba alto fijo */
.gallery-page img,
.gallery-page .card img {
  height: auto !important;
}

/* Lightbox: también SIN recortar */
.lightbox .lightbox-image {
  max-width: 100vw;
  max-height: 85vh;
  /* width: auto; */
  height: auto;
  object-fit: contain;     /* << clave en la vista ampliada */
  display: block;
  margin: 0 auto;
}

/* Pequeños ajustes responsivos */
@media (max-width: 768px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .gallery-page figure.card picture { border-radius: 6px; }
}

/* Offset global (ajústalo si ves 1–2px de diferencia) */
:root { --nav-offset: 70px; }

/* Compensación para páginas con navbar fixed-top */
body.home-page { padding-top: var(--nav-offset); }

/* 1) ya lo tenías probado */
.navbar{
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 1rem;
  border-bottom: 0;              /* por si Bootstrap pinta un borde */
  box-shadow: none;              /* por si había sombra muy clara */
}

/* 2) evitar colapso de márgenes bajo la navbar fija */
header, .navbar { overflow: hidden; }

/* 3) que el PRIMER bloque debajo del nav no empuje con margin-top */
main > *:first-child,
body > *:not(header):first-child {
  margin-top: 0 !important;
}

/* 4) aplica un pequeño padding en lugar de margin para separar */
main { padding-top: var(--nav-offset, 76px); }