/* Bike Fit Lab — site.css · direction: the split stage · one file, tokens only */

@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/archivo-600.woff2") format("woff2"); }

:root {
  --bg: #F4F3EF;
  --surface: #E9E7E1;
  --ink: #0B1B3F;
  --muted: #4A5578;
  --accent: #0B3FDA;
  --accent-ink: #F4F3EF;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-head-col: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);   /* headings inside the reading column */
  --step-display: clamp(2.5rem, 1.3rem + 4.5vw, 5.5rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --pad: clamp(1.25rem, 1rem + 2.5vw, 4.5rem);          /* reading column padding 20 → 72px */
  --section: clamp(5rem, 10vw, 11rem);
  --measure: 46ch;
  --radius: 0;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 800ms; --t-fade: 1600ms;
  --bar: 4rem;                                             /* phone bottom bar height */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 5rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.on-accent :focus-visible, .on-accent:focus-visible { outline-color: var(--accent-ink); }
table { border-collapse: collapse; width: 100%; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.0; text-wrap: balance; hyphens: none; }
h2 { font-size: var(--step-head-col); }
h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 0.9em; }
strong, b { font-weight: 600; }
.nums { font-variant-numeric: tabular-nums; }
/* Saltar para o conteúdo: escondido até receber foco; depois, bloco sólido no canto superior esquerdo. */
.skip { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 100; width: auto; height: auto; overflow: visible; clip-path: none; display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); border-radius: 0; font-weight: 600; text-decoration: none; outline: 3px solid var(--ink); outline-offset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cover { width: 100%; height: 100%; object-fit: cover; }
picture.cover img, .cover picture, .cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-weight: 600; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--ink); color: var(--bg); } }
.button--paper { background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .button--paper:hover { background: var(--surface); color: var(--ink); } }
.button--ink { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .button--ink:hover { background: var(--accent); color: var(--accent-ink); } }
.button--wide { width: 100%; }
.link { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }
.field { display: block; width: 100%; min-height: 3.25rem; padding: 0.8rem 0.95rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); color: var(--ink); transition: background-color var(--t-hover) ease; }
.field:focus { background: var(--bg); outline: 3px solid var(--accent); outline-offset: 0; }
textarea.field { min-height: 8rem; resize: vertical; }
select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B1B3F' stroke-width='2'/%3E%3C/svg%3E"); background-position: calc(100% - 1rem) 50%; background-repeat: no-repeat; padding-right: 2.75rem; }
label { display: block; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.header__row { position: relative; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; padding-inline: var(--margin); }
.wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; font-size: var(--step-body); letter-spacing: -0.01em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav__list a { text-decoration: none; padding-block: 0.5rem; display: inline-block; }
@media (hover: hover) and (pointer: fine) { .nav__list a:hover { color: var(--accent); } }
.nav__menu { display: none; }
.nav__menu summary { list-style: none; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 0.25rem; font-weight: 600; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu[open] summary { color: var(--accent); }
.nav__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 36; background: var(--surface); padding: 1rem var(--margin) 1.5rem; display: grid; gap: 0.25rem; box-shadow: none; }
.nav__panel a { display: block; padding: 0.7rem 0; text-decoration: none; font-size: var(--step-lead); }
@media (max-width: 64em) {
  .nav__list, .header .button { display: none; }
  .nav__menu { display: block; }
}

/* ---------- the split stage ---------- */
.split { display: grid; grid-template-columns: 45fr 55fr; align-items: start; }
.stage { position: sticky; top: 4.5rem; height: calc(100svh - 4.5rem); overflow: hidden; background: var(--ink); }
.stage__img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-fade) var(--ease-soft); }
.stage__img.is-on { opacity: 1; }
.stage__img picture, .stage__img img { width: 100%; height: 100%; object-fit: cover; }
.stage__img .img-placeholder { width: 100%; height: 100%; }
.no-js .stage__img:first-child, .stage__img:only-child { opacity: 1; }
.stage__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; min-height: 3.5rem; align-items: center; padding: 0.5rem var(--margin); background: var(--bg); color: var(--ink); font-size: var(--step-small); }
.stage__bar span { max-width: 50%; }
.stage__bar span + span { text-align: right; }
.reading { background: var(--bg); position: relative; z-index: 1; min-width: 0; }
.reading > section { padding: var(--section) var(--pad); }
.reading > section > * + * { margin-top: 1.5rem; }
.reading > section > h2 + p, .reading > section > h2 + .lead { margin-top: 2rem; }
.reading .block { max-width: var(--measure); }
.reading h2 { max-width: 20ch; }

@media (max-width: 56.24em) {
  .split { display: block; }
  .header { position: static; }
  .stage { height: 56svh; position: sticky; top: 0; }
  .stage--second { position: relative; top: 0; height: 48svh; }
  .steps { padding-bottom: calc(var(--section) * 0.9); }
  .reading { padding-bottom: 0; }
  .reading > section { padding: calc(var(--section) * 0.6) var(--pad); }
  :target { scroll-margin-top: 4.5rem; }
}

/* ---------- hero ---------- */
.hero { min-height: calc(100svh - 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); max-width: 24ch; }
.hero .lead { margin-top: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.5rem; }
.hero__actions .link { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 56.24em) {
  .hero { min-height: 0; }
}

/* ---------- what: the live thing ---------- */
.pain { margin-top: 2.5rem; }
.pain__q { font-weight: 600; }
.pain__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: max(1rem, var(--step-small)); border-radius: var(--radius); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--ink); color: var(--bg); } }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pain__answer { margin-top: 1.25rem; padding: 1.25rem 1.4rem; background: var(--surface); max-width: var(--measure); }
.pain__answer[hidden] { display: none; }
.pain__answer p { max-width: none; }
.pain__answer a { color: var(--accent); }
.pain__note { margin-top: 0.75rem; }

/* ---------- steps: itinerary on a slip ---------- */
.steps { background: var(--accent); color: var(--accent-ink); }
.steps h2 { color: var(--accent-ink); }
.steps__intro { color: var(--accent-ink); }
.slip { margin-top: 2.5rem; max-width: 30rem; background: var(--bg); color: var(--ink); padding: 1.75rem 1.5rem 2.75rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97.5% 100%, 95% calc(100% - 10px), 92.5% 100%, 90% calc(100% - 10px), 87.5% 100%, 85% calc(100% - 10px), 82.5% 100%, 80% calc(100% - 10px), 77.5% 100%, 75% calc(100% - 10px), 72.5% 100%, 70% calc(100% - 10px), 67.5% 100%, 65% calc(100% - 10px), 62.5% 100%, 60% calc(100% - 10px), 57.5% 100%, 55% calc(100% - 10px), 52.5% 100%, 50% calc(100% - 10px), 47.5% 100%, 45% calc(100% - 10px), 42.5% 100%, 40% calc(100% - 10px), 37.5% 100%, 35% calc(100% - 10px), 32.5% 100%, 30% calc(100% - 10px), 27.5% 100%, 25% calc(100% - 10px), 22.5% 100%, 20% calc(100% - 10px), 17.5% 100%, 15% calc(100% - 10px), 12.5% 100%, 10% calc(100% - 10px), 7.5% 100%, 5% calc(100% - 10px), 2.5% 100%, 0 calc(100% - 10px)); }
.slip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; margin-top: 1.75rem; }
.slip__head:first-child { margin-top: 0; }
.slip__head .muted { font-weight: 400; font-size: var(--step-small); }
.slip__rows { margin-top: 0.5rem; }
.slip__row { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.45rem; }
.slip__row span:first-child { flex: 0 1 auto; }
.slip__row .leader { flex: 1 1 1rem; min-width: 1rem; border-bottom: 4px dotted var(--ink); transform: translateY(-0.3em); opacity: 0.55; }
.slip__row .nums { flex: 0 0 auto; }
.slip__row:target { background: var(--surface); margin-inline: -0.75rem; padding-inline: 0.75rem; }
.slip__row small { display: block; font-size: var(--step-small); color: var(--muted); line-height: 1.45; margin-top: 0.15rem; max-width: 34ch; }
.slip__result { margin: 1.75rem -1.5rem 0; padding: 0.85rem 1.5rem; min-height: 2.75rem; background: var(--ink); color: var(--bg); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-weight: 600; }
.slip__result .nums { font-weight: 400; }

/* ---------- pricing: two plans, two fields (full width) ---------- */
.pricing { position: relative; z-index: 1; background: var(--bg); }
.pricing__fields { display: grid; grid-template-columns: 7fr 5fr; }
.plan { min-height: 80svh; padding: clamp(1.5rem, 3vw, 3rem); display: grid; grid-template-rows: auto 1fr auto; gap: 2rem; }
.plan--main { background: var(--accent); color: var(--accent-ink); }
.plan--main .button { background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .plan--main .button:hover { background: var(--ink); color: var(--bg); } }
.plan--side { background: var(--surface); color: var(--ink); }
.plan h2 { font-size: var(--step-head); max-width: none; }
.plan__who { font-size: var(--step-lead); max-width: 26ch; margin-top: 1rem; line-height: 1.3; }
.plan__body { max-width: 44ch; align-self: center; }
.plan__body p { max-width: none; }
.plan__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.plan__price { font-size: clamp(3rem, 1rem + 8vw, 9rem); line-height: 0.95; letter-spacing: -0.03em; }
.plan__price small { font-size: var(--step-body); letter-spacing: 0; display: block; margin-bottom: 0.5rem; }
.pricetable { padding: calc(var(--section) * 0.6) var(--margin); }
.pricetable__inner { max-width: 60rem; margin-inline: auto; }
.pricetable h2 { font-size: var(--step-head-col); }
.pricetable table { margin-top: 2rem; }
.pricetable th { text-align: left; font-weight: 600; padding: 0.75rem 1rem; }
.pricetable td { padding: 0.9rem 1rem; vertical-align: top; }
.pricetable td:last-child, .pricetable th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricetable tbody tr:nth-child(odd) { background: var(--surface); }
.pricetable tbody th { font-weight: 400; }
.pricetable__group td { padding-top: 1.5rem; font-weight: 600; }
.pricetable p { margin-top: 1.5rem; }
@media (max-width: 56.24em) {
  .pricing__fields { grid-template-columns: 1fr; }
  .plan { min-height: 70svh; padding: 4.5rem 1.25rem 1.5rem; }
  .plan__price { font-size: 20vw; }
  .plan__foot { flex-direction: column; align-items: stretch; }
  .plan__foot .button { width: 100%; }
}

/* ---------- about: founder's letter ---------- */
.about__portrait { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.about__portrait img, .about__portrait picture { width: 100%; height: 100%; object-fit: cover; }
.letter { margin-top: 1.75rem; line-height: 1.55; max-width: var(--measure); }
.letter p + p { margin-top: 1.1em; }
.letter mark { background: var(--surface); color: inherit; padding: 0 0.15em; }
.about__sign { margin-top: 2rem; }
.about__sign .name { font-size: var(--step-lead); display: block; }
.about__sign .role { display: block; margin-top: 0.25rem; }

/* ---------- gallery: drag row ---------- */
.gallery__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.gallery__head h2 { font-size: var(--step-lead); }
.drag { display: flex; gap: 12px; height: 300px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); margin-top: 1.5rem; cursor: grab; }
.drag:active { cursor: grabbing; }
.drag::-webkit-scrollbar { display: none; }
.drag > * { flex: 0 0 auto; height: 100%; scroll-snap-align: start; }
.drag .mod--tall { width: 225px; }
.drag .mod--pair { width: 200px; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.drag .mod--wide { width: 480px; }
.drag figure, .drag .mod--pair > * { height: 100%; overflow: hidden; min-height: 0; }
.drag img, .drag picture { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 56.24em) {
  .drag { height: 62svh; gap: 8px; }
  .drag .mod--tall { width: 72vw; }
  .drag .mod--pair { width: 64vw; gap: 8px; }
  .drag .mod--wide { width: 88vw; }
}

/* ---------- faq: answers as reading text ---------- */
.faq__list { margin-top: 2rem; max-width: var(--measure); line-height: 1.55; }
.faq__list p { max-width: none; }
.faq__list p + p { margin-top: 1.25rem; }
.faq__list b { font-weight: 600; }

/* ---------- book: form + email as display ---------- */
.book__intro { margin-top: 1.5rem; }
.form { margin-top: 2.5rem; display: grid; gap: 1.25rem; max-width: var(--measure); }
.form__row { display: grid; gap: 0.4rem; }
.form__row > span { font-weight: 600; }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; margin-bottom: 0.5rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: var(--surface); font-weight: 600; font-size: max(1rem, var(--step-small)); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.check input:checked + span { background: var(--accent); color: var(--accent-ink); }
.check input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__error { background: var(--ink); color: var(--bg); padding: 0.9rem 1rem; }
.form__error p { max-width: none; }
.form .button { justify-self: start; }
.book__alt { margin-top: 3.5rem; padding: 2rem var(--pad); margin-inline: calc(var(--pad) * -1); background: var(--ink); color: var(--bg); }
.book__alt p { max-width: var(--measure); }
.book__alt .button { margin-top: 1.5rem; background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .book__alt .button:hover { background: var(--accent); color: var(--accent-ink); } }
.book__email { display: block; margin-top: 1.9rem; padding-block: 0.6rem; font-size: clamp(1.5rem, 0.6rem + 3.2vw, 3.25rem); letter-spacing: -0.03em; line-height: 1.05; text-decoration: none; overflow-wrap: anywhere; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .book__email:hover { color: var(--accent); } }
.book__alt .book__email:hover { color: var(--surface); }
.book__meta { margin-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.book__meta .link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; }  /* área de toque de 44 px sem mudar o espaçamento */
@media (max-width: 40em) { .form__two { grid-template-columns: 1fr; } }

/* ---------- footer: name across the last photograph ---------- */
.footer { position: relative; z-index: 1; height: 100svh; min-height: 36rem; overflow: hidden; color: var(--bg); background: var(--ink); }
.footer__img { position: absolute; inset: 0; filter: brightness(0.62); }
.footer__img picture, .footer__img img { width: 100%; height: 100%; object-fit: cover; }
.footer__top { position: absolute; left: 0; right: 0; top: 2rem; display: flex; justify-content: space-between; gap: 2rem; padding-inline: var(--margin); }
.footer__top ul { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.footer__top a { text-decoration: none; }
/* Alvos de toque: 44 px de altura nos links do rodapé; nos links em linha a área cresce sem mexer no texto. */
.footer__top ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer__top p a { padding-block: 0.35rem; }
@media (hover: hover) and (pointer: fine) { .footer__top a:hover { text-decoration: underline; text-underline-offset: 0.18em; } }
.footer__top > * { max-width: 24ch; }
.footer__top > * + * { text-align: right; }
.footer__name { position: absolute; left: 0; right: 0; bottom: 2rem; padding-inline: var(--margin); }
.footer__name .mark { display: block; font-size: 13.4vw; line-height: 0.9; letter-spacing: -0.045em; white-space: nowrap; }
.footer__name .legal { margin-top: 0.4rem; display: flex; align-items: center; gap: 0 1.5rem; flex-wrap: wrap; font-size: var(--step-small); }
.footer__name .legal a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__name .legal a:hover { text-decoration: underline; text-underline-offset: 0.18em; } }
@media (max-width: 56.24em) {
  .footer { height: 88svh; min-height: 41rem; }   /* links, morada e nome sem se sobreporem em ecrãs baixos */
  .footer__top { flex-direction: column; gap: 1.5rem; }
  .footer__top ul { grid-template-columns: repeat(2, max-content); column-gap: 2.5rem; }
  .footer__top > * + * { text-align: left; }
  .footer__name { bottom: calc(var(--bar) + 1.25rem); }
  .footer__name .mark { font-size: 15.5vw; }
}

/* ---------- phone bottom bar ---------- */
.bar { display: none; }
@media (max-width: 56.24em) {
  body { padding-bottom: var(--bar); }
  .bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--bar); background: var(--ink); }
  .bar a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; height: 100%; text-decoration: none; font-weight: 600; }
  .bar a:first-child { background: var(--accent); color: var(--accent-ink); }
  .bar a:last-child { background: var(--ink); color: var(--bg); }
}

/* ---------- support pages: plain reading layout ---------- */
.page { padding: calc(var(--section) * 0.6) var(--margin) var(--section); }
.page__inner { max-width: 62ch; margin-inline: auto; }                 /* páginas v6 (.page--cols): 76rem em ≥ 64em, ver bloco no fim */
.page__photo { max-width: 62ch; margin: 0 auto 3rem; aspect-ratio: 4 / 3; overflow: hidden; }
.page__head .page__photo { max-width: none; margin: 0 0 2.5rem; }       /* v6: a foto vive dentro de .page__inner; abaixo de 64em fica acima do título como antes */
.page__photo img, .page__photo picture { width: 100%; height: 100%; object-fit: cover; }
.page h1 { font-size: var(--step-display); max-width: 16ch; }
.page__gallery { margin-top: 4rem; }
.page__gallery section { padding: 0; }
.page__gallery .gallery__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; }
.page .lead { margin-top: 1.5rem; max-width: 50ch; }
.page section { margin-top: 3.5rem; }
.page section > * + *, .page .page__text > * + * { margin-top: 1rem; }
.page section h2 { font-size: var(--step-head-col); margin-bottom: 1.5rem; max-width: 22ch; }
.page section > .page__figs { margin-top: 2rem; }                        /* v6: figuras depois do texto numa coluna só */
.page .page__figs > .fig { margin-top: 0; }
.page .page__figs > * + * { margin-top: 2.5rem; }
.page p { max-width: 62ch; }
.page ul.plain { padding-left: 1.2em; list-style: disc; display: grid; gap: 0.4rem; }
.service { padding: 1.5rem; background: var(--surface); margin-top: 1.5rem; }
.service h3 { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.service h3 .nums { font-weight: 600; }
.service p { margin-top: 0.75rem; }
.page__actions { margin-top: 3rem; display: flex; gap: 1rem 1.75rem; flex-wrap: wrap; align-items: center; }
.page--center { min-height: 60svh; display: flex; align-items: center; }

/* ---------- placeholder when a photo key is missing ---------- */
.img-placeholder { background: var(--surface); width: 100%; height: 100%; min-height: 12rem; }

/* ---------- motion: entrances, once, choreographed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .slip[data-reveal] { transform: translateY(32px); transition-duration: 900ms, 1100ms; }
  .js .drag[data-reveal] > * { opacity: 0; transform: translateX(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .drag[data-reveal].is-in > * { opacity: 1; transform: none; }
  .js .drag[data-reveal] { opacity: 1; transform: none; }
  .js .plan[data-reveal] { transform: none; transition: opacity 900ms var(--ease-out); }
  .js .stage__img img { transform: scale(1.04); transition: opacity var(--t-fade) var(--ease-soft), transform 2400ms var(--ease-soft); }
  .js .stage__img.is-on img { transform: none; }
  .js .footer__img img { transform: scale(1.06); transition: transform 2800ms var(--ease-soft); }
  .js .footer.is-in .footer__img img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .stage__img { transition: none; }
  .stage__img:not(:first-child) { display: none; }
  .stage__img:first-child { opacity: 1; }
}

/* ===== Blog e loja ===== */
.nav__list a[aria-current="page"], .nav__panel a[aria-current="page"] { color: var(--accent); }
.page__inner--wide, .post { max-width: 52rem; margin-inline: auto; }
.page__inner--shop { max-width: 72rem; }
.blog__empty { margin-top: 3rem; }
.page .blog__empty { max-width: 62ch; }

/* index: one row per post, tone steps instead of rules */
.rows { margin: 3.5rem 0 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.25rem; background: var(--bg); }
.row:nth-child(even) { background: var(--surface); }
.row__cover { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.row:nth-child(even) .row__cover { background: var(--bg); }
.row__cover picture, .row__cover img, .row__cover .img-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.row__text { min-width: 0; }
.row__text > * + * { margin-top: 0.6rem; }
.row__title { font-size: var(--step-lead); line-height: 1.15; max-width: 28ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__title a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .row__title a:hover, .row--link a:hover { color: var(--accent); } }
.row__excerpt { max-width: 52ch; }
.pager { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 2.5rem; }
.pager a { padding-block: 0.6rem; }
@media (max-width: 40em) {
  .row { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
  .row__cover { aspect-ratio: 16 / 9; }
  .row__title { max-width: none; }
}

/* post */
.post__cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.post__cover picture, .post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post__head { margin-top: 2.5rem; }
.post__head h1 { font-size: var(--step-head-col); max-width: 24ch; line-height: 1.05; }
.post__head p { margin-top: 1.1rem; }
.page .post .prose { margin-top: 2.5rem; }

.prose { max-width: 62ch; font-size: var(--step-body); line-height: 1.55; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose ul, .prose ol, .prose blockquote { max-width: none; }
.prose h2, .prose h3 { line-height: 1.15; max-width: 32ch; }
.prose h2 { font-size: var(--step-lead); margin-top: 2.4em; }
.prose h3 { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.45em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--muted); }
.prose li > p + p, .prose li > ul, .prose li > ol { margin-top: 0.45em; }
.prose blockquote { background: var(--surface); padding: 1.25rem 1.4rem; font-size: var(--step-lead); line-height: 1.35; }
.prose blockquote p + p { margin-top: 0.7em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .prose a:hover { color: var(--ink); } }
.prose img { height: auto; }
.prose table { display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; vertical-align: top; }
.prose tbody tr:nth-child(odd) { background: var(--surface); }
.prose code { font-family: inherit; background: var(--surface); padding: 0 0.25em; }
.prose hr { border: 0; height: 2.5rem; background: none; }

.cta { margin-top: 4.5rem; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); background: var(--accent); color: var(--accent-ink); }
.page .cta > * + * { margin-top: 1rem; }
.cta h2 { font-size: var(--step-head-col); max-width: 18ch; margin: 0; }
.cta p { max-width: 40ch; font-size: var(--step-lead); line-height: 1.3; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; padding-top: 0.75rem; }
.page .cta__actions { margin-top: 1rem; }

.page .more { margin-top: 4.5rem; }
.page .more h2 { font-size: var(--step-lead); margin: 0; max-width: none; }
.more .rows--list { margin-top: 1.25rem; }
.row--link { display: block; padding: 0; background: var(--bg); }
.row--link:nth-child(even) { background: var(--surface); }
.row--link a { display: block; padding: 1rem 1.25rem; text-decoration: none; font-size: var(--step-lead); line-height: 1.2; min-height: 3.25rem; }
.page .more__all { margin-top: 1.5rem; }

/* loja */
.shop { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 2.5rem 1.5rem; }
.item { position: relative; min-width: 0; }
.item > * + * { margin-top: 0.4rem; }
.item__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); margin-bottom: 0.85rem; }
.item__img picture, .item__img img, .item__img .img-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.item__name { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.item__name a { text-decoration: none; }
.item__name a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; padding-bottom: 100%; }
@media (hover: hover) and (pointer: fine) { .item:hover .item__name a { color: var(--accent); } }
.item:focus-within { outline: 3px solid var(--accent); outline-offset: 4px; }
.item__name a:focus-visible { outline: 0; }
.item__price { font-size: var(--step-lead); line-height: 1.2; padding-top: 0.35rem; }
.back { margin-bottom: 2rem; }
.back a { display: inline-block; padding-block: 0.6rem; min-height: 2.75rem; }
.product__actions .link { display: inline-flex; align-items: center; min-height: 2.75rem; }

.product { display: grid; grid-template-columns: 45fr 55fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.product__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); position: sticky; top: 6rem; }
.product__img picture, .product__img img, .product__img .img-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.product__text { min-width: 0; max-width: 56ch; }
.product__text h1 { font-size: var(--step-head-col); max-width: 18ch; }
.product__text > * + * { margin-top: 1rem; }
.product__price { font-size: var(--step-head-col); line-height: 1; letter-spacing: -0.02em; margin-top: 1.5rem; }
.prose--product { margin-top: 1.75rem; }
.product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.product__ext { margin-top: 1.25rem; }
@media (max-width: 56.24em) {
  .product { grid-template-columns: 1fr; gap: 2rem; }
  .product__img { position: static; }
  .product__actions .button { width: 100%; }
}

/* ===== Ajustes fase 2 ===== */
.nav__menu:not([open]) .nav__panel { display: none; }
.page__inner--wide > h1:first-child, .page__inner--shop > h1:first-child { font-size: var(--step-display); }
.item__img .img-placeholder, .product__img .img-placeholder { display: grid; place-items: center; padding: 1.5rem; text-align: center; color: var(--muted); font-size: var(--step-small); line-height: 1.3; }
.item__img .img-placeholder::after, .product__img .img-placeholder::after { content: attr(aria-label); }
@media (max-width: 40em) { .item__img:has(> .img-placeholder) { aspect-ratio: 16 / 9; } }

/* ===== Figuras ===== */
.fig { margin: 2.5rem 0 0; --fg: var(--ink); --fg2: var(--accent); --fg2-ink: var(--accent-ink); --soft: var(--surface); --paper: var(--bg); }
.on-accent .fig { --fg: var(--accent-ink); --fg2: var(--accent-ink); --fg2-ink: var(--accent); --soft: rgba(244, 243, 239, 0.16); --paper: var(--accent); }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig text { font-family: var(--font); font-size: 15px; fill: var(--fg); }
.fig figcaption { margin-top: 0.9rem; max-width: var(--measure); }
.fig .f-bike, .fig .f-body { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.fig .f-bike { opacity: 0.55; }
.fig .f-body { stroke-width: 2.5; }
.fig .f-head { fill: var(--paper); }
.fig .f-thick { stroke-width: 5; }
.fig .f-joints circle { fill: var(--fg2); stroke: none; }
.fig .f-ground { stroke: var(--fg); stroke-width: 2; opacity: 0.25; }
.fig .f-contacts rect { fill: var(--fg); }
.fig .f-arc { fill: none; stroke: var(--fg2); stroke-width: 2; }
.fig .f-num circle { fill: var(--fg2); }
.fig .f-num text { fill: var(--fg2-ink); font-weight: 600; font-size: 14px; }
.fig .f-hot { cursor: pointer; outline: none; }
.fig .f-hot__hit { fill: transparent; stroke: none; pointer-events: all; }  /* área de toque invisível: r=25 em 360 unidades dá ≥ 44 px com o SVG a 320 px ou mais */
.fig .f-hot__dot { fill: var(--fg2); stroke: var(--paper); stroke-width: 2.5; }
.fig .f-hot__ring { fill: var(--fg2); opacity: 0; transition: opacity var(--t-ui) ease, r var(--t-ui) ease; }
.fig .f-hot:hover .f-hot__ring, .fig .f-hot:focus-visible .f-hot__ring { opacity: 0.25; }
.fig .f-hot.is-active .f-hot__ring { opacity: 0.35; }
.fig .f-hot:focus-visible .f-hot__dot { stroke: var(--fg2); stroke-width: 4; }
.fig__legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--step-small); line-height: 1.4; }
.fig__legend li, .fig__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.fig__k { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; background: var(--fg2); color: var(--fg2-ink); font-weight: 600; font-size: 0.8125rem; line-height: 1; }
.fig .f-key { display: inline-block; width: 1.4rem; height: 0.25rem; background: var(--fg2); }
.fig .f-key--before { background: var(--fg); opacity: 0.4; }

/* processo: faixa */
.fig--strip { margin-top: 2rem; max-width: 34rem; }
.fig--strip .f-band { fill: var(--soft); }
.fig--strip .f-band--alt { fill: transparent; stroke: var(--fg); stroke-width: 1.5; stroke-opacity: 0.35; }
.fig--strip .f-route { stroke: var(--fg); stroke-width: 2; opacity: 0.5; }
.fig--strip .f-station rect { fill: var(--fg2); }
.fig--strip .f-station text { fill: var(--fg2-ink); font-weight: 600; font-size: 13px; }
.fig--strip .f-receipt { fill: var(--fg2-ink); stroke: var(--fg2); stroke-width: 2; }
.fig--strip .f-receipt rect { fill: var(--paper); }
.fig--strip .f-receipt line, .fig--strip .f-receipt polyline { fill: none; }
.fig__phases { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 0.5rem 1rem; margin-top: 0.75rem; font-size: var(--step-small); line-height: 1.35; }
.fig__phases div { display: grid; gap: 0.1rem; }
.fig__phases b { font-weight: 600; }
.fig__phases .nums { opacity: 0.75; }
@media (max-width: 26em) { .fig__phases { grid-template-columns: 1fr; } .fig__phases div { grid-template-columns: 1fr auto; } }

/* processo: percurso vertical */
.route { list-style: none; margin: 0; padding: 0; position: relative; }
.route__band { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; background: var(--fg2); color: var(--fg2-ink); padding: 0.6rem 1rem; font-weight: 600; margin-top: 1.5rem; }
.route__phase:first-child .route__band { margin-top: 0; }
.route__band .nums { font-weight: 400; font-size: var(--step-small); }
.route__steps { list-style: none; margin: 0; padding: 0.75rem 0 0 0; position: relative; }
.route__steps::before { content: ""; position: absolute; left: 0.95rem; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--fg); opacity: 0.25; }
.route__step { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.25rem 0.9rem; align-items: start; padding: 0.7rem 0; position: relative; }
.route__mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; background: var(--fg2); color: var(--fg2-ink); font-weight: 600; font-size: 0.875rem; position: relative; z-index: 1; }
.route__mark--receipt { background: var(--paper); }
.route__mark--receipt svg { width: 1.4rem; height: 1.8rem; fill: var(--paper); stroke: var(--fg2); stroke-width: 2; }
.route__mark--receipt svg line, .route__mark--receipt svg polyline { fill: none; }
.route__text b { font-weight: 600; display: block; }
.route__text p { margin: 0.25rem 0 0; font-size: var(--step-body); color: var(--ink); line-height: 1.5; max-width: 40ch; }
.route__dur { font-size: var(--step-small); color: var(--muted); padding-top: 0.35rem; }
.route__result { margin-top: 1.25rem; padding: 0.85rem 1rem; background: var(--fg); color: var(--paper); display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.route__result .nums { font-weight: 400; }

/* selim */
.fig--selim { max-width: 34rem; }
.fig--selim-compact { max-width: 18rem; margin-top: 2rem; }
.fig-selim__toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.fig-selim__toggle { display: none; }
.js .fig-selim__toggle { display: flex; }
.fig-selim__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.fig-selim__pair--single { grid-template-columns: minmax(0, 1fr); }
.fig-selim__state { min-width: 0; }
.js .fig-selim__pair { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.js .fig-selim__state { grid-area: 1 / 1; transition: opacity 600ms var(--ease-soft); }
.js .fig--selim[data-state="antes"] .fig-selim__state--depois, .js .fig--selim[data-state="depois"] .fig-selim__state--antes { opacity: 0; pointer-events: none; }
.js .fig-selim__svg .f-state { display: none; }
.fig .f-saddle-fill { fill: var(--paper); }
.fig .f-saddle { fill: none; stroke: var(--fg); stroke-width: 2; }
.fig .f-axis { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.4; }
.fig .f-p { fill: var(--fg2); }
.fig .f-p1 { opacity: 0.18; } .fig .f-p2 { opacity: 0.38; } .fig .f-p3 { opacity: 0.62; } .fig .f-p4 { opacity: 0.9; }
.fig .f-state { font-weight: 600; }
.fig-selim__read { display: none; margin: 0.75rem 0 0; max-width: var(--measure); }
.js .fig--selim[data-state="antes"] .fig-selim__read[data-for="antes"], .js .fig--selim[data-state="depois"] .fig-selim__read[data-for="depois"] { display: block; }
.fig__swatches { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.9rem; }
.fig__swatches .small { margin-left: 0.5rem; }
.f-sw { display: inline-block; width: 1.25rem; height: 0.75rem; background: var(--fg2); }
.f-sw1 { opacity: 0.18; } .f-sw2 { opacity: 0.38; } .f-sw3 { opacity: 0.62; } .f-sw4 { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .js .fig-selim__state { transition: none; } }

/* ficha */
.fig--ficha { max-width: 30rem; }
.ficha { background: var(--surface); padding: 1.5rem 1.5rem 2.5rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97.5% 100%, 95% calc(100% - 10px), 92.5% 100%, 90% calc(100% - 10px), 87.5% 100%, 85% calc(100% - 10px), 82.5% 100%, 80% calc(100% - 10px), 77.5% 100%, 75% calc(100% - 10px), 72.5% 100%, 70% calc(100% - 10px), 67.5% 100%, 65% calc(100% - 10px), 62.5% 100%, 60% calc(100% - 10px), 57.5% 100%, 55% calc(100% - 10px), 52.5% 100%, 50% calc(100% - 10px), 47.5% 100%, 45% calc(100% - 10px), 42.5% 100%, 40% calc(100% - 10px), 37.5% 100%, 35% calc(100% - 10px), 32.5% 100%, 30% calc(100% - 10px), 27.5% 100%, 25% calc(100% - 10px), 22.5% 100%, 20% calc(100% - 10px), 17.5% 100%, 15% calc(100% - 10px), 12.5% 100%, 10% calc(100% - 10px), 7.5% 100%, 5% calc(100% - 10px), 2.5% 100%, 0 calc(100% - 10px)); }
.ficha { --paper: var(--surface); }
.ficha__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.ficha svg { margin-bottom: 1rem; }
.ficha .f-dim { stroke: var(--fg2); stroke-width: 2; fill: none; }
.ficha .f-dim--ref { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.45; }
.ficha__rows { list-style: none; margin: 0; padding: 0; }
.ficha__row { display: grid; grid-template-columns: 1.6rem 1fr minmax(1rem, auto) auto; gap: 0.6rem; align-items: baseline; padding: 0.55rem 0; }
.ficha__k { display: flex; }
.ficha__name b { font-weight: 600; display: block; }
.ficha__name small { display: block; font-size: var(--step-small); color: var(--muted); line-height: 1.4; margin-top: 0.1rem; }
.ficha__row .leader { border-bottom: 4px dotted var(--ink); opacity: 0.5; transform: translateY(-0.3em); min-width: 1rem; }
.ficha__val { font-weight: 600; }
.ficha__foot { margin: 1.25rem -1.5rem 0; padding: 0.85rem 1.5rem; background: var(--ink); color: var(--bg); display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.ficha__foot .nums { font-weight: 400; }
@media (max-width: 26em) { .ficha__row { grid-template-columns: 1.6rem 1fr auto; } .ficha__row .leader { display: none; } }

/* lactato */
.fig--lactato { max-width: 34rem; }
.fig--lactato .f-band { fill: var(--soft); }
.fig--lactato .f-band--alt { fill: transparent; }
.fig--lactato .f-zone { font-weight: 600; font-size: 14px; }
.fig--lactato .f-thresh { stroke: var(--fg2); stroke-width: 2; stroke-dasharray: 5 5; }
.fig--lactato .f-curve { fill: none; stroke: var(--fg2); stroke-width: 3; stroke-linecap: square; }
.fig--lactato .f-axis-lines line { stroke: var(--fg); stroke-width: 2; }
.fig--lactato .f-small { font-size: 13px; fill: var(--muted); }
.fig--lactato .fig__legend b { font-weight: 600; }

/* antes e depois */
.fig--ad .cyc--before { opacity: calc(0.4 * (1 - var(--mix, 1)) + 0.4); }
.fig--ad .cyc--before .f-bike, .fig--ad .cyc--before .f-body { stroke: var(--fg); }
.fig--ad .cyc--before .f-body { opacity: 0.55; }
.fig--ad .cyc--after { opacity: var(--mix, 1); }
.fig--ad .cyc--after .f-body { stroke: var(--fg2); }
.fig--ad .cyc--after .f-bike { opacity: 0.35; }
.fig--ad .cyc--after .f-head { fill: var(--paper); stroke: var(--fg2); }
.fig--ad .cyc { transition: opacity 120ms linear; }
.fig-ad__ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; margin-top: 1rem; max-width: 24rem; }
.fig-ad__ctl input[type="range"] { width: 100%; accent-color: var(--accent); height: 2.75rem; margin: 0; }
.fig__legend--ad { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .fig--ad .cyc { transition: none; } }

/* figuras dentro da coluna de leitura e das páginas */
.reading .fig, .page .fig { max-width: min(100%, 34rem); }
.reading .fig--selim-compact { max-width: 18rem; }
.pricetable__inner .fig--selim-compact { margin-top: 2.5rem; max-width: 16rem; }
.fig--corpo { margin-top: 2rem; }
.prose .fig { margin: 2.5rem 0; }
/* Tablet and phone: support pages follow the page margin instead of centring a narrower column. */
@media (max-width: 64em) {
  .page__inner, .page__inner--wide, .page__inner--shop, .page__photo, .post { max-width: none; margin-inline: var(--margin); }
}
.page__gallery .drag { margin-left: 0; margin-right: calc(-1 * var(--margin)); padding-left: 0; scroll-padding-left: 0; }

/* Blog rows and product page: text aligned to the page margin, tone bleeds behind it. */
.row { margin-inline: calc(-1 * min(1.25rem, var(--margin))); padding-inline: min(1.25rem, var(--margin)); }
.row--link { margin-inline: calc(-1 * min(1.25rem, var(--margin))); }
.row--link a { padding: 0.9rem min(1.25rem, var(--margin)); display: flex; align-items: center; gap: 1rem; }
.more__thumb { flex: 0 0 4.5rem; width: 4.5rem; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); display: block; }
.more__thumb picture, .more__thumb img, .more__thumb .img-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
@media (min-width: 56.25em) { .product { grid-template-columns: 55fr 45fr; } .product__img { aspect-ratio: 4 / 5; } }
@media (max-width: 56.24em) { .product__text h1 { max-width: none; font-size: clamp(2rem, 1.1rem + 2.4vw, 2.5rem); overflow-wrap: anywhere; } }
.page__gallery .gallery__head { padding-right: 0.25rem; }
.more-products { margin-top: 4rem; }
.more-products h2 { font-size: var(--step-head-col); margin-bottom: 1.5rem; }
.more-products .shop { margin-top: 0; }
@media (max-width: 64em) { .page p, .page section h2, .page .lead { max-width: none; } }
@media (max-width: 56.24em) { .product__img { aspect-ratio: 4 / 3; } }

/* ===== Home v4: marca, factos do hero, modalidades, o que levas, estúdio, blog, loja ===== */

/* marca: o SVG de logo.svg inline a currentColor; o CSS sobrepõe-se ao stroke-width do ficheiro para ler a 32 px */
.wordmark { gap: 0.6rem; }
.wordmark__mark { width: 1.35rem; height: 2.25rem; flex: none; }
.logo g { stroke-width: 9; }
.footer__brand { display: flex; align-items: flex-end; gap: 2.5vw; }
.footer__mark { width: 9vw; height: 15vw; flex: none; margin-bottom: 0.5vw; }
.footer__mark g { stroke-width: 5.5; }
.footer__name .mark { font-size: 16.5vw; }
.footer__name .legal { max-width: none; }
@media (max-width: 56.24em) {
  .footer__brand { gap: 3.5vw; }
  .footer__mark { width: 9.5vw; height: 15.8vw; }
  .footer__name .mark { font-size: 15vw; }
}

/* hero: uma linha de factos reais por baixo das ações */
.hero .hero__facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 2.25rem; font-size: var(--step-small); font-weight: 600; }
.hero__facts li { display: inline-flex; align-items: center; min-height: 1.5rem; }
.hero__facts .icon { color: var(--accent); }

/* para quem pedala: livro-razão de quatro linhas em degraus de tom, o ícone abre cada linha */
.mods .mods__list { margin: 2.25rem calc(var(--pad) * -1) 0; }
.mods__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: start; padding: 1.5rem var(--pad); }
.mods__row:nth-child(odd) { background: var(--surface); }
.mods__icon { grid-row: 1 / span 2; color: var(--accent); display: block; }
.mods__icon .icon { width: 2.25rem; height: 2.25rem; vertical-align: 0; }
.mods__row h3 { font-size: var(--step-lead); line-height: 1.2; min-height: 2.25rem; display: flex; align-items: center; }
.mods__row p { max-width: var(--measure); }

/* o que levas: lista com ícones e a ficha de medidas */
.takeaway .takeaway__list { margin-top: 2rem; display: grid; gap: 0.25rem; max-width: var(--measure); }
.takeaway__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.1rem 0.8rem; padding: 0.7rem 0; }
.takeaway__list .icon { grid-row: 1 / span 2; color: var(--accent); margin-top: 0.15rem; }
.takeaway__list b, .takeaway__list span { grid-column: 2; }
.takeaway .fig--ficha { margin-top: 2.5rem; }

/* o estúdio: a foto anotada ocupa a coluna inteira, lista por baixo; depois a fila de fotografias */
.studio .fig--foto { margin-top: 2.25rem; max-width: 34rem; grid-template-columns: minmax(0, 1fr); }
.studio .fig--foto .fig-foto__frame { max-width: none; grid-row: auto; }
.studio .fig--foto .fig__points { margin-top: 0.5rem; }
.studio .gallery__head { margin-top: 3rem; font-weight: 600; }
.studio .gallery__head .nums { font-weight: 400; color: var(--muted); }
.studio .drag { margin-top: 1rem; }

/* do blog: três linhas com capa, título e excerto */
.posts .posts__list { margin: 2rem calc(var(--pad) * -1) 0; }
.posts__item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.4rem 1.25rem; align-items: start; padding: 1.25rem var(--pad); }
.posts__item:nth-child(odd) { background: var(--surface); }
.posts__cover { grid-row: 1 / span 2; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); }
.posts__item:nth-child(even) .posts__cover { background: var(--surface); }
.posts__cover picture, .posts__cover img, .posts__cover .img-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.posts__title { font-size: var(--step-lead); line-height: 1.15; max-width: 26ch; }
.posts__title a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .posts__title a:hover { color: var(--accent); } }
.posts__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.posts .posts__all, .goods .goods__all { margin-top: 1.75rem; }
.posts__all .link, .goods__all .link { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* da loja: três produtos, imagem, nome e preço (reutiliza .item da loja) */
.goods .goods__list { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.goods .item__name { font-size: var(--step-body); }
.goods .item__price { font-size: var(--step-body); font-weight: 600; padding-top: 0.1rem; }
@media (max-width: 40em) {
  .goods .goods__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-inline: calc(var(--pad) * -1); }
  .goods .item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: center; padding: 1rem var(--pad); }
  .goods .item:nth-child(odd) { background: var(--surface); }
  .goods .item__img { grid-row: 1 / span 2; margin-bottom: 0; }
  .goods .item > * + * { margin-top: 0; }
  .posts__item { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.3rem 1rem; }
  .posts__title { max-width: none; }
}

/* ===== v5 ===== */
/* breadcrumbs visíveis: lista em linha, separador "›", pequeno e discreto; o último item sem link */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: var(--step-small); line-height: 1.45; color: var(--muted); min-width: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 0 0.4rem; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--muted); }
.crumbs a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; } }
.crumbs li[aria-current="page"] span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.page__crumbs { margin-bottom: 0; }
.page__crumbs .crumbs { margin-bottom: 1.5rem; }
.post .crumbs { margin-bottom: 1.5rem; }
@media (max-width: 40em) { .crumbs li[aria-current="page"] span { max-width: 14rem; } }

/* o que inclui cada opção (pricing): tabela ≥ 56.25em, listas por opção abaixo */
.incl { margin-top: 3rem; }
.incl h3 { font-size: var(--step-lead); }
.incl__table { margin-top: 1.25rem; table-layout: fixed; }
.incl__table th, .incl__table td { padding: 0.75rem 0.75rem; vertical-align: top; text-align: left; }
.incl__table thead th { font-weight: 600; font-size: var(--step-small); line-height: 1.3; text-wrap: balance; padding-bottom: 1rem; }
.incl__table thead th:first-child { width: 36%; }
.incl__table thead th .nums { display: block; font-weight: 400; color: var(--muted); margin-top: 0.2rem; }
.incl__table tbody th { font-weight: 400; font-size: var(--step-small); line-height: 1.4; }
.incl__table tbody tr:nth-child(odd) { background: var(--surface); }
.incl__table td { text-align: center; }
.incl__dot { color: var(--accent); font-size: 1.6rem; line-height: 0.75; display: inline-block; }
.incl__lists { display: none; margin-top: 1.25rem; }
.incl__opt { border-top: 2px solid var(--surface); }
.incl__opt:last-child { border-bottom: 2px solid var(--surface); }
.incl__opt summary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; min-height: 3.25rem; padding: 0.85rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.incl__opt summary::-webkit-details-marker { display: none; }
.incl__opt summary .nums { font-weight: 400; white-space: nowrap; }
.incl__opt[open] summary { color: var(--accent); }
.incl__opt ul { list-style: none; margin: 0; padding: 0 0 1.25rem; display: grid; gap: 0.4rem; }
.incl__opt li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0 0.6rem; align-items: baseline; font-size: var(--step-small); line-height: 1.45; }
.incl__opt li::before { content: "•"; color: var(--accent); font-size: 1.25rem; line-height: 0.9; }
@media (max-width: 56.24em) {
  .incl__table { display: none; }
  .incl__lists { display: block; }
}

/* /contactos */
.contact .page__inner--wide { max-width: 52rem; }
.contact h1 { max-width: 12ch; }
.contact .contact__list { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.contact__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.2rem 0.85rem; align-items: start; padding: 1.1rem 0; min-width: 0; }
.contact__i { grid-row: 1 / span 2; color: var(--accent); display: block; margin-top: 0.05rem; }
.contact__i .icon { vertical-align: 0; }
.contact__k { grid-column: 2; display: block; font-size: var(--step-small); font-weight: 600; color: var(--muted); line-height: 1.5rem; }
.contact__v { grid-column: 2; }
.contact__v { line-height: 1.5; overflow-wrap: anywhere; }
.contact__v a { text-decoration: none; display: inline-block; padding-block: 0.15rem; }
.contact__v a:not(.link) { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .contact__v a:hover { color: var(--accent); } }
.contact__v .link { font-size: var(--step-small); display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.5rem 0; }
.contact .page__inner--wide > section { margin-top: 5rem; }
/* lista de cidades da figura da região: degraus de tom em vez de linhas (como .pricetable) */
.contact .fig-mapa__cities li { border-bottom: 0; padding: 0.5rem 0.75rem; }
.contact .fig-mapa__cities li:nth-child(odd) { background: var(--surface); }
.contact .contact__map .fig, .contact .contact__region .fig { max-width: none; margin-top: 0; }
.contact .contact__map { margin-top: 2rem; }
.contact .contact__region .fig { margin-top: 2rem; }
.contact .contact__map + .ways { margin-top: 3rem; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; }
.way { min-width: 0; }
.way h3 { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; }
.way p { margin-top: 0.6rem; max-width: 40ch; }
.way .link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.5rem; }
.times { margin-top: 1.75rem; max-width: 34rem; }
.times th, .times td { text-align: left; padding: 0.7rem 0.9rem; vertical-align: baseline; }
.times thead th { font-weight: 600; font-size: var(--step-small); color: var(--muted); padding-top: 0; }
.times tbody th { font-weight: 400; }
.times td { white-space: nowrap; text-align: right; }
.times tbody tr:nth-child(odd) { background: var(--surface); }
/* o que trazer: um campo de tom, texto em duas colunas no desktop */
.contact .contact__bring { background: var(--surface); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.contact .contact__bring h2 { margin-bottom: 1.25rem; }
.contact .contact__bring p { max-width: 62ch; }
.contact .page__photo { max-width: 52rem; aspect-ratio: 16 / 9; margin-bottom: 2.5rem; }
/* o formulário da home dentro da página: sem o sangramento da coluna de leitura; no desktop, formulário e painel lado a lado */
.contact #marcar { margin-top: 5rem; }
.contact #marcar > .book__intro { margin-top: 1.5rem; }
.contact #marcar > .form { margin-top: 2.5rem; }
.contact #marcar > .book__alt { margin-top: 3.5rem; }
@media (min-width: 56.25em) {
  .contact .contact__bring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.5rem; }
  .contact .contact__bring h2 { grid-column: 1 / -1; }
  .contact .contact__bring p { max-width: none; }
  .contact .contact__bring p + p { margin-top: 0; }
  .contact #marcar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  .contact #marcar > h2, .contact #marcar > .book__intro { grid-column: 1 / -1; }
  .contact #marcar > .form { grid-column: 1; }
  .contact #marcar > .book__alt { grid-column: 2; margin-top: 2.5rem; position: sticky; top: 6rem; }
  .contact #marcar > .book__alt .book__email { font-size: clamp(1.25rem, 0.6rem + 1.3vw, 1.75rem); }
}
.contact .page__gallery { margin-top: 4.5rem; }
.contact .book__alt { margin-inline: 0; padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.contact .book__alt p, .contact .book__alt .book__email { max-width: none; }
.contact .book__email { font-size: clamp(1.5rem, 0.6rem + 2.6vw, 2.75rem); }
@media (max-width: 64em) {
  .contact .book__alt { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
}
@media (max-width: 40em) {
  .contact .contact__list { grid-template-columns: minmax(0, 1fr); }
  .contact__list li { padding-block: 0.85rem; }
  .times { max-width: none; }
  .times th, .times td { padding-inline: 0.6rem; }
}

/* ===== Páginas de apoio v6 ===== */
/* Ritmo de duas colunas (docs/layout-paginas.md). Em ≥ 64em, nas páginas .page--cols (/bike-fit, /performance,
   /privacidade), cada <section> de .page__inner é uma grelha: coluna 1 o texto (.page__text, até 34rem: h2, p, ul.plain,
   ligações), coluna 2 as figuras (.page__figs: .fig, .route, fotos anotadas, linhas de serviços), alinhadas ao topo.
   A cabeça (.page__head) põe o h1 e o lead na coluna 1 e a foto do topo em 4:5 na coluna 2. O texto da coluna 1 fica
   sticky enquanto a coluna das figuras é mais alta. Abaixo de 64em nada disto se aplica: uma coluna, como antes. */
.page--cols { --page-gap: clamp(2rem, 4vw, 4.5rem); }
.page__head-text > .lead { margin-top: 1.5rem; }
/* serviços (/performance) e opções (/bike-fit, Preços): linhas, nome e preço na mesma linha, quem e texto por baixo */
.page .services { margin-inline: calc(-1 * min(1rem, var(--margin))); }   /* o tom sai 1rem para fora, o texto fica alinhado com o h2 */
.page .service { padding: 0.9rem min(1rem, var(--margin)) 1rem; margin-top: 0; background: none; border: 0; }
.page .service:nth-child(odd) { background: var(--surface); }
.page .service h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; flex-wrap: wrap; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.page .service h3 > span:first-child { flex: 1 1 14rem; min-width: 0; }
.page .service h3 .nums { font-weight: 400; white-space: nowrap; color: var(--ink); }
.page .service p { margin-top: 0.4rem; max-width: 40rem; }
.page .service .service__who { font-size: var(--step-small); color: var(--muted); font-weight: 600; }
.page .service .service__who + .service__text { margin-top: 0.3rem; }
.page__figs > .services { margin-top: 0; }
@media (min-width: 64em) {
  .page--cols .page__inner { max-width: 76rem; }
  /* cabeça: h1 + lead à esquerda, foto 4:5 à direita, alinhada ao topo do título */
  .page--cols .page__head { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: var(--page-gap); align-items: start; }
  .page--cols .page__head-text { grid-column: 1; grid-row: 1; padding-top: 0.5rem; }
  .page--cols .page__head .page__photo { grid-column: 2; grid-row: 1; margin: 0; width: 100%; max-width: 30rem; aspect-ratio: 4 / 5; justify-self: start; }
  .page--cols .page__head .page__photo img, .page--cols .page__head .page__photo picture { width: 100%; height: 100%; object-fit: cover; }
  .page--cols .page__head + section { margin-top: 5rem; }
  /* secções: [texto 34rem | figuras 1fr] */
  .page--cols .page__inner > section { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: var(--page-gap); align-items: start; margin-top: 5rem; }
  .page--cols .page__inner > section > .page__text { grid-column: 1; grid-row: 1; position: sticky; top: 5.5rem; }
  .page--cols .page__inner > section > .page__figs { grid-column: 2; grid-row: 1; margin-top: 0; min-width: 0; }
  .page--cols .page__inner > section > .page__text > h2 { margin-bottom: 1.25rem; }
  .page--cols .page__inner > section > .page__text > .services { margin-top: 1.75rem; }
  /* /privacidade: só texto, 40rem; a coluna 2 fica vazia de propósito */
  .page--legal .page__inner > section, .page--legal .page__head { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); }
  .page--legal .page__inner > section, .page--legal .page__head + section { margin-top: 3.5rem; }
  .page--legal .page__inner > section > .page__text { position: static; }
  .page--legal .page p, .page--legal .page__text p { max-width: 40rem; }
  /* figuras na coluna 2: as de duas colunas (foto anotada, bicicleta, pedalada, mapa, percurso) usam a largura toda;
     as restantes alinham à esquerda com 40rem; as larguras das figuras de figures.css estão nesse ficheiro */
  .page--cols .page__figs > .fig { max-width: 40rem; }
  .page--cols .page__figs > .fig--foto, .page--cols .page__figs > .fig--route, .page--cols .page__figs > .fig--mapa, .page--cols .page__figs > .fig--strip { max-width: none; }
  .page--cols .page__figs > .fig--foto { grid-template-columns: minmax(0, 21rem) minmax(13rem, 1fr); column-gap: 1.75rem; }
  .page--cols .page__figs .fig-foto__frame { max-width: 21rem; }
  .page--cols .page__figs > .fig--selim { max-width: 40rem; }
  .page--cols .page__figs > .fig--ficha { max-width: 32rem; }
  .page--cols .page__figs > .fig--lactato { max-width: 36rem; }
  .page--cols .page__figs .route__text p { max-width: none; }
  .page--cols .page__figs .fig figcaption { max-width: 40rem; }
  .page--cols .page__actions { margin-top: 5rem; }
  /* galeria: 4 fotografias em linha com a mesma altura (4:5), sem deslize lateral; abaixo de 64em mantém o .drag */
  .page--cols .page__gallery { margin-top: 5rem; }
  .page--cols .page__gallery .drag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; height: auto; overflow: visible; margin-inline: 0; padding-inline: 0; cursor: default; scroll-snap-type: none; }
  .page--cols .page__gallery .drag .mod--pair { display: contents; }
  .page--cols .page__gallery .drag > figure, .page--cols .page__gallery .drag .mod--pair > figure { width: auto; height: auto; aspect-ratio: 4 / 5; overflow: hidden; }
  .page--cols .page__gallery .drag figure img, .page--cols .page__gallery .drag figure picture { width: 100%; height: 100%; object-fit: cover; }
}