:root {
  --navy:#16324F; --teal:#1E7A8A; --sand:#D9B26F;
  --bg:#FAF7F1; --surface:#FFFFFF; --surface2:#F1EDE4;
  --ink:#22303C; --ink-soft:#5B6B77; --line:#E2DCD0;
  --green:#2E7D32; --green-bg:#E5F1E5; --amber:#9A6410; --amber-bg:#FCF1DA;
  --red:#B43A3A; --red-bg:#F9E7E7; --grey:#5F6B72; --grey-bg:#EBEDEE;
  --link:#186875; --head:#16324F; --th-bg:#16324F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#141A21; --surface:#1C242D; --surface2:#232D38;
    --ink:#E4E9ED; --ink-soft:#9AA8B3; --line:#33404C;
    --green:#7FC784; --green-bg:#1E3320; --amber:#E4B565; --amber-bg:#3A2E14;
    --red:#E58989; --red-bg:#3D2020; --grey:#A9B4BC; --grey-bg:#2A343D;
    --link:#6FC2D0; --head:#BFD5E8; --teal:#4FA3B2; --sand:#C2A468; --th-bg:#0E2233;
  }
}
:root[data-theme="dark"] {
  --bg:#141A21; --surface:#1C242D; --surface2:#232D38;
  --ink:#E4E9ED; --ink-soft:#9AA8B3; --line:#33404C;
  --green:#7FC784; --green-bg:#1E3320; --amber:#E4B565; --amber-bg:#3A2E14;
  --red:#E58989; --red-bg:#3D2020; --grey:#A9B4BC; --grey-bg:#2A343D;
  --link:#6FC2D0; --head:#BFD5E8; --teal:#4FA3B2; --sand:#C2A468; --th-bg:#0E2233;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { background:var(--bg); color:var(--ink); font-family:"Source Serif 4", Georgia, serif; font-size:16.5px; line-height:1.62; margin:0; }
img { max-width:100%; }
.offline-photos { margin:10px 0 14px; font-family:"Archivo",sans-serif; font-size:13.5px; color:var(--ink-soft); }
.btn-offline { font-family:"Archivo",sans-serif; font-weight:600; font-size:13px; padding:7px 13px; border-radius:8px; border:1px solid var(--teal); background:var(--surface); color:var(--teal); cursor:pointer; margin-right:6px; }
.btn-offline:disabled { opacity:.5; cursor:wait; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:auto; max-width:100%; background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13.5px; }
h1,h2,h3,h4, .nav, .st, .prio, .cat, .time, th, .callout-title, .kicker, .chip-label, .badge, .btn { font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; }
a { color:var(--link); text-decoration-thickness:1px; text-underline-offset:2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
a.coord { white-space:nowrap; font-family:"Archivo",sans-serif; font-variant-numeric:tabular-nums; }

.nav { position:sticky; top:0; z-index:500; background:var(--navy); display:flex; align-items:center; gap:2px; overflow-x:auto; padding:0 10px; scrollbar-width:thin; }
.nav .brand { color:#fff; font-weight:800; font-size:12px; letter-spacing:.12em; padding:12px 10px; white-space:nowrap; text-decoration:none; }
.nav a:not(.brand) { color:#CBD8E4; text-decoration:none; font-size:12.5px; font-weight:600; padding:12px 9px; white-space:nowrap; }
.nav a:hover { color:#fff; }

.hero { position:relative; overflow:hidden; background:var(--navy); }
.hero img.bg { width:100%; height:min(52vw, 430px); object-fit:cover; display:block; opacity:.85; }
.hero .veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,50,79,.25) 0%, rgba(22,50,79,.82) 78%, rgba(22,50,79,.95) 100%); }
.hero .inner { position:absolute; left:0; right:0; bottom:0; padding:18px clamp(16px,4vw,48px) 20px; color:#fff; }
.kicker { font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--sand); }
.hero h1 { margin:.1em 0 .1em; font-size:clamp(34px, 7vw, 58px); font-weight:800; line-height:1.02; text-wrap:balance; color:#fff; }
.hero .sub { margin:0; font-size:clamp(14px,2.6vw,17px); color:#D9E3EC; font-style:italic; }
.hero .photo-credit { position:absolute; top:10px; right:14px; font-size:11px; color:#E7EDF3; background:rgba(22,50,79,.55); padding:3px 8px; border-radius:4px; }
.hero .photo-credit a { color:#E7EDF3; }
@media (max-width:640px) { .hero .photo-credit { display:none; } }

.chips { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.chip { background:var(--surface); padding:12px 14px; text-align:center; }
.chip-label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--teal); }
.chip b { font-size:14px; font-weight:600; font-family:"Archivo",sans-serif; }
.chip b .st { font-size:12px; }
.chips.country-facts { grid-template-columns:repeat(7,minmax(0,1fr)); }
.country-facts .chip { min-width:0; min-height:76px; padding:9px 8px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; }
.country-facts .chip-label { margin-bottom:3px; }
.country-facts .chip b { width:100%; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden; }
@media (max-width:1100px) { .chips.country-facts { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:640px) {
  .chips.country-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .country-facts .chip { min-height:72px; }
}

main { max-width:980px; margin:0 auto; padding:8px clamp(14px,4vw,32px) 60px; }
.notice { text-align:center; font-style:italic; color:var(--ink-soft); font-size:14.5px; margin:18px auto 6px; max-width:680px; }

section { margin-top:44px; scroll-margin-top:58px; }
h2 { font-size:clamp(23px,4vw,29px); font-weight:800; color:var(--head); margin:0 0 6px; padding-bottom:8px; border-bottom:3px solid var(--sand); text-wrap:balance; }
h3 { font-size:17px; font-weight:700; color:var(--teal); margin:26px 0 6px; }
h4 { font-size:14.5px; font-weight:700; color:var(--head); margin:18px 0 4px; }
p { margin:.5em 0; }

.callout { border-radius:8px; padding:13px 16px; margin:16px 0; background:var(--surface2); border-left:4px solid var(--teal); }
.callout p { margin:2px 0 0; font-size:15px; }
.callout-title { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.callout.warn { border-left-color:var(--amber); background:var(--amber-bg); } .callout.warn .callout-title { color:var(--amber); }
.callout.danger { border-left-color:var(--red); background:var(--red-bg); } .callout.danger .callout-title { color:var(--red); }
.callout.ok { border-left-color:var(--green); background:var(--green-bg); } .callout.ok .callout-title { color:var(--green); }

.tblwrap { overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:13.5px; font-family:"Archivo",sans-serif; }
th { background:var(--th-bg); color:#fff; text-align:left; padding:8px 10px; font-size:12px; letter-spacing:.04em; white-space:nowrap; }
td { padding:7px 10px; border-top:1px solid var(--line); vertical-align:top; }
tbody tr:nth-child(even) td { background:var(--surface2); }
td:first-child { font-weight:600; }
.num td { font-variant-numeric:tabular-nums; }
tr.rowlink { cursor:pointer; }
tr.rowlink:hover td { background:var(--amber-bg); }

.st { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px; line-height:1.5; }
.st-green { background:var(--green-bg); color:var(--green); }
.st-amber { background:var(--amber-bg); color:var(--amber); }
.st-red { background:var(--red-bg); color:var(--red); }
.st-grey { background:var(--grey-bg); color:var(--grey); }

ul.ticks { padding-left:0; list-style:none; }
ul.ticks li { margin:7px 0; padding-left:22px; position:relative; }
ul.ticks li::before { content:""; position:absolute; left:2px; top:.55em; width:9px; height:9px; border-radius:2px; background:var(--sand); }

.poi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:18px; margin-top:18px; }
.poi-card { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; }
.poi-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.poi-carousel { position:relative; overflow:hidden; background:var(--surface); }
.poi-carousel-track { display:flex; transition:transform .22s ease; }
.poi-carousel figure { flex:0 0 100%; width:100%; margin:0; }
.poi-carousel figcaption { display:none; }
.poi-carousel button { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.45);
  border-radius:99px; cursor:pointer; color:#fff; background:rgba(22,50,79,.76); box-shadow:0 2px 8px rgba(0,0,0,.22); }
.poi-carousel button:hover, .poi-carousel button:focus-visible { background:var(--navy); }
.poi-carousel button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.poi-carousel .prev { left:8px; }
.poi-carousel .next { right:8px; }
.poi-carousel-count { position:absolute; right:8px; top:8px; z-index:2; padding:2px 7px;
  border-radius:99px; color:#fff; background:rgba(22,50,79,.78); font:700 10.5px/1.5 "Archivo",sans-serif; }
.poi-grid > .poi-card { cursor:pointer; }
/* 4x4 y offroad: tarjetas con borde ocre (misma familia que su capa del mapa) */
.off-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px; margin:12px 0 20px; }
.off-card { background:var(--surface); border:1px solid var(--line); border-left:5px solid #D4A017; border-radius:10px; padding:14px 16px; font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; font-size:14px; }
.off-card.mal { border-left-color:#B43A3A; }
.off-card h3 { margin:0 0 6px; font-size:16px; }
.off-card .poi-tags span { margin-right:4px; }
.off-card .off-estado { font-weight:700; }
.off-card p { margin:8px 0; line-height:1.45; }
.off-card .poi-decision { margin:6px 0; }
.off-src { font-size:12.5px; line-height:1.5; margin-top:6px; color:var(--ink-soft); }
.off-src a { word-break:break-word; }
.off-h { margin-top:18px; }
.off-notas { margin:10px 0; font-size:13.5px; color:var(--ink-soft); }
.off-foto { margin:-14px -16px 10px -16px; }
.off-foto img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:9px 9px 0 0; }
.off-foto figcaption { font-size:11.5px; color:var(--ink-soft); padding:4px 16px 0; }
.off-add { margin-top:8px; font-size:13px; }
/* Globos de las líneas del mapa: estrechos y en varias filas */
.tv-pill{display:inline-block;padding:1px 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;margin:1px 0}
.tv-ojo{display:block;margin-top:3px;color:var(--amber);font-size:12.5px}
.tv-marca{display:inline-block;margin-top:3px;padding:0 7px;border-radius:999px;background:#B43A3A;color:#fff;font-size:11px;font-weight:700}
tr.en-viaje td:first-child{box-shadow:inset 3px 0 0 #B43A3A}
.tv-tabla td:first-child{color:var(--ink-soft);width:1%}
.leaflet-tooltip.a27-tip { white-space:normal; width:max-content; min-width:min(170px, 55vw); max-width:min(380px, 70vw);
  font-size:13.5px; line-height:1.4; padding:6px 10px; }
.poi-grid > .poi-card .poi-desc:not(.dognote) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; }
.poi-grid > .poi-card .poi-details { display:none; }
.poi-details { display:grid; gap:7px; }
.poi-decision { margin:2px 0 0; display:grid; gap:5px; }
.poi-decision div { display:grid; grid-template-columns:minmax(92px,30%) 1fr; gap:8px;
  padding-top:5px; border-top:1px solid var(--line); }
.poi-decision dt { color:var(--teal); font-weight:600; font-size:13px; line-height:1.4; }
.poi-decision dd { margin:0; font-size:13px; line-height:1.4; color:var(--ink); }
.poi-links { font-size:13px; color:var(--ink-soft); }
.poi-links a { color:var(--teal); }
/* Enlaces a fichas de país desde la sección del perro */
/* Cabecera sin foto (secciones «El perro» y «CPD») */
.hero.small .hero-txt { max-width:1200px; margin:0 auto; color:#fff;
  padding:26px clamp(16px,4vw,48px) 30px; }
.hero.small .hero-txt .kicker { display:block; margin-bottom:6px; }
.hero.small .hero-txt p { margin:.6em 0 0; max-width:78ch; line-height:1.5;
  font-size:clamp(15px,2.2vw,17px); color:#D9E3EC; }
.hero.small .hero-txt p strong { color:#fff; }
/* Leyenda del mapa del CPD */
.cpdleg { display:flex; flex-wrap:wrap; gap:8px 18px; margin:12px 0 4px; }
.cpdkey { display:flex; align-items:flex-start; gap:7px; font-size:13px; color:var(--ink-soft);
  max-width:330px; line-height:1.35; }
.cpdkey i { flex:0 0 auto; width:14px; height:14px; border-radius:3px; margin-top:2px;
  border:1px solid rgba(0,0,0,.12); }
.cpdkey b { color:var(--ink); white-space:nowrap; }
.cpdkey span { display:block; }
/* Referencias internas §N: saltan a su sección y dicen cuál al pasar el ratón */
a.sec { color:#0F5F6E; font-weight:600; text-decoration:none; white-space:nowrap;
  padding:0 2px; border-radius:3px; background:rgba(30,122,138,.10); cursor:help; }
a.sec:hover { background:#1E7A8A; color:#fff; }
main h2[id], main h3[id] { scroll-margin-top:70px; }
main h2[id]:target, main h3[id]:target { background:rgba(30,122,138,.12);
  box-shadow:-10px 0 0 rgba(30,122,138,.12); border-radius:3px; }
/* Referencias externas detectadas automáticamente: URL, dominio, correo o fuente */
a.fuente { color:#0F5F6E; text-decoration:none; border-bottom:1px solid rgba(15,95,110,.35);
           word-break:break-word; }
a.fuente:hover { border-bottom-color:#0F5F6E; background:rgba(30,122,138,.08); }
a.fuente::after { content:"97"; font-size:.72em; margin-left:.12em; opacity:.55;
                  vertical-align:super; }
a.fuente[href^="mailto:"]::after { content:"¸9"; vertical-align:baseline; margin-left:.2em; }
code a.fuente { border-bottom:none; }
code a.fuente::after { opacity:.45; }
.poi-noimg { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#eceff1,#eceff1 10px,#e3e7ea 10px,#e3e7ea 20px);
  color:#7a848a; font-size:12px; letter-spacing:.04em; text-align:center; padding:0 14px; }
.poi-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.poi-body h3 { margin:0; font-size:16px; color:var(--head); line-height:1.25; }
.poi-tags { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; font-weight:700; align-items:center; }
.prio { color:var(--navy); background:var(--surface2); border:1px solid var(--line); padding:1px 8px; border-radius:99px; font-family:"Archivo",sans-serif; font-size:11px; font-weight:700; }
:root[data-theme="dark"] .prio { color:var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prio { color:var(--ink); } }
.cat { color:var(--teal); }
.time { color:var(--ink-soft); }
.poi-desc { font-size:14px; margin:0; color:var(--ink); }
.dognote { font-size:13px; color:var(--ink-soft); }
.credit { font-size:12px; color:var(--ink-soft); font-family:"Archivo",sans-serif; margin-top:auto; padding-top:4px; border-top:1px dashed var(--line); }

.mapbox { height:min(72vh, 560px); border:1px solid var(--line); border-radius:10px; margin:16px 0 6px; background:var(--surface2); position:relative; z-index:0; }
.mapbox.tall { height:calc(100vh - 120px); min-height:420px; }
.figcap { font-size:13px; color:var(--ink-soft); text-align:center; margin-top:6px; }
.leaflet-popup-content-wrapper { background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line); box-shadow:0 5px 22px rgba(0,0,0,.28); }
.leaflet-popup-tip { background:var(--surface) !important; }
.leaflet-container a.leaflet-popup-close-button { color:var(--ink-soft) !important; }
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus-visible { color:var(--head) !important; }
.leaflet-popup-content { font-family:"Archivo",sans-serif; font-size:13px; line-height:1.45; margin:10px 12px; }
.leaflet-popup-content img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:6px; margin-bottom:8px; }
.leaflet-popup-content .st { font-size:10.5px; }
.a27-popup-title, .a27-popup-meta, .a27-map-summary { display:block; }
.a27-popup-title { color:var(--head); font-size:14px; line-height:1.3; }
.a27-popup-meta { color:var(--teal); font-weight:700; margin:2px 0 4px; }
.a27-map-summary { color:var(--ink); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; }
.a27-popup-actions { margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.a27-popup-actions a, .a27-popup-expand { color:var(--teal); font:700 12px/1.35 "Archivo",sans-serif; }
.a27-popup-expand { appearance:none; border:0; padding:0; background:none; text-decoration:underline; cursor:pointer; }
.a27-popup-expand:hover, .a27-popup-expand:focus-visible, .a27-popup-actions a:hover { color:var(--navy); }
.leaflet-container { font-family:"Archivo",sans-serif; background:#DCE7DC; }
/* Al clicar un país o una zona no se dibuja el recuadro de foco: basta con el cambio de color. */
.leaflet-container path.leaflet-interactive:focus, .leaflet-container path.leaflet-interactive:focus-visible { outline:none; }

/* Leyenda de capas: plegada en un icono, se abre y se cierra con un clic */
.leaflet-control-layers { border-radius:8px !important; border:1px solid rgba(0,0,0,.18) !important; box-shadow:0 2px 10px rgba(0,0,0,.18) !important; }
.leaflet-control-layers-toggle { width:38px !important; height:38px !important; background-size:22px 22px !important; }
.leaflet-control-layers-expanded { padding:8px 12px 10px !important; max-height:min(62vh, 420px); overflow-y:auto; max-width:min(78vw, 340px); }
.leaflet-control-layers-expanded label { font-size:13px; line-height:1.5; display:flex; gap:7px; align-items:flex-start; }
.leaflet-control-layers-expanded label span { display:inline; }
.a27-leyenda-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:"Archivo",sans-serif; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#5F6B72; border-bottom:1px solid rgba(0,0,0,.12); padding-bottom:5px; margin-bottom:6px; }
.a27-leyenda-x { background:none; border:none; cursor:pointer; font-size:19px; line-height:1; color:#5F6B72; padding:0 2px; }
.a27-leyenda-x:hover { color:#16324F; }

dialog.poi-modal { border:none; border-radius:12px; padding:0; max-width:520px; width:calc(100vw - 32px); max-height:calc(100vh - 32px); overflow:auto; background:var(--surface); color:var(--ink); box-shadow:0 12px 50px rgba(0,0,0,.4); }
dialog.poi-modal::backdrop { background:rgba(10,20,30,.55); }
dialog.poi-modal .poi-card { border:none; border-radius:0; }
dialog.poi-modal .poi-carousel figcaption { display:block; min-height:52px; padding:8px 42px 9px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:12px; line-height:1.4; }
dialog.poi-modal .poi-carousel button { top:calc((100% - 52px)/2); }
dialog.poi-modal .poi-carousel-count { right:48px; }
dialog.poi-modal .close { position:absolute; top:8px; right:8px; z-index:2; background:rgba(22,50,79,.75); color:#fff; border:none; border-radius:99px; width:32px; height:32px; font-size:17px; cursor:pointer; font-family:Archivo,sans-serif; }

/* Ficha completa abierta desde un punto del mapa: no navega fuera y al cerrar
   mantiene intactos el zoom, la posición y las capas del mapa. */
dialog.map-poi-modal { border:0; border-radius:14px; padding:0; width:min(760px, calc(100vw - 28px));
  max-width:760px; max-height:calc(100vh - 28px); overflow:auto; background:var(--surface); color:var(--ink);
  box-shadow:0 18px 60px rgba(0,0,0,.46); font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; }
dialog.map-poi-modal::backdrop { background:rgba(10,20,30,.62); }
.map-poi-sheet { position:relative; background:var(--surface); }
.map-poi-close { position:absolute; top:10px; right:10px; z-index:5; width:38px; height:38px; padding:0;
  border:1px solid rgba(255,255,255,.55); border-radius:99px; color:#fff; background:rgba(22,50,79,.82);
  box-shadow:0 2px 9px rgba(0,0,0,.28); font:600 23px/1 "Archivo",sans-serif; cursor:pointer; }
.map-poi-close:hover, .map-poi-close:focus-visible { background:var(--navy); }
.map-poi-gallery { position:relative; overflow:hidden; background:var(--surface2); }
.map-poi-gallery figure { margin:0; }
.map-poi-gallery figure[hidden] { display:none; }
.map-poi-gallery img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.map-poi-gallery figcaption { min-height:48px; padding:8px 54px 9px; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:12px; line-height:1.4; text-align:center; }
.map-poi-gallery button { position:absolute; top:calc((100% - 48px)/2); transform:translateY(-50%); z-index:3;
  width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.5);
  border-radius:99px; cursor:pointer; color:#fff; background:rgba(22,50,79,.78); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.map-poi-gallery button:hover, .map-poi-gallery button:focus-visible { background:var(--navy); }
.map-poi-gallery button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.map-poi-gallery .prev { left:10px; }
.map-poi-gallery .next { right:10px; }
.map-poi-gallery-count { position:absolute; right:56px; top:10px; z-index:3; padding:3px 8px;
  border-radius:99px; color:#fff; background:rgba(22,50,79,.82); font:700 11px/1.5 "Archivo",sans-serif; }
.map-poi-noimg { aspect-ratio:16/7; display:grid; place-items:center; padding:20px; text-align:center;
  color:var(--ink-soft); background:var(--surface2); }
.map-poi-body { display:flex; flex-direction:column; gap:10px; padding:18px 22px 22px; }
.map-poi-body h2 { margin:0; padding:0 46px 7px 0; border-bottom:2px solid var(--sand); color:var(--head);
  font:800 clamp(21px,4vw,27px)/1.2 "Archivo",sans-serif; }
.map-poi-description { margin:0; color:var(--ink); font-size:14.5px; line-height:1.55; }
.map-poi-body .poi-decision { margin-top:2px; }
.map-poi-body .poi-decision dt, .map-poi-body .poi-decision dd, .map-poi-body .poi-links { font-size:13.5px; }
.poi-tags .propio { font-size:11px; font-weight:700; color:var(--amber); background:var(--amber-bg); border-radius:99px; padding:1px 8px; }
.map-poi-actions { display:flex; flex-wrap:wrap; gap:9px; padding-top:4px; }
.map-poi-actions .btn { font-size:13px; }
@media (max-width:560px) {
  dialog.map-poi-modal { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
  .map-poi-body { padding:15px 15px 18px; }
  .map-poi-gallery figcaption { padding-left:48px; padding-right:48px; }
  .map-poi-body .poi-decision div { grid-template-columns:1fr; gap:2px; }
}

.srcs { columns:2; column-gap:34px; padding-left:18px; font-size:14.5px; font-family:"Archivo",sans-serif; }
.srcs li { margin:6px 0; break-inside:avoid; }
@media (max-width:640px) { .srcs { columns:1; } }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.cards.portal-access { grid-auto-rows:1fr; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px) { .cards.portal-access { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .cards.portal-access { grid-template-columns:1fr; } }
.portal-access .card { height:100%; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; }
a.card { transition:transform .15s ease; } a.card:hover { transform:translateY(-2px); }
.card img { width:100%; aspect-ratio:16/8.5; object-fit:cover; display:block; }
.card .body { padding:11px 14px 13px; display:flex; flex-direction:column; gap:5px; }
.card h3 { margin:0; font-size:17px; color:var(--head); }
.card .meta { font-family:"Archivo",sans-serif; font-size:12.5px; color:var(--ink-soft); }
.badge { align-self:flex-start; font-size:11px; font-weight:700; padding:2px 10px; border-radius:99px; }
.b-ok { background:var(--green-bg); color:var(--green); }
.b-draft { background:var(--amber-bg); color:var(--amber); }
.b-off { background:var(--grey-bg); color:var(--grey); }
.b-x { background:var(--red-bg); color:var(--red); }
.b-viaje { background:var(--red-bg); color:var(--red); }
.b-paso { background:var(--amber-bg); color:var(--amber); }
.callout.viaje-ruta { border-left-color:#B43A3A; }
.callout.viaje-ruta ol { margin:6px 0 0; padding-left:20px; }
.viaje-portal { margin:18px 0 6px; }
.viaje-lista { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:10px 0 0; }
.viaje-lista a { display:inline-block; border:1px solid var(--line); border-radius:99px; padding:3px 10px; font-family:"Archivo",sans-serif; font-size:13px; text-decoration:none; color:var(--ink); background:var(--surface); }
.viaje-lista a.para { border-color:#1E7A8A; }
.viaje-lista a.cruza { border-style:dashed; color:var(--ink-soft); }
.viaje-lista small { color:var(--ink-soft); }
.notice.viaje-nota { text-align:left; max-width:none; font-size:13.5px; }
.hero .verif-badge { display:inline-block; margin:8px 0 2px; align-self:auto; }

.btn { display:inline-block; background:var(--teal); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--teal); border:1px solid var(--teal); }

.audio-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:18px 0 4px; }
.audio-status { font-family:"Archivo",sans-serif; font-size:13px; color:var(--ink-soft); }
.historia-article { font-size:16.5px; margin-top:10px; }
.historia-article h3 { margin-top:30px; }

footer { border-top:1px solid var(--line); margin-top:56px; padding:18px 0 4px; font-size:13px; color:var(--ink-soft); text-align:center; font-family:"Archivo",sans-serif; }
@media print { .nav, .mapbox, dialog { display:none !important; } body { font-size:12px; } }