/* ════════════════════════════════════════════════════════════════════════════
   ATLAS DE PROXIMIDAD — Pantalla de acceso · LOSA INSTITUCIONAL
   Rediseño 2026-08-21. Sustituye al rediseño 2026-08-02 (tarjeta flotante
   sobre banda con degradado). Espacio de nombres `lp-` para el chrome de la
   página y `jq-` para el carrusel de jerarquías.

   La regla del rumbo: bloques de color a sangre y nada entre ellos. O losa
   guinda con texto blanco, o losa blanca con texto carbón. Cero degradados,
   cero cristal, radio 0, sombra 0. El gris no es superficie: es filete de
   1 px (--border2) y texto secundario (--text-2).

   Hereda del sistema: tokens del :root, .btn/.btn-primary, .form-control,
   .form-label, .brand-sign, .reveal, .skip-link, .sr-only.
   ════════════════════════════════════════════════════════════════════════════ */

/* `body.landing` y no `.landing`: la regla de style.css tenía la misma
   especificidad y el orden de carga decide. Aquí la página es blanca a secas:
   el color entra por losas, no por fondo. */
body.landing {
  background: var(--surface);
  overflow-x: clip;
  overscroll-behavior-y: none;
}

.lp-sec[id], .lp-hero[id], .lp-access[id], .lp-cap[id], .lp-audit[id] { scroll-margin-top: 64px; }

/* Utilidades tipográficas del rumbo ------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Rótulo institucional: Cabin 700 en mayúsculas con tracking abierto. */
.lp-inst {
  font-family: 'Cabin', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* ════════════════════════════════════════════════════════════════════
   1 · Barra superior — losa guinda profunda, siempre
   Antes era transparente y se "cuajaba" al hacer scroll. En pantalla
   partida eso dejaba texto blanco sobre la mitad blanca: ilegible medio
   segundo por carga. Ahora la banda es permanente, que además es lo que
   hace el sello institucional en las otras tres pantallas.
   ════════════════════════════════════════════════════════════════════ */
.lp-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 58px;
  padding: 0 clamp(14px, 3vw, 26px);
  background: var(--guinda-d);
}
.lp-topbar .brand-sign { width: 22px; height: 22px; flex: none; }
.lp-brand {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: #ffffff;
}
.lp-nav { margin-left: auto; display: flex; align-items: stretch; height: 100%; }
.lp-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(10px, 1.4vw, 18px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.lp-nav a:hover { background: var(--guinda-l); }
/* El acceso no es un enlace más: es una losa blanca dentro de la banda. */
.lp-nav .lp-nav-cta {
  background: #ffffff;
  color: var(--guinda-d);
  font-weight: 700;
  margin-left: 10px;
}
.lp-nav .lp-nav-cta:hover { background: var(--guinda-l); color: #ffffff; }
.lp-topbar a:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }

/* Progreso de lectura: filete blanco sobre la banda guinda. */
.scroll-progress { background: #ffffff; }

/* ════════════════════════════════════════════════════════════════════
   2 · Acceso — pantalla partida: losa guinda + losa blanca
   ════════════════════════════════════════════════════════════════════ */
.lp-hero {
  display: grid;
  grid-template-columns: 56fr 44fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Losa guinda: la red de puntos y el titular ────────────────────── */
.lp-slab {
  position: relative;
  background: var(--guinda);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
/* La red vive en el aire que queda ARRIBA del bloque de texto: el texto es
   una losa guinda opaca que la corta en seco con un filete blanco. */
.lp-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-slab-copy {
  position: relative;
  z-index: 1;
  background: var(--guinda);
  border-top: 1px solid rgba(255, 255, 255, .38);
  padding: clamp(22px, 2.6vw, 38px) clamp(22px, 3.2vw, 56px) clamp(24px, 3vw, 44px);
}
.lp-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 16px;
}

/* Un solo h1 por página: carga la marca y la afirmación. */
.lp-hero-title { margin: 0; font-family: 'Roboto', system-ui, sans-serif; font-weight: 400; }
.lp-brandline {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .88);
}
.lp-brandline .brand-sign { width: 24px; height: 24px; flex: none; }
/* Roboto Black con tracking negativo: el titular es un bloque, no una línea. */
.lp-claim {
  display: block;
  margin-top: 14px;
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: .94;
  letter-spacing: -.032em;
  color: #ffffff;
  text-wrap: balance;
}
.lp-hero-lead {
  margin-top: 16px;
  max-width: 48ch;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

/* Cifras verificadas: una rejilla de celdas separadas por filete blanco. */
.lp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .38);
}
.lp-facts > div {
  padding: 13px 12px 2px 0;
  border-right: 1px solid rgba(255, 255, 255, .28);
}
.lp-facts > div:last-child { border-right: 0; }
.lp-facts > div + div { padding-left: 12px; }
.lp-fact-n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.lp-fact-l {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
}

/* Señal de scroll: rótulo mono pegado al filete donde termina la red, sin
   flecha que rebote. Va en el flujo del flex para no depender de medidas. */
.lp-cue {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  margin: 0 clamp(22px, 3.2vw, 56px) 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .5);
  transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
.lp-cue:hover { background: #ffffff; color: var(--guinda); border-color: #ffffff; }
.lp-cue:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ── Losa blanca: el formulario, sin tarjeta ───────────────────────── */
/* No hay contenedor flotante: la losa blanca ES la tarjeta. */
.lp-access {
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(58px + clamp(28px, 4vw, 56px)) clamp(22px, 3vw, 54px) clamp(56px, 6vw, 76px);
}
.lp-access-inner { width: 100%; max-width: 400px; }
.lp-access-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--guinda);
  margin-bottom: 12px;
}
.lp-access-title {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--text);
}
.lp-access-sub {
  margin-top: 8px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.lp-access form { margin-top: 22px; }
.lp-access .form-group { margin-bottom: 16px; }
.lp-access .form-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 7px;
}
.lp-access .form-control {
  padding: 12px 13px;
  font-size: 15px;
  min-height: 46px;
  border: 1px solid var(--border-input);
  background: #ffffff;
}
.lp-access .form-control:hover { border-color: var(--text); }
.lp-access .form-control:focus {
  border-color: var(--guinda);
  box-shadow: inset 0 0 0 1px var(--guinda);
}
.lp-access .btn-primary {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Sin opacidad: fundir la losa guinda al 72 % dejaba «VERIFICANDO…» en
   4.36:1. El estado en curso se dice con color propio y con el cursor. */
.lp-access .btn-primary[disabled] {
  opacity: 1;
  background: var(--guinda-l);
  color: #ffffff;
  cursor: progress;
  transform: none;
}

/* Error: losa carbón con filete guinda. No se pinta en guinda para no
   competir con el botón de entrar, que es la única losa guinda del panel. */
.lp-error {
  display: none;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--guinda);
  background: var(--text);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.5;
}
.lp-error.is-on { display: block; }

/* Pie de la losa, no del formulario: cierra el bloque blanco por abajo. */
.lp-access-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 13px clamp(22px, 3vw, 54px);
  border-top: 1px solid var(--border2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ════════════════════════════════════════════════════════════════════
   3 · Carrusel de jerarquías
   Sustituye a la escalera de cuatro tarjetas apiladas: cuatro niveles,
   una línea por nivel, y al lado el territorio que cada uno manda. El
   ámbito guinda se cierra conforme baja la jerarquía — de las 40 manzanas
   del territorio a una sola.
   ════════════════════════════════════════════════════════════════════ */
.lp-sec {
  position: relative;
  overflow-x: clip;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 28px);
}
.lp-inner { width: 100%; max-width: 1180px; margin: 0 auto; }

.lp-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--guinda);
  margin-bottom: 14px;
}
.lp-h2 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: clamp(27px, 3.6vw, 44px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--text);
  text-wrap: balance;
}
.lp-h2 strong { font-weight: 900; color: var(--guinda); }
.lp-lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 1.62;
  color: var(--text-2);
}

.lp-niveles-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 46px); }

.jq {
  position: relative;
  border: 1px solid var(--text);
  background: #ffffff;
}
.jq:focus-visible { outline: 2px solid var(--guinda); outline-offset: 3px; }

/* `pan-y`: el dedo arrastra el carrusel en horizontal y la página sigue
   haciendo scroll en vertical. Sin esto el navegador se queda el gesto. */
.jq-viewport { overflow: hidden; touch-action: pan-y; }
.jq-track {
  display: flex;
  will-change: transform;   /* el track SÍ se arrastra: aquí sí corresponde */
}
.jq-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
}

/* Mitad de texto: alterna losa guinda (niveles 1 y 3) y losa blanca (2 y 4) */
.jq-copy {
  padding: clamp(22px, 2.8vw, 40px) clamp(20px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.jq-slide--guinda .jq-copy { background: var(--guinda); }
.jq-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--guinda);
}
.jq-slide--guinda .jq-tag { color: rgba(255, 255, 255, .86); }
.jq-role {
  margin-top: 10px;
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(21px, 2.5vw, 33px);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--text);
  text-wrap: balance;
}
.jq-slide--guinda .jq-role { color: #ffffff; }
.jq-scope {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.jq-slide--guinda .jq-scope { color: rgba(255, 255, 255, .86); }
/* La línea: una sola frase por nivel. Si crece, deja de ser un carrusel y
   vuelve a ser la escalera de tarjetas que este bloque vino a sustituir. */
.jq-line {
  margin-top: 16px;
  max-width: 46ch;
  font-size: clamp(14px, 1.15vw, 16.5px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-2);
}
.jq-slide--guinda .jq-line { color: #ffffff; }

/* Mitad de territorio */
.jq-map {
  position: relative;
  border-left: 1px solid var(--text);
  background: #ffffff;
  min-height: 232px;
}
.jq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jq-ratio {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 1;
  padding: 5px 9px;
  background: var(--text);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

/* Mando del carrusel */
.jq-nav {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--text);
  background: #ffffff;
}
.jq-btn {
  width: 46px;
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--text);
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.jq-btn:hover:not([aria-disabled="true"]) { background: var(--guinda); color: #ffffff; }
/* Extremo de la secuencia: el glifo baja a gris sólido (7.2:1), no a una
   opacidad que lo dejaba en 1.94:1. El botón sigue siendo enfocable. */
.jq-btn[aria-disabled="true"] {
  color: var(--text-2);
  background: var(--bg2);
  cursor: not-allowed;
}
.jq-pos {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.jq-bars { margin-left: auto; display: flex; }
.jq-dot {
  width: 34px;
  min-height: 42px;
  border: 0;
  border-left: 1px solid var(--border2);
  background: #ffffff;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.jq-dot::after {
  content: '';
  position: absolute;
  left: 9px; right: 9px; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  /* --border2 daba 1.53:1: los cuatro trazos eran el único indicio de que
     había cuatro láminas y prácticamente no se veían. */
  background: var(--text-2);
}
.jq-dot[aria-current="true"]::after { background: var(--guinda); height: 5px; margin-top: -2.5px; }
.jq-dot:hover::after { background: var(--text); }
.jq-dot[aria-current="true"]:hover::after { background: var(--guinda); }

.lp-escalera-foot {
  margin-top: 22px;
  padding: 15px 20px;
  background: var(--text);
  color: #ffffff;
  font-size: clamp(13.5px, 1.2vw, 15.5px);
  font-weight: 400;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════
   4 · Capacidades — losa de texto + captura a sangre
   Sin marco de ventana falsa, sin sombra, sin radio: la captura llega al
   borde de la pantalla y su límite lo marca la losa guinda de al lado.
   ════════════════════════════════════════════════════════════════════ */
.lp-cap {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: stretch;
}
.lp-cap--flip .lp-cap-copy { order: 2; }

.lp-cap-copy {
  background: var(--guinda);
  color: #ffffff;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lp-cap-copy .lp-kicker { color: rgba(255, 255, 255, .86); }
.lp-cap-copy .lp-h2 { color: #ffffff; }
.lp-cap-copy .lp-h2 strong {
  background: #ffffff;
  color: var(--guinda);
  padding: 0 .16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lp-cap-copy .lp-lead { color: rgba(255, 255, 255, .88); }

.lp-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.lp-points li {
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.lp-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .3); }
.lp-points strong { display: block; color: #ffffff; font-weight: 700; margin-bottom: 3px; }

.lp-shot { position: relative; margin: 0; overflow: hidden; background: var(--text); }
.lp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.lp-shot figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 6px 12px;
  background: var(--text);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Auditoría: losa carbón, tres bloques separados por filete ─────── */
.lp-audit {
  background: var(--text);
  color: #ffffff;
  padding: clamp(48px, 6vw, 84px) clamp(20px, 5vw, 28px);
}
.lp-audit .lp-inner { max-width: 1180px; }
.lp-audit .lp-kicker { color: #ffffff; }
.lp-audit .lp-h2 { color: #ffffff; }
.lp-audit .lp-h2 strong {
  background: var(--guinda);
  color: #ffffff;
  padding: 0 .16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lp-audit .lp-lead { color: rgba(255, 255, 255, .84); max-width: 68ch; }
.lp-audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid rgba(255, 255, 255, .34);
}
.lp-audit-card {
  padding: 22px 22px 24px;
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.lp-audit-card:last-child { border-right: 0; }
.lp-audit-card h3 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: #ffffff;
  margin-bottom: 9px;
}
.lp-audit-card p { font-size: 13px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .84); }

/* ════════════════════════════════════════════════════════════════════
   5 · Pie — losa guinda profunda
   ════════════════════════════════════════════════════════════════════ */
.lp-footer {
  background: var(--guinda-d);
  color: #ffffff;
  padding: clamp(52px, 7vw, 92px) clamp(20px, 5vw, 28px);
}
.lp-footer-inner { max-width: 1180px; margin: 0 auto; }
.lp-footer .brand-sign { width: 38px; height: 38px; }
.lp-footer-title {
  margin-top: 16px;
  font-family: var(--font-brand);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #ffffff;
}
.lp-footer-line {
  margin-top: 16px;
  max-width: 54ch;
  font-size: clamp(14.5px, 1.3vw, 17px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
}
.lp-footer .btn-primary {
  margin-top: 28px;
  padding: 15px 34px;
  background: #ffffff;
  color: var(--guinda-d);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none;
}
.lp-footer .btn-primary:hover { background: #ffffff; color: var(--guinda); }
.lp-footer .btn-primary:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; box-shadow: none; }
.lp-footer-note {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .82);
}

/* ════════════════════════════════════════════════════════════════════
   6 · Responsivo
   El acceso partido no se encoge: se apila. En 390 px la losa guinda es
   una banda de presentación y el formulario ocupa la pantalla entera.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: 52fr 48fr; }
  .lp-claim { font-size: clamp(30px, 4.6vw, 46px); }
  .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-facts > div:nth-child(2) { border-right: 0; }
  .lp-facts > div:nth-child(3) { padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
  .lp-facts > div:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .28); }
}

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lp-slab { display: block; min-height: 0; padding-top: 58px; }
  .lp-net { position: relative; height: clamp(150px, 24vh, 210px); }
  .lp-cue { display: none; }
  .lp-access { padding: clamp(30px, 6vw, 48px) clamp(22px, 5vw, 40px) 0; }
  .lp-access-inner { max-width: 460px; }
  .lp-access-foot { position: static; margin-top: 26px; padding: 13px 0 26px; }

  .lp-cap { grid-template-columns: minmax(0, 1fr); }
  /* En una sola columna la captura va SIEMPRE arriba: primero se ve la
     pantalla, después se lee por qué importa. */
  .lp-cap .lp-cap-copy, .lp-cap--flip .lp-cap-copy { order: 2; }
  .lp-shot { order: 1; aspect-ratio: 16 / 10; }

  .lp-audit-card { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .lp-audit-card:last-child { border-bottom: 0; }
}

@media (max-width: 700px) {
  /* El territorio pasa arriba y la línea debajo: siguen leyéndose juntos,
     que es el punto del carrusel, pero sin partir la frase en cuatro. */
  .jq-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: 128px minmax(0, 1fr); }
  .jq-map { order: 1; border-left: 0; border-bottom: 1px solid var(--text); min-height: 0; }
  .jq-copy { order: 2; }
  .jq-line { margin-top: 12px; }
}

@media (max-width: 620px) {
  .lp-nav a:not(.lp-nav-cta) { display: none; }
  .lp-claim { font-size: clamp(30px, 9vw, 42px); }
  .lp-facts > div { padding-right: 10px; }
}

/* Táctil: objetivos de 44 px y campos de 16 px (sin zoom al enfocar en iOS) */
@media (pointer: coarse) {
  .lp-nav a { min-height: 44px; }
  .lp-access .form-control { font-size: 16px; min-height: 48px; }
  .lp-access .btn-primary { min-height: 52px; }
  .lp-footer .btn-primary { min-height: 50px; }
  .jq-btn, .jq-dot { min-height: 46px; }
  .jq-btn { width: 52px; }
  .jq-dot { width: 44px; }
  .lp-topbar, .lp-nav a, .lp-cue, .jq-btn, .jq-dot { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  .jq-track { transition: none !important; }
}