/* ==========================================================================
   CREATICS · llegar.css — bloque «Cómo llegar» (partes/llegar.php).
   Mapa limpio por minutos: puntos del color de su franja sobre un plano tranquilo
   (río y dos autovías) y, debajo, la lista por franjas con el enlace de cada ruta.
   Requiere tokens + creatics.css. Prefijo .cs-ll-
   Dentro de los SVG, «px» son unidades del lienzo (2800 × 2240), no píxeles de pantalla,
   salvo en los trazos con vector-effect:non-scaling-stroke.
   Tres dibujos: ancho (desde 1024 px), medio (768–1023) y compacto (hasta 767).
   ========================================================================== */

/* ---------- Franjas: color de fondo (--_c) y de texto encima (--_on) ---------- */
.cs-ll{--ll-k:1}
.cs-ll-f1{--_c:var(--cs-pink);--_on:#fff}
.cs-ll-f2{--_c:var(--cs-blue);--_on:#fff}
.cs-ll-f3{--_c:var(--cs-yellow);--_on:var(--cs-ink)}

.cs-ll__lead{max-width:62ch}
.cs-ll__lema{font-family:var(--font-heading);font-weight:700;color:var(--cs-ink)}

/* ---------- Tarjeta del mapa ---------- */
.cs-ll-mapa{position:relative;background:#fff;border:var(--border-bold) solid var(--cs-ink);border-radius:var(--radius-card);box-shadow:var(--shadow-offset);overflow:hidden}
.cs-ll-svg{--k:1;display:block;width:100%;height:auto;font-family:var(--font-heading);user-select:none}
.cs-ll-svg--medio{--k:1.32}
.cs-ll-svg--medio,.cs-ll-svg--compacto,.cs-ll-mapa__ayuda{display:none}

/* Plano de fondo: suave, para que manden los puntos */
.cs-ll-rio path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cs-ll-rio__banda{stroke:#d8f5f1;stroke-width:16px}
.cs-ll-rio__eje{stroke:#a9e6de;stroke-width:3px}
.cs-ll-rio__nombre{font-size:calc(33px * var(--k));font-weight:500;font-style:italic;fill:var(--turquoise-700);paint-order:stroke;stroke:#fff;stroke-width:calc(10px * var(--k));stroke-linejoin:round}
/* Vías de referencia (Av. de Salamanca, Carretera de Madrid, Paseo de Zorrilla, Av. del Real
   Valladolid): siluetas suaves, por debajo de las autovías; el nombre va sobre la línea */
.cs-ll-ref{fill:none;stroke:#e3e6ee;stroke-width:9px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cs-ll-svg--compacto .cs-ll-ref{stroke-width:6px}
.cs-ll-ref__nombre{font-size:calc(32px * var(--k));font-weight:600;letter-spacing:.02em;fill:var(--neutral-500);paint-order:stroke;stroke:#fff;stroke-width:calc(9px * var(--k));stroke-linejoin:round;dominant-baseline:central}
.cs-ll-via{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cs-ll-via--casco{stroke:var(--cs-ink);stroke-width:8px}
.cs-ll-via--autovia{stroke:#fff;stroke-width:5px}
.cs-ll-via--acceso{stroke:var(--neutral-300);stroke-width:2.5px}
.cs-ll-escudo rect{fill:var(--cs-blue);stroke:var(--cs-ink);stroke-width:2px;vector-effect:non-scaling-stroke}
.cs-ll-escudo text{font-family:var(--font-mono);font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central}
.cs-ll-corte path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cs-ll-corte__fondo{stroke:#fff;stroke-width:7px}
.cs-ll-corte__raya{stroke:var(--cs-ink);stroke-width:2px}
.cs-ll-norte path{fill:var(--cs-ink)}
.cs-ll-norte text{font-family:var(--font-mono);font-weight:700;fill:var(--cs-ink);text-anchor:middle}
.cs-ll-guia{stroke:var(--cs-ink);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.cs-ll-guia__punto{fill:var(--_c);stroke:var(--cs-ink);stroke-width:7px}

/* Escala de chapas, chincheta y rótulos del compacto (en pantallas algo mayores, más pequeños que el plano) */
.cs-ll-k{transform:scale(var(--ll-k))}

/* Puntos y etiquetas (ancho y medio) */
.cs-ll-dot{fill:var(--_c);stroke:var(--cs-ink);stroke-width:calc(5px * var(--k))}
.cs-ll-lab__nombre{font-size:calc(36px * var(--k));font-weight:700;fill:var(--cs-ink);paint-order:stroke;stroke:#fff;stroke-width:calc(11px * var(--k));stroke-linejoin:round}
.cs-ll-lab__pill{fill:var(--_c);stroke:var(--cs-ink);stroke-width:calc(3.5px * var(--k))}
.cs-ll-lab__min{font-size:calc(32px * var(--k));font-weight:400;fill:var(--_on);dominant-baseline:central}
.cs-ll-lab__min tspan{font-weight:700}

/* Chapas de minutos (compacto) */
.cs-ll-chapa circle{fill:var(--_c);stroke:var(--cs-ink);stroke-width:11px}
.cs-ll-chapa text{font-weight:700;fill:var(--_on);text-anchor:middle;dominant-baseline:central}
.cs-ll-chapa .cs-ll-chapa__nombre{fill:var(--cs-ink);dominant-baseline:auto;paint-order:stroke;stroke:#fff;stroke-width:24px;stroke-linejoin:round}

/* Destino: chincheta rosa y caja azul */
.cs-ll-pin{fill:var(--cs-pink);stroke:var(--cs-ink);stroke-width:calc(5.5px * var(--k));stroke-linejoin:round}
.cs-ll-pin__sombra,.cs-ll-caja__sombra{fill:var(--cs-ink)}
.cs-ll-pin__ojo{fill:#fff;stroke:var(--cs-ink);stroke-width:calc(4px * var(--k))}
.cs-ll-caja{fill:var(--cs-blue);stroke:var(--cs-ink);stroke-width:calc(5.5px * var(--k))}
.cs-ll-caja__pico{fill:var(--cs-ink)}
.cs-ll-caja__nombre{font-family:var(--font-display);font-size:calc(50px * var(--k));fill:#fff;letter-spacing:.04em}
.cs-ll-caja__sub{font-family:var(--font-body);font-size:calc(32px * var(--k));font-weight:700;fill:var(--cs-mint)}
.cs-ll-svg--compacto .cs-ll-caja,.cs-ll-svg--compacto .cs-ll-pin{stroke-width:11px}
.cs-ll-svg--compacto .cs-ll-pin__ojo{stroke-width:9px}
.cs-ll-svg--compacto .cs-ll-caja__nombre{font-family:var(--font-heading);font-weight:700;letter-spacing:.03em;dominant-baseline:central}
.cs-ll-svg--compacto .cs-ll-via--casco{stroke-width:6px}
.cs-ll-svg--compacto .cs-ll-via--autovia{stroke-width:3.5px}
.cs-ll-svg--compacto .cs-ll-via--acceso{stroke-width:2px}
.cs-ll-svg--compacto .cs-ll-rio__banda{stroke-width:10px}

/* ---------- Leyenda: en el ancho, sobre el hueco del noroeste; si no, debajo del mapa ---------- */
.cs-ll-leyenda{position:absolute;top:22px;left:24px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:250px}
.cs-ll-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 5px 8px;border-radius:var(--radius-pill);background:#fff;border:2px solid var(--cs-ink);font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;line-height:1.2;color:var(--cs-ink);white-space:nowrap}
.cs-ll-chip::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--_c);border:2px solid var(--cs-ink)}
.cs-ll-nota__via{stroke:var(--neutral-400);stroke-width:4;fill:none;stroke-linecap:round}
.cs-ll-nota__corte{stroke:var(--cs-ink);stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- Lista por franjas (las fichas) ---------- */
.cs-ll-franjas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.cs-ll-franja{background:#fff;border:var(--border-bold) solid var(--cs-ink);border-radius:var(--radius-card);box-shadow:3px 3px 0 0 var(--cs-ink);overflow:hidden}
.cs-ll-franja__titulo{display:flex;align-items:center;gap:10px;margin:0;padding:11px 18px;background:var(--_c);color:var(--_on);border-bottom:var(--border-bold) solid var(--cs-ink);font-family:var(--font-heading);font-size:var(--text-md);font-weight:700;line-height:1.2}
.cs-ll-barras{flex:none}
.cs-ll-barras rect{fill:none;stroke:var(--_on);stroke-width:1.4}
.cs-ll-barras rect.is-on{fill:var(--_on)}
.cs-ll-lista{margin:0;padding:2px 0;list-style:none}
.cs-ll-lista li+li{border-top:1px solid var(--color-border)}
.cs-ll-lugar{display:flex;align-items:center;gap:6px 10px;min-height:44px;padding:6px 16px 6px 18px;color:var(--cs-ink);text-decoration:none}
.cs-ll-lugar__nombre{flex:1 1 auto;min-width:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-base);line-height:1.25}
.cs-ll-lugar__sub{display:block;font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);color:var(--color-ink-soft)}
/* La pastilla de la lista, en blanco: el color ya lo lleva la cabecera y un punto dentro */
.cs-ll-pill{flex:none;display:inline-block;padding:2px 10px 3px 8px;border-radius:var(--radius-pill);background:#fff;color:var(--cs-ink);border:1.5px solid var(--cs-ink);font-family:var(--font-heading);font-size:var(--text-sm);font-variant-numeric:tabular-nums;line-height:1.35;white-space:nowrap}
.cs-ll-pill::before{content:"";display:inline-block;vertical-align:-1px;margin-right:6px;width:10px;height:10px;border-radius:50%;background:var(--_c);border:1.5px solid var(--cs-ink)}
.cs-ll-pill b{font-weight:700}

/* ---------- Lista plegada (versión discreta: /academia/) ---------- */
.cs-ll-desplegable{display:block}
.cs-ll-desplegable[open]>.cs-ll-franjas{margin-top:20px}
.cs-ll-desplegable__boton{width:fit-content;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:var(--radius-pill);background:#fff;border:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);color:var(--cs-ink);cursor:pointer;list-style:none}
.cs-ll-desplegable__boton::-webkit-details-marker{display:none}
.cs-ll-desplegable__boton:hover{background:var(--neutral-100)}
.cs-ll-desplegable__boton:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.cs-ll-desplegable__boton .cs-i{width:18px;height:18px;transition:transform var(--dur) var(--ease-out)}
.cs-ll-desplegable[open] .cs-ll-desplegable__boton .cs-i{transform:rotate(180deg)}

/* ---------- Nota y enlace a Google Maps ---------- */
.cs-ll-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.cs-ll-notas{flex:1 1 420px;display:flex;flex-direction:column;gap:6px}
.cs-ll-nota{display:flex;align-items:baseline;gap:8px;margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-ll-nota>span{flex:none;font-weight:700;color:var(--cs-ink)}
.cs-ll-nota--corte{align-items:center}
.cs-ll-nota svg{flex:none}
.cs-ll-maps{flex:none}
.cs-ll-maps .cs-i{width:20px;height:20px}

/* ---------- Tableta y móvil: la leyenda va debajo del mapa ---------- */
@media (max-width:1023px){
	.cs-ll-svg--ancho{display:none}
	.cs-ll-svg--medio{display:block}
	.cs-ll-leyenda{position:static;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:14px 16px 16px;border-top:2px solid var(--cs-ink);background:var(--neutral-50)}
}
/* Tableta y portátil pequeño: dos columnas; la franja larga (la tercera) a la derecha, las otras
   dos apiladas (con tres columnas, de 1024 a 1179 px, los nombres se partían en varias líneas) */
@media (min-width:641px) and (max-width:1179px){
	.cs-ll-franjas{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
	.cs-ll-franjas>.cs-ll-f3:last-child{grid-column:2;grid-row:1 / span 2}
}
/* Móvil: el plano compacto con chapas de minutos, una línea que lo explica y el destino en la leyenda */
@media (max-width:767px){
	.cs-ll-svg--medio{display:none}
	.cs-ll-svg--compacto{display:block}
	.cs-ll-mapa__ayuda{display:block;margin:0;padding:10px 16px;border-bottom:2px solid var(--cs-ink);background:var(--neutral-50);font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;line-height:1.3;color:var(--cs-ink)}
	.cs-ll-chip{font-size:var(--text-xs)}
}
@media (min-width:481px) and (max-width:600px){.cs-ll{--ll-k:.85}}
@media (min-width:601px) and (max-width:767px){.cs-ll{--ll-k:.75}}
@media (max-width:640px){
	.cs-ll-franjas{grid-template-columns:minmax(0,1fr);gap:16px}
	.cs-ll-mapa{box-shadow:4px 4px 0 var(--cs-ink)}
	.cs-ll-franja{box-shadow:none}
	/* Cada sitio, una ficha pequeña de dos en dos: la misma información en la mitad de alto */
	.cs-ll-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
	.cs-ll-lista li+li{border-top:0}
	.cs-ll-lista li{display:flex;border-top:1px solid var(--color-border)}
	.cs-ll-lista li:nth-child(-n+2){border-top:0}
	.cs-ll-lista li:nth-child(odd){border-right:1px solid var(--color-border)}
	.cs-ll-lugar{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:0;padding:9px 10px 10px 12px}
	.cs-ll-lugar__nombre{flex:none;font-size:var(--text-sm);line-height:1.2}
	.cs-ll-lugar__sub{font-size:var(--text-xs)}
	.cs-ll-pill{font-size:var(--text-xs);padding:1px 8px 2px 6px}
	.cs-ll-pie{flex-direction:column;align-items:stretch}
	.cs-ll-notas{flex-basis:auto}
	.cs-ll-maps{width:100%;padding-inline:16px;font-size:var(--text-base);white-space:normal;text-align:center;line-height:1.25}
}