/* NEONOMAD · Verificador de pasaporte
   Línea gráfica Ojo Oráculo: fondo claro, Archivo, reglas de 2 px, acento
   #ec3013 reservado a lo activo. Los colores de estado son aparte y nunca
   viajan solos: siempre con glifo y palabra. */

:root {
  --papel: #f3f2f2;
  --superficie: #eae9e9;
  --tinta: #201e1d;
  --tinta-2: #444141;
  --tinta-3: #605d5d;
  --tenue: #7d7979;
  --acento: #ec3013;
  --acento-osc: #ae1800;
  /* Botones rellenos (2026-10-01). Blanco sobre el acento daba 4,20 en claro y 3,21 en oscuro, bajo
     el 4,5 de la WCAG (Lighthouse). En claro va el rojo oscuro de la marca (el del texto del sello):
     5,78. En oscuro, el acento con texto oscuro: 5,52. */
  --boton: #c42610;
  --sobre-boton: #ffffff;

  --bien: #0ca30c;
  --aviso: #fab219;
  --mal: #d03b3b;

  --pelo: rgba(32, 30, 29, 0.14);
  --regla: 2px;
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --papel: #191817; --superficie: #232120;
    --tinta: #f1efee; --tinta-2: #cbc7c5; --tinta-3: #a5a09e; --tenue: #8d8887;
    --acento: #ff5334; --acento-osc: #ff8f78;
    --boton: #ff5334; --sobre-boton: #191817;
    --bien: #3cc93c; --aviso: #f5c04a; --mal: #ef6a6a;
    --pelo: rgba(241, 239, 238, 0.16);
  }
}
:root[data-theme="dark"] {
  --papel: #191817; --superficie: #232120;
  --tinta: #f1efee; --tinta-2: #cbc7c5; --tinta-3: #a5a09e; --tenue: #8d8887;
  --acento: #ff5334; --acento-osc: #ff8f78;
  --boton: #ff5334; --sobre-boton: #191817;
  --bien: #3cc93c; --aviso: #f5c04a; --mal: #ef6a6a;
  --pelo: rgba(241, 239, 238, 0.16);
}

* { box-sizing: border-box; }

/* El atributo `hidden` tiene que ganar siempre. El navegador lo trae como
   `display: none` en su hoja propia, pero cualquier `display` de esta hoja le
   gana —así es la cascada— y `.compartir { display: flex }` dejó a la vista
   el botón de «Copiar el enlace» sin que hubiera respuesta, desde el 18 hasta
   el 20 de septiembre de 2026. La comprobación de entonces miró el atributo
   en el DOM, no la pantalla: el atributo estaba, y no servía de nada. */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--fuente); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acento); color: var(--papel); }
:focus-visible { outline: var(--regla) solid var(--acento); outline-offset: 2px; }

main, .cab-in, footer p { max-width: 860px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 32px); }

/* ── Cabecera ─────────────────────────────────────────── */
.cab { border-bottom: var(--regla) solid var(--tinta); }
.cab-in {
  display: flex; align-items: baseline; gap: 14px; padding-block: 14px;
  /* Envuelve. Sin esto, el control de tema —102 px fijos con
     margin-left:auto— empujaba la fila y la cabecera pedia 390 px en
     una caja de 360: TODA la pagina se desplazaba de lado. Medido en
     explorar, novedades, las 450 fichas, los legales y el instrumento. */
  flex-wrap: wrap; row-gap: 12px;
}
.marca { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.rot { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); min-width: 0; }

/* ── Intro ────────────────────────────────────────────── */
.intro { padding-block: clamp(36px, 7vw, 68px) clamp(24px, 4vw, 36px); }
.ante { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; }
.ante i { width: 30px; height: var(--regla); background: var(--acento); flex: none; }
.ante span { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--acento-osc); }

h1 {
  margin: 0 0 20px; font-size: clamp(34px, 6.4vw, 62px); line-height: 0.98;
  font-weight: 800; letter-spacing: -0.035em; text-wrap: balance;
}
.bajada { margin: 0; max-width: 58ch; font-size: clamp(16px, 1.6vw, 18px); color: var(--tinta-2); text-wrap: pretty; }

/* ── La portada ───────────────────────────────────────────
   Sólo de index.html. `.intro` y `.panel` siguen intactas abajo porque las
   usan las otras ocho páginas y las 267 fichas generadas: esto se suma, no
   las reemplaza.

   Una rejilla de tres áreas. En móvil van apiladas en el orden del DOM
   —mensaje, planeta, formulario—, y en escritorio el planeta se pasa a una
   columna propia que abarca las dos filas, para quedar a la vista mientras se
   rellena el formulario. Es la condición para que «escribe tu destino y el
   planeta vuela hasta él» sea algo que pasa y no una promesa. */
.portada {
  padding-block: clamp(26px, 5vw, 52px) clamp(28px, 4vw, 46px);
  display: grid;
  gap: clamp(18px, 3vw, 34px);
  grid-template-areas: "dice" "globo" "obra" "escenas";
}
.portada-dice  { grid-area: dice; }
.portada-obra  { grid-area: obra; min-width: 0; }
.portada-escenas { grid-area: escenas; min-width: 0; }
.portada-globo {
  grid-area: globo; min-width: 0;
  /* Pegajoso también en móvil desde que hay recorrido (2026-09-20): el
     planeta se queda arriba y las escenas pasan por debajo, formándose en él.
     El degradado tapa el texto que asoma bajo el lienzo sin dibujar un borde.
     Su contenedor es la rejilla entera, así que se despega donde ésta acaba
     — justo antes de las secciones que ya no forman parte del recorrido. */
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(var(--papel) 86%, transparent);
  padding-bottom: 12px;
}

@media (min-width: 900px) {
  .portada {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "dice     globo"
      "obra     globo"
      "escenas  globo";
    align-items: start;
    column-gap: clamp(30px, 4vw, 58px);
  }
  /* En escritorio la columna del planeta abarca las tres filas y se queda a
     la vista con un poco de aire arriba; el degradado de móvil sobra. */
  .portada-globo { top: 16px; background: none; padding-bottom: 0; }
}

/* Sin WebGL no hay globo, y una columna vacía se vería como un error de
   maquetación. La clase la pone globo-init.js al mismo tiempo que esconde el
   bloque — explícita y no con :has(), para no depender del soporte del
   selector justo en el camino de degradación. */
.portada.sin-globo {
  grid-template-columns: 1fr;
  grid-template-areas: "dice" "obra" "escenas";
}

/* El globo de la portada es más alto que el del resto del sitio, pero con
   techo bajo en móvil: si se come la pantalla, el campo de país queda fuera y
   se pierde justo lo que la portada quiere mostrar. */
.portada-globo .globo canvas { height: clamp(220px, 30vh, 320px); }
@media (min-width: 900px) {
  .portada-globo .globo canvas { height: clamp(360px, 54vh, 600px); }
}

/* ── Las escenas del recorrido ────────────────────────────
   Cada una con altura suficiente para que el observador cambie de figura
   con claridad y para que, mientras se lee, el planeta tenga tiempo de
   formarla. La escena activa va a plena tinta; las demás, atenuadas pero
   legibles — un estado estable para leer en cada paso, como pide el manual
   de escenas. Con movimiento reducido no se atenúa nada: el cambio es un
   corte y una página a medio tono se lee como rota. */
.portada-escenas .escena {
  min-height: 58vh; display: flex; flex-direction: column; justify-content: center;
  transition: opacity 320ms ease;
}
.portada-escenas .escena[data-activa="0"] { opacity: 0.55; }
@media (min-width: 900px) { .portada-escenas .escena { min-height: 64vh; } }
@media (prefers-reduced-motion: reduce) {
  .portada-escenas .escena { transition: none; }
  .portada-escenas .escena[data-activa="0"] { opacity: 1; }
}
/* El botón de «¿Y en tu caso?» vuelve al formulario: es un botón de verdad,
   no un enlace, porque no cambia de página. Hereda el aspecto del enlace. */
button.btn-enlace { font: inherit; border: 0; cursor: pointer; }

/* El planeta en las otras páginas que forman una figura (2026-09-20):
   la ficha de país y el reloj de Schengen. Más bajo que en la portada. */
.ficha-globo .globo canvas, .sch-globo .globo canvas { height: clamp(220px, 34vh, 380px); }
.ficha-globo, .sch-globo { margin-bottom: 8px; }
.ficha-globo.oculto, .sch-globo.oculto { display: none; }

/* ── El reloj de Schengen ─────────────────────────────────
   Sólo de schengen.html. */
.tramos {
  border: 0; border-top: var(--regla) solid var(--tinta);
  margin: 0 0 26px; padding: 22px 0 0;
}
.tramos legend {
  /* El aire a la derecha es lo que separa el texto de la línea del borde: sin
     él la raya sale pegada a la última letra y se lee como un tachón. */
  padding: 0 12px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.detalle-fs { margin: 4px 0 24px; font-size: 14px; max-width: 60ch; }

.tramo {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px;
  align-items: end; margin-bottom: 14px;
}
.tramo .quita {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--pelo); color: var(--tinta-3);
  font-family: var(--fuente); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; padding: 8px 10px; line-height: 1.4;
  align-self: end; margin-bottom: 4px;
}
.tramo .quita:hover { color: var(--mal); border-color: var(--mal); }
@media (max-width: 560px) {
  /* Con tres columnas a 390 px los campos de fecha quedan ilegibles. El botón
     de quitar pasa a ocupar su propia fila, alineado a la derecha. */
  .tramo { grid-template-columns: 1fr 1fr; }
  .tramo .quita { grid-column: 2; justify-self: end; margin-bottom: 0; }
}

.btn-sec {
  appearance: none; background: transparent; cursor: pointer;
  border: var(--regla) solid var(--tinta); color: var(--tinta);
  font-family: var(--fuente); font-size: 13px; font-weight: 700;
  letter-spacing: 0.03em; padding: 9px 14px;
}
.btn-sec:hover { background: var(--tinta); color: var(--papel); }

/* La barra: es lo primero que se mira, así que el número va al lado y no
   dentro — dentro de una barra a medio llenar el texto queda sobre dos fondos
   distintos y deja de leerse en uno de los dos temas. */
.reloj { margin-bottom: 20px; }
.reloj-barra {
  height: 12px; background: var(--pelo); overflow: hidden;
}
.reloj-barra i { display: block; height: 100%; background: var(--tinta); }
.reloj[data-tono="bien"]  .reloj-barra i { background: var(--bien); }
.reloj[data-tono="aviso"] .reloj-barra i { background: var(--aviso); }
.reloj[data-tono="mal"]   .reloj-barra i { background: var(--mal); }
.reloj-cifras {
  margin: 9px 0 0; display: flex; gap: 12px; flex-wrap: wrap;
  align-items: baseline; font-size: 14px; color: var(--tinta-2);
}
.reloj-cifras b { font-size: 26px; font-weight: 800; color: var(--tinta); line-height: 1; }
.reloj-cifras span { margin-left: auto; color: var(--tinta-3); }

.lista-paises {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; gap: 2px 18px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.lista-paises a { font-size: 14px; color: var(--tinta-2); }
.lista-paises a:hover { color: var(--acento); }

/* ── Formulario ───────────────────────────────────────── */
.panel { padding-bottom: clamp(30px, 5vw, 48px); }
form { border-top: var(--regla) solid var(--tinta); padding-top: 24px; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 24px; }
.campo-ancho { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.opc { font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--tenue); }

input {
  font: inherit; font-size: 16px; color: var(--tinta);
  background: transparent; border: 0; border-bottom: var(--regla) solid var(--pelo);
  padding: 8px 2px; border-radius: 0; width: 100%;
}
input:hover { border-bottom-color: var(--tinta-3); }
input:focus { outline: none; border-bottom-color: var(--acento); }
input::placeholder { color: var(--tenue); }

.btn {
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  border: 0; background: var(--boton); color: var(--sobre-boton);
  padding: 15px 24px; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.btn:hover { background: var(--acento-osc); }

/* ── Refinamiento opcional ────────────────────────────── */
/* Las fechas del viaje afinan la respuesta, no la desbloquean. Van plegadas
   para que se lean como lo que son: un extra, no un requisito. */
.refina { border-top: 1px solid var(--pelo); padding-top: 15px; }
.refina > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta-3);
}
.refina > summary::-webkit-details-marker { display: none; }
.refina > summary::before {
  content: '+'; flex: none;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  border: 1px solid currentColor; font-size: 13px; letter-spacing: 0;
}
.refina[open] > summary::before { content: '–'; }
.refina > summary:hover { color: var(--acento); }
.refina > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.campos-refina { margin: 20px 0 4px; }

/* ── Resultado ────────────────────────────────────────── */
.res { margin-top: 26px; }
.res:empty { display: none; }

/* ── Compartir la respuesta ───────────────────────────────
   El enlace del navegador ya lleva el caso entero (ver el final de app.js), así
   que esto no genera nada: sólo copia lo que ya está en la barra. Se queda
   discreto porque no es la acción principal — la respuesta lo es. */
.compartir {
  margin-top: 14px; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.compartir button {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--pelo); color: var(--tinta-3);
  font-family: var(--fuente); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; padding: 7px 12px; line-height: 1.4;
}
.compartir button:hover { color: var(--tinta); border-color: var(--tinta); }
.copiado { font-size: 12px; color: var(--tenue); }

.veredicto {
  border: var(--regla) solid var(--tinta); padding: 20px 22px; margin-bottom: 18px;
}
.veredicto[data-tono="bien"] { border-color: var(--bien); }
.veredicto[data-tono="aviso"] { border-color: var(--aviso); }
.veredicto[data-tono="mal"] { border-color: var(--mal); }

.marca-estado { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.marca-estado i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.marca-estado em { font-style: normal; font-size: 13px; font-weight: 700; }
.marca-estado b { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
[data-tono="bien"] .marca-estado i { background: var(--bien); }
[data-tono="aviso"] .marca-estado i { background: var(--aviso); }
[data-tono="mal"] .marca-estado i { background: var(--mal); }
/* El texto nunca viste el color del dato: la marca de color va al lado. */
.marca-estado em, .marca-estado b { color: var(--tinta-2); }

.titular { margin: 0 0 8px; font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.detalle { margin: 0; color: var(--tinta-2); max-width: 56ch; }
.detalle strong { font-weight: 700; }

.reglas { list-style: none; margin: 0 0 18px; padding: 0; }
.reglas li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--pelo);
}
.reglas li:last-child { border-bottom: 0; }
.rg-marca { width: 9px; height: 9px; border-radius: 50%; flex: none; transform: translateY(1px); }
.rg-marca[data-tono="bien"] { background: var(--bien); }
.rg-marca[data-tono="aviso"] { background: var(--aviso); }
.rg-marca[data-tono="mal"] { background: var(--mal); }
.rg-txt { flex: 1; min-width: 0; }
.rg-txt b { display: block; font-size: 15px; font-weight: 700; }
.rg-txt span { display: block; font-size: 13.5px; color: var(--tinta-3); }
.rg-cifra { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.avisos { margin: 0 0 18px; padding: 0; list-style: none; }
.avisos li {
  font-size: 14px; color: var(--tinta-2);
  border-left: var(--regla) solid var(--acento); padding: 3px 0 3px 14px; margin-bottom: 10px;
}

.origen { border-top: var(--regla) solid var(--tinta); padding-top: 14px; }
.origen h3 { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); }
.origen blockquote {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-2);
  border-left: 2px solid var(--pelo); padding-left: 14px; font-style: italic;
}
.origen .meta { margin: 10px 0 0; font-size: 12px; color: var(--tenue); }

/* ── Nota y pie ───────────────────────────────────────── */
.nota { border-top: var(--regla) solid var(--tinta); padding-block: clamp(26px, 4vw, 40px); }
.nota h2 { margin: 0 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.nota p { margin: 0 0 13px; max-width: 62ch; font-size: 15px; color: var(--tinta-2); }
.nota .fuente { color: var(--tenue); font-size: 14px; }

footer { border-top: var(--regla) solid var(--tinta); padding-block: 20px 40px; }
footer p { margin: 0; font-size: 12px; color: var(--tenue); }
footer a { color: var(--tenue); }
footer a:hover { color: var(--acento); }

/* Los textos legales van en su propia línea del pie: tienen que ser
   alcanzables desde cualquier página, no escondidos dentro de un párrafo. */
footer .legal { margin-top: 10px; letter-spacing: 0.04em; }
footer .legal a { color: var(--tinta-3); }
footer .legal a:hover { color: var(--acento); }

/* ── La verificación cruzada ──────────────────────────────── */
/* Es el mejor argumento de confianza que tenemos y estaba enterrado en el
   expediente. Las tres cifras van grandes porque son la prueba, no el adorno. */
.cruce {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 26px; margin: 22px 0 24px;
  border-top: var(--regla) solid var(--tinta); padding-top: 18px;
}
.cruce-dato { display: flex; flex-direction: column; gap: 4px; }
.cruce-dato b {
  font-size: clamp(30px, 4.6vw, 42px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.cruce-dato span { font-size: 12.5px; color: var(--tinta-3); text-wrap: pretty; }

/* ── Preguntas ────────────────────────────────────────────── */
.faq h3 {
  margin: 22px 0 7px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  border-top: 1px solid var(--pelo); padding-top: 18px; text-wrap: balance;
}
.faq h3:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
.faq p { margin: 0; font-size: 15px; color: var(--tinta-2); max-width: 66ch; text-wrap: pretty; }

/* ── El seguro de viaje ───────────────────────────────────── */
/* Va con el mismo filete que el puente de nacionalidad porque es de la misma
   familia: algo que te pueden pedir en la frontera y que no es el pasaporte.
   La cita del texto oficial, en cursiva y con su propio margen, para que se
   distinga de nuestra redacción. */
.seguro { border-left: var(--regla) solid var(--acento); padding-left: clamp(14px, 2vw, 22px); }
.seguro .tenue { color: var(--tenue); font-size: 13.5px; }
.cita-seguro {
  margin: 10px 0 14px; padding-left: 14px;
  border-left: 2px solid var(--pelo);
  font-size: 14px; line-height: 1.5; font-style: italic; color: var(--tinta-2);
}
.aviso-local {
  border: 1px solid var(--aviso); padding: 10px 12px; margin: 0 0 12px;
  font-size: 14px;
}

/* La oferta va SEPARADA del requisito, con filete propio y fondo distinto.
   El requisito es dato oficial; la oferta es comercial. Pegarlas visualmente
   sugeriria que la poliza cumple el requisito — y eso no lo verificamos. */
.oferta {
  border-top: 1px solid var(--pelo); margin-top: 18px; padding-top: 14px;
}
.oferta h3 {
  margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.oferta .btn-enlace { margin: 12px 0 10px; }
.oferta .tenue { font-size: 12.5px; color: var(--tenue); }

/* ── El puente de nacionalidad ────────────────────────────── */
/* El dato es británico y la página está en español. Este bloque dice para
   quién está escrita la regla y ofrece la salida concreta — la página de
   visado de tu propia nacionalidad. Lleva filete de acento porque es una
   advertencia, no un adorno: si pasa desapercibido, no sirve. */
.nacionalidad {
  border-left: var(--regla) solid var(--acento);
  padding-left: clamp(14px, 2vw, 22px);
}
.nacionalidad .vecinos { margin-top: 10px; }

/* ── Páginas de país ──────────────────────────────────────── */

a.marca { color: inherit; text-decoration: none; }
a.marca:hover { color: var(--acento); }

.miga { padding-top: 18px; font-size: 12px; letter-spacing: 0.06em; color: var(--tenue); }
.miga a { color: var(--tinta-3); }
.miga a:hover { color: var(--acento); }

/* La respuesta corta: lo primero que lee una persona y lo que extrae un
   modelo. Se le da peso tipográfico por eso, no por decoración. */
.respuesta {
  margin: 0; max-width: 58ch;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45;
  color: var(--tinta); text-wrap: pretty;
}
.respuesta strong { font-weight: 700; }

.bloque { border-top: var(--regla) solid var(--tinta); padding-block: clamp(22px, 3.4vw, 34px); }
.bloque h2 {
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}

.lista { list-style: none; margin: 0 0 4px; padding: 0; max-width: 62ch; }
.lista li { position: relative; padding-left: 20px; margin-bottom: 11px; font-size: 16px; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: var(--regla); background: var(--acento);
}

.destacado { background: var(--superficie); margin-inline: calc(clamp(16px, 5vw, 32px) * -1); padding-inline: clamp(16px, 5vw, 32px); }

.btn-enlace {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--boton); color: var(--sobre-boton); text-decoration: none;
  padding: 13px 20px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.btn-enlace:hover { background: var(--acento-osc); }

.indice { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.indice li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--pelo); }
.indice a { color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 15px; }
.indice a:hover { color: var(--acento); }
.indice span { display: block; font-size: 12px; color: var(--tenue); }

.vecinos { margin: 0; font-size: 15px; line-height: 2; }
.vecinos a { color: var(--tinta-2); }
.vecinos a:hover { color: var(--acento); }

/* Perfil del país — capa de confianza distinta, señalada también en la forma:
   fondo propio y filete, para que no se lea como parte de la regla oficial. */
.perfil { border-left: var(--regla) solid var(--tenue); padding-left: clamp(14px, 2vw, 22px); }
.rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0; margin-bottom: 16px; border-top: 1px solid var(--pelo);
}
.dato { padding: 12px 16px 14px 0; border-bottom: 1px solid var(--pelo); }
.dato span {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--tinta-3);
}
.dato b { display: block; margin-top: 5px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.dato em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--tenue); }
.tenue { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tenue); max-width: 62ch; }
.tenue strong { color: var(--tinta-2); }

@media (max-width: 700px) { .indice { columns: 1; } }

/* ── Movil ────────────────────────────────────────────────
   Hasta hoy el unico ajuste movil era colapsar .campos a una columna: el resto
   del CSS es de escritorio y sobrevivia por casualidad. Medido a 360 y 390 px,
   lo que fallaba de verdad era la cabecera (arriba) y el aire de las filas de
   lista, que en escritorio alcanza porque hay ancho de sobra y en movil deja el
   texto apretado contra el filete de la fila siguiente. */
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; gap: 22px; }

  /* Una rejilla de una sola columna no necesita filete vertical: en escritorio
     separa columnas, en movil queda una linea suelta al costado del texto. */
  .fichas li, .rejilla .dato { border-right: 0; }

  /* Aire vertical en las filas de lista. */
  .fichas a { padding: 15px 14px 17px 0; }
  .dato { padding: 15px 14px 17px 0; }
  .barra { padding: 11px 0; gap: 10px; grid-template-columns: 7rem 1fr 2.4rem; }
  .reglas li { padding: 14px 0; gap: 10px; }
  .avisos li { padding: 5px 0 5px 13px; margin-bottom: 12px; }

  /* Las cajas del resultado, con margenes internos que respiren. */
  .veredicto { padding: 18px 16px; }
  .previa { padding: 16px 15px; }
  .origen blockquote { padding-left: 13px; }
  .origen { padding-top: 16px; }

  /* Los campos de fecha en iOS traen un ancho intrinseco propio que puede
     superar la columna; sin min-width:0 empujan la rejilla. */
  input { min-width: 0; max-width: 100%; }
  input[type="date"] { -webkit-appearance: none; appearance: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── El globo ─────────────────────────────────────────────── */
.globo { position: relative; }
.globo canvas {
  display: block; width: 100%; height: clamp(260px, 46vw, 420px);
  cursor: grab; touch-action: none;
}
.globo-pie { margin: 6px 0 0; text-align: center; }
.globo-pie span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tenue);
}
.globo-bloque.oculto { display: none; }

/* ── Datos a la vista, sin pedir nada ─────────────────────── */
.barras { display: grid; gap: 0; border-top: 1px solid var(--pelo); }
.barra {
  display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--pelo);
}
.barra span { font-size: 13px; color: var(--tinta-2); }
.barra i { display: block; height: 8px; background: var(--tinta); }
.barra b { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); border-top: 1px solid var(--pelo); }
.fichas li { border-bottom: 1px solid var(--pelo); border-right: 1px solid var(--pelo); }
.fichas a { display: block; padding: 12px 16px 14px 0; text-decoration: none; color: inherit; }
.fichas a:hover { background: var(--superficie); }
.fichas b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.fichas span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--tenue); }

/* Vista previa de la regla al elegir país, antes de pedir ninguna fecha. */
.previa { border: var(--regla) solid var(--pelo); padding: 16px 18px; margin-top: 22px; }
.previa h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.previa p { margin: 0; font-size: 14.5px; color: var(--tinta-2); }
.previa .pista { margin-top: 8px; font-size: 12.5px; color: var(--tenue); }

/* ── Explorador ───────────────────────────────────────────── */
.pesos { display: grid; gap: 0; border-top: 1px solid var(--pelo); margin-bottom: 16px; }
.peso {
  display: grid; grid-template-columns: 12rem 1fr 2rem; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--pelo);
}
.peso label { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tinta-2); }
.peso input[type="range"] { width: 100%; accent-color: var(--acento); }
.peso b { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.filtros-fila { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.chk {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; color: var(--tinta-2);
  /* .chk es un <label>: hay que anular el formato de etiqueta de campo. */
  text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap;
}
.chk input { accent-color: var(--acento); }
.mini {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  background: transparent; color: var(--tinta-3); border: 1px solid var(--pelo);
  padding: 5px 12px; cursor: pointer;
}
.mini:hover { border-color: var(--tinta-3); color: var(--tinta); }

.cabecera-lista { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lbl-fav { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-osc); }

.ranking { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pelo); }
.fila {
  display: grid; grid-template-columns: 3rem 1fr 2.4rem; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--pelo);
}
.punt { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.info { min-width: 0; }
.info a { text-decoration: none; color: inherit; }
.info a:hover b { color: var(--acento); }
.info b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.regla { display: block; font-size: 12.5px; color: var(--tinta-3); }
.chips { display: block; margin-top: 2px; font-size: 12px; color: var(--tenue); }
.fav {
  font: inherit; font-size: 19px; line-height: 1; background: transparent;
  border: 0; color: var(--tinta-3); cursor: pointer; padding: 4px;
}
.fav:hover, .fav.on { color: var(--acento); }
.vacio { padding: 20px 0; color: var(--tenue); font-size: 14px; }

@media (max-width: 560px) {
  .peso { grid-template-columns: 8.5rem 1fr 1.6rem; gap: 10px; }
}

/* ── Control de tema ──────────────────────────────────────
   Tres estados explícitos (auto / claro / oscuro) en vez de un interruptor de
   dos: si sólo hay dos, quien tiene el sistema en oscuro no puede volver a
   "que decida el sistema" sin borrar el navegador. */
.nm-tema { display: inline-flex; border: var(--regla) solid var(--tinta); flex: none; }
.nm-tema button {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--tinta-3); font-family: var(--fuente);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 8px; line-height: 1.4;
  border-left: 1px solid var(--pelo);
}
.nm-tema button:first-child { border-left: 0; letter-spacing: 0.12em; }
.nm-tema button:hover { color: var(--tinta); }
.nm-tema button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

.cab-in { justify-content: flex-start; }
.cab-in .nm-tema { margin-left: auto; align-self: center; }

/* ── Código de sesión ─────────────────────────────────────
   El sustituto honesto de "crear una cuenta": el visitante se lleva su
   configuración en una cadena de texto y nosotros no guardamos nada. */
.sesion { margin-top: 18px; }
.sesion .fila-cod { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sesion input[type="text"] {
  flex: 1 1 260px; min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
  padding: 8px 10px; background: var(--superficie); color: var(--tinta);
  border: var(--regla) solid var(--pelo);
}
.sesion input[type="text"]:focus { border-color: var(--tinta); }
.sesion .aviso-cod { font-size: 13px; margin-top: 8px; min-height: 1.4em; }
.sesion .aviso-cod.ok { color: var(--bien); }
.sesion .aviso-cod.no { color: var(--mal); }

/* ── Novedades ────────────────────────────────────────────
   El nivel nunca viaja sólo como color: cuadro + palabra. Quien no distingue
   el rojo del ámbar lee exactamente lo mismo. */
.novedades { list-style: none; margin: 0; padding: 0; }
.filtros-fila + .cabecera-lista { margin-top: 20px; }

.novedades .dia {
  margin: 26px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--pelo);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.novedades .dia:first-child { margin-top: 6px; }
.cabecera-lista + .novedades { margin-top: 0; }

.nov {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 4px 14px;
  align-items: start; padding: 10px 0; border-bottom: 1px solid var(--pelo);
}
.nov .nivel {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tinta-2); padding-top: 2px;
}
.nov .nivel i { width: 9px; height: 9px; flex: 0 0 auto; background: var(--tenue); }
.n-regla   .nivel i { background: var(--acento); }
.n-entrada .nivel i { background: var(--aviso); }
.n-regla   .nivel { color: var(--tinta); }

.nov .cuerpo { display: block; min-width: 0; }
/* Sin esto el nombre del destino sale con el azul subrayado del navegador:
   no hay reajuste global de <a> en esta hoja, cada bloque pone el suyo. */
.nov .cuerpo > a { display: inline-block; text-decoration: none; color: inherit; }
.nov .cuerpo > a:hover b { color: var(--acento); }
.nov .cuerpo b { font-size: 16px; line-height: 1.3; }
/* nov-nota y no nota: `.nota` ya es la sección de fuentes al pie de página,
   con borde superior y relleno grande. Reusar el nombre le metía una regla
   horizontal y 40px de aire dentro de cada fila. */
.nov .nov-nota { display: block; color: var(--tinta-2); font-size: 14px; margin-top: 3px; }
.nov .sec {
  display: inline-block; margin-top: 5px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue);
}
.nov .diff { display: block; margin-top: 8px; font-size: 13px; border-left: var(--regla) solid var(--pelo); padding-left: 10px; }
.nov .diff .antes { display: block; color: var(--tenue); text-decoration: line-through; }
.nov .diff .ahora { display: block; color: var(--tinta); margin-top: 3px; }
.nov .fuente-enlace { font-size: 12px; color: var(--tenue); white-space: nowrap; padding-top: 4px; text-decoration: none; }
.nov .fuente-enlace:hover { color: var(--acento); }

.novedades .vacio { padding: 22px 0; color: var(--tinta-3); }

@media (max-width: 620px) {
  .nov { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .nov .nivel { grid-column: 1 / -1; }
}

/* Enlace de navegación en la cabecera, con el mismo peso que el rótulo. */
.rot-enlace {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-osc);
  border-bottom: 1px solid transparent;
}
.rot-enlace:hover { border-bottom-color: currentColor; }

/* ── Selector de idioma ───────────────────────────────────
   Los nombres van en su propio idioma ("Español", no "Spanish"): quien busca
   su lengua en un menú no la reconoce traducida a una que no lee. Y nunca
   banderas — una bandera es un país, no una lengua. */
.nm-idioma { display: inline-flex; gap: 10px; align-items: center; flex: none; }
.nm-idioma a {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-3); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nm-idioma a:hover { color: var(--tinta); }
.nm-idioma a[aria-current="true"] { color: var(--tinta); border-bottom-color: var(--acento); }
.cab-in .nm-idioma { margin-left: auto; }
.cab-in .nm-idioma + .nm-tema { margin-left: 14px; }

/* ── Barra de sugerencia de idioma ────────────────────────
   Se sugiere, no se redirige: la URL pedida es la que se sirve. Redirigir en
   automático es lo que hace que uno aterrice en una web y no pueda salir del
   idioma equivocado — y ademas Googlebot, que rastrea desde EE. UU., sólo
   llegaría a ver un idioma. */
.nm-sugerencia {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px clamp(16px, 5vw, 32px);
  background: var(--superficie); border-bottom: 1px solid var(--pelo);
  font-size: 14px; color: var(--tinta-2);
}
.nm-sugerencia a {
  font-weight: 700; color: var(--acento-osc); text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.nm-sugerencia a:hover { color: var(--acento); }
.nm-sugerencia button {
  margin-left: auto; appearance: none; background: transparent; border: 0;
  cursor: pointer; color: var(--tenue); font-size: 20px; line-height: 1; padding: 0 4px;
}
.nm-sugerencia button:hover { color: var(--tinta); }

/* La página de ETIAS y EES.

   El aviso de fraude lleva filete y fondo propio porque no es una nota al pie:
   hay webs cobrando por un trámite que todavía no existe, y esa advertencia es
   la parte más útil de la página. */
.aviso-fraude {
  border-left: var(--regla) solid var(--mal);
  background: var(--superficie);
  padding: 16px clamp(14px, 2vw, 22px);
}
.aviso-fraude h2 { color: var(--mal); }

/* Los grupos de nacionalidades: el color dice el veredicto de un vistazo, y
   la palabra lo dice para quien no distingue los colores. */
.grupo-etias {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-left: 3px solid currentColor; padding-left: 12px;
}
.grupo-etias .cuantas {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tenue);
}
/* El color dice «te toca / no te toca», NO «buena / mala noticia». Que el
   grupo de quienes ya necesitan visa saliera en verde daba a entender que su
   situación es mejor, y para un cubano o un ecuatoriano es justo la contraria:
   siguen necesitando visado. Va en neutro. El verde queda sólo para la
   ciudadanía de la Unión, que sí es la situación más libre de las tres. */
.grupo-etias.si { color: var(--aviso); }
.grupo-etias.no { color: var(--tenue); }
.grupo-etias.ue { color: var(--bien); }
.grupo-etias.mixto { color: var(--tenue); }

/* Tabla de visados por nacionalidad — el corazón de las páginas de destino.

   Existe desde el 2026-09-09, cuando las 779 páginas de (nacionalidad ×
   destino) se juntaron en 41: una por destino, con las diecinueve respuestas
   acá. Lo que antes era el titular de cada página ahora es una fila.

   Se ordena por país y no por veredicto porque quien llega busca SU pasaporte;
   el reparto ya está dicho en la frase de arriba. */
.tabla-envoltorio { overflow-x: auto; margin-bottom: 14px; }

.tabla-visados {
  width: 100%; border-collapse: collapse; font-size: 15px;
  /* Que las estadías se alineen por dígito y la columna se lea de un vistazo. */
  font-variant-numeric: tabular-nums;
}
.tabla-visados thead th {
  text-align: left; padding: 0 14px 8px 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--tinta-3); border-bottom: 1px solid var(--pelo);
  white-space: nowrap;
}
.tabla-visados tbody th {
  text-align: left; font-weight: 700; color: var(--tinta);
  padding: 10px 14px 10px 0; white-space: nowrap;
}
.tabla-visados td { padding: 10px 14px 10px 0; color: var(--tinta-2); }
.tabla-visados tbody tr { border-bottom: 1px solid var(--pelo); }
.tabla-visados tbody tr:last-child { border-bottom: 0; }
.tabla-visados .estadia { color: var(--tinta-3); font-size: 14px; }

/* El veredicto va con color y con palabra: el color solo no lo lee quien no
   distingue rojo de verde, y la palabra sola no se ve de un vistazo. */
/* ⚠ El nombre choca: `.veredicto` ya es la caja del comprobador (arriba, en la
   línea ~198). Esto es otra cosa — la etiqueta redonda de «Sin visa / Visa
   requerida» dentro de la tabla de una ficha de destino.

   Al estar después en el archivo, ganaba, y le metía `white-space: nowrap` a la
   caja del comprobador: el titular no envolvía y el veredicto se desbordaba de
   su columna. Se veía poco mientras la portada era de una sola columna ancha;
   con el globo al lado quedó a la vista. Acotado a su tabla, que es el único
   sitio donde existe — comprobado: 41 fichas de destino, cero apariciones
   fuera de `.tabla-visados`.

   No se renombra porque eso obligaría a regenerar las 41 páginas para un
   cambio que no se ve. Si algún día se toca el generador, el nombre correcto
   de esto es `.etiqueta-visado`. */
.tabla-visados .veredicto {
  display: inline-block; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.v-sin_visa, .v-libre_circulacion, .v-propio { color: var(--bien); }
.v-visa_llegada, .v-evisa { color: var(--aviso); }
.v-visa_requerida { color: var(--mal); }
.v-condicionado, .v-otro { color: var(--tenue); }

@media (max-width: 560px) {
  .tabla-visados { font-size: 14px; }
  .tabla-visados tbody th, .tabla-visados td { padding: 9px 10px 9px 0; }
}


/* ── El descenso por decisión y el panel del mundo ─────────
   Paso 2 y 3 del plan de la portada (2026-09-22). */

/* Los nombres de las ciudades reales del destino, encima del lienzo. Van en
   HTML y no dibujados en el canvas: el texto de un canvas no se selecciona,
   no lo lee un lector de pantalla y sale borroso salvo que se dibuje al DPR.
   `inset: 0` sobre `.globo`, cuyo origen coincide con el del lienzo, que es
   lo que devuelve proyectarEnPais(). */
.globo-ciudades {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.globo-ciudades .ciu {
  position: absolute; top: 0; left: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-2);
  white-space: nowrap; opacity: 0;
  /* Un halo del color del papel en vez de una caja: sobre un enjambre de
     partículas, un recuadro tapa justo la ciudad que está nombrando. */
  text-shadow: 0 0 4px var(--papel), 0 0 8px var(--papel), 0 0 2px var(--papel);
}
.globo-ciudades .ciu-cap { color: var(--tinta); font-size: 11px; }

/* El botón que ofrece la sala, una vez que el país está formado. */
.mundo-abrir-caja { margin: 10px 0 0; text-align: center; }
.mundo-abrir {
  font: inherit; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; cursor: pointer;
  color: var(--papel); background: var(--tinta);
  border: var(--regla) solid var(--tinta);
}
.mundo-abrir:hover { background: var(--acento); border-color: var(--acento); }
.mundo-abrir:focus-visible { outline: var(--regla) solid var(--acento); outline-offset: 3px; }

/* La capa. Se abre sobre la portada porque el descenso pasó ahí: llevar a
   otra URL obligaría a elegir el destino de nuevo del otro lado. */
.panel-mundo {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(32, 30, 29, 0.55);
  overscroll-behavior: contain;
}
@media (min-width: 720px) { .panel-mundo { align-items: center; padding: 24px; } }
/* En escritorio el panel se corre a la izquierda y el velo se aclara, para
   que el país recién formado siga a la vista con sus ciudades. Taparlo sería
   contar el descenso y después esconder dónde aterrizó: el panel se abre
   ALREDEDOR del mundo, no encima. */
@media (min-width: 1040px) {
  .panel-mundo { justify-content: flex-start; padding-left: clamp(24px, 6vw, 96px); }
  .panel-mundo { background: rgba(32, 30, 29, 0.38); }
}
body.con-panel { overflow: hidden; }

.pm-caja {
  background: var(--papel); color: var(--tinta);
  border: var(--regla) solid var(--tinta);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  padding: clamp(18px, 4vw, 28px);
}
.pm-cab { position: relative; padding-bottom: 14px; border-bottom: var(--regla) solid var(--tinta); }
.pm-rotulo {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tenue);
}
.pm-titulo { margin: 2px 0 0; font-size: clamp(24px, 6vw, 34px); line-height: 1.1; }
.pm-sub { margin: 4px 0 0; font-size: 13px; color: var(--tinta-3); }
.pm-cerrar {
  position: absolute; top: 0; right: 0;
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 10px; cursor: pointer;
  background: none; color: var(--tinta-2); border: var(--regla) solid var(--pelo);
}
.pm-cerrar:hover { color: var(--acento); border-color: var(--acento); }

.pm-bloque { padding: 16px 0; border-bottom: 1px solid var(--pelo); }
.pm-bloque:last-child { border-bottom: 0; padding-bottom: 0; }
.pm-bloque h3 {
  margin: 0 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tenue);
}
.pm-bloque dl { margin: 0; }
/* Una rejilla de dos columnas y no una tabla: la etiqueta y el valor son un
   par, y en móvil el valor baja solo sin romper ninguna celda. */
.pm-fila {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  align-items: baseline; padding: 7px 0;
}
.pm-fila + .pm-fila { border-top: 1px solid var(--pelo); }
.pm-fila dt { font-size: 14px; color: var(--tinta-2); }
.pm-fila dd { margin: 0; text-align: right; }
.pm-fila dd b { font-size: 15px; display: block; }
.pm-fila dd span { display: block; font-size: 12px; color: var(--tinta-3); }

.pm-ir { margin: 10px 0 0; font-size: 14px; }
.pm-nota { margin: 0 0 10px; font-size: 14px; color: var(--tinta-2); }
/* Cada deber es una unidad: su nombre, con qué fuerza te lo pueden pedir, y
   la frase oficial que lo respalda. La cita va en inglés y entre comillas a
   propósito — es consejo de un gobierno, y traducirla por nuestra cuenta la
   convertiría en nuestra. */
.pm-deber { margin: 12px 0 0; }
.pm-deber:first-of-type { margin-top: 4px; }
.pm-deber-cab {
  margin: 0; display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; flex-wrap: wrap;
}
.pm-deber-cab b { font-size: 15px; }

/* La clase NUNCA va sola en color: lleva su palabra al lado, porque un color
   no se lee en escala de grises ni lo dice un lector de pantalla. Es la misma
   regla que el resto del sitio aplica a los veredictos. */
.pm-clase {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 7px; border: 1px solid currentColor;
}
.pm-clase-obligatorio { color: var(--mal); }
.pm-clase-condicional { color: var(--aviso); }
.pm-clase-puede_exigirse { color: var(--tinta-3); }
/* Cuando las dos fuentes lo piden con distinta fuerza no se rotula una
   clase: se rotula que lo piden las dos, que es lo mas fuerte que se puede
   afirmar sin elegir por el lector. Va en acento porque es la senal mas
   valiosa del bloque: dos gobiernos independientes coincidiendo en que hay
   un deber es lo que lo vuelve un requisito del pais y no de un pasaporte. */
.pm-clase-dos { color: var(--acento); }

/* Quien lo dice. Va debajo de la cita y no al lado del rotulo: es una
   frase, no una etiqueta, y al lado del nombre del deber competiria con el. */
.pm-quien { margin: 5px 0 0; font-size: 12px; color: var(--tinta-3); }
/* El plazo va ARRIBA de la cita y a plena tinta: es el unico dato del bloque
   que tiene consecuencia si se pasa por alto, y el deber que mas se incumple
   es justamente el que tiene reloj. */
.pm-plazo, .deber-plazo {
  margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--tinta);
}

/* El idioma y el clima del contexto: prosa, no valores. Van en el cuerpo de
   texto normal porque en la rejilla la negrita significa «esto es el dato», y
   una descripcion de treinta palabras no es un dato medido. */
.contexto-prosa { margin: 12px 0 0; }
.contexto-prosa b { font-weight: 700; }
.contexto-prosa span { color: var(--tinta-2); }
/* El pie de fuentes se separa, como en el bloque de deberes: pegado a la
   prosa se lee como parte de la descripcion del clima. */
.bloque.contexto > .tenue {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--pelo);
}

/* Los cambios del monitor en el panel. Cada uno es una fecha y una frase
   oficial, no un valor: por eso la fecha va en negrita y el texto no. */
.pm-cambio { margin: 10px 0 0; }
.pm-cambio-cab {
  margin: 0; display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; flex-wrap: wrap;
}
.pm-cambio-cab b { font-size: 14px; }
.pm-cambio-txt { margin: 3px 0 0; font-size: 13px; color: var(--tinta-2); }
/* Un cambio de reglas de entrada es el unico del feed que puede impedirte
   pasar: lleva el acento, como el resto de lo que decide. */
.pm-clase-entrada { color: var(--acento); }
/* El recuento de los demas cambios se pegaba al texto del ultimo y se leia
   como parte de el. Es una frase nuestra sobre el conjunto, no una cita. */
.pm-cambios .pm-nota { margin-top: 12px; }

/* ── Los deberes en la ficha del destino ─────────────────
   Mismo lenguaje visual que el panel de la portada, con la maqueta de la
   ficha: ahi el ancho es de lectura, asi que el rotulo de la clase baja a su
   linea en pantallas angostas en vez de apretar el nombre del deber. */
.bloque.deberes .deber { margin: 16px 0 0; }
.deber-cab {
  margin: 0 0 2px; display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; flex-wrap: wrap;
}
.deber-cab b { font-size: 16px; }
/* La clase NUNCA va sola en color: lleva su palabra al lado, como los
   veredictos del resto del sitio. Un color no se lee en escala de grises ni
   lo dice un lector de pantalla. */
.deber-clase {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 7px; border: 1px solid currentColor;
}
.deber-obligatorio { color: var(--mal); }
.deber-condicional { color: var(--aviso); }
.deber-puede_exigirse { color: var(--tinta-3); }
/* Que los dos gobiernos coincidan en que hay un deber es la senal mas fuerte
   del bloque: es lo que lo vuelve un requisito del pais y no de un pasaporte. */
.deber-dos { color: var(--acento); }
/* El pie de fuentes se pegaba al ultimo deber y se leia como parte de su
   explicacion. Una regla de separacion, que es la del resto del sitio. */
.bloque.deberes > .detalle.tenue:last-child {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--pelo);
}

.pm-deberes blockquote {
  margin: 7px 0 0; padding: 9px 12px;
  background: var(--superficie); border-left: var(--regla) solid var(--pelo);
  font-size: 13px; color: var(--tinta-2);
}
.pm-fuente { margin: 8px 0 0; font-size: 11px; color: var(--tenue); }