/* ==========================================================================
   MARTIM'S STUDIO — Energia, Performance e Saúde · Lisboa

   O logótipo manda em tudo. O anel cortado é a forma assinatura, o gradiente
   bronze é o único acento, e a geométrica do lettering (Questrial, o
   equivalente livre da tipografia do logo) é a voz dos títulos.
   A página é clara — areia quente — com duas âncoras escuras: a abertura e o
   rodapé. É onde o logótipo vive.

   O EIXO. Tudo encosta à mesma margem esquerda, do hero ao rodapé: etiqueta,
   título, lede, grelhas, botões. Foi a mudança que mais mexeu com a página —
   antes cada secção era um cabeçalho centrado com um filete dourado por baixo,
   e sete iguais seguidos leem-se como um modelo, não como uma marca. A força
   passou a estar no tamanho do título e no espaço à volta, não em ornamento.
   --------------------------------------------------------------------------
    1. Tokens          5. Hero            9. Testemunhos
    2. Base            6. O conceito     10. Contacto
    3. Abertura        7. Packs          11. FAQ
    4. Nav             8. O treinador    12. Rodapé
    13. Responsivo · 14. Movimento reduzido
   ========================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* ALABASTRO · o claro da casa.
     Terceira tentativa, e a boa. Começou em areia quente (#EDE4D6): amarela,
     lia-se poeirenta. Passou a cal (#F0EEE9): melhor, mas ainda morna. Agora é
     alabastro, quase neutro e mais claro. O luxo nesta categoria não vem de
     uma cor bonita, vem de haver POUCAS cores e MUITO contraste entre elas. */
  --sand:      #F3F2EF;   /* o chão da página */
  --sand-2:    #E7E5E0;   /* segundo plano, um degrau que se vê */
  --card:      #FCFBF9;   /* superfícies que sobem: gesso */

  /* ÓNIX · o escuro é o das paredes do estúdio, e é fundo a sério.
     Um preto meio claro lê-se a cinzento; a partir daqui lê-se a sala. */
  --espresso:  #0E0E0C;
  --espresso-2:#191917;
  --cream:     #F6F5F2;

  /* GRAFITE · a tinta */
  /* --ink titula, --ink-2 é o corpo do texto, --ink-mute só para o que é
     mesmo secundário (idades, unidades, etiquetas). */
  --ink:       #121210;
  --ink-2:     #3E3C36;
  --ink-mute:  #67655E;
  --sand-soft: #C4C2BB;

  /* OURO PÁLIDO · o metal.
     Era um gradiente de quatro pontos, depois um champanhe chapado, agora um
     ouro pálido: menos laranja ainda. E, sobretudo, aparece MUITO menos.
     A regra é de superfície, não de gosto:
        sobre ÓNIX   o cheio é ouro   (a barra de navegação, o hero)
        sobre ALABASTRO o cheio é ónix (todos os outros botões)
     Assim o botão de marcar treino é sempre a coisa com mais contraste no
     ecrã, e o ouro deixa de ser decoração para ser raridade. */
  --bronze-hi: #DCC391;   /* sobre escuro */
  --bronze:    #C0A268;   /* filetes e ornamento */
  --bronze-ink:#755C2A;   /* texto pequeno sobre claro */
  --gold:      #C9AF7C;   /* preenchimentos sobre escuro */
  --gold-soft: #755C2A;   /* palavra em destaque sobre claro */
  --gold-lift: #DCC391;   /* palavra em destaque sobre escuro */

  --line-d: rgba(18,18,16,.12);      /* filete sobre claro */
  --line-l: rgba(243,242,239,.14);   /* filete sobre escuro */

  /* tipografia — Questrial é a geométrica do logótipo; Manrope faz o corpo */
  --display:'Questrial', 'Century Gothic', -apple-system, Arial, sans-serif;
  --body:   'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* A escala é deliberadamente aberta: o título é MUITO maior do que tudo o
     resto. Era esta a diferença entre "arrumado" e "moderno" — antes os
     títulos andavam a 3rem e os ledes a 1,1rem, perto demais um do outro
     para haver hierarquia, e a página lia-se toda ao mesmo volume. */
  --fs-hero:  clamp(2.5rem, 6.2vw, 5.4rem);
  --fs-h2:    clamp(2.3rem, 5vw, 4.05rem);
  --fs-h3:    clamp(1.7rem, 2.6vw, 2.35rem);
  --fs-lede:  clamp(1.02rem, .5vw + .92rem, 1.22rem);
  --fs-eyebrow:.68rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  /* o espaçamento é hierarquia, não régua: as secções leves respiram,
     as densas apertam. --sec-y fica como medida do meio.
     ----------------------------------------------------------------------
     ISSO ACABOU: UM SÓ ESPAÇAMENTO, EM TODA A PÁGINA.
     Eram três medidas — as secções leves (conceito, instagram) respiravam
     mais, as densas (packs, testemunhos, perguntas) apertavam. A intenção era
     hierarquia, mas ao percorrer a página lê-se como falta de régua: umas
     secções com mais folga que outras, sem que se perceba porquê.
     Os três tokens ficam com o mesmo valor. Mantêm-se os três NOMES para não
     ter de se tocar nas dezena de sítios que os usam — e para que voltar atrás
     seja mudar três linhas, e não caçá-los pela folha toda. */
  --sec-y:    clamp(4.75rem, 8.5vh, 7.5rem);
  --sec-y-lg: clamp(4.75rem, 8.5vh, 7.5rem);
  --sec-y-sm: clamp(4.75rem, 8.5vh, 7.5rem);
  --wrap:   1280px;

  --r-card: 4px;      /* cantos quase rectos: o arredondado vive só nas pílulas */
  --r-media:6px;
  --r-pill: 100px;

  --ease:     cubic-bezier(.25,.6,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-curtain: cubic-bezier(.76,0,.24,1);
  --e-snap:   cubic-bezier(.2,1.6,.4,1);

  /* a lei geométrica: o corte do anel tem 48° de abertura, centrado a −6,3°.
     todo o gesto que CORTA ou MEDE usa este ângulo; a estrutura fica a 0°. */
  --cut: -6.3deg;
}

/* ============ 2. BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:110px; }
html.is-loading{ overflow:hidden; }

body{
  margin:0; background:var(--sand); color:var(--ink-2);
  font-family:var(--body); font-size:1rem; font-weight:400; line-height:1.65; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img,video,iframe,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.15em; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  margin:0; font-family:var(--display); font-weight:400;
  line-height:1.04; letter-spacing:-.028em; color:var(--ink);
}
h1 em,h2 em,h3 em{
  font-style:normal;
  background:var(--gold-soft); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not (background-clip:text){ h1 em,h2 em,h3 em{ color:var(--bronze-ink); } }

/* secções escuras */
.on-dark{ background:var(--espresso); color:var(--sand-soft); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--cream); }
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em{ background:var(--gold-lift); -webkit-background-clip:text; background-clip:text; }
@supports not (background-clip:text){ .on-dark h1 em,.on-dark h2 em,.on-dark h3 em{ color:var(--bronze-hi); } }

::selection{ background:var(--bronze); color:var(--cream); }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* nenhuma coluna pode ser esticada pelo conteúdo para além do ecrã */
.hero__inner > *,.sec-head > *,.pack-grid > *,.pack > *,
.coach__grid > *,.contact__grid > *,
.contact__info > *{ min-width:0; }

.skip{ position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--espresso); color:var(--cream); padding:.8rem 1.2rem; border-radius:var(--r-pill); }
.skip:focus{ left:1rem; top:1rem; }

.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:140; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; will-change:transform; }

/* etiquetas */
/* A etiqueta é só a palavra. Tinha um traço a desenhar-se ao lado; com uma
   coluna própria (ver .sec-head) o traço passou a ser ruído — a posição já
   diz o que o traço dizia. */
.eyebrow{
  font-family:var(--body); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-ink);
  margin:0 0 1.5rem;
}
.eyebrow--light,.on-dark .eyebrow{ color:var(--bronze-hi); }

/* O CABEÇALHO DE SECÇÃO — o eixo da página
   Sete secções seguidas com etiqueta centrada, título centrado, filete
   centrado e lede centrado: era isso que fazia o site parecer um modelo. Nada
   tinha eixo, e por isso nada tinha peso.
   Agora tudo encosta à margem esquerda — etiqueta, título, lede, e as grelhas
   que vêm a seguir. É uma linha vertical só, do primeiro ecrã ao rodapé, e é
   dela que vem a sensação de ordem.
   (Chegou a experimentar-se a etiqueta numa coluna à parte, à esquerda do
   título. Ficava bonito isolado e mau no conjunto: empurrava o título para o
   meio da página enquanto os cartões por baixo continuavam a começar na
   margem. Duas margens é o mesmo que nenhuma.) */
.sec-head{ margin:0 0 clamp(2.8rem,5vw,4.5rem); }
.sec-head .eyebrow{ margin:0 0 1.1rem; }

/* UM título é UM título: mesma escala, mesmo peso, em toda a página.
   O gradiente bronze saiu daqui de propósito — quando cinco títulos
   seguidos o usavam, deixava de ser ênfase e passava a papel de parede.
   Vive agora só no hero e na frase do conceito. O acento continua
   presente aqui, mas como filete: uma marca, não uma cor de texto. */
/* Os títulos de secção são etiquetas de estrutura, não a voz da marca —
   por isso levam Manrope a 700, que tem negrito desenhado a sério. O
   Questrial não tem peso bold: forçá-lo dava negrito sintético, com as
   contra-formas do "a" e do "e" empastadas. O Questrial fica onde a marca
   fala: o hero, a frase do conceito, os nomes dos packs e as citações. */
.sec-title{ font-family:var(--body); font-weight:800;
  font-size:var(--fs-h2); margin:0; letter-spacing:-.05em; line-height:.98;
  color:var(--ink); text-wrap:balance; }
/* O filete dourado por baixo de cada título foi-se. Sete filetes iguais numa
   página não sublinham nada — são um padrão. O tamanho do título já é a
   ênfase; o acento fica para onde é raro. */
/* Não é preciso zerar esta margem quando o título fica sozinho no cabeçalho:
   sendo o último filho de um .sec-head sem padding nem borda, ela colapsa com
   a margem do próprio .sec-head e prevalece a maior, que é sempre a do
   cabeçalho. Medido: a página do preçário dá 2339px de altura com e sem o
   texto de apoio. */
.sec-head .sec-title{ margin-bottom:1.4rem; }
.sec-lede{ color:var(--ink-2); font-size:var(--fs-lede); line-height:1.55;
  max-width:44ch; margin:0; }
.on-dark .sec-title{ color:var(--cream); }
.on-dark .sec-lede{ color:var(--sand-soft); }

/* BOTÕES
   Cada botão tinha um preenchimento a varrer de um lado ao outro no hover, e
   ao passar o rato pela página aquilo era um desfile. Ficou o mínimo: a cor
   muda, a seta abre. Um gesto por botão, não dois.
   O dourado é só do botão de marcar treino — uma cor, uma acção. Tudo o resto
   é espresso cheio ou contorno. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.9rem; border-radius:var(--r-pill);
  font-family:var(--body); font-size:.86rem; font-weight:600; letter-spacing:.005em;
  border:0; background:transparent; color:var(--ink);
  cursor:pointer; white-space:nowrap;
  transition:background-color .32s var(--ease), color .32s var(--ease),
             box-shadow .32s var(--ease), transform .18s var(--ease), filter .32s var(--ease);
}
.btn span{ display:inline-flex; align-items:center; gap:0; transition:gap .35s var(--ease); }
.btn span::after{ content:'→'; max-width:0; opacity:0; overflow:hidden;
  transition:max-width .35s var(--ease), opacity .25s var(--ease); }
.btn:hover span{ gap:.5rem; }
.btn:hover span::after{ max-width:2em; opacity:1; }
.btn:active{ transform:translateY(1px); }
.btn--lg{ padding:1.12rem 2.3rem; font-size:.92rem; }
.btn--xl{ padding:1.15rem 2.4rem; font-size:.94rem; }

.btn--gold{ background:var(--gold); color:#121210; }
.btn--gold:hover{ filter:brightness(1.07); }

.btn--dark{ background:var(--espresso); color:var(--cream); }
.btn--dark:hover{ background:var(--bronze-ink); color:var(--cream); }

.btn--outline-light{ color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(246,245,242,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.btn--outline-light:hover{ background:var(--cream); color:var(--espresso);
  box-shadow:inset 0 0 0 1px transparent; }

/* ==========================================================================
   3. ABERTURA
   Dois arcos desenham-se, dão lugar ao logótipo, e a página parte-se ao meio
   para entrar. A cortina abre pelo corte do anel.
   ========================================================================== */
/* SEGUNDA PÁGINA: SEM ABERTURA.
   O main.js marca `no-intro` quando esta visita já viu a cortina. Não basta
   esconder o preloader: os atrasos das animações do hero estavam sincronizados
   com ela (1,5s a 2,3s), e sem a cortina o hero ficaria dois segundos e meio em
   branco à espera de nada. Por isso os atrasos também encolhem. */
html.no-intro .preloader{ display:none!important; }
html.no-intro .hero .mask:nth-child(1) .mask__in{ animation-delay:.04s; }
html.no-intro .hero .mask:nth-child(2) .mask__in{ animation-delay:.13s; }
html.no-intro .hero .mask:nth-child(3) .mask__in{ animation-delay:.22s; }
html.no-intro .hero__copy .eyebrow{ animation-delay:0s; }
html.no-intro .hero__actions{ animation-delay:.34s; }
html.no-intro .hero__rail{ animation-delay:.5s; }

.preloader{ position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:var(--espresso);
  animation:plOpen 0s linear 1.48s forwards, plHide 0s linear 2.5s forwards; }
@keyframes plOpen{ to{ background:transparent; } }
@keyframes plHide{ to{ visibility:hidden; } }

.preloader__panel{ position:absolute; left:0; right:0; height:51%; background:var(--espresso); }
.preloader__panel--top   { top:0;    animation:panelUp   .9s var(--ease-curtain) 1.5s forwards; }
.preloader__panel--bottom{ bottom:0; animation:panelDown .9s var(--ease-curtain) 1.5s forwards; }
@keyframes panelUp  { to{ transform:translateY(-101%); } }
@keyframes panelDown{ to{ transform:translateY(101%);  } }

.preloader__mark{
  position:absolute; left:50%; top:50%; width:min(56vw,440px);
  aspect-ratio:1705/1053;
  transform:translate(-50%,-50%);
  animation:markOut .55s var(--ease) 1.5s forwards;
}
@keyframes markOut{ to{ opacity:0; transform:translate(-50%,-50%) scale(1.09); } }

.pm__draw{ position:absolute; inset:0; width:100%; height:100%;
  animation:pmFadeOut .4s ease .82s forwards; }
.pm__draw path{ stroke-dasharray:231; stroke-dashoffset:231; animation:pmDraw .9s cubic-bezier(.33,.85,.35,1) .1s forwards; }
@keyframes pmDraw   { to{ stroke-dashoffset:0; } }
@keyframes pmFadeOut{ to{ opacity:0; } }

/* o logótipo original entra inteiro quando os arcos se apagam */
.pm__logo{ position:relative; width:100%; height:auto; opacity:0; transform:translateY(6px);
  animation:pmLogo .8s var(--ease-out) .8s forwards; }
@keyframes pmLogo{ to{ opacity:1; transform:translateY(0); } }

/* ============ 4. NAVEGAÇÃO ============ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:120;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s; }
/* A barra é transparente por cima do hero, que é escuro, e ganha fundo ao
   descer. Nas páginas sem hero (o preçário) tem de trazer o fundo desde o
   início: sem ele, o logótipo claro e os links claros ficavam por cima do
   alabastro, ou seja, invisíveis. */
body.scrolled .nav,
body.sem-hero .nav{
  background:rgba(14,14,12,.88); border-bottom-color:var(--line-l);
  -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2);
}
.nav__inner{ max-width:var(--wrap); margin-inline:auto; padding:1.15rem var(--gutter);
  display:flex; align-items:center; gap:1.8rem; transition:padding .5s var(--ease); }
body.scrolled .nav__inner{ padding-block:.7rem; }

.brand{ display:block; margin-right:auto; }
/* o logótipo é o PNG original — 1705x1053, rácio 1,619.
   A altura sai da largura para nunca o deformar. */
.brand__logo{ width:156px; height:auto; transition:width .5s var(--ease); }
body.scrolled .brand__logo{ width:114px; }

.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{ position:relative; font-size:.86rem; font-weight:500; color:var(--sand-soft);
  padding-block:.3rem; transition:color .3s var(--ease); }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ padding:.72rem 1.5rem; font-size:.8rem; }

/* PT / EN
   Duas letras e uma barra, e não uma bandeira: há mais de um país por trás de
   cada uma destas línguas, e a bandeira escolhe um. Não é um menu suspenso
   porque só há duas opções — um menu para duas escolhas esconde metade da
   informação atrás de um clique.
   A que está activa lê-se em creme e a outra em apagado: o contraste entre as
   duas é o que diz em que língua se está, sem precisar de caixa nem de fundo. */
.lang{ display:flex; align-items:center; gap:.42rem; flex:0 0 auto; }
.lang__opt{
  font-size:.74rem; font-weight:600; letter-spacing:.1em;
  color:var(--sand-soft); opacity:.62;
  padding:.3rem .1rem; transition:color .3s var(--ease), opacity .3s var(--ease);
}
.lang__opt:hover{ color:var(--cream); opacity:1; }
.lang__opt.is-on{ color:var(--cream); opacity:1; cursor:default; }
.lang__sep{ font-size:.74rem; color:var(--sand-soft); opacity:.32; }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--line-l); border-radius:50%;
  background:transparent; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ display:block; width:16px; height:1px; background:var(--cream); transition:transform .35s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{ position:fixed; inset:0; z-index:119; background:var(--espresso);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  padding:7rem var(--gutter) 3rem; }
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ font-family:var(--display); font-size:1.9rem; color:var(--cream); padding:.4rem 0; }
.mobile-menu__cta{ margin-top:1.6rem; font-family:var(--body)!important; font-size:.95rem!important; font-weight:600!important;
  background:var(--gold); color:#121210!important; padding:.95rem 2rem!important; border-radius:var(--r-pill); }

/* O CTA FIXO é exclusivo do telemóvel: no desktop o botão vive na navegação,
   que está sempre à vista. Ver §13. */
.dock{ display:none; }

/* DUAS VERSÕES DO MESMO TEXTO
   Onde a coluna do telemóvel é estreita a ponto de o texto do desktop não se
   ler, o HTML traz as duas redacções e o CSS escolhe. É a alternativa a cortar
   com line-clamp, que deixa frases a meio, ou a encolher a letra, que não
   resolve nada: o que muda é o número de palavras, não o corpo. */
.narrow-only{ display:none; }

/* ============ 5. HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:8rem clamp(7rem,11vh,9rem); overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
/* o <picture> é inline por omissão: sem isto o height:100% da imagem passava a
   medir-se contra uma caixa de altura automática e a fotografia não enchia */
.hero__media picture{ display:block; position:absolute; inset:0; }
.hero__img{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  /* a fotografia fica visível: só o suficiente de gradação para a puxar
     para o âmbar da marca e para o texto poder assentar em baixo */
  filter:saturate(.6) sepia(.1) contrast(1.04) brightness(.97);
  transform:scale(1.06); will-change:transform;
  /* o afundamento (translateY + scale) é escrito pelo motor, por frame;
     uma animation CSS sobre transform ganharia à cascata e apagaria isso */
}
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    /* a poça que segura o texto: só onde o texto está, e sobe o suficiente
       para apanhar a etiqueta, que é o elemento mais frágil sobre a sala clara */
    radial-gradient(62% 58% at 26% 52%, rgba(14,14,12,.82) 0%, rgba(14,14,12,.44) 48%, rgba(14,14,12,0) 86%),
    /* O CANTO SUPERIOR DIREITO baixa de luz. É a parte mais clara da
       fotografia (tecto branco), e por isso a que mais puxava o olho para
       longe do texto. Agora cai na sombra, como cai numa fotografia com luz
       lateral a sério. De caminho, é também o canto onde estava a caixa de
       cartão que se apagou: menos luz ali é menos atenção ali.
       A sombra é BAIXA e larga de propósito. Chegou a descer mais e apagava o
       muro branco que está por baixo do tecto, e esse muro é o que dá fundo e
       profundidade à sala. Fica agarrada ao canto de cima e larga o muro. */
    radial-gradient(80% 44% at 100% -8%, rgba(14,14,12,.80) 0%, rgba(14,14,12,.44) 36%, rgba(14,14,12,.14) 68%, rgba(14,14,12,0) 92%),
    /* o mínimo em cima para a nav e em baixo para a calha */
    linear-gradient(180deg, rgba(14,14,12,.52) 0%, rgba(14,14,12,.1) 20%, rgba(14,14,12,.1) 62%, rgba(14,14,12,.36) 88%, rgba(14,14,12,.62) 100%);
}

/* O hero também abandonou o centro. Texto encostado à esquerda, na mesma
   margem do resto da página: o olho entra sempre pelo mesmo sítio, do
   primeiro ecrã ao último. */
.hero__inner{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter); }
.hero__copy .eyebrow{ text-shadow:0 1px 12px rgba(14,14,12,.8); }
.hero__title{ font-size:var(--fs-hero); letter-spacing:-.05em; line-height:.96;
  margin:0 0 2.1rem; color:var(--cream); max-width:15ch;
  text-shadow:0 2px 30px rgba(14,14,12,.55); }
.hero__title em{ background:var(--gold-lift); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mask{ display:block; overflow:hidden; padding-bottom:.05em; }
.mask__in{ display:block; transform:translateY(105%); animation:maskUp 1.1s var(--ease-out) forwards; }
.hero .mask:nth-child(1) .mask__in{ animation-delay:1.55s; }
.hero .mask:nth-child(2) .mask__in{ animation-delay:1.67s; }
.hero .mask:nth-child(3) .mask__in{ animation-delay:1.79s; }
@keyframes maskUp{ to{ transform:translateY(0); } }

.hero__copy .eyebrow{ color:var(--bronze-hi); }
.hero__copy .eyebrow,.hero__actions{ opacity:0; animation:riseIn .9s var(--ease-out) forwards; }
.hero__copy .eyebrow{ animation-delay:1.5s; }
.hero__actions{ animation-delay:2s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

.hero__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* a calha do slogan fecha o hero: as três palavras do logótipo, em movimento */
.hero__rail{
  position:absolute; left:0; right:0; bottom:0; height:54px; overflow:hidden;
  display:flex; align-items:center; border-top:1px solid rgba(201,175,124,.3);
  background:linear-gradient(180deg, rgba(14,14,12,.4), rgba(14,14,12,.86));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; animation:riseIn .9s var(--ease-out) 2.3s forwards;
}
.hero__rail-skew{ will-change:transform; }
.hero__rail-track{
  display:flex; align-items:center; gap:2.6rem; padding-left:2.6rem; white-space:nowrap;
  font-family:var(--display); font-size:.82rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--bronze-hi); animation:marquee 44s linear infinite;
}
.hero__rail-track i{ width:4px; height:4px; border-radius:50%; background:var(--bronze); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============ 6. O CONCEITO ============ */
/* É aqui que a marca se explica: um alfaiate. Daí o único elemento novo da
   página — a costura vertical em bronze a separar as duas metades da ideia,
   e a marca de giz a abrir cada uma. Nenhuma cor nova: tudo sai dos tokens.
   O creme escorre para a areia dos packs, para não haver emenda dura. */
.concept{
  position:relative; overflow:hidden; padding-block:var(--sec-y-lg);
  background:
    radial-gradient(48% 62% at 90% 4%, rgba(201,175,124,.12) 0%, rgba(201,175,124,0) 68%),
    linear-gradient(180deg, var(--card) 0%, #F7F6F3 52%, var(--sand) 100%);
}
.concept > .wrap{ position:relative; z-index:1; }
.concept__ring{
  position:absolute; right:-8%; top:-15%; width:min(48vw,470px); height:min(48vw,470px);
  opacity:.085; pointer-events:none;
}

/* ---- as fotografias -------------------------------------------------------
   Estavam atiradas para os dois lados e para cima, com moldura branca de
   polaroid, inclinações até 14 graus e um baloiço largo. Sete delas assim, à
   volta de texto centrado, davam confete — e era a coisa menos moderna da
   página.
   Continuam espalhadas, como o Salvador pediu, mas agora todas do MESMO lado:
   o texto ocupa a metade esquerda e elas fazem o contrapeso à direita. A
   moldura branca saiu (a fotografia basta-se), a inclinação desceu para menos
   de cinco graus, e o baloiço é agora um respirar — poucos pixels, muito
   devagar. Espalhado deixou de ser desarrumado. */
/* O TOPO TEM UMA FOLGA, E É POR CAUSA DO BALANÇO.
   O `snapDrift` sobe até 22px, e esse valor é em PIXELS. As posições das
   fotografias são em PERCENTAGEM da secção. Quem estivesse a 2% ou 3% do topo
   subia acima da borda e era cortada pelo `overflow:hidden` da secção — via-se
   a fotografia decapitada, e só em parte do ciclo, o que a fazia parecer um erro
   intermitente.
   A folga de 34px aqui resolve à raiz: empurra TODAS as fotografias para baixo e
   garante espaço para o balanço, independentemente da altura que a secção tenha
   neste ecrã. É preferível a acertar percentagem a percentagem — essas mudam de
   pixels conforme o ecrã, e o balanço não. */
.snaps{ position:absolute; inset:34px 0 0; pointer-events:none; z-index:0; }
/* Todas as molduras têm a MESMA forma e quase a mesma medida (a largura varia
   uns pontos percentuais, só para não parecerem uma grelha). Antes seguiam o
   formato de cada fotografia, e umas ficavam ao alto, outras ao baixo, com o
   dobro do tamanho umas das outras: parecia um monte de recortes em vez de
   uma parede de provas. O corte é feito pelo object-fit, não pelo ficheiro. */
.snap{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); margin:0;
  aspect-ratio:4/5; border-radius:var(--r-media); overflow:hidden;
  box-shadow:0 16px 34px -22px rgba(18,18,16,.55);
  animation:snapDrift var(--t) ease-in-out var(--d) infinite;
}
/* Estas fotografias são do estúdio, e o estúdio é quase todo preto. A
   dessaturação forte que servia às fotografias antigas, coloridas e genéricas,
   transformava estas em manchas escuras. Menos filtro e um pouco mais de luz. */
.snap img{ display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.05) brightness(1.06); }

/* Quatro paragens em vez de duas, e um percurso nos dois eixos: cada
   fotografia descreve uma volta em vez de subir e descer no sítio. Com
   durações e atrasos todos diferentes, nunca há duas a fazer o mesmo ao
   mesmo tempo, e a parede está sempre a mexer sem nunca dar nas vistas. */
@keyframes snapDrift{
  0%,100%{ transform:translate3d(0,0,0)      rotate(var(--r)); }
  25%    { transform:translate3d(7px,-15px,0) rotate(calc(var(--r) + 1.8deg)); }
  50%    { transform:translate3d(-3px,-22px,0) rotate(calc(var(--r) - 1.4deg)); }
  75%    { transform:translate3d(-9px,-9px,0)  rotate(calc(var(--r) + .9deg)); }
}
/* Abaixo dos 1100px o texto encosta às margens e não sobra vão para elas. */
@media (max-width:1100px){ .snaps{ display:none; } }
/* Entre os 1100 e os 1340 ainda há vão à direita, mas é curto: o texto tem de
   se encolher para não ir bater nas fotografias. Acima disso volta à medida
   confortável de leitura. */
@media (max-width:1340px){
  .concept__statement{ max-width:28ch; }
  .concept__facets{ max-width:44ch; gap:clamp(1.2rem,2.5vw,2rem); }
}

/* Seis paragens em vez de quatro, e um percurso três vezes mais largo: a
   garrafa deriva de verdade em vez de oscilar no sítio. */

.concept__head{ margin:0 0 clamp(2.2rem,4vw,3.4rem); }
.concept .sec-title{ margin:0; }

/* A frase deixou de competir com o título. Eram duas coisas grandes na mesma
   secção, e nenhuma ganhava; agora o título é o título e a frase é a frase. */
.concept__statement{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.72rem); line-height:1.35; letter-spacing:-.028em;
  color:var(--ink); max-width:34ch;
  margin:0 0 clamp(2.8rem,5vw,4.2rem);
}
.concept__statement span{ display:block; }
.concept__statement em{
  font-style:normal;
  background:var(--gold-soft); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not (background-clip:text){ .concept__statement em{ color:var(--bronze-ink); } }

/* as duas metades da ideia — cada uma abre com o seu filete, e mais nada */
.concept__facets{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,4vw,3.4rem);
  max-width:58ch;
}
.facet{ padding-top:1.1rem; border-top:1px solid var(--line-d); }
.facet__title{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; margin:0 0 .55rem; }
.facet p{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.6; }

/* ============ 7. PACKS ============ */
.packs{ padding-block:var(--sec-y-sm); }
/* mesma largura que todas as outras secções: a margem esquerda saltava
   70px para dentro e para fora ao passar por aqui */
.packs .wrap{ max-width:var(--wrap); }

/* O ALTERNADOR — mensalidades ↔ packs de treino
   Uma pílula de ouro que desliza por baixo dos rótulos. É o mesmo gesto dos
   botões da marca, mas horizontal: a escolha move-se, não pisca. */
.switch{
  position:relative; display:flex; width:max-content;
  margin:0 0 clamp(1.6rem,3vw,2.4rem); padding:.3rem;
  background:var(--card); border:1px solid var(--line-d); border-radius:var(--r-pill);
}
.switch__pill{
  position:absolute; top:.3rem; bottom:.3rem; left:.3rem;
  width:var(--pill-w,0); border-radius:var(--r-pill); background:var(--espresso);
  transform:translateX(var(--pill-x,0));
  transition:transform .55s var(--ease-out), width .55s var(--ease-out);
}
.switch__btn{
  position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  padding:.82rem 1.7rem; border-radius:var(--r-pill); white-space:nowrap;
  font-family:var(--body); font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-mute); transition:color .4s var(--ease);
}
.switch__btn.is-on{ color:var(--cream); }
.switch__btn:hover:not(.is-on){ color:var(--ink); }

.panel[hidden]{ display:none; }
.panel:not([hidden]){ animation:panelIn .5s var(--ease-out) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* O SELECTOR — quantas vezes por semana, ou quantos treinos.
   É o segundo nível de escolha, por isso é mais calado que o alternador de
   cima: sem caixa, só um filete de ouro que desliza por baixo do activo. É
   o mesmo filete que assina os títulos de secção. */
.seg{ margin:0 0 clamp(2rem,3.6vw,2.8rem); }
.seg__label{
  margin:0 0 .9rem; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-ink);
}
.seg__row{
  position:relative; display:inline-flex; gap:clamp(.2rem,1vw,.6rem);
  padding-bottom:.7rem;
}
.seg__ink{
  position:absolute; left:0; bottom:0; height:2px; border-radius:2px;
  width:var(--ink-w,0); transform:translateX(var(--ink-x,0));
  background:var(--espresso);
  transition:transform .5s var(--ease-out), width .5s var(--ease-out);
}
.seg__btn{
  /* min-height 44px: é a área de toque mínima recomendada, e só o padding
     não lá chegava com a entrelinha herdada */
  display:inline-flex; align-items:center; min-height:44px;
  border:0; background:transparent; cursor:pointer; padding:.3rem 1.1rem;
  font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.35rem);
  letter-spacing:-.02em; color:var(--ink-mute);
  transition:color .35s var(--ease);
}
.seg__btn.is-on{ color:var(--ink); }
.seg__btn:hover:not(.is-on){ color:var(--bronze-ink); }
.seg__btn:focus-visible{ border-radius:4px; }

.pack-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:clamp(1.1rem,2.4vw,2.4rem); row-gap:0;
  grid-template-rows:auto auto auto 1fr auto;
}
.pack{ grid-row:1 / span 5; display:grid; grid-template-rows:subgrid; row-gap:0; }
.pack:nth-child(1){ grid-column:1; }
.pack:nth-child(2){ grid-column:2; }
.pack:nth-child(3){ grid-column:3; }
/* os packs de treino não têm Trio: duas colunas, com a mesma largura de
   cartão que as três têm — a fotografia não muda de tamanho ao alternar */
.pack-grid--duo{ grid-template-columns:repeat(2,1fr); max-width:868px; margin-inline:auto; }

.pack{ transition:transform .5s var(--ease); }
.pack:hover{ transform:translateY(-7px); }
  /* 4:5 — A PROPORÇÃO NATIVA DAS TRÊS FOTOGRAFIAS.
     As três são ao alto e estão gravadas em 4:5 (700x875, 1000x1250, 1400x1750),
     por isso o `cover` não corta nada: as duas proporções são a mesma e a
     fotografia aparece inteira, à sua dimensão, a preencher o contentor.
     É também a proporção do retrato do Martim — uma só forma em todo o site.
     Nas fotografias do Duo e do Trio, que vinham em 2:3, a altura a mais foi
     aparada na origem e só por cima, onde está o tecto e não está ninguém. */
.pack__media{
  margin:0 0 1.5rem; position:relative; overflow:hidden; border-radius:14px;
  aspect-ratio:4/5; background:var(--card);
  box-shadow:0 14px 30px -26px rgba(18,18,16,.5);
  transition:box-shadow .5s var(--ease);
}
.pack:hover .pack__media{ box-shadow:0 26px 48px -28px rgba(18,18,16,.62); }
.pack__media img{
  width:100%; height:100%; object-fit:cover;
  /* uma gradação comum põe três fotografias de origens diferentes na mesma paleta */
  filter:saturate(.66) contrast(1.06) brightness(.96);
  transition:transform 1.1s var(--ease-out), filter .7s var(--ease);
}
/* AS TRÊS NA MESMA LUZ.
   As fotografias vêm de sítios diferentes e chegam com exposições diferentes:
   medida em cinzentos, a do Individual dá 87/255, a do Duo 107 (tenda branca,
   luz de dia) e a do Trio 79. Lado a lado isso lê-se como três fotografias de
   três sítios, não como um estúdio.
   O Individual é a referência — é a que não se pode refazer. As outras duas são
   puxadas para perto dele: o Duo desce, o Trio sobe. Depois da gradação ficam
   em 83 / 88 / 80, que é uma família.
   No Trio a saturação desce um pouco mais do que nos outros: o relvado
   sintético entra verde-fluorescente e era a única cor que saltava da paleta.
   As mesmas regras servem os serviços (página inicial) e os packs (preçário),
   porque a ordem dos cartões é a mesma nas duas: Individual, Duo, Trio. */
.serv:nth-child(2) .serv__media img,
.pack:nth-child(2) .pack__media img{ filter:saturate(.6) contrast(1.06) brightness(.83); }
.serv:nth-child(3) .serv__media img,
.pack:nth-child(3) .pack__media img{ filter:saturate(.62) contrast(1.05) brightness(1.03); }
.serv:nth-child(2):hover .serv__media img,
.pack:nth-child(2):hover .pack__media img{ filter:saturate(.9) contrast(1.03) brightness(.88); }
.serv:nth-child(3):hover .serv__media img,
.pack:nth-child(3):hover .pack__media img{ filter:saturate(.92) contrast(1.03) brightness(1.07); }
.pack:hover .pack__media img{ transform:scale(1.045); filter:saturate(.95) contrast(1.03) brightness(1); }

.pack__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; flex-wrap:wrap; margin:0 0 .8rem;
}
.pack__title{ font-size:var(--fs-h3); letter-spacing:-.035em; margin:0; }
/* A DURAÇÃO É SEMPRE A MESMA PEÇA, EM DOIS ESTADOS
   O Individual existe em 50 e em 30 minutos; o Duo e o Trio só em 50. Isso dava
   dois desenhos diferentes na mesma fila: no Individual uma pílula branca com
   um segmento escuro lá dentro (alta, com moldura), e nos outros uma etiqueta
   dourada chapada (baixa, sem moldura). Cores diferentes e alturas diferentes,
   logo a linha do "50 MIN" do primeiro cartão nunca caía onde caía a dos outros.
   Agora a opção ACTIVA é exactamente a etiqueta dourada, e a inactiva fica ao
   lado, calada. Uma peça, uma cor, uma altura — e os três cartões alinham. */
.pack__dur,
.dur__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; padding:.44rem .9rem; border-radius:var(--r-pill);
  border:0; background:transparent; white-space:nowrap;
  font-family:var(--body); font-size:.66rem; font-weight:700; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.pack__dur,
.dur__btn.is-on{ background:var(--gold); color:#121210; }
.dur{ display:flex; gap:.2rem; padding:0; background:none; border:0; }
.dur__btn{ cursor:pointer;
  transition:background-color .4s var(--ease), color .4s var(--ease); }
.dur__btn:hover:not(.is-on){ color:var(--ink); }

/* A linha de dados diz tudo o que o cartão precisa de dizer a mais: quanta
   gente e a que título. O anel com pontos é o próprio contador de pessoas. */
.pack__meta{ display:flex; align-items:center; gap:.55rem; margin:0 0 1.2rem;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-ink); }
.pack__mark{ width:22px; height:22px; flex:none; color:var(--bronze-ink); }

/* O PREÇO
   Um número de cada vez. O selector escolhe o escalão, o cartão mostra um
   preço — e nos grupos esse número já é a parte de cada pessoa, para os três
   cartões se compararem de relance (320 · 200 · 160) em vez de obrigarem a
   dividir de cabeça. O total do grupo continua escrito, em miúdo. */
.pack__precos{ margin:0 0 1.6rem; }
.preco[hidden]{ display:none; }
.preco{ padding-top:1.2rem; border-top:1px solid var(--line-d); }
.preco__num{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:0 0 .55rem; }
.preco__val{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.1rem); line-height:.95; letter-spacing:-.045em;
  color:var(--ink);
}
.preco__lab{
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze-ink);
}
.preco__meta{ margin:0 0 .3rem; font-size:.88rem; color:var(--ink-2); }
.preco__unit{ margin:0; font-size:.8rem; color:var(--ink-mute); }

.pack__cta{ width:100%; }

/* AS CONDIÇÕES
   A faixa escura fecha a secção como o rodapé fecha a folha de preços:
   é a letra pequena, e é o único sítio da secção onde ela aparece. */
/* AS CONDIÇÕES
   A letra pequena do preçário. Esteve num painel preto e parecia colada por
   cima da página — uma caixa de outro sítio. Agora é a mesma areia de toda a
   secção, separada só por um filete: continua a ler-se como nota de rodapé,
   mas pertence à página. */
.cond{
  margin-top:clamp(2.4rem,4.5vw,3.6rem);
  padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--line-d);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,3.4rem);
}
.cond__title{
  margin:0 0 .55rem; font-family:var(--body);
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-ink);
}
.cond__col p{ margin:0; font-size:.9rem; line-height:1.66; color:var(--ink-2); }
.cond__col p + .cond__title{ margin-top:1.4rem; }
.cond__foot{
  grid-column:1 / -1; margin:0; padding-top:1.2rem; border-top:1px solid var(--line-d);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.5rem;
  font-size:.74rem; letter-spacing:.03em; color:var(--ink-mute);
}


/* ============ 7c. OS SERVIÇOS ============
   Os três cartões que antes traziam preço. Sem número, o cartão é mais curto e
   a decisão passa a ser "qual destes sou eu" — o preço está a um clique. */
.servicos{ padding-block:var(--sec-y-sm); }

/* A página do preçário abre logo com esta secção — sem hero por baixo da
   navegação fixa, o título ficava tapado por ela. */
.packs--pagina{ padding-top:calc(var(--sec-y-sm) + 5.5rem); }
@media (max-width:760px){ .packs--pagina{ padding-top:calc(var(--sec-y-sm) + 6rem); } }
.serv-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:clamp(1.1rem,2.4vw,2.4rem); row-gap:0;
  grid-template-rows:auto auto auto auto;
}
.serv{ grid-row:1 / span 4; display:grid; grid-template-rows:subgrid; row-gap:0;
  transition:transform .5s var(--ease); }
.serv:nth-child(1){ grid-column:1; } .serv:nth-child(2){ grid-column:2; } .serv:nth-child(3){ grid-column:3; }
.serv:hover{ transform:translateY(-7px); }
/* mesma proporção nativa (4:5) que os packs — ver a nota em .pack__media */
.serv__media{ margin:0 0 1.4rem; overflow:hidden; border-radius:14px;
  aspect-ratio:4/5; background:var(--card);
  box-shadow:0 14px 30px -26px rgba(18,18,16,.5); transition:box-shadow .5s var(--ease); }
.serv:hover .serv__media{ box-shadow:0 26px 48px -28px rgba(18,18,16,.62); }

.serv__media img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.66) contrast(1.06) brightness(.96);
  transition:transform 1.1s var(--ease-out), filter .7s var(--ease); }
.serv:hover .serv__media img{ transform:scale(1.045); filter:saturate(.95) contrast(1.03) brightness(1); }
.serv__title{ font-size:var(--fs-h3); letter-spacing:-.035em; margin:0 0 .6rem; }
.serv__meta{ display:flex; align-items:center; gap:.55rem; margin:0 0 1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-ink); }
.serv__mark{ width:22px; height:22px; flex:none; color:var(--bronze-ink); }
.serv__text{ margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.62; }

.servicos__cta{ display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:clamp(2.4rem,4.5vw,3.6rem); }

@supports not (grid-template-rows:subgrid){
  .serv-grid{ grid-template-rows:none; }
  .serv{ grid-row:auto; display:flex; flex-direction:column; }
  .serv__text{ flex:1; }
}
/* ---- botão de contorno sobre fundo claro ---- */
.btn--outline-dark{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-d); }
.btn--outline-dark:hover{ background:var(--espresso); color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--espresso); }

/* ---- fecho da página do preçário ---- */
.voltar{ padding-block:var(--sec-y-sm); background:var(--card); }
.voltar__t{ font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.8rem);
  letter-spacing:-.03em; color:var(--ink); margin:0 0 1.6rem; }
.voltar__acts{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* ============ 8. O TREINADOR ============ */
/* Passou a claro, como o resto da página. Fica na mesma família da areia mas
   um grau acima (--card no topo), para o bloco se distinguir do Conceito e
   dos Packs sem partir o ritmo com um salto de escuro. */
.coach{ position:relative; padding-block:var(--sec-y); overflow:hidden;
  background:linear-gradient(180deg, var(--card) 0%, #F7F6F3 60%, var(--sand) 100%); }
.coach__watermark{ position:absolute; right:-16%; top:50%; width:min(56vw,560px); height:min(56vw,560px);
  transform:translateY(-50%) rotate(var(--cut)); opacity:.09; pointer-events:none; }
  /* o corte do anel tem uma posição certa — deixou de rodar 360°, trava na lei */
/* A fotografia manda na altura: fica no seu 4:5 original e é o TEXTO que
   encolhe para caber ao lado dela. O corpo mais miúdo é de propósito — uma
   biografia longa lida em coluna estreita pede linha curta, não linha grande. */
.coach__grid{ position:relative; display:grid; grid-template-columns:1fr 1.04fr;
  gap:clamp(2.4rem,6vw,6rem); align-items:center; }

.coach__media{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-media);
  box-shadow:0 26px 54px -32px rgba(18,18,16,.55); }
.coach__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-media);
  filter:contrast(1.06) saturate(.74) brightness(1.02);
  transform:scale(1.12); will-change:transform; }
/* a fotografia é escura: mantém-se um véu leve só no rodapé, para a etiqueta
   assentar, mas sem o escurecimento pesado que fazia sentido no fundo preto */
.coach__media::before{ content:''; position:absolute; inset:0; border-radius:var(--r-media); pointer-events:none; z-index:1;
  border:1px solid rgba(201,175,124,.22);
  background:linear-gradient(0deg, rgba(14,14,12,.55), rgba(14,14,12,0) 34%); }
.coach__media figcaption{ position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream);
  background:rgba(14,14,12,.52); border:1px solid rgba(246,245,242,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:.5rem .95rem; border-radius:var(--r-pill); }

/* a etiqueta é a única coisa em caixa alta da coluna — nomeia a oferta */
.coach__kicker{
  font-family:var(--body); font-size:.64rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bronze-ink); margin:0 0 .8rem;
}
/* a pergunta é o peso da secção: escala de título de página, não de secção */
.coach__title{ font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.05; letter-spacing:-.035em;
  color:var(--ink); margin:0 0 1rem; text-wrap:balance; }
/* em fundo claro o dourado forte queima: o <em> usa o gradiente suave */
.coach__title em{ font-style:normal;
  background:var(--gold-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
@supports not (background-clip:text){ .coach__title em{ color:var(--bronze-ink); } }
.coach__p{ color:var(--ink-2); max-width:50ch; font-size:.9rem; line-height:1.62; margin:0 0 .7rem; }
/* a última frase da biografia é a assinatura: fica em corpo maior e escura */
.coach__p--fecho{ margin-bottom:0; color:var(--ink-2); font-style:italic; }

/* A TESE — a frase que amarra a marca.
   Sai do corpo do texto porque não é mais um parágrafo: é a promessa. Vai em
   Questrial, que nesta página é a voz da marca (o corpo é Manrope), um grau
   acima e em tinta escura, para se ler como afirmação. */
.coach__p--tese{
  font-family:var(--display); font-size:1.06rem; line-height:1.4;
  letter-spacing:-.02em; color:var(--ink); max-width:46ch;
  margin:1.05rem 0 1.15rem;
}
.coach__p--tese em{ font-style:normal;
  background:var(--gold-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
@supports not (background-clip:text){ .coach__p--tese em{ color:var(--bronze-ink); } }

/* o CTA fecha a coluna e é o mais visível da secção */
.coach__cta{ margin-top:1.2rem; }
.coach__cta .btn{ box-shadow:0 22px 46px -22px rgba(138,90,40,.55); }
.coach__note{ margin:.8rem 0 0; font-size:.74rem; color:var(--ink-mute); }

/* A PROVA
   O único número da página, por isso pode ser grande. Assenta num filete,
   como o preço nos packs — mesma gramática para "aqui está um dado". */
.prova{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line-d); }
.prova__num{
  display:flex; align-items:baseline; margin:0 0 .35rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1; letter-spacing:-.045em;
  background:var(--gold-soft); -webkit-background-clip:text; background-clip:text; color:transparent;
  /* largura fixa por dígito: sem isto o texto ao lado dança enquanto conta */
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
@supports not (background-clip:text){ .prova__num{ color:var(--bronze-ink); } }
.prova__mais{ font-size:.62em; margin-right:.06em; }
.prova__texto{ margin:0; max-width:34ch;
  font-size:.86rem; line-height:1.5; color:var(--ink-2); }

/* ============ 8b. O ESTÚDIO ============
   Duas fotografias e duas legendas. A secção vive do espaço que lhe sobra,
   por isso não leva molduras, nem sombras, nem cartões: só a imagem, um
   rótulo e uma linha. É o --card por baixo que a separa da areia à volta. */
.extras{ padding-block:var(--sec-y-sm); background:var(--card); }
.extras__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3.4vw,2.4rem);
  /* Estreita de propósito — é uma secção pequena, não uma galeria — mas
     encostada à esquerda, na margem de toda a página. Centrada, ficava a
     única coisa fora do eixo. */
  max-width:1120px;
}
.extra{ margin:0; }
.extra img{
  /* height:auto é obrigatório: o atributo height="1200" do HTML entra como
     altura fixa e, havendo altura definida, o aspect-ratio é ignorado. Sem
     isto a fotografia esticava para 1200px e a secção ia aos 1633px. */
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-media);
  /* a mesma gradação das outras fotografias, para não destoarem da paleta */
  filter:saturate(.72) contrast(1.04) brightness(1.01);
}
.extra figcaption{ margin-top:1.1rem; }
.extra strong{
  display:block; margin-bottom:.35rem;
  font-family:var(--body); font-size:.7rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bronze-ink);
}
.extra span{ display:block; max-width:34ch;
  font-size:.95rem; line-height:1.62; color:var(--ink-2); }

@media (max-width:820px){
  .extras__grid{ grid-template-columns:repeat(3,1fr); }
}

/* ============ 9. TESTEMUNHOS ============ */
.reviews{ padding-block:var(--sec-y-sm); background:var(--sand); overflow:hidden; }

/* O CARROSSEL — fita infinita, da direita para a esquerda.
   São TRÊS grupos IDÊNTICOS e a animação corre até -33.3333%, ou seja,
   exactamente um grupo. Ao chegar lá, o segundo grupo está no pixel onde o
   primeiro começou, e o salto de volta a zero é invisível. Nunca corta, nunca
   acaba. Os três grupos têm de ter sempre os mesmos cartões, pela mesma ordem. */
.rail{ position:relative; }
/* O esbatido das pontas é feito com dois véus por cima, e NÃO com mask-image.
   No Safari, uma máscara sobre um filho transformado e muito largo obriga o
   compositor a criar uma camada do tamanho da fita inteira — e quando essa
   camada passa dos limites, o Safari corta-a. Era isso que fazia os
   testemunhos parecerem acabar a meio. Dois gradientes resolvem o mesmo sem
   tocar na composição. */
.rail::before,.rail::after{
  content:''; position:absolute; top:0; bottom:0; width:5%; z-index:2;
  pointer-events:none;
}
.rail::before{ left:0;  background:linear-gradient(90deg, var(--sand), rgba(243,242,239,0)); }
.rail::after { right:0; background:linear-gradient(270deg, var(--sand), rgba(243,242,239,0)); }
.rail__track{
  display:flex; width:max-content;
  /* Com JavaScript, quem move a fita é o main.js (§10), com a posição dada
     pelo RESTO de uma divisão — um ciclo que não tem fim para onde chegar.
     Esta animação fica como recurso para quem tenha o JS desligado: o HTML traz
     TRÊS grupos idênticos, por isso -33.3333% é exactamente um grupo.
     Três é o ponto certo: chegam para não abrir vazio em nenhum monitor, e a
     fita fica em ~8.500px — larga o bastante para o ciclo, curta o bastante
     para o Safari não truncar a camada composta. */
  animation:railCorre 95s linear infinite;
  /* sem will-change: numa fita desta largura, promover a camada é justamente
     o que faz o Safari tropeçar. O translate3d já basta para acelerar. */
}
.rail__grupo{ display:flex; align-items:stretch; gap:1.1rem; padding-right:1.1rem; }
/* Com JavaScript, os grupos são desfeitos e os cartões passam a estar
   directamente na fita (ver main.js §10). O espaçamento, que vivia no grupo,
   passa a viver aqui — e a animação de recurso sai de cena, porque a partir
   daí quem move a fita é o JS, cartão a cartão. */
.rail__track--js{ gap:1.1rem; animation:none; }
@keyframes railCorre{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-33.3333%,0,0); }
}
/* Não pára com o rato: a fita ocupa o ecrã todo e o cursor está quase sempre
   pousado lá dentro — a pausa fazia-a parecer congelada. Pára só com o teclado,
   porque aí o foco entra num cartão de propósito e a fita não lhe pode fugir. */
.rail:focus-within .rail__track{ animation-play-state:paused; }

/* CARTÕES TODOS IGUAIS
   Antes havia três larguras (até 820px) para acomodar textos de 50 a 600
   caracteres. O resultado era caberem um a dois cartões no ecrã: a fita passava
   metade do tempo com um cartão a meio de entrar e outro a meio de sair, e
   lia-se como estando avariada. Agora são todos da mesma medida e cabem quatro
   a cinco — há sempre cartões inteiros à vista, em qualquer instante. */
/* O cartão perdeu o contorno. Numa fita com cinco cartões à vista, cinco
   rectângulos desenhados eram cinco linhas a competir com o texto; a mudança
   de fundo já chega para dizer onde acaba um e começa o outro. */
.card{
  flex:0 0 clamp(248px, 21vw, 300px);
  margin:0; padding:1.8rem 1.7rem 1.4rem;
  background:var(--card); border-radius:var(--r-card);
  display:flex; flex-direction:column; gap:1rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -30px rgba(18,18,16,.5); }

/* O texto é cortado aos 9 versos para nenhum cartão crescer sozinho e puxar a
   altura de toda a fita. É um corte SÓ VISUAL: o testemunho continua inteiro no
   HTML, para leitores de ecrã e para os motores de busca. */
.card blockquote{
  margin:0; flex:1;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:9;
  overflow:hidden;
  font-family:var(--display); font-size:.98rem; line-height:1.5;
  letter-spacing:-.015em; color:var(--ink);
}
.card blockquote em{ font-style:normal;
  background:var(--gold-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
@supports not (background-clip:text){ .card blockquote em{ color:var(--bronze-ink); } }
.card figcaption{ display:flex; align-items:center; gap:.7rem;
  padding-top:.9rem; border-top:1px solid var(--line-d); }

/* as iniciais fazem de retrato: não há fotografias dos clientes, e pedir-lhas
   seria pedir-lhes uma segunda coisa depois de já terem escrito isto */
.avatar{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  /* As iniciais eram nove círculos dourados a passar na fita ao mesmo tempo.
     Ouro a mais deixa de ser ouro. Ficaram em pedra, que é o que devem ser:
     um retrato, não um destaque. */
  background:var(--sand-2); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-d);
  font-size:.66rem; font-weight:700; letter-spacing:.04em;
}
.who{ display:flex; flex-direction:column; line-height:1.3; }
.who strong{ font-size:.88rem; font-weight:600; color:var(--ink); }
.who em{ font-style:normal; font-size:.76rem; color:var(--ink-mute); }

/* ============ 10. CONTACTO ============ */
.contact{ position:relative; overflow:hidden;
  padding-block:var(--sec-y); background:var(--sand-2); border-block:1px solid var(--line-d); }

.contact__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.2rem,2.5vw,2rem); }
/* Morada, telefone, email e horário eram quatro cartões empilhados, cada um
   com o seu contorno e a sua sombra — quatro caixas para dizer quatro linhas.
   Agora é uma lista: um filete entre cada entrada e mais nada. Menos desenho,
   e lê-se de uma vez. */
.contact__info{ display:grid; align-content:start;
  border-top:1px solid var(--line-d); }

.info-block{ display:block; padding:1.25rem .2rem 1.35rem;
  border-bottom:1px solid var(--line-d);
  transition:padding-left .45s var(--ease); }
a.info-block:hover{ padding-left:.7rem; }
.info-block__label{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze-ink); margin-bottom:.5rem; }
.info-block__value{ display:block; font-size:1.05rem; color:var(--ink); line-height:1.5; }
.info-block__cta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.65rem;
  font-size:.76rem; font-weight:600; color:var(--bronze-ink); transition:gap .35s var(--ease); }
.info-block__cta i::after{ content:'↗'; }
a.info-block:hover .info-block__cta{ gap:.75rem; }

.contact__map{ position:relative; border-radius:var(--r-card); overflow:hidden;
  min-height:400px; }
.contact__map iframe{ width:100%; height:100%; min-height:400px; border:0;
  filter:grayscale(.9) sepia(.35) contrast(.95) brightness(1.02); transition:filter .6s var(--ease); }
.contact__map:hover iframe{ filter:grayscale(.35) sepia(.12) contrast(1) brightness(1); }
.contact__map-link{ position:absolute; right:1rem; bottom:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem; background:var(--espresso); color:var(--cream);
  font-size:.76rem; font-weight:600; padding:.7rem 1.2rem; border-radius:var(--r-pill);
  transition:gap .35s var(--ease); }
.contact__map-link i::after{ content:'↗'; }
.contact__map-link:hover{ gap:.8rem; }

/* ============ 10b. INSTAGRAM ============ */
/* Banda CLARA de propósito: as secções escuras são onde o logótipo vive, e uma
   quarta âncora escura sem logótipo diluía essa regra.

   CADA CARTÃO É UM POST: cabeçalho com a foto e o nome do Martim por cima,
   e o vídeo em 9:16 por baixo — a leitura do Instagram, mas na tipografia e
   nas cores da casa, sem o botão azul nem a barra de gostos.

   TODOS OS CARTÕES TÊM O MESMO TAMANHO. O poster está sempre lá por baixo,
   por isso nunca há um rectângulo preto: se houver mp4 ou embed, entram por
   cima; se não houver, fica a fotografia.

   A LARGURA JÁ NÃO É UM NÚMERO MÁGICO. Era 281,25px porque essa era a medida
   exacta a que o iframe do Instagram mostrava o reel sem barras pretas. Sem
   iframe, essa amarra desapareceu: são três colunas iguais que enchem a
   página, e a moldura fica com o tamanho que a página lhe der. */
.reels{ padding-block:var(--sec-y-lg); background:var(--espresso); overflow:hidden; }
.reels .sec-head{ margin-bottom:clamp(2.4rem,4.5vw,3.6rem); }

.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2.2vw,1.9rem);
  /* a largura toda dava molduras de 664px de alto — mais do que a área útil
     do ecrã. Travadas aqui, ficam grandes sem tomarem conta da página. */
  max-width:1020px; }
.ig-card{ margin:0; min-width:0; }

/* A BANDA DO INSTAGRAM É ESCURA.
   Era clara, e três molduras 9:16 sobre cal liam-se a três rectângulos
   acinzentados. Sobre o basalto das paredes do estúdio, os reels acendem-se —
   é a mesma leitura que têm na própria aplicação. É a única banda escura da
   página fora da abertura e do rodapé, e ganhou-a por ser a única cujo
   conteúdo é, ele próprio, escuro. */
.reels .ig-user__handle{ color:var(--cream); }
.reels .ig-user__handle:hover{ color:var(--bronze-hi); }
.reels .ig-user__sub{ color:var(--sand-soft); }
.reels .ig-user__avatar{ border-color:var(--espresso); }
.reels .ig-card__frame{ border-color:rgba(243,242,239,.14); }
.reels .ig-card:hover .ig-card__frame{ border-color:var(--bronze); }

/* ---- cabeçalho do post: foto de perfil + nome ---- */
.ig-user{ display:flex; align-items:center; gap:.6rem; padding:0 .1rem .7rem; }
.ig-user__ring{
  flex:none; width:38px; height:38px; border-radius:50%; padding:2px;
  background:var(--gold); display:block;
}
.ig-user__avatar{ width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2px solid var(--sand-2); display:block; }
.ig-user__meta{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ig-user__handle{
  font-family:var(--body); font-size:.82rem; font-weight:600; color:var(--ink);
  transition:color .3s var(--ease);
}
.ig-user__handle:hover{ color:var(--bronze-ink); }
.ig-user__sub{ font-size:.7rem; color:var(--ink-mute); }

/* ---- a janela do vídeo ---- */
.ig-card__frame{
  position:relative; display:block; width:100%; aspect-ratio:9/16; overflow:hidden;
  background:var(--espresso);
  border:1px solid var(--line-d); border-radius:var(--r-card);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ig-card:hover .ig-card__frame,
.ig-card__frame:focus-visible{
  transform:translateY(-6px); border-color:var(--bronze);
  box-shadow:0 18px 40px -24px rgba(18,18,16,.55);
}

/* o poster está sempre lá, por baixo de tudo: nunca há preto */
.ig-card__poster{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  /* leve, e só isso: a capa tem de continuar a ser a do reel. O escurecer
     mínimo existe para o botão de play não se perder em cima de fundo claro. */
  filter:saturate(.94) brightness(.96);
  transition:filter .45s var(--ease);
}

/* o vídeo entra por cima da capa, à medida exacta da moldura.
   Isto era antes uma caixa de 281,25 x 500 px reduzida com transform, para
   recortar o iframe do Instagram às barras pretas que ele trazia. O iframe
   desapareceu (o embed passou a exigir login), e com ele a necessidade da
   escala: agora é só um rectângulo que enche a moldura. */
.ig-card__crop{ position:absolute; inset:0; z-index:1; display:block; overflow:hidden; }
.ig-card__crop:empty{ display:none; }
.ig-card__crop video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--espresso); }

/* seta de leitura sobre o poster — desaparece quando entra vídeo a sério */
.ig-card__play{
  position:absolute; left:50%; top:50%; z-index:2;
  width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
  background:rgba(14,14,12,.42); border:1px solid rgba(246,245,242,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.ig-card__play::after{
  content:''; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%);
  border-left:15px solid var(--cream);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.ig-card:hover .ig-card__play{ transform:scale(1.08); background:rgba(14,14,12,.6); }
/* A seta some enquanto o vídeo anda e volta assim que se pára. É o único
   sinal de que aquilo está em pausa, e é o mesmo gesto para os dois lados:
   clicar arranca, clicar pára. */
.ig-card[data-a-tocar] .ig-card__play{ opacity:0; transform:scale(.9); pointer-events:none; }
.ig-card__play{ transition:transform .4s var(--ease), background .4s var(--ease), opacity .3s var(--ease); }
.ig-card__frame{ cursor:pointer; }

/* a barra de tempo: fininha, encostada ao fundo da moldura, e serve para
   saltar para outro ponto do vídeo */
.ig-card__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:3; height:14px;
  display:flex; align-items:flex-end; cursor:pointer;
}
.ig-card__bar::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(244,242,237,.25);
}
.ig-card__bar i{
  position:relative; display:block; width:100%; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
}

.reels__cta{ display:flex; margin-top:clamp(2.4rem,4.5vw,3.4rem); }

/* O INSTAGRAM É A SECÇÃO CENTRADA — e é a única.
   A grelha está travada em 1020px (senão as molduras 9:16 passariam dos 660px
   de altura), e dentro de um conteúdo de 1168px isso deixava 148px de vazio só
   do lado direito: lia-se como desalinhamento, não como intenção.
   Centrar apenas as molduras, debaixo de um título encostado à esquerda, era
   pior — duas margens diferentes na mesma secção. Por isso centra-se o bloco
   todo: etiqueta, título, molduras e botão. Fica uma excepção deliberada ao
   eixo esquerdo da página, e é assim que se lê como escolha.
   No telemóvel nada disto se aplica: lá a grelha ocupa a largura toda, não há
   vazio para corrigir, e os títulos têm de continuar alinhados com os das
   outras secções. */
@media (min-width:761px){
  .reels .sec-head{ text-align:center; }
  .ig-grid{ margin-inline:auto; }
  .reels__cta{ justify-content:center; }
}


/* ============ 11. FAQ ============ */
.faq{ padding-block:var(--sec-y-sm); }
/* A lista estava centrada por baixo de um título encostado à esquerda, e
   via-se: duas margens diferentes na mesma secção. Agora começa onde o
   título começa. */
.accordion{ max-width:72ch; border-top:1px solid var(--line-d); }
.faq__cta{ display:flex; margin-top:clamp(1.8rem,3.2vw,2.4rem); }
.acc{ border-bottom:1px solid var(--line-d); }
.acc__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:none; border:0; padding:1.25rem 0; cursor:pointer; text-align:left;
  font-family:var(--display); font-size:clamp(1.02rem,1.2vw,1.14rem); letter-spacing:-.02em;
  color:var(--ink); transition:color .3s var(--ease); }
.acc__q:hover{ color:var(--bronze-ink); }
.acc__q i{ position:relative; width:19px; height:19px; flex:none; border:1px solid var(--line-d);
  border-radius:50%; transition:transform .45s var(--ease-out), border-color .35s; }
.acc__q i::before,.acc__q i::after{ content:''; position:absolute; left:50%; top:50%;
  background:var(--bronze-ink); transform:translate(-50%,-50%); transition:opacity .3s var(--ease); }
.acc__q i::before{ width:9px; height:1px; }
.acc__q i::after{ width:1px; height:9px; }
.acc.open .acc__q i{ transform:rotate(180deg); border-color:var(--bronze); }
.acc.open .acc__q i::after{ opacity:0; }

.acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
.acc.open .acc__a{ grid-template-rows:1fr; }
.acc__a > div{ overflow:hidden; }
.acc__a p{ margin:0; padding:0 2.4rem 1.35rem 0; color:var(--ink-2); font-size:.94rem; line-height:1.65; }

/* ============ 12. RODAPÉ ============ */
/* o topo do rodapé entra no mesmo ritmo das secções */
.footer{ padding:var(--sec-y) 0 2rem; }
.footer__top{ display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap;
  padding-bottom:2.4rem; border-bottom:1px solid var(--line-l); }
.footer__logo{ width:clamp(230px,26vw,320px); height:auto; }
.footer__links{ display:flex; flex-wrap:wrap; gap:1rem 1.8rem; }
.footer__links a{ font-size:.85rem; color:var(--sand-soft); transition:color .3s var(--ease); }
.footer__links a:hover{ color:var(--bronze-hi); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding-top:1.5rem; }
.footer__bottom p{ margin:0; font-size:.76rem; color:#87847C; }

/* ============ A FITA — a assinatura ============ */
/* Aponta a um [data-medida] e a fita métrica estica-se para o medir. O
   alfaiate mede antes de falar de preço; o site faz o mesmo. Nunca escala —
   os traços ficam sempre nítidos porque a largura é escrita, não esticada. */
[data-medida]{ cursor:help; text-decoration:underline dotted var(--line-d) 1px; text-underline-offset:3px; }

.tape{
  position:fixed; left:0; top:0; z-index:135; pointer-events:none;
  height:22px; width:0; background:var(--card); border:1px solid var(--line-d);
  clip-path:inset(0 100% 0 0); transition:clip-path .32s var(--ease-out); will-change:transform;
}
.tape.is-on{ clip-path:inset(0 0 0 0); }
.tape:not(.is-on){ transition-duration:.18s; }
.tape__bar{
  position:absolute; inset:4px 0;
  background:
    repeating-linear-gradient(90deg, var(--line-d) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--bronze) 0 1px, transparent 1px 30px);
  opacity:.75;
}
.tape__cap{ position:absolute; top:2px; width:1px; height:18px; background:var(--bronze); transform:rotate(var(--cut)); }
.tape__cap--a{ left:0; } .tape__cap--b{ right:0; }

.tape__label{
  position:fixed; left:0; top:0; z-index:135; pointer-events:none;
  font-family:var(--display); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronze-ink); white-space:nowrap; opacity:0;
  transition:opacity .2s var(--ease) .1s; will-change:transform;
}
.tape__label.is-on{ opacity:1; }
@media (max-width:1080px), (pointer:coarse){ [data-medida]{ text-decoration:none; cursor:auto; } }

/* ============ REVELAÇÕES ============ */
.js-reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s); }
.js-reveal.in{ opacity:1; transform:none; }

/* ============ 13. RESPONSIVO ============ */
@media (max-width:1080px){
  .nav__links{ gap:1.5rem; }
}
/* NADA COLAPSA PARA UMA COLUNA.
   O que é lado a lado no ecrã grande continua lado a lado no telemóvel — o que
   encolhe é o tamanho, não a estrutura. Só o mapa do contacto é que baixa para
   uma coluna: abaixo de ~300px de largura deixa de mostrar rua nenhuma. */
@media (max-width:900px){
  .coach__grid{ gap:clamp(.9rem,3vw,2rem); }
  .contact__grid{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .contact__map,.contact__map iframe{ min-height:320px; }
}
@media (max-width:760px){
  :root{
    --fs-hero: clamp(1.8rem, 7.6vw, 2.6rem);
    --fs-h2:   clamp(1.75rem, 7vw, 2.4rem);
    --fs-h3:   clamp(1.55rem, 6.4vw, 2rem);
  }
  html{ scroll-padding-top:84px; }
  .nav__links,.nav__cta{ display:none; }
  /* no telemóvel o menu fica à esquerda e o logótipo à direita */
  .nav__inner{ gap:1rem; }
  /* O PT/EN NÃO DESAPARECE NO TELEMÓVEL.
     Os links e o botão da barra escondem-se aqui por falta de espaço, mas a
     escolha da língua é a primeira coisa que um estrangeiro procura — dentro do
     menu ficava a um clique de distância de quem nem sabe que o menu a tem.
     São 44px de altura de área de toque, o mínimo, sem crescer em largura. */
  /* o burger primeiro (order -2), o PT/EN a seguir (-1) e o auto-margin no
     PT/EN: assim o menu fica encostado à esquerda como sempre esteve, e é o
     par das línguas que empurra o logótipo para a direita. Com os dois no
     mesmo order valia a ordem do HTML, e o menu ia parar ao meio da barra. */
  .burger{ display:flex; order:-2; margin-right:0; }
  .lang{ order:-1; margin-right:auto; gap:.34rem; }
  .lang__opt{ min-height:44px; display:flex; align-items:center; font-size:.7rem; }
  .brand{ margin-right:0; }
  .brand__logo{ width:112px; }
  body.scrolled .brand__logo{ width:96px; }
  .hero{ min-height:94svh; }
  /* em retrato a foto é cortada de lado: puxa o enquadramento para as máquinas
     e para os vestiários, em vez de ficar no teto e no espelho */
  .hero__img{ object-position:62% 54%; }
  /* botões à medida do texto, centrados: dois blocos de largura total
     pesavam mais do que o hero inteiro */
  .hero__actions{ gap:.6rem; }
  .hero__actions .btn{ width:auto; }
  /* a etiqueta parte-se em duas linhas em ecrã estreito */
  .hero__copy .eyebrow{ letter-spacing:.16em; line-height:1.5; }
  .hero__rail{ height:44px; }
  .hero__rail-track{ font-size:.7rem; letter-spacing:.3em; gap:1.8rem; padding-left:1.8rem; }
  .footer__top{ flex-direction:column; align-items:flex-start; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.35rem; }
  .acc__a p{ padding-right:0; }
}
/* ---- TELEMÓVEL: tudo alinhado, tudo mais pequeno ------------------------ */
@media (max-width:760px){
  /* ==========================================================================
     TELEMÓVEL
     A regra que o cliente deu foi "tudo na mesma linha, nem que fique mais
     pequeno". Seguiu-se à risca, e chegou-se a letra de 8px: as legendas das
     fotografias, as iniciais dos testemunhos, o nome do Instagram. Oito pixels
     não se lê num telemóvel, lê-se com o telemóvel encostado à cara.
     Aqui a regra passa a ter um chão: NADA de texto abaixo de 10px, e o texto
     corrido nunca abaixo de 13px. As linhas mantêm-se onde a linha faz sentido
     (grelhas de fotografias, os três packs), e desfazem-se nos dois sítios onde
     havia PARÁGRAFOS espremidos em colunas de 100 a 190px: o treinador e os
     serviços. Aí não era uma questão de gosto, era ilegível.
     ========================================================================== */
  /* UMA MEDIDA PARA TUDO
     O telemóvel andava com uma dúzia de tamanhos de letra diferentes (.54, .62,
     .66, .68, .7, .72, .74, .76, .78, .82, .88…) e é isso que faz uma página
     parecer desarrumada, mesmo quando cada peça está bem. Passam a ser três: o
     corpo, a etiqueta e o título de cartão. Tudo o que é texto corrido usa a
     mesma medida, em todas as secções.
     O espaçamento vertical aperta na mesma lógica — a página tinha quase o
     dobro do scroll de que precisa. */
  :root{
    --gutter:.9rem;
    --fs-copy:  .76rem;   /* todo o texto corrido, em qualquer secção */
    --fs-micro: .65rem;   /* etiquetas, rótulos, notas — 10,4px, o chão */
    --fs-card:  1rem;     /* títulos de cartão */
    --fs-h2:    clamp(1.5rem, 6vw, 1.95rem);
    --fs-lede:  .82rem;
    /* UM SÓ ESPAÇAMENTO DE SECÇÃO.
       No desktop os três valores são hierarquia deliberada: as secções leves
       respiram mais que as densas. Num ecrã de 375px essa hierarquia não se lê
       — o que se lê é que umas secções têm mais folga que outras, e isso parece
       descuido, não intenção. Os três tokens passam a valer o mesmo, e todas as
       secções ficam com exactamente o mesmo respiro em cima e em baixo. */
    --sec-y:    2.75rem;
    --sec-y-lg: 2.75rem;
    --sec-y-sm: 2.75rem;
    /* CADA GRELHA NA PROPORÇÃO DAS SUAS FOTOGRAFIAS.
       Houve aqui uma proporção única (4:5, depois 2:3) para as quatro grelhas
       serem do mesmo tamanho. O problema é que uma proporção só serve fontes de
       formas diferentes cortando-as — e a altura do container NÃO aumenta a
       fotografia: numa grelha de três a largura está travada em ~116px, e é a
       largura que decide o tamanho da imagem. Um container mais alto com a
       imagem inteira lá dentro dava a mesma fotografia com faixas vazias.
       Então cada grelha passa a ter a proporção nativa dos seus ficheiros:
       nenhuma imagem é cortada, todas aparecem inteiras, e os reels — que são
       9:16 — ficam automaticamente os mais altos, que era o pedido.
       A consistência mantém-se onde ela se vê: MESMA largura de coluna e MESMO
       intervalo nas quatro secções. A altura difere porque as fotografias têm
       formas diferentes, e as secções estão longe umas das outras na página. */
    --gap-3up:   .5rem;
  }

  /* a redacção curta entra, a longa sai */
  .wide-only{ display:none; }
  .narrow-only{ display:inline; }

  /* QUEM FAZ O SCROLL DA PÁGINA É O <html>
     O `overflow-x:hidden` do <body> transformava o BODY em contentor de scroll
     (quando um eixo é hidden, o outro passa a auto). Com isso, duas coisas
     declaradas no <html> deixavam de ter efeito: o `scroll-padding-top`, que
     afasta os alvos das âncoras da navegação fixa, e o `scroll-behavior:smooth`
     — ou seja, cada link do menu do telemóvel saltava, e saltava para debaixo
     da barra. O `clip` corta na mesma o transbordo horizontal mas NÃO cria
     contentor de scroll, e devolve o scroll ao <html>, onde ele deve estar. */
  html,body{ overflow-x:clip; }

  /* ---- O CTA FIXO ---- */
  .dock{
    display:inline-flex; position:fixed; z-index:118;   /* 118: o menu (119) tapa-o */
    left:var(--gutter); right:var(--gutter);
    bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
    padding:1rem 1.2rem; font-size:.82rem;
    box-shadow:0 12px 30px -10px rgba(14,14,12,.5), 0 2px 8px -3px rgba(14,14,12,.35);
    opacity:0; transform:translateY(130%); pointer-events:none;
    transition:opacity .35s var(--ease), transform .5s var(--ease-out);
  }
  body.dock-on .dock{ opacity:1; transform:none; pointer-events:auto; }
  /* a seta do hover não serve de nada num ecrã de toque, e alarga o botão */
  .dock span::after{ display:none; }
  /* cabeçalho de secção: mesma medida e mesmo respiro do topo ao rodapé */
  .sec-head{ margin-bottom:1.5rem; }
  .sec-head .sec-title{ margin-bottom:.6rem; }
  .sec-lede{ max-width:none; line-height:1.5; }
  .eyebrow{ font-size:var(--fs-micro); letter-spacing:.16em; margin-bottom:.6rem; }

  /* AS ETIQUETAS DECORATIVAS SAEM.
     "OS NOSSOS SERVIÇOS" por cima de "O treino é adaptado a ti", "CONTACTO" por
     cima de "Localização", "ANTES DE COMEÇARES" por cima de "Perguntas" — as
     três diziam, em miúdo e em caixa alta, o que o título já dizia em grande.
     Duas linhas para uma informação. Sem elas o título é a primeira coisa que
     se lê em cada secção, o que é mais impactante e mais fácil de percorrer.
     Ficam as duas que NÃO repetem: a do hero, que é o posicionamento
     ("Estúdio de treino personalizado · Lisboa"), e a do Instagram, que é a
     conta (@martimsstudio) — o título "Instagram" não a diz. */
  .servicos .eyebrow,
  .contact .eyebrow,
  .faq .eyebrow{ display:none; }
  /* os botões de secção também são todos do mesmo tamanho (o do hero é a
     excepção deliberada, mais abaixo) */
  .btn--lg,.btn--xl{ padding:.85rem 1.25rem; font-size:.76rem; letter-spacing:0; }

  /* PACKS — os três numa linha, sem scroll lateral, como os serviços.
     Aqui não há texto corrido para reduzir: o que o cartão tem é um número, um
     rótulo e um botão, e números leem-se em coluna estreita. O que tinha de
     mudar era só a área de toque — o selector "50 min / 30 min" andava com 24px
     de altura, pouco mais de metade do mínimo. Passa para baixo do título, à
     largura do cartão, com 44px. */
  .pack-grid{ column-gap:var(--gap-3up); }
  .pack__media{ margin-bottom:.6rem; border-radius:7px; aspect-ratio:4/5; }
  .pack__media img{ aspect-ratio:4/5; object-fit:cover; }   /* igual aos serviços */
  .pack__title{ font-size:var(--fs-card); letter-spacing:-.03em; margin-bottom:.3rem; }
  .pack__meta{ font-size:var(--fs-micro); letter-spacing:.06em; gap:.28rem; margin-bottom:.5rem; }
  .pack__mark{ width:13px; height:13px; }
  /* Em 110px nem o título e o selector cabem lado a lado, nem os dois botões do
     selector cabem um ao lado do outro ("50 MIN" e "30 MIN" pedem 118px). Então
     empilha tudo, à largura do cartão: o título, e por baixo a duração.
     Como a etiqueta fixa e os botões partilham a mesma altura (44px) e o mesmo
     `align-items:stretch`, a duração começa exactamente na mesma linha nos três
     cartões — que era o que estava a falhar. */
  /* O `justify-content:space-between` que serve a versão horizontal (título à
     esquerda, duração à direita) era, aqui em coluna, a causa do desalinhamento:
     o Individual tem dois botões e enche a fila; o Duo e o Trio têm um só, sobra
     espaço, e o `space-between` empurrava-lhes a etiqueta para o FUNDO — 48px
     mais abaixo. Encostada ao topo, a etiqueta dourada dos três cai na mesma
     linha, e o "30 min" do Individual fica pendurado por baixo, que é onde deve
     estar: é a opção que ele tem a mais, não um desvio. */
  .pack__head{ flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:.4rem; }
  /* OS DOIS TEMPOS NA MESMA LINHA.
     Em 110px de cartão não cabem com o espaçamento normal — "50 MIN" e "30 MIN"
     pediam 118px. Cabem assim: os dois botões repartem a largura do cartão em
     partes iguais (`flex:1` sobre uma base de zero, para o conteúdo não mandar
     na medida), o espaçamento entre letras vai a zero e o preenchimento
     lateral ao mínimo. Sobra folga, e a letra fica nos 10,4px do resto do site.
     A altura de 44px mantém-se nos dois e na etiqueta fixa do Duo e do Trio,
     que é o que os põe todos na mesma linha. */
  .dur{ flex-direction:row; gap:.2rem; align-self:stretch; }
  .dur__btn{ flex:1 1 0; min-width:0; }
  /* A etiqueta fixa do Duo e do Trio fica com a medida EXACTA de um botão do
     selector — metade do cartão menos metade do intervalo. Sem isto esticava
     para os 110px e as três pílulas douradas, apesar de alinhadas e da mesma
     cor, tinham larguras diferentes. Agora são a mesma peça em todo o preçário. */
  .pack__dur{ align-self:flex-start; width:calc(50% - .1rem); }
  .pack__dur,.dur__btn{ font-size:var(--fs-micro); letter-spacing:0;
    padding:.5rem .2rem; min-height:44px; }
  .preco__num{ flex-direction:column; align-items:flex-start; gap:.1rem; }
  .preco__val{ font-size:1.35rem; letter-spacing:-.03em; }
  .preco__lab{ font-size:var(--fs-micro); letter-spacing:.06em; }
  .preco__meta{ font-size:var(--fs-micro); line-height:1.4; }
  .preco__unit{ font-size:var(--fs-micro); line-height:1.4; }
  .pack__precos{ margin-bottom:.7rem; }
  .pack__cta{ padding:.6rem .3rem; font-size:var(--fs-micro); letter-spacing:0;
    text-align:center; min-height:44px; }
  /* CONDIÇÕES — é letra miúda por natureza, mas continua a ter de se ler */
  .cond{ gap:1.1rem; padding-top:1.2rem; margin-top:1.4rem; }
  .cond__title{ font-size:.66rem; letter-spacing:.12em; margin-bottom:.4rem; }
  .cond__col p{ font-size:.76rem; line-height:1.55; }
  .cond__foot{ font-size:.7rem; line-height:1.5; gap:.2rem; }
  /* os selectores do preçário passam todos o mínimo de 44px de toque */
  .seg__btn{ font-size:.9rem; padding:.5rem .75rem; min-height:44px; }
  .switch__btn{ font-size:var(--fs-copy); padding:.75rem 1rem; min-height:44px; }

  /* HERO — ocupa o ecrã todo e o título cresce: é a primeira coisa que se vê */
  .hero{ min-height:100svh; }
  .hero__title{ font-size:clamp(2.5rem,11.5vw,3.2rem); max-width:none; }
  .hero__copy .eyebrow{ font-size:.66rem; letter-spacing:.14em; }
  .hero__actions .btn{ font-size:.88rem; padding:1rem 1.6rem; }

  /* A FOTOGRAFIA VERTICAL DO ESTÚDIO.
     1152x2048, ou seja 9:16 — quase exactamente a forma de um ecrã de telemóvel.
     Por isso o enquadramento fica CENTRADO e sem truques: o `cover` só tem de
     aparar uns 18% da largura (contra os 74% que a deitada obrigava), e a sala
     aparece de cima a baixo, do tecto ao chão. */
  .hero__img{ object-position:center; filter:saturate(.55) contrast(1.04) brightness(1.06); }

  /* O VÉU — é ele que faz o hero ler-se limpo.
     No desktop são três gradientes a desenhar uma poça de luz debaixo do texto.
     Num ecrã estreito o texto atravessa a largura toda, e uma poça localizada
     deixava metade das letras sobre a parede branca da sala. Aqui é mais simples
     e mais eficaz: uma lavagem uniforme que assenta a fotografia, e um gradiente
     vertical que fecha em cima (para a navegação) e em baixo (para a calha do
     slogan e para o CTA fixo). Menos desenho, mais contraste.
     A lavagem uniforme é leve (16%) porque esta fotografia já é escura por si:
     estava a 28% quando o hero usava a deitada, que é bem mais clara, e com a
     vertical o conjunto ficava turvo — a sala desaparecia. O contraste do texto
     vem do gradiente, não da lavagem. */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(14,14,12,.80) 0%,
        rgba(14,14,12,.38) 22%,
        rgba(14,14,12,.40) 44%,
        rgba(14,14,12,.72) 76%,
        rgba(14,14,12,.94) 100%),
      linear-gradient(0deg, rgba(14,14,12,.16), rgba(14,14,12,.16));
  }

  /* O CONCEITO SAI DO TELEMÓVEL.
     Dizia, por outras palavras, o que as secções à volta já dizem: "espaço
     privado" e "um cliente de cada vez" está no Estúdio, "exigência sem
     extremismo" está na biografia do Martim, e "treino adaptado a ti" é o
     próprio título dos Serviços. Num ecrã pequeno, uma secção que repete é uma
     secção que atrasa — e as fotografias que lhe davam o contrapeso já estavam
     escondidas abaixo dos 1100px, pelo que o que restava era só texto.
     No desktop fica: lá há vão para ela, e o argumento da marca merece o espaço. */
  .concept{ display:none; }

  /* TREINADOR — foto à esquerda, texto à direita, a fechar na mesma linha.
     A fotografia aparece INTEIRA, no seu 4:5 e sem corte nenhum: quem se ajusta
     é o container, não a imagem. Para as duas colunas acabarem juntas, a coluna
     do texto fica só com o que interessa — a etiqueta, o título e o parágrafo
     que explica o porquê. Os outros três parágrafos são desktop.
     O botão e o "+50 clientes" saem da coluna e passam a atravessar as duas, por
     baixo: é o mesmo desenho dos serviços, e dá ao botão a largura toda.
     (`display:contents` desfaz a caixa do .coach__text para os filhos poderem
     ser colocados na grelha um a um.) */
  .coach{ padding-block:var(--sec-y-sm); }
  /* A FOTOGRAFIA APARECE INTEIRA, no seu 4:5 de origem — quem se ajusta é o
     container, nunca a imagem. Foi essa a regra que passou a valer para todo o
     site, e obriga a uma consequência aqui: se a foto não pode esticar-se até à
     altura do texto, é o texto que tem de caber na altura da foto.
     Por isso a coluna da direita leva só a etiqueta, o título e o parágrafo que
     explica o porquê — três filas que, a 46% de largura de foto, dão exactamente
     a altura do 4:5. As duas colunas fecham a zero, em cima e em baixo.
     O botão, a nota e o "+50 clientes" descem para uma fila a toda a largura.
     Não caberiam na coluna sem a fazer crescer, e à largura toda o botão fica
     com 346px em vez de 130 — que é melhor botão, não pior. */
  /* TODO O TEXTO À DIREITA, SÓ O BOTÃO EM BAIXO.
     A coluna da direita leva agora as cinco filas de texto — etiqueta, título,
     parágrafo, tese e a prova dos +50 clientes — e a fotografia acompanha-lhes
     a altura toda (`align-items:stretch` + a foto a atravessar as cinco filas).
     É por isso que fecham a zero em cima e em baixo em qualquer largura de ecrã,
     sem haver percentagem nenhuma para afinar.
     A FOTOGRAFIA NÃO É CORTADA. Fica no seu 4:5 de origem, à largura da coluna
     (159x199), encostada ao topo — o container tem a medida da imagem, e não o
     contrário.
     Isto deixa ar na coluna da esquerda por baixo dela, porque o texto tem o
     dobro da altura da fotografia. É geometria, não é escolha: com o texto todo
     à direita e a imagem sem corte, as duas colunas não podem fechar juntas.
     Chegou a experimentar-se o container alto com `contain` — a imagem inteira
     centrada numa moldura de 400px — e lia-se como caixa vazia, não como
     moldura. O ar sobre o alabastro da secção lê-se como respiro. */
  /* 52% e não 46%: a fotografia cresce (159px passam a 180px, e a altura de 199
     para 225) e o texto encurta o suficiente para os dois acabarem no mesmo
     sítio. A altura do texto muda aos SALTOS, de linha em linha, e a da
     fotografia é contínua — foi por isso que a percentagem se encontrou por
     medição, e não por conta: 52% é o ponto onde as duas coincidem. */
  .coach__grid{ grid-template-columns:52% 1fr; column-gap:.9rem; row-gap:.3rem;
    align-items:start; }
  .coach__text{ display:contents; }
  .coach__media{ max-width:none; grid-column:1; grid-row:1 / span 4; align-self:start; }
  .coach__media img{ transform:none; width:100%; height:auto; aspect-ratio:4/5;
    object-fit:cover; object-position:center; }
  .coach__kicker,.coach__title,.coach__p{ grid-column:2; min-width:0; }
  .coach__kicker{ grid-row:1; }
  .coach__title{ grid-row:2; }
  .coach__p{ grid-row:3; }
  /* o número e o botão atravessam as duas colunas, por baixo — o "+50" saiu da
     coluna porque era ele que a fazia passar da altura da fotografia */
  .prova{ grid-column:1 / -1; grid-row:5; min-width:0; }
  .coach__cta{ grid-column:1 / -1; grid-row:6; min-width:0; }
  /* A legenda sai. Numa coluna de 159px "Martim de Paula · fundador" nunca cabia
     numa linha sem descer aos 8px, e 8px não é texto pequeno, é texto que não se
     lê. Não se perde nada: a etiqueta "O fundador" está ao lado e o título está
     na primeira pessoa. A fotografia fica limpa, sem nada por cima.
     Com a legenda fora, o véu escuro do rodapé da imagem também deixa de ter
     função — existia para a assentar. Fica só o filete dourado. */
  .coach__media figcaption{ display:none; }
  .coach__media::before{ background:none; }
  .coach__kicker{ font-size:var(--fs-micro); letter-spacing:.16em; margin-bottom:0; }
  .coach__title{ font-size:var(--fs-card); line-height:1.15; margin:0; }
  .coach__p{ font-size:var(--fs-copy); line-height:1.5; max-width:none; margin:0; }
  /* Fica o primeiro parágrafo, que é o porquê, e a tese. Os outros são desktop:
     o método e o estúdio estão ditos no Estúdio e nos Serviços, e a assinatura
     em itálico não caberia sem desalinhar a foto. */
  .coach__p ~ .coach__p{ display:none; }
  /* A tese fica na coluna, entre o parágrafo e a prova. Já não precisa de sair
     para a largura toda: com a fotografia a esticar-se, deixou de haver uma
     conta de altura para respeitar. */
  .coach__p.coach__p--tese{
    display:block; grid-column:2; grid-row:4; min-width:0;
    margin:.5rem 0 0; font-size:.86rem; line-height:1.34;
  }
  .coach__cta{ margin-top:.5rem; }
  .coach__cta .btn--xl{ width:100%; }
  .coach__note{ font-size:var(--fs-micro); margin-top:.5rem; line-height:1.45; }
  .prova{ margin-top:.9rem; padding-top:.75rem; }
  .prova__num{ font-size:1.5rem; }
  .prova__texto{ font-size:var(--fs-copy); line-height:1.45; max-width:none; }

  /* SERVIÇOS — os três numa só linha, sem arrastar nada.
     O rail resolvia a legibilidade mas trocava-a por scroll lateral, e a página
     tem de caber toda de uma vez. Então o que encolhe é o CONTAINER e o que
     reduz é o TEXTO: cada cartão fica com 110px, e em 110px o parágrafo longo
     não cabe — por isso o telemóvel recebe uma redacção sua, de uma linha, que
     diz a mesma coisa em vez de dizer o mesmo texto (ver .narrow-only no HTML).
     O nome também encurta para Individual · Duo · Trio, que é o que o preçário
     já usa: os três títulos passam a caber numa linha e a grelha alinha desde a
     primeira fila.
     O subgrid mantém foto, título, rótulo e texto a começar todos na mesma
     linha nos três cartões. A fotografia é 3:2, que é a proporção nativa dos
     ficheiros: enche o container sem cortar nada. */
  .serv-grid{ grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto auto auto;
    column-gap:var(--gap-3up); row-gap:0; }
  .serv:nth-child(1){ grid-column:1; }
  .serv:nth-child(2){ grid-column:2; }
  .serv:nth-child(3){ grid-column:3; }
  .serv{ grid-row:1 / span 4; display:grid; grid-template-rows:subgrid; }
  .serv:hover{ transform:none; }          /* não há hover no toque */
  /* 4:5 — a proporção nativa dos três ficheiros, igual à do computador.
     A largura está travada em 116px pela grelha de três, e é a LARGURA que
     decide o tamanho de uma fotografia; em 4:5 o container fica 116x145 e a
     fotografia enche-o inteira, sem corte nenhum do navegador, porque as duas
     proporções são a mesma. Mais 25% de altura útil do que o quadrado. */
  .serv__media{ margin-bottom:.55rem; border-radius:7px; aspect-ratio:4/5; }
  .serv__media img{ aspect-ratio:4/5; object-fit:cover; }
  .serv__mark{ width:13px; height:13px; }
  .serv__title{ font-size:var(--fs-card); line-height:1.15; margin-bottom:.3rem; }
  .serv__meta{ font-size:var(--fs-micro); letter-spacing:.06em; gap:.28rem; margin-bottom:.4rem; }
  .serv__text{ font-size:var(--fs-copy); line-height:1.45; }
  /* Fica só o preçário: o botão de marcar saiu daqui porque o CTA fixo está
     sempre no fundo do ecrã, a três centímetros do dedo. */
  .servicos__cta{ justify-content:center; text-align:center; gap:.6rem; margin-top:1.3rem; }
  .servicos__cta .btn--dark{ display:none; }
  /* Com o botão de marcar fora, o do preçário fica sozinho e passa a ser o CTA
     da secção — logo veste-se como tal: ónix cheio, igual ao do treinador. O
     contorno servia para o distinguir de um botão principal que já não está lá,
     e ao lado dos outros lia-se como secundário sem ter nada de secundário. */
  .servicos__cta .btn--outline-dark{
    background:var(--espresso); color:var(--cream); box-shadow:none;
  }

  /* O ESTÚDIO — três fotografias na mesma linha, com o nome por baixo.
     Aqui as três colunas ficam: uma fotografia de 110px é uma miniatura
     perfeitamente legível de uma sala, ao contrário de um parágrafo. O que sai
     é a FRASE de cada uma — em 110px dava as mesmas dezoito letras por linha, e
     era informação repetida: o lede da secção já diz snacks, equipamento e
     ambiente. Ficam três imagens e três nomes, alinhados. */
  .extras__grid{ grid-template-columns:repeat(3,1fr); gap:var(--gap-3up); max-width:none; }
  .extra img{ aspect-ratio:3/4; }   /* nativa dos ficheiros (900x1200) */
  .extra figcaption{ margin-top:.55rem; }
  .extra strong{ font-size:var(--fs-micro); letter-spacing:.08em; margin-bottom:0; }
  .extra span{ display:none; }

  /* TESTEMUNHOS — cartões mais pequenos, cabem mais no ecrã */
  .card{ flex-basis:56vw; padding:1rem .95rem .85rem; gap:.65rem; }
  .card figcaption{ padding-top:.65rem; gap:.5rem; }
  .rail__grupo{ gap:.6rem; padding-right:.6rem; }
  .rail__track--js{ gap:.6rem; }
  .card blockquote{ font-size:var(--fs-copy); line-height:1.5; -webkit-line-clamp:7; }
  .avatar{ width:28px; height:28px; font-size:var(--fs-micro); }
  .who strong{ font-size:var(--fs-copy); }
  .who em{ font-size:var(--fs-micro); }

  /* INSTAGRAM — os três alinhados numa linha, containers menores.
     A moldura fica em 9:16, que é a proporção nativa dos posters: o vídeo enche
     o container sem corte nenhum.
     O cabeçalho do post continua fora — eram três avatares e seis linhas de
     texto para repetir três vezes o handle que a etiqueta da secção já dá. */
  .reels{ padding-block:var(--sec-y-sm); }
  .ig-grid{ grid-template-columns:repeat(3,1fr); gap:var(--gap-3up); max-width:none; }
  /* 9:16 — a proporção nativa de um reel (720x1280). São por isso as molduras
     mais altas da página, e é também o que as torna as maiores. */
  .ig-card__frame{ aspect-ratio:9/16; }
  .ig-user{ display:none; }
  /* a moldura tem ~110px: a seta a 48px tapava-a quase toda */
  .ig-card__play{ width:32px; height:32px; margin:-16px 0 0 -16px; }
  .ig-card__play::after{ border-left-width:9px; border-top-width:5.5px; border-bottom-width:5.5px; }

  /* LOCALIZAÇÃO — quatro contactos em 2x2, mapa em faixa por baixo.
     O mapa estava numa coluna de 167px e esticava-se até aos 387px da lista de
     contactos: um mapa alto e estreito, que é a pior forma possível de mostrar
     uma zona da cidade — vê-se meia rua e nada em volta.
     A toda a largura passa a ser rectangular de verdade (346x170, quase 2:1) e
     a secção fica MAIS BAIXA em vez de mais alta, porque a lista de contactos
     deixa de ser uma coluna de quatro e passa a duas de duas.
     No embed do Google o zoom desceu de 15 para 13: a esta medida vê-se
     Campolide, o Aqueduto e as Amoreiras, ou seja dá-se ao visitante uma
     referência da cidade em vez de um close-up da porta. */
  .contact{ padding-block:var(--sec-y-sm); }
  .contact__grid{ grid-template-columns:1fr; gap:.9rem; }
  .contact__info{ display:grid; grid-template-columns:1fr 1fr; column-gap:1rem;
    border-top:0; }
  /* com duas colunas, o filete de topo passa a ser de cada bloco: só assim as
     duas primeiras entradas têm linha em cima como as de baixo */
  .info-block{ padding:.5rem .1rem .6rem; border-top:1px solid var(--line-d);
    border-bottom:0; }
  .info-block__label{ font-size:var(--fs-micro); letter-spacing:.14em; margin-bottom:.25rem; }
  .info-block__value{ font-size:var(--fs-copy); line-height:1.4; }
  .info-block__cta{ font-size:var(--fs-micro); margin-top:.35rem; }
  a.info-block:hover{ padding-left:.1rem; }   /* sem deslize: no toque não há hover */
  /* 4:3 — quase quadrado. A faixa de 5:2 era um rasgo largo e baixo: com o zoom
     em 12 mostrava muito na horizontal e quase nada na vertical, o que não é
     como se lê um mapa. Mais alto mostra a zona nos dois eixos. */
  .contact__map{ min-height:0; height:auto; aspect-ratio:4 / 3; }
  .contact__map iframe{ min-height:0; height:100%; }
  /* passa para cima: em baixo tapava a atribuição do Google (que é obrigatória)
     e tinha 30px de altura, menos do que a área de toque mínima */
  .contact__map-link{ font-size:var(--fs-micro); padding:.5rem .8rem; min-height:44px;
    right:.45rem; bottom:auto; top:.45rem; }

  /* FAQ — o botão sai: o CTA fixo diz o mesmo, e está mais perto do dedo */
  .acc__q{ font-size:var(--fs-card); padding:.95rem 0; gap:1rem; }
  .acc__a p{ font-size:var(--fs-copy); line-height:1.5; padding-bottom:1rem; }
  .faq__cta{ display:none; }

  /* RODAPÉ — quatro destinos, não nove, e com área de toque a sério.
     Os nove links duplicavam o menu em linhas de 20px de altura: metade do
     mínimo recomendado, e encostadas umas às outras. Ficam os mesmos quatro do
     menu, em duas colunas, com 44px cada e um filete a separar — que é o mesmo
     desenho da lista de contactos, e por isso não é um padrão novo.
     A folga em baixo é para o CTA fixo não tapar a última linha. */
  /* o topo do rodapé entra no mesmo ritmo das secções; em baixo leva a folga do
     CTA fixo para não lhe tapar a última linha */
  .footer{ padding-top:var(--sec-y);
    padding-bottom:calc(var(--sec-y) + 2.4rem + env(safe-area-inset-bottom, 0px)); }
  .footer__links{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; width:100%; }
  .footer__links a{ font-size:var(--fs-copy); display:flex; align-items:center;
    min-height:44px; border-bottom:1px solid var(--line-l); }
  /* o `$=` apanha as duas formas do href: "#estudio" no índice e
     "index.html#estudio" na página do preçário */
  .footer__links a[href$="#conceito"],
  .footer__links a[href$="#estudio"],
  .footer__links a[href$="#testemunhos"],
  .footer__links a[href$="#reels"],
  .footer__links a[href$="#faq"]{ display:none; }
  .footer__bottom p{ font-size:var(--fs-micro); }
}
@media (max-width:560px){
  .who{ text-align:center; align-items:center; }
}

/* ============ 14. MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .preloader{ display:none!important; }
  .mask__in,.js-reveal,.hero__copy .eyebrow,.hero__actions,.hero__rail{
    opacity:1!important; transform:none!important; }
  .hero__img{ transform:scale(1.02); }
  .tape,.tape__label{ display:none!important; }
  /* as fotografias ficam onde estão — presentes, mas quietas */
  .snap{ animation:none!important; }
  /* O CARROSSEL CONTINUA A ANDAR — é uma decisão explícita do cliente, que o
     quer sempre a repetir. Fica a metade da velocidade, e é o único movimento
     que sobrevive nesta média query.
     ATENÇÃO ao que estava aqui antes e partia tudo: escondia-se o grupo
     duplicado (`display:none`) mas deixava-se a animação correr. A animação
     acaba em `-50%` da fita — e sem o segundo grupo, metade da fita passava a
     ser metade de UM grupo. Resultado: a fita ficava parada, deslocada para a
     esquerda, com os cartões todos amontoados de um lado e um vazio enorme do
     outro. Era esse o "buraco". O grupo duplicado nunca pode desaparecer. */
  .rail__track{
    animation:railCorre 390s linear -52s infinite!important;   /* -33.3333% = um grupo dos três */
  }
  .reel-strip__track{ transform:none!important; }
  /* sem parallax: a fotografia fica quieta e sem folga a descobrir */
  .coach__media img{ transform:none!important; }
  .pack:hover{ transform:none!important; }
}