/* Ruta Japón 2027
   Concepto: cartel de viaje japonés (carteles de ferrocarril) + plano de estaciones. Modo lectura para el itinerario.
   Color: papel frío, tinta sumi, índigo ai como acento y un color tradicional por región. Tokens semánticos; nada de hex en componentes.
   Tipos: Zen Kaku Gothic New (titulares), Shippori Mincho (japonés), IBM Plex Sans (texto y datos, con cifras tabulares).
   Revisado con las pautas de Frontend Design, Impeccable y UI UX Pro Max: sin eyebrows, sin monoespaciada de disfraz,
   sin cristal decorativo, objetivos táctiles de 44 px, foco visible, un solo momento de movimiento. */
:root{
  --bg:#F3F5F4; --surface:#FFFFFF; --ink:#1A1F2E; --muted:#535A69; --line:#D6DAD7;
  --accent:#2A43A0; --accent-soft:#E3E8F6; --on-accent:#FFFFFF;
  --sea:#DCE8EE; --land:#FAFAF7; --coast:#A3B0AA; --rail:#98A1AC; --relief:#7E9184; --halo:#FAFAF7;
  --r-kansai:#B23A4B; --r-alpes:#3B7653; --r-fuji:#6B59A8; --r-kanto:#2A43A0; --r-oeste:#A3660F; --r-isla:#1E7E89;
  --d1:#2A43A0; --d2:#6B59A8; --d3:#1E7E89; --on-data:#FFFFFF;
  --good:#2F6A3F; --good-soft:#E2EEE4; --warn:#8A5110; --warn-soft:#F5EADB; --bad:#9B3333; --bad-soft:#F4E2E2;
  --sky-top:#C9DCEA; --sky-bottom:#F4E4D8; --sun:#EFAF93; --mtn-far:#AEBCCB; --mtn-mid:#8496B4; --fuji:#3B4C86; --snow:#FFFFFF; --wave:#2A43A0; --wave-bg:#D3E2EA; --train:#FFFFFF;
  --display:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --z-sticky:30; --z-skip:40;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10131A; --surface:#181C26; --ink:#E8EAF0; --muted:#A0A7B5; --line:#2C3242;
  --accent:#95AAEF; --accent-soft:#212A45; --on-accent:#10131A;
  --sea:#0D131C; --land:#1E2431; --coast:#3A4355; --rail:#566074; --relief:#66778A; --halo:#1E2431;
  --r-kansai:#E57D8B; --r-alpes:#7DC69A; --r-fuji:#AB9BE3; --r-kanto:#95AAEF; --r-oeste:#E3A95F; --r-isla:#6CCAD3;
  --d1:#95AAEF; --d2:#AB9BE3; --d3:#6CCAD3; --on-data:#10131A;
  --good:#80C493; --good-soft:#1C2D22; --warn:#E2A862; --warn-soft:#32281A; --bad:#E79292; --bad-soft:#392224;
  --sky-top:#0E1530; --sky-bottom:#2C2752; --sun:#E9DDB8; --mtn-far:#2B3456; --mtn-mid:#222A48; --fuji:#18203F; --snow:#C9D2E6; --wave:#95AAEF; --wave-bg:#111A2C; --train:#E8EAF0;
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#10131A; --surface:#181C26; --ink:#E8EAF0; --muted:#A0A7B5; --line:#2C3242;
  --accent:#95AAEF; --accent-soft:#212A45; --on-accent:#10131A;
  --sea:#0D131C; --land:#1E2431; --coast:#3A4355; --rail:#566074; --relief:#66778A; --halo:#1E2431;
  --r-kansai:#E57D8B; --r-alpes:#7DC69A; --r-fuji:#AB9BE3; --r-kanto:#95AAEF; --r-oeste:#E3A95F; --r-isla:#6CCAD3;
  --d1:#95AAEF; --d2:#AB9BE3; --d3:#6CCAD3; --on-data:#10131A;
  --good:#80C493; --good-soft:#1C2D22; --warn:#E2A862; --warn-soft:#32281A; --bad:#E79292; --bad-soft:#392224;
  --sky-top:#0E1530; --sky-bottom:#2C2752; --sun:#E9DDB8; --mtn-far:#2B3456; --mtn-mid:#222A48; --fuji:#18203F; --snow:#C9D2E6; --wave:#95AAEF; --wave-bg:#111A2C; --train:#E8EAF0;
  color-scheme:dark;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--muted) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;accent-color:var(--accent);caret-color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;line-height:1.2}
p,li{text-wrap:pretty}
p{margin:0}
[lang="ja"]{font-family:var(--mincho);font-weight:600;line-break:strict;word-break:keep-all}
[hidden]{display:none!important}
.num,td.r,.cmp-eur{font-variant-numeric:tabular-nums}
.gutter{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.wrap{max-width:960px;margin:0 auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:var(--z-skip);background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:max(12px,env(safe-area-inset-top,0px))}

/* ---------- portada ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(var(--sky-top),var(--sky-bottom));min-height:540px;display:flex}
.hero-art{position:absolute;inset:auto 0 0 0;width:100%;height:clamp(250px,40vw,420px);max-width:none}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:max(64px,env(safe-area-inset-top,0px)) clamp(240px,36vw,330px)}
.hero-text{display:flex;flex-direction:column;gap:16px;max-width:600px}
.hero h1{font-size:clamp(46px,9vw,88px);font-weight:900;letter-spacing:-.02em;line-height:.95;display:flex;flex-direction:column;gap:14px}
.hero h1 [lang="ja"]{font-size:clamp(20px,3.4vw,28px);letter-spacing:.3em;opacity:.8;line-height:1.2}
.hero .sub{font-size:clamp(17px,2.2vw,20px);max-width:34ch;line-height:1.5}
.hero .sub strong{font-weight:600}
.train{transform-box:fill-box}
@media (prefers-reduced-motion: no-preference){
  .train{animation:arrive 1.6s var(--ease-out) .2s both}
  @keyframes arrive{from{transform:translateX(-70%)}to{transform:translateX(0)}}
}
@media (max-width:640px){.hero{min-height:0}.hero .wrap{padding-bottom:250px}}

/* ---------- barra fija de escenarios ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:calc(var(--z-sticky) + 1);background:var(--bg)}
.switch{position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--z-sticky);background:var(--bg);border-bottom:1px solid var(--line)}
.switch .wrap{display:flex;align-items:center;gap:14px;padding-block:8px;min-height:60px}
.switch label,.switch .lbl{font-size:14px;color:var(--muted);white-space:nowrap}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill-btn{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;font-size:14px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);display:inline-flex;gap:8px;align-items:center;white-space:nowrap;transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out)}
.pill-btn:hover{border-color:var(--accent)}
.pill-btn b{font-weight:600}
.pill-btn small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pill-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill-btn[aria-pressed="true"] small{color:inherit;opacity:.8}
.pill-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.switch select{font:inherit;font-size:16px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);flex:1;min-width:0}
.sel-wrap{display:none;align-items:center;gap:10px;flex:1;min-width:0}
@media (max-width:860px){.pills,.switch .lbl{display:none}.sel-wrap{display:flex}}

/* ---------- secciones ---------- */
main{padding-block:64px 88px}
.sections{display:flex;flex-direction:column;gap:88px}
section{display:flex;flex-direction:column;gap:20px;scroll-margin-top:84px}
h2{font-size:clamp(26px,4vw,34px);letter-spacing:-.01em}
h2 [lang="ja"]{font-size:.55em;color:var(--muted);letter-spacing:.2em;margin-left:.5em;white-space:nowrap}
h3{font-size:17px}
.lead{color:var(--muted);max-width:66ch;margin-top:-8px}
.note{font-size:14.5px;color:var(--muted);max-width:70ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}

/* comparador */
.compare{padding:8px}
.cmp-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,220px) minmax(0,1fr) 84px;gap:14px;align-items:center;padding:10px 12px;border-radius:10px;width:100%;min-height:52px;transition:background-color .15s var(--ease-out)}
.cmp-row:hover{background:var(--bg)}
.cmp-row[aria-pressed="true"]{background:var(--accent-soft)}
.cmp-row:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.cmp-key{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;border:1.5px solid var(--line)}
.cmp-row[aria-pressed="true"] .cmp-key{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cmp-name{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;min-width:0;font-weight:600;font-size:15px;line-height:1.3}
.bar{height:14px;border-radius:7px;background:var(--bg);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.cmp-eur{font-size:18px;font-weight:600;text-align:right}
.bar-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted);padding:6px 12px 8px}
.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px}
@media (max-width:620px){.cmp-row{grid-template-columns:34px minmax(0,1fr) 72px;gap:6px 10px}.cmp-row .bar{grid-column:2/-1;grid-row:2}}
.tag{font-size:12px;font-weight:500;padding:1px 8px;border-radius:99px;background:var(--good-soft);color:var(--good)}
.tag.opt{background:var(--warn-soft);color:var(--warn)}
.rate{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14.5px;color:var(--muted)}
.rate input{width:84px;min-height:44px;font:inherit;font-size:16px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
.rate input[aria-invalid="true"]{border-color:var(--bad)}
.rate .err{color:var(--bad);flex-basis:100%}

/* mapa */
figure{margin:0;display:flex;flex-direction:column;gap:12px}
figcaption{font-size:14.5px;color:var(--muted);max-width:72ch}
.scroll-x{overflow-x:auto;overscroll-behavior-x:contain}
.mapbox{background:var(--sea);border:1px solid var(--line);border-radius:16px}
.mapbox svg{display:block;width:100%;min-width:680px;height:auto}
.land{fill:var(--land);stroke:var(--coast);stroke-width:.9;stroke-linejoin:round}
.lake{fill:var(--sea);stroke:var(--coast);stroke-width:.8}
.rail{fill:none;stroke:var(--rail);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.relief{fill:none;stroke:var(--relief);stroke-width:1.3;stroke-linejoin:round;opacity:.85}
.seaname{fill:var(--muted);font-family:var(--body);font-style:italic;font-size:13.5px;letter-spacing:.04em}
.lbl{paint-order:stroke fill;stroke:var(--halo);stroke-width:4px;stroke-linejoin:round}
.lbl-city{font-family:var(--display);font-weight:700;font-size:15px;fill:var(--ink)}
.lbl-jp{font-family:var(--mincho);font-weight:600;font-size:11.5px;fill:var(--muted)}
.lbl-trip{font-family:var(--body);font-size:12.5px;fill:var(--muted)}
.lbl-air{font-family:var(--body);font-size:11.5px;fill:var(--ink);font-weight:600;letter-spacing:.04em}
.lbl-region{font-family:var(--body);font-style:italic;font-size:12px;fill:var(--muted)}
.nights{font-family:var(--body);font-size:11.5px;font-weight:700;fill:var(--on-accent)}
.seg{fill:none;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.seg.b{stroke-dasharray:9 6}
.seg.f{stroke-dasharray:1 8;stroke-width:3.8}
.spoke{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 4}
.air-link{stroke:var(--ink);stroke-width:1.1;stroke-dasharray:2 3}
.maplegend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted);align-items:center}
.maplegend svg{vertical-align:middle;margin-right:7px}
@media (prefers-reduced-motion: no-preference){
  .seg,.stop-dot{animation:appear .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}
  @keyframes appear{from{opacity:.2}to{opacity:1}}
}

/* calendario */
.calbox{padding:16px 16px 12px}
.cal{display:grid;grid-template-columns:repeat(23,minmax(30px,1fr));gap:3px;min-width:720px}
.cell{display:flex;flex-direction:column;align-items:center;padding:6px 0 7px;border-radius:7px;background:color-mix(in srgb,var(--rc) 17%,var(--surface));border-bottom:3px solid var(--rc);font-variant-numeric:tabular-nums}
.cell .w{font-size:11.5px;color:var(--muted)}
.cell .d{font-size:15px;font-weight:600}
.cell.we .w{color:var(--ink);font-weight:600}
.cell .m{font-size:11px;color:var(--muted);height:15px}
.fest{grid-row:2;margin-top:6px;border-radius:6px;font-size:12.5px;line-height:1.3;padding:5px 7px;white-space:nowrap;min-width:0}
.fest.in{background:var(--ink);color:var(--bg)}
.fest.out{border:1px dashed var(--muted);color:var(--muted)}
.fest.right{text-align:right}
.fest span{display:block;font-weight:600}
.fest small{font-size:11.5px;opacity:.85}
.reglegend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted);margin-top:12px}
.hint{display:none;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.hint{display:block}}

/* capítulos por región */
.chapters{display:flex;flex-direction:column;gap:16px}
.chap{display:grid;grid-template-columns:210px minmax(0,1fr);overflow:hidden}
.chap-side{background:color-mix(in srgb,var(--rc) 14%,var(--surface));padding:20px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line)}
.chap-side svg{width:56px;height:56px;color:var(--rc);flex:none}
.chap-side .rtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.chap-side h3{font-size:20px}
.chap-side .rjp{font-size:14px;color:var(--muted);letter-spacing:.2em}
.chap-side .rmeta{font-size:14px;color:var(--muted)}
.chap ol{list-style:none;margin:0;padding:6px 0}
.chap li{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:14px;padding:11px 20px;align-items:baseline;border-top:1px solid var(--line)}
.chap li:first-child{border-top:0}
.chap li.chg{background:var(--accent-soft)}
.chap .dt{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.chap .pl{min-width:0;font-weight:600}
.chap .pl small{display:block;color:var(--muted);font-size:14.5px;font-weight:400}
.chap .sl{font-size:13.5px;color:var(--muted);white-space:nowrap}
@media (max-width:640px){
  .chap{grid-template-columns:1fr}.chap-side{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);gap:14px}
  .chap-side svg{width:44px;height:44px}
  .chap li{grid-template-columns:64px minmax(0,1fr);padding-inline:16px}.chap .sl{grid-column:2}
}

/* costes */
.costs{padding:20px;display:flex;flex-direction:column;gap:14px}
.total-line{font-size:18px}
.total-line strong{font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums}
.stack{display:flex;height:30px;border-radius:8px;overflow:hidden}
.stack i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:600;color:var(--on-data);min-width:0;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.stack-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
details{border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--accent);min-height:44px;display:flex;align-items:center}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
caption{text-align:left;font-weight:600;padding:12px 12px 4px}
th,td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;font-size:13.5px;color:var(--muted);font-weight:600;white-space:nowrap}
td.r,th.r{text-align:right;white-space:nowrap}
td small{color:var(--muted);display:block;font-size:13.5px}
tr.grp td{font-size:13.5px;font-weight:600;color:var(--muted);background:var(--bg);padding-block:7px}
tr.tot td{font-weight:700;border-top:2px solid var(--ink)}
.tblcard{overflow:hidden}
.pill{display:inline-block;font-size:12.5px;font-weight:500;padding:2px 9px;border-radius:99px;white-space:nowrap}
.ok{background:var(--good-soft);color:var(--good)}
.hi{background:var(--bad-soft);color:var(--bad)}
.mid{background:var(--warn-soft);color:var(--warn)}

/* listas de lectura (ideas y festivales) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.rows h3 [lang="ja"]{font-size:13.5px;color:var(--muted);letter-spacing:.12em;margin-left:.6em;font-weight:600}
.rows p{grid-column:1;color:var(--muted);max-width:68ch}
.rows .delta{grid-column:2;grid-row:1/span 2;align-self:start;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.delta.up{color:var(--warn)} .delta.down{color:var(--good)} .delta.same{color:var(--muted)}
.fests>li{grid-template-columns:52px minmax(0,1fr) auto}
.fests svg{width:44px;height:44px;color:var(--accent);grid-row:1/span 3}
.fests h3,.fests .when,.fests p{grid-column:2}
.fests .when{font-size:14.5px;font-weight:600;color:var(--ink)}
.fests .pill{grid-column:3;grid-row:1}
@media (max-width:560px){.fests>li{grid-template-columns:44px minmax(0,1fr)}.fests svg{width:36px;height:36px}.fests .pill{grid-column:2;grid-row:auto;justify-self:start}}

.variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.variants{grid-template-columns:1fr}}
.variant{padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.variant .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.variant p{color:var(--muted)}
.variant button{all:unset;box-sizing:border-box;cursor:pointer;align-self:flex-start;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--accent);color:var(--accent);font-weight:600;display:inline-flex;align-items:center;transition:background-color .15s var(--ease-out)}
.variant button:hover{background:var(--accent-soft)}
.variant button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

ul.tips{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;max-width:70ch}
ol.qs{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:12px;max-width:70ch}
footer{border-top:1px solid var(--line);padding-block:32px 48px;font-size:14px;color:var(--muted)}
.src{display:flex;flex-direction:column;gap:6px}
.src h2{font-size:18px;color:var(--ink)}
.src ul{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.src li{break-inside:avoid;padding:2px 0}
@media (max-width:640px){.src ul{columns:1}}