/* ============================================================
   MOTION — capa de movimiento y diseño de página (opt-in)
   ============================================================
   La carga sólo la página que la declara (`seo.hojas` + `scripts` del
   content.json), igual que `califica.css`. Hoy: EB-2 NIW de Rumbo.

   Tres reglas, derivadas del brand book (§6 Gráficos: la estrella del norte y
   las «líneas de rumbo/constelación»; §3 registro banking premium):

   1. El movimiento SUMA, nunca esconde. Ninguna regla de aquí deja un texto
      invisible esperando a JS: todo lo que se anima es un elemento que
      `motion.js` inyecta o un adorno (icono, estrella, sello). Sin JS, con
      `prefers-reduced-motion` o para Googlebot la página es la de siempre.
   2. Curvas de salida, sin rebote. Se entra decelerando (`--mo-ease`); lo que
      se dibuja, se dibuja con curva simétrica (`--mo-draw`). Las mismas dos
      curvas que ya usan `.reveal` y la criba de `califica`.
   3. Ningún color literal. Todo por token, para que Green North se pinte
      sola el día que declare la hoja.

   Todo cuelga de `html.mo` (lo pone `motion.js` sólo si hay movimiento
   permitido) salvo la interacción de criterios, que es funcionalidad y
   cuelga de `.mo-crits` con o sin movimiento. */

html.mo {
  --mo-ease: cubic-bezier(.2, .7, .2, 1);
  --mo-draw: cubic-bezier(.65, 0, .45, 1);
  --mo-t1: .35s;
  --mo-t2: .7s;
  --mo-t3: 2.4s;
}

/* ---------- 1 · El mapa: de LATAM al norte ----------
   Un mismo mapa en dos tonos: `--oscuro` en el hero navy, `--claro` en la
   sección de países. Estados: `mm-entra` (la ola de puntos), `mm-llego`
   (la estrella aterrizó: la constelación se enciende), `mm-quieto` (estado
   final sin coreografía: movimiento reducido o mapa de consulta). */
.mm { position: relative; }
.mm svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-lat, .mm-usa { transition: fill .9s ease; }
.mm--oscuro .mm-lat { fill: rgba(255,255,255,.2); }
.mm--oscuro .mm-usa { fill: rgba(var(--accent-rgb),.22); }
.mm--claro .mm-lat { fill: rgba(var(--brand-rgb),.16); }
.mm--claro .mm-usa { fill: rgba(var(--action-rgb),.2); }
.mm-llego.mm--oscuro .mm-usa { fill: rgba(var(--accent-rgb),.5); }
.mm-llego.mm--claro .mm-usa { fill: rgba(var(--action-rgb),.34); }

/* La constelación: contorno que se traza y estrellas en sus vértices. */
.mm-usa-linea { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mm--oscuro .mm-usa-linea { stroke: rgba(var(--accent-rgb),.75); }
.mm--claro .mm-usa-linea { stroke: rgba(var(--action-rgb),.55); }
.mm-usa-estrellas circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mm--oscuro .mm-usa-estrellas circle { fill: #fff; }
.mm--claro .mm-usa-estrellas circle { fill: var(--blue); }
.mm-llego .mm-usa-linea { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--mo-draw, ease); }
.mm-llego .mm-usa-estrellas circle { opacity: 1; transition: opacity .5s ease var(--d); }
html.mo .mm-llego:not(.mm-quieto) .mm-usa-estrellas circle { animation: mm-titila .7s var(--mo-ease) var(--d) both; }
@keyframes mm-titila { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.8); } 100% { opacity: 1; transform: none; } }
.mm-quieto .mm-usa-linea { transition: none; }

/* Capitales. */
.mm-cap-punto { transition: fill .25s ease, r .25s ease; }
.mm--oscuro .mm-cap-punto { fill: rgba(255,255,255,.7); }
.mm--claro .mm-cap-punto { fill: var(--navy); opacity: .55; }
.mm-cap-onda { fill: none; stroke-width: 1.5; opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.mm--oscuro .mm-cap-onda { stroke: var(--sky); }
.mm--claro .mm-cap-onda { stroke: var(--blue); }
.mm-cap--origen .mm-cap-punto { fill: var(--sky); opacity: 1; }
.mm--claro .mm-cap--origen .mm-cap-punto, .mm--claro .mm-cap--senalada .mm-cap-punto { fill: var(--blue); opacity: 1; }
html.mo .mm-cap--origen .mm-cap-onda { animation: mm-onda 2.2s ease-out infinite; }
@keyframes mm-onda { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.4); } }
.mo-mapa-paises .mm-cap { cursor: pointer; }
.mo-mapa-paises .mm-cap:hover .mm-cap-punto, .mm-cap--senalada .mm-cap-punto { r: 8; }
.mm-cap--sin { display: none; }

/* Rutas: la estela del vuelo y los ecos del resto de la región. */
.mm-arco { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mm-estela { stroke-width: 2; }
.mm--oscuro .mm-estela { stroke: rgba(var(--accent-rgb),.85); }
.mm--claro .mm-estela { stroke: var(--blue); }
.mm-estela--fija { stroke-dashoffset: 0; }
html.mo .mm-estela--traza { animation: mo-traza 1.1s var(--mo-draw) forwards; }
.mm-arco--eco { stroke-width: 1; }
.mm--oscuro .mm-arco--eco { stroke: rgba(var(--accent-rgb),.22); }
.mm--claro .mm-arco--eco { stroke: rgba(var(--action-rgb),.2); }
html.mo .mm-arco--eco { animation: mo-traza .9s var(--mo-draw) var(--d) forwards; }
.mm-quieto .mm-arco--eco { stroke-dashoffset: 0; animation: none; }
/* Sin vuelo propio (la E-2 vista desde un país sin tratado), las rutas que
   sí existen son la escena entera: se pintan con más presencia. */
.mm-sin-origen.mm--oscuro .mm-arco--eco { stroke: rgba(var(--accent-rgb),.5); stroke-width: 1.4; }

/* El cometa y la estrella del norte. */
.mm-cometa-nucleo { fill: #fff; }
/* Los resplandores son degradados radiales (`#…-halo`), no `filter: blur()`:
   un desenfoque se rasteriza aparte en cada fotograma y era parte de lo que
   hacía pesada la animación. El relleno llega como atributo desde el script;
   aquí sólo se pinta el degradado con el acento de la marca. */
.mm-halo-0 { stop-color: var(--sky); stop-opacity: .6; }
.mm-halo-1 { stop-color: var(--sky); stop-opacity: 0; }
.mm-norte { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mm--oscuro .mm-norte-cuerpo { fill: #fff; }
.mm--claro .mm-norte-cuerpo { fill: var(--navy); }
.mm-norte-punta { fill: var(--sky); }
.mm-llego .mm-norte { opacity: 1; }
html.mo .mm-llego:not(.mm-quieto) .mm-norte { animation: mo-estrella 1.1s var(--mo-ease) both; }
html.mo .mm-llego .mm-norte-halo { animation: mo-destello 5s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: center; }
.mm-estallido { fill: none; stroke: var(--sky); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
html.mo .mm-llego:not(.mm-quieto) .mm-estallido { animation: mo-halo 1.2s var(--mo-ease) both; }

/* La entrada de la matriz: un solo fundido del grupo entero. */
html.mo .mm-entra .mm-puntos { animation: mm-punto .6s ease both; }
@keyframes mm-punto { from { opacity: 0; } to { opacity: 1; } }

/* La etiqueta del origen, en HTML sobre el SVG. */
.mm-etiqueta {
  position: absolute; transform: translate(12px, -50%); white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1;
  padding: 7px 11px; border-radius: 999px; pointer-events: none;
  background: rgba(var(--brand-rgb),.72); border: 1px solid rgba(var(--accent-rgb),.35);
  color: #fff;
}
html.mo .mo-mapa-hero .mm-etiqueta { animation: mo-sube .5s var(--mo-ease) .2s both; }
@keyframes mo-sube { from { opacity: 0; transform: translate(12px, -30%); } to { opacity: 1; transform: translate(12px, -50%); } }

@keyframes mo-traza { to { stroke-dashoffset: 0; } }
@keyframes mo-halo { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes mo-estrella { from { opacity: 0; transform: scale(.3) rotate(-60deg); } to { opacity: 1; transform: none; } }
@keyframes mo-destello { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: .85; transform: scale(1.12); } }

/* ---------- Layout del hero con mapa ----------
   Va SIN condición de script: la página que carga esta hoja tiene este hero
   desde el primer pintado. Antes colgaba de una clase que ponía `motion.js`
   al montar el mapa, y hasta entonces se veía el hero de siempre —panel a la
   derecha— para saltar después al nuevo: un destello y un salto de layout.

   El hueco del mapa se RESERVA con un pseudo-elemento de su misma proporción
   (729:1000, la del viewBox): cuando el mapa llega cae en esa misma celda y
   nada se mueve. Texto | mapa arriba; «De un vistazo» en franja debajo. */
.visa-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); row-gap: clamp(28px, 4vw, 48px); }
.visa-hero-grid > div:first-child { grid-column: 1; grid-row: 1; }
.visa-hero-grid::after, .visa-hero-grid .mo-mapa-hero { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; width: 100%; max-width: 440px; }
.visa-hero-grid::after { content: ""; aspect-ratio: 729 / 1000; pointer-events: none; }
.visa-hero-grid .fact-card {
  grid-column: 1 / -1; grid-row: 2; max-width: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start;
  gap: 0; padding: 20px 8px 22px;
}
.visa-hero-grid .fact-card h3 { grid-column: 1 / -1; margin: 0 0 14px; padding: 0 20px; }
.visa-hero-grid .fact-row { border-top: none; border-left: 1px solid rgba(255,255,255,.1); padding: 2px 20px; }
.visa-hero-grid .fact-row:first-of-type { border-left: none; }
@media (max-width: 1100px) {
  .visa-hero-grid .fact-card { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding: 20px 12px; }
  .visa-hero-grid .fact-card h3 { padding: 0 8px; }
  .visa-hero-grid .fact-row { border-left: none; padding: 4px 8px; }
}
/* Una columna: el mapa pasa a FONDO del hero, arriba a la derecha y tenue,
   para que el vuelo ocurra en la primera pantalla. Debajo del texto se
   animaría donde nadie mira. Aquí no hay hueco que reservar. */
@media (max-width: 1000px) {
  .visa-hero-grid { grid-template-columns: 1fr; }
  .visa-hero-grid::after { content: none; }
  .visa-hero-grid > div:first-child { position: relative; z-index: 1; }
  .visa-hero-grid .mo-mapa-hero {
    grid-column: auto; grid-row: auto; position: absolute; top: -70px; right: -2%; width: 66%; max-width: 340px;
    opacity: .72; z-index: 0; pointer-events: none;
  }
  .visa-hero-grid .mo-mapa-hero .mm-etiqueta { display: none; }
  .visa-hero-grid .fact-card { grid-row: 2; }
}
@media (max-width: 560px) {
  .visa-hero-grid .fact-card { grid-template-columns: 1fr; }
  .visa-hero-grid .fact-row + .fact-row { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
}
html.mo .fact-row .fic { animation: mo-fic .9s var(--mo-ease) both; }
html.mo .fact-row:nth-of-type(1) .fic { animation-delay: 1.9s; }
html.mo .fact-row:nth-of-type(2) .fic { animation-delay: 2.05s; }
html.mo .fact-row:nth-of-type(3) .fic { animation-delay: 2.2s; }
html.mo .fact-row:nth-of-type(4) .fic { animation-delay: 2.35s; }
@keyframes mo-fic {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  40%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .22); background: rgba(var(--accent-rgb), .26); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* ---------- 2 · Criterios: «¿Cuáles cumples tú?» ----------
   Funcionalidad, no adorno: va con o sin movimiento. */
.mo-crits .crit {
  cursor: pointer; user-select: none; position: relative;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mo-crits .crit:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.mo-crits .crit:focus-visible { outline: 3px solid rgba(var(--action-rgb), .35); outline-offset: 2px; }
.mo-crits .crit .qstar { transition: transform .35s ease, color .2s ease; }
.mo-crits .crit[aria-checked="true"] {
  border-color: var(--blue); background: var(--wash); color: var(--navy);
}
/* 90° y no 45°: una estrella de 4 puntas a 45° se lee como una ✕ — justo la
   señal contraria a «lo cumplo». A 90° queda igual y el giro se ve. */
.mo-crits .crit[aria-checked="true"] .qstar { transform: rotate(90deg) scale(1.15); }
.mo-crits .crit::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 50%; border: 1.5px solid var(--line);
  transition: background-color .2s ease, border-color .2s ease;
}
.mo-crits .crit[aria-checked="true"]::after {
  border-color: var(--blue);
  background: var(--blue) no-repeat center / 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.mo-crits .crit { padding-right: 42px; }

.mo-meter { margin-top: 20px; display: grid; gap: 10px; }
.mo-pips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; position: relative; }
.mo-pip { height: 6px; border-radius: 6px; background: var(--line-soft, var(--line)); transition: background-color .3s ease; }
.mo-pip.on { background: var(--blue); }
/* La marca del mínimo: tras el tercer segmento. */
.mo-pip:nth-child(3) { position: relative; }
.mo-pip:nth-child(3)::after {
  content: ""; position: absolute; right: -4px; top: -5px; width: 2px; height: 16px;
  border-radius: 2px; background: var(--navy); opacity: .35;
}
.mo-meter-txt { font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 1.5em; }
.mo-meter-txt strong { color: var(--navy); }
.mo-meter.ok .mo-meter-txt strong { color: var(--blue); }
/* Al llegar al mínimo no se añade un botón: el de la sección ya está justo
   debajo. El movimiento lleva la vista hasta él. */
html.mo .mo-llamada { animation: mo-llamada 1.2s var(--mo-ease) 2; }
@keyframes mo-llamada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0); }
  45%      { box-shadow: 0 0 0 10px rgba(var(--action-rgb), .18); }
}

html.mo .mo-crits.mo-visto .crit .qstar { animation: mo-qstar .7s var(--mo-ease) both; }
html.mo .mo-crits .crit:nth-child(2) .qstar { animation-delay: .08s; }
html.mo .mo-crits .crit:nth-child(3) .qstar { animation-delay: .16s; }
html.mo .mo-crits .crit:nth-child(4) .qstar { animation-delay: .24s; }
html.mo .mo-crits .crit:nth-child(5) .qstar { animation-delay: .32s; }
html.mo .mo-crits .crit:nth-child(6) .qstar { animation-delay: .40s; }
@keyframes mo-qstar { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
html.mo .mo-crits .crit.mo-pulso .qstar { animation: mo-marca .45s var(--mo-ease); }
@keyframes mo-marca { 0% { transform: scale(.6); } 60% { transform: rotate(90deg) scale(1.35); } 100% { transform: rotate(90deg) scale(1.15); } }
html.mo .mo-pip.on { animation: mo-pip .4s var(--mo-ease); }
@keyframes mo-pip { from { transform: scaleX(.3); transform-origin: left; } to { transform: none; } }

/* ---------- 6 · Pasos: el cometa del carril ---------- */
.mo-cometa {
  position: absolute; top: 50%; left: 0; width: 90px; height: 3px; margin-top: -1.5px;
  background: linear-gradient(90deg, transparent, #fff);
  border-radius: 3px; opacity: 0; pointer-events: none;
}
html.mo .mo-cometa.va { animation: mo-cometa 1.8s var(--mo-ease) forwards; }
@keyframes mo-cometa {
  0% { left: -90px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
html.mo .step.lit .step-num { animation: mo-paso .8s var(--mo-ease); }
@keyframes mo-paso {
  0%   { box-shadow: 0 0 0 0 rgba(var(--action-rgb), .35); transform: scale(.92); }
  50%  { transform: scale(1.06); }
  100% { box-shadow: 0 0 0 14px rgba(var(--action-rgb), 0); transform: none; }
}
html.mo .step.final.lit .step-num { animation: mo-paso .8s var(--mo-ease), mo-norte 3.2s 1s ease-in-out 3; }
html.mo .step.final.lit .step-num svg { animation: mo-giro 1.1s .1s var(--mo-ease) both; }
@keyframes mo-norte {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0); }
  50%      { box-shadow: 0 0 0 10px rgba(var(--action-rgb), .14), 0 0 28px 4px rgba(var(--accent-rgb), .45); }
}
@keyframes mo-giro { from { transform: rotate(-135deg) scale(.4); } to { transform: none; } }

/* ---------- 7 · Costos y garantía ---------- */
html.mo .ct-card .mo-manecilla { transform-box: view-box; transform-origin: 12px 12px; }
html.mo .ct-card.mo-visto .mo-manecilla { animation: mo-manecilla 1.6s var(--mo-draw) both; }
@keyframes mo-manecilla { from { transform: rotate(-360deg); } to { transform: none; } }

html.mo .guar-box.mo-visto .guar-seal .seal { animation: mo-sello 1.4s var(--mo-ease) both; }
@keyframes mo-sello { from { transform: rotate(-180deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
html.mo .guar-box .big .g {
  background-image: linear-gradient(rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .3));
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0 .34em;
}
html.mo .guar-box.mo-visto .big .g { transition: background-size 1.1s .5s var(--mo-draw); background-size: 100% .34em; }

/* ---------- 3 · Fotos ---------- */
.mo-con-foto { overflow: hidden; }
.mo-foto { position: relative; margin: -30px -30px 24px; aspect-ratio: 16 / 7; background: var(--band); overflow: hidden; }
.mo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 1.4s var(--mo-ease, ease), opacity .8s ease; }
.mo-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(var(--brand-rgb), .28)); pointer-events: none; }
html.mo .mo-foto img { opacity: 0; transform: scale(1.06); }
html.mo .mo-foto img.mo-cargada { opacity: 1; transform: none; }
html.mo .qualify-card:hover .mo-foto img.mo-cargada { transform: scale(1.035); }
.mo-cta-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 55%; }
html.mo .mo-cta-foto { opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 9s var(--mo-ease); }
html.mo .mo-visto .mo-cta-foto.mo-cargada { opacity: 1; transform: none; }
/* Con foto, el velo se abre hacia la derecha para que la familia se vea;
   el texto sigue sobre el tramo opaco de la izquierda. */
.final-cta:has(.mo-cta-foto) .overlay {
  background: linear-gradient(90deg, var(--navy-deep) 22%, rgba(var(--brand-overlay-rgb), .82) 48%, rgba(var(--brand-overlay-rgb), .22));
}
/* El titular del cierre en serif, como el resto de títulos de sección: sólo
   en las páginas que cargan esta hoja. */
.final-cta h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.012em; line-height: 1.1; max-width: 18ch; }

/* ---------- 4 · Países: dos columnas, mapa fijo ----------
   Antes: el título a la izquierda y la lista centrada en 800 px, sin
   relación entre los dos. Ahora el título y el mapa forman una columna que
   acompaña al lector mientras recorre los 17 países. */
#contexto-local .sec-head h2 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.012em;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--navy);
}
#contexto-local .sec-head .lead { margin-top: 14px; }
.mo-mapa-paises { margin-top: 28px; max-width: 300px; }
#contexto-local .faq-item {
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; padding: 0 18px;
  background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#contexto-local .faq-item:hover, #contexto-local .faq-item.mo-senalado { border-color: var(--blue); }
#contexto-local .faq-item.mo-senalado { transform: translateX(4px); }
#contexto-local .faq-item.open { border-color: var(--blue); box-shadow: var(--shadow-sm); }
#contexto-local .faq-q { padding: 18px 4px; }
@media (min-width: 1000px) {
  .mo-paises-rejilla {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 80px); align-items: start;
  }
  .mo-paises-rejilla .sec-head { position: sticky; top: 100px; margin: 0; }
  .mo-paises-rejilla .faq-list { max-width: none; margin: 0; }
}
@media (max-width: 999px) {
  .mo-mapa-paises { display: none; }
}

/* ---------- 5 · Lo que aplica igual: tarjetas ---------- */
#contexto-local .cl-comun { margin-top: clamp(48px, 6vw, 72px); }
#contexto-local .cl-comun > h3, #contexto-local .cl-legal h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.01em; color: var(--navy); margin: 0 0 8px;
}
#contexto-local .cl-comun > p { color: var(--muted); }
.mo-qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; counter-reset: qa; }
.mo-qa {
  counter-increment: qa; position: relative;
  background: var(--band); border: 1px solid var(--line-soft, var(--line)); border-radius: var(--r-card);
  padding: 26px 26px 24px 70px;
}
.mo-qa::before {
  content: counter(qa, decimal-leading-zero); position: absolute; left: 24px; top: 24px;
  font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--blue); line-height: 1;
}
#contexto-local .mo-qa dt { margin: 0; color: var(--navy); font-size: 16px; line-height: 1.35; }
#contexto-local .mo-qa dd { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 860px) { .mo-qa-grid { grid-template-columns: 1fr; } }

#contexto-local .cl-legal {
  position: relative; margin-top: 24px; padding: 26px 28px 26px 76px;
  border-radius: var(--r-card); background: var(--wash); border: 1px solid rgba(var(--action-rgb), .18);
}
#contexto-local .cl-legal::before {
  content: ""; position: absolute; left: 26px; top: 28px; width: 30px; height: 30px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
#contexto-local .cl-legal h3 { font-size: 20px; }
#contexto-local .cl-legal p { color: var(--text); font-size: 15px; line-height: 1.6; }

/* ---------- 5b · La red: banda navy con el mapa ----------
   `mo-red` lo pone el script al montar el mapa; sin él, la sección es la
   banda gris de siempre. */
.authority.mo-red {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: radial-gradient(110% 120% at 85% 10%, var(--navy-700), var(--navy) 50%, var(--navy-deep));
  padding: clamp(64px, 8vw, 104px) 0;
}
.mo-red .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  column-gap: clamp(40px, 6vw, 96px); align-items: center;
}
.mo-red-texto { min-width: 0; }
.mo-red .auth-head { text-align: left; margin-bottom: 28px; }
.mo-red .auth-head .eyebrow { color: var(--sky); }
.mo-red .auth-head .section-title { color: #fff; }
.mo-red .auth-grid { grid-template-columns: 1fr; gap: 14px; max-width: 560px; margin: 0; }
.mo-red .auth-card {
  position: relative; padding: 22px 24px 22px 64px; border-radius: var(--r-card);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.mo-red .auth-card::before {
  content: ""; position: absolute; left: 24px; top: 25px; width: 22px; height: 22px; background: var(--sky);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 L62 38 L98 50 L62 62 L50 98 L38 62 L2 50 L38 38 Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 L62 38 L98 50 L62 62 L50 98 L38 62 L2 50 L38 38 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mo-red .auth-card h4 { color: #fff; font-size: 17px; }
.mo-red .auth-card p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.6; margin-top: 6px; }
.mo-mapa-red { width: 100%; }
/* Green North: dos rasgos con icono, logos de prensa y una nota de fuente. */
.mo-red .auth-feature { padding: 18px 20px; border-radius: var(--r-card); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.mo-red .auth-feature .auth-avatar { background: rgba(var(--accent-rgb), .14); }
.mo-red .auth-feature h4 { color: #fff; }
.mo-red .auth-feature p { color: rgba(255,255,255,.72); font-size: 14px; }
.mo-red .auth-logo { background: transparent; border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.6); }
.mo-red .stat-foot { color: rgba(255,255,255,.55); max-width: 560px; margin-top: 18px; }
@media (max-width: 900px) {
  .mo-red .wrap { grid-template-columns: 1fr; }
  .mo-mapa-red { max-width: 320px; justify-self: center; margin-top: 36px; }
}

/* ---------- 5c · La tabla de visas ---------- */
.cmp-table td, .cmp-table thead th { transition: background-color .2s ease; }
.cmp-table tbody td.mo-col { background: var(--wash); }
.cmp-table thead th.mo-col { background: var(--blue); }

/* ---------- 9 · Costos: los trazos ---------- */
.cost-col.mo-traza .cost-list li svg :is(path, line) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cost-col.mo-traza.mo-visto .cost-list li svg :is(path, line) { transition: stroke-dashoffset .5s var(--mo-draw); stroke-dashoffset: 0; }
.cost-col.mo-visto .cost-list li:nth-child(2) svg :is(path, line) { transition-delay: .1s; }
.cost-col.mo-visto .cost-list li:nth-child(3) svg :is(path, line) { transition-delay: .2s; }
.cost-col.mo-visto .cost-list li:nth-child(4) svg :is(path, line) { transition-delay: .3s; }
.cost-col.mo-visto .cost-list li:nth-child(5) svg :is(path, line) { transition-delay: .4s; }
.cost-col.mo-visto .cost-list li:nth-child(6) svg :is(path, line) { transition-delay: .5s; }
.cost-col.exc.mo-visto .cost-list li svg :is(path, line) { transition-duration: .35s; }

/* Red de seguridad: si el sistema pide menos movimiento después de cargar
   (el ajuste cambia en caliente), se corta todo en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .mo-cometa { display: none; }
  html.mo *, html.mo *::after { animation: none !important; transition: none !important; }
}

/* ---------- Portada: la estrella lleva al test ----------
   Capa SVG que `motion.js` inyecta en `.hero`: una línea de rumbo desde la
   base del hero hasta la esquina de la tarjeta de pre-evaluación. Va ENCIMA
   de la rejilla y sin eventos de puntero: la ruta corre por los márgenes y el
   pasillo entre columnas, y la estrella tiene que verse posada sobre la
   esquina de la tarjeta, no debajo. */
.mo-rumbo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; overflow: visible;
}
.mo-rumbo path { fill: none; stroke-linecap: round; }
.mo-rumbo-guia { stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 2 7; }
.mo-rumbo-estela {
  stroke: rgba(var(--accent-rgb),.9); stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.mo-rumbo-inicio { fill: var(--sky); opacity: 0; }
.mo-rumbo-inicio.on, .mo-rumbo--quieta .mo-rumbo-inicio { opacity: .9; }
.mo-rumbo-hito-punto { fill: #fff; opacity: .28; transition: opacity var(--mo-t1, .35s); }
.mo-rumbo-hito-onda { fill: none; stroke: var(--sky); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mo-rumbo-hito.on .mo-rumbo-hito-punto { opacity: 1; }
html.mo .mo-rumbo:not(.mo-rumbo--quieta) .mo-rumbo-hito.on .mo-rumbo-hito-onda { animation: mm-onda 1s var(--mo-ease) both; }
.mo-rumbo-eco { fill: #fff; opacity: 0; }

.mo-rumbo-norte-cuerpo { fill: #fff; }
.mo-rumbo-norte-punta { fill: var(--sky); }
.mo-rumbo-norte > * { transform-box: fill-box; transform-origin: center; }
.mo-rumbo-estallido { fill: none; stroke: var(--sky); stroke-width: 2; opacity: 0; }
.mo-rumbo-norte-halo { opacity: .5; }
html.mo .mo-rumbo-norte:not(.mo-rumbo-norte--quieta) .mo-rumbo-norte-cuerpo,
html.mo .mo-rumbo-norte:not(.mo-rumbo-norte--quieta) .mo-rumbo-norte-punta { animation: mo-estrella .9s var(--mo-ease) both; }
html.mo .mo-rumbo-norte:not(.mo-rumbo-norte--quieta) .mo-rumbo-estallido { animation: mo-halo 1.2s var(--mo-ease) both; }
html.mo .mo-rumbo-norte .mo-rumbo-norte-halo { animation: mo-destello 5s ease-in-out 1s infinite; }

/* La tarjeta responde a la llegada: un anillo que se abre una vez, y las
   opciones se encienden en cascada. No esconde ni mueve nada: el anillo es un
   pseudo-elemento y las opciones sólo laten. */
.hero-quiz-card.mo-llego::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0);
}
html.mo .hero-quiz-card.mo-llego:not(.mo-llego--quieta)::before { animation: mo-anillo 1.5s var(--mo-ease) both; }
html.mo .hero-quiz-card.mo-llego:not(.mo-llego--quieta) .hqc-opt .dot { animation: mo-latido .7s var(--mo-ease) both; }
html.mo .hero-quiz-card.mo-llego .hqc-opt:nth-child(1) .dot { animation-delay: .15s; }
html.mo .hero-quiz-card.mo-llego .hqc-opt:nth-child(2) .dot { animation-delay: .27s; }
html.mo .hero-quiz-card.mo-llego .hqc-opt:nth-child(3) .dot { animation-delay: .39s; }
html.mo .hero-quiz-card.mo-llego .hqc-opt:nth-child(4) .dot { animation-delay: .51s; }
html.mo .hero-quiz-card.mo-llego .hqc-opt:nth-child(5) .dot { animation-delay: .63s; }
@keyframes mo-anillo {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55); }
  100% { box-shadow: 0 0 0 22px rgba(var(--accent-rgb),0); }
}
@keyframes mo-latido {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5); }
  45% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.18); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}