/* La hoja de estilo del sitio. Se escribe a mano y el generador la copia tal cual.
 *
 * Rediseño del día 62b. Lo que había era de una columna, con el menú en una línea de texto arriba
 * y el tema siguiendo al sistema en silencio, sin forma de cambiarlo. Lo que hay ahora:
 *
 *  - **Dos columnas** con menú lateral pegajoso. El bloque del medio —los vecinos de la misma
 *    región, las otras rutas, las otras novedades— no es decoración: desde una ficha solo se podía
 *    volver atrás, y repartir enlaces internos es justamente lo que les falta a las páginas que
 *    Google tiene en «descubierta sin indexar».
 *  - **Botón de tema**, con el sistema como punto de partida y la elección recordada.
 *  - **Medida de línea con techo** (760px). Con el ancho anterior, en un monitor grande los
 *    párrafos salían en líneas de 180 caracteres.
 *  - Titulares en serif y cuerpo en sans: la mezcla distingue el texto escrito del dato.
 *
 * Las dos paletas se retocaron a la vez: el oscuro era azulado y el claro, gris. Ahora el claro
 * tira a papel y el acento baja de tono en claro (#d93a26) para que no vibre sobre blanco.
 */
:root{
  --bg:#0f1117; --bg-2:#151824; --panel:#181b28; --panel-2:#1e2232;
  --ink:#f2f1ec; --ink-2:#a8acc0; --ink-3:#6f7489;
  --line:#262b3b; --line-2:#323850;
  --accent:#ff5b47; --accent-ink:#fff; --accent-soft:rgba(255,91,71,.14); --accent-line:rgba(255,91,71,.35);
  --radio:14px; --radio-s:10px;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  /* 300 y no 264 desde el día 66g, por dos cosas que se suman: el lateral pasó a llevar su propio
     padding horizontal (antes se lo daba .layout), y la sección activa va en negrita, que ensancha
     el texto. Con 264 «Planificador de rutas por Japón» se partía en dos líneas justo cuando era la
     sección activa, que es cuando más se mira. Medido, no estimado. */
  --lateral:300px;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Día 66g. La maqueta era una caja centrada de 1360px: en un monitor ancho el menú flotaba en
     mitad de la pantalla y a la derecha quedaba un hueco muerto enorme. Ahora el menú va pegado al
     borde izquierdo y el contenido ocupa el 80% de lo que queda, con un 10% de margen a cada lado
     (--sangria). Lo que NO se estira es la prosa: los párrafos y las listas siguen con una medida
     de lectura (--medida), que es la decisión del día 62b y sigue siendo buena —en 1.300px una
     línea pasa de 150 caracteres—. Las rejillas de datos, las tarjetas y las pastillas sí ocupan
     la franja entera, que es lo que se pidió: aprovechar la pantalla sin volver a los tochos. */
  --sangria:10%;
  --medida:48rem;
}
:root[data-theme="light"]{
  --bg:#fbfaf8; --bg-2:#f3f2ee; --panel:#fff; --panel-2:#f7f6f3;
  --ink:#15161a; --ink-2:#5e6470; --ink-3:#8b909c;
  --line:#e7e5e0; --line-2:#d8d6d0;
  --accent:#d93a26; --accent-soft:#fdeae7; --accent-line:rgba(217,58,38,.3);
  --sombra:0 1px 2px rgba(20,20,30,.05), 0 8px 24px -16px rgba(20,20,30,.3);
}
/* El tema usa la MISMA convención que la aplicación —atributo `data-theme="light"` en <html> y
   clave `japon_tema_pref` en localStorage— y no una propia. El día 62b el sitio estrenó `data-tema`
   con «claro»/«oscuro» y la app llevaba desde agosto con `data-theme="light"`: dos interruptores
   que no se hablaban, así que elegir claro en una ficha y volver al planificador te devolvía al
   oscuro. Era exactamente la inconsistencia de la que se quejaba el usuario. Oscuro es el valor por
   defecto y no lleva atributo, igual que en la app. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
main a:not(.boton):not(.chip){color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent-line);text-underline-offset:3px;text-decoration-thickness:1px}
main a:not(.boton):not(.chip):hover{text-decoration-color:var(--accent)}

/* ---- barra superior ------------------------------------------------------ */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.top .fila{display:flex;align-items:center;gap:14px;height:58px;padding:0 20px}
.marca{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;display:flex;align-items:center;gap:9px}
.marca .punto{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.top .crece{flex:1}
.icono{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.icono:hover{border-color:var(--line-2);color:var(--ink)}
.icono svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.idioma{font-size:.8rem;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.idioma:hover{color:var(--ink);border-color:var(--line-2)}
#abrir-menu{display:none}
:root[data-theme="light"] .solo-oscuro{display:none}
:root:not([data-theme="light"]) .solo-claro{display:none}

/* ---- maqueta de dos columnas --------------------------------------------- */
/* Sin `max-width` ni `margin:auto`: la rejilla ocupa la ventana entera y la separación entre el
   menú y el texto la pone la sangría de `main`, no un `gap`. Así el 10% se mide sobre el espacio
   que queda a la derecha del menú, que es lo que se pidió, y no sobre una caja centrada. */
.layout{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr)}
/* El padding horizontal lo lleva ahora el propio lateral (antes se lo daba .layout): 9+11 deja el
   texto de los enlaces a 20px del borde, alineado con la marca de la barra de arriba. */
.lateral{position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow-y:auto;
  padding:26px 9px 40px;scrollbar-width:thin}
.lateral h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  margin:22px 0 9px;font-weight:600}
.lateral h4:first-child{margin-top:0}
.lateral a{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:9px;
  color:var(--ink-2);font-size:.9rem;line-height:1.35}
.lateral a:hover{background:var(--panel);color:var(--ink)}
.lateral a.aqui{background:var(--accent-soft);color:var(--accent);font-weight:600}
.lateral a .n{margin-left:auto;font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lateral svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lateral .sep{height:1px;background:var(--line);margin:20px 0}

/* ---- contenido ----------------------------------------------------------- */
main{padding:30px var(--sangria) 70px;min-width:0}
/* La medida de lectura ya no la pone `main` (que ahora ocupa toda la franja) sino el texto que de
   verdad se lee seguido. Todo lo demás —.datos, .hub-grid, .enlaces, .chip, details— se queda a
   ancho completo a propósito. */
main p,main li,main .entradilla,main .aviso,main .avisos{max-width:var(--medida)}
.migas{font-size:.8rem;color:var(--ink-3);margin-bottom:20px;display:flex;flex-wrap:wrap;gap:6px}
.migas a{color:var(--ink-3)}
.migas a:hover{color:var(--ink-2)}
h1{font:600 2.55rem/1.1 var(--serif);letter-spacing:-.025em;margin:0 0 10px}
.region-linea{color:var(--ink-3);font-size:.85rem;margin:0 0 20px;text-transform:uppercase;letter-spacing:.07em}
.entradilla{font-size:1.16rem;line-height:1.62;color:var(--ink);margin:0 0 30px}
main h2{font:600 1.32rem/1.3 var(--serif);letter-spacing:-.01em;margin:42px 0 14px;
  padding-top:18px;border-top:1px solid var(--line)}
main h3{font-size:.98rem;font-weight:650;margin:26px 0 8px}
p{margin:0 0 14px}

.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 22px}
.dato{background:var(--panel);border:1px solid var(--line);border-radius:var(--radio-s);padding:12px 14px}
.dato span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:5px}
.dato b{font-size:1.02rem;font-weight:650}

.chip{display:inline-flex;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font-size:.78rem;margin:0 5px 6px 0;color:var(--ink-2)}
a.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.fuerte{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}

.avisos,.aviso{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radio-s);padding:13px 16px;margin:0 0 20px;font-size:.92rem;color:var(--ink-2)}
.acts{list-style:none;padding:0;margin:0}
.acts li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;
  align-items:baseline;flex-wrap:wrap}
.acts li:last-child{border-bottom:0}
.acts b{font-weight:600}
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radio-s);
  padding:13px 16px;margin:0 0 9px}
details summary{cursor:pointer;font-weight:600;font-size:.95rem;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--accent);font-weight:700;margin-right:9px}
details[open] summary::before{content:"\2212"}
details p{margin:11px 0 0;color:var(--ink-2);font-size:.93rem}
.cta{background:linear-gradient(135deg,var(--accent-soft),transparent 70%);
  border:1px solid var(--accent-line);border-radius:var(--radio);padding:22px 24px;margin:40px 0 0}
.cta h2{margin:0 0 8px;padding:0;border:0;font-size:1.2rem}
.boton{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:650;
  border-radius:999px;padding:11px 22px;font-size:.93rem;margin-top:6px}
.boton:hover{filter:brightness(1.07)}
footer{border-top:1px solid var(--line);margin-top:50px;padding:28px 0 46px;
  color:var(--ink-3);font-size:.85rem}
/* El pie repite la rejilla con la primera celda vacía para quedar alineado con el contenido; como
   la sangría la lleva `main` y aquí no hay `main`, se le da a la celda del texto. */
footer .layout > div + div{padding:0 var(--sangria)}

@media (max-width:980px){
  /* En móvil no hay columna de menú ni espacio para una sangría del 10%: la rejilla vuelve a ser
     una sola columna con 18px a los lados, como antes. */
  .layout{grid-template-columns:1fr;gap:0;padding:0 18px}
  main{padding-left:0;padding-right:0}
  footer .layout > div + div{padding:0}
  #abrir-menu{display:grid}
  .lateral{position:fixed;inset:58px auto 0 0;width:min(84vw,300px);height:calc(100vh - 58px);
    background:var(--bg-2);border-right:1px solid var(--line);padding:22px 14px 40px;
    transform:translateX(-102%);transition:transform .22s ease;z-index:60}
  body.menu-abierto .lateral{transform:none;box-shadow:var(--sombra)}
  main{padding-top:24px}
  h1{font-size:2.05rem}
}

/* El enlace de salto: invisible hasta que se le da el foco con el tabulador. Con un menú lateral de
   veinticinco enlaces delante del contenido, quien navega con teclado o lector de pantalla los
   tendría que recorrer todos en cada página. */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:0 0 var(--radio-s) 0;font-weight:600}
.saltar:focus{left:0}
:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* `main.ancho` marcaba los índices de tarjetas (los 170 destinos, las 10 rutas) para saltarse la
   medida de 760px que llevaba `main`. Desde el día 66g esa medida no la lleva `main` sino el texto
   seguido, y las rejillas ya van a ancho completo en todas las páginas, así que la clase no quita
   nada. Se mantiene la regla —y la clase en el generador— porque `.hub-grid` y los índices siguen
   queriendo decir «esta página es un índice, no un texto», y porque borrarla obligaría a tocar diez
   plantillas para no ganar nada. */
main.ancho{max-width:none}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px;margin:0 0 26px}
.hub-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radio-s);
  padding:13px 15px;transition:border-color .15s,transform .15s}
.hub-card:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.hub-region h2{margin-top:34px}

/* --- las clases que el generador emite y que el rediseño del 62b se dejó -----------------------
 *
 * Al reescribir la hoja entera se perdieron doce reglas que las plantillas siguen usando, y dos de
 * ellas se veían a simple vista: `.enlaces` junta sus <a> SIN separador —el `.join('')` del
 * generador confía en que el CSS los separe— así que «Se encadena bien con» salía literalmente
 * como «KobeOkayamaOsakaTottori». Se comprueba ahora con build/clases_sin_regla.js, que cruza las
 * clases del HTML generado con los selectores de esta hoja.
 */

/* Listas de enlaces: cada uno es una pastilla, que es lo que de verdad los separa. */
.enlaces{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.enlaces a{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.87rem;color:var(--ink-2);text-decoration:none;line-height:1.3}
.enlaces a:hover{border-color:var(--accent-line);color:var(--accent);text-decoration:none}

/* Listas de actividades. */
.acts.cal li{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.act-cab{display:flex;flex-wrap:wrap;gap:4px 9px;align-items:baseline;margin-bottom:3px;width:100%}
.act-nombre{font-weight:600}
.act-dur{font-size:.76rem;color:var(--ink-3);white-space:nowrap}

/* La narrativa de una parada: mismo cuerpo de letra que el resto, un poco más de aire y un filete
   a la izquierda que agrupa los párrafos de la misma parada sin gritar. */
.ruta-narrativa{line-height:1.74;margin:12px 0;padding-left:16px;border-left:2px solid var(--line)}
.ruta-claves{margin-top:16px}

.faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin:0}
.faq details:last-child{border-bottom:0}
.faq summary{padding:13px 0;font-weight:600;font-size:.95rem}
.faq details p{margin:0 0 14px 1.2em;color:var(--ink-2)}

.hub-card .rank{display:inline-block;min-width:1.5em;color:var(--ink-3);font-weight:600;
  font-variant-numeric:tabular-nums}

.itin-variante{border-top:1px solid var(--line);margin-top:34px;padding-top:10px}
.itin-variante h2{margin-top:0;padding-top:0;border-top:0;margin-bottom:4px}
.itin-resumen{color:var(--ink-3);font-size:.88rem;margin:6px 0 12px}
.itin-abrir{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:650;
  border-radius:999px;padding:10px 20px;font-size:.9rem;text-decoration:none}
.itin-abrir:hover{filter:brightness(1.07);color:var(--accent-ink);text-decoration:none}