/* ResupplyAI · v7 MOBILE-FIRST (Estudio UX, 2 oct 2026). Lista y porqués en salida/MOBILE.md.
   Va después de sazon.css en las 7 páginas. Casi todo vive bajo 640 px: el escritorio no cambia.
   Fuera de media query solo va el ancho mínimo de los enlaces del pie (sin cambio visible, verificado al píxel). */

@media (max-width: 640px) {

  .mail-big { display: inline-flex; align-items: center; min-height: 44px; }   /* el correo grande de Contact medía 28 px */

  /* ---------- 1. Portada: la primera pantalla nunca queda vacía ----------
     Antes: las puertas arrancaban invisibles hasta 0.76 s + 0.9 s y el cuadro demo quedaba debajo de ellas.
     Ahora: nada arranca invisible (solo un desplazamiento corto), y el orden es titular → cuadro demo → puertas. */
  .hx2 .hx-in { gap: 20px; padding-top: calc(var(--cn-bar) + 14px + 26px); padding-bottom: 28px; }
  .hx2-title { margin-bottom: 14px; font-size: clamp(2.5rem, 1rem + 7.4vw, 3.1rem); line-height: .96; letter-spacing: -.045em; }
  .hx-lede { font-size: 1rem; line-height: 1.5; }
  .hx2-copy .chip { margin-top: 12px; }
  .hx2-copy { order: 1; } .hx2 .fd-wrap { order: 2; } .hx2 .hx-pick { order: 3; }
  @media (prefers-reduced-motion: no-preference) {
    .hx-rise { animation-name: hx-lift; animation-duration: 600ms; animation-delay: calc(var(--d, 0) * .35ms); }
    .hx2 .fd-wrap { animation-duration: 700ms; animation-delay: 80ms; }
  }

  /* el cuadro demo, adaptado: 2 filas a la vista; cada etapa es una línea "etiqueta · valor" con su tramo vertical */
  .fd { padding: 14px 14px 12px; border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(6, 10, 26, .8); }
  .fd-h { margin-bottom: 10px; font-size: .9375rem; gap: 10px; }
  .fd-pp { min-width: 44px; justify-content: center; }
  .fd-list { --rh: 152px; height: calc(var(--rh) * 2 + 10px); }
  .fd-row { justify-content: flex-start; gap: 8px; padding: 11px 12px; }
  .fd-need { gap: 0 8px; }
  .fd-need > .fd-k { display: none; }
  .fd-item { font-size: .9375rem; }
  .fd-nsn, .fd-meta { font-size: .8125rem; }
  .fd-item { flex-basis: 100%; }
  .fd-meta::before { content: "· "; content: "· " / ""; }
  .fd-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fd-step { flex-direction: row; align-items: baseline; gap: 10px; padding: 2px 0 2px 12px; }
  .fd-step::before, .fd-step::after { left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .fd-step::after { transform-origin: top; }
  .fd-run .fd-row:not(.is-s1) .fd-s1::after, .fd-run .fd-row:not(.is-s2) .fd-s2::after, .fd-run .fd-row:not(.is-s3) .fd-s3::after { transform: scaleY(0); }
  .fd-step .fd-k { flex: none; width: 7.4em; font-size: .8125rem; }
  .fd-v { font-size: .875rem; align-items: center; }
  .fd-v svg { margin-top: 0; }
  .fd-foot { margin-top: 8px; font-size: .8125rem; }

  /* las puertas, livianas: dos filas que se tocan enteras, con flecha; la palabra Suppliers/Contractors queda para lector de pantalla */
  .hx-q { margin-bottom: 10px; font-size: .9375rem; }
  .hx-doors { gap: 8px; }
  .hx-door { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 16px 14px 16px 18px; border-radius: 16px; }
  .hx-door-k { font-size: 1.125rem; }
  .hx-door-t { font-size: .875rem; line-height: 1.4; }
  .hx-door-go { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 44px; min-height: 44px; height: 44px; padding: 0; justify-content: center; }
  .hx-door-gl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- 2. Tarjetas con número en contorno: sin el hueco de 100 px ni el número cortado ---------- */
  .on-card, .rules .on-card, .hww-steps .on-card { min-height: 0; padding: 20px 20px 22px; }
  .on-card h3 { padding-right: 58px; font-size: 1.1875rem; margin-bottom: 8px; }
  .on-card p, .rules .on-card p { margin: 0; max-width: none; }
  .on-num { top: 14px; right: 16px; bottom: auto; font-size: 46px; transform: none; -webkit-text-stroke-width: 1.2px; }
  .ev { min-height: 0; padding: 20px 20px 22px; }
  .ev h3 { padding-right: 58px; }
  .ev p { margin: 0; max-width: none; }
  .steps, .rules { gap: 10px; }

  /* ---------- 3. Fuentes: la trama de puntos era media tarjeta vacía ---------- */
  .src-grid { gap: 10px; }
  .src-card .fig { height: 64px; }
  .src-card .t { padding: 18px 20px 20px; }

  /* ---------- 4. La cadena de la portada: línea de tiempo vertical, sin pantallas vacías ---------- */
  .chain { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 36px; }
  .chain::before { display: block; left: 6px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(207, 213, 236, .55) 0 6px, transparent 6px 12px); }
  .sz-on .chain[data-draw]::before { transform-origin: 50% 0; }
  .sz-on .chain[data-draw]:not(.is-in)::before { transform: scaleY(0); }
  .chain li { padding: 0 0 22px 34px; }
  .chain li:last-child { padding-bottom: 0; }
  .chain li::before { position: absolute; left: 0; top: 5px; margin: 0; z-index: 1; }
  .chain p { max-width: none; }

  /* ---------- 5. Ficha "Example Supply Co." (Suppliers): dos columnas, la mitad de alto ---------- */
  .record dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record .r { padding: 13px 16px; }
  .record .r:nth-child(odd) { border-right: 1px solid var(--line); }
  .record .r.full { border-right: 0; }
  .record-h { padding: 14px 16px; }
  .record dd.mono { font-size: .875rem; white-space: nowrap; }   /* el NSN nunca se parte en dos líneas */

  /* ---------- 6. "Your matches" en celular: la fila entera entra junta (antes se veían etiquetas sin valores) ---------- */
  .ml-run .matches tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease); }
  .ml-run[data-ml-rows="1"] .matches tbody tr:nth-child(-n+1), .ml-run[data-ml-rows="2"] .matches tbody tr:nth-child(-n+2),
  .ml-run[data-ml-rows="3"] .matches tbody tr:nth-child(-n+3), .ml-run[data-ml-rows="4"] .matches tbody tr { opacity: 1; transform: none; }
  .ml-run .matches tbody .ml-c { opacity: 1; transform: none; }
  .matches tr { padding: 14px 16px; gap: 8px 14px; }
  .ml-toggle { min-height: 44px; min-width: 44px; }

  /* ---------- 7. Ritmo vertical: secciones un poco más cortas en celular ---------- */
  .section { padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .ml-run .matches tbody tr { opacity: 1; transform: none; }
}

/* targets táctiles: "Sign in" y "About" del pie medían 41–43 px de ancho (44 de alto). Sin cambio visible. */
.foot-col a { min-width: 44px; }