/* guide lane: the local guide at /guia/ (owner 2026-10-20). Mobile first. Loads after experiences.css. Tokens only;
   every size is 14px or more. It reuses the hero, the section chips (.mn-nav) and the buttons of the other pages. */

.gd-nav { top: 64px; }
.gd-sec { padding: var(--space-7) 0; scroll-margin-top: 130px; }
.gd-sec-raised { background: var(--surface-raised); }
.gd-sec h2 { margin: 0 0 var(--space-3); }
.gd-sec .t-lead { margin: 0 0 var(--space-5); max-width: 40rem; }

/* Which beach for what: a card per beach, the photo on top, what it is for, the shuttle times and the fare. */
.gd-beaches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .gd-beaches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gd-beaches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gd-beach { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-top: 6px solid var(--mar); }
.gd-beach .ph { aspect-ratio: 4 / 3; overflow: hidden; }
.gd-beach .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-beach-in { padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; flex: 1; }
.gd-beach h3 { margin: 0; }
.gd-for { margin: 0; font-size: 17px; line-height: 1.45; }
.gd-ride { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font: 600 16px/1.5 var(--font-text); font-variant-numeric: tabular-nums; color: var(--ink); }
.gd-ride b { font-weight: 700; }
.gd-k { display: block; font: 700 14px/1.2 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.gd-beach.is-plain { border-top-color: var(--sol); }
.gd-beach.is-plain .gd-beach-in { padding-top: var(--space-5); }
.gd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: var(--space-5) 0 0; }
.gd-note { font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.gd-page .hs { color: var(--ink); }

/* Food, the bay, a different day: the heading on the left, the places as a ruled list on the right. */
.gd-split { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .gd-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-7); } }
.gd-list { list-style: none; margin: 0; padding: 0; }
.gd-list li { display: grid; gap: 4px; padding: var(--space-4) 0; border-top: 1px solid var(--line-strong); }
.gd-list li:last-child { border-bottom: 1px solid var(--line-strong); }
.gd-list b { font: 600 24px/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.gd-list span { font-size: 17px; line-height: 1.5; max-width: 40rem; color: var(--ink-muted); }

/* Los Nogales: after the sea, the forest. The mar ground and the sol, like the departure board. */
.gd-north { background: var(--mar); color: var(--cal); padding: var(--space-7) 0; border-top: var(--stroke-band) solid var(--sol); scroll-margin-top: 130px; }
.gd-north .label { display: inline-block; background: var(--sol); color: var(--on-light); padding: 4px 10px; }
.gd-north h2 { margin: var(--space-3) 0; color: var(--cal); }
.gd-north .t-lead { max-width: 42rem; color: var(--cal); }
.gd-north-head { margin-bottom: var(--space-5); }
.gd-north-facts { margin: 0 0 var(--space-5); display: grid; gap: 0; }
.gd-north-facts > div { padding: var(--space-3) 0; border-top: 1px solid color-mix(in srgb, var(--cal) 35%, var(--mar)); display: grid; gap: 6px; }
.gd-north-facts dt { font: 700 14px/1.2 var(--font-text); letter-spacing: .1em; text-transform: uppercase; }
.gd-north-facts dd { margin: 0; max-width: 44rem; font-size: 17px; line-height: 1.5; }
@media (min-width: 900px) { .gd-north-facts > div { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--space-5); } }
.gd-tag { margin: 0 0 var(--space-4); font: 600 26px/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sol); }
.gd-north :focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }

.gd-end h2 { margin: 0 0 var(--space-3); }
.gd-end .x-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.gd-hours { margin: 0 0 var(--space-4); }