/* ============================================================================
   EL ATLAS DE MUNDOS OLFATIVOS · atlas.css — port fiel de
   `static/css/exp-procedencia.css` del Explorador (CONTRATO DE PORT §1.6).

   Los tokens que usa (--paper #FFFFFF, --ink #1A1518, --muted #555555,
   --line/--line-2, --warm-grey, --burgundy-deep, --mono, --serif) están
   definidos IDÉNTICOS en tokens.css del rig, así que el CSS se porta sin
   traducir un solo color.

   PALETA (owner: "cámbiala"): mueren las veladuras pálidas y el rayado de
   países inactivos. El mundo es sombra (~6 %); la tinta PLENA vive en los
   medallones. La lente noche oscurece los SELLOS (var(--tn)), jamás el papel
   — la ley "nada oscuro de fondo de página" se protege aquí.

   COREOGRAFÍA (límites perceptivos): entrada por etapas una vez por sesión;
   cambio de lente en dos tiempos (top-3 primero); portal en tres. Nada se
   mueve perpetuamente. reduced-motion: estados finales, sin viaje.

   Los bloques marcados [PORT] son copia literal del sello. Los marcados
   [M1]/[M6]/[§1.7] son las mejoras deploy-ready y la degradación sin JS que
   el contrato ordena; ninguna cambia un radio, un color ni una coordenada, y
   ninguna altera el render a 1440 px.
   ========================================================================== */

.ap2-page{background:var(--paper);color:var(--ink)}
.ap2-head{padding:var(--page-top) 28px 4px;text-align:center}
.ap2-eyebrow{font-size:9.5px;letter-spacing:.26em;color:var(--warm-grey)}
.ap2-h1{font-size:clamp(30px,4.6vw,54px);line-height:1.04;letter-spacing:-.02em;
  margin:12px 0 18px}
.ap2-lentes{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.ap2-chip{font-family:var(--mono);font-size:11px;letter-spacing:.16em;cursor:pointer;
  padding:10px 18px;background:var(--paper);border:1px solid var(--line-2);color:var(--muted);
  transition:border-color 240ms,background 240ms,color 240ms}
/* [§1.7] Los 3 chips de lente son <a href="?lente=…">, no <button>: sin JS
   siguen siendo navegación real. Estas 2 declaraciones igualan el ancla al
   botón del sello (un <button> ya viene inline-block y centrado por UA); no
   tocan tipografía, caja ni color, así que el render es el mismo píxel. */
a.ap2-chip{display:inline-block;text-align:center;text-decoration:none}
.ap2-chip:hover{border-color:var(--ink);color:var(--ink)}
.ap2-chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ap2-chip-sorpresa{border-style:dashed}
/* [§1.7] SORPRÉNDEME es la ÚNICA función sin equivalente sin JS (abre un país
   al azar ponderado), así que no se ofrece cuando no hay JS que la cumpla:
   atlas.js le añade `.is-js`. Con JS —el caso de toda captura y de todo
   usuario real con scripts— el chip está presente y el diseño es idéntico. */
.ap2-chip-sorpresa{display:none}
.ap2-chip-sorpresa.is-js{display:inline-block}
.ap2-cifras{font-size:10px;letter-spacing:.14em;color:var(--warm-grey);margin:0}
.ap2-cifras b{color:var(--ink);font-size:12px}

/* ---------- el escenario ---------- */
.ap2-stage{position:relative;width:100%;margin:6px 0 0}
.ap2-svg{display:block;width:100%;height:auto}

/* la sombra cartográfica: el mundo deja de ser protagonista */
.ap2-sombra{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.07;
  vector-effect:non-scaling-stroke}
/* la silueta fantasma: el lugar verdadero, en su tinta, apenas */
.ap2-fantasma{fill:var(--t);opacity:.10;stroke:none}

.ap2-casa-anillo{fill:none;stroke:var(--burgundy-deep);stroke-width:.9;opacity:.7}
.ap2-casa-punto{fill:var(--burgundy-deep)}
.ap2-casa-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  fill:var(--burgundy-deep);paint-order:stroke;stroke:var(--paper);stroke-width:3px}

/* ---------- EL MEDALLÓN: el sello ES el dato ---------- */
.ap2-sello{cursor:pointer;outline:none}
.ap2-disco{transform:scale(var(--s,1));transition:transform 600ms cubic-bezier(.34,1.2,.4,1),
  opacity 420ms;transition-delay:var(--d,0ms)}
.ap2-aro{fill:none;stroke:var(--t);stroke-width:2.4}
.ap2-perfo{fill:none;stroke:var(--t);stroke-width:.8;stroke-dasharray:.8 2.6;
  stroke-linecap:round;opacity:.9}
.ap2-fondo{fill:var(--t);opacity:.16}
.ap2-iso{font-family:var(--mono);letter-spacing:.18em;fill:var(--t);font-weight:600}
.ap2-num{font-family:var(--mono);fill:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums}
.ap2-nombre{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;fill:var(--muted);
  text-transform:uppercase;paint-order:stroke;stroke:var(--paper);stroke-width:3px;
  opacity:0;transition:opacity 240ms}
.ap2-sello:hover .ap2-nombre,.ap2-sello:focus-visible .ap2-nombre,
.ap2-sello.is-sel .ap2-nombre{opacity:1}
.ap2-sello:hover .ap2-fondo{opacity:.26}
.ap2-sello:focus-visible .ap2-aro{stroke-width:3.4}

/* [M1] HIT-AREA WCAG 2.5.8 — objetivo táctil, cero píxeles de tinta.
   El sello mínimo mide 2·R_MIN = 20 unidades de viewBox: a 375 px de ancho el
   factor es 0.375 px/unidad, o sea 7.5 px reales, muy por debajo del mínimo de
   24x24. El <rect> es transparente y va PRIMERO en el grupo (el disco y los
   textos se pintan encima), y su tamaño se expresa en unidades de viewBox por
   breakpoint con las propiedades geométricas CSS de SVG2:
     · 1440 px  → 18u  ≈ 25.9 px CSS (y 18u < 20u, el disco más pequeño, así
       que a escritorio el rect vive DENTRO del sello: ni un hit-test cambia).
     · <500 px  → 70u  ≈ 26.3 px CSS a 375 px.
   El radio visible `r` NO se toca en ningún caso: sigue codificando el dato.
   Préstamo autorizado (§1.9 M1): el patrón HIT_MIN_PX/HIT_RECT_PX de
   catalog/plancha.py, aquí resuelto en CSS porque el SVG del Atlas escala con
   el viewport y un rect en unidades fijas no podría cumplir el mínimo en ambos. */
.ap2-hit{fill:transparent;pointer-events:all;x:-9px;y:-9px;width:18px;height:18px}

/* LA NOCHE LA CARGAN LOS SELLOS, no el papel */
[data-lente="noche"] .ap2-aro{stroke:var(--tn)}
[data-lente="noche"] .ap2-perfo{stroke:var(--tn)}
[data-lente="noche"] .ap2-fondo{fill:var(--tn);opacity:.30}
[data-lente="noche"] .ap2-iso{fill:var(--tn)}
[data-lente="noche"] .ap2-fantasma{fill:var(--tn)}

/* sin coincidencias bajo la lente: visible, casi transparente, tocable */
.ap2-sello.sin-eco .ap2-disco{opacity:.16}

/* ---------- LA ENTRADA (una vez por sesión; clase desde JS) ---------- */
.ap2-entrada .ap2-sombra{animation:ap2-aparece 520ms both}
.ap2-entrada .ap2-fantasma{animation:ap2-destello 1100ms 420ms both}
.ap2-entrada .ap2-sello .ap2-disco{animation:ap2-nace 640ms both;
  animation-delay:calc(1150ms + var(--i) * 55ms)}
.ap2-entrada .ap2-casa{animation:ap2-aparece 500ms 1900ms both}
@keyframes ap2-aparece{from{opacity:0}}
@keyframes ap2-destello{0%{opacity:0}45%{opacity:.30}100%{opacity:.10}}
@keyframes ap2-nace{from{transform:scale(0)}to{transform:scale(var(--s,1))}}

/* ---------- EL PORTAL ---------- */
.ap2-page.es-portal .ap2-sello:not(.is-sel) .ap2-disco{opacity:.22;
  transform:scale(calc(var(--s,1) * .82))}
.ap2-page.es-portal .ap2-sello.is-sel .ap2-disco{transform:scale(calc(var(--s,1) * 2.05))}
.ap2-page.es-portal .ap2-sello.is-sel .ap2-nombre{opacity:0}
.ap2-page.es-portal .ap2-fantasma{opacity:.05}

.ap2-portales{position:relative;padding-top:10px;padding-bottom:8px}
.ap2-portal{display:none;border-top:1px solid var(--line);padding:22px 0 6px}
.ap2-portal.is-on{display:block;animation:ap2-portal-in 480ms 260ms cubic-bezier(.16,1,.3,1) both}
@keyframes ap2-portal-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ap2-portal-folio{font-size:9.5px;letter-spacing:.22em;color:var(--warm-grey)}
.ap2-portal-h2{font-size:var(--h2);margin:6px 0 4px;letter-spacing:-.016em}
.ap2-portal-linea{font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
.ap2-portal-linea b{color:var(--ink);font-size:13px}

.ap2-huella{display:flex;flex-direction:column;gap:9px;max-width:420px;margin:0 0 18px}
.ap2-hbar span{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--muted);
  margin:0 0 3px}
.ap2-hbar span b{color:var(--ink);font-weight:600}
.ap2-hbar i{display:block;height:8px;width:var(--w);background:var(--c);
  mix-blend-mode:multiply}

.ap2-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,220px));
  gap:22px;margin:0 0 14px}
.ap2-heroe{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.ap2-heroe-rol{font-size:8.5px;letter-spacing:.18em;color:var(--burgundy-deep);margin-bottom:5px}
.ap2-heroe img{display:block;width:100%;height:auto;background:var(--paper);
  border:1px solid var(--line);border-bottom:2px solid var(--a);
  transition:transform 600ms cubic-bezier(.32,.72,0,1)}
/* La portada real del rig no viene recortada a 300x375 como el thumb del
   prototipo: el encuadre del sello se conserva aquí (misma caja 4:5, misma
   composición), sin recortar la fotografía. `picture` sólo restituye el
   `display:block` que el <img> suelto del sello tenía. */
.ap2-heroe picture{display:block}
.ap2-heroe img{aspect-ratio:300 / 375;object-fit:contain}
.ap2-heroe:hover img{transform:translateY(-4px)}
.ap2-heroe svg{display:block;width:100%;height:auto;margin:3px 0 1px;color:var(--a)}
.ap2-inc1{fill:var(--vc,currentColor);opacity:.52;stroke:var(--vc,currentColor);
  stroke-width:.5;mix-blend-mode:multiply}
.ap2-inc2{fill:var(--vc,currentColor);opacity:.42;stroke:var(--vc,currentColor);
  stroke-width:.5;mix-blend-mode:multiply}
.ap2-inc3{fill:var(--vc,currentColor);opacity:.34;stroke:var(--vc,currentColor);
  stroke-width:.5;mix-blend-mode:multiply}
.ap2-heroe-casa{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warm-grey);margin-top:6px}
.ap2-heroe-nombre{font-size:14px;line-height:1.25;color:var(--ink)}
.ap2-portal-pie{font-size:9.5px;letter-spacing:.06em;color:var(--warm-grey);margin:0 0 14px}
.ap2-explorar{display:inline-block;font-size:13.5px;color:var(--paper);background:var(--ink);
  text-decoration:none;padding:11px 20px;margin:0 0 10px}
.ap2-explorar:hover{background:var(--burgundy-deep)}

.ap2-pie{padding-top:26px;padding-bottom:24px;border-top:1px solid var(--line)}
.wrap .wrap.ap2-pie,.wrap .wrap.ap2-portales{padding-inline:0}
.ap2-pie p{font-size:11.5px;color:var(--warm-grey);letter-spacing:.03em;line-height:1.8;
  max-width:68ch;margin:0}
.ap2-pie a{color:var(--ink)}

/* ---------- [M6] MÓVIL REAL (<500 px) ----------------------------------- */
/* El SVG ya es responsive puro (viewBox + width:100%): el cartograma EXISTE y
   es visible a 375 px — el fallo capital que este port viene a no repetir. Lo
   que falta en táctil es el nombre del sello: su etiqueta sólo aparecía en
   :hover/:focus-visible, y en un touch no hay hover; el primer tap abre el
   portal, que a su vez la ocultaba (.es-portal .is-sel .ap2-nombre{opacity:0}).
   Estas dos reglas viven ENTERAS bajo el media query móvil: a 1440 px no
   existen, así que no pueden alterar el diseño de escritorio. */
@media (max-width:499px){
  .ap2-hit{x:-35px;y:-35px;width:70px;height:70px}
  .ap2-page.es-portal .ap2-sello.is-sel .ap2-nombre{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .ap2-entrada .ap2-sombra,.ap2-entrada .ap2-fantasma,
  .ap2-entrada .ap2-sello .ap2-disco,.ap2-entrada .ap2-casa{animation:none}
  .ap2-disco{transition:none}
  .ap2-portal.is-on{animation:none}
  .ap2-heroe img{transition:none}
}