/* ==========================================================================
   Exa Jurídico — Mobile responsiveness fixes
   Aplica overrides a las hojas inline para que el sitio se vea perfecto
   en cualquier móvil (iPhone, Samsung, etc.) y cualquier navegador.
   Cargar SIEMPRE después de la <style> inline en cada index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Base universal
   -------------------------------------------------------------------------- */
html, body { max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* Inputs sin zoom en iOS al hacer focus */
input, select, textarea {
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   2) Grid items: evitar que el contenido fuerce columnas más anchas que
      su contenedor en CSS Grid (default min-width: auto = min-content).
      Esto arregla el overflow del .hero-content, .hero-visual y similares.
   -------------------------------------------------------------------------- */
.hero-wrap > *,
.services > *,
.reviews > *,
.reasons > *,
.nosotros-teaser > *,
.contact-info > *,
.bar > *,
footer.site-foot > *,
.meta > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   3) Tablas con scroll horizontal en pantallas estrechas
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ig-table,
  .stack-table,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  .ig-table thead,
  .ig-table tbody,
  .ig-table tr {
    display: table;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }
}

/* --------------------------------------------------------------------------
   4) Servicios: bajar el min-track de 280px a 240px en pantallas estrechas
      para que no fuerce overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .services {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .svc { padding: 22px 18px 20px; }
  .svc__num {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .services { grid-template-columns: 1fr; }
  .svc__num {
    text-align: left;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   5) Hero: reducir paddings en pantallas pequeñas y forzar 1 columna
      (la inline ya hace 1col a 960, pero estabilizamos dimensiones).
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .stage { margin: 0 12px 20px; }
  .hero-wrap { padding: 48px 18px 56px; gap: 32px; }
  .hero-visual { aspect-ratio: 4/4; max-width: 100%; }
  .hero-content h1 { font-size: clamp(34px, 9vw, 52px); }
  .hero-content p.lead { font-size: 15.5px; }
  .hero-bullets {
    grid-template-columns: 1fr;
    gap: 10px 0;
    margin-top: 28px;
  }
  .hero-bullets li { font-size: 13px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { flex: 1 1 auto; min-height: 44px; padding: 12px 18px; font-size: 14px; }
  .label { font-size: 9px; letter-spacing: 0.22em; }
  .meta .title { font-size: 16px; }
}

@media (max-width: 480px) {
  .stage { margin: 0 10px 16px; border-radius: 10px; }
  .hero-wrap { padding: 38px 14px 48px; }
  .hero-content h1 { font-size: clamp(30px, 9vw, 44px); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6) Section paddings y heads en móvil
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  section.band { padding: 48px 16px; }
  .section-head .kicker { font-size: 10px; letter-spacing: 0.18em; }
  .section-head h2,
  .section-head .h2,
  h2 {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.18;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  section.band { padding: 40px 14px; }
}

/* --------------------------------------------------------------------------
   7) Bar (header) y CTA
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .bar {
    padding: 10px 12px;
    gap: 8px;
  }
  .brand b, .brand strong { font-size: 16px; }
  .bar .cta-mini {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.04em;
    min-height: 40px;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .bar .cta-mini { font-size: 10px; padding: 7px 10px; }
}

/* --------------------------------------------------------------------------
   8) Reasons / Reviews: minmax más permisivo
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .reasons {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
  }
  .reviews {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .review { padding: 18px 18px 16px; }
}

/* --------------------------------------------------------------------------
   9) FAQ y contact block
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  details summary {
    font-size: 17px;
    gap: 12px;
  }
  details summary::after { font-size: 20px; }
  .contact-block { padding: 32px 22px; border-radius: 14px; }
  .contact-info {
    flex-direction: column;
    gap: 8px;
    font-size: 11.5px;
  }
}

/* --------------------------------------------------------------------------
   10) Footer y legales — evitar quedar bajo widgets fijos (WhatsApp + bot)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  footer.site-foot {
    padding: 24px 16px calc(28px + env(safe-area-inset-bottom));
    gap: 8px;
    font-size: 10px;
  }
  footer.site-foot .c { font-size: 13px; }
  footer .legal-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  footer .legal-links a {
    margin-right: 0;
    padding: 6px 0;
  }
  /* Espacio para que los widgets fijos no tapen contenido del final */
  body { padding-bottom: 0; }
  footer.site-foot { margin-bottom: 70px; }
}

/* --------------------------------------------------------------------------
   11) Tap targets accesibles en cualquier botón / enlace de acción
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .btn,
  .cta-mini,
  .svc__link,
  details summary {
    min-height: 44px;
  }
  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   12) Reducir transformaciones costosas en táctil para evitar hover sticky
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .svc:hover,
  .review:hover,
  .btn:hover,
  details:hover {
    transform: none !important;
    box-shadow: inherit;
    background: inherit;
  }
}

/* --------------------------------------------------------------------------
   13) Widget bot / WhatsApp: no taparse mutuamente y respetar safe-area
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .lex-widget-button,
  #whatsapp-button,
  .whatsapp-widget__button {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* --------------------------------------------------------------------------
   14) Defensiva: cualquier elemento con anchura forzada en píxeles que
      supere el viewport debe encogerse.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .contact-block,
  .nosotros-teaser,
  .reviews,
  .reasons,
  .faq,
  .services {
    max-width: 100%;
  }
  pre, code { max-width: 100%; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   15) Pantallas muy pequeñas (≤360 px — Samsung Galaxy Fold etc.)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .hero-content h1 { font-size: clamp(26px, 8.5vw, 36px); }
  .hero-content p.lead { font-size: 14.5px; }
  .meta { padding: 24px 12px 6px; font-size: 10px; }
  .meta .title { font-size: 15px; }
  section.band { padding: 36px 12px; }
  .stage { margin: 0 8px 14px; }
  .hero-wrap { padding: 32px 12px 40px; }
  .svc h3 { font-size: 19px; }
  .svc p { font-size: 13.5px; }
}