/* ============================================================
   HAULER · REFINE LAYER v12 (2026) — Capa final de depuración
   Reglas de esta capa:
   1. CERO bordes grises. Donde hace falta contorno se usa un
      "borde de luz" de vidrio: blanco translúcido + blur +
      highlight especular interno (glassmorphism realista).
   2. Una sola fuente de verdad por microinteracción (mata los
      duplicados de v10/v11 que se veían desfasados).
   3. Física realista: spring easing con leve overshoot en
      transform, press-feedback en :active, nada de loops
      decorativos (float/wiggle/swing eliminados).
   Carga al FINAL de la cascada en index y proveedores.
============================================================ */

:root {
  /* Muelle suave: overshoot ~6% — sensación física sin parecer juguete */
  --spring:       cubic-bezier(0.34, 1.45, 0.64, 1);
  --spring-soft:  cubic-bezier(0.22, 1.2, 0.36, 1);
  /* Borde de luz para vidrio sobre fondos claros */
  --glass-edge:        rgba(255, 255, 255, 0.65);
  --glass-edge-strong: rgba(255, 255, 255, 0.85);
  /* Highlight especular interno (simula el grosor del vidrio) */
  --glass-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 42, 78, 0.03);
}

/* ============================================================
   1. NAVBAR — depurado: una sola microinteracción, sin loops
============================================================ */

/* Sin borde gris inferior: el límite lo da el blur + una sombra de aire */
.navbar {
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 6px 24px rgba(0, 42, 78, 0.05) !important;
}
.navbar.scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset,
              0 10px 32px rgba(0, 42, 78, 0.08) !important;
}

/* Logo: fuera la entrada con blur (se veía desfasada). Solo hover físico. */
.navbar-brand img {
  animation: none !important;
  transition: transform 0.4s var(--spring) !important;
}
.navbar-brand:hover img {
  transform: scale(1.03);
  filter: none;
}

/* El auto-hide se retiró del motor JS v12; esto neutraliza la clase
   por si un navegador sirve el JS v10 cacheado. */
.navbar.navbar-hidden { transform: none !important; }

/* Subrayado: ÚNICA definición. Crece desde la izquierda con muelle. */
@media (min-width: 992px) {
  .navbar .nav-link { position: relative; }
  .navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 4px;
    height: 2px;
    width: auto;
    border-radius: 2px;
    background: var(--hauler-orange);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--spring-soft);
  }
  .navbar .nav-link:hover::after  { transform: scaleX(0.55); }
  .navbar .nav-link.active::after { transform: scaleX(1); }
}

/* Menú móvil desplegado: panel de vidrio sin borde */
@media (max-width: 991px) {
  .navbar-collapse {
    border: none;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--glass-inner), 0 18px 44px rgba(0, 42, 78, 0.14);
  }
}

/* ============================================================
   2. HERO — sin float perpetuo; botones con press físico
============================================================ */
.hero .btn-warning,
.hero .custom-orange {
  animation: none !important; /* mata gentle-float */
}
.hero .btn {
  transition: transform 0.35s var(--spring),
              box-shadow 0.35s var(--spring-soft),
              background 0.3s ease,
              border-color 0.3s ease;
}
.hero .btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.12s;
}

/* Botón secundario: vidrio con borde de luz (no gris de Bootstrap) */
.hero .btn-light {
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Trust bar: la línea dura se vuelve gradiente de luz */
.hero-trust {
  border-top: none !important;
  position: relative;
}
.hero-trust::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.45), transparent);
}

/* Kicker: vidrio puro, sin contorno */
.hero-kicker {
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ============================================================
   3. CARDS — vidrio realista unificado (servicios, principios,
      misión/visión, beneficios, evaluación)
============================================================ */
.servicios-detallados .p-4.bg-white,
.valor-box,
.mision, .vision,
.card-beneficio,
.seccion-evaluacion .card {
  border: 1px solid var(--glass-edge) !important;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.72)) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    var(--glass-inner),
    0 1px 2px rgba(0, 42, 78, 0.03),
    0 10px 30px rgba(0, 42, 78, 0.06) !important;
  transition:
    transform 0.5s var(--spring),
    box-shadow 0.5s var(--spring-soft),
    border-color 0.4s ease !important;
}

.servicios-detallados .p-4.bg-white:hover,
.valor-box:hover,
.mision:hover, .vision:hover,
.card-beneficio:hover,
.seccion-evaluacion .card:hover {
  transform: translateY(-5px);
  border-color: var(--glass-edge-strong) !important;
  box-shadow:
    var(--glass-inner),
    0 2px 6px rgba(0, 42, 78, 0.05),
    0 22px 48px rgba(0, 42, 78, 0.12) !important;
}

/* Press físico: la card "cede" al click */
.servicios-detallados .p-4.bg-white:active,
.valor-box:active,
.card-beneficio:active {
  transform: translateY(-2px) scale(0.995);
  transition-duration: 0.12s !important;
}

/* ============================================================
   4. PRINCIPIOS (valores) — microinteracción única, sin rebote doble
============================================================ */
/* Mata icon-bounce/los dos transforms en conflicto de v10 */
.valor-box:hover i,
.servicios-detallados .p-4.bg-white:hover .fa-users,
.servicios-detallados .p-4.bg-white:hover .fa-truck,
.card-beneficio:hover i {
  animation: none !important;
  filter: none !important;
}

.valor-box i {
  transition:
    transform 0.45s var(--spring),
    background 0.35s ease,
    color 0.35s ease !important;
}
.valor-box:hover i {
  transform: translateY(-4px) !important;
}

/* Íconos de servicio: mismo tratamiento, un solo movimiento con muelle */
.servicios-detallados .p-4.bg-white .fa-users,
.servicios-detallados .p-4.bg-white .fa-briefcase,
.servicios-detallados .p-4.bg-white .fa-plane,
.servicios-detallados .p-4.bg-white .fa-headset {
  transition:
    transform 0.45s var(--spring),
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease !important;
}
.servicios-detallados .p-4.bg-white:hover .fa-users,
.servicios-detallados .p-4.bg-white:hover .fa-briefcase,
.servicios-detallados .p-4.bg-white:hover .fa-plane,
.servicios-detallados .p-4.bg-white:hover .fa-headset {
  transform: translateY(-3px) !important;
}

/* Checks: solo cambio de color, sin desplazamientos escalonados raros */
.servicios-detallados .p-4.bg-white:hover .fa-check {
  transform: none !important;
  transition-delay: 0s !important;
}

/* ============================================================
   5. CARRUSEL — marco fuera; el vidrio lo da la sombra y el radio
============================================================ */
.carrusel-wrapper {
  border: none !important;
  box-shadow:
    0 1px 2px rgba(0, 42, 78, 0.05),
    0 16px 40px rgba(0, 42, 78, 0.12) !important;
}
.carrusel-wrapper:hover {
  border: none !important;
  box-shadow:
    0 2px 6px rgba(0, 42, 78, 0.06),
    0 24px 56px rgba(0, 42, 78, 0.16) !important;
}
/* Flechas: vidrio con física de muelle */
.carrusel-btn {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 4px 14px rgba(0, 42, 78, 0.12) !important;
  transition: transform 0.35s var(--spring),
              background 0.3s ease,
              color 0.3s ease,
              opacity 0.3s ease !important;
}
.carrusel-btn:active { transform: translateY(-50%) scale(0.92) !important; }

/* ============================================================
   6. FAQ — accordion sin contornos, separación por aire
============================================================ */
#preguntas-frecuentes .accordion-item,
.seccion-faq .accordion-item {
  border: none !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--glass-inner), 0 4px 16px rgba(0, 42, 78, 0.05) !important;
}
#preguntas-frecuentes .accordion-item:hover,
.seccion-faq .accordion-item:hover {
  box-shadow: var(--glass-inner), 0 10px 28px rgba(0, 42, 78, 0.09) !important;
}
.accordion-button { border: none !important; }

/* ============================================================
   7. FORMULARIOS — inputs sin marco gris: superficie + focus ring
============================================================ */
.form-container {
  border: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-inner), 0 18px 48px rgba(0, 42, 78, 0.08) !important;
}

.form-control, .form-select {
  border: 1px solid transparent !important;
  background: rgba(0, 42, 78, 0.045) !important;
  box-shadow: none !important;
  transition: background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.25s var(--spring-soft) !important;
}
.form-control:hover, .form-select:hover {
  background: rgba(0, 42, 78, 0.06) !important;
}
.form-control:focus, .form-select:focus {
  background: #ffffff !important;
  border-color: rgba(255, 122, 0, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.12) !important;
  transform: none !important;
}
.form-control::placeholder { color: #8fa1b3; }

/* Botón enviar: press físico */
.form-container .btn-primary:active,
.btn-primary:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 0.12s !important;
}

/* ============================================================
   8. MODALES — vidrio profundo, sin línea divisoria dura
============================================================ */
.modal-content {
  border: 1px solid var(--glass-edge) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: var(--glass-inner), 0 32px 80px rgba(0, 26, 48, 0.3) !important;
}
.modal-header { border-bottom: none !important; box-shadow: 0 1px 0 rgba(0, 42, 78, 0.06); }
.modal-footer { border-top: none !important; box-shadow: 0 -1px 0 rgba(0, 42, 78, 0.06); }
.modal-backdrop.show { opacity: 0.35; backdrop-filter: blur(3px); }

/* ============================================================
   9. WHATSAPP — fuera el wiggle; queda pulso + física de hover
============================================================ */
.whatsapp-float i { animation: none !important; }
.whatsapp-float {
  transition: transform 0.4s var(--spring), box-shadow 0.4s var(--spring-soft) !important;
}
.whatsapp-float:active { transform: scale(0.94) !important; }

/* ============================================================
   10. FOOTER — íconos sociales con muelle
============================================================ */
.footer .d-flex.gap-3 > a {
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s var(--spring), background 0.3s ease !important;
}
.footer .d-flex.gap-3 > a:active { transform: scale(0.92) !important; }
.footer hr { opacity: 0.12; }

/* ============================================================
   11. ACCESIBILIDAD / MOVIMIENTO REDUCIDO
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-link::after { transition: none; }
  .hero .btn, .valor-box, .mision, .vision,
  .servicios-detallados .p-4.bg-white, .card-beneficio {
    transition: none !important;
  }
}

/* Móvil: lifts más cortos (no hay hover real; evita saltos en tap) */
@media (max-width: 768px) {
  .servicios-detallados .p-4.bg-white:hover,
  .valor-box:hover,
  .mision:hover, .vision:hover,
  .card-beneficio:hover {
    transform: translateY(-2px);
  }
}

/* ============================================================
   12. CENTRADO ÓPTICO DE ÍCONOS — los glifos FA quedaban
   descentrados dentro de sus chips (inline-flex + line-height
   heredado). inline-grid + place-items centra el ::before exacto.
============================================================ */
.servicios-detallados .p-4.bg-white .fa-users,
.servicios-detallados .p-4.bg-white .fa-briefcase,
.servicios-detallados .p-4.bg-white .fa-plane,
.servicios-detallados .p-4.bg-white .fa-headset {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  text-align: center !important;
  padding: 0 !important;
}
/* Chips sobre texto centrado (valores y beneficios): grid de bloque
   + margin auto = centrado horizontal garantizado aunque el padre
   pierda text-align */
.valor-box i,
.card-beneficio i {
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  text-align: center !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.valor-box i::before,
.servicios-detallados .p-4.bg-white i::before,
.card-beneficio i::before {
  display: block;
  line-height: 1;
  margin: 0;
}
/* Chips ::before de Misión/Visión: mismo tratamiento */
.mision h3::before,
.vision h3::before {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  flex: 0 0 36px;
}

/* ============================================================
   13. WIZARD PROVEEDORES — alineación al lenguaje v12
   (esta hoja debe cargar DESPUÉS de proveedores-v2.css)
============================================================ */
:root {
  --pv-ease: cubic-bezier(0.22, 1.2, 0.36, 1);
  --pv-t: 240ms;
  --pv-radius-sm: 10px;
  --pv-radius-md: 14px;
  --pv-radius-lg: 20px;
}

/* Fondo de la sección: atmósfera, no plano */
.pv-wizard, [class*="pv-"] section, body .pv-surface {
  background-color: transparent;
}

/* Panel principal: vidrio v12 */
.pv-panel {
  border: 1px solid var(--glass-edge) !important;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.78)) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    var(--glass-inner),
    0 2px 6px rgba(0, 42, 78, 0.04),
    0 18px 44px rgba(0, 42, 78, 0.08) !important;
}

/* Cards de perfil: vidrio + física de muelle */
.pv-profile-card {
  border: 1px solid var(--glass-edge) !important;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.88),
    rgba(255, 255, 255, 0.74)) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--glass-inner), 0 6px 18px rgba(0, 42, 78, 0.05);
  transition:
    transform 0.45s var(--spring),
    box-shadow 0.45s var(--spring-soft),
    border-color 0.3s ease !important;
}
.pv-profile-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-edge-strong) !important;
  box-shadow: var(--glass-inner),
    0 0 0 2px rgba(0, 42, 78, 0.35),
    0 14px 34px rgba(0, 42, 78, 0.12) !important;
}
.pv-profile-card:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.12s !important;
}

/* Inputs: sin marco gris — superficie + focus ring (patrón v12) */
.pv-input, .pv-select, .pv-textarea {
  border: 1px solid transparent !important;
  background: rgba(0, 42, 78, 0.045) !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.pv-input:hover, .pv-select:hover, .pv-textarea:hover {
  background: rgba(0, 42, 78, 0.065) !important;
}
.pv-input:focus, .pv-select:focus, .pv-textarea:focus {
  background: #ffffff !important;
  border-color: rgba(255, 122, 0, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.12) !important;
}
/* Estados de validación conservan su semántica sobre el patrón nuevo */
.pv-field.is-error .pv-input,
.pv-field.is-error .pv-select,
.pv-field.is-error .pv-textarea {
  background: #fff !important;
  border-color: var(--pv-error) !important;
  box-shadow: 0 0 0 4px var(--pv-error-subtle) !important;
}
.pv-field.is-valid .pv-input {
  border-color: rgba(21, 128, 61, 0.5) !important;
}

/* Checks en tarjeta: superficie en vez de borde */
.pv-check {
  border: 1px solid transparent !important;
  background: rgba(0, 42, 78, 0.035);
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.3s var(--spring-soft) !important;
}
.pv-check:hover {
  background: rgba(0, 42, 78, 0.06);
  border-color: transparent !important;
}
.pv-check:has(input:checked) {
  background: var(--pv-accent-subtle) !important;
  border-color: rgba(0, 42, 78, 0.35) !important;
}

/* Dropzone: el dashed es affordance — se mantiene pero suave y vivo */
.pv-upload {
  border: 1.5px dashed rgba(0, 42, 78, 0.22) !important;
  background: rgba(0, 42, 78, 0.025) !important;
  transition: border-color 0.25s ease, background 0.25s ease,
              transform 0.35s var(--spring) !important;
}
.pv-upload:hover, .pv-upload.dragover {
  border-color: var(--hauler-orange) !important;
  background: rgba(255, 122, 0, 0.05) !important;
  transform: scale(1.005);
}

/* Archivos subidos: superficie sin marco */
.pv-file {
  border: 1px solid transparent !important;
  background: rgba(0, 42, 78, 0.035) !important;
}

/* Botones: press físico + primario con gradiente azul v12 */
.pv-btn {
  transition: transform 0.3s var(--spring),
              box-shadow 0.3s ease,
              background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease !important;
}
.pv-btn:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 0.12s !important;
}
.pv-btn-primary {
  background: linear-gradient(135deg, #003a6e, var(--hauler-blue)) !important;
  box-shadow: 0 4px 14px rgba(0, 42, 78, 0.22);
}
.pv-btn-primary:hover {
  background: linear-gradient(135deg, #00457f, #00305a) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 42, 78, 0.28);
}
.pv-btn-secondary {
  border-color: transparent !important;
  background: rgba(0, 42, 78, 0.05) !important;
}
.pv-btn-secondary:hover {
  background: rgba(0, 42, 78, 0.09) !important;
  color: var(--hauler-blue) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pv-profile-card, .pv-btn, .pv-upload { transition: none !important; }
}

/* ============================================================
   14. MISIÓN/VISIÓN — separación vertical al apilarse en móvil.
   v10 pone margin:0 a ambas cards en <=768px y mata el gutter
   de g-4; se restituye el espacio entre cards (1.5rem, como el
   resto de las filas de cards del sitio).
============================================================ */
@media (max-width: 768px) {
  #quienes-somos .row.mt-5.g-4 > .vision {
    margin-top: 1.5rem !important;
  }
}