/* ==========================================================================
   NAVOA — base común de responsive (Fase 1).
   Espaciados, contenedor y mínimos táctiles. La tipografía vive en navoa-type.css.
   Se carga en todas las páginas ANTES de las hojas propias de cada página.
   ========================================================================== */

/* Fuentes, escala tipográfica y reglas de texto: navoa-type.css (se carga al final de cada página). */

/* --- Variables (tokens) --------------------------------------------------------------------------
   Tamaños fluidos: escalan en proporción entre 360 px y 1920 px de ancho. */
:root {
  --space-xs: clamp(0.5rem, 0.4423rem + 0.2564vw, 0.75rem);
  --space-s: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);
  --space-l: clamp(2.5rem, 2.0385rem + 2.0513vw, 4.5rem);
  --space-section: clamp(3.5rem, 2.4615rem + 4.6154vw, 8rem);

  --container: 1240px;
  --gutter: clamp(1rem, 0.6538rem + 1.5385vw, 2.5rem);
  --tap: 44px;

  /* Puntos de quiebre de referencia (en media queries se escriben literales): 480 · 768 · 1024 · 1440 */
}

/* --- Base ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- Sin desbordes -------------------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, td, th, label, a, strong, em, span) { overflow-wrap: break-word; }
/* Guiones automáticos solo en pantallas angostas, donde evitan que palabras largas en español se salgan */
@media (max-width:479px) {
  :is(p, li, dd, blockquote, figcaption) { -webkit-hyphens: auto; hyphens: auto; }
}

/* --- Imágenes y medios -------------------------------------------------------------------------- */
img, video, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }

/* --- Áreas táctiles mínimas en celular y tablet (44 × 44 px) ------------------------------------ */
@media (max-width:767px), (max-width:1023px) and (max-height:500px) { /* celular vertical u horizontal */
  button, [role="button"], select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  a[class*="button"], a[class*="btn"], a[class*="cta"] { min-height: var(--tap); }

  /* Hamburguesa: 44 × 44 manteniendo el mismo espacio interno (18 px) para las 3 líneas y la X */
  .nav .nav-toggle { width: var(--tap) !important; height: var(--tap) !important; padding: 13px 7px !important; box-sizing: border-box; }
  .nav .logo { min-height: var(--tap); }
  .leadership-contact span { width: var(--tap) !important; height: var(--tap) !important; }
}

/* --- Fase 2: mínimos de lectura y toque en celular ----------------------------------------------- */
@media (max-width:767px), (max-width:1023px) and (max-height:500px) {
  /* Texto corrido nunca bajo 16 px (las etiquetas quedan en su mínimo de 12 px) */
  main :is(p, dd, blockquote):not([class*="eyebrow"]):not([class*="meta"]):not([class*="tag"]):not([class*="label"]):not([class*="kicker"]):not(.adoption-change__subtitle):not(.adoption-concept-note) { font-size: max(1rem, 1em) !important; }

  /* Enlaces de footer, menú y redes con área táctil mínima */
  footer a, .navoa-global-footer a, .nav .nav-links a, .nav-dropdown a, .footer-social, .footer-col a,
  [class*="social"] a, [class*="socials"] a { min-height: var(--tap); display: inline-flex; align-items: center; }
  [class*="social"] a, [class*="socials"] a, .footer-social { min-width: var(--tap); justify-content: center; }
  .navoa-agent__close, .navoa-agent__send { min-width: var(--tap); min-height: var(--tap); }

  /* Listas de contenido (no los rótulos de diagramas) también a 16 px */
  main li:not([class]):not(:is(.build-system__loop, .adoption-evolution ol) li),
  main li:not([class]):not(:is(.build-system__loop, .adoption-evolution ol) li) > a { font-size: max(1rem, 1em) !important; }

  /* Enlaces sueltos (no los que van dentro de un texto) con área táctil mínima */
  main a:not(:is(p, li, dd, h1, h2, h3, h4, figcaption, span, strong, em) a) { min-height: var(--tap); }
  .nav .lang-switch__item { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
  .logo { min-height: var(--tap); display: inline-flex; align-items: center; }
  .navoa-global-footer__nav a, .re-jump a, .article-share__row a { min-width: var(--tap); }
  .academia-subnav__inner a, .academy-next__start, .academy-next__login, .navoa-agent__wa a { min-height: var(--tap); }
  .navoa-agent__wa a { display: inline-flex; align-items: center; }
}

/* --- Fase 3: contenedor único en pantallas grandes (≥1024 px) --------------------------------------
   Todos los contenedores de contenido miden lo mismo: 1240 px máx. con márgenes laterales fluidos.
   En tablet y celular cada página conserva sus anchos de lectura propios. Header, heroes de borde a borde,
   bloques estrechos a propósito y contenedores dentro de tarjetas quedan fuera. */
@media (min-width: 1024px) {
  :is(.work-shell, .diagnostico-v2-shell, .re-shell, .so-shell, .home-services__inner, .adoption-index__inner,
      .leadership-shell, .strategy-shell, .hero-academy__shell, .leadership-contact-section__inner):not(.community-band .work-shell):not(.work-hero .work-shell):not(.diagnostico-v2-impact .diagnostico-v2-shell) {
    width: min(var(--container), 100% - 2 * var(--gutter)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  :is(.clinic-shell, .lab-shell) {
    width: min(var(--container), 100% - 2 * var(--gutter)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}