/* Cómo llegar · Chícharo */

.llegar__cabecera { display: grid; gap: 28px; }
.llegar__datos { display: grid; gap: 22px; align-content: end; }
.llegar__cabecera h1 { font-size: clamp(2.75rem, 8vw, 5.75rem); max-width: 15ch; }
@media (min-width: 960px) { .llegar__cabecera { grid-template-columns: 1.3fr .7fr; align-items: end; gap: 64px; } }

/* ---------- Mapa ----------
   --k es el zoom actual: los trazos y rótulos se dividen por él para no engordar al acercarse. */
.mapa-camino { --k: 1; width: 100%; height: auto; }
.mc-fondo { fill: #ebe5d6; }
.mc-agua path { fill: #b9cbc3; }
.mc-calle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mc-calle--menor { stroke: #f7f4ec; stroke-width: calc(2.5px / var(--k)); }
.mc-calle--mayor { stroke: #fff; stroke-width: calc(6px / var(--k)); }
.mc-calle--autovia { stroke: #d6c7a6; stroke-width: calc(11px / var(--k)); }
.mc-rotulo { font: 500 calc(15px / var(--k)) var(--sans); letter-spacing: .14em; fill: #6c705a; transition: opacity .4s; }
.mc-rotulo--laguna { font: italic calc(46px / var(--k)) var(--serif); letter-spacing: 0; fill: #5b7a6f; }
.de-cerca .mc-rotulo--zona, .de-cerca .mc-rotulo--laguna { opacity: 0; }
.mc-ruta-base { fill: none; stroke: var(--oliva); stroke-opacity: .28; stroke-width: calc(5px / var(--k)); stroke-dasharray: calc(2px / var(--k)) calc(11px / var(--k)); stroke-linecap: round; }
.mc-ruta { fill: none; stroke: var(--oliva); stroke-width: calc(8px / var(--k)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 0; }
.mc-marca circle { r: calc(19px / var(--k)); fill: var(--oliva); stroke: var(--papel); stroke-width: calc(3px / var(--k)); transition: fill .3s; }
.mc-marca text { font: 600 calc(19px / var(--k)) var(--sans); fill: var(--crema); text-anchor: middle; }
.mc-pin__halo { r: calc(42px / var(--k)); fill: var(--arveja); opacity: .28; transform-box: fill-box; transform-origin: center; animation: latido 2.4s ease-out infinite; }
.mc-pin__punto { r: calc(13px / var(--k)); fill: var(--arveja); stroke: #fff; stroke-width: calc(4px / var(--k)); }
.mc-pin__nombre { font: italic calc(40px / var(--k)) var(--serif); fill: var(--oliva-osc); paint-order: stroke; stroke: #ebe5d6; stroke-width: calc(8px / var(--k)); stroke-linejoin: round; }
@keyframes latido { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

/* Con animación: marcas apagadas hasta que la ruta llega a ellas */
.camino.animado .mc-ruta { stroke-dashoffset: 1000; }
.camino.animado .mc-marca circle { fill: var(--papel); stroke: var(--oliva); stroke-opacity: .45; }
.camino.animado .mc-marca text { fill: var(--oliva); opacity: .6; }
.camino.animado .mc-marca.hecha circle { fill: var(--oliva); stroke: var(--papel); stroke-opacity: 1; }
.camino.animado .mc-marca.hecha text { fill: var(--crema); opacity: 1; }
.camino.animado .mc-marca.activa circle { fill: var(--arveja); }
.camino.animado .mc-marca.activa text { fill: var(--oliva-osc); }

/* ---------- Escena del camino ---------- */
.camino { position: relative; background: #ebe5d6; }
.camino__escena { display: grid; }
.camino__mapa { margin: 0; position: relative; }
.camino__mapa figcaption { position: absolute; right: 10px; bottom: 6px; font-size: .6875rem; color: rgba(34, 37, 26, .55); }
.camino__pasos { list-style: none; display: grid; gap: 12px; padding: 28px var(--gutter) 48px; background: var(--papel); }
.camino__paso { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 18px; border-radius: var(--radio); background: var(--blanco); box-shadow: 0 1px 0 var(--linea); }
.camino__num { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--oliva); color: var(--crema); font-weight: 600; }
.camino__paso h3 { font-size: 1.75rem; line-height: 1.1; }
.camino__paso p { color: var(--tinta-2); font-size: .9688rem; }
.camino__barra { display: none; }

.camino.animado { height: calc(var(--vh) * 460); }
.camino.animado .camino__escena { position: sticky; top: var(--alto-enc); height: calc(var(--vh) * 100 - var(--alto-enc)); overflow: hidden; }
.camino.animado .camino__barra { display: block; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(58, 63, 40, .12); z-index: 3; }
.camino__barra span { display: block; height: 100%; background: var(--oliva); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Celular: el mapa arriba y una tarjeta con el paso actual abajo */
@media (max-width: 959px) {
  .camino.animado .camino__escena { grid-template-rows: 1fr auto; }
  .camino.animado .camino__mapa { min-height: 0; display: grid; place-items: center; overflow: hidden; }
  .camino.animado .mapa-camino { width: 100%; height: auto; max-height: 100%; }
  .camino.animado .camino__pasos { position: relative; display: grid; background: transparent; padding: 0 var(--gutter) max(18px, env(safe-area-inset-bottom)); margin-top: -40px; }
  .camino.animado .camino__paso { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .55s var(--curva); box-shadow: 0 18px 40px -20px rgba(34, 37, 26, .5); pointer-events: none; }
  .camino.animado .camino__paso.activo { opacity: 1; transform: none; pointer-events: auto; }
}

/* Escritorio: el mapa a la izquierda y los pasos como línea de tiempo a la derecha */
@media (min-width: 960px) {
  .camino__escena { grid-template-columns: 1.15fr .85fr; }
  .camino__mapa { display: grid; place-items: center; overflow: hidden; }
  .camino.animado .mapa-camino { height: 100%; width: auto; max-width: 100%; }
  .camino__pasos { align-content: center; padding: 48px clamp(32px, 4vw, 72px); gap: 6px; }
  .camino__paso { background: transparent; box-shadow: none; padding: 16px 18px; transition: background .4s, opacity .4s; }
  .camino.animado .camino__paso { opacity: .38; }
  .camino.animado .camino__paso.hecho { opacity: .6; }
  .camino.animado .camino__paso.activo { opacity: 1; background: var(--blanco); box-shadow: 0 1px 0 var(--linea), 0 18px 40px -26px rgba(34, 37, 26, .45); }
  .camino.animado .camino__paso:not(.activo) p { display: none; }
  .camino.animado .camino__paso:not(.activo) .camino__num { background: transparent; color: var(--oliva); box-shadow: inset 0 0 0 1.5px currentColor; }
}

/* ---------- Referencias del final ---------- */
.referencias__grilla { display: grid; gap: 28px; }
.referencia { margin: 0; display: grid; gap: 14px; }
.referencia .foto { aspect-ratio: 4 / 3; }
.referencia figcaption { display: flex; gap: 12px; align-items: baseline; font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.referencia figcaption span { font: 600 .8125rem var(--sans); width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--oliva); color: var(--crema); flex: none; transform: translateY(-3px); }
@media (min-width: 900px) { .referencias__grilla { grid-template-columns: repeat(3, 1fr); } }


/* ---------- Distancias ---------- */
.cifras { list-style: none; display: grid; gap: 34px; }
.cifras li { display: grid; gap: 6px; border-top: 1px solid var(--linea-clara); padding-top: 22px; }
.cifras__num { font-family: var(--serif); font-size: clamp(4.5rem, 12vw, 8rem); line-height: .85; color: var(--crema); }
.cifras__num small { font-size: .35em; margin-left: 8px; color: var(--arveja-claro); font-style: italic; }
.cifras li > span:last-child { color: rgba(222, 216, 202, .8); }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { .mc-pin__halo { animation: none; } }

/* ---------- ¿Desde dónde venís? ----------
   Etiquetas de equipaje para elegir la ciudad; la ruta elegida se dibuja en el mapa y los km cuentan. */
.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 {
  position: relative; min-height: 44px; padding: 11px 16px 11px 30px; border: 0; cursor: pointer;
  font: 500 .9375rem/1 var(--sans); color: var(--tinta); background: var(--sobre) var(--grano);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  transition: background .2s, color .2s;
}
.origen::before { content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .2); }
.origen:hover { background: var(--crema); }
.origen[aria-pressed='true'] { background: var(--oliva); color: var(--crema); }
.origenes__dato { max-width: 440px; }
.origenes__cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-family: var(--serif); }
.origenes__km { font-size: clamp(2.8rem, 6vw, 3.8rem); line-height: 1; color: var(--oliva); font-variant-numeric: tabular-nums; }
.origenes__min { font-size: 1.5rem; font-style: italic; color: var(--tinta-2); }
.origenes__desde { font-weight: 600; color: var(--tinta); letter-spacing: .12em; }
.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) * 78); }
.origenes__figura figcaption { font-size: .75rem; color: var(--tinta-3); }
.or-tierra { fill: var(--crema-2); }
.or-agua, .or-laguna { fill: #c9d4c3; }
.or-orilla { fill: none; stroke: var(--tinta-3); stroke-width: .8; opacity: .7; }
.or-laguna { stroke: var(--tinta-3); stroke-width: .6; }
.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: .35; transition: opacity .3s; }
.origenes:not(.armado) .or-ruta { stroke: var(--arveja-osc); stroke-width: 2; opacity: .8; }
.or-ruta.elegida { stroke: var(--arveja-osc); stroke-width: 3.4; 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(--crema-2); stroke: var(--oliva); 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(--arveja-osc); }
.or-punto.elegido text { font-weight: 600; fill: var(--tinta); }
.or-destino circle { fill: var(--oliva); }
.or-destino .or-destino__halo { fill: var(--arveja); opacity: .35; transform-box: fill-box; transform-origin: center; animation: or-pulso 2.2s ease-out infinite; }
.or-destino text { font: italic 30px var(--serif); fill: var(--oliva); }
@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; }
}