/* Barlow and Barlow Condensed (SIL Open Font License), latin subset, served from this site:
   no request to Google before consent, and the two heading weights are preloaded. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/barlow-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/barlow-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/barlow-condensed-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/barlow-condensed-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* STHENOS, sthenos.fit. Tokens come from the brand marks: the logo's
   near-black (#190F0F) and gold (#CDAC6D), and the cream (#F3F1E8) the Carrd
   pages used behind the cream logo. One family in two widths: Barlow
   Condensed for display, Barlow for text. */

:root {
  --preto: #190f0f;
  --preto-2: #241817;
  --preto-3: #2f2321;
  --ouro: #cdac6d;
  --ouro-escuro: #a8883e;
  --creme: #f3f1e8;
  --creme-2: #e8e4d6;
  --creme-3: #d9d3c0;
  --tinta: #1c1512;
  --giz: #6b625a;
  --branco: #fffdf7;
  --erro: #9c3b2e;

  --display: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif;
  --ouro-texto: #866a2b;
  --texto: 'Barlow', system-ui, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(56px, 9vw, 120px);
  --radius: 4px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 8.5vw, 7.25rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; }
h2 { font-size: clamp(2.25rem, 5vw, 4rem); text-transform: uppercase; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; }
p { margin: 0 0 1em; max-width: 62ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ouro); color: var(--preto); padding: 10px 14px; font-weight: 500;
}
.skip:focus { top: 8px; }

/* Buttons. Two kinds only: filled gold (the one action we want) and
   outlined (everything else). Text says what happens. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.01em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border-radius: var(--radius);
  border: 2px solid var(--ouro); background: var(--ouro); color: var(--preto);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { background: var(--ouro-escuro); border-color: var(--ouro-escuro); }
.btn--ghost { background: transparent; color: var(--creme); border-color: rgba(243, 241, 232, .55); }
.btn--ghost:hover { background: rgba(243, 241, 232, .1); border-color: var(--creme); }
.btn--ink { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--ink:hover { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 1.05rem; }
.link { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ouro-escuro); text-decoration-thickness: 2px; }
.link:hover { text-decoration-color: var(--tinta); }
.on-dark .link, .dark .link, .lead__in .link { color: var(--creme); }
.lead__in .link:hover { text-decoration-color: var(--creme); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--preto); color: var(--creme);
  border-bottom: 1px solid rgba(205, 172, 109, .25);
}
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.header__logo img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); }
.nav a:not(.btn) {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; color: var(--creme); opacity: .85; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--ouro); }
.nav__toggle {
  display: none; background: none; border: 2px solid rgba(243, 241, 232, .4); color: var(--creme);
  font: inherit; font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase;
  padding: 8px 12px; border-radius: var(--radius); cursor: pointer;
}
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
         background: var(--preto-2); border-bottom: 1px solid rgba(205, 172, 109, .25); padding: 8px var(--gutter) 20px; }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid rgba(243, 241, 232, .12); }
  .nav .btn { margin-top: 14px; }
}

/* Hero (home and box). Photo under a dark wash; type sits bottom-left. */
.hero {
  position: relative; color: var(--creme); background: var(--preto);
  min-height: clamp(520px, 78vh, 820px); display: grid; align-items: end; overflow: hidden;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .62; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25, 15, 15, .25) 0%, rgba(25, 15, 15, .1) 35%, rgba(25, 15, 15, .85) 100%);
}
.hero__in { position: relative; z-index: 1; padding-block: clamp(40px, 7vw, 88px) clamp(36px, 6vw, 72px); }
.hero__kicker { font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; color: var(--ouro); margin: 0 0 14px; letter-spacing: .02em; }
.hero h1 { margin-bottom: 0.25em; max-width: 12ch; }
.hero p { font-size: clamp(1.125rem, 1.7vw, 1.4rem); max-width: 48ch; color: rgba(243, 241, 232, .92); margin-bottom: 1.4em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sections */
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section__head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 56px); max-width: 70ch; }
.section__head p { font-size: 1.125rem; color: var(--giz); margin: 0; }
.dark { background: var(--preto); color: var(--creme); }
.dark .section__head p { color: rgba(243, 241, 232, .75); }
.dark h2, .dark h3 { color: var(--creme); }

/* Box board: one row per box, read like a departures board. */
.board { border-top: 2px solid var(--tinta); }
.box-row {
  display: grid; grid-template-columns: minmax(180px, 0.9fr) 1.1fr 1.2fr auto; gap: clamp(16px, 2.5vw, 40px); align-items: center;
  padding-block: clamp(18px, 2.5vw, 28px); border-bottom: 1px solid var(--creme-3);
}
.box-row__img { aspect-ratio: 5 / 3; object-fit: cover; border-radius: var(--radius); background: var(--creme-2); }
.box-row__name { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.75rem); font-weight: 800; text-transform: uppercase; line-height: .95; margin: 0 0 6px; }
.box-row__name a { text-decoration: none; }
.box-row__name a:hover { color: var(--ouro-escuro); }
.box-row__meta { color: var(--giz); margin: 0; font-size: 1rem; }
.box-row__meta strong { color: var(--tinta); font-weight: 500; }
.box-row__info { font-size: 1rem; display: grid; gap: 4px; }
.box-row__info span { display: block; }
.box-row__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-family: var(--display); font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; padding: 3px 8px; border: 1px solid var(--creme-3); border-radius: 2px; color: var(--giz); }
.box-row__cta { display: grid; gap: 8px; justify-items: stretch; }
.box-row--soon .box-row__img { filter: grayscale(1) contrast(.9); opacity: .75; }
.box-row--soon .box-row__name { color: var(--giz); }
@media (max-width: 960px) {
  .box-row { grid-template-columns: minmax(140px, .8fr) 1.2fr; }
  .box-row__info { grid-column: 1 / -1; }
  .box-row__cta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}
@media (max-width: 560px) {
  .box-row { grid-template-columns: 1fr; }
  .box-row__img { aspect-ratio: 16 / 9; }
  .box-row__cta { grid-auto-flow: row; }
}

/* How it works: three steps in sequence, gold rule running through. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); counter-reset: step; }
.step { position: relative; padding-top: 22px; border-top: 3px solid var(--creme-3); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -3px; left: 0; height: 3px; width: 56px; background: var(--ouro);
  font-size: 0; /* the number itself is rendered by .step__n */
}
.step__n { font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--ouro-escuro); margin: 0 0 6px; }
.step h3 { margin-bottom: .35em; }
.step p { color: var(--giz); margin: 0; font-size: 1.05rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Method band */
.method { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.method img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.method p { font-size: 1.15rem; color: rgba(243, 241, 232, .85); }
@media (max-width: 860px) { .method { grid-template-columns: 1fr; } }

/* Communities: alternating strips, image + text, the community's own mark. */
.com { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--creme-3); }
.com:nth-child(even) .com__img { order: 2; }
.com__img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.com__logo { height: 44px; width: auto; max-width: 320px; object-fit: contain; object-position: left; margin-bottom: 18px; filter: brightness(0) saturate(100%); opacity: .9; }
.com h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); text-transform: uppercase; font-weight: 800; }
.com p { color: var(--giz); }
.com__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .com { grid-template-columns: 1fr; } .com:nth-child(even) .com__img { order: 0; } }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.service { padding: 24px; background: var(--creme-2); border-radius: var(--radius); display: grid; align-content: start; gap: 8px; }
.service h3 { margin: 0; }
.service p { color: var(--giz); margin: 0 0 8px; font-size: 1rem; }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.contact__text p { color: rgba(243, 241, 232, .8); font-size: 1.1rem; }
.contact__alt { margin-top: 24px; display: grid; gap: 10px; font-size: 1rem; color: rgba(243, 241, 232, .8); }
.form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ouro); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--creme); background: var(--preto-2); border: 1px solid rgba(243, 241, 232, .25); border-radius: var(--radius);
  padding: 12px 14px; width: 100%; min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ouro) 50%), linear-gradient(135deg, var(--ouro) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ouro); outline: none; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .98rem; color: rgba(243, 241, 232, .85); }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ouro); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* Footer */
.footer { background: var(--preto); color: rgba(243, 241, 232, .8); border-top: 1px solid rgba(205, 172, 109, .25); padding-block: clamp(40px, 6vw, 72px) 28px; font-size: .98rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.footer__logo img { height: 28px; width: auto; margin-bottom: 16px; }
.footer h4 { font-size: 1.15rem; text-transform: uppercase; color: var(--ouro); margin-bottom: 12px; letter-spacing: .03em; }
.footer li { margin-bottom: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(243, 241, 232, .12); font-size: .9rem; color: rgba(243, 241, 232, .6); }
.footer__bottom p { margin: 0; max-width: none; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__logo { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Box page ---------- */
.facts { background: var(--creme-2); border-bottom: 1px solid var(--creme-3); }
.facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); padding-block: 22px; }
.fact { display: grid; gap: 4px; font-size: 1rem; }
.fact h4 { font-size: 1.05rem; text-transform: uppercase; color: var(--giz); letter-spacing: .04em; margin: 0 0 2px; font-weight: 600; }
.fact address { font-style: normal; }
@media (max-width: 760px) { .facts__grid { grid-template-columns: 1fr; gap: 16px; } }

.intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.intro p { font-size: 1.2rem; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 160px; gap: 8px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.gallery img:first-child { grid-row: span 2; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } .gallery { grid-auto-rows: 120px; } }

/* The class board: the one bold element of the box page. A dark board,
   one column per day, gold times. On small screens JS turns the days into
   tabs; without JS the days stack. */
.board-wrap { position: relative; }
.days { display: none; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.days button {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em;
  background: transparent; color: rgba(243, 241, 232, .7); border: 1px solid rgba(243, 241, 232, .25); border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer;
}
.days button[aria-selected="true"] { background: var(--ouro); color: var(--preto); border-color: var(--ouro); }
.grid-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; background: rgba(205, 172, 109, .18); border: 2px solid rgba(205, 172, 109, .18); }
.grid-days[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-days[data-cols="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-days[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-days[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 840px; }
.grid-days[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.grid-days[data-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.contact__links { display: flex; gap: 16px; }
.day { background: var(--preto); padding: 14px 12px 18px; min-width: 0; }
.day h3 { font-size: 1.35rem; text-transform: uppercase; color: var(--ouro); letter-spacing: .04em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(205, 172, 109, .3); }
.slot { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed rgba(243, 241, 232, .12); }
.slot:last-child { border-bottom: 0; }
.slot time { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ouro); letter-spacing: .02em; white-space: nowrap; }
.slot span { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--creme); line-height: 1.1; overflow-wrap: anywhere; }
.slot small { grid-column: 2; color: rgba(243, 241, 232, .5); font-size: .85rem; }
.board-note { margin-top: 18px; color: rgba(243, 241, 232, .65); font-size: .98rem; max-width: 70ch; }
@media (max-width: 900px) {
  .js .days { display: flex; }
  .js .grid-days { grid-template-columns: 1fr; border: 0; background: transparent; gap: 0; }
  .js .day { display: none; padding: 0; }
  .js .day.is-active { display: block; }
  .js .day h3 { display: none; }
  .no-js .grid-days { grid-template-columns: 1fr; }
}

/* Classes list */
.classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(20px, 3vw, 48px); border-top: 1px solid var(--creme-3); }
.classes div { padding: 16px 0; border-bottom: 1px solid var(--creme-3); }
.classes dt { font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.classes dd { margin: 4px 0 0; color: var(--giz); font-size: 1rem; }

/* Coaches */
.coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.coach figure { margin: 0; }
.coach img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 2px; }
.coach figcaption { font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; margin-top: 10px; }

/* Join options: the trial is filled, the rest outlined. */
.join { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.join__item { padding: 24px; border: 2px solid var(--creme-3); border-radius: var(--radius); display: grid; gap: 8px; align-content: start; }
.join__item--primary { background: var(--preto); color: var(--creme); border-color: var(--preto); }
.join__item h3 { margin: 0; text-transform: uppercase; }
.join__item p { margin: 0 0 10px; font-size: 1rem; color: var(--giz); }
.join__item--primary p { color: rgba(243, 241, 232, .8); }
.join__extras { margin-top: 16px; display: grid; gap: 8px; }
.join__extras li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 1rem; color: var(--giz); }
@media (max-width: 860px) { .join { grid-template-columns: 1fr; } }

/* Where */
.where { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.where address { font-style: normal; font-size: 1.2rem; line-height: 1.4; margin-bottom: 16px; }
.where ul { display: grid; gap: 6px; color: var(--giz); margin-bottom: 20px; }
@media (max-width: 760px) { .where { grid-template-columns: 1fr; } }

/* Soon (Odivelas) */
.soon { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.soon__others { display: grid; gap: 10px; }
.soon__others a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--creme-3); border-radius: var(--radius); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.soon__others a span { font-family: var(--texto); font-weight: 400; font-size: .95rem; text-transform: none; color: var(--giz); }
.soon__others a:hover { border-color: var(--tinta); }
@media (max-width: 760px) { .soon { grid-template-columns: 1fr; } }

/* Result and legal pages */
.result { min-height: 60vh; display: grid; align-content: center; }
.result h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.8rem; margin-top: 1.6em; }
.prose h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.prose li { list-style: disc; margin-left: 1.2em; margin-bottom: .4em; }

/* ---------- Lead machine (added 2026-10-25) ---------- */
/* Proof strip under the hero: three facts, nothing invented. */
.proof { background: var(--preto-2); color: var(--creme); border-top: 1px solid rgba(205, 172, 109, .25); }
.proof__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-block: 18px; }
.proof__list li { display: flex; align-items: baseline; gap: 12px; }
.proof__list strong { font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--ouro); }
.proof__list span { font-size: .98rem; color: rgba(243, 241, 232, .8); max-width: 22ch; }
@media (max-width: 760px) { .proof__list { grid-template-columns: 1fr; gap: 8px; } .proof__list strong { font-size: 2rem; min-width: 2ch; } }

.section__head--row { display: flex; align-items: end; justify-content: space-between; gap: 16px; max-width: none; flex-wrap: wrap; }
.section__head--row h2 { margin: 0; }
.steps__cta { margin-top: clamp(24px, 3vw, 40px); }

/* FAQ: native details, one line each, gold marker. */
.faq__list { border-top: 1px solid var(--creme-3); max-width: 80ch; }
.faq__item { border-bottom: 1px solid var(--creme-3); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 40px 16px 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; line-height: 1.1;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--ouro-escuro); font-size: 1.6rem; font-weight: 600; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0 0 18px; color: var(--giz); max-width: 70ch; }

/* Lead dialog: the two-click path. Dark card, gold heading, two fields. */
.lead { border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100vw - 32px)); width: 100%; margin: auto; }
.lead::backdrop { background: rgba(25, 15, 15, .78); backdrop-filter: blur(2px); }
.lead__in { position: relative; background: var(--preto); color: var(--creme); border: 1px solid rgba(205, 172, 109, .35); border-radius: 6px; padding: clamp(22px, 4vw, 36px); }
.lead__close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: rgba(243, 241, 232, .7); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 6px 10px; }
.lead__close:hover { color: var(--creme); }
.lead__kicker { font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ouro); margin: 0 0 8px; }
.lead h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: .3em; }
.lead__text { color: rgba(243, 241, 232, .8); font-size: 1.02rem; margin-bottom: 20px; }
.lead .form { gap: 12px; }
.lead__actions { display: grid; gap: 10px; margin-top: 8px; }
.form__error { color: #f0b9ae; background: rgba(156, 59, 46, .25); border: 1px solid rgba(156, 59, 46, .6); border-radius: var(--radius); padding: 10px 12px; font-size: .95rem; margin: 0; }
.field input::placeholder { color: rgba(243, 241, 232, .35); }
html.has-dialog { overflow: hidden; }

/* Lead landing page */
.lead-page__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.lead-page h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.lead-page__boxes { display: grid; gap: 10px; margin-top: 24px; }
.lead-page__boxes li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid rgba(243, 241, 232, .18); border-radius: var(--radius); font-size: .98rem; color: rgba(243, 241, 232, .75); }
.lead-page__boxes strong { font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: var(--creme); }
.lead-page__form { background: var(--preto-2); border: 1px solid rgba(205, 172, 109, .35); border-radius: 6px; padding: clamp(20px, 3vw, 32px); position: sticky; top: 84px; }
.lead-page__form .lead__step[data-step="done"] h2 { font-size: 2.2rem; }
@media (max-width: 860px) { .lead-page__grid { grid-template-columns: 1fr; } .lead-page__form { position: static; } }

/* Thank-you (no-JS) */
.result__links li { display: flex; flex-wrap: wrap; gap: 10px; }
.result .hero__kicker { margin-bottom: 8px; }

/* Sticky mobile bar: one gold button, appears when the hero CTA leaves the screen. */
.stickybar { display: none; }
@media (max-width: 860px) {
  .stickybar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(25, 15, 15, .96); border-top: 1px solid rgba(205, 172, 109, .35); transform: translateY(0); transition: transform .25s var(--ease); }
  .stickybar .btn { width: 100%; }
  .stickybar--auto { transform: translateY(110%); }
  .stickybar--auto.is-visible { transform: translateY(0); }
  body { padding-bottom: 0; }
  .footer { padding-bottom: 96px; }
}

/* Cookie banner: bottom-left card, two buttons, nothing blocks the page. */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 520px; background: var(--creme); color: var(--tinta); border: 1px solid var(--creme-3); border-radius: 6px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(25, 15, 15, .35); }
.cookie p { font-size: .95rem; margin: 0 0 12px; max-width: none; }
.cookie .link { color: var(--tinta); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie .btn--ghost { color: var(--tinta); border-color: var(--tinta); }
.cookie .btn--ghost:hover { background: var(--tinta); color: var(--creme); }
@media (max-width: 860px) { .cookie { bottom: 84px; } }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn[hidden] { display: none; }
.result__links li[hidden], .lead__step[hidden], .lead-page__boxes li[hidden] { display: none; }

/* Closing CTA band (the Carrd line "Pronto para te juntares à família das barras?") */
.ctaband { background: var(--ouro); color: var(--preto); }
.ctaband__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: clamp(32px, 5vw, 56px); }
.ctaband h2 { margin: 0 0 6px; font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 18ch; }
.ctaband p { margin: 0; font-size: 1.1rem; color: rgba(25, 15, 15, .8); }
.ctaband .btn { background: var(--preto); border-color: var(--preto); color: var(--creme); }
.ctaband .btn:hover { background: var(--preto-3); border-color: var(--preto-3); }
.intro .link { display: inline-block; margin-top: 4px; }

/* ---------- live schedule (main.js + /api/schedule) ---------- */
.weeks { display: flex; gap: 6px; margin-bottom: 14px; }
.weeks button, .days button small { font-family: var(--texto); }
.weeks button { background: transparent; color: var(--creme); border: 1px solid rgba(205, 172, 109, .45); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: .95rem; cursor: pointer; }
.weeks button[aria-pressed="true"] { background: var(--creme); color: var(--preto); border-color: var(--creme); }
.days button small { display: block; font-size: .72rem; font-weight: 500; opacity: .75; line-height: 1; margin-top: 2px; }
.day h3 small { display: block; font-family: var(--texto); font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(243, 241, 232, .6); margin-top: 2px; }
.day.is-today h3 { color: var(--creme); border-bottom-color: var(--ouro); }
.day.is-today h3 small { color: var(--ouro); }
.day[data-past] h3 { opacity: .55; }
.slot.is-past { opacity: .42; }
.slot em { grid-column: 2; font-style: normal; font-size: .8rem; color: var(--ouro); letter-spacing: .04em; text-transform: uppercase; }
.day__open { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(205, 172, 109, .3); color: rgba(243, 241, 232, .7); font-size: .92rem; }
.board-live { margin: 14px 0 0; color: var(--ouro); font-size: .95rem; }
.board-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); margin-right: 8px; vertical-align: 1px; }

/* ---------- community photo strips + method mosaic ---------- */
.com__media { display: grid; gap: 8px; }
.com__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.com__strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.method__mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.method__mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.method__mosaic img:first-child { grid-column: 1 / -1; border-radius: var(--radius); }

/* Turnstile */
.cf-turnstile iframe { max-width: 100%; }

.footer__legal { margin: 14px 0 0; font-size: .8rem; color: rgba(243, 241, 232, .5); max-width: 110ch; }
.footer__bottom p a + a { margin-left: 14px; }

/* ---------- Pre-sale (Odivelas, 2026-11-13) ---------- */
/* Announcement line above the header, on every page except the pre-sale page. */
.announce { display: block; background: var(--ouro); color: var(--preto); text-decoration: none; font-size: .98rem; }
.announce__in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; padding-block: 9px; text-align: center; }
.announce strong { font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.announce:hover { background: var(--ouro-escuro); }

/* Home board: the pre-sale row reads as live, with a gold tag. */
.tag { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--ouro); color: var(--preto); font-family: var(--display); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; border-radius: 2px; }

/* Hero: a longer headline than a box name, so it gets more measure and a smaller size. */
.hero--presale { min-height: clamp(560px, 84vh, 860px); }
.hero--presale .hero__img { object-position: center 55%; opacity: .5; }
.hero--presale::after { background: linear-gradient(180deg, rgba(25, 15, 15, .35) 0%, rgba(25, 15, 15, .25) 30%, rgba(25, 15, 15, .92) 100%); }
.hero--presale h1 { font-size: clamp(2.9rem, 7.6vw, 6.5rem); max-width: 15ch; }
.hero--presale p { max-width: 54ch; }
.hero .hero__note { margin: 18px 0 0; font-size: 1rem; color: rgba(243, 241, 232, .75); }
.hero__note::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); margin-right: 10px; vertical-align: 1px; }

.proof__list--4 { grid-template-columns: repeat(4, 1fr); }
.proof__list--4 li { flex-direction: column; gap: 4px; }
.proof__list--4 strong { white-space: nowrap; }
@media (max-width: 900px) { .proof__list--4 { grid-template-columns: 1fr 1fr; gap: 18px 16px; } }

/* Packs. Each card carries its own payment calendar: the amount due in each
   of the first months, and the founder fee from then on. The calendar is the
   argument, so it gets the board treatment (dark cells, gold figures). */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 30px); border: 2px solid var(--creme-3); border-radius: var(--radius); background: var(--branco); }
.pack h3 { text-transform: uppercase; font-weight: 800; margin: 0 0 10px; }
.pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.pack__price strong { font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 5vw, 4.4rem); line-height: .9; letter-spacing: -.02em; white-space: nowrap; }
.pack__price span { color: var(--giz); font-size: 1rem; }
.pack__summary { color: var(--giz); font-size: 1rem; margin: 0 0 18px; }
.pack__months { margin: auto 0 0; }
.pack__heads, .pack__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 2px; }
.pack__heads span { font-size: .82rem; color: var(--giz); padding: 0 0 5px 2px; white-space: nowrap; }
.pack__cells span { display: grid; place-items: center; min-height: 46px; padding: 6px 4px; background: var(--preto); color: var(--creme); font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.05; text-align: center; }
.pack__cells span[data-span="3"] { grid-column: span 3; background: var(--ouro); color: var(--preto); }
.pack__cells span.is-founder { background: var(--preto-3); color: var(--ouro); }
.pack__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--creme-3); font-size: 1rem; color: var(--giz); max-width: none; }
.pack__total strong { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--tinta); white-space: nowrap; }
.pack__list { display: grid; gap: 8px; margin: 0 0 22px; font-size: 1rem; }
.pack__list li { position: relative; padding-left: 20px; }
.pack__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 3px; background: var(--ouro-escuro); }
.pack .btn { width: 100%; }
.pack--featured { background: var(--preto); border-color: var(--ouro); color: var(--creme); }
.pack--featured h3 { color: var(--creme); }
.pack--featured .pack__price strong { color: var(--ouro); }
.pack--featured .pack__price span, .pack--featured .pack__summary, .pack--featured .pack__heads span, .pack--featured .pack__total { color: rgba(243, 241, 232, .75); }
.pack--featured .pack__cells span { background: var(--preto-3); }
.pack--featured .pack__cells span[data-span="3"] { background: var(--ouro); }
.pack--featured .pack__total { border-bottom-color: rgba(243, 241, 232, .18); }
.pack--featured .pack__total strong { color: var(--creme); }
.pack--featured .pack__list li::before { background: var(--ouro); }
.pack__badge { position: absolute; top: 0; left: clamp(20px, 2.4vw, 30px); transform: translateY(-50%); margin: 0; padding: 4px 10px; background: var(--ouro); color: var(--preto); font-family: var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; border-radius: 2px; white-space: nowrap; }
.packs__note { margin: 22px 0 0; color: var(--giz); font-size: .98rem; max-width: 80ch; }
@media (max-width: 980px) {
  .packs { grid-template-columns: 1fr; gap: 22px; max-width: 560px; }
  .pack--featured { order: -1; }
}

/* Founder section: the membership card is the one drawn object on the page. */
.founder { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
.founder__text > p { font-size: 1.15rem; color: rgba(243, 241, 232, .85); }
.founder__points { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); margin: 26px 0 30px; border-top: 1px solid rgba(205, 172, 109, .3); }
.founder__points div { padding: 16px 0; border-bottom: 1px solid rgba(243, 241, 232, .12); }
.founder__points dt { font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; color: var(--ouro); line-height: 1.05; }
.founder__points dd { margin: 6px 0 0; color: rgba(243, 241, 232, .8); font-size: 1rem; }
.fcard {
  position: relative; aspect-ratio: 1.586; width: 100%; max-width: 460px; justify-self: center;
  display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(135deg, #dcc086 0%, var(--ouro) 45%, #b08f4c 100%); color: var(--preto);
  border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transform: rotate(-4deg);
}
.fcard img { height: 22px; width: auto; }
.fcard p { margin: 0; max-width: none; }
.fcard__label { align-self: end; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.3rem); text-transform: uppercase; line-height: .9; letter-spacing: -.01em; }
.fcard__place { position: absolute; top: clamp(18px, 2.4vw, 28px); right: clamp(18px, 2.4vw, 28px); font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; text-align: right; line-height: 1.05; }
.fcard__place span { display: block; font-weight: 600; opacity: .7; }
.fcard__price { margin-top: 10px; padding-top: 10px; border-top: 2px solid rgba(25, 15, 15, .55); font-family: var(--display); font-weight: 700; font-size: 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fcard__price span { font-family: var(--texto); font-weight: 500; font-size: 1rem; }
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .fcard { order: -1; max-width: 360px; justify-self: start; margin: 6px 0 10px 8px; transform: rotate(-3deg); }
}
@media (max-width: 560px) { .founder__points { grid-template-columns: 1fr; } }

/* Classes + photos, where + group proof */
.section--alt { background: var(--creme-2); }
.section--alt .classes, .section--alt .classes div { border-color: var(--creme-3); }
.intro .section__head { margin-bottom: 0; }
.intro .section__head p { font-size: 1.125rem; }
.intro__media { margin: 0; }
.intro__media figcaption { margin-top: 10px; font-size: .9rem; color: var(--giz); }
#aulas .classes { margin-top: clamp(28px, 4vw, 48px); }
.where__group { padding: clamp(20px, 2.6vw, 32px); background: var(--creme-2); border-radius: var(--radius); }
.where__group p { color: var(--giz); font-size: 1rem; }
.where p { font-size: 1.1rem; }
.where .where__proof { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; color: var(--tinta); }
.where__proof li { display: grid; gap: 2px; font-size: .95rem; color: var(--giz); }
.where__proof strong { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--ouro-escuro); }

/* Pre-sale dialog: pack choice as three rows, then the same two fields. */
.packpick { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; min-width: 0; }
.packpick legend { padding: 0; margin-bottom: 6px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ouro); }
.packpick__opt { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(243, 241, 232, .25); border-radius: var(--radius); cursor: pointer; }
.packpick__opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--ouro); }
.packpick__opt span { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.packpick__opt strong { font-family: var(--display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; }
.packpick__opt small { font-size: .9rem; color: rgba(243, 241, 232, .7); }
.packpick__opt:has(input:checked) { border-color: var(--ouro); background: rgba(205, 172, 109, .12); }
.packpick__opt:has(input:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 2px; }
.lead__skip { margin: 14px 0 0; font-size: .92rem; }
.lead__skip .link { color: rgba(243, 241, 232, .75); text-decoration-thickness: 1px; }
.lead { max-height: calc(100dvh - 24px); }
.lead__in { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.callme { position: static; }
.callme .lead__kicker { font-size: 1.6rem; color: var(--ouro); }

/* ---------- Review pass (2026-11-13) ---------- */
/* Step numbers: `.step p` used to win over `.step__n` and shrink the numeral. */
.step .step__n { font-size: 3rem; color: var(--ouro-escuro); margin: 0 0 6px; }

/* Cookie notice must never sit on the hero buttons: bottom-right on desktop
   (the hero type is bottom-left), a slim full-width strip on phones. */
@media (min-width: 861px) { .cookie { left: auto; } }
@media (max-width: 860px) {
  .cookie { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; border-width: 1px 0 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(25, 15, 15, .25); }
  .cookie p { font-size: .88rem; line-height: 1.4; margin-bottom: 10px; }
  .cookie .btn--small { min-height: 38px; }
}

/* Pack cards share their rows, so price, calendar, total and button line up across the three. */
.pack__price { flex-direction: column; align-items: flex-start; gap: 6px; }
.pack__months { margin: 0; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 981px) {
    .packs { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .pack { display: grid; grid-template-rows: subgrid; grid-row: span 7; }
    .pack .btn { align-self: end; }
  }
}

/* FAQ on the pre-sale page: heading left, answers right. */
@media (min-width: 900px) {
  .faq--split { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
  .faq--split .section__head { position: sticky; top: 100px; margin-bottom: 0; }
  .faq--split .faq__list { max-width: none; }
}
.ctaband--wide h2 { max-width: 24ch; }

/* Phones: the class list becomes a two-column index of names, so the page stays short. */
@media (max-width: 700px) {
  #aulas .classes { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  #aulas .classes dd { display: none; }
  #aulas .classes div { padding: 12px 0; }
  #aulas .classes dt { font-size: 1.2rem; }
  .hero--presale { min-height: clamp(520px, 78vh, 760px); }
}

/* Proof strip with two facts (home, 2026-11-13): keep them together on the left. */
@media (min-width: 761px) { .proof__list:not(.proof__list--4) { grid-template-columns: repeat(auto-fit, minmax(0, 340px)); } }

/* Two services (2026-11-13): two columns, not three with a hole. */
@media (min-width: 761px) { .services { grid-template-columns: repeat(auto-fit, minmax(0, 420px)); } }

/* Two packs: two wider cards instead of three columns with a hole. */
@media (min-width: 981px) { .packs[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; } }

/* ---------- Classes in groups (2026-11-13) ---------- */
/* The same groups, in the same order, on every box: group name left, its classes right. */
.classgroups { border-top: 2px solid var(--tinta); }
.classgroup { display: grid; grid-template-columns: minmax(170px, .26fr) 1fr; gap: 0 clamp(20px, 3vw, 48px); align-items: start; border-bottom: 1px solid var(--creme-3); }
.classgroup h3 { margin: 0; padding: 18px 0; font-size: 1.5rem; text-transform: uppercase; color: var(--ouro-escuro); }
.classgroup .classes { border-top: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.classgroup .classes div { border-bottom: 0; padding: 18px 0; }
#aulas .classgroups { margin-top: clamp(28px, 4vw, 48px); }
#aulas .classgroup .classes { margin-top: 0; }
@media (max-width: 700px) {
  .classgroup { grid-template-columns: 1fr; padding: 14px 0; }
  .classgroup h3 { padding: 0 0 4px; font-size: 1.25rem; }
  .classgroup .classes div { padding: 6px 0; }
  #aulas .classgroup .classes { grid-template-columns: 1fr 1fr; }
  #aulas .classgroup .classes div { padding: 4px 0; }
}

/* Dialog scrollbar in the dark palette (it showed as a white system bar on short screens). */
.lead__in { scrollbar-width: thin; scrollbar-color: rgba(205, 172, 109, .55) transparent; }

/* Red-team pass (2026-11-14): the recurring charge sits with the price; one more shared row. */
.pack__after { margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid var(--ouro-escuro); background: var(--creme-2); font-size: .95rem; color: var(--tinta); }
.pack--featured .pack__after { background: var(--preto-3); color: var(--creme); border-left-color: var(--ouro); }
.pack__summary { margin-bottom: 12px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 981px) {
    .packs { grid-template-rows: repeat(8, auto); }
    .pack { grid-row: span 8; }
  }
}
.packpick__opt span { flex-direction: column; align-items: flex-start; gap: 2px; }

/* ---------- Simpler pre-sale page (2026-11-14) ---------- */
/* Two packs use the full width. */
@media (min-width: 981px) { .packs[data-count="2"] { max-width: none; } }
/* Class index: group in gold, class names on one line. */
.classindex { margin: clamp(20px, 3vw, 32px) 0 0; border-top: 2px solid var(--tinta); }
.classindex div { display: grid; grid-template-columns: minmax(150px, .4fr) 1fr; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--creme-3); align-items: baseline; }
.classindex dt { font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: var(--ouro-escuro); }
.classindex dd { margin: 0; font-size: 1.05rem; }
#aulas .intro { align-items: start; }
#aulas .gallery { grid-auto-rows: 190px; }
@media (max-width: 560px) { .classindex div { grid-template-columns: 1fr; gap: 0; padding: 10px 0; } #aulas .gallery { grid-auto-rows: 120px; } }

/* ---------- Performance and accessibility pass (2026-11-14) ---------- */
/* Until Barlow Condensed arrives, headings use a system face squeezed to the same width, so the
   hero does not re-wrap and push the buttons down when the font swaps in. */
@font-face { font-family: 'Barlow Condensed Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto'); font-weight: 600 800; size-adjust: 66%; ascent-override: 118%; descent-override: 30%; line-gap-override: 0%; unicode-range: U+0-10FFFF; }
.hero__actions { min-height: 48px; }
/* Phones: the cookie notice sits above the sticky button instead of on top of it. */
@media (max-width: 860px) { .stickybar.is-visible ~ .cookie { bottom: calc(69px + env(safe-area-inset-bottom)); } }
/* Focus ring readable on light sections; gold stays on the dark ones. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: var(--tinta); }
.dark :focus-visible, .header :focus-visible, .hero :focus-visible, .footer :focus-visible, .lead :focus-visible, .proof :focus-visible, .stickybar :focus-visible, .pack--featured :focus-visible, .lead-page :focus-visible { outline-color: var(--ouro); }
/* Dark gold as text on cream needs more contrast than as a rule or a fill. */
.classindex dt, .classgroup h3, .step .step__n, .where__proof strong, .faq__item summary::after { color: var(--ouro-texto); }
.lead__text, [data-thanks-text] { overflow-wrap: anywhere; }
.lead__close { min-width: 44px; min-height: 44px; }