@font-face { font-family: "Fivo Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../assets/fonts/FivoSans-Regular.otf) format("opentype"); }
@font-face { font-family: "Fivo Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(../assets/fonts/FivoSans-Medium.otf) format("opentype"); }
@font-face { font-family: "Fivo Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(../assets/fonts/FivoSans-Bold.otf) format("opentype"); }
@font-face { font-family: "Fivo Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(../assets/fonts/FivoSans-Heavy.otf) format("opentype"); }
@font-face { font-family: "Fivo Sans"; font-weight: 900; font-style: normal; font-display: swap; src: url(../assets/fonts/FivoSans-Black.otf) format("opentype"); }
@font-face { font-family: "Fivo Sans"; font-weight: 800; font-style: italic; font-display: swap; src: url(../assets/fonts/FivoSans-Heavy-Oblique.otf) format("opentype"); }

/* ==========================================================
   ESPRESSO EXPLORER - estilos
   Para mudar o visual, comece pelas variáveis em :root.
   ========================================================== */
/* ==========================================================
   IDENTIDADE VISUAL - baseada no Brandbook Espresso Explorer
   Cores oficiais: roxo florescente #6B67F9, roxo chumbo #2F2935,
   off-white #F1F2F2 e verde limão #CFFE60.
   Regras do brandbook: no máximo duas cores por texto; títulos em
   Fivo Sans Heavy; destaques em Heavy Oblique.
   ========================================================== */
:root {
  /* paleta oficial */
  --purple: #6B67F9;
  --charcoal: #2F2935;
  --offwhite: #F1F2F2;
  --lime: #CFFE60;

  /* papéis das cores no site */
  --accent: var(--purple);
  --accent-ink: #5B57EA;                /* roxo um pouco mais escuro, só para textos pequenos sobre fundo claro (contraste) */
  --accent-foreground: #FFFFFF;
  --accent-bright: var(--lime);         /* destaque sobre fundo escuro ou roxo */
  --accent-soft: #E6E5FE;
  --background: var(--offwhite);
  --card: #FFFFFF;
  --secondary: #E7E8E8;
  --foreground: var(--charcoal);
  --ink-soft: #5B5562;
  --muted-foreground: #6E6975;
  --border: #DADBDC;

  --panel: var(--charcoal);             /* seções escuras */
  --panel-foreground: #FFFFFF;
  --panel-soft: #CBC8D0;
  --panel-line: #463F4E;

  /* formas orgânicas */
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* fonte da marca: Fivo Sans (arquivos em assets/fonts) */
  --font-display: "Fivo Sans", system-ui, sans-serif;   /* títulos: Heavy */
  --font-sans: "Fivo Sans", system-ui, sans-serif;      /* textos */
  --font-mono: "Fivo Sans", system-ui, sans-serif;
  --pad-x: 16px;
  --max: 1440px;
}
@media (min-width: 768px) { :root { --pad-x: 48px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }

.eyebrow { font-family: var(--font-mono); letter-spacing: .24em; text-transform: uppercase; font-size: 11px; }
.accent { color: var(--accent); }
.container { max-width: var(--max); margin: 0 auto; }
.section { padding: 64px var(--pad-x); }
@media (min-width: 768px) { .section { padding-block: 112px; } }
.section--lg { padding-block: 80px; }
@media (min-width: 768px) { .section--lg { padding-block: 128px; } }
.section--dark { background: var(--panel); color: var(--panel-foreground); }
.section--gray { background: var(--secondary); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-foreground); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; transition: .2s; }
.btn:hover { background: transparent; color: var(--accent); }
.btn:disabled { opacity: .5; }
.btn--sm { padding: 10px 16px; }
.btn--outline-light { background: transparent; border-color: var(--panel-foreground); color: var(--panel-foreground); }
.btn--outline-light:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }

/* ---------- Cabeçalho ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad-x); border-bottom: 1px solid transparent; background: transparent; transition: background-color .3s, border-color .3s, backdrop-filter .3s; }
/* Depois do scroll (classe .is-scrolled, ver main.js) o fundo volta */
.header.is-scrolled { border-bottom-color: var(--border); background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(8px); }
/* Logo em SVG: a cor vem de "color" (currentColor). Troque a cor ou o tamanho aqui. */
.nav { display: none; gap: 32px; }
@media (min-width: 768px) { .nav { display: flex; } }
.nav a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: rgb(255 255 255 / .9); transition: color .2s; }
.nav a:hover { color: var(--accent-bright); }
.header.is-scrolled .nav a { color: var(--ink-soft); }
.header.is-scrolled .nav a:hover { color: var(--accent); }
/* Botão do header: branco sobre a foto, marrom depois do scroll */
.header .btn { background: #fff; border-color: #fff; color: var(--foreground); }
.header .btn:hover { background: transparent; color: #fff; }
.header.is-scrolled .btn { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }
.header.is-scrolled .btn:hover { background: transparent; color: var(--accent); }

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding-top: 140px; overflow: hidden; background: var(--panel); color: #fff; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; /* menor = imagem mais para baixo */ filter: brightness(.62); /* escurece a foto, como no original */ }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(rgb(47 41 53 / .5) 0%, rgb(47 41 53 / .4) 54%, rgb(47 41 53 / .92) 100%); }
.hero__bottom { position: relative; z-index: 10; padding-inline: var(--pad-x); }
.hero__bottom { padding-bottom: 40px; }
@media (min-width: 768px) { .hero__bottom { padding-bottom: 56px; } }
.hero h1 { margin-top: 16px; font-size: clamp(40px, 8vw, 118px); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.025em; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--accent-bright); }
.hero__row p { max-width: 52ch; font-size: 16px; color: rgb(255 255 255 / .9); }
@media (min-width: 768px) { .hero__row p { font-size: 18px; } }
.hero__count { text-align: right; }
.hero__count .eyebrow { color: var(--accent-bright); }
.hero__count .time { margin-top: 4px; font-family: var(--font-mono); font-size: 20px; font-weight: 800; }
@media (min-width: 768px) { .hero__count .time { font-size: 30px; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--border); padding: 14px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee__set { white-space: nowrap; padding-right: 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: var(--ink-soft); }
.marquee__set b { padding-inline: 8px; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Título de seção ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 40px; padding-top: 16px; border-top: 2px solid var(--accent); }
@media (min-width: 768px) { .sec-head { margin-bottom: 56px; } }
.sec-head h2 { font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.025em; }
@media (min-width: 768px) { .sec-head h2 { font-size: 60px; } }

/* ---------- Intro ---------- */
.lead { max-width: 22em; font-size: 24px; font-weight: 600; line-height: 1.375; letter-spacing: -.025em; }
@media (min-width: 768px) { .lead { font-size: 48px; } }
.lead em { font-style: normal; border-bottom: 3px solid var(--accent); }
.intro__grid { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 768px) { .intro__grid { grid-template-columns: 1.2fr .8fr; gap: 64px; } }
.intro__text { max-width: 56ch; color: var(--ink-soft); }
.intro__text p + p { margin-top: 16px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; align-self: start; border: 1px solid var(--border); }
.stats > div { padding: 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats > div:nth-child(2n) { border-right: 0; }
.stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.stats b { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: var(--accent); }
@media (min-width: 768px) { .stats b { font-size: 36px; } }
.stats span { display: block; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-foreground); }

/* ---------- Corridas ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter { padding: 8px 16px; border: 1px solid var(--border); background: var(--secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; transition: .2s; }
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-foreground); }
.races { display: grid; gap: 1px; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 640px) { .races { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .races { grid-template-columns: repeat(3, 1fr); } }
.race { display: flex; flex-direction: column; background: var(--background); text-align: left; }
.race[hidden] { display: none; }
.race__img { aspect-ratio: 4/3; overflow: hidden; }
.race__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.race:hover .race__img img { transform: scale(1.05); }
.race__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px; }
.badge { white-space: nowrap; border: 1px solid var(--accent); background: var(--accent-soft); padding: 4px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); }
.race h3, .race h2 { font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.025em; }
.race__meta { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-foreground); }
.race p { font-size: 15px; color: var(--ink-soft); }
.race__more { display: flex; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.race__more span:last-child { color: var(--accent); transition: transform .2s; }
.race:hover .race__more { color: var(--accent); }
.race:hover .race__more span:last-child { transform: translateX(6px); }
.note { margin-top: 24px; color: var(--muted-foreground); }

/* ---------- Pacote (escuro) ---------- */
.included { display: grid; gap: 1px; background: var(--panel-line); }
@media (min-width: 768px) { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .included { grid-template-columns: repeat(3, 1fr); } }
.included > div { background: var(--panel); padding: 28px; }
.included h3 { margin-top: 12px; font-size: 20px; font-weight: 800; text-transform: uppercase; }
.included p { margin-top: 8px; color: var(--panel-soft); }
.hotel { display: grid; gap: 24px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--panel-line); }
@media (min-width: 768px) { .hotel { grid-template-columns: 1fr 1.4fr; } }
.hotel .stars { color: var(--accent-bright); }
.hotel .eyebrow { margin-top: 8px; color: var(--panel-soft); }
.hotel h3 { margin-top: 8px; font-size: 30px; font-weight: 800; text-transform: uppercase; }
.hotel__text { color: var(--panel-soft); }
.hotel__text > * + * { margin-top: 16px; }

/* ---------- Filosofia ---------- */
.philo { display: grid; align-items: start; gap: 40px; }
@media (min-width: 768px) { .philo { grid-template-columns: 1fr 1fr; gap: 64px; } }
.philo h3 { font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1.2; }
@media (min-width: 768px) { .philo h3 { font-size: 48px; } }
.philo__text { margin-top: 24px; color: var(--ink-soft); }
.philo__text p + p { margin-top: 16px; }

/* ---------- Como funciona ---------- */
.steps { display: grid; gap: 40px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-top: 20px; border-top: 2px solid var(--foreground); }
.step .n { font-size: 60px; font-weight: 900; line-height: 1.1; color: var(--accent); }
.step h3 { margin-top: 12px; font-size: 24px; font-weight: 800; text-transform: uppercase; }
.step p { margin-top: 8px; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; }
@media (min-width: 768px) { .faq summary { font-size: 24px; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font-size: 24px; color: var(--accent); transition: transform .2s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq p { max-width: 70ch; padding-bottom: 24px; color: var(--ink-soft); }

/* ---------- Formulários ---------- */
.split { display: grid; gap: 40px; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.form { border: 1px solid var(--border); background: var(--background); color: var(--foreground); padding: 20px; }
@media (min-width: 768px) { .form { padding: 32px; } }
.row { display: grid; gap: 20px; }
.row > * { min-width: 0; }
@media (min-width: 768px) { .row { grid-template-columns: 1fr 1fr; } }
.row + .row, .row + .field, .field + .field { margin-top: 20px; }
.field label, .field legend { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 0; background: var(--background); color: inherit; font: inherit; outline: none; transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 120px; resize: vertical; }
.hp { display: none; }
.form__msg { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 24px 0 0; }
.tiers { display: grid; gap: 12px; margin-top: 12px; }
.tier { display: block; padding: 16px; border: 2px solid var(--border); cursor: pointer; transition: .2s; }
.tier:hover { border-color: var(--foreground); }
.tier input { width: auto; margin-top: 6px; accent-color: var(--accent); }
.tier ul { display: none; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-soft); }
@media (min-width: 768px) { .tier ul { grid-template-columns: 1fr 1fr; } }
.tier li { display: flex; gap: 8px; }
.tier li::before { content: "+"; color: var(--accent); }

/* ---------- CTA final ---------- */
.cta .eyebrow { color: var(--accent-bright); }
.cta h2 { margin-top: 16px; font-size: clamp(44px, 8vw, 120px); font-weight: 900; text-transform: uppercase; line-height: .92; }
.cta p { margin-top: 24px; max-width: 52ch; font-size: 18px; color: var(--panel-soft); }

/* ---------- Rodapé ---------- */
.footer { padding: 56px var(--pad-x) 32px; }
.footer__grid { display: grid; gap: 40px; max-width: var(--max); margin: 0 auto; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }
.footer strong { display: block; font-size: 15px; font-weight: 800; text-transform: lowercase; }
.footer p, .footer li { font-size: 14px; color: var(--ink-soft); }
.footer p { margin-top: 8px; }
.footer h4, .footer h3 { font-weight: 600; color: var(--accent); }
.footer ul { margin-top: 12px; }
.footer li + li { margin-top: 6px; }
.footer a:hover { color: var(--accent); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; max-width: var(--max); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }

/* ---------- Idioma (EN / PT) no header ---------- */
.header__right { display: flex; align-items: center; gap: 20px; }
.lang { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: rgb(255 255 255 / .6); transition: color .2s; }
.lang button { padding: 4px 2px; font-weight: 700; letter-spacing: .12em; color: rgb(255 255 255 / .6); transition: color .2s; }
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { color: #fff; border-bottom: 2px solid currentColor; }
.header.is-scrolled .lang, .header.is-scrolled .lang button { color: var(--muted-foreground); }
.header.is-scrolled .lang button:hover { color: var(--accent); }
.header.is-scrolled .lang button[aria-pressed="true"] { color: var(--foreground); }

/* ---------- Páginas internas (sem hero) ---------- */
.page-top { padding-top: 130px; }
.sec-head h1 { font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.025em; }
@media (min-width: 768px) { .sec-head h1 { font-size: 60px; } }
.races-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.races-foot .note { margin-top: 0; }
a.race { color: inherit; }
.race.is-past .race__img img { filter: grayscale(1); opacity: .7; }
.race.is-past .badge { border-color: var(--muted-foreground); background: var(--secondary); color: var(--muted-foreground); }

/* ---------- Página de uma corrida ---------- */
.back { display: inline-block; margin-bottom: 28px; color: var(--accent); font-weight: 600; }
.back:hover { text-decoration: underline; }
.race-hero { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .race-hero { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.race-hero img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.race-hero h1 { margin: 14px 0 10px; font-size: clamp(44px, 7vw, 96px); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: -.025em; }
.race-hero__text { margin-top: 18px; font-size: 18px; color: var(--ink-soft); }
.race-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.notice { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--border); background: var(--secondary); color: var(--ink-soft); }
.btn--outline { background: transparent; color: var(--foreground); border-color: var(--foreground); }
.btn--outline:hover { background: var(--foreground); color: var(--background); }
.pkgs { display: grid; gap: 1px; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 768px) { .pkgs { grid-template-columns: repeat(3, 1fr); } }
.pkg { background: var(--background); padding: 28px; }
.pkg h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; }
.pkg p { margin-top: 12px; color: var(--ink-soft); }
.pkgs__btn { margin-top: 28px; }

/* ---------- CTA com campo de e-mail ---------- */
.cta__form { max-width: 560px; margin-top: 32px; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__row input { flex: 1 1 260px; min-width: 0; padding: 12px 16px; border: 2px solid var(--panel-foreground); border-radius: 0; background: transparent; color: var(--panel-foreground); font: inherit; outline: none; transition: border-color .2s; }
.cta__row input::placeholder { color: var(--panel-soft); }
.cta__row input:focus { border-color: var(--accent-bright); }
.cta__consent { margin-top: 12px; font-size: 13px; color: var(--panel-soft); }
.cta__msg { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent-bright); }
.philo__more { margin-top: 28px; }

/* ==========================================================
   FORMA ORGÂNICA: raios, cartões e componentes arredondados
   (os valores vêm de --r-sm, --r, --r-lg, --r-xl, --r-pill)
   ========================================================== */
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }

/* logo, botões, selos, filtros: formato pílula */
.btn, .filter, .badge, .cta__row input { border-radius: var(--r-pill); }
.btn { padding: 14px 26px; }
.btn--sm { padding: 11px 20px; }
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.header .btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--panel); }
.header.is-scrolled .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--outline { background: transparent; color: var(--foreground); border-color: var(--foreground); }
.btn--outline:hover { background: var(--foreground); border-color: var(--foreground); color: #fff; }
.btn--outline-light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter { padding: 9px 20px; }
.badge { padding: 5px 12px; }
.header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--border), 0 12px 30px -20px rgb(47 41 53 / .3); }
.lang button { border-radius: var(--r-pill); padding: 4px 8px; }
.lang button[aria-pressed="true"] { border-bottom: 0; background: rgb(255 255 255 / .18); }
.header.is-scrolled .lang button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }

/* hero e seções escuras viram "blocos" de cantos grandes */
.hero { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.section--dark { margin-inline: 12px; border-radius: var(--r-xl); }
@media (min-width: 768px) { .section--dark { margin-inline: 24px; } }
.marquee { border-block: 0; }
.sec-head { border-top: 0; padding-top: 0; position: relative; }
.sec-head::before { content: ""; display: block; width: 56px; height: 6px; margin-bottom: 18px; border-radius: var(--r-pill); background: var(--accent); }
.sec-head { flex-wrap: wrap; }
.lead em { border-bottom-color: var(--accent); }

/* cartões de corrida */
.races { gap: 20px; border: 0; background: none; }
.race { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.race:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 22px 40px -24px rgb(107 103 249 / .45); }
.race__img { margin: 10px 10px 0; border-radius: calc(var(--r-lg) - 8px); }
.race__more { border-top-color: var(--border); }

/* números, passos, FAQ */
.stats { border: 0; gap: 12px; }
.stats > div, .stats > div:nth-child(2n), .stats > div:nth-last-child(-n+2) { border: 0; border-radius: var(--r); background: var(--secondary); }
.step { border-top: 0; background: var(--background); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }
.faq { border-top: 0; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--border); border-radius: var(--r); padding: 0 24px; background: var(--background); transition: background .2s, border-color .2s; }
.faq details[open] { background: var(--accent-soft); border-color: transparent; }
.faq summary span { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--accent-soft); font-size: 22px; }
.faq details[open] summary span { background: var(--accent); color: #fff; }

/* imagens */
.philo img, .race-hero img { border-radius: var(--r-lg); }
.philo img { object-fit: cover; width: 100%; }

/* blocos escuros: o que inclui + hotel */
.included { gap: 16px; background: none; }
.included > div { border: 1px solid var(--panel-line); border-radius: var(--r-lg); background: rgb(255 255 255 / .04); }
.hotel { border-top-color: var(--panel-line); }

/* pacotes */
.pkgs { gap: 16px; border: 0; background: none; }
.pkg { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; }
.pkg:nth-child(2) { background: var(--accent-soft); border-color: transparent; }
.notice { border: 0; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-ink); }

/* campos e formulários */
.form { border-radius: var(--r-lg); }
.field input, .field select, .field textarea { border-radius: var(--r-sm); }
.tier { border-radius: var(--r); }
.cta__row input { padding: 14px 22px; }
.cta__row input:focus { border-color: var(--accent-bright); }
.cta__msg { color: var(--accent-bright); }
.back { color: var(--accent-ink); }
.race__more span:last-child, .stats b, .step .n, .footer h4, .footer h3 { color: var(--accent-ink); }
.section--dark .eyebrow, .hero__count .eyebrow { color: var(--accent-bright); }
.footer { padding-top: 72px; }
.sec-head { display: block; }

/* ==========================================================
   TIPOGRAFIA: Bricolage Grotesque (títulos) + DM Sans (textos)
   ========================================================== */
h1, h2, h3, .lead, .stats b, .step .n, .included h3, .pkg h3, .hotel h3, .faq summary, .race h3, .race h2 { font-family: var(--font-display); }
.hero h1, .cta h2, .race-hero h1 { font-weight: 800; letter-spacing: -.03em; }
.sec-head h1, .sec-head h2, .race h3, .race h2, .step h3, .included h3, .pkg h3, .hotel h3 { font-weight: 800; letter-spacing: -.02em; }
.lead { font-weight: 600; letter-spacing: -.03em; }
.faq summary { font-weight: 700; letter-spacing: -.01em; }
.eyebrow { font-weight: 600; letter-spacing: .18em; }
.hero__count .time, .total { font-variant-numeric: tabular-nums; font-weight: 700; }
.hero__count .time { font-family: var(--font-display); letter-spacing: -.01em; }
.race__meta, .btn, .filter, .badge, .nav a { font-weight: 700; }

/* Palavra de destaque (finish / chegada): preenchida na cor da marca.
   Contorno vazado não funciona bem com fontes variáveis (aparecem linhas internas). */

/* ==========================================================
   MARCA: logo em duas cores, destaques, botões e seções
   ========================================================== */
/* Logo: símbolo e nome são duas camadas, cada uma com sua cor (versões do brandbook) */
.header { --logo-symbol: var(--lime); --logo-text: var(--offwhite); }                 /* sobre a foto */
.header.is-scrolled { --logo-symbol: var(--purple); --logo-text: var(--charcoal); }   /* sobre fundo claro */
.logo { position: relative; display: block; height: 38px; aspect-ratio: 6000 / 1698; }
.logo::before, .logo::after { content: ""; position: absolute; inset: 0; transition: background-color .25s; }
.logo::before { background: var(--logo-symbol); -webkit-mask: url(../assets/logo-symbol.svg) center / contain no-repeat; mask: url(../assets/logo-symbol.svg) center / contain no-repeat; }
.logo::after { background: var(--logo-text); -webkit-mask: url(../assets/logo-text.svg) center / contain no-repeat; mask: url(../assets/logo-text.svg) center / contain no-repeat; }

/* palavra de destaque: Heavy Oblique em verde limão, como na peça do brandbook */
.text-outline { color: var(--lime); font-style: italic; -webkit-text-stroke: 0; padding-right: .06em; }

/* menu à direita, junto do seletor de idioma */
.header__right { gap: 28px; }
.nav { display: none; gap: 24px; }
@media (min-width: 768px) { .nav { display: flex; } }
.header.is-scrolled .nav a { color: var(--foreground); }

/* botões: roxo com texto branco; sobre fundo escuro, verde limão com texto chumbo */
.btn { font-weight: 800; }
.section--dark .btn:not(.btn--outline-light), .hero .btn { background: var(--lime); border-color: var(--lime); color: var(--charcoal); }
.section--dark .btn:not(.btn--outline-light):hover { background: #fff; border-color: #fff; color: var(--charcoal); }
.header .btn { background: #fff; border-color: #fff; color: var(--charcoal); }
.header .btn:hover { background: var(--lime); border-color: var(--lime); color: var(--charcoal); }
.header.is-scrolled .btn { background: var(--purple); border-color: var(--purple); color: #fff; }
.header.is-scrolled .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--outline:hover { background: var(--charcoal); border-color: var(--charcoal); }

/* cartões brancos sobre o fundo off-white */
.race, .faq details, .form, .pkg, .step, .tier { background: var(--card); }
.stats > div, .stats > div:nth-child(2n), .stats > div:nth-last-child(-n+2) { background: var(--card); }
.faq details[open] { background: var(--accent-soft); }
.field input, .field select, .field textarea { background: var(--offwhite); }
.header.is-scrolled { background: color-mix(in oklab, var(--offwhite) 92%, transparent); }
.badge { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.race.is-past .badge { background: var(--secondary); color: var(--muted-foreground); }
.race__img { margin: 0; border-radius: 0; }
.race__img img { border-radius: 0; }

/* seções escuras: barra e detalhes em verde limão */
.section--dark .sec-head::before { background: var(--lime); }
.section--dark .eyebrow, .hotel .stars, .cta .eyebrow { color: var(--lime); }
.included > div { background: rgb(255 255 255 / .05); }
.cta__msg { color: var(--lime); }
.cta__row input:focus { border-color: var(--lime); }

/* seção "como funciona": fundo roxo da marca */
.section--purple { margin-inline: 12px; border-radius: var(--r-xl); background: var(--purple); color: #fff; }
@media (min-width: 768px) { .section--purple { margin-inline: 24px; } }
.section--purple .sec-head::before { background: var(--lime); }
.section--purple .step { background: var(--charcoal); border-color: transparent; color: #fff; }
.section--purple .step .n { color: var(--lime); }
.section--purple .step p { color: var(--panel-soft); }

/* Fivo Sans: pesos da família */
h1, h2, h3, .hero h1, .cta h2, .race-hero h1 { font-weight: 800; }
.lead { font-weight: 700; letter-spacing: -.025em; }
body { font-weight: 400; }

/* ==========================================================
   DIVISORES DO BRANDBOOK: linha reta, em roxo, na largura toda
   ========================================================== */
:root { --divider: 3px solid var(--purple); --divider-thin: 2px solid var(--purple); }
.sec-head::before { width: 100%; height: 3px; margin-bottom: 22px; border-radius: 0; background: var(--purple); }
.section--dark .sec-head::before { background: var(--purple); }
.section--purple .sec-head::before { background: var(--lime); }   /* sobre fundo roxo, a linha roxa sumiria */
.hero__row { border-top: var(--divider); }
.hotel { border-top: var(--divider-thin); }
.race__more { border-top: var(--divider-thin); }
.footer__bottom { border-top: var(--divider); }
.footer { border-top: 0; }

/* hero: divisor em verde limão (o roxo some sobre a foto) */
.hero__row { border-top: 3px solid var(--lime); }

/* header: logo a esquerda; menu + idioma + botao agrupados a direita */
.header { display: flex; align-items: center; justify-content: space-between; }
.header__right { gap: 28px; }
/* ==========================================================
   MOVIMENTO (veja "Movimento" em js/main.js)
   ========================================================== */
.rv { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

/* hero: entrada ao carregar a pagina */
@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.hero h1 { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
.hero__row { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .35s both; }

/* parallax: a imagem e maior que a moldura e se desloca no scroll */
.hero__img { top: -10%; height: 120%; will-change: transform; }
.hero { isolation: isolate; }
.parallax { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.parallax img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; border-radius: 0; aspect-ratio: auto; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero h1, .hero__row { animation: none; }
}

/* ==========================================================
   CARROSSEL DE CORRIDAS (home) + hero sem cantos arredondados
   ========================================================== */
.hero { border-radius: 0; }
.carousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 2px 28px; margin: -8px -2px 0; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track .race { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; }
.races-foot__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.carousel__nav { display: flex; gap: 10px; }
.carousel__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 20px; font-weight: 700; transition: background-color .2s, opacity .2s, transform .2s; }
.carousel__btn:hover:not(:disabled) { background: var(--accent-ink); transform: scale(1.06); }
.carousel__btn:disabled { opacity: .3; cursor: default; }

/* carrossel de borda a borda: os cartoes saem pela lateral da tela (nao cortam na margem do conteudo).
   O primeiro cartao continua alinhado com o resto do conteudo. */
.carousel { --edge: calc((100vw - min(100vw - 2 * var(--pad-x), var(--max))) / 2); margin-inline: calc(50% - 50vw); }
.carousel__track { margin: 0; padding: 8px var(--edge) 28px; scroll-padding-inline: var(--edge); }

/* ==========================================================
   CARDS DE CORRIDA: etiqueta sobre a imagem, "em breve" e foto pendente
   ========================================================== */
.race__img { position: relative; }
.race__tag { position: absolute; top: 14px; left: 14px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--lime); color: var(--charcoal); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.race__ph { width: 100%; height: 100%; min-height: 200px; background: var(--purple); position: relative; }
.race__ph::after { content: ""; position: absolute; inset: 22%; background: var(--lime); -webkit-mask: url(../assets/logo-symbol.svg) center / contain no-repeat; mask: url(../assets/logo-symbol.svg) center / contain no-repeat; }
.race.is-soon { cursor: default; }
.race.is-soon:hover { transform: none; border-color: var(--border); box-shadow: none; }
.race.is-soon .race__more { color: var(--accent-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { background: var(--card); }
.fclear { padding: 9px 4px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.fclear[hidden] { display: none; }
.filter-count { margin: 0 0 22px; color: var(--muted-foreground); }
.empty { padding: 48px 0; font-size: 20px; font-weight: 700; color: var(--ink-soft); }
.empty[hidden] { display: none; }

/* ==========================================================
   REDES SOCIAIS (rodape) + MENU MOBILE
   ========================================================== */
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--purple); color: var(--purple); transition: background-color .2s, color .2s, transform .2s; }
.social a:hover { background: var(--purple); color: #fff; transform: translateY(-2px); }

.burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; transition: background-color .2s, color .2s; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .25s, top .25s; }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
.header.is-scrolled .burger { background: var(--accent-soft); color: var(--charcoal); }

.mnav { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--pad-x) 32px; background: var(--charcoal); color: #fff; opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s; overflow-y: auto; }
.mnav[hidden] { display: none; }
.mnav.open { opacity: 1; transform: none; }
.mnav__links { display: grid; }
.mnav__links a { padding: 18px 0; border-bottom: 3px solid var(--purple); font-family: var(--font-display); font-size: clamp(34px, 11vw, 54px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.mnav__links a:active { color: var(--lime); }
.mnav__bottom { display: grid; gap: 22px; justify-items: start; margin-top: 32px; }
.mnav .lang, .mnav .lang button { color: rgb(255 255 255 / .6); font-size: 15px; }
.mnav .lang button[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / .18); }
.mnav .btn { background: var(--lime); border-color: var(--lime); color: var(--charcoal); }
.mnav .social a { border-color: var(--lime); color: var(--lime); }
.mnav .social a:hover { background: var(--lime); color: var(--charcoal); }
.menu-lock { overflow: hidden; }

/* com o menu aberto o header volta ao visual sobre fundo escuro */
.header.menu-open, .header.menu-open.is-scrolled { background: var(--charcoal); border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; --logo-symbol: var(--lime); --logo-text: var(--offwhite); }
.header.menu-open .burger { background: rgb(255 255 255 / .16); color: #fff; }

@media (max-width: 767px) {
  .header__right { display: none; }
  .burger { display: block; }
}

/* celular: contagem do hero alinhada a esquerda (sozinha na linha) */
@media (max-width: 639px) { .hero__count { text-align: left; } }

/* ==========================================================
   MENU MOBILE: ajustes (idioma ao lado do X, fontes menores)
   ========================================================== */
.header__mobile { display: none; align-items: center; gap: 30px; }
.lang--m { display: none; }
.menu-open .lang--m { display: flex; }
.menu-open .lang--m, .menu-open .lang--m button { color: rgb(255 255 255 / .6); font-size: 15px; }
.menu-open .lang--m button[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / .18); }
.menu-open .lang--m button { padding: 8px 12px; }
.mnav__links a { font-size: clamp(22px, 6.4vw, 30px); border-bottom-width: 2px; padding: 16px 0; }
@media (max-width: 767px) {
  .header__right { display: none; }
  .burger { display: block; }
  .header__mobile { display: flex; }
}

/* rodape: logo da IATA */
.iata-logo { display: block; height: 52px; width: auto; margin-top: 20px; }

/* ==========================================================
   FILTROS EM MODAL (pagina de corridas)
   ========================================================== */
.ftoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 26px; }
.fbtn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--purple); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s; }
.fbtn:hover { background: var(--accent-ink); }
.fbadge { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--lime); color: var(--charcoal); font-size: 12px; letter-spacing: 0; }
.fbadge[hidden] { display: none; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.achip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.achip span { font-size: 16px; line-height: 1; }
.achip:hover { background: var(--purple); color: #fff; }
.ftoolbar .filter-count { margin: 0 0 0 auto; }
@media (max-width: 639px) { .ftoolbar .filter-count { margin: 0; width: 100%; order: 3; } }

dialog.fmodal { width: min(620px, calc(100vw - 32px)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--card); color: var(--foreground); overflow: hidden; box-shadow: 0 40px 80px -30px rgb(47 41 53 / .55); }
dialog.fmodal[open] { display: flex; flex-direction: column; animation: sheet-in .28s cubic-bezier(.2, .7, .2, 1); }
dialog.fmodal::backdrop { background: rgb(47 41 53 / .6); backdrop-filter: blur(3px); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 8px; }
.fmodal__head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.fmodal__x { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--offwhite); font-size: 26px; line-height: 1; }
.fmodal__x:hover { background: var(--accent-soft); color: var(--accent-ink); }
.fmodal__body { flex: 1; overflow-y: auto; padding: 8px 24px 16px; }
.fgroup { border: 0; padding: 18px 0; margin: 0; border-bottom: 2px solid var(--offwhite); }
.fgroup:last-child { border-bottom: 0; }
.fgroup legend { padding: 0; margin-bottom: 12px; color: var(--muted-foreground); }
.fopts { display: flex; flex-wrap: wrap; gap: 8px; }
.fmodal .filter { background: var(--offwhite); border-color: transparent; }
.fmodal .filter[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.fmodal__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 22px; border-top: 2px solid var(--offwhite); }
.fmodal__foot .btn { flex: 1; justify-content: center; max-width: 280px; }

/* celular: o modal vira uma "gaveta" colada embaixo */
@media (max-width: 639px) {
  dialog.fmodal { width: 100%; max-width: none; margin: auto 0 0; max-height: 90vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .fmodal__foot .btn { max-width: none; }
}

/* ==========================================================
   RITMO DE ESPACOS ENTRE SECOES + RODAPE COM 5 COLUNAS
   ========================================================== */
.section { padding-block: clamp(56px, 7vw, 96px); }
.section--lg { padding-block: clamp(64px, 8vw, 112px); }
/* duas secoes claras seguidas: so um espaco entre elas (antes eram dois somados) */
.section:not(.section--dark):not(.section--purple) + .section:not(.section--dark):not(.section--purple) { padding-top: 0; }
.page-top { padding-top: 130px; padding-bottom: clamp(56px, 7vw, 96px); }
.section--dark { margin-block: 0; }
.footer { padding-top: clamp(56px, 6vw, 72px); }
.iata-logo { height: 56px; margin-top: 22px; }

@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }

/* ==========================================================
   PAGINA DE CORRIDA ESTRUTURADA
   ========================================================== */
.race-hero__btns { align-items: center; }
.btn.is-disabled { opacity: .45; pointer-events: none; background: transparent; color: var(--ink-soft); border-color: var(--border); }
.btn--outline.is-disabled { border-color: var(--ink-soft); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 40px; }
.facts > div { display: grid; gap: 8px; padding: 22px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--border); }
.facts .eyebrow { color: var(--muted-foreground); }
.facts b { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.2; }
.race-about { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .race-about { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.lead--sm { font-size: clamp(20px, 2.4vw, 28px); max-width: none; }
.race-about__side { display: grid; gap: 18px; justify-items: start; }
.material { display: grid; gap: 16px; width: 100%; padding: 26px; border-radius: var(--r-lg); background: var(--accent-soft); }
.material h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.material p { margin-top: 6px; color: var(--ink-soft); }
.material .btn { justify-self: start; }
.terms { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 768px) { .terms { grid-template-columns: 1fr 1fr; } }
.terms > div { padding: 26px 28px; border-radius: var(--r-lg); background: var(--secondary); }
.terms h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.terms p { margin-top: 8px; color: var(--ink-soft); }
.pkg .eyebrow:first-of-type { color: var(--muted-foreground); }
.race.is-soon { cursor: pointer; }
.race.is-soon:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 22px 40px -24px rgb(107 103 249 / .45); }
.race-hero img { min-height: 220px; background: var(--purple); }

/* ==========================================================
   SELETOR DE PRECOS
   ========================================================== */
.pricing { display: grid; gap: 18px; }
@media (min-width: 960px) { .pricing { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.pricing__pick, .pricing__total { padding: 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); }
.pricing__pick { display: grid; gap: 22px; }
.pricing__row { display: grid; gap: 10px; }
.pricing__row .eyebrow { color: var(--muted-foreground); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font: inherit; font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pill:hover:not(:disabled) { border-color: var(--purple); }
.pill.is-on { background: var(--purple); border-color: var(--purple); color: #fff; }
.pill.is-off { opacity: .4; cursor: not-allowed; }
.pill small { font-weight: 500; opacity: .8; }
.pricing__total { display: grid; gap: 12px; background: var(--charcoal); color: var(--offwhite); border-color: transparent; position: sticky; top: 96px; }
.pricing__total .eyebrow { color: var(--lime); }
.pricing__price { font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); font-weight: 800; line-height: 1; }
.pricing__sum { color: rgb(241 242 242 / .75); font-size: 15px; line-height: 1.5; }
.pricing__total .btn { justify-self: start; margin-top: 6px; }
.pricing__notes { margin-top: 22px; display: grid; gap: 8px; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }

.pricing__lines { list-style: none; display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid rgb(241 242 242 / .18); border-bottom: 1px solid rgb(241 242 242 / .18); }
.pricing__lines li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.pricing__lines b { white-space: nowrap; font-weight: 700; }

.tabs { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--secondary); width: fit-content; max-width: 100%; }
.tab { font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 20px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--foreground); cursor: pointer; transition: background .2s, color .2s; }
.tab.is-on { background: var(--charcoal); color: var(--offwhite); }
.pricing__hint { font-size: 14px; color: var(--ink-soft); }
.pricing__hint b { color: var(--foreground); }
.pricing__sub { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; }

/* ==========================================================
   FILOSOFIA: cartoes e cafe vivo
   ========================================================== */
.stats { grid-template-columns: 1fr 1fr; }
.stats > div { padding: 28px 24px; border-radius: var(--r-lg); }
.stats > .stat--purple { background: var(--purple); color: #fff; }
.stats > .stat--lime { background: var(--lime); color: var(--charcoal); }
.stats > .stat--purple b { color: #fff; }
.stats > .stat--lime b { color: var(--charcoal); }
.stats > div b { font-size: clamp(40px, 6vw, 64px); }
.stats > div span { color: inherit; opacity: .85; font-size: 12px; }

.stats > div.stat--purple:nth-child(n) { background: var(--purple); color: #fff; }
.stats > div.stat--lime:nth-child(n) { background: var(--lime); color: var(--charcoal); }
.stats > div.stat--purple b { color: #fff; }
.stats > div.stat--lime b { color: var(--charcoal); }

.race__price { margin-top: 6px; font-weight: 800; font-size: 14px; color: var(--accent-ink); }
.pricefrom { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pricefrom__card { display: grid; gap: 10px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--charcoal); color: var(--offwhite); }
.pricefrom__card .eyebrow { color: var(--lime); }
.pricefrom__price { font-family: var(--font-display); font-size: clamp(44px, 6vw, 68px); font-weight: 800; line-height: 1; }
.pricefrom + .pricing__hint { margin-top: 16px; }
label.cta__consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
label.cta__consent input { margin-top: 4px; accent-color: var(--lime); flex: none; width: 18px; height: 18px; }
label.cta__consent a { color: inherit; text-decoration: underline; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.stats > div.stat--lime b { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; text-transform: uppercase; }

.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 760px; margin: 0 auto; padding: 16px 20px; border-radius: var(--r-lg); background: var(--charcoal); color: var(--offwhite); box-shadow: 0 18px 50px -18px rgb(0 0 0 / .5); font-size: 14px; }
.cookie p { flex: 1 1 280px; }
.cookie a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
html:not([lang^="pt"]) [data-lang-block="pt"], html[lang^="pt"] [data-lang-block="en"] { display: none; }
.legal h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; text-transform: uppercase; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--ink-soft); max-width: 72ch; }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 10px; padding-left: 20px; margin: 8px 0 12px; }
.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__date { margin-top: 16px; font-size: 14px; color: var(--muted-foreground); }
.legal code { background: var(--secondary); padding: 1px 6px; border-radius: 6px; font-size: .9em; }

/* ==========================================================
   SELOS (colecoes) - cartao e pagina
   ========================================================== */
.race__seals { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.race__img .race__seals img { position: static; width: 92px; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; padding: 8px 10px; border-radius: 12px; background: var(--charcoal); transform: none; transition: none; }
.race-hero__media { display: grid; gap: 14px; min-width: 0; }
.race-seals { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.race-hero .race-seals img { width: clamp(120px, 28%, 190px); height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; padding: 12px 16px; border-radius: 14px; background: var(--charcoal); }

/* ==========================================================
   RESPONSIVO
   Faixas cobertas (largura em px):
     <= 374   iPhone SE/mini antigos, Android pequenos
     360-440  Galaxy Note 8 (360), iPhone 12-17 (390-440), Pixel/Galaxy (360-412)
     600-767  tablets pequenos e celulares dobraveis abertos
     768-1023 iPad mini/Air/10" em pe (744-834), Android tablets
     1024-1439 iPad Pro 11/12.9 e notebooks
     >= 1600  monitores Full HD, 2K, 4K e ultrawide
   Tambem: celular deitado (altura baixa), notch/ilha dinamica (safe-area), toque (alvos de 44px), zoom de texto.
   ========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
.header { padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right)); padding-top: calc(14px + env(safe-area-inset-top)); }
.section, .footer { padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right)); }
.footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.cookie { bottom: calc(16px + env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); }
.stats > div, .pricing > *, .race-about > *, .facts > div { min-width: 0; }

/* celulares pequenos (iPhone SE, 320-374) */
@media (max-width: 374px) {
  :root { --pad-x: 14px; }
  .hero h1 { font-size: clamp(32px, 11.5vw, 44px); }
  .race-hero h1 { font-size: clamp(32px, 11vw, 44px); }
  .btn { padding-inline: 20px; }
  .btn--sm { padding-inline: 14px; }
  .pill { padding: 9px 14px; font-size: 14px; }
  .tab { padding: 9px 14px; }
  .pricing__pick, .pricing__total { padding: 20px; }
  .cookie { font-size: 13px; padding: 14px 16px; }
}

/* celulares comuns (Note 8 = 360, iPhone 390-440) */
@media (max-width: 519px) {
  .stats { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .race-hero__btns .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .pkgs__btn, .pricing__total .btn { width: 100%; justify-content: center; text-align: center; }
  .cta__row .btn { width: 100%; }
  .pricing__row .pills { gap: 6px; }
}
@media (max-width: 359px) { .facts { grid-template-columns: 1fr; } }

/* tablets em pe (iPad mini 744, iPad 810/820, Air 834) */
@media (min-width: 768px) and (max-width: 1023px) {
  .race-hero { grid-template-columns: 1fr 1fr; gap: 36px; }
  .race-hero h1 { font-size: clamp(40px, 6.4vw, 64px); }
  .philo, .intro__grid { gap: 40px; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .pricing { grid-template-columns: 1fr; }
  .pricing__total { position: static; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
}

/* notebooks e iPad Pro deitado */
@media (min-width: 1024px) and (max-width: 1439px) {
  .pricing { grid-template-columns: 1.3fr 1fr; }
}

/* celular ou tablet deitado (pouca altura) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 92px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .hero__bottom { padding-bottom: 28px; }
  .hero h1 { font-size: clamp(30px, 10vh, 60px); }
  .section { padding-top: 40px; padding-bottom: 40px; }
  .page-top { padding-top: 92px; }
  .pricing__total { position: static; }
  .mobile-menu, #mobile-menu { overflow-y: auto; }
}

/* telas de toque: alvos de 44px e sem zoom automatico do iOS em campos */
@media (pointer: coarse) {
  .pill, .tab, .btn--sm, .lang button, .carousel__btn, .fbtn, .cookie .btn { min-height: 44px; }
  .lang button { min-width: 36px; }
  input, select, textarea { font-size: 16px; }
}

/* monitores grandes: Full HD, 2K, 4K, ultrawide */
@media (min-width: 1600px) {
  :root { --max: 1560px; --pad-x: 64px; }
  body { font-size: 17px; }
  .hero h1 { font-size: clamp(118px, 6.6vw, 150px); }
  .race-hero h1 { font-size: clamp(88px, 5.2vw, 112px); }
}
@media (min-width: 1920px) {
  :root { --max: 1760px; --pad-x: 80px; }
  body { font-size: 18px; }
  .hero h1 { font-size: clamp(140px, 6.4vw, 190px); }
  .race-hero h1 { font-size: clamp(104px, 5vw, 136px); }
  .logo { height: 44px; }
}
@media (min-width: 2560px) {
  :root { --max: 2080px; --pad-x: 120px; }
  body { font-size: 20px; }
  .hero h1 { font-size: clamp(180px, 6vw, 240px); }
  .race-hero h1 { font-size: clamp(130px, 5vw, 170px); }
  .btn { font-size: 1.05em; }
}
@media (min-width: 3200px) {
  :root { --max: 2480px; --pad-x: 160px; }
  body { font-size: 22px; }
}

.race__img .race__seals img.seal--light, .race-hero .race-seals img.seal--light { background: #fff; }
.race__img .race__seals img.seal--square { width: 64px; padding: 6px; }
.race-hero .race-seals img.seal--square { width: clamp(84px, 17%, 120px); padding: 8px; }

/* ==========================================================
   FORMULARIO COMPLETO + WHATSAPP
   ========================================================== */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cta__extra { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 768px) { .cta__extra { grid-template-columns: 1fr 1.6fr; align-items: start; } }
.cta__field { display: grid; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-soft); }
.cta__field select, .cta__field textarea { width: 100%; padding: 14px 18px; border: 2px solid var(--panel-foreground); border-radius: var(--r); background: transparent; color: var(--panel-foreground); font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; outline: none; }
.cta__field select option { color: #111; }
.cta__field select:focus, .cta__field textarea:focus { border-color: var(--lime); }
.cta__field textarea { resize: vertical; min-height: 88px; }
.cta__wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 20px; border-radius: var(--r-pill); background: #25D366; color: #0b2e18; font-weight: 800; text-decoration: none; }

/* ==========================================================
   QUEM SOMOS, EQUIPE, PROVA SOCIAL
   ========================================================== */
.who { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.who__card { padding: 28px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); display: grid; gap: 10px; align-content: start; }
.who__card:nth-child(1) { background: var(--purple); color: #fff; border-color: transparent; }
.who__card:nth-child(1) p { color: rgb(255 255 255 / .88); }
.who__card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.who__card p { color: var(--ink-soft); }
.team__title { margin: 56px 0 20px; font-family: var(--font-display); font-size: 28px; font-weight: 800; text-transform: uppercase; }
.team { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.person { display: grid; gap: 6px; align-content: start; }
.person img, .person__ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: var(--secondary); }
.person b { font-family: var(--font-display); font-size: 18px; margin-top: 6px; }
.person span { color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.person p { color: var(--ink-soft); font-size: 15px; }
.proofnums { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 28px; }
.proofnums > div { padding: 24px; border-radius: var(--r-lg); background: var(--lime); color: var(--charcoal); }
.proofnums b { display: block; font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: 1; }
.proofnums span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.quotes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote { margin: 0; padding: 28px; border-radius: var(--r-lg); background: var(--charcoal); color: var(--offwhite); display: grid; gap: 20px; align-content: space-between; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.35; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; }
.quote figcaption small { display: block; color: var(--lime); font-size: 13px; }
[hidden] { display: none !important; }
.material .btn { white-space: nowrap; }

/* ==========================================================
   VIAJE EM GRUPO
   ========================================================== */
.groups { scroll-margin-top: 96px; }
#faq { scroll-margin-top: 96px; }
.groupcall { display: grid; gap: 22px; align-items: center; padding: clamp(28px, 4vw, 52px); margin-bottom: clamp(40px, 5vw, 72px); border-radius: var(--r-xl); background: var(--purple); color: #fff; }
@media (min-width: 900px) { .groupcall { grid-template-columns: 1fr auto; gap: 48px; } }
.groupcall .eyebrow { color: var(--lime); }
.groupcall h2 { margin: 10px 0 12px; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 5.4vw, 76px); line-height: .95; text-transform: uppercase; letter-spacing: -.025em; }
.groupcall p { max-width: 52ch; font-size: clamp(16px, 1.6vw, 20px); color: rgb(255 255 255 / .92); }
.groupcall .btn { background: var(--lime); border-color: var(--lime); color: var(--charcoal); justify-self: start; }
.groupcall .btn:hover { background: transparent; color: #fff; border-color: #fff; }
.groups .lead--sm { margin-top: 12px; max-width: 60ch; }
.groups__cards { margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.groups__cards .who__card:nth-child(1) { background: var(--card); color: inherit; border-color: var(--border); }
.groups__cards .who__card:nth-child(1) p { color: var(--ink-soft); }
.groups__n { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--accent-ink); }
.groups__know { margin-top: 24px; padding: 28px; border-radius: var(--r-lg); background: var(--secondary); }
.groups__know h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.groups__know ul { display: grid; gap: 10px; padding-left: 20px; color: var(--ink-soft); max-width: 78ch; }
@media (max-width: 519px) { .groupcall .btn { width: 100%; justify-content: center; text-align: center; } }
@media (min-width: 768px) and (max-width: 1023px) { .nav { gap: 20px; } .nav a { letter-spacing: .12em; } }

/* menu hamburguer tambem em tablets (ate 1099px): com 4 links + idioma + WhatsApp + botao o cabecalho nao cabe */
.nav a, .header .btn { white-space: nowrap; }
@media (max-width: 1099px) {
  .nav, .header__right { display: none !important; }
  .burger { display: block; }
  .header__mobile { display: flex; }
}

/* ==========================================================
   RESPONSIVO v2: sem palavras quebradas, folds, Pro Max, notebooks
   ========================================================== */
/* nada de quebrar palavra no meio: o texto muda de linha so entre palavras; titulos equilibrados */
h1, h2, h3, .lead, .eyebrow, .btn, .pill, .tab, .badge { overflow-wrap: normal; word-break: normal; hyphens: manual; }
h1, h2, h3, .lead { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* cartoes de numeros (Filosofia): a fonte acompanha a largura do proprio cartao, entao a palavra sempre cabe */
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stats > div { container-type: inline-size; min-width: 0; }
.stats > div b { font-size: clamp(30px, 22cqi, 64px); }
.stats > div.stat--lime b { font-size: clamp(22px, 13cqi, 40px); }
.stats > div span { letter-spacing: .12em; }

/* celular em pe (qualquer largura): titulo do hero maior e sem estourar (iPhone Pro Max 430, 440, Galaxy 412) */
@media (max-width: 767px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(40px, 12.4vw, 76px); }
  .race-hero h1 { font-size: clamp(34px, 10.6vw, 64px); }
  .groupcall h2, .cta h2 { font-size: clamp(34px, 11vw, 64px); }
  .facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* ultimo cartao sozinho ocupa a linha toda */
}

/* o botao de WhatsApp nao cobre mais o rodape nem os botoes finais */
@media (max-width: 1099px) {
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* cartoes "material" e botoes largos: no celular empilham e deixam o texto do botao quebrar */
@media (max-width: 519px) {
  .material { display: grid; gap: 16px; }
  .material .btn { white-space: normal; text-align: center; justify-content: center; width: 100%; }
  .tabs { width: 100%; }
  .tab { flex: 1 1 0; padding-inline: 10px; text-align: center; }
}

/* fold fechado (tela externa de ~280 a 359 px) */
@media (max-width: 359px) {
  :root { --pad-x: 12px; }
  .race h3, .race h2 { font-size: clamp(22px, 8.4vw, 28px); }
  .btn { padding-inline: 16px; font-size: 12px; }
  .pricing__price, .pricefrom__price { font-size: clamp(30px, 11vw, 40px); }
  .groupcall { padding: 22px 18px; }
  .who__card, .groups__know { padding: 20px 18px; }
}

/* fold aberto e tablets pequenos em pe (540 a 767): duas colunas onde cabe */
@media (min-width: 540px) and (max-width: 767px) {
  .who { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .race-hero { grid-template-columns: 1fr; }
}

/* celular deitado (Pro Max 932x430, iPhone 844x390, folds): cabecalho e blocos mais compactos */
@media (orientation: landscape) and (max-height: 520px) {
  .hero h1 { font-size: clamp(30px, 9vh, 56px); }
  .race-hero h1 { font-size: clamp(32px, 9vh, 52px); }
  .groupcall h2, .cta h2, .sec-head h2 { font-size: clamp(30px, 8vh, 48px); }
  .intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* notebooks (1100 a 1599): colunas com folga para titulos grandes */
@media (min-width: 1100px) and (max-width: 1599px) {
  .race-hero h1 { font-size: clamp(56px, 5.6vw, 84px); }
  .intro__grid { grid-template-columns: 1.1fr .9fr; }
  .groupcall h2 { font-size: clamp(44px, 4.6vw, 64px); }
}

/* Safari: prefixo do desfoque do cabecalho */
.header.is-scrolled { -webkit-backdrop-filter: blur(8px); }

/* ==========================================================
   FORMULARIO DA CORRIDA, CNPJ E CADASTUR
   ========================================================== */
.raceform { display: grid; gap: 18px; margin-top: 24px; max-width: 880px; }
.raceform__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .raceform__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); min-width: 0; }
.field input, .field select { width: 100%; min-width: 0; padding: 14px 18px; border: 2px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--foreground); font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; outline: none; }
.field input:focus, .field select:focus { border-color: var(--purple); }
.raceform__consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--ink-soft); font-size: 14px; }
.raceform__consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--purple); }
.raceform__consent a { color: var(--accent-ink); text-decoration: underline; }
.raceform__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.raceform__msg { color: var(--accent-ink); font-weight: 700; flex: 1 1 240px; }
.footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 20px; }
.footer__badges .iata-logo { margin-top: 0; }
.cadastur-logo { display: block; height: 34px; width: auto; }
@media (max-width: 519px) { .raceform .btn { width: 100%; justify-content: center; } }

/* ==========================================================
   SITUACAO DE VENDA, GUIA, COLECOES, EARLY BIRD
   ========================================================== */
.race__tag { right: 12px; left: auto; top: 12px; z-index: 3; font-weight: 800; }
.race__tag--open { background: var(--lime); color: var(--charcoal); }
.race__tag--few { background: #FFB020; color: #2a1a00; }
.race__tag--soldout { background: var(--charcoal); color: #fff; }
.race__tag--soon { background: var(--purple); color: #fff; }
.race__tag--finished { background: rgb(47 41 53 / .85); color: #fff; }
.avail { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.avail--few { background: #FFB020; color: #2a1a00; }
.avail--soldout { background: #fff; color: var(--charcoal); }
.pricefrom__card .avail { margin: 6px 0 0; justify-self: start; }
.guide { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.guide__card { padding: 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); display: grid; gap: 10px; align-content: start; min-width: 0; }
.guide__card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.guide__card p { color: var(--ink-soft); }
.guide + .pricing__hint { margin-top: 14px; }
.incl-note { margin-top: 18px; font-size: 14px; color: rgb(241 242 242 / .7); }
.hotel--tba .hotel__text { display: grid; gap: 14px; justify-items: start; }
.collbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 28px; }
.collbar .eyebrow { margin-right: 6px; color: var(--muted-foreground); }
.chip { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--foreground); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.chip:hover, .chip.is-on { background: var(--purple); border-color: var(--purple); color: #fff; }
.coll-seal { display: block; width: 120px; height: auto; margin: 18px 0 6px; padding: 10px 14px; border-radius: 14px; background: var(--charcoal); }
.coll-seal.seal--light { background: #fff; }
.coll-seal.seal--square { width: 84px; padding: 8px; }

/* ==========================================================
   RODAPE (4 colunas) E FORMULARIOS EM DUAS COLUNAS
   ========================================================== */
.footer__grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1.2fr 1fr 1fr; } }

/* contato: texto a esquerda, formulario a direita; botoes abaixo dos campos */
.cta__grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .cta__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.cta__copy { min-width: 0; }
.cta__copy h2 { font-size: clamp(40px, 11vw, 84px); }
@media (min-width: 960px) { .cta__copy h2 { font-size: clamp(40px, 5.2vw, 96px); } }
.cta__form { max-width: none; margin-top: 0; min-width: 0; }
.cta__extra { grid-template-columns: 1fr; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; }
.cta__actions .cta__wa { margin-top: 0; }
@media (max-width: 519px) { .cta__actions .btn, .cta__actions .cta__wa { width: 100%; justify-content: center; } }

/* formulario da corrida: titulo e texto a esquerda, campos a direita */
.raceform-wrap { display: grid; gap: 28px; }
@media (min-width: 960px) { .raceform-wrap { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } }
.raceform-copy { min-width: 0; }
.raceform-copy .lead { margin-top: 16px; }
.raceform { margin-top: 0; max-width: none; min-width: 0; }
.raceform-copy .sec-head h2 { font-size: clamp(30px, 8vw, 48px); }
@media (min-width: 960px) { .raceform-copy .sec-head h2 { font-size: clamp(30px, 3.4vw, 60px); } }

/* ==========================================================
   IDENTIDADE POR DESTINO (tema da corrida)
   As cores vem de css/themes.css (gerado a partir de js/content.js).
   Sem tema, tudo cai nas cores da marca. O desenho e uma mascara SVG de ~1 a 3 KB, so baixada nas paginas que a usam.
   ========================================================== */
:root { --c-accent: var(--purple); --c-ink: var(--accent-ink); --c-tint: var(--accent-soft); --c-deep: var(--charcoal); --c-glow: var(--lime); --motif: none; }
body[data-theme] { --divider: 3px solid var(--c-accent); --divider-thin: 2px solid var(--c-accent); }
body[data-theme] .badge { background: var(--c-tint); color: var(--c-ink); }
body[data-theme] .back { color: var(--c-ink); }
body[data-theme] .page-top--themed { padding-bottom: 0; background: none; }
body[data-page="race"] { background: var(--background); }
body[data-theme] .pricefrom__card, body[data-theme] .pricing__total { background: var(--c-deep); }
body[data-theme] .pricefrom__card .eyebrow, body[data-theme] .pricing__total .eyebrow { color: var(--c-glow); }
body[data-theme] .section--dark { background: var(--c-deep); }
body[data-theme] .pill.is-on { background: var(--c-accent); border-color: var(--c-accent); }
body[data-theme] .pill:hover:not(:disabled) { border-color: var(--c-accent); }
body[data-theme] .groups__n { color: var(--c-ink); }
body[data-theme] .field input:focus, body[data-theme] .field select:focus { border-color: var(--c-accent); }
body[data-theme] .raceform__consent input { accent-color: var(--c-accent); }
/* silhueta do destino: mascara SVG colorida com a cor do tema, fica na base do topo da pagina */
.theme-band { width: 100%; aspect-ratio: 10 / 1; max-height: 120px; margin-top: 36px; background: var(--c-accent); opacity: .9;
  -webkit-mask: var(--motif) center bottom / auto 100% repeat-x; mask: var(--motif) center bottom / auto 100% repeat-x; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .theme-band { animation: bandIn .9s ease both; } }
@keyframes bandIn { from { opacity: 0; transform: translateY(12px); } to { opacity: .9; transform: none; } }
body[data-theme] .sec-head { border-top-color: var(--c-accent); }
body[data-theme] .sec-head::before { background: var(--c-accent); }
body[data-theme] .hotel, body[data-theme] .race__more { border-top-color: var(--c-accent); }

/* ==========================================================
   CONFIANCA, VIAGEM, HISTORIA E PACOTE NA PAGINA DA CORRIDA
   ========================================================== */
.trust { list-style: none; display: grid; gap: 6px; margin: 16px 0 0; padding: 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.trust li::before { content: "\2713"; color: var(--accent-ink); font-weight: 800; margin-right: 8px; }
.trust a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pricefrom__card small { color: var(--offwhite); opacity: .85; font-size: 14px; }
.story { display: grid; gap: 40px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 64px; } }
.story article { min-width: 0; display: grid; gap: 14px; align-content: start; }
.story h3 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.story p { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.trip .guide__card p b { color: var(--foreground); }
.trip__links { display: flex; flex-wrap: wrap; gap: 10px; }
.trip .guide__card .btn { justify-self: start; }
.coursemap { margin: 0; display: grid; gap: 12px; }
.coursemap img { width: auto; max-width: 100%; height: auto; max-height: min(88vh, 940px); display: block; margin-inline: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: #fff; }
.coursemap figcaption { font-size: 14px; color: var(--ink-soft); }
.coursemap figcaption a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* ==========================================================
   PERSONALIDADE: saudacao do topo, regua de km, numero de peito, Espresso Pace, clubes
   ========================================================== */
[hidden] { display: none !important; }
h1 em { font-style: normal; color: var(--accent-ink); }
.hero__hello { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 2vw, 24px); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); min-height: 1.5em; margin-bottom: 14px; }
.hero__hello span { display: inline-block; animation: helloIn .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes helloIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__hello span { animation: none; } }

/* regua de km: no computador fica na lateral, no celular vira uma linha fina no topo */
.kmrail { --p: 0; position: fixed; z-index: 70; pointer-events: none; }
.kmrail__line { position: absolute; background: rgb(47 41 53 / .14); overflow: hidden; border-radius: 2px; }
.kmrail__fill { position: absolute; left: 0; top: 0; background: var(--purple); }
.kmrail__ticks, .kmrail__dot, .kmrail__km { display: none; }
@media (max-width: 1099px) {
  .kmrail { left: 0; right: 0; top: 0; height: 3px; z-index: 130; }
  .kmrail__line { inset: 0; border-radius: 0; background: transparent; }
  .kmrail__fill { height: 100%; width: calc(var(--p) * 100%); }
  .kmrail.is-finish .kmrail__fill { background: var(--lime); }
}
@media (min-width: 1100px) {
  .kmrail { right: 14px; top: 110px; bottom: 90px; width: 64px; }
  .kmrail__line { right: 8px; top: 0; bottom: 0; width: 3px; }
  .kmrail__fill { width: 100%; height: calc(var(--p) * 100%); }
  .kmrail__ticks { display: block; position: absolute; right: 14px; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(to bottom, rgb(47 41 53 / .3) 0 1px, transparent 1px 11.85%); }
  .kmrail__dot { display: block; position: absolute; right: 3px; top: calc(var(--p) * 100%); width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--lime); border: 3px solid var(--charcoal); }
  .kmrail__km { display: block; position: absolute; right: 26px; top: calc(var(--p) * 100%); transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .1em; color: var(--charcoal); background: var(--lime); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
  .kmrail.is-finish .kmrail__fill { background: var(--lime); }
}
@media (min-width: 1100px) and (max-width: 1360px) { .kmrail { width: 40px; right: 8px; } .kmrail__km { top: -32px; right: 0; transform: none; } .kmrail__ticks { display: none; } }
@media print { .kmrail { display: none; } }

/* confirmacao em formato de numero de peito */
.bibtitle { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 800; text-transform: uppercase; line-height: 1.05; margin-bottom: 18px; }
.bibwrap { display: grid; justify-items: start; padding: 6px 0 14px; }
.bib { position: relative; width: min(100%, 440px); background: #fff; color: var(--charcoal); border-radius: 16px; padding-bottom: 14px; box-shadow: 0 18px 40px rgb(47 41 53 / .22); transform: rotate(-1.2deg); overflow: hidden; font-family: var(--font-display); animation: bibIn .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bibIn { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@media (prefers-reduced-motion: reduce) { .bib { animation: none; } }
.bib__top { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px; background: var(--purple); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bib__top span:last-child { text-align: right; overflow-wrap: anywhere; }
.bib__pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #e4e4ec; box-shadow: inset 0 2px 3px rgb(0 0 0 / .28); }
.bib__pin:nth-of-type(1) { left: 10px; top: 52px; } .bib__pin:nth-of-type(2) { right: 10px; top: 52px; }
.bib__pin:nth-of-type(3) { left: 10px; bottom: 56px; } .bib__pin:nth-of-type(4) { right: 10px; bottom: 56px; }
.bib__no { font-size: clamp(64px, 14vw, 104px); font-weight: 800; line-height: 1; padding: 30px 28px 6px; letter-spacing: -.02em; }
.bib__name { padding: 0 28px; font-size: 20px; font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.bib__bottom { display: flex; justify-content: space-between; gap: 12px; margin: 22px 22px 0; padding-top: 14px; border-top: 2px dashed rgb(47 41 53 / .25); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.bibmsg { max-width: 46ch; color: var(--ink-soft); }
.section--dark .bibtitle { color: var(--offwhite); }
.section--dark .bibmsg { color: var(--offwhite); }

/* Espresso Pace */
.pace { display: grid; gap: 28px; }
@media (min-width: 960px) { .pace { grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; } }
.pace__form { display: grid; gap: 22px; min-width: 0; }
.pace__form .fgroup { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.pace__inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#pace-pace-wrap { grid-template-columns: repeat(2, 1fr); }
.pace__out { min-width: 0; display: grid; gap: 18px; align-content: start; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); }
.pace__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pace__stats > div { display: grid; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--charcoal); color: var(--offwhite); }
.pace__stats .eyebrow { color: var(--lime); }
.pace__stats b { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); line-height: 1; font-weight: 800; }
.pace__stats small { font-size: 14px; font-weight: 600; opacity: .8; }
.pace__h { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.pace__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pace__table th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 6px; border-bottom: 2px solid var(--border); }
.pace__table td { padding: 10px 6px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pace__table tr:last-child td { font-weight: 800; }
.pace__empty { color: var(--ink-soft); }
.pace__out .btn { justify-self: start; }
.pace__inputs input { min-width: 0; width: 100%; }
.pace__inputs .field { min-width: 0; }
.pace .pills { flex-wrap: wrap; }
@media (max-width: 380px) { .pace__out { padding: 16px; } .pace__table th, .pace__table td { padding: 8px 3px; font-size: 13px; } .pace__stats { gap: 8px; } .pace__stats > div { padding: 12px; } }

/* clubes e assessorias */
.clubsteps { display: grid; gap: 14px; }
@media (min-width: 768px) { .clubsteps { grid-template-columns: repeat(3, 1fr); } }
.clubstep { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--charcoal); color: var(--offwhite); }
.clubstep .groups__n { color: var(--lime); }
.clubstep h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.clubstep p { color: rgb(241 242 242 / .85); }

/* marca de xícara (anel de café) nos cartões de corrida */
.race__body { position: relative; overflow: hidden; }
.race__body::after { content: ""; position: absolute; left: var(--ring-x, 85%); top: var(--ring-y, 90%); width: 152px; height: 137px; background: url(../assets/coffee-ring.webp) center / contain no-repeat; opacity: var(--ring-o, .5); transform: translate(-50%, -50%) rotate(var(--ring-r, -8deg)) scale(var(--ring-s, 1)); pointer-events: none; z-index: 0; }
.race__body > * { position: relative; z-index: 1; }

/* guia da corrida: percurso em destaque, clima em numeros, expo e dicas */
.guide--rich { grid-template-columns: 1fr; }
@media (min-width: 720px) { .guide--rich { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .guide--rich { grid-template-columns: repeat(3, 1fr); } }
.guide__card--wide { grid-column: 1 / -1; }
.gtop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.gbadge, .gsoon { display: inline-block; justify-self: start; padding: 6px 14px; border-radius: 99px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.gbadge--flat, .gsoon { background: var(--lime); color: var(--charcoal); }
.gbadge--rolling { background: var(--accent-soft); color: var(--accent-ink); }
.gbadge--hilly { background: var(--charcoal); color: var(--lime); }
.gnum { display: grid; gap: 2px; }
.gnum b { font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); font-weight: 800; line-height: 1; }
.gnum small { font-size: .4em; margin-left: 4px; letter-spacing: .06em; }
.gnum span { font-size: 13px; color: var(--ink-soft); max-width: 30ch; }
.gfacts { display: grid; gap: 10px; margin: 0; }
.gfacts > div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
.gfacts dt { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.gfacts dd { margin: 0; color: var(--foreground); }
.gnote { font-size: 13px; color: var(--ink-soft); }
.gnote a { color: var(--accent-ink); font-weight: 700; margin-left: 4px; }
.wxgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wx { display: grid; gap: 4px; padding: 14px; border-radius: var(--r); background: var(--charcoal); color: var(--offwhite); }
.wx b { font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); font-weight: 800; line-height: 1; }
.wx small { font-size: .38em; margin-left: 2px; opacity: .85; }
.wx span { font-size: 12px; letter-spacing: .04em; color: var(--lime); }
.tipcols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tipcols ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.tipcols li { color: var(--ink-soft); }
.tipcols li strong { display: block; color: var(--foreground); }

/* ==========================================================
   ESPACAMENTO PADRAO (a medida e a do cartao de corrida)
   cartao: 24px por dentro, 10px entre os itens do cartao, 20px entre cartoes.
   bloco pequeno dentro de um cartao (clima, numeros do pace): 16px.
   ========================================================== */
:root { --card-pad: 24px; --card-inner: 10px; --grid-gap: 20px; --tile-pad: 16px; }

/* cartoes e blocos isolados */
.guide__card, .clubstep, .material, .terms > div, .who__card, .quote, .included > div, .step, .pkg,
.pricing__pick, .pricing__total, .pricefrom__card, .groups__know, .facts > div, .stats > div, .pace__out { padding: var(--card-pad); }
/* itens dentro do cartao */
.guide__card, .clubstep, .who__card, .pricefrom__card, .facts > div { gap: var(--card-inner); }
/* blocos pequenos dentro de um cartao */
.wx, .pace__stats > div { padding: var(--tile-pad); }
/* intervalo entre cartoes */
.who, .guide, .facts, .terms, .pricefrom, .clubsteps, .included, .proofnums, .quotes, .stats, .pricing, .team, .tipcols { gap: var(--grid-gap); }
.guide + .pricing__hint, .pricefrom + .pricing__hint { margin-top: var(--grid-gap); }
/* telas muito estreitas (280 a 380 px): o resultado do pace precisa de mais espaco para os numeros */
.pace__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pace__table { table-layout: fixed; }
@media (max-width: 380px) {
  .pace__out { padding: var(--tile-pad); }
  .pace__stats { gap: 8px; }
  .pace__stats > div { padding: 12px; }
  .pace__stats b { font-size: 26px; }
  .pace__stats .eyebrow { font-size: 10px; letter-spacing: .06em; }
  .pace__table th { font-size: 10px; letter-spacing: .04em; }
}

/* ==========================================================
   REVISAO: botao do WhatsApp, menu mobile, topo limpo, formularios e rodape
   ========================================================== */
/* WhatsApp: glifo centralizado e do mesmo tamanho em todos os botoes */
.cta__wa svg { width: 22px; height: 22px; flex: none; }

/* menu mobile: leve, sem negrito e sem caixa alta; Get in touch largo e redes redondas ao lado */
.mnav { padding: 96px var(--pad-x) 28px; }
.mnav__links a { padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / .14); font-size: clamp(24px, 7vw, 30px); font-weight: 500; text-transform: none; letter-spacing: -.01em; line-height: 1.1; }
.mnav__links a:last-child { border-bottom: 0; }
.mnav__bottom { width: 100%; gap: 18px; justify-items: stretch; margin-top: 28px; }
.mnav__cta { display: flex; align-items: center; gap: 10px; width: 100%; }
.mnav__cta .btn { flex: 1; justify-content: center; min-height: 52px; padding-block: 0; font-weight: 700; letter-spacing: .14em; }
.mnav__cta .social { margin-top: 0; flex: none; gap: 10px; }
.mnav .social a { width: 52px; height: 52px; border: 1px solid rgb(255 255 255 / .3); color: #fff; }
.mnav .social a:hover { background: rgb(255 255 255 / .12); color: #fff; transform: none; }

/* formularios: campos do mesmo tamanho, alinhados pela base, e seta do select afastada da borda */
.raceform__grid { align-items: end; }
.field { align-content: end; }
.field input, .field select, .cta__row input { height: 52px; border-radius: var(--r); }
.field textarea, .cta__field textarea { border-radius: var(--r); }
.field select, .cta__field select { appearance: none; -webkit-appearance: none; height: 52px; padding-right: 48px; background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232F2935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cta__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F1F2F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* rodape: redes sob a marca (uma coluna a menos); linha final com o lema ao lado do copyright e a privacidade na ponta direita */
.footer .social { margin-top: 16px; }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1.2fr 1fr; } }
.footer__bottom { justify-content: flex-start; align-items: center; gap: 8px 20px; }
.footer__slogan { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.footer__bottom a { margin-left: auto; }
/* com o menu aberto o botao flutuante do WhatsApp sai de cena (nao cobre os botoes do menu) */

/* ==========================================================
   AJUSTES: topo padrao em todas as paginas, textarea, mensagens vazias e rodape
   ========================================================== */
/* texto de apoio do topo: mesmo peso em todas as paginas, um pouco mais leve que antes */
.lead, .lead--sm { font-weight: 500; }

/* mensagem de status vazia nao ocupa espaco (era o respiro extra no fim do card de contato) */
.cta__msg:empty, .raceform__msg:empty { display: none; }

/* campo de mensagem igual aos outros campos (antes parecia desativado) */
.field textarea { width: 100%; min-height: 120px; padding: 14px 18px; border: 2px solid var(--border); background: var(--card); color: var(--foreground); font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1.4; outline: none; resize: vertical; }
.field textarea:focus { border-color: var(--purple); }
.cta__field textarea { padding: 14px 18px; line-height: 1.4; }

/* rodape: primeira coluna com marca, razao social, CNPJ e redes */
.footer__brand p { margin-top: 4px; }
.footer__brand strong + p { margin-top: 10px; }

/* listas sem marcador: travessao antes de cada item, sem recuo (era o vazio do card "Good to know") */
.groups__know ul, .pricing__notes, .legal ul { padding-left: 0; }
.groups__know li, .pricing__notes li, .legal ul li { display: flex; gap: 10px; }
.groups__know li::before, .pricing__notes li::before, .legal ul li::before { content: "-"; flex: none; }
.page-top .intro__grid + p { margin-top: 32px; }

/* menu mobile v3: redes redondas como mais um item da lista; Get in touch grande com o WhatsApp ao lado, sem o verde da marca */
.mnav__social { padding: 22px 0 4px; }
.mnav__social .social { margin-top: 0; }
.mnav__cta { gap: 12px; }
.mnav__cta .btn { min-height: 64px; font-size: 14px; letter-spacing: .16em; }
.mnav__wa { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); color: #fff; transition: background-color .2s; }
.mnav__wa:hover, .mnav__wa:active { background: rgb(255 255 255 / .12); }
.mnav__wa svg { width: 28px; height: 28px; display: block; }
@media (max-height: 700px) { .mnav { padding-top: 84px; } .mnav__links a { padding: 13px 0; font-size: 24px; } .mnav__social { padding-top: 16px; } .mnav__cta .btn, .mnav__wa { min-height: 56px; height: 56px; } .mnav__wa { width: 56px; } }

/* titulo da versao em portugues da privacidade: h2 com a aparencia do h1 (a pagina tem um unico h1 no HTML) */
.legal__title { font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.025em; }
@media (min-width: 768px) { .legal__title { font-size: 60px; } }
.footer h3.eyebrow { margin: 0; }   /* Collections e More: respiro entre os grupos (a regra acima, mais específica, zerava o espaço) */
.nf__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.field--wide { grid-column: 1 / -1; }

/* entrada ao abrir a página: o estado escondido é aplicado sem transição (senão o elemento já visível "desce" de 1 para 0 e volta, sem animar) */
.rv.rv-now { transition: none; }

/* paginas de grupos e FAQ + chamada de grupos na home */
.page-top .faq { margin-top: 40px; }
.groupcall__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 768px) { .groupcall__btns { align-items: flex-end; } }
.link-arrow { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.link-arrow:hover { color: var(--charcoal); }
.section--dark .link-arrow, .groupcall .link-arrow { color: inherit; }

/* hierarquia de botões: primário = só chamada para ação; secundário = .btn--outline; terciário = .link-arrow */
.link-arrow { display: inline-block; }
.nf__btns { align-items: center; gap: 12px 28px; }
.groupcall .btn.btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.groupcall .btn.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--purple); }

/* carrossel: setas em estilo secundário (contorno), não primário */
.carousel__btn { background: transparent; color: var(--foreground); border: 2px solid var(--foreground); }
.carousel__btn:hover:not(:disabled) { background: var(--foreground); color: var(--background); transform: scale(1.06); }
/* chamada de grupos: texto em cima, os dois botões embaixo */
@media (min-width: 900px) { .groupcall { grid-template-columns: 1fr; gap: 28px; } }
.groupcall__btns, .groupcall__btns { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (min-width: 768px) { .groupcall__btns { align-items: center; } }

/* links externos dentro de cards: terciários, em lista, um embaixo do outro */
.trip__links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 20px; }
.hotel .link-arrow, .section--dark .link-arrow { color: inherit; }
.race-about__side > .link-arrow { align-self: flex-start; }

/* silhueta única (sem repetir): a ilustração aparece uma vez, centralizada, e o chão (altura --ground) segue até as bordas */
.theme-band--solo { -webkit-mask: var(--motif) center bottom / auto 100% no-repeat, linear-gradient(#000, #000) center bottom / 100% var(--ground, 0%) no-repeat;
  mask: var(--motif) center bottom / auto 100% no-repeat, linear-gradient(#000, #000) center bottom / 100% var(--ground, 0%) no-repeat; }
.theme-band--solo { aspect-ratio: auto; max-height: none; height: clamp(56px, calc(100vw / var(--ratio, 3.8)), 220px); width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }   /* largura total da tela, ignorando as margens; até ~870 px a arte inteira cabe, acima disso a altura trava e o chão se estende */
body[data-theme] .page-top--themed { overflow-x: clip; }   /* até ~870 px de tela a arte inteira cabe na largura (proporção 3,79:1); acima disso a altura trava e o chão se estende */   /* a arte aparece uma vez: altura generosa no desktop e legível no celular */

/* foto do espresso na filosofia: baixa, com a mesma altura do texto ao lado (no celular, faixa 16:9) */
.philo { align-items: stretch; }
.philo__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: #1d1b22; }
.philo__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 0; aspect-ratio: auto; }
@media (min-width: 768px) { .philo__photo { aspect-ratio: auto; min-height: 240px; } }

/* filosofia: foto à esquerda (mais alta), título + texto à direita; o subtítulo é menor que o título da seção */
.philo .sec-head { margin-bottom: 28px; }
.philo h3 { font-size: 22px; }
@media (min-width: 768px) { .philo h3 { font-size: 30px; } }
.philo__text { margin-top: 14px; }
.philo__photo { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .philo__photo { aspect-ratio: auto; min-height: 340px; } }

/* ===== escala tipográfica v2: tudo mais contido, em um só lugar (valores em clamp) =====
   display = hero e chamadas grandes | título = h1 de página | seção = h2 | corpo grande = .lead */
:root { --fs-display: clamp(34px, 5.4vw, 80px); --fs-cta: clamp(30px, 4vw, 60px); --fs-title: clamp(28px, 3.6vw, 48px); --fs-section: clamp(24px, 3vw, 38px); --fs-lead: clamp(20px, 2.4vw, 32px); }
.hero h1 { font-size: var(--fs-display); line-height: .96; }
.race-hero h1 { font-size: clamp(30px, 4.4vw, 62px); line-height: 1; }
.sec-head h1, .legal__title { font-size: var(--fs-title); }
.sec-head h2, .raceform-copy .sec-head h2 { font-size: var(--fs-section); }
.cta h2, .cta__copy h2 { font-size: var(--fs-cta); line-height: .98; }
.groupcall h2 { font-size: clamp(28px, 3.6vw, 52px); }
.lead { font-size: var(--fs-lead); }
.philo h3, .story h3 { font-size: clamp(20px, 2vw, 26px); }
.step .n { font-size: 44px; }
.stats > div b, .proofnums b { font-size: clamp(32px, 4vw, 48px); }
.pricing__price, .pricefrom__price, .gnum b { font-size: clamp(32px, 4vw, 44px); }
/* sem a linha em cima dos títulos */
.sec-head::before { display: none; }
.sec-head { padding-top: 0; margin-bottom: clamp(24px, 3vw, 40px); }

/* rodapé: marca + associações na primeira coluna; Races, Collections e More lado a lado */
.footer__grid { grid-template-columns: 1fr; gap: 36px 32px; }
.footer__assoc { margin-top: 28px; }
.footer__assoc ul { margin-top: 10px; }
.footer__badges { flex-wrap: nowrap; gap: 16px; margin-top: 14px; }
.footer__badges .iata-logo, .iata-logo { height: 34px; margin-top: 0; }
.cadastur-logo { height: 26px; }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } .footer__brand { grid-column: auto; } }

/* ===== menu da página atual ===== */
.nav a { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: currentColor; color: #fff; }
.header.is-scrolled .nav a[aria-current="page"] { color: var(--accent-ink); }
.mnav__links a[aria-current="page"] { color: var(--lime); }

/* ===== modal de filtros no desktop: centralizado; "Aplicar" sempre à direita e "Limpar" à esquerda quando existir ===== */
@media (min-width: 768px) { dialog.fmodal { position: fixed; inset: 0; margin: auto; height: fit-content; } }
.fmodal__foot { justify-content: flex-end; }
.fmodal__foot .btn { flex: 0 1 auto; margin-left: auto; min-width: 200px; max-width: none; }
.fmodal__foot .fclear { margin-right: auto; }
@media (max-width: 767px) { .fmodal__foot .btn { flex: 1; min-width: 0; } }

/* ===== aceite de contato: caixa alinhada à primeira linha do texto ===== */
label.cta__consent, .raceform__consent { align-items: flex-start; line-height: 1.5; }
label.cta__consent input, .raceform__consent input { margin: calc((1.5em - 18px) / 2) 0 0; font-size: inherit; }

/* ===== avisos de validação embaixo do próprio campo ===== */
.ferr { display: block; flex-basis: 100%; margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #c62828; }
.section--dark .ferr, .cta .ferr { color: #ff9a9a; }
[aria-invalid="true"] { border-color: #c62828 !important; }
.section--dark [aria-invalid="true"], .cta [aria-invalid="true"] { border-color: #ff9a9a !important; }
.cta__row { flex-wrap: wrap; }

/* ===== WhatsApp: botão flutuante também no desktop; no card de contato vira só o ícone (secundário) ===== */
.cta__actions .btn { min-height: 52px; }
.cta__wa-icon { padding: 0; width: 52px; justify-content: center; border-radius: 50%; }
.cta__wa-icon svg { width: 24px; height: 24px; display: block; }
@media (max-width: 519px) { .cta__actions .cta__wa-icon { width: 52px; flex: none; } .cta__actions .btn[type="submit"] { flex: 1; width: auto; } }

/* ===== tracker de quilometragem: também no celular e no tablet (régua fina na lateral) ===== */
@media (max-width: 1099px) {
  .kmrail { left: auto; right: 6px; top: 76px; bottom: 90px; width: 30px; height: auto; z-index: 70; }
  .kmrail__line { inset: auto; right: 5px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: rgb(47 41 53 / .14); }
  .kmrail__fill { width: 100%; height: calc(var(--p) * 100%); }
  .kmrail__dot { display: block; position: absolute; right: 0; top: calc(var(--p) * 100%); width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--lime); border: 2px solid var(--purple); }
  .kmrail__km { display: block; position: absolute; right: 18px; top: calc(var(--p) * 100%); transform: translateY(-50%); font-size: 9px; padding: 2px 5px; }
}

/* ===== tablets (iPad mini 744, Air 820, Pro 834/1024): grades pensadas para a largura do tablet, não só celular esticado ===== */
@media (min-width: 640px) and (max-width: 1099px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .guide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1099px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* sem a linha, o título logo abaixo da silhueta ganha respiro */
body[data-theme] .page-top--themed + .section { padding-top: clamp(40px, 5vw, 72px); }

/* campo de e-mail do contato: agora com rótulo, ocupa a linha toda como os outros */
.cta__row .cta__field { flex: 1 1 100%; width: 100%; }
.cta__row .cta__field input { width: 100%; }

.theme-band { margin-bottom: clamp(24px, 3vw, 40px); }

/* topo da corrida = o card expandido: título, data · distâncias · local, valores, descrição, CTAs */
.race-hero h1 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; margin: 10px 0 12px; }
.race-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.badge--soft { background: transparent; border: 1px solid var(--border); color: var(--ink-soft); }
.race-hero__meta { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.race-hero__price { margin-top: 14px; font-size: 18px; font-weight: 800; color: var(--accent-ink); }
.race-hero__pricenote { margin-top: 6px; max-width: 56ch; font-size: 14px; color: var(--ink-soft); }
.race-hero__text { margin-top: 16px; font-size: 18px; max-width: 56ch; color: var(--ink-soft); }
.race-hero__info .trust { margin-top: 24px; }
.race-hero h1 { font-size: clamp(24px, 2.8vw, 38px); }

/* topo da corrida: o texto começa na linha do topo da imagem (antes ficava centralizado na vertical) */
.race-hero { align-items: start; }

/* "About the race": descrição e, logo abaixo, o link do site oficial; história da corrida e da cidade empilhadas na largura inteira */
.race-about { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .race-about { grid-template-columns: 1fr; gap: 24px; } }
.race-about .lead--sm { max-width: 80ch; }
.race-about .link-arrow { justify-self: start; }
.story { grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr; gap: 56px; } }
.story p { max-width: none; }

.race-about__lead { margin-bottom: 28px; max-width: 80ch; }

/* cards de "What's included" sem letra de ordem: o título abre o card */
.included h3 { margin-top: 0; }

/* topo da corrida: até 767 px (celular e iPad mini em pé) a foto ocupa a largura inteira e o texto vem embaixo; a partir de 768 px, duas colunas */
@media (max-width: 767px) { .race-hero { grid-template-columns: 1fr; gap: 28px; } }
@media (min-width: 768px) and (max-width: 1099px) { .race-hero { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* tracker de km no celular e no tablet: etiqueta com o mesmo fundo verde do desktop */
@media (max-width: 1099px) {
  .kmrail__km { background: var(--lime); color: var(--charcoal); font-family: var(--font-display); font-weight: 800; letter-spacing: .08em; border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; box-shadow: 0 2px 8px -2px rgb(47 41 53 / .35); }
}

/* celular e tablet: o tracker de km só aparece depois de 1 km de rolagem (no desktop fica sempre visível) */
@media (max-width: 1099px) {
  .kmrail { opacity: 0; transition: opacity .3s; }
  .kmrail.is-started { opacity: 1; }
}

/* topo da corrida: tablets em pé (iPad mini 768, Air 820, Pro 834) usam a foto na largura inteira; duas colunas só a partir de 900 px */
@media (min-width: 768px) and (max-width: 899px) { .race-hero { grid-template-columns: 1fr; gap: 28px; } }
@media (min-width: 900px) and (max-width: 1099px) { .race-hero { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* cards da página de corrida: até 899 px (iPad mini pra baixo) cada card usa a largura toda; de 900 a 1079 px são 2 colunas e o card 03 ocupa a linha inteira, sem buraco */
@media (max-width: 899px) {
  body[data-page="race"] .guide, body[data-page="race"] .guide--rich, body[data-page="race"] .guide.trip,
  body[data-page="race"] .included, body[data-page="race"] .pricefrom, body[data-page="race"] .who { grid-template-columns: 1fr; }
}
@media (min-width: 900px) and (max-width: 1079px) {
  body[data-page="race"] .guide--rich { grid-template-columns: repeat(2, 1fr); }
  body[data-page="race"] .guide.trip { grid-template-columns: repeat(3, 1fr); }
  body[data-page="race"] .guide--rich > .guide__card:nth-child(3):not(:last-child) { grid-column: 1 / -1; }
}

/* What's included: no iPad mini (600 a 899 px) os cards ficam em 2 colunas; no celular, 1 coluna */
@media (min-width: 600px) and (max-width: 899px) { body[data-page="race"] .included { grid-template-columns: repeat(2, 1fr); } }

/* cards de preço: largura própria (até 380 px) e quebram de linha conforme a tela; um preço só não ocupa a linha inteira */
body[data-page="race"] .pricefrom { display: flex; flex-wrap: wrap; }
body[data-page="race"] .pricefrom__card { flex: 1 1 240px; max-width: 380px; }

/* hotel: até 899 px (iPad mini pra baixo) o título fica em cima e a descrição embaixo, em uma coluna só */
@media (max-width: 899px) { .hotel { grid-template-columns: 1fr; gap: 16px; } }
.cta__row .cta__field input { font-size: 16px; letter-spacing: 0; text-transform: none; padding: 14px 18px; border-radius: var(--r); }
.cta__row .cta__field input::placeholder { font-size: 16px; letter-spacing: 0; text-transform: none; }

/* filosofia em tablet (iPad mini e Pro em pé): os cards de destaque vão para baixo do texto, em 2 colunas, como no celular */
@media (min-width: 520px) and (max-width: 1099px) {
  .intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* colecoes na pagina de corridas: logo e descricao logo abaixo dos botoes */
.collbar .chip { cursor: pointer; font-family: inherit; }
.coll-info { display: flex; align-items: center; gap: 24px; margin: 0 0 32px; }
.coll-info[hidden] { display: none; }
.coll-info .coll-seal { margin: 0; flex: none; }
.coll-info .lead { margin: 0; max-width: 70ch; }
@media (max-width: 599px) { .coll-info { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* ===== controles de seleção (coleções, filtros, preços): secundários, nunca parecem o botão primário =====
   normal = contorno claro | selecionado = fundo lavanda + contorno escuro | botão Filtros = contorno (como .btn--outline) */
.chip, .pill, .filter, .fmodal .filter { background: var(--card); border: 1.5px solid var(--border); color: var(--foreground); }
.chip:hover, .pill:hover:not(:disabled), .filter:hover, .fmodal .filter:hover { background: var(--card); border-color: var(--foreground); color: var(--foreground); }
.chip.is-on, .chip[aria-pressed="true"], .pill.is-on, body[data-theme] .pill.is-on,
.filter[aria-pressed="true"], .fmodal .filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--foreground); color: var(--foreground); font-weight: 800; }
.tab.is-on { background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1.5px var(--foreground) inset; }
.fbtn { background: transparent; color: var(--foreground); border: 2px solid var(--foreground); padding: 10px 20px; }
.fbtn:hover { background: var(--foreground); color: var(--background); }
.fbtn .fbadge, .fbtn #f-badge { background: var(--foreground); color: var(--background); }

/* respiro da página de corridas: título, coleções, descrição e barra de filtros no mesmo ritmo (24 px) */
body[data-page="races"] .sec-head { margin-bottom: 24px; }
body[data-page="races"] .collbar { margin: 0 0 24px; }
body[data-page="races"] .coll-info { margin: 0 0 24px; }
body[data-page="races"] .ftoolbar { margin-bottom: 24px; }
body[data-page="races"] .filter-count { margin-bottom: 0; }

/* coleção selecionada: logo em cima, descrição embaixo */
.coll-info { flex-direction: column; align-items: flex-start; gap: 16px; }

/* filtros ativos com a mesma altura do botão "Filters" */
.fbtn, .achip { box-sizing: border-box; height: 48px; }
.achip { padding: 0 20px; border: 2px solid transparent; font-size: 13px; }
.ftoolbar { align-items: center; }

/* formularios (corrida e assessorias): título e texto em cima, campos ocupando a largura toda em 3 colunas */
.raceform-wrap, body .raceform-wrap { grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 960px) { .raceform-wrap { grid-template-columns: 1fr; gap: 32px; } }
.raceform-wrap .raceform { max-width: none; width: 100%; }
.raceform-wrap .raceform__grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .raceform-wrap .raceform__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .raceform-wrap .raceform__grid { grid-template-columns: repeat(3, 1fr); } }
.raceform-wrap .field--wide { grid-column: 1 / -1; }
.raceform-copy .lead { max-width: 70ch; }
#race-form, #club-form-sec { scroll-margin-top: 88px; }

/* caixa de aceite: quadrado próprio (igual em todos os navegadores), centralizado com o texto */
.raceform__consent, label.cta__consent { display: flex; align-items: center; gap: 12px; line-height: 1.4; cursor: pointer; }
.raceform__consent input[type="checkbox"], label.cta__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 20px; height: 20px; margin: 0; padding: 0;
  border: 2px solid var(--foreground); border-radius: 6px; background: transparent; cursor: pointer; }
.raceform__consent input[type="checkbox"]::after, label.cta__consent input[type="checkbox"]::after {
  content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .12s; }
.raceform__consent input[type="checkbox"]:checked, body[data-theme] .raceform__consent input[type="checkbox"]:checked { background: var(--purple); border-color: var(--purple); }
.raceform__consent input[type="checkbox"]:checked::after, label.cta__consent input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
label.cta__consent input[type="checkbox"] { border-color: var(--panel-foreground); }
label.cta__consent input[type="checkbox"]:checked { background: var(--lime); border-color: var(--lime); }
label.cta__consent input[type="checkbox"]:checked::after { border-color: var(--charcoal); }
.raceform__consent input[type="checkbox"]:focus-visible, label.cta__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ===== padrão de raios (um só): pílula = botões, chips, selos, etiquetas | 40 = painéis e banners largos | 24 = cards, fotos, tiles, FAQ, modal |
   16 = campos de formulário e peças aninhadas | 12 = logos, selos e miniaturas. Peças dentro de um card usam o raio do card menos a margem. ===== */
.stats > div, .stats > div:nth-child(n), .stats > div.stat--purple, .stats > div.stat--lime, .faq details, .bib { border-radius: var(--r-lg); }
.race__img { border-radius: calc(var(--r-lg) - 10px); }
.coll-seal, .race-hero .race-seals img, .race__img .race__seals img { border-radius: var(--r-sm); }
.gbadge, .gsoon, .fbadge, .avail, .kmrail__km { border-radius: var(--r-pill); }

/* Pace: mesmo ritmo das outras telas (título, texto e calculadora juntos); o formulário acompanha a rolagem ao lado dos resultados */
body[data-page="pace"] .page-top { padding-bottom: 0; }
body[data-page="pace"] .page-top + .section { padding-top: 40px; }
@media (min-width: 960px) { .pace__form { position: sticky; top: 100px; } }
.pace__form .field span, .pace__inputs .field span { text-transform: uppercase; }

/* Pace: respiros consistentes (o texto e a calculadora não ficam colados; descrição e campos têm distância dos botões) */
body[data-page="pace"] .pace { margin-top: 32px; }
.pace__form { gap: 32px; }
.pace__form .fgroup { gap: 14px; }
.pace__form .pricing__hint { margin: 0; }
.pace__inputs { gap: 14px; }
.pace__inputs .field { gap: 8px; }
.pace__out { gap: 22px; }

/* selos (Abbott, SuperHalfs): na página da corrida ficam no canto superior esquerdo da foto, como no card */
.race-hero__media { position: relative; display: block; }
.race-hero .race-seals { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.race-hero .race-seals img { width: 104px; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; padding: 9px 12px; border-radius: var(--r-sm); background: var(--charcoal); }
.race-hero .race-seals img.seal--square { width: 72px; padding: 7px; }
.race-hero .race-seals img.seal--light { background: #fff; }
@media (max-width: 599px) { .race-hero .race-seals { left: 10px; top: 10px; } .race-hero .race-seals img { width: 88px; padding: 7px 10px; } .race-hero .race-seals img.seal--square { width: 60px; padding: 6px; } }

/* cards de "Apartments for 3 or more runners": a palavra mais longa (ACCOMMODATION) precisa caber no card.
   até 899 px (iPad mini pra baixo) uma coluna; de 900 a 1079 px duas colunas, com o último card ocupando a linha toda; a partir de 1080 px, três */
@media (max-width: 899px) { .groups__cards { grid-template-columns: 1fr; } }
@media (min-width: 900px) and (max-width: 1079px) {
  .groups__cards { grid-template-columns: repeat(2, 1fr); }
  .groups__cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .groups__cards { grid-template-columns: repeat(6, 1fr); }
  .groups__cards > :nth-child(-n+3) { grid-column: span 2; }
  .groups__cards > :nth-child(n+4) { grid-column: span 3; }
}

/* consentimento de cookies e prazo de resposta */
.cookie__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer__legal2 { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-left: auto; }
.footer__bottom .footer__legal2 a { margin-left: 0; }
.form__sla { margin: 10px 0 0; font-size: 13px; color: var(--muted-foreground); }
.cta .form__sla { color: inherit; opacity: .75; }

/* campo de data: no iPhone o input date ignora a largura e estoura a tela; padroniza com os demais campos */
.field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; height: 52px; line-height: 1.2; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; margin: 0; }
.field input[type="date"]::-webkit-datetime-edit { padding: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; }
.field { min-width: 0; }

/* rede de seguranca contra rolagem horizontal no celular (clip nao cria container de rolagem, entao nao quebra header/tracker fixos) */
html, body { overflow-x: clip; }

/* como funciona nas paginas de corrida: passos sem numeracao, ligados por uma seta no desktop */
.steps .step h3 { margin-top: 0; font-size: 22px; }
@media (min-width: 900px) { .steps .step { position: relative; } .steps .step:not(:last-child)::after { content: "\2192"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 15px; line-height: 1; } }
.how__faqhead { margin-top: 56px; }
.how__faqhead h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; }
body[data-page="race"] .steps { gap: var(--grid-gap, 16px); }
@media (max-width: 899px) { body[data-page="race"] .steps { grid-template-columns: 1fr; } }

.material__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Travel as a group: atalhos no topo, Run clubs e viagem com criancas */
.grp-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
#families .lead { margin-bottom: 28px; }
#families .pricing__hint { margin-top: 20px; }
#families .btn { margin-top: 20px; }
#run-clubs { padding-bottom: 0; }
html { scroll-padding-top: 96px; }

/* cartoes do guia da prova: os blocos de clima nao podem passar da largura do cartao (3 colunas estreitas, 1080 a 1180 px) */
.wxgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wx { min-width: 0; padding: 12px; }
.wx span { overflow-wrap: anywhere; }

/* Run clubs dentro de Travel as a group: respiro entre o texto, o botao e a proxima secao */
#run-clubs { padding-bottom: 56px; }
#run-clubs .intro__grid { margin-bottom: 28px; }
#run-clubs .btn { margin-top: 4px; }

/* tabela de precos (Madrid e Roma) */
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 16px; }
.ptable th, .ptable td { padding: 14px 16px; text-align: right; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); }
.ptable th:first-child, .ptable td:first-child { text-align: left; }
.ptable thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ptable tbody th { font-weight: 500; }
.ptable__grp th { padding-top: 28px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; text-align: left; }
.ptable__total th, .ptable__total td { font-weight: 800; }
.ptable + .pricing__hint, .ptable-wrap + .pricing__hint { margin-top: 16px; }
.hotel__facts { list-style: none; padding: 0; display: grid; gap: 6px; }
.hotel__facts b { margin-right: 6px; }
@media (max-width: 520px) { .ptable th, .ptable td { padding: 12px 8px; font-size: 15px; } }

.hotel__img { margin: 20px 0 0; border-radius: var(--r-lg, 16px); overflow: hidden; }
.hotel__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* botoes da secao de precos: mesma altura, mesmo espaco, empilham no celular */
.material__btns { align-items: stretch; gap: 14px; }
.material__btns .btn { margin: 0; text-align: center; justify-content: center; }
@media (max-width: 640px) { .material__btns { flex-direction: column; } .material__btns .btn { width: 100%; } }
.ptable-wrap + .pricing__hint + .material__btns { margin-top: 28px; }

/* hotel com foto: o texto alinha com o topo da foto, nao com o titulo */
@media (min-width: 768px) {
  .hotel--img { grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 0; }
  .hotel--img > div:first-child { display: contents; }
  .hotel--img .hotel__head { grid-column: 1; grid-row: 1; }
  .hotel--img .hotel__img { grid-column: 1; grid-row: 2; align-self: start; }
  .hotel--img .hotel__text { grid-column: 2; grid-row: 2; align-self: start; margin-top: 20px; }
}

/* tabela de precos mais estreita: nao fica sob o marcador de km fixo na lateral direita */
.ptable-wrap { max-width: 760px; }
.ptable-wrap + .pricing__hint { max-width: 760px; }
@media (max-width: 1100px) { .ptable-wrap, .ptable-wrap + .pricing__hint { padding-right: 72px; box-sizing: border-box; } }