/* =========================================================
   XAFER – Navbar limpio (sin fondo en Home)  [CON MOD MÓVIL + MEGA CLARO]
   Requiere: <nav class="navbar xafer-navbar ...">
   Estados: .is-overlay (home top), .is-solid (scroll / internas)
   ========================================================= */

/* --------- Base --------- */
.xafer-navbar{
  position: relative;
  overflow: visible !important;
  border-bottom: 0 !important;             /* sin “filo” */
  box-shadow: none !important;
  background-clip: padding-box;
  background: transparent;
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.xafer-navbar .navbar-collapse{ overflow: visible !important; }
.xafer-navbar .dropdown{ position: static; }

/* --------- Anula “skins” de Bootstrap que podrían forzar fondo --------- */
.xafer-navbar,
nav.xafer-navbar{
  --bs-navbar-bg: transparent !important;
  background: transparent !important;
}
nav.xafer-navbar.bg-light,
nav.xafer-navbar.bg-white,
nav.xafer-navbar.bg-body,
nav.xafer-navbar.bg-body-tertiary,
nav.xafer-navbar[class*="bg-"]{
  background: transparent !important;
}
.xafer-navbar.border-bottom,
.site-header.border-bottom,
header.border-bottom{ border-bottom: 0 !important; }

/* =========================================================
   SKINS BARRA
   ========================================================= */
.xafer-navbar.is-overlay{
  background: rgba(15,16,18,.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.xafer-navbar.is-solid{
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   Tipografías / Links por skin (barra)
   ========================================================= */
.xafer-navbar.is-overlay .nav-link{
  color: rgba(255,255,255,.92);
  border-radius: .5rem;
  transition: background-color .2s ease, color .2s ease;
}
.xafer-navbar.is-overlay .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.xafer-navbar.is-overlay .navbar-brand img{ filter: none; }
.xafer-navbar.is-overlay .btn.btn-link.custom-icon{ color:#fff; }

.xafer-navbar.is-solid .nav-link{ color:#212529; }
.xafer-navbar.is-solid .nav-link:hover{ background: rgba(0,0,0,.04); }
.xafer-navbar.is-solid .btn.btn-link.custom-icon{ color:#0d6efd; }

/* =========================================================
   Mega menú – CLARO en escritorio (siempre)
   ========================================================= */
.mega-menu{
  width: 100%;
  left: 50%;
  transform: translate(-50%,10px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  margin-top: .5rem;
  border-radius: .9rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  border: 1px solid rgba(0,0,0,.06);
}

/* Mostrar */
.mega-menu.show{ opacity:1; pointer-events:auto; transform: translate(-50%,0); }
.mega-menu .container{ max-width: 1140px; }

/* === Forzamos ESTILO CLARO para mega-menu en cualquier estado de la barra === */
.xafer-navbar .mega-menu{
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(0,0,0,.06) !important;
}
.xafer-navbar .mega-link{
  color: #111 !important;
  padding:.55rem .6rem; border-radius:.6rem;
  text-decoration:none; display:inline-flex; align-items:center;
  transition: background-color .15s ease, transform .15s ease;
}
.xafer-navbar .mega-link:hover{ background: rgba(0,0,0,.05) !important; transform: translateX(1px); }
.xafer-navbar .mega-aside{
  background: rgba(255,255,255,.96) !important;
  border:1px solid rgba(0,0,0,.06) !important; border-radius:.75rem;
}
.xafer-navbar .btn-ghost{
  background:#fff; border:1px solid rgba(0,0,0,.10); color:#111;
}
.xafer-navbar .btn-ghost:hover{ background:#f6f7f8; }
.xafer-navbar .mega-hr{ border-top: 1px solid rgba(0,0,0,.08) !important; }
.xafer-navbar .mega-muted{ color:#555 !important; }
.xafer-navbar .mega-link-inline{ color:#0d6efd !important; }

/* Tarjetas servicios (dentro de mega) en claro */
.xafer-navbar .svc-card{
  background:#fff; border:1px solid rgba(0,0,0,.08); color:#111;
  border-radius:.75rem; display:block; text-decoration:none;
}
.xafer-navbar .svc-card:hover{
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.xafer-navbar .svc-text{ color:#555; }
.xafer-navbar .svc-cta{ color:#0d6efd; border-top:1px dashed rgba(0,0,0,.08); }

/* =========================================================
   Accesibilidad / Hover
   ========================================================= */
.navbar .nav-link{ font-weight: 500; padding: .6rem .9rem; }
@media (min-width: 992px){
  .navbar .dropdown > .mega-menu{
    opacity:0; pointer-events:none; transform: translate(-50%,10px);
  }
  .navbar .dropdown.is-open > .mega-menu{
    opacity:1; pointer-events:auto; transform: translate(-50%,0);
  }
}


/* =========================================================
   Mobile: colapsable CLARO (ya existía, lo mantenemos)
   ========================================================= */
@media (max-width: 991.98px){
  .xafer-navbar .navbar-collapse{
    position:absolute; top:100%; left:0; right:0; z-index:1100;
    background: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
    border:1px solid rgba(0,0,0,.06); border-top:0; border-radius:0 0 .8rem .8rem;
    padding:.5rem .75rem;
  }
  .xafer-navbar .navbar-collapse .nav-link,
  .xafer-navbar .navbar-collapse .dropdown-toggle{ color:#111 !important; }
  .xafer-navbar .navbar-collapse .nav-link:hover{
    background: rgba(0,0,0,.05); color:#000 !important; border-radius:.5rem;
  }
  .xafer-navbar .navbar-collapse .dropdown-menu{
    position: static !important; float:none; display:block;
    background: rgba(255,255,255,.96) !important; color:#111 !important;
    border:1px solid rgba(0,0,0,.06) !important; border-radius:.6rem;
    margin:.25rem 0 .5rem; box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
  }
  .xafer-navbar .navbar-collapse .dropdown-item{ color:#111 !important; }
  .xafer-navbar .navbar-collapse .dropdown-item:hover{
    background: rgba(0,0,0,.05) !important; color:#000 !important;
  }

  /* Por si el tema fuerza oscuro vía .navbar-dark */
  .xafer-navbar.navbar-dark .navbar-collapse .dropdown-menu{
    background: rgba(255,255,255,.96) !important; color:#111 !important;
  }
}

/* Eliminar sombrita de Bootstrap que causa línea */
.xafer-navbar.shadow-sm{ box-shadow:none !important; }

/* =========================================================
   Layout helpers (espaciado con navbar fijo)
   ========================================================= */
:root{ --nav-h: 80px; }
body:not(.is-home){ padding-top: 0 !important; }
body.is-home{ padding-top: 0 !important; }
body.is-home main,
body.is-home #app,
body.is-home .page-content,
body.is-home .container-main{ margin-top:0 !important; padding-top:0 !important; }
body.is-home .navbar + *{ margin-top:0 !important; }
@media (max-width: 991px){ :root{ --nav-h: 64px; } }
#mainNavbar.shadow-sm {
  box-shadow: none !important;
}


/* =========================================================
   Mega Servicios – Estilo minimal y consistente con Productos
   (no requiere cambios en Blade/JS)
   ========================================================= */

/* contenedor del mega de servicios */
.mega-services{
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  padding: 14px 14px 10px;          /* compacta */
  color: #111;
}

/* grid interno (respetando tus col-* de Bootstrap) */
.mega-services .row.g-3{ --bs-gutter-x: 12px; --bs-gutter-y: 12px; }

/* tarjeta base */
.mega-services .svc-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px 12px 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.mega-services .svc-card:hover{
  background: #fff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.mega-services .svc-card:focus-visible{
  outline: 3px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* encabezado con icono + título */
.mega-services .svc-title{
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15.5px; line-height: 1.2;
  margin: 0;
}
.mega-services .svc-title .bi{
  width: 20px; height: 20px; font-size: 18px;
  color: #5f6770;                 /* sutil */
}

/* descripción corta */
.mega-services .svc-text{
  margin: 0;
  font-size: 13px;
  color: #5a5f66;
}

/* CTA sutil al final */
.mega-services .svc-cta{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: #0d6efd;
}
.mega-services .svc-cta .bi{ font-size: 18px; line-height: 1; }

/* compacidad y estética en responsive */
@media (max-width: 1200px){
  .mega-services{ padding: 12px; border-radius: 12px; }
}
@media (max-width: 576px){
  .mega-services{ padding: 10px; }
  .mega-services .svc-card{ padding: 12px; border-radius: 10px; }
  .mega-services .svc-title{ font-size: 15px; }
  .mega-services .svc-text{ font-size: 12.5px; }
}

/* Dark navbar overlay encima: asegura legibilidad del mega en claro */
.xafer-navbar.navbar-dark .mega-services{
  background: rgba(255,255,255,.94) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.06) !important;
}
.xafer-navbar.navbar-dark .mega-services .svc-card{ background:#fff; }

/* ====== Layout navbar con logo centrado ====== */
.navbar .brand-center{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1020;                /* por encima del fondo de la barra */
  pointer-events: auto;         /* clickeable */
  height: var(--nav-h, 80px);
}
/* Logo centrado más grande */
.navbar .brand-center img{
  height: 111px;          /* antes 72px */
  max-height: 100px;     /* límite por seguridad */
  object-fit: contain;   /* evita deformaciones */
  transition: height .3s ease;
}

/* Opcional: que reduzca un poco al hacer scroll */
body:not(.is-home) .navbar .brand-center img{
  height: 76px;          /* más compacto cuando no está en home */
}

/* Reserva espacio lateral para que el centro quede libre (≥ lg) */
@media (min-width: 992px){
  .nav-spread{ padding-inline: 120px; }
  .left-group  { gap: .25rem; }
  .right-group { gap: .25rem; }
}

/* En móvil, el logo centrado absoluto no se muestra (usamos el del collapse) */
@media (max-width: 991.98px){
  .navbar .brand-center{ display: none !important; }
}

/* Asegura que los mega menús floten sobre el logo centrado */
@media (min-width: 992px){
  .mega-menu{ position: absolute; z-index: 1030; }
}


/* Forzar el mismo look que overlay también cuando .is-solid (internas) */
.xafer-navbar.is-solid{
  background: transparent !important;      /* ya lo tienes */
  box-shadow: none !important;
}

/* Texto/íconos blancos en .is-solid */
.xafer-navbar.is-solid .nav-link,
.xafer-navbar.is-solid .navbar-brand,
.xafer-navbar.is-solid .btn.btn-link.custom-icon{
  color: #fff !important;
}
.xafer-navbar.is-solid .nav-link:hover{
  background: rgba(255,255,255,.08);
  color:#fff !important;
}

/* Toggler (hamburguesa) blanco en móvil cuando estamos en .is-solid */
.xafer-navbar.is-solid .navbar-toggler{
  border-color: rgba(255,255,255,.35);
}
.xafer-navbar.is-solid .navbar-toggler .navbar-toggler-icon{
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* Si el HTML trae 'navbar-light' por servidor, neutralízalo cuando esté .is-solid */
.navbar-light.xafer-navbar.is-solid{
  --bs-navbar-color:#fff;
  --bs-navbar-hover-color:#fff;
  --bs-navbar-brand-color:#fff;
  --bs-navbar-brand-hover-color:#fff;
}