/* ============================================================================
   Team 22 · folha de estilo única da landing page.

   Organização:
     1. Webfonts (@font-face)
     2. Tokens do design system (:root) + defaults de elemento + utilidades
     3. Base da página
     4. Componentes  (botão, cartão, badge, eyebrow, bullets, dots, watermark,
                      stat, campos e formulário)
     5. Hero
     6. Resultados
     7. Obrigado
     8. Páginas legais
     9. Erros de validação
    10. Media queries

   As secções 1 e 2 são cópia literal do bloco de tokens da designer
   (`_template.html`, primeiro `<style>`); só mudaram os caminhos das fontes.
   O original usava `@container` contra o `#root` (que tinha
   `container-type: inline-size`). Aqui não há esse container, por isso todas as
   media queries da secção 10 são `@media` com os mesmos breakpoints e o mesmo
   conteúdo, e as unidades `cqw` do hero passaram a `vw` (o container era o
   `#root` a toda a largura, logo 1cqw == 1vw).
   ============================================================================ */


/* ============================================================================
   1. Webfonts
   ============================================================================ */

/* Team 22 · Webfonts
   Display + body: Montserrat (heavy geometric grotesque — matches the client's
   bold uppercase statics, e.g. "TU NÃO PERDES PESO").
   Eyebrow/kicker: Space Grotesk (clean techy grotesque, wide tracking).
   NOTE: Montserrat is the best-match substitution for the display letter the client
   liked; confirm the exact family if they have it. */

/* O original repetia o mesmo ficheiro nos pesos 400, 500, 600, 700, 800 e 900;
   como o woff2 é o mesmo nos seis, um bloco com `font-weight: 400 900` dá o
   mesmo resultado. Os itálicos e os subsets cirílico/grego/vietnamita foram
   deixados de fora (não são usados nesta página, que é em português). */

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
   2. Tokens do design system
   ============================================================================ */

/* Team 22 · Colors
   The brand is the FUSION of two coaches:
   Andreia Coelho = pink (rosa)   ·   Flávio Rocha = blue (azul)
   Direction: light "paper" base with NEON pink/blue accents.
   A dark theme scope lives at the bottom for the neon-on-dark alternative. */
:root{
  /* -- Brand cores (base) -- */
  --pink-neon:#ff2e9a;      /* Andreia · hot neon pink */
  --pink-deep:#d80f7f;      /* pressed / ink-on-light pink */
  --pink-soft:#ffd9ec;      /* pink wash / tints */
  --blue-neon:#2e6bff;      /* Flávio · electric blue */
  --blue-deep:#1740c9;      /* pressed blue */
  --blue-soft:#d8e3ff;      /* blue wash / tints */
  --cyan-neon:#16d6ff;      /* shared neon highlight (glow lines) */

  /* -- Neutrals · light "paper" -- */
  --paper:#f5f4fa;          /* page background */
  --surface:#ffffff;        /* cards, form container */
  --surface-2:#faf8fd;      /* subtle raised / alt rows */
  --ink:#101018;            /* primary text */
  --ink-soft:#585670;       /* secondary text */
  --ink-faint:#8b89a0;      /* captions, placeholders */
  --border:#e7e4f0;         /* hairlines, field borders */
  --border-strong:#d3cfe2;

  /* -- Semantic -- */
  --warn:#ff7a00;           /* alert line, "atenção" */
  --warn-soft:#ffe7cf;
  --ok:#1fc274;             /* success / thank-you */

  /* -- The "22" fusion gradient (pink → violet → blue) -- */
  --grad-fusion:linear-gradient(100deg,#ff2e9a 0%,#8a4bff 50%,#2e6bff 100%); /* @kind color */
  --grad-fusion-soft:linear-gradient(100deg,#ffd9ec 0%,#e9dcff 50%,#d8e3ff 100%); /* @kind color */
  /* subtle paper-to-tint background wash */
  --grad-paper:linear-gradient(160deg,#ffffff 0%,#f5f4fa 55%,#f0ecfa 100%); /* @kind color */

  /* -- Semantic aliases (use these in components) -- */
  --bg:var(--paper);
  --text-body:var(--ink);
  --text-muted:var(--ink-soft);
  --text-faint:var(--ink-faint);
  --surface-card:var(--surface);
  --brand:var(--pink-neon);        /* default brand accent (Andreia-led) */
  --brand-2:var(--blue-neon);
  --brand-gradient:var(--grad-fusion);
  --cta-bg:var(--grad-fusion);
  --cta-text:#ffffff;
  --link:var(--pink-deep);
  --link-hover:var(--blue-deep);
  --focus-ring:var(--blue-neon);
}

/* Team 22 · Typography
   Display = Archivo (headlines, condensed energy, weights 800-900, tight tracking)
   Sans    = Manrope (body, humane and clean)
   Kicker  = Space Grotesk (eyebrows/kickers, UPPERCASE + wide tracking) */
:root{
  --font-display:'Montserrat','Arial',sans-serif;
  --font-sans:'Montserrat',system-ui,sans-serif;
  --font-mono:'Space Grotesk','Montserrat',sans-serif;

  /* Fluid display scale (headlines) */
  --fs-display:clamp(1.75rem,3vw,2.6rem); /* @kind font */
  --fs-h1:clamp(1.55rem,2.5vw,2.1rem);  /* @kind font */
  --fs-h2:clamp(1.35rem,1.9vw,1.7rem);    /* @kind font */
  --fs-h3:1.5rem;         /* @kind font */
  --fs-h4:1.25rem;        /* @kind font */
  --fs-lead:1.25rem;      /* @kind font */
  --fs-body:1.0625rem;    /* @kind font */
  --fs-small:0.9375rem;   /* @kind font */
  --fs-eyebrow:0.8125rem; /* @kind font */
  --fs-caption:0.75rem;   /* @kind font */

  /* Weights */
  --fw-regular:400;   /* @kind font */
  --fw-medium:500;    /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:700;      /* @kind font */
  --fw-heavy:800;     /* @kind font */
  --fw-black:900;     /* @kind font */

  /* Line-heights */
  --lh-tight:1.04;    /* @kind font */
  --lh-snug:1.15;     /* @kind font */
  --lh-body:1.55;     /* @kind font */

  /* Tracking */
  --ls-headline:-0.02em;  /* @kind font */
  --ls-eyebrow:0.22em;    /* @kind font */
  --ls-wide:0.06em;       /* @kind font */
}

/* Team 22 · Spacing
   Intentional, proportional rhythm (Conet A2): a bigger gap must read clearly
   bigger. Static/LP padding reference = 96–104px on the sides. */
:root{
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:40px;    /* base "respiro" */
  --sp-8:56px;
  --sp-9:80px;    /* larger respiro (clearly bigger than 40) */
  --sp-10:96px;   /* static side padding (min) */
  --sp-11:104px;  /* static side padding (max) */

  --page-max:1200px;      /* @kind spacing */
  --gutter:clamp(20px,5vw,64px);   /* @kind spacing */
  --static-pad:clamp(56px,9vw,104px); /* @kind spacing */
}

/* Team 22 · Effects — radii, borders, shadows, neon glows, blur */
:root{
  /* Corner radii */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;    /* cards */
  --r-lg:26px;    /* form container, big cards */
  --r-xl:36px;
  --r-pill:999px; /* CTA pills, badges */

  /* Border widths */
  --bw:1px;    /* @kind spacing */
  --bw-2:2px;  /* @kind spacing */

  /* Soft elevation (light theme) */
  --shadow-sm:0 1px 2px rgba(16,16,24,.06),0 2px 8px rgba(16,16,24,.05);
  --shadow-md:0 6px 20px rgba(16,16,24,.08),0 2px 6px rgba(16,16,24,.05);
  --shadow-lg:0 24px 60px rgba(16,16,24,.14),0 8px 20px rgba(16,16,24,.08);

  /* Neon glows (the brand's signature accent) */
  --glow-pink:0 8px 30px rgba(255,46,154,.35);
  --glow-blue:0 8px 30px rgba(46,107,255,.35);
  --glow-cta:0 12px 30px rgba(138,75,255,.30);
  --glow-cyan:0 0 24px rgba(22,214,255,.55);

  /* Glass / blur (used sparingly on neon photo backgrounds) */
  --blur:18px;   /* @kind other */
  --glass:rgba(255,255,255,.72);   /* @kind color */
  --glass-dark:rgba(12,10,20,.55); /* @kind color */

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);      /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* @kind other */
  --dur-fast:120ms;   /* @kind other */
  --dur:200ms;        /* @kind other */
  --dur-slow:360ms;   /* @kind other */
}

/* Team 22 · Base element defaults (kept minimal & opt-in-friendly) */
:root{color-scheme:light;}

/* Border-box everywhere: every padded component in this system sets width:100% */
*,*::before,*::after{box-sizing:border-box;}

/* Link defaults from the palette (users add links later in the editor) */
a{color:var(--link);text-decoration:none;transition:color var(--dur) var(--ease);}
a:hover{color:var(--link-hover);}

/* Selection uses the neon pink */
::selection{background:var(--pink-neon);color:#fff;}

/* Utility text roles — optional helpers matching the type tokens */
.t22-eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-bold);}
.t22-display{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-wrap:balance;color:var(--text-body);}
.t22-h2{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--ls-headline);color:var(--text-body);}
.t22-lead{font-family:var(--font-sans);font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text-muted);text-wrap:pretty;}
.t22-body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);}

/* The signature "22 fusion" gradient text */
.t22-gradient-text{background:var(--grad-fusion);-webkit-background-clip:text;background-clip:text;color:transparent;}


/* ============================================================================
   3. Base da página
   ============================================================================ */

body { margin: 0; background: var(--paper); font-family: var(--font-sans); }
img { max-width: 100%; }
.t22-visually-hidden, .t22-field-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ============================================================================
   4. Componentes
   ============================================================================ */

/* --- Button (componente `Button`) -------------------------------------------
   Base = size "md". As variantes seguem os objetos `sizes` e `variants` do
   componente. O original punha o `translateY` do hover/press em handlers de
   rato; aqui são `:hover` e `:active`. */
.t22-btn {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  letter-spacing: .01em;
  line-height: 1;
  border-radius: var(--r-pill);
  border: none;
  background-clip: padding-box;
  isolation: isolate;
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  font-size: 1rem;
  padding: 14px 26px;
  outline: none;
  outline-offset: -1.6px;
}
.t22-btn--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--glow-cta);
}
.t22-btn--lg { font-size: 1.0625rem; padding: 18px 34px; }
.t22-btn--block { display: flex; width: 100%; }
.t22-btn:hover { transform: translateY(-2px); }
.t22-btn:active { transform: translateY(1px) scale(.99); }
.t22-btn:disabled { cursor: not-allowed; opacity: .5; }
.t22-btn:disabled:hover,
.t22-btn:disabled:active { transform: none; }
/* Acrescento ao original: o componente tinha `outline: none` sem substituto,
   o que falha o WCAG 2.1 AA 2.4.7 (foco visível) no CTA principal do form e
   dos resultados. `:focus-visible` só aparece para navegação por teclado — em
   rato não muda nada. */
.t22-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* --- Card (componente `Card`, glow="soft" pad="md") ------------------------- */
.t22-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 26px;
}

/* --- Badge (componente `Badge`) --------------------------------------------
   A página só instancia `tone="pink" solid`, por isso a cor e o fundo dessa
   variante vivem aqui. */
.t22-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--pink-neon);
  border: none;
  white-space: nowrap;
}

/* --- Eyebrow (componente `Eyebrow`) -----------------------------------------
   As cores e a tipografia já vêm da utilidade `.t22-eyebrow` dos tokens; aqui
   ficam só o layout do componente e o ponto. A página usa sempre
   `tone="gradient"`. O ponto tem de ser o PRIMEIRO filho: a media query dos
   700px esconde-o com `.t22-eyebrow>span:first-child`. */
.t22-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.t22-eyebrow--center { justify-content: center; }
.t22-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
  background: var(--grad-fusion);
  box-shadow: 0 0 12px rgba(255,46,154,.6);
}

/* --- BulletList (componente `BulletList`, check + tone="gradient") ---------- */
.t22-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.t22-bullets li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.t22-bullet-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: none;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-fusion);
  color: #fff;
}

/* --- PageDots (componente `PageDots`) ---------------------------------------
   No original os dots eram `<span>` dentro de um wrapper centrado; aqui são
   `<button>` (o carrossel da Task 6 torna-os clicáveis), por isso o
   `.t22-dots` absorve o wrapper e o `.t22-dot` neutraliza o estilo nativo. */
.t22-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}
.t22-dot {
  height: 8px;
  width: 8px;
  border-radius: 999px;
  background: var(--border-strong);
  border: none;
  padding: 0;
  appearance: none;
  cursor: pointer;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.t22-dot.is-active { width: 26px; background: var(--grad-fusion); }

/* --- Watermark (componente `Watermark`) ------------------------------------
   A posição muda conforme a secção; vive nas secções respetivas. */
.t22-watermark {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(12rem,30vw,26rem);
  line-height: 0.8;
  letter-spacing: -.04em;
  color: var(--ink);
  opacity: 0.06;
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* --- StatBadge (componente `StatBadge`, row) -------------------------------- */
.t22-stat {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
}
.t22-stat-value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem,2.6vw,2.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--grad-fusion);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t22-stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  margin-top: 0;
  max-width: 150px;
  line-height: 1.35;
}

/* --- Field / PhoneField / LeadForm (componentes `Field`, `PhoneField`,
       `LeadForm`) -----------------------------------------------------------
   No design o único rótulo visível está DENTRO da caixa, como placeholder
   (nunca um rótulo solto por cima). O `<span class="t22-field-label">` do HTML
   existe só para dar nome acessível ao campo, por isso é escondido
   visualmente — o texto visível tem de vir do atributo `placeholder` (e, no
   `<select>`, do texto da `<option value="">`).
   No original a caixa era uma `<div>` à volta do controlo; aqui a caixa é o
   próprio `input`/`select` (mesma altura final: 52px de conteúdo + 2×2px de
   borda = 56px). No campo de telefone a caixa é o `.t22-phone-row`. */
.t22-field { display: block; }

.t22-field > input,
.t22-field > select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  background: var(--surface);
  border: var(--bw-2) solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-body);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Os `<select>` deixam de usar o desenho nativo do sistema: a seta do Windows não
   combina com o resto, e o controlo nativo desenha a sua própria caixa preta de
   foco por cima da nossa. A seta passa a ser desenhada por nós, com a cor do
   sistema de design. */
.t22-field > select,
.t22-phone-row select {
  appearance: none;
  -webkit-appearance: none;
}
.t22-field > select { cursor: pointer; padding-right: 40px; text-overflow: ellipsis; }

/* Enquanto a opção vazia estiver escolhida, o select mostra-se em "placeholder".
   A cor fica só no controlo fechado: sem esta segunda regra, as `<option>` herdavam
   o cinzento e a lista aberta parecia toda desativada, que era o que acontecia no
   original. */
.t22-field > select:has(option[value=""]:checked) { color: var(--text-faint); }
.t22-field > select option,
.t22-phone-row select option { color: var(--text-body); }
.t22-field > select option[value=""] { color: var(--text-faint); }
.t22-field > input:focus,
.t22-field > select:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px rgba(46,107,255,.14);
}

.t22-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: var(--bw-2) solid var(--border);
  padding: 0 16px;
  min-height: 54px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.t22-phone-row:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px rgba(46,107,255,.14);
}

/* A seta dos selects, desenhada por nós. Tem de vir depois de qualquer regra que
   use a abreviada `background` (a `.t22-phone-row select` usa `background:
   transparent`, que apagaria esta imagem). */
.t22-field > select,
.t22-phone-row 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' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23585670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
}
.t22-field > select { background-position: right 16px center; }
.t22-phone-row select {
  flex: 0 0 auto;
  max-width: 92px;
  width: 92px;
  height: 52px;
  border: none;
  outline: none;
  /* `background-color` e não a abreviada `background`: esta regra vem depois da
     que desenha a seta, e a abreviada apagaria a imagem. */
  background-color: transparent;
  background-position: right 0 center;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 0 16px 0 0;
}
/* Risco vertical entre o indicativo e o número (era um `<span>` no original). */
.t22-phone-sep {
  width: 1px;
  height: 18px;
  flex: none;
  background: var(--border);
}
.t22-phone-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-body);
  padding: 0;
}

.t22-form {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px,3vw,30px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.t22-form-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text-body);
}
.t22-form-sub {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.t22-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.t22-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  cursor: pointer;
}
.t22-consent input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  accent-color: var(--pink-neon);
  flex: none;
}
.t22-form-note {
  margin: -4px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle, var(--text-muted));
}


/* ============================================================================
   5. Hero
   ============================================================================ */

.t22-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.t22-hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: clamp(560px, 62vw, 820px);
}
.t22-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--paper));
}
.t22-hero-bg {
  position: relative;
  height: 100%;
  background-image: url("../assets/img/hero-gym-bg.webp");
  background-size: cover;
  background-position: 58% 55%;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.t22-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 32%, color-mix(in srgb, var(--paper) 74%, transparent) 44%, color-mix(in srgb, var(--paper) 22%, transparent) 58%, transparent 68%);
}
.t22-hero-wrap {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(26px,4vw,52px) var(--gutter) clamp(44px,5vw,80px);
}
.t22-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px,4vw,44px);
}
.t22-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.t22-hero-col {
  position: relative;
  z-index: 5;
  max-width: clamp(500px, 64%, 840px);
}
.t22-hero-col .t22-eyebrow {
  max-width: min(100%, 520px);
  white-space: nowrap;
}
.t22-hero-col h1 {
  margin: 16px 0 0;
  max-width: min(100%, 520px);
}
.t22-hero-col > p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 18px 0 22px;
  max-width: min(100%, 614px);
  text-wrap: pretty;
}
.t22-hero-form {
  position: relative;
  margin-top: clamp(24px,3vw,34px);
  width: min(100%, 620px);
}

@keyframes t22-proof-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.t22-proof-float{position:absolute;z-index:3;top:-26px;right:-30px;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:var(--r-pill);background:var(--surface);border:var(--bw-2) solid var(--border);box-shadow:var(--shadow-lg);animation:t22-proof-bob 4.6s var(--ease) infinite}
/* Sem regra aqui de propósito: no original (Hero.jsx:79) o seletor
   `.t22-proof-float [style*="font-mono"], .t22-proof-float>div>div:last-child`
   nunca chegava a aplicar-se — o StatBadge com `row` já tinha `maxWidth:'150px'`
   inline, e inline ganha sempre a uma folha de estilo sem `!important`. O label
   fica com os 150px de `.t22-stat-label` (linha ~462). Não voltar a acrescentar
   um `max-width` mais estreito aqui. */
.t22-hero-duo{display:none}
.t22-floats{position:absolute;top:0;right:0;width:min(52%,620px);height:clamp(560px,62vw,820px);pointer-events:none}
.t22-stage{position:absolute;top:0;right:0;height:clamp(560px,62vw,820px);width:min(52%,620px);pointer-events:none;z-index:1}
.t22-stage-duo{position:absolute;right:calc(6% - 50px);bottom:0;height:90%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}
.t22-float-f{position:absolute;z-index:1;left:calc(16% + 15px);top:26%;width:clamp(112px,12vw,150px);transform:rotate(-4deg)}
.t22-float-a{position:absolute;z-index:1;right:calc(1% - 50px);top:calc(23% + 20px);width:clamp(112px,12vw,150px);transform:rotate(4deg)}

/* Cartões de evolução (componente `ProofChip`): Flávio a azul, Andreia a rosa. */
.t22-float-f,
.t22-float-a {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.t22-float-f { border: 2px solid var(--blue-neon); }
.t22-float-a { border: 2px solid var(--pink-neon); }
/* `height:auto` deixa os atributos width/height da <img> reservarem a caixa sem
   ganharem ao `aspect-ratio` abaixo (o atributo é uma dica de apresentação e, sem
   isto, esticava a foto). */
.t22-float-f img,
.t22-float-a img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}
.t22-float-f img { aspect-ratio: 4 / 5; }
.t22-float-a img { aspect-ratio: 1 / 1; }
.t22-float-cap {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink);
  white-space: nowrap;
}
.t22-float-f .t22-float-cap { top: 6px; left: 6px; }
.t22-float-a .t22-float-cap { bottom: 6px; right: 6px; }
.t22-float-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: none;
}
.t22-float-f .t22-float-dot { background: var(--blue-neon); }
.t22-float-a .t22-float-dot { background: var(--pink-neon); }


/* ============================================================================
   6. Resultados
   ============================================================================ */

.t22-results {
  position: relative;
  overflow: hidden;
  background: var(--grad-paper);
  padding: clamp(48px,7vw,92px) var(--gutter);
}
.t22-results .t22-watermark { left: -8%; bottom: -14%; }
.t22-results-inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
}
.t22-results-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(30px,4vw,48px);
}
.t22-results-head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  color: var(--text-body);
  text-wrap: balance;
  text-align: center;
  margin: 14px 0 0;
}
.t22-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(10px,2vw,18px);
  max-width: 1000px;
  margin: 0 auto;
}
.t22-slides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px,1.6vw,20px);
}
/* `Card` com pad="sm" e overflow escondido. */
.t22-slide { padding: 18px; overflow: hidden; }
.t22-slide-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.t22-slide-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t22-slide-delta {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--grad-fusion);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.t22-slide-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.t22-slide-foot strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--ink);
}
.t22-slide-foot span {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}
.t22-arrow {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  border: var(--bw) solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.t22-results-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px,4vw,44px);
}

/* Rodapé da landing page: não existe no design original (a designer só tinha
   os links legais no fim das páginas legais). Fica com o mesmo registo. */
.t22-footer {
  padding: 0 var(--gutter) clamp(28px,4vw,48px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-faint);
}


/* ============================================================================
   7. Obrigado
   ============================================================================ */

.t22-thanks {
  position: relative;
  overflow: hidden;
  background: var(--grad-paper);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px,7vw,90px) var(--gutter);
}
.t22-thanks .t22-watermark { right: -6%; top: -10%; }
.t22-thanks-inner {
  position: relative;
  width: min(100%, 560px);
  text-align: center;
}
.t22-thanks-check {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  margin: 0 auto 26px;
  background: var(--grad-fusion);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-cta);
}
.t22-thanks h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 14px 0 12px;
}
.t22-thanks p {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 460px;
}
/* Link de volta: acrescentado no rebuild, no registo do rodapé das legais. */
.t22-thanks .t22-thanks-back {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: 40px auto 0;
  max-width: none;
}


/* ============================================================================
   8. Páginas legais
   ============================================================================ */

.t22-legal {
  position: relative;
  overflow: hidden;
  background: var(--grad-paper);
  min-height: 100%;
  padding: clamp(34px,6vw,72px) var(--gutter) clamp(50px,7vw,90px);
}
.t22-legal .t22-watermark { right: -8%; top: -12%; }
.t22-legal-inner {
  position: relative;
  width: min(100%, 740px);
  margin: 0 auto;
}
.t22-legal-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  display: block;
  width: fit-content;
  margin-bottom: clamp(26px,4vw,44px);
}
.t22-legal-logo span:nth-of-type(1) { color: var(--pink-neon); }
.t22-legal-logo span:nth-of-type(2) { color: var(--blue-neon); }
.t22-legal h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 14px 0 8px;
}
.t22-legal h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 34px 0 10px;
}
.t22-legal p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.t22-legal ul {
  margin: 0 0 12px;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.t22-legal li {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.t22-legal .t22-legal-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.t22-legal-rule {
  height: 2px;
  background: var(--grad-fusion);
  width: 72px;
  margin: 22px 0 6px;
  border-radius: 2px;
}
.t22-legal .t22-legal-foot {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: 40px 0 0;
}
/* Marcador `[A CONFIRMAR]` (componente `TBC` das páginas legais). */
.t22-tbc {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}


/* ============================================================================
   9. Erros de validação
   Não existe no design original; é o que a validação do formulário usa.
   ============================================================================ */

.t22-field-error {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--pink-deep);
}
.t22-field-error:empty { display: none; }
.t22-field.is-invalid input,
.t22-field.is-invalid select {
  border-color: var(--pink-neon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-neon) 18%, transparent);
}
/* No campo de telefone a caixa é o `.t22-phone-row`; o `select` e o `input` lá
   dentro não têm borda, por isso o realce vai para a caixa e não para eles. */
.t22-field--phone.is-invalid .t22-phone-row {
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-neon) 18%, transparent);
}
.t22-field--phone.is-invalid .t22-phone-row input,
.t22-field--phone.is-invalid .t22-phone-row select {
  box-shadow: none;
}
.t22-consent.is-invalid { color: var(--pink-deep); }
@media (prefers-reduced-motion: reduce) {
  .t22-proof-float { animation: none; }
  * { scroll-behavior: auto !important; }
}


/* ============================================================================
   10. Media queries
   Conversão 1:1 dos `@container` da designer (o `#root` tinha
   `container-type: inline-size`, que aqui não existe). Breakpoints e conteúdo
   iguais; só `cqw` passou a `vw`.
   ============================================================================ */

@media (max-width: 1000px){
  .t22-floats{width:min(58%,520px);right:8px}
  .t22-hero-col h1,.t22-hero-col>p{max-width:min(100%,380px) !important}
  .t22-stage{width:min(58%,520px)}
  .t22-stage-duo{right:0}
  .t22-float-f{width:112px;left:calc(16% + 15px);top:24%}
  .t22-float-a{width:112px;right:0;top:calc(21% + 20px)}
}

@media (max-width: 980px){
  .t22-slides{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* Inerte no rebuild: o carrossel da Task 6 esconde os slides com `hidden`. */
  .t22-slide-3{display:none}
}

@media (max-width: 900px){
  .t22-hero-bg{background-position:70% 30% !important}
  .t22-hero-wash{background:linear-gradient(90deg, var(--paper) 0%, var(--paper) 46%, color-mix(in srgb, var(--paper) 72%, transparent) 68%, color-mix(in srgb, var(--paper) 30%, transparent) 88%) !important}
}

@media (max-width: 700px){
  .t22-hero-wrap{padding-left:20px !important;padding-right:20px !important;padding-top:22px !important}
  .t22-hero-top{justify-content:center !important}
  .t22-hero-col{max-width:100% !important;text-align:center}
  .t22-hero-col h1{font-size:1.45rem !important;line-height:1.14 !important;text-align:center !important}
  .t22-hero-col>p{font-size:15px !important}
  .t22-hero-col h1,.t22-hero-col>p{max-width:100% !important;margin-left:auto !important;margin-right:auto !important}
  .t22-hero-col ul,.t22-hero-col ol{text-align:left;width:fit-content;max-width:min(100%,286px);margin-left:auto !important;margin-right:auto !important}
  /* Scoping só ao hero: no original o componente Eyebrow não acrescentava
     nenhuma classe própria (fazia spread de `...rest`; só ficava com
     `className` se alguém lho passasse explicitamente). Hero.jsx:37 passa
     `className="t22-eyebrow"`; Results.jsx:41 não passa nenhuma. Por isso
     esta regra de 700px, que no original vivia no <style> do componente
     Hero, só alguma vez tocou o eyebrow do hero — o dos resultados manteve
     sempre o tamanho, o `display` e o ponto do gradiente. Aqui os dois
     eyebrows carregam `.t22-eyebrow` (é a utilidade base de tipografia,
     sem estilos inline), por isso o seletor tem de ficar limitado ao hero. */
  .t22-hero-col .t22-eyebrow{display:block !important;text-align:center}
  .t22-hero-col .t22-eyebrow>span:first-child{display:none !important}
  .t22-eb-sep{display:none}
  .t22-eb-a,.t22-eb-b{display:block;white-space:nowrap}
  .t22-hero-col .t22-eyebrow{font-size:10px !important}
  .t22-hero-col ul li,.t22-hero-col ol li{text-align:left}
  .t22-hero-form form>div:first-child{text-align:center}
  .t22-hero-form .t22-field{text-align:left}
  .t22-proof-float{position:relative !important;top:auto !important;right:auto !important;animation:none;margin:0 auto 14px;width:max-content}
  .t22-floats{position:absolute !important;inset:0 !important;width:auto !important;height:auto !important;display:block !important;margin:0 !important;z-index:0;pointer-events:none;--t22-cardw:clamp(62px,24vw,96px)}
  .t22-stage{display:none}
  .t22-stage-duo{display:none}
  .t22-float-f,.t22-float-a{position:absolute !important;width:var(--t22-cardw) !important;transform:none !important;top:calc(72px + 9px) !important;right:auto !important}
  .t22-float-f{left:calc(50% - clamp(16px,9vw,35px) - var(--t22-cardw)) !important}
  .t22-float-a{left:calc(50% + clamp(16px,9vw,39px)) !important}
  .t22-hero-wash{background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 14%, transparent 30%) !important}
  .t22-hero-top{margin-bottom:20px !important}
  .t22-hero-photo{height:calc(72px + min(72vw,300px) * 0.86) !important;bottom:auto !important;min-height:0 !important}
  .t22-hero-duo+.t22-hero-col{margin-top:0}
  .t22-hero-fade{height:38% !important}
  .t22-hero-bg{background-size:cover !important;background-position:top center !important;background-repeat:no-repeat !important;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%) !important;mask-image:linear-gradient(180deg,#000 72%,transparent 100%) !important}
  /* `height:auto` é um acrescento ao original, decidido com o cliente. Sem ele, o
     atributo `height="1273"` da <img> ganha ao `aspect-ratio` e o recorte fica com
     1273px de altura, empurrando o H1 para 1,63 ecrãs num telemóvel de 390px. Com
     ele fica a 242px e o título sobe para acima da dobra — que é o que a regra
     `.t22-hero-photo` acima já orçamenta (~313px). Não afeta o desktop. */
  .t22-hero-duo{display:block;width:min(72vw,300px);height:auto;margin:0 auto -10px;position:relative;z-index:2;aspect-ratio:1 / 0.86;object-fit:cover;object-position:top center;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
  .t22-hero-form{width:100% !important}
  .t22-hero-form form{padding:18px 16px !important}
  .t22-hero-form .t22-form-row{grid-template-columns:1fr !important}
  .t22-hero-form input,.t22-hero-form select,.t22-hero-form textarea{max-width:100%;min-width:0}
}

@media (max-width: 640px){
  .t22-results{padding-left:20px !important;padding-right:20px !important}
  .t22-carousel{grid-template-columns:1fr !important}
  .t22-slides{grid-template-columns:1fr !important}
  /* Inerte no rebuild: ver a nota do breakpoint de 980px. */
  .t22-slide-2{display:none}
  .t22-results-head h1{font-size:1.45rem !important;line-height:1.15 !important}
  .t22-carousel>button{display:flex !important;position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px}
  .t22-carousel>button:first-of-type{left:-4px}
  .t22-carousel>button:last-of-type{right:-4px}
}

@media (max-width: 470px){
  .t22-brand-badge{display:none}
}