/* El mapa de ubicación (El lugar y Parque Natura I): el Periférico y las rutas reales de OpenStreetMap; los minutos, sin tráfico. */
.donde { position: relative; display: grid; grid-template-columns: 5fr 7fr; grid-template-areas: "texto mapa" "lista mapa" "nota mapa"; gap: 0 calc(var(--aire) * 2);
  padding: 140px var(--m) 150px; background: var(--marfil); color: var(--tinta); }
.donde .texto { grid-area: texto; }
.donde .etiqueta { margin-bottom: 22px; }
.donde .grande { font: 500 clamp(28px, 2.6vw, 42px)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: pretty; }
.donde .destinos { grid-area: lista; list-style: none; margin-top: 44px; }
.donde .destinos ol { list-style: none; border-bottom: 1px solid rgba(58,44,33,.16); }
.donde .destinos [hidden] { display: none; }
.donde .destinos .grupos div { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-bottom: 14px; }
.donde .destinos .grupos button { padding: 10px 0; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .74;
  border-bottom: 1px solid transparent; transition: opacity .5s var(--llega), border-color .5s var(--llega); }
.donde .destinos .grupos button:hover { opacity: .85; }
.donde .destinos .grupos button[aria-pressed="true"] { opacity: 1; border-bottom-color: #735424; }
.donde .destinos .grupo button { display: grid; grid-template-columns: 4.2em 1fr; align-items: baseline; gap: 14px; width: 100%; padding: 14px 0 15px; text-align: left;
  border-top: 1px solid rgba(58,44,33,.16); opacity: .8; transition: opacity .5s var(--llega); }
.donde .destinos .grupo button:hover, .donde .destinos .grupo button[aria-pressed="true"] { opacity: 1; }
.donde .destinos .min { font: 500 clamp(30px, 2.6vw, 40px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.donde .destinos .min small { margin-left: .3em; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.donde .destinos .nombre { font: 500 clamp(19px, 1.5vw, 23px)/1.15 var(--serif); }
.donde .destinos .nombre small { display: block; margin-top: 4px; font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.donde .nota { grid-area: nota; margin-top: 22px; max-width: 46ch; font: 400 13.5px/1.5 var(--sans); opacity: .72; }
.donde .mapa { grid-area: mapa; align-self: center; position: relative; }
.donde svg { display: block; width: 100%; height: auto; overflow: hidden; }
.donde .per { fill: none; stroke: rgba(58,44,33,.32); stroke-width: 2.4; stroke-linecap: round; }
.donde .ruta { fill: none; stroke: #735424; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .16; transition: opacity .5s var(--llega); }
.donde .ruta.activa { opacity: 1; stroke-width: 4.5; }
.donde .punto { fill: var(--tinta); opacity: .45; transition: opacity .5s; } .donde .punto.activa { opacity: 1; }
.donde .pn { fill: #735424; } .donde .pn-halo { fill: none; stroke: #735424; stroke-width: 1.5; opacity: .5; }
.donde text { font: 500 14px var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--tinta); paint-order: stroke; stroke: var(--marfil); stroke-width: 7px; stroke-linejoin: round; }
.donde text.serif { font: 500 26px var(--serif); letter-spacing: 0; text-transform: none; }
.donde text.tenue { opacity: .68; }
.donde text.rotulo-destino .est { font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.donde .rotulo-destino { opacity: 0; transition: opacity .4s; } .donde .rotulo-destino.activa { opacity: 1; }
.donde figcaption { position: static; margin-top: 10px; text-align: right; color: var(--tinta); text-shadow: none; opacity: .72; }
@media (max-width: 760px) {
  .donde { grid-template-columns: 1fr; grid-template-areas: "texto" "mapa" "lista" "nota"; padding: 96px 16px; }
  .donde .mapa { margin: 36px -8px 0; }
  .donde .destinos { margin-top: 28px; }
  .donde text { font-size: 22px; } .donde text.serif { font-size: 36px; } .donde text.rotulo-destino .est { font-size: 20px; }
}