/* =============================================================
   JURÍDICO VIRTUAL — AJUSTES UX/UI FINALES
   Capa ligera para navegación, espaciado y tipografía responsiva.
   ============================================================= */

/* Hero más compacto en escritorio: evita sumar dos espacios superiores */
.hero {
  min-height: auto !important;
  padding: 88px 0 48px !important;
  align-items: flex-start !important;
}
.hero-inner {
  min-height: 0 !important;
  padding: 0 !important;
}
.hero-content {
  padding-top: clamp(18px,3vw,38px);
}
.hero-subtitle {
  max-width: 62ch;
  text-wrap: pretty;
}
.hero-actions {
  margin-bottom: 28px !important;
}
.hero-img-wrap {
  height: clamp(440px,42vw,570px);
  aspect-ratio: auto !important;
}

/* Lectura más equilibrada en títulos y textos generales */
.section-header {
  max-width: 960px;
  margin-inline: auto;
}
.section-title {
  text-wrap: balance;
}
.section-desc {
  max-width: 68ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.news-card-body h3,
.sitio-body h3 {
  text-wrap: balance;
}
.news-card-body p,
.sitio-body p {
  text-wrap: pretty;
}

/* El archivo contiene el logotipo oficial de la JLCA CDMX */
.sitio-img-icon img[src$="logo-junta-local-conciliacion-arbitraje-edomex.webp"] {
  display: block !important;
  width: 96% !important;
  max-width: 96% !important;
  height: 94px !important;
  transform: none !important;
}
.sitio-card:hover .sitio-img-icon img[src$="logo-junta-local-conciliacion-arbitraje-edomex.webp"] {
  transform: scale(1.035) !important;
}

/* Navegación móvil: panel limpio, sin WhatsApp/Facebook superpuestos */
@media (max-width: 920px) {
  #main-header,
  #main-header.scrolled {
    background: rgba(249,251,252,.99) !important;
    border-bottom: 1px solid #d7e1e6 !important;
    box-shadow: 0 8px 24px rgba(7,31,46,.07) !important;
  }
  .navbar {
    min-height: 76px !important;
    padding: 10px 18px !important;
  }
  .logo,
  .nav-toggle {
    position: relative;
    z-index: 1004 !important;
  }
  .nav-toggle,
  .nav-toggle.open {
    display: flex !important;
    width: 46px !important;
    height: 46px !important;
    border: 1px solid #c8d7de !important;
    border-radius: 12px !important;
    background: #f7fafb !important;
  }
  .nav-toggle span,
  .nav-toggle.open span {
    background: #143f56 !important;
  }
  .nav-links {
    display: none !important;
    position: fixed !important;
    inset: 76px 0 0 !important;
    width: 100% !important;
    height: calc(100dvh - 76px) !important;
    margin: 0 !important;
    padding: 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-y: auto !important;
    background:
      radial-gradient(circle at 88% 4%,rgba(93,165,197,.16),transparent 26%),
      linear-gradient(155deg,#071f2e,#0b3045) !important;
    z-index: 1001 !important;
  }
  .nav-links.open {
    display: flex !important;
    animation: uxMenuOpen .24s ease-out both;
  }
  .nav-links li {
    width: 100% !important;
    text-align: left !important;
  }
  .nav-links li a,
  .nav-links li a:hover,
  .nav-links li a.active {
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 12px 15px !important;
    border: 1px solid transparent !important;
    border-bottom-color: rgba(255,255,255,.11) !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.9) !important;
    font-size: .94rem !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
  .nav-links li a:hover,
  .nav-links li a.active {
    border-color: rgba(139,197,221,.22) !important;
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
  }
  .nav-links li a:not(.nav-cta)::after {
    display: none !important;
  }
  .nav-links li a.nav-cta,
  .nav-links li a.nav-cta:hover {
    justify-content: center !important;
    margin-top: 7px !important;
    border-color: #4385a5 !important;
    background: #286b8d !important;
    color: #fff !important;
  }
  .nav-social,
  .nav-social.open {
    display: none !important;
  }

  .hero {
    padding: 90px 0 42px !important;
  }
  .hero-inner {
    min-height: 0 !important;
    padding: 0 !important;
  }
  .hero-content {
    padding-top: 0 !important;
  }
  .hero-img-wrap {
    height: 280px !important;
  }
}

@keyframes uxMenuOpen {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .hero {
    padding: 86px 0 34px !important;
  }
  .hero-inner {
    gap: 20px !important;
  }
  .hero-title {
    max-width: 100%;
    font-size: clamp(2.55rem,12vw,3.25rem) !important;
    line-height: 1 !important;
    text-wrap: balance;
  }
  .hero-subtitle {
    max-width: 38ch;
    font-size: .92rem !important;
    line-height: 1.62 !important;
  }
  .hero-img-wrap {
    height: 205px !important;
  }
  .section-header {
    margin-bottom: 32px !important;
  }
  .section-title {
    max-width: 18ch;
    margin-inline: auto;
    font-size: clamp(2rem,9vw,2.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
  }
  .section-desc {
    max-width: 39ch;
    font-size: .93rem !important;
    line-height: 1.65 !important;
  }
  .page-hero h1 {
    max-width: 15ch;
    font-size: clamp(2rem,10vw,2.75rem) !important;
    line-height: 1.06 !important;
    text-wrap: balance;
  }
  .page-hero p {
    max-width: 38ch;
    text-wrap: pretty;
  }
  .news-card-body h3 {
    font-size: 1.22rem !important;
    line-height: 1.28 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.open {
    animation: none !important;
  }
}