/* =========================================================
   PALETA & BASE
========================================================= */
:root {
  --brand: #333333;
  /* gris oscuro principal */
  --brand-2: #555555;
  /* hover / estados */
  --brand-3: #777777;
  /* gris medio opcional */
  --bg-soft: #f5f5f5;
  /* fondos claros */
  --text-on-brand: #ffffff;
  /* texto sobre botones oscuros */
  --wa: #25D366;
  /* WhatsApp */
  --nav-h: 64px;
  /* alto aprox del navbar */
}

html {
  scroll-padding-top: 70px;
}

/* anclajes (#seccion) con navbar fijo */
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.text-soft {
  color: #555;
}

.lazy {
  filter: blur(6px);
}

/* =========================================================
     BOTONES (marca y variantes)
  ========================================================= */
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
  border: none;
}

.btn-brand:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--text-on-brand);
}

.btn-outline-secondary {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-secondary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
}

.btn-cta {
  background-color: var(--brand);
  color: var(--text-on-brand) !important;
  border: none;
  transition: background-color .3s ease, transform .2s ease;
}

.btn-cta:hover {
  background-color: var(--brand-2);
  color: var(--text-on-brand);
  transform: translateY(-2px);
}

.btn-wa {
  background: var(--wa);
  color: #fff;
  border: 1px solid var(--wa);
}

.btn-wa:hover {
  filter: brightness(.95);
  color: #fff;
}

/* =========================================================
     UTILIDADES
  ========================================================= */
.bg-light {
  background-color: var(--bg-soft) !important;
}

.card>img {
  object-fit: cover;
  height: 200px;
}

/* =========================================================
     NAVBAR
  ========================================================= */
.navbar {
  transition: background-color .25s ease, box-shadow .25s ease;
  will-change: background-color, box-shadow;
  min-height: 64px;
}

.navbar-brand img {
  width: 140px;
  height: 48px;
  object-fit: contain;
}

/* Estado sobre el hero (transparente) */
.nav-hero {
  background: transparent;
}

.navbar .nav-link {
  color: var(--brand);
  opacity: .85;
  padding: .5rem .25rem;
  transition: opacity .2s ease, color .2s ease, text-decoration-color .2s;
}

.navbar .nav-link:hover,
.navbar .nav-link[aria-current="page"] {
  opacity: 1;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Navbar scrolleado */
.navbar.scrolled {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.nav-hero.scrolled {
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.nav-hero.scrolled .nav-link {
  color: #333 !important;
}

/* Toggler (hamburguesa) */
.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-hero.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51,51,51,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Links blancos cuando navbar está sobre el hero */
.nav-hero:not(.scrolled) .nav-link {
  color: #fff !important;
  opacity: 0.9;
}

.nav-hero:not(.scrolled) .nav-link:hover,
.nav-hero:not(.scrolled) .nav-link[aria-current="page"] {
  color: #fff !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* Acciones rápidas (iconitos) – ajustes mobile */
@media (max-width:991.98px) {
  .navbar-toggler {
    margin-top: 12px;
  }

  .nav-quick-actions {
    margin-top: 18px;
  }
}

/* Íconos blancos arriba del hero; grises al scrollear/abrir menú */
.navbar:not(.scrolled):not(.menu-open) .nav-quick-actions .btn-icon {
  color: #fff;
}

.navbar.scrolled .nav-quick-actions .btn-icon,
.navbar.menu-open .nav-quick-actions .btn-icon {
  color: #333;
}

/* Collapse abierto (mobile): fondo claro y links oscuros */
@media (max-width:991.98px) {
  .navbar-collapse.show {
    background: rgba(255, 255, 255, .95);
    padding: 1rem;
    border-radius: .5rem;
  }

  .navbar-collapse.show .nav-link {
    color: #333 !important;
  }

  .navbar-collapse.show .nav-link:hover {
    color: var(--brand, #000) !important;
  }
}

/* =========================================================
     HERO + CAROUSEL
  ========================================================= */
.hero {
  min-height: 70vh;
  position: relative;
}

.hero .carousel,
.hero .carousel .carousel-inner,
.hero .carousel .carousel-item,
.hero .carousel .carousel-item img {
  height: 70vh;
}

.hero .carousel .carousel-item img {
  object-fit: cover;
  object-position: center;
}

/* Overlay del hero */
.hero>.position-absolute.w-100.h-100 {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));
}

/* Controles del hero */
.hero #heroCarousel .carousel-control-prev,
.hero #heroCarousel .carousel-control-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
  background: transparent !important;
}

.hero #heroCarousel .carousel-control-prev {
  left: 5px !important;
}

.hero #heroCarousel .carousel-control-next {
  right: 5px !important;
}

.hero #heroCarousel .carousel-control-prev-icon,
.hero #heroCarousel .carousel-control-next-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 50% !important;
  background-color: rgba(0, 0, 0, .45) !important;
  background-size: 55% !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)) !important;
}

/* Ocultar flechas en mobile */
@media (max-width:768px) {

  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    display: none !important;
  }
}

/* Indicadores */
.carousel-indicators [data-bs-target] {
  width: 28px;
  height: 4px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .35);
}

.carousel-indicators .active {
  background-color: var(--brand);
}

/* =========================================================
     GALERÍAS / THUMBS
  ========================================================= */
.galeria-thumb {
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
  cursor: pointer;
  display: block;
}

.galeria-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .4s ease;
}

.galeria-thumb:hover img {
  transform: scale(1.08);
  filter: brightness(.92);
}

.galeria-thumb:hover::after {
  opacity: 1;
}

.galeria-thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .6s ease-in;
}

.galeria-thumb img[data-loaded="true"] {
  opacity: 1;
}

/* Overlay texto */
.overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .95rem;
  padding: .4rem .6rem;
  text-align: center;
  font-weight: 500;
  transition: background .3s ease;
}

/* =========================================================
     SERVICIOS
  ========================================================= */
.servicio-icon {
  font-size: 1.6rem;
  color: #6c757d;
  line-height: 1;
  flex: 0 0 1.6rem;
  min-width: 1.6rem;
  opacity: .95;
}

#servicios .d-flex.align-items-start .servicio-icon {
  margin-top: .125rem;
}

/* =========================================================
     GLightbox
  ========================================================= */
html.glightbox-open,
body.glightbox-open {
  overflow: hidden !important;
  height: 100% !important;
}

.glightbox-container .gslide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.glightbox-container .gslide-image img,
.glightbox-container .gslide-media img {
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 32px) !important;
  object-fit: contain !important;
}

/* =========================================================
     FOOTER
  ========================================================= */
.site-footer {
  text-align: center;
  font-size: .9rem;
  color: #555;
  padding-bottom: 64px;
}

.site-footer .copyright {
  margin-top: .5rem;
  margin-bottom: .5rem;
  font-weight: 500;
  color: #333;
}

.site-footer .contact-info a {
  font-size: .9rem;
  transition: color .2s ease;
  display: inline-block;
  margin: 0 .5rem;
}

.site-footer .contact-info a:hover {
  color: var(--brand);
}

@media (max-width:768px) {
  .site-footer {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    margin: 1rem;
    padding: 1.5rem;
  }

  .site-footer .contact-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
}

.site-footer .social-links a {
  color: #6c757d;
  transition: color .25s ease, transform .2s ease;
}

.site-footer .social-links a:hover {
  transform: translateY(-2px);
}

.site-footer .social-links a:hover .bi-instagram {
  color: #E1306C;
}

.site-footer .social-links a:hover .bi-whatsapp {
  color: #25D366;
}

.site-footer .social-links a:hover .bi-facebook {
  color: #1877F2;
}

/* =========================================================
     BOTÓN FLOTANTE WHATSAPP
  ========================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
  width: 52px;
  height: 52px;
  font-size: 28px;
}

.whatsapp-float:hover {
  transform: scale(1.05);
  opacity: 1;
}

@media (max-width:768px) {
  .whatsapp-float {
    bottom: 12px;
    right: 10px;
    width: 35px;
    height: 35px;
    font-size: 22px;
    opacity: .7;
  }
}





/* === NAVBAR: Ajustes para mobile === */

/* Hasta 576px (mobile estándar) */
@media (max-width: 576px) {
  .navbar .container {
    justify-content: flex-start;
    /* logo + iconos + hamburguesa alineados */
    gap: 0.8rem;
    /* espacio entre logo/íconos/hamburguesa */
  }

  .nav-quick-actions {
    margin-right: 0 !important;
    /* quita margen de más */
    gap: 0.65rem;
    /* separación entre íconos (~4px) */
  }

  .nav-quick-actions .btn {
    padding: 0.5rem;
    /* reduce aire alrededor del ícono */
  }

  .nav-quick-actions .btn i {
    font-size: 1.25rem;
    /* íconos un poco más chicos (~14px) */
  }

  .navbar-toggler {
    padding: 0.25rem 0.4rem;
    /* compacta el botón hamburguesa */
    margin-left: 1rem;
    /* lo pega más a los íconos */
  }
}

/* Hasta 480px (tu Xiaomi) */
@media (max-width: 480px) {
  .navbar .container {
    gap: 0.8rem;
  }

  .nav-quick-actions {
    gap: 0.7rem;
  }

  .nav-quick-actions .btn {
    padding: 0.4rem;
  }

  .nav-quick-actions .btn i {
    font-size: 1rem;
  }

  .navbar-toggler {
    padding: 0.2rem 0.35rem;
    margin-left: 0.5rem;
  }
}

/* Hasta 400px (cubre 375px típicos) */
@media (max-width: 400px) {
  .navbar .container {
    gap: 0.5rem;
  }

  .nav-quick-actions {
    gap: 0.5rem;
  }

  .nav-quick-actions .btn {
    padding: 0.3rem;
  }

  .nav-quick-actions .btn i {
    font-size: 1rem;
  }

  .navbar-toggler {
    padding: 0.2rem 0.35rem;
    margin-left: 0.2rem;
  }
}

/* Ultra-angosto: hasta 320px (foldables/mini) */
/* ≤320px: fijamos layout y menú como overlay */
@media (max-width: 320px) {
  .navbar {
    overflow: visible;
  }

  /* por las dudas */
  .navbar .container {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
    /* mantenemos todo en una línea */
    position: relative;
    /* referencia para el overlay */
  }

  .navbar-brand img {
    max-height: 32px;
    width: auto;
  }

  .nav-quick-actions {
    gap: 0.5rem;
  }

  .nav-quick-actions .btn {
    padding: 0.2rem;
  }

  .nav-quick-actions .btn i {
    font-size: 0.75rem;
  }

  .navbar-toggler {
    padding: 0.1rem 0.25rem;
    margin-left: 0.8rem;
    flex-shrink: 0;
  }

  /* --- Overlay del collapse --- */
  .navbar-collapse {
    position: absolute;
    /* se despega de la fila */
    top: 100%;
    /* justo debajo de la barra */
    left: 0;
    right: 0;
    width: 100vw;
    /* garantiza ancho de viewport */
    margin: 0;
    padding: .5rem 1rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
    z-index: 1000;
  }

  /* Fuerza display correcto cuando está abierta */
  .navbar-collapse.collapse.show {
    display: block !important;
  }
}


@media (max-width: 320px) {

  html,
  body {
    overflow-x: hidden;
  }
}


/* ========= HERO: band full-bleed pegado abajo ========= */

/* Stacking ordenado */
.hero { position: relative; isolation: isolate; }
.hero .carousel { position: relative; z-index: 0; }
.hero .hero-overlay { z-index: 1; pointer-events: none; }

/* Contenedor del copy: anclado abajo y full-width */
.hero .hero-copy-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0; /* pegado al borde inferior */
  z-index: 2;
  display: block;               /* full-bleed real (sin centrar como caja) */
  padding: 0;                   /* sin aire que deje foto visible abajo */
  pointer-events: none;         /* no tapa controles del carrusel */
}

/* Placa ancha */
.hero .hero-copy{
  pointer-events: auto;         /* si ponés botones, serán clickeables */
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;

  /* TRANSPARENCIA (ajustá el alpha 0..1) */
  /* Más liviano: .25 | .22 | .20 | .18 */
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  color: #fff;

  padding: clamp(12px, 2vw, 20px);
  border-radius: 0;             /* franja recta; opcional: 12px 12px 0 0 */
}

/* Título/subtítulo más compactos */
.h1-lg{
  font-size: clamp(1.1rem, 2vw + .3rem, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.hero-sub{
  font-size: clamp(.95rem, 1.2vw + .5rem, 1.1rem);
  opacity: .95;
  margin: .35rem 0 0 0;
}

/* Micro-ajuste móviles angostos */
@media (max-width: 360px){
  .hero .hero-copy{ padding: 10px 12px; }
}