/* Posada Tordillo · Cómo llegar
   ¿Desde dónde venís? (rutas reales en el mapa), el último tramo con el mapa de la cuadra, lo que vas a
   ver al llegar y las distancias en grande. */

.llegar__cabecera { display: grid; gap: 22px; align-items: end; }
.llegar__datos { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 1000px) { .llegar__cabecera { grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 96px); } }

/* ---------- ¿Desde dónde venís? ---------- */
.origenes { background: var(--cal) var(--grano); }
.origenes__grilla { display: grid; gap: clamp(28px, 4vw, 56px); }
.origenes__texto { display: grid; gap: 18px; align-content: start; }
.origenes__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.origen { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); font: 500 .9375rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .16s ease-out; }
.origen:hover { background: var(--cal-2); }
.origen:active { transform: scale(.95); }
.origen[aria-pressed='true'] { background: var(--tinta); color: var(--cal); }
.origenes__dato { padding: 22px 0 6px; border-top: 1px solid var(--linea); }
.origenes__desde { font-size: .9375rem; color: var(--tinta-2); }
.origenes__desde b { color: var(--tinta); }
.origenes__cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; font-family: var(--serif); }
.origenes__km { font-size: clamp(4rem, 9vw, 7rem); line-height: .9; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.origenes__min { font-size: clamp(1.5rem, 2.4vw, 2rem); font-style: italic; color: var(--hoja-osc); }
.origenes__nota { font-size: .875rem; color: var(--tinta-3); max-width: 46ch; }
.origenes__figura { margin: 0; display: grid; gap: 8px; justify-items: center; }
.origenes__mapa { display: block; width: 100%; height: auto; max-height: calc(var(--vh) * 80); }
.origenes__figura figcaption { font-size: .75rem; color: var(--tinta-3); }
.or-tierra { fill: var(--cal-2); }
.or-agua, .or-laguna { fill: #d9dfc9; }
.or-orilla { fill: none; stroke: var(--tinta-3); stroke-width: .8; opacity: .7; }
.or-laguna { stroke: var(--hoja-osc); stroke-width: .8; }
.or-rio { font: italic 28px var(--serif); fill: var(--tinta-2); }
.or-ciudad, .or-autovia { font: 500 14px var(--sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--tinta-3); }
.or-ruta { fill: none; stroke: var(--tinta-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .3s; }
.origenes:not(.armado) .or-ruta { stroke: var(--teja); stroke-width: 2; opacity: .8; }
.or-ruta.elegida { stroke: var(--teja); stroke-width: 3.6; opacity: 1; }
.or-ruta.dibuja { stroke-dasharray: var(--largo); animation: or-dibuja 1.5s var(--curva) both; }
@keyframes or-dibuja { from { stroke-dashoffset: var(--largo); } to { stroke-dashoffset: 0; } }
.or-punto circle { fill: var(--cal); stroke: var(--tinta); stroke-width: 1.6; transition: fill .2s; }
.or-punto text { font: 500 18px var(--sans); fill: var(--tinta-2); }
.or-punto.elegido circle { fill: var(--teja); stroke: var(--teja); }
.or-punto.elegido text { font-weight: 600; fill: var(--tinta); }
.or-destino circle { fill: var(--hoja-osc); }
.or-destino .or-destino__halo { fill: var(--hoja); opacity: .35; transform-box: fill-box; transform-origin: center; animation: or-pulso 2.2s ease-out infinite; }
.or-destino text { font: italic 600 30px var(--serif); fill: var(--hoja-hondo); }
@keyframes or-pulso { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.6); opacity: 0; } }
@media (min-width: 900px) { .origenes__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

/* ---------- El último tramo ---------- */
.tramo { background: var(--cal-2) var(--grano); }
.tramo__grilla { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.tramo__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; border-top: 1px solid var(--linea); }
.tramo__pasos li { counter-increment: paso; display: grid; grid-template-columns: 52px 1fr; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.tramo__pasos li::before { content: counter(paso); grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--teja); color: var(--cal); font: 600 .9375rem/1 var(--sans); }
.tramo__pasos h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.tramo__pasos p { color: var(--tinta-2); }
.tramo__nota { margin-top: 14px; font-size: .875rem; color: var(--tinta-3); }
.tramo__mapa { position: relative; margin: 0; padding: clamp(18px, 3vw, 36px); background: #fffdf8; box-shadow: 0 1px 2px rgba(59, 56, 37, .1), 0 30px 60px -36px rgba(59, 56, 37, .45); }
.tramo__mapa .mapa-cuadra { display: block; width: 100%; height: auto; }
.tramo__mapa figcaption { margin-top: 12px; font-size: .75rem; color: var(--tinta-3); }
.tramo__una { display: block; margin-bottom: 4px; font: 700 1.8rem/1 var(--mano); color: var(--teja); rotate: -3deg; }
.js .tramo__mapa .mc-camino { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--curva) .6s; }
.js .tramo__mapa .mc-meta { opacity: 0; transition: opacity .4s 2s; }
.js .tramo__mapa.visto .mc-camino { stroke-dashoffset: 0; }
.js .tramo__mapa.visto .mc-meta { opacity: 1; }
@media (min-width: 900px) { .tramo__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Lo que vas a ver ---------- */
.ver { background: var(--cal) var(--grano); }
.ver__grilla { display: grid; gap: clamp(10px, 1.4vw, 18px); grid-template-columns: 2fr 1fr 1fr; }
.ver__foto { margin: 0; display: grid; gap: 10px; align-content: start; }
.ver__foto a { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cal-3); transition: transform .16s ease-out; }
.ver__foto:first-child a { aspect-ratio: auto; height: 100%; min-height: 100%; }
.ver__foto:first-child { grid-template-rows: 1fr auto; }
.ver__foto a:active { transform: scale(.985); }
.ver__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva-salida); }
.ver__foto a:hover img { transform: scale(1.05); }
.ver__foto figcaption { display: flex; gap: 10px; align-items: center; color: var(--tinta-2); }
.ver__foto figcaption span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--teja); color: var(--cal); font: 600 .8125rem/1 var(--sans); }
@media (max-width: 760px) {
  .ver__grilla { grid-template-columns: 1fr 1fr; }
  .ver__foto:first-child { grid-column: span 2; }
  .ver__foto:first-child a { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* ---------- Distancias ---------- */
.distancias { background: var(--monte-2) var(--grano); color: var(--cal); padding-block: clamp(48px, 7vw, 96px); }
.distancias__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.distancias__lista li { display: grid; gap: 10px; padding: 8px clamp(14px, 2.4vw, 36px); }
.distancias__lista li + li { border-left: 1px solid var(--linea-clara); }
.distancias__lista b { font: 500 clamp(4rem, 10vw, 9rem)/.8 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.distancias__lista small { font-size: .26em; letter-spacing: 0; margin-left: .12em; color: #d6d6a6; }
.distancias__lista span { color: rgba(254, 251, 246, .85); }
@media (max-width: 640px) {
  .distancias__lista { grid-template-columns: 1fr; }
  .distancias__lista li + li { border-left: 0; border-top: 1px solid var(--linea-clara); padding-top: 18px; }
  .distancias__lista li { padding-inline: 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; }
}