/* ==========================================================================
   BodyMindSoul 2026 — CSS do tema
   Portado da proposta V4 (mockups/v4/assets/css/style.css). Os blocos
   próprios produzem a mesma marcação da V4, por isso as regras mantêm-se.

   Diferenças para a V4:
   · as letras são declaradas no theme.json (fontFace), não aqui;
   · as cores, letras e tamanhos apontam para os tokens do theme.json
     (--wp--preset--*), a fonte de verdade que o editor também usa;
   · os espaçamentos automáticos do WordPress entre cabeçalho, conteúdo e
     rodapé são anulados, porque cada secção traz a sua margem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Fundos: o creme com um toque de lilás da V1 */
  --creme: var(--wp--preset--color--creme);
  --creme-2: var(--wp--preset--color--creme-2);
  --branco: var(--wp--preset--color--branco);

  /* Tinta */
  --tinta: var(--wp--preset--color--tinta);       /* 15,9:1 sobre creme */
  --tinta-2: var(--wp--preset--color--tinta-2);     /*  7,0:1 sobre creme, 6,4:1 sobre creme-2 */
  --tinta-3: var(--wp--preset--color--tinta-3);     /*  5,3:1 sobre creme — só placeholders e notas */

  /* Lilás da marca. O #c89fcf dá 2,25:1 com branco: serve para superfícies,
     linhas e pontos, nunca para texto. Para texto e botões usa-se o acento. */
  --lilas: var(--wp--preset--color--lilas);
  --lilas-claro: var(--wp--preset--color--lilas-claro);
  --lilas-vidro: var(--wp--preset--color--lilas-vidro);
  --acento: var(--wp--preset--color--acento);      /* 6,1:1 sobre creme, 5,6:1 sobre creme-2, 6,5:1 com branco */
  --ameixa: var(--wp--preset--color--ameixa);      /* preenchimento dos botões ao passar o rato */

  --linha: var(--wp--preset--color--linha);
  --linha-forte: rgb(36 26 40 / 0.24);

  --ok: #1a6b36;
  --erro: #9c2b25;

  --titulo: var(--wp--preset--font-family--julius);
  --corpo: var(--wp--preset--font-family--open-sans);

  /* Corpo: tamanhos da V2, em rem, para acompanhar o tamanho de letra do
     sistema. Títulos: escala da V1. */
  --t-s: var(--wp--preset--font-size--pequeno);
  --t-m: var(--wp--preset--font-size--normal);
  --t-l: var(--wp--preset--font-size--medio);
  --t-xl: var(--wp--preset--font-size--intro);

  --h3: var(--wp--preset--font-size--titulo-3);
  --h2: var(--wp--preset--font-size--titulo-2);
  --h1: var(--wp--preset--font-size--titulo-1);
  --h-hero: var(--wp--preset--font-size--hero);

  --largura: 1280px;
  --margem: var(--wp--custom--margem);
  --seccao: clamp(4rem, 2.8rem + 5vw, 7.5rem);

  --raio: var(--wp--custom--raio);
  --raio-foto: var(--wp--custom--raio-foto);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 420ms;

  --sombra: 0 30px 70px -40px rgb(36 22 40 / 0.45);
  --sombra-alta: 0 50px 110px -50px rgb(36 22 40 / 0.55);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--creme);
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--creme);
  color: var(--tinta-2);
  font-family: var(--corpo);
  font-size: var(--t-m);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, picture, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
figure { margin: 0; }
::selection { background: var(--lilas); color: var(--tinta); }

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: 0.02em; }

p { max-width: 62ch; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
strong, b { font-weight: 600; color: var(--tinta); }

.intro, .is-style-intro, .is-style-intro-larga { font-size: var(--t-xl); line-height: 1.6; color: var(--tinta-2); max-width: 44ch; }
.intro--larga, .is-style-intro-larga { max-width: none; }

/* Pequeno título por cima dos títulos — o da V1, com o traço à esquerda */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.25rem;
  font-family: var(--titulo);
  font-size: 0.875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--acento);
}
.eyebrow::before {
  content: "";
  width: 2.5rem; height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--centro { justify-content: center; }
/* Em ecrãs estreitos «Pilates Studio · Sobreda» partia em duas linhas e o traço
   ficava solto a meio. Menos espaçamento, e sem traço abaixo dos 360px. */
@media (max-width: 430px) { .eyebrow { font-size: 0.8125rem; letter-spacing: 0.14em; gap: 0.6em; } .eyebrow::before { width: 1.5rem; } }
@media (max-width: 360px) { .eyebrow::before { display: none; } }

/* Ligações dentro de texto corrido.
   O `:not()` evita a armadilha da V2: `.texto a` (0,1,1) vencia `.btn` (0,1,0)
   e pintava os botões com a cor das ligações. */
.texto a:not(.btn):not(.link-acao),
.prosa a:not(.btn):not(.link-acao),
.link-texto {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur) var(--ease);
}
.texto a:not(.btn):not(.link-acao):hover,
.prosa a:not(.btn):not(.link-acao):hover,
.link-texto:hover { color: var(--tinta); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   5. Acessibilidade
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
  border-radius: 3px;
}

.saltar {
  position: fixed;
  left: 1.5rem; top: 1.5rem;
  z-index: 400;
  translate: 0 -250%;
  padding: 0.9rem 1.5rem;
  background: var(--tinta);
  color: var(--creme);
  font-weight: 600;
  border-radius: 100px;
  transition: translate var(--dur) var(--ease);
}
.saltar:focus-visible { translate: 0 0; }

.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */
.container { width: min(100% - var(--margem) * 2, var(--largura)); margin-inline: auto; }
.container--estreito { --largura: 780px; }

.seccao { position: relative; padding-block: var(--seccao); }
.seccao--n2 { background: var(--creme-2); }
.seccao--curta { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }

.cabeca-seccao { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.cabeca-seccao p:not(.eyebrow) { margin-top: 1.25rem; font-size: var(--t-l); line-height: 1.7; }

.texto > h2 + *, .texto > .intro { margin-top: 1.5rem; }
.texto > p + p { margin-top: 1.1em; }
.texto__acao { margin-top: 2rem !important; }

/* Bloco de texto + imagem (a composição da secção «O método» da V1) */
.editorial { display: grid; gap: clamp(2.5rem, 1.5rem + 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .editorial { grid-template-columns: 1fr 1fr; }
  .editorial--inverso .editorial__media { order: 2; }
}

/* Topo das páginas interiores. Um só círculo de luz, o eco do hero. */
.cabeca-pagina {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2.5rem, 2rem + 2.5vw, 4rem);
}
.cabeca-pagina::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  top: -45%; right: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--lilas-claro), transparent 68%);
  opacity: 0.9;
  pointer-events: none;
}
.cabeca-pagina h1 { max-width: 18ch; }
.cabeca-pagina .intro { margin-top: 1.5rem; max-width: 48ch; }

/* --------------------------------------------------------------------------
   7. Fotografia
   -------------------------------------------------------------------------- */
.foto, .moldura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--creme-2);
}
.foto picture, .moldura picture, .hero__foto picture { width: 100%; height: 100%; }
.foto img, .moldura img, .hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* As nove fotografias vêm de bancos diferentes. Uma dessaturação leve e um
     véu lilás ténue dão-lhes família sem as escurecer. */
  filter: saturate(0.9);
  transition: scale 900ms var(--ease);
}
.foto::after, .moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lilas);
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
}

/* As fotografias são 848x562 (3:2). Nenhuma moldura é mais alta do que 4:3,
   senão o `object-fit: cover` teria de cortar e ampliar a fonte. */
.moldura {
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-foto);
  box-shadow: var(--sombra);
}
.moldura--arco { border-radius: 999px 999px var(--raio-foto) var(--raio-foto); }
/* Cúpula mais baixa: numa moldura em paisagem o arco inteiro comia o topo. */
.moldura--cupula { border-radius: 90px 90px var(--raio-foto) var(--raio-foto); }

/* --------------------------------------------------------------------------
   8. Botões e ligações
   -------------------------------------------------------------------------- */
/* Forma e cor da V1 (pílula em lilás, preenchimento que sobe ao passar o rato).
   Letra da V2: Open Sans a 16px, sem maiúsculas espaçadas — lê-se melhor. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 52px;
  padding: 0.8em 1.9em;
  background: var(--acento);
  color: var(--branco);
  border: 1px solid var(--acento);
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--t-m);
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ameixa);
  translate: 0 101%;
  border-radius: 100px 100px 0 0;
  transition: translate 520ms var(--ease), border-radius 520ms var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { translate: 0 0; border-radius: 0; }
.btn:hover, .btn:focus-visible { border-color: var(--ameixa); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: translate var(--dur) var(--ease); }
.btn:hover svg:last-child { translate: 3px 0; }
.btn:hover svg:first-child:not(:last-child) { translate: 0 0; }

.btn--linha {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha-forte);
}
.btn--linha svg { color: var(--acento); }
.btn--linha:hover, .btn--linha:focus-visible { color: var(--branco); }
.btn--linha:hover svg, .btn--linha:focus-visible svg { color: currentColor; }

.btn--pequeno { min-height: 44px; padding: 0.55em 1.35em; }
.btn--largo { width: 100%; }
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding-block: 0.6rem;
  font-weight: 600;
  font-size: var(--t-m);
  color: var(--acento);
  border-bottom: 1px solid var(--linha-forte);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-acao:hover, .link-acao:focus-visible { color: var(--tinta); border-color: var(--tinta); }
.link-acao svg { width: 1.05em; height: 1.05em; transition: translate var(--dur) var(--ease); }
.link-acao:hover svg { translate: 4px 0; }

/* --------------------------------------------------------------------------
   9. Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 150;
  background: rgb(250 247 250 / 0.72);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cabecalho[data-scroll="true"] {
  background: rgb(250 247 250 / 0.94);
  border-bottom-color: var(--linha);
}

.cabecalho__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(0.7rem, 1vw, 1.1rem);
}

.marca { flex: none; }
/* Logótipo horizontal (manual de marca): a altura manda num cabeçalho, e
   deitado o nome fica 1,5 a 2 vezes maior do que empilhado. */
.marca picture { display: block; }
.marca img {
  display: block;
  width: auto;
  height: clamp(30px, 1.2rem + 1.6vw, 46px);
  transition: height var(--dur) var(--ease);
}
.cabecalho[data-scroll="true"] .marca img { height: clamp(30px, 1rem + 1.3vw, 40px); }

.nav-principal { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.2rem); margin-left: auto; }

/* `:not(.btn)` — a mesma armadilha de especificidade: sem ele o botão
   «Aula grátis» dentro do menu herdava a cor e o sublinhado das ligações. */
.nav-principal a:not(.btn) {
  position: relative;
  padding-block: 0.65rem;
  font-weight: 600;
  font-size: var(--t-m);
  color: var(--tinta);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-principal a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale var(--dur) var(--ease);
}
.nav-principal a:not(.btn):hover { color: var(--acento); }
.nav-principal a:not(.btn):hover::after { scale: 1 1; transform-origin: left; }
.nav-principal a[aria-current="page"] { color: var(--acento) !important; }
.nav-principal a[aria-current="page"]::after { scale: 1 1; }

.cabecalho__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--linha-forte);
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--t-m);
  color: var(--tinta);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.cabecalho__tel:hover, .cabecalho__tel:focus-visible {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--lilas-vidro);
}
.cabecalho__tel svg { width: 1.1em; height: 1.1em; color: var(--acento); }

/* Botão do menu, com a palavra «Menu» — três traços sozinhos não dizem nada a
   quem tem pouca prática com telemóveis. */
.menu-botao {
  display: none;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--linha-forte);
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--t-m);
  color: var(--tinta);
}
.menu-botao__riscas { display: grid; gap: 4px; width: 18px; }
.menu-botao__riscas span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.menu-botao[aria-expanded="true"] .menu-botao__riscas span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.menu-botao[aria-expanded="true"] .menu-botao__riscas span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__riscas span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

/* Com «Modalidades» no menu (seis itens), a linha deixa de caber abaixo dos
   1200px e o «Aula grátis» partia em duas: o menu passa a painel mais cedo. */
@media (max-width: 1200px) {
  .cabecalho__inner { flex-wrap: wrap; row-gap: 0.15rem; gap: 0.6rem; }
  /* O item do cabeçalho é o <div class="ligar"> que envolve o botão: é nele que ficam a ordem e a margem. */
  .cabecalho__inner > .ligar, .cabecalho__tel { order: 2; margin-left: auto; }
  .menu-botao { order: 3; }

  /* Sem JS a navegação fica visível como uma linha por baixo do logótipo. */
  .nav-principal {
    order: 4;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem clamp(0.9rem, 4vw, 2rem);
    margin-left: 0;
    padding-top: 0.25rem;
    border-top: 1px solid var(--linha);
  }
  .nav-principal__cta { display: none; }

  .com-js .menu-botao { display: inline-flex; }

  /* Com JS passa a painel por baixo do cabeçalho. O backdrop-filter do
     `.cabecalho` torna-o bloco de contenção, por isso `top: 100%` cola o
     painel à base do cabeçalho. */
  .com-js .nav-principal {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    width: auto;
    gap: 0;
    padding: 0.25rem var(--margem) 1.25rem;
    border-top: 0;
    border-bottom: 1px solid var(--linha);
    background: var(--creme);
    box-shadow: 0 24px 40px -30px rgb(36 26 40 / 0.5);
    opacity: 0;
    visibility: hidden;
    translate: 0 -10px;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease),
      visibility var(--dur);
  }
  .com-js .nav-principal[data-aberto="true"] {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    /* Ao abrir, as ligações ficam acessíveis logo — não esperam pelo fim da
       transição, que num telemóvel lento podia atrasar o teclado e o toque. */
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility 0s;
  }
  /* O painel acompanha o cabeçalho, que está preso ao topo. Num telemóvel na
     horizontal (390px de altura) não cabia e as últimas ligações ficavam fora do
     ecrã sem forma de lá chegar: passa a ter altura máxima e rola por dentro. */
  .com-js .nav-principal {
    max-height: calc(100dvh - var(--altura-cabecalho, 72px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .com-js .nav-principal a:not(.btn) {
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--linha);
    font-size: var(--t-l);
  }
  .com-js .nav-principal a:not(.btn)::after { display: none; }
  .com-js .nav-principal__cta { display: inline-flex; margin-top: 1.1rem; min-height: 52px; }
}
@media (max-width: 430px) {
  .nav-principal a:not(.btn) { font-size: var(--t-s); }
  .com-js .nav-principal a:not(.btn) { font-size: var(--t-l); }
  .cabecalho__tel { padding: 0.5rem 0.95rem; font-size: var(--t-s); }
  .marca img, .cabecalho[data-scroll="true"] .marca img { height: 30px; }
}
/* Onde há barra fixa em baixo (até 860px, exceto telemóvel deitado) o «Ligar» do
   cabeçalho repetia-a e empurrava o «Menu» para uma segunda linha: sai do cabeçalho. */
@media (max-width: 860px) {
  .com-js .cabecalho__inner > .ligar { display: none; }
  .com-js .menu-botao { margin-left: auto; }
}
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .com-js .cabecalho__inner > .ligar { display: block; }
  .com-js .menu-botao { margin-left: 0; }
}
/* Abaixo dos 400px o número por extenso já não cabe ao lado do logótipo e do
   botão do menu. O `aria-label` do link continua a anunciá-lo. */
@media (max-width: 400px) {
  .cabecalho__tel-num { display: none; }
  .cabecalho__tel { padding: 0.5rem 0.75rem; }
}

/* --------------------------------------------------------------------------
   10. Hero — o da V1
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.75rem) clamp(3rem, 2rem + 3.5vw, 5.5rem);
}

.hero__fundo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__circulo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lilas), transparent 68%);
  opacity: 0.5;
  filter: blur(10px);
}
.hero__circulo--1 { width: min(52vw, 640px); aspect-ratio: 1; top: -18%; right: -12%; }
.hero__circulo--2 {
  width: min(34vw, 380px); aspect-ratio: 1; bottom: -22%; left: -10%;
  background: radial-gradient(circle at 50% 50%, var(--lilas-claro), transparent 70%);
  opacity: 0.6;
}

.hero__grelha { display: grid; gap: clamp(2.5rem, 1rem + 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .hero__grelha { grid-template-columns: 1.02fr 0.98fr; } }

.hero__titulo { font-size: var(--h-hero); }
/* A palavra de cor sozinha na segunda linha, como na V1. */
.hero__titulo .fino { display: block; color: var(--acento); }

/* Em texto corrido e não em maiúsculas: na V1 esta frase ocupava cinco linhas
   de caixa alta e era o bloco mais pesado da página. */
.hero__citacao {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-left: 1.25rem;
  border-left: 2px solid var(--lilas);
  font-size: var(--t-l);
  line-height: 1.75;
  color: var(--tinta-2);
  max-width: 44ch;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.hero__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--linha);
}
.hero__numeros b {
  display: block;
  font-family: var(--titulo);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.hero__numeros span {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-s);
  color: var(--tinta-2);
}

.hero__media { position: relative; }
.hero__foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 90px 90px var(--raio-foto) var(--raio-foto);
  background: var(--creme-2);
  box-shadow: var(--sombra-alta);
}
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lilas);
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
}

.hero__selo {
  position: absolute;
  left: clamp(-2rem, -1.6vw, -1rem);
  bottom: -1.25rem;
  display: grid;
  place-content: center;
  width: clamp(100px, 8.5vw, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra);
  text-align: center;
}
.hero__selo b {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: var(--h3);
  line-height: 1;
  color: var(--acento);
}
.hero__selo span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

/* Em ecrãs estreitos a fotografia não cai para debaixo do texto: passa a ser o
   fundo do hero, com um véu de creme por cima (a solução pedida para a V2).
   O texto continua em tinta escura; o selo sai, porque «1.ª aula grátis» já
   está no botão principal. */
@media (max-width: 899.98px) {
  .hero { padding-bottom: clamp(4.5rem, 3rem + 9vw, 7rem); }
  .hero__media { position: absolute; inset: 0; z-index: -1; }
  .hero__foto { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hero__foto img { object-position: 50% 38%; filter: saturate(0.62) contrast(0.94) brightness(1.08); }
  .hero__foto::after {
    background: linear-gradient(
      180deg,
      rgb(250 247 250 / 0.88) 0%,
      rgb(250 247 250 / 0.84) 55%,
      rgb(250 247 250 / 0.55) 100%
    );
    mix-blend-mode: normal;
    opacity: 1;
  }
  .hero__selo { display: none; }
  .hero__circulo { display: none; }
  .hero__citacao, .hero__numeros span { color: var(--tinta); }
  .hero__numeros { border-top-color: var(--linha-forte); }
}
@media (max-width: 620px) {
  .hero__acoes .btn { width: 100%; }
  /* Três colunas iguais: em linha partiam-se em 2+1 a 390px. */
  .hero__numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* --------------------------------------------------------------------------
   11. Como começar
   -------------------------------------------------------------------------- */
.passos { display: grid; gap: clamp(2rem, 3vw, 3.5rem); counter-reset: passo; }
@media (min-width: 820px) { .passos { grid-template-columns: repeat(3, 1fr); } }

.passo { counter-increment: passo; padding-top: 1.5rem; border-top: 1px solid var(--linha-forte); }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--titulo);
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem);
  line-height: 1;
  color: var(--acento);
}
.passo h3 { margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   12. Modalidades
   -------------------------------------------------------------------------- */
.aulas {
  display: grid;
  gap: clamp(2.5rem, 3vw, 3.5rem) clamp(1.5rem, 2.2vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.aula { position: relative; display: flex; flex-direction: column; }
.aula__foto { aspect-ratio: 3 / 2; margin-bottom: 1.35rem; border-radius: var(--raio-foto); }
.aula:hover .aula__foto img { scale: 1.05; }
.aula h3 { margin-bottom: 0.75rem; }
/* Os resumos vêm do site atual e têm comprimentos muito diferentes — o de
   «Aulas Abertas» é três vezes maior e desalinhava a fila. Corta-se a cinco
   linhas no cartão; o texto completo está na página da aula. */
.aula p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

/* O título é a única ligação e estica-se sobre o cartão inteiro: todo o cartão
   é clicável, com um só destino e uma só paragem no teclado. */
.aula__ligacao { transition: color var(--dur) var(--ease); }
.aula__ligacao::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.aula:hover .aula__ligacao { color: var(--acento); }
.aula__ligacao:focus-visible { outline: none; }
.aula__ligacao:focus-visible::after {
  outline: 2px solid var(--acento);
  outline-offset: 8px;
  border-radius: var(--raio-foto);
}

.aula__mais {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--acento);
}
.aula__mais svg { width: 1.05em; height: 1.05em; transition: translate var(--dur) var(--ease); }
.aula:hover .aula__mais svg { translate: 4px 0; }

/* --------------------------------------------------------------------------
   13. Horário
   -------------------------------------------------------------------------- */
.tabela-envolve {
  overflow-x: auto;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
}
.tabela { width: 100%; min-width: 44rem; font-size: var(--t-m); }
.tabela :is(th, td) {
  padding: 1.05rem 1.2rem;
  border-bottom: 1px solid var(--linha);
  text-align: center;
}
.tabela thead th {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--tinta-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tabela tbody th {
  font-family: var(--titulo);
  font-size: var(--t-l);
  font-weight: 400;
  color: var(--tinta);
  text-align: left;
  white-space: nowrap;
}
.tabela tbody td { color: var(--tinta-2); }
.tabela tbody tr:last-child :is(th, td) { border-bottom: 0; }
.tabela [data-coluna-hoje] { background: var(--lilas-vidro); color: var(--acento); font-weight: 600; }
.tabela thead [data-coluna-hoje] { background: var(--lilas-claro); color: var(--tinta); }

.dias-lista { display: grid; gap: 1.25rem; }
.dia-bloco {
  padding: 1.25rem 1.35rem 0.5rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
}
.dia-bloco[data-hoje="true"] { border-color: var(--lilas); box-shadow: 0 0 0 3px var(--lilas-vidro); }
.dia-bloco__titulo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
  font-size: var(--t-xl);
}
.selo-hoje {
  font-family: var(--corpo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2em 0.8em;
  border-radius: 100px;
  background: var(--lilas);
  color: var(--tinta);
}
.dia-bloco li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linha);
}
.dia-bloco li:last-child { border-bottom: 0; }
.dia-bloco li b {
  font-family: var(--titulo);
  font-size: var(--t-l);
  font-weight: 400;
  color: var(--acento);
  min-width: 5.5rem;
}

@media (min-width: 861px) { .dias-lista { display: none; } }
@media (max-width: 860px) { .tabela-envolve { display: none; } }

.horario__nota { margin-top: 2.5rem; font-size: var(--t-l); }

/* --------------------------------------------------------------------------
   14. Página de modalidade
   -------------------------------------------------------------------------- */
.capa { padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) 0; }
.capa__grelha { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 900px) { .capa__grelha { grid-template-columns: 1.05fr 0.95fr; } }
.capa h1 { max-width: 18ch; }
.capa .intro { margin-top: 1.5rem; }
.capa__acoes { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
@media (max-width: 620px) { .capa__acoes .btn { width: 100%; } }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.migalhas ol { display: contents; }
.migalhas a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.migalhas a:hover { color: var(--tinta); }
.migalhas li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.4; }

.duas-colunas { display: grid; gap: clamp(2.5rem, 4vw, 5rem); }
@media (min-width: 1000px) { .duas-colunas { grid-template-columns: minmax(0, 1fr) 18rem; } }

.prosa { max-width: 42rem; }
.prosa > * + * { margin-top: 1.35rem; }
.prosa h2 {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: var(--t-xl);
  text-transform: none;
  letter-spacing: 0;
  color: var(--acento);
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1.35;
}
.prosa ul { display: grid; gap: 0.7rem; }
.prosa ul li { position: relative; padding-left: 1.75rem; }
.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 10px; height: 1px;
  background: var(--acento);
}
.prosa blockquote {
  margin-block: clamp(2rem, 3vw, 2.75rem);
  padding: 1.5rem 1.75rem;
  background: var(--lilas-vidro);
  border-left: 2px solid var(--lilas);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-family: var(--titulo);
  text-transform: uppercase;
  font-size: var(--t-xl);
  line-height: 1.55;
  color: var(--tinta);
}
.prosa blockquote p { max-width: none; }
.prosa__acao { margin-top: 2.5rem !important; }
.prosa--legal h2:first-of-type { margin-top: clamp(2rem, 3vw, 2.75rem); }
.prosa__data { margin-top: 2.5rem !important; font-size: var(--t-s); }

.rail { position: sticky; top: 7rem; }
.rail h2 {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: var(--t-l);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.lista-aulas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-2);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.lista-aulas a:hover { color: var(--acento); padding-left: 0.4rem; }
.lista-aulas svg { width: 1.05em; height: 1.05em; color: var(--acento); flex: none; }

/* --------------------------------------------------------------------------
   14.1 O espaço (Sobre nós)
   Uma faixa que desliza com o dedo, o trackpad ou as setas do teclado, com
   encaixe em cada fotografia. Começa alinhada com o texto e sai pela margem
   direita, para se perceber que há mais. Sem passagem automática: quem vê
   decide quando avança. As fotografias alternam entre o arco da marca (ao alto)
   e a moldura arredondada (ao largo).
   -------------------------------------------------------------------------- */
.espaco__cabeca { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

.carrossel { --inicio: max(var(--margem), (100% - var(--largura)) / 2); }
.carrossel__faixa {
  position: relative;
  display: flex;
  gap: clamp(0.875rem, 0.5rem + 1.2vw, 1.5rem);
  padding-inline: var(--inicio);
  padding-block: 0.5rem 2.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inicio);
  scrollbar-width: none;
}
.carrossel__faixa::-webkit-scrollbar { display: none; }
.carrossel__faixa:focus-visible { outline-offset: -4px; border-radius: var(--raio-foto); }

.carrossel__item {
  flex: 0 0 auto;
  width: min(84vw, 26rem);
  scroll-snap-align: start;
}
.carrossel__foto,
.carrossel__reservado {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-foto);
  box-shadow: var(--sombra);
}
.carrossel__item:nth-child(odd) :is(.carrossel__foto, .carrossel__reservado) {
  border-radius: 999px 999px var(--raio-foto) var(--raio-foto);
}
@media (min-width: 700px) {
  .carrossel__item { width: auto; }
  .carrossel__foto, .carrossel__reservado { height: clamp(22rem, 14rem + 16vw, 32rem); }
  .carrossel__item:nth-child(even) :is(.carrossel__foto, .carrossel__reservado) { aspect-ratio: 4 / 3; }
}

/* Telemóvel na horizontal: a fotografia inteira cabe por baixo do cabeçalho */
@media (min-width: 700px) and (max-height: 500px) {
  .carrossel__foto, .carrossel__reservado { height: max(13rem, 100svh - 9rem); }
}

/* Espaço reservado enquanto não há fotografias (só nas propostas) */
.carrossel__reservado {
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.85rem;
  color: var(--acento);
  font-size: var(--t-s);
  letter-spacing: 0.04em;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.75), transparent 55%),
    linear-gradient(160deg, var(--lilas-vidro), var(--lilas-claro));
}
.carrossel__item:nth-child(3n + 2) .carrossel__reservado {
  background:
    radial-gradient(circle at 75% 80%, rgb(200 159 207 / 0.45), transparent 60%),
    linear-gradient(200deg, var(--creme), var(--lilas-vidro));
}
.carrossel__item:nth-child(3n) .carrossel__reservado {
  background:
    radial-gradient(circle at 50% 110%, rgb(200 159 207 / 0.55), transparent 60%),
    linear-gradient(180deg, var(--lilas-claro), var(--creme-2));
}
.carrossel__reservado svg { width: 2.25rem; height: 2.25rem; stroke-width: 1.4; }

/* Controlos: progresso, «2 de 6» e setas grandes, logo por baixo das fotografias */
.carrossel__barra {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
}
.carrossel__barra[hidden] { display: none; }
.carrossel__progresso {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--linha);
  border-radius: 2px;
  overflow: hidden;
}
.carrossel__progresso span {
  position: absolute;
  inset: 0;
  background: var(--acento);
  transform-origin: left center;
  transform: scaleX(var(--progresso, 0));
  transition: transform var(--dur) var(--ease);
}
.carrossel__contador {
  min-width: 4.5em;
  text-align: center;
  font-size: var(--t-m);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}
.carrossel__botao {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--branco);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carrossel__botao svg { width: 22px; height: 22px; }
.carrossel__botao:hover:not([aria-disabled="true"]),
.carrossel__botao:focus-visible:not([aria-disabled="true"]) {
  background: var(--acento); border-color: var(--acento); color: var(--branco);
}
.carrossel__botao[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* --------------------------------------------------------------------------
   15. Contactos
   -------------------------------------------------------------------------- */
.cartoes-contacto { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 820px) { .cartoes-contacto { grid-template-columns: repeat(3, 1fr); } }

.cartao-contacto {
  display: block;
  padding: clamp(1.6rem, 2.4vw, 2.25rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    translate var(--dur) var(--ease);
}
a.cartao-contacto:hover { border-color: var(--lilas); box-shadow: var(--sombra); translate: 0 -3px; }

.cartao-contacto__icone {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--lilas-vidro);
  color: var(--acento);
}
.cartao-contacto__icone svg { width: 22px; height: 22px; }
.cartao-contacto h3 {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: 0.12em;
  color: var(--tinta-2);
  margin-bottom: 0.4rem;
}
.cartao-contacto .valor {
  display: block;
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cartao-contacto .valor--email { font-size: var(--t-l); }
.cartao-contacto address { font-size: var(--t-l); color: var(--tinta); line-height: 1.5; }
.cartao-contacto .nota { margin-top: 0.75rem; font-size: var(--t-s); color: var(--tinta-2); }

.horas { width: 100%; margin-top: 1.75rem; margin-bottom: 1.75rem; }
.horas :is(th, td) { padding: 0.95rem 0; border-bottom: 1px solid var(--linha-forte); }
.horas th { text-align: left; font-weight: 600; color: var(--tinta); }
.horas td { text-align: right; color: var(--tinta-2); }
.horas tr:last-child :is(th, td) { border-bottom: 0; }
.horas tr[data-hoje="true"] :is(th, td) { color: var(--acento); }
.horas .selo-hoje { margin-left: 0.75rem; }

.mapa {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio-foto);
  border: 1px solid var(--linha);
  background: var(--creme-2);
}
.mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa__acao { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   16. Marcação da primeira aula
   -------------------------------------------------------------------------- */
/* Painel claro e recolhido dentro da grelha, não uma faixa de margem a margem.
   Destaca-se pela cor e pela moldura, sem escurecer a página. */
.marcar__painel {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 0.8rem + 4.5vw, 4.5rem);
  border: 1px solid var(--lilas-claro);
  border-radius: clamp(20px, 2.4vw, 36px);
  background:
    radial-gradient(60% 70% at 100% 0%, rgb(200 159 207 / 0.32), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(232 214 236 / 0.8), transparent 70%),
    var(--lilas-vidro);
}
@media (min-width: 940px) {
  .marcar__painel { grid-template-columns: 0.95fr 1.05fr; align-items: start; }
}

.marcar__texto h2 { max-width: 16ch; }
.marcar__texto .intro { margin-top: 1.5rem; }

.tel-grande {
  display: block;
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--linha-forte);
}
.tel-grande__rotulo { display: block; margin-bottom: 0.35rem; font-size: var(--t-s); color: var(--tinta-2); }
.tel-grande__numero {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--titulo);
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem);
  line-height: 1.15;
  color: var(--tinta);
  transition: color var(--dur) var(--ease);
}
.tel-grande__numero svg { width: 0.6em; height: 0.6em; color: var(--acento); }
.tel-grande:hover .tel-grande__numero { color: var(--acento); }
.tel-grande__nota { display: block; margin-top: 0.5rem; font-size: var(--t-s); color: var(--tinta-2); }

.marcar__email { margin-top: 1.5rem; font-size: var(--t-s); }

/* Em telemóvel, painel e cartão encaixados davam duas margens e os campos
   ficavam com 234px. O cartão passa a ocupar a largura do painel. */
@media (max-width: 620px) {
  .marcar__painel { padding: 1.75rem 0.75rem 0.75rem; }
  .marcar__texto { padding-inline: 0.75rem; }
  .cartao-form { padding: 1.5rem 1.25rem; }
}

.cartao-form {
  background: var(--branco);
  border-radius: var(--raio-foto);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  box-shadow: var(--sombra);
}
.cartao-form > h3 {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: var(--t-xl);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.cartao-form > .ajuda {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-s);
}

/* --------------------------------------------------------------------------
   17. Formulário
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }

.campo label { display: block; margin-bottom: 0.45rem; font-weight: 600; color: var(--tinta); }
.campo .opcional { font-weight: 400; color: var(--tinta-2); }
.campo .ajuda { display: block; margin-bottom: 0.55rem; font-size: var(--t-s); color: var(--tinta-2); }

.campo :is(input, textarea) {
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 1rem;
  background: var(--creme);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  color: var(--tinta);
  font-size: var(--t-m);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.campo textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }
.campo :is(input, textarea)::placeholder { color: var(--tinta-3); }
/* Indicador de foco próprio: moldura em acento e um halo lilás. */
.campo :is(input, textarea):focus {
  outline: none;
  background: var(--branco);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--lilas-claro);
}

.campo[data-invalido="true"] :is(input, textarea) { border-color: var(--erro); }
.campo .erro { display: none; margin-top: 0.5rem; font-size: var(--t-s); font-weight: 600; color: var(--erro); }
.campo[data-invalido="true"] .erro { display: block; }

.hp { position: absolute !important; left: -9999px; opacity: 0; pointer-events: none; }

.form__privacidade { font-size: var(--t-s); color: var(--tinta-2); text-align: center; margin-inline: auto; }
.form__privacidade a { color: var(--acento); text-decoration: underline; text-underline-offset: 0.2em; }

.estado {
  padding: 0.95rem 1.2rem;
  border-radius: var(--raio);
  font-weight: 600;
  border: 1px solid transparent;
}
.estado:empty { display: none; }
.estado[data-estado="ok"] { color: var(--ok); border-color: currentColor; background: #f1f8f3; }
.estado[data-estado="erro"] { color: var(--erro); border-color: currentColor; background: #fdf2f1; }

/* --------------------------------------------------------------------------
   18. Rodapé
   -------------------------------------------------------------------------- */
/* No telemóvel o rodapé é, sobretudo, uma forma de ligar ou chegar ao estúdio.
   Por isso os contactos são linhas grandes com ícone, e as páginas — que já
   estão no menu — ficam compactas em duas colunas. */
.rodape {
  background: var(--branco);
  border-top: 1px solid var(--linha);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 1.5rem;
}

.rodape__grelha { display: grid; gap: 2.25rem; }
@media (min-width: 640px) {
  .rodape__grelha { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .rodape__contactos { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1040px) {
  .rodape__grelha { grid-template-columns: 1fr 1.45fr 0.75fr; gap: 3.5rem; }
  .rodape__contactos { grid-column: auto; grid-row: auto; }
}

.rodape h2 {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--tinta-2);
  margin-bottom: 0.75rem;
}

.rodape__logo { display: inline-block; }
.rodape__logo img { height: 56px; width: auto; }
.rodape__marca p { margin-top: 0.85rem; font-size: var(--t-s); }

.rodape__redes { display: flex; gap: 0.6rem; margin-top: 1rem; }
.rodape__rede {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  color: var(--tinta);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.rodape__rede svg { width: 20px; height: 20px; }
.rodape__rede:hover { color: var(--acento); border-color: var(--acento); background: var(--lilas-vidro); }

.rodape__contactos ul { display: grid; gap: 0.25rem; }
/* Em tablet os contactos passam a duas colunas; com três o e-mail não cabia e
   partia a meio («gmail.co / m»). */
@media (min-width: 640px) and (max-width: 1039.98px) {
  .rodape__contactos ul { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); column-gap: 1.5rem; }
}
.rodape__contacto {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 52px;
  padding-block: 0.4rem;
  color: var(--tinta);
  transition: color var(--dur) var(--ease);
}
.rodape__contacto:hover { color: var(--acento); }
.rodape__contacto b { display: block; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.rodape__rotulo { display: block; font-size: 0.8125rem; color: var(--tinta-2); line-height: 1.3; }
.rodape__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--lilas-vidro);
  color: var(--acento);
}
.rodape__icone svg { width: 18px; height: 18px; }
.rodape__horas {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.6rem;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.rodape__horas .rodape__icone { background: transparent; border: 1px solid var(--linha); color: var(--tinta-2); }

.rodape__nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
@media (min-width: 1040px) { .rodape__nav ul { grid-template-columns: 1fr; } }
.rodape__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  transition: color var(--dur) var(--ease);
}
.rodape__nav a:hover { color: var(--acento); }

.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.25rem, 3vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-s);
}
.rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.rodape__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.rodape__legal a:hover { color: var(--acento); }
/* O acesso ao Livro de Reclamações tem de estar «visível e em destaque»
   (DL 156/2005, art. 5.º-B): botão com moldura, não uma ligação perdida. */
.rodape__legal .rodape__livro {
  padding-inline: 1.1rem;
  border: 1px solid var(--linha-forte);
  border-radius: 100px;
  font-weight: 600;
  text-decoration: none;
}
.rodape__legal .rodape__livro:hover { border-color: var(--acento); background: var(--lilas-vidro); }
.rodape__copy { color: var(--tinta-2); font-size: 0.8125rem; }
@media (max-width: 639.98px) {
  .rodape__fim { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   19. Barra fixa e voltar ao topo
   -------------------------------------------------------------------------- */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 160;
  display: none;
  gap: 0.7rem;
  padding: 0.7rem var(--margem) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(250 247 250 / 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
}
.barra .btn { flex: 1; min-height: 50px; padding-inline: 0.6em; }

@media (max-width: 860px) {
  .barra { display: flex; }
  /* Espaço para a barra fixa não tapar o fim da página. Fica dentro do rodapé
     (que é branco) e não no body, onde pintava uma faixa creme por baixo. */
  .rodape { padding-bottom: calc(1.5rem + 5.25rem + env(safe-area-inset-bottom)); }
  /* Ao navegar com Tab, o elemento com foco pára acima da barra fixa (WCAG 2.4.11). */
  html { scroll-padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); }
}
/* `.barra { display: flex }` na media query vence o `[hidden]` do browser. */
.barra[hidden] { display: none; }

/* Telemóvel na horizontal: com o cabeçalho preso em cima e a barra em baixo
   ficavam tapados 40% de um ecrã de 390px. A barra sai — o «Aula grátis» e o
   telefone continuam no cabeçalho. */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .barra, .barra[hidden] { display: none; }
  .rodape { padding-bottom: 1.5rem; }
  .topo { bottom: var(--margem); }
  html { scroll-padding-bottom: 1rem; }
}

.topo {
  position: fixed;
  right: var(--margem);
  bottom: var(--margem);
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.1rem;
  border-radius: 100px;
  background: rgb(250 247 250 / 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--linha-forte);
  color: var(--tinta);
  font-weight: 600;
  font-size: var(--t-s);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.topo[data-visivel="true"] { opacity: 1; visibility: visible; }
.topo svg { width: 16px; height: 16px; }
/* Em telemóvel o botão fica só com a seta (o texto continua lá para leitores de
   ecrã) e desaparece enquanto se preenche o formulário — antes flutuava por cima
   dos campos. */
@media (max-width: 860px) {
  .topo {
    bottom: calc(5.4rem + env(safe-area-inset-bottom));
    width: 48px; height: 48px; min-height: 48px;
    padding: 0; justify-content: center; gap: 0;
  }
  .topo svg { width: 18px; height: 18px; }
  .topo__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
body:has(.form :focus) .topo { opacity: 0; visibility: hidden; }

/* --------------------------------------------------------------------------
   20. 404
   -------------------------------------------------------------------------- */
.erro-404 { min-height: 60svh; display: grid; place-items: center; text-align: center; }
.erro-404 h1 { margin-inline: auto; }
.erro-404 .intro { margin: 1.5rem auto 0; }
.erro-404__acoes { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2.5rem auto 0; }

/* --------------------------------------------------------------------------
   21. Movimento
   -------------------------------------------------------------------------- */
/* Estado inicial escondido, só enquanto a classe `anima` estiver na raiz — ela
   sai sozinha ao fim de 2 s mesmo que o JavaScript nunca chegue a correr. */
.anima :is([data-anima], [data-hero], [data-partir]) { opacity: 0; }
.anima [data-mascara] > picture { clip-path: inset(0 0 100% 0); }
@media (min-width: 900px) {
  .anima [data-hero-foto] { clip-path: inset(0 0 100% 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   22. Impressão
   -------------------------------------------------------------------------- */
@media print {
  .cabecalho, .barra, .topo, .hero__fundo, .cabeca-pagina::before { display: none !important; }
  [data-anima], [data-hero], [data-partir] { opacity: 1 !important; }
  [data-mascara] > picture, [data-hero-foto] { clip-path: none !important; }
  .foto::after, .moldura::after, .hero__foto::after { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}


/* ==========================================================================
   23. Dois estúdios (V4)
   ========================================================================== */

/* Informação que falta, dita a quem visita (ex.: «ligue para saber que aulas há»). */
.falta {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 44rem;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta-2);
}
.falta > svg { width: 22px; height: 22px; flex: none; margin-top: 0.1rem; color: var(--acento); }
.falta p { max-width: none; }

/* ---- «Ligar»: os dois números num painel ------------------------------ */
.ligar { position: relative; flex: none; }
.com-js .ligar__sem-js { display: none; }
html:not(.com-js) .ligar__botao { display: none; }
.ligar__botao[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); background: var(--lilas-vidro); }
.ligar__painel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 170;
  width: max-content;
  min-width: 16rem;
  max-width: calc(100vw - 2 * var(--margem));
  padding: 0.6rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
  background: var(--branco);
  box-shadow: var(--sombra-alta);
}
.ligar__painel[hidden] { display: none; }
.ligar--acima .ligar__painel { top: auto; bottom: calc(100% + 0.6rem); left: 0; right: auto; }
.ligar__titulo { padding: 0.35rem 0.75rem 0.5rem; font-size: var(--t-s); color: var(--tinta-2); }
.ligar__opcao {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 56px;
  justify-content: center;
  padding: 0.6rem 0.75rem;
  border-radius: var(--raio);
  color: var(--tinta);
  transition: background-color var(--dur) var(--ease);
}
.ligar__opcao:hover, .ligar__opcao:focus-visible { background: var(--lilas-vidro); }
.ligar__estudio { font-weight: 600; }
.ligar__numero { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--acento); font-weight: 600; font-size: var(--t-l); }
.ligar__numero svg { width: 1em; height: 1em; }
.barra .ligar { flex: 1; display: flex; }
.barra .ligar > .btn { flex: 1; }
.capa__acoes .ligar, .hero__acoes .ligar { display: inline-flex; }
/* Abaixo dos 400px fica só o ícone, mas a palavra «Ligar» continua lá para os
   leitores de ecrã (com display: none o botão ficava sem nome). */
@media (max-width: 400px) {
  .cabecalho__tel .ligar__texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---- Cartões dos estúdios ---------------------------------------------- */
.estudios { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 760px) { .estudios { grid-template-columns: repeat(2, 1fr); } }
.estudio {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1rem + 2vw, 2.5rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
  overflow: hidden;
  isolation: isolate;
}
.estudio::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 16rem; aspect-ratio: 1;
  top: -7rem; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--lilas-claro), transparent 70%);
}
.estudio__zona {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--acento);
}
.estudio__zona svg { width: 1.05em; height: 1.05em; }
.estudio__titulo { margin-top: 0.6rem; font-size: var(--h3); }
.estudio__titulo a:hover { color: var(--acento); }
.estudio__morada { margin-top: 0.9rem; font-style: normal; font-size: var(--t-l); color: var(--tinta); line-height: 1.55; }
.estudio__dados { display: grid; gap: 0.55rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.estudio__dados li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.6rem; color: var(--tinta-2); }
.estudio__dados svg { width: 1.1em; height: 1.1em; color: var(--acento); flex: none; }
.estudio__dados a { font-weight: 600; color: var(--tinta); min-height: 44px; display: inline-flex; align-items: center; margin-right: 0.2rem; }
.estudio__dados a:hover { color: var(--acento); }
.estudio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: auto; padding-top: 1.5rem; }
.estudios--grande .estudio__titulo { font-size: var(--h2); }

/* ---- Comparação lado a lado ------------------------------------------- */
.tabela-comparar-envolve { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-foto); background: var(--branco); }
.tabela-comparar { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-m); }
.tabela-comparar :is(th, td) { padding: 1rem clamp(1rem, 2vw, 1.5rem); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela-comparar thead th { font-family: var(--titulo); font-weight: 400; font-size: var(--h3); text-transform: uppercase; color: var(--tinta); }
.tabela-comparar thead a:hover { color: var(--acento); }
.tabela-comparar tbody th { width: 11rem; font-weight: 600; color: var(--tinta); }
.tabela-comparar tbody td { color: var(--tinta-2); }
.tabela-comparar tbody tr:last-child :is(th, td) { border-bottom: 0; }
.tabela-comparar td a { color: var(--acento); text-decoration: underline; text-underline-offset: 0.2em; }

/* Telemóvel: um cartão por estúdio em vez da tabela (sem deslizar para o lado). */
.comparar-cartoes { display: none; }
@media (max-width: 700px) {
  .tabela-comparar-envolve { display: none; }
  .comparar-cartoes { display: grid; gap: 1rem; }
  .comparar-cartao { padding: 1.25rem 1.25rem 0.5rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-foto); }
  .comparar-cartao h3 { font-size: var(--h3); margin-bottom: 0.5rem; }
  .comparar-cartao h3 a { display: inline-flex; align-items: center; min-height: 44px; }
  .comparar-cartao h3 a:hover { color: var(--acento); }
  .comparar-cartao dl > div { display: grid; gap: 0.15rem; padding-block: 0.8rem; border-top: 1px solid var(--linha); }
  .comparar-cartao dt { font-size: var(--t-s); font-weight: 600; color: var(--tinta); }
  .comparar-cartao dd { margin: 0; color: var(--tinta-2); }
  .comparar-cartao dd a { color: var(--acento); text-decoration: underline; text-underline-offset: 0.2em; }
}

/* ---- Escolha de estúdio (horário e formulário) ------------------------- */
.opcoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border: 1px solid var(--linha-forte);
  border-radius: 100px;
  background: var(--branco);
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.opcao input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--acento); flex: none; }
.opcao:hover { border-color: var(--acento); }
.opcao:has(input:checked) { border-color: var(--acento); background: var(--lilas-vidro); color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--acento); outline-offset: 2px; }

.campo--opcoes { border: 0; padding: 0; margin: 0 0 0.25rem; min-width: 0; }
.campo--opcoes legend { margin-bottom: 0.6rem; padding: 0; font-weight: 600; color: var(--tinta); }

.seletor-estudio { border: 0; padding: 0; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); min-width: 0; }
.seletor-estudio[hidden] { display: none; }
.seletor-estudio legend { margin-bottom: 0.75rem; padding: 0; font-size: var(--t-s); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta-2); }
.opcoes--seletor .opcao { min-height: 56px; padding-inline: 1.1rem 1.5rem; font-size: var(--t-l); }

.painel-estudio + .painel-estudio { margin-top: clamp(3rem, 5vw, 4.5rem); }
.painel-estudio[hidden] { display: none; }
.painel-estudio__cabeca { margin-bottom: 1.5rem; }
.painel-estudio__cabeca h2 { font-size: var(--h2); }
.painel-estudio__cabeca p { margin-top: 0.6rem; color: var(--tinta-2); }

/* ---- Marcação: um telefone por estúdio --------------------------------- */
.tel-estudios { margin-top: clamp(2rem, 3vw, 2.75rem); padding-top: clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--linha-forte); }
.tel-estudios__rotulo { margin-bottom: 0.6rem; font-size: var(--t-s); color: var(--tinta-2); }
.tel-estudios ul { display: grid; gap: 0.35rem; }
.tel-estudio { display: block; padding-block: 0.45rem; }
.tel-estudio__nome { display: block; font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }
.tel-estudio__numero {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--titulo);
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.2;
  color: var(--tinta);
  transition: color var(--dur) var(--ease);
}
.tel-estudio__numero svg { width: 0.6em; height: 0.6em; color: var(--acento); }
.tel-estudio:hover .tel-estudio__numero { color: var(--acento); }

/* ---- Contactos: um bloco por estúdio ----------------------------------- */
.contactos-estudios { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .contactos-estudios { grid-template-columns: repeat(2, 1fr); } }
.contacto-estudio {
  padding: clamp(1.6rem, 1rem + 2vw, 2.5rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
}
.contacto-estudio h2 { margin-top: 0.6rem; font-size: var(--h2); }
.contacto-estudio .tel-grande { margin-top: 1.5rem; padding-top: 1.25rem; }
.contacto-estudio__dados { display: grid; gap: 0.9rem; margin-block: 1.5rem; }
.contacto-estudio__dados div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.contacto-estudio__dados dt { font-weight: 600; color: var(--tinta); }
.contacto-estudio__dados dd { margin: 0; color: var(--tinta-2); }
.contacto-estudio__dados address { font-style: normal; }
.contacto-estudio__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.25rem; }
.cartao-contacto .valor--texto { font-size: var(--t-l); }

/* ---- Página de estúdio -------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips a {
  display: inline-flex; align-items: center;
  min-height: 48px;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--linha-forte);
  border-radius: 100px;
  background: var(--branco);
  font-weight: 600;
  color: var(--tinta);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chips a:hover { border-color: var(--acento); color: var(--acento); background: var(--lilas-vidro); }

.equipa { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .equipa { grid-template-columns: repeat(2, 1fr); } }
.pessoa {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.4rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
}
.pessoa__iniciais {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--lilas-claro);
  font-family: var(--titulo);
  font-size: 1.15rem;
  color: var(--acento);
}
.pessoa h3 { font-size: var(--h3); }
.pessoa p { margin-top: 0.5rem; color: var(--tinta-2); }
.outro-estudio { margin-top: 1.5rem; font-size: var(--t-s); color: var(--tinta-2); }
address.intro { font-style: normal; }

/* ---- Modalidade: onde há esta aula ------------------------------------- */
.rail-grupo { position: sticky; top: 7rem; display: grid; gap: 2rem; }
.rail-grupo .rail { position: static; }
.onde li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linha); }
.onde a { font-weight: 600; color: var(--tinta); min-height: 44px; display: inline-flex; align-items: center; }
.onde a:hover { color: var(--acento); }
.onde__estado { font-size: 0.8125rem; font-weight: 600; color: var(--ok); }

/* ---- Rodapé: os dois estúdios ------------------------------------------ */
.rodape__estudios { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .rodape__estudios { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.rodape__estudio h3 { margin-bottom: 0.35rem; font-family: var(--corpo); font-size: var(--t-m); font-weight: 600; text-transform: none; letter-spacing: 0; }
.rodape__estudio h3 a:hover { color: var(--acento); }
.rodape__email { margin-top: 1rem; }
/* `.campo label` (bloco, com margem) vencia `.opcao` e partia o texto para baixo do círculo. */
.campo .opcao { display: inline-flex; margin-bottom: 0; }

/* Títulos que são ligações: pelo menos 24px de alvo (WCAG 2.5.8). */
.estudio__titulo a, .tabela-comparar thead a { display: inline-block; padding-block: 0.3rem; }

/* ==========================================================================
   24. Topo das páginas de estúdio: fotografia do estúdio em duotone lilás
   A imagem já vem tratada (ferramentas/fotos_estudios.py). Um véu creme do
   lado do texto garante o contraste; em telemóvel o véu cobre tudo.
   ========================================================================== */
.topo-estudio {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(24rem, 18rem + 18vw, 36rem);
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
  background: var(--creme-2);
}
.topo-estudio__fundo { position: absolute; inset: 0; z-index: -2; }
.topo-estudio__fundo picture,
.topo-estudio__fundo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.topo-estudio--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgb(250 247 250 / 0.97) 0%,
    rgb(250 247 250 / 0.92) 36%,
    rgb(250 247 250 / 0.5) 64%,
    rgb(250 247 250 / 0.12) 100%);
}
@media (max-width: 760px) {
  .topo-estudio--foto::before {
    background: linear-gradient(180deg, rgb(250 247 250 / 0.82) 0%, rgb(250 247 250 / 0.93) 60%, rgb(250 247 250 / 0.97) 100%);
  }
}
.topo-estudio__conteudo { width: min(100% - var(--margem) * 2, var(--largura)); }
.topo-estudio .migalhas { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.topo-estudio h1 { max-width: 15ch; font-size: var(--h-hero); }
.topo-estudio .intro { margin-top: 1.25rem; max-width: 36ch; color: var(--tinta); }
.topo-estudio__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ==========================================================================
   25. Rodapé da V4: marca, os dois estúdios e as páginas, em texto simples
   ========================================================================== */
.rodape__grelha { grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 560px) {
  .rodape__grelha { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .rodape__marca, .rodape__nav { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .rodape__grelha { grid-template-columns: 1.3fr 1fr 1fr 0.75fr; gap: 3rem; }
  .rodape__marca, .rodape__nav { grid-column: auto; }
}
.rodape__marca p { max-width: 30ch; }
.rodape__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.4rem;
  font-weight: 600;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.rodape__email:hover { color: var(--acento); }

.rodape__estudio address { font-style: normal; line-height: 1.6; color: var(--tinta-2); }
.rodape__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.25rem;
  font-weight: 600;
  font-size: var(--t-l);
  color: var(--tinta);
}
.rodape__tel:hover { color: var(--acento); }
.rodape__mais {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.rodape__mais:hover { color: var(--tinta); }

@media (min-width: 560px) and (max-width: 1039.98px) {
  .rodape__nav ul { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* A fotografia fica do lado direito e desvanece para o creme: vê-se a sala
   inteira, sem aproximar demasiado as pessoas, e o texto fica sobre creme. */
@media (min-width: 761px) {
  .topo-estudio__fundo {
    left: auto;
    width: min(66%, 1100px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  }
  .topo-estudio--foto::before {
    background: linear-gradient(90deg, rgb(250 247 250 / 0.9) 0%, rgb(250 247 250 / 0.55) 45%, rgb(250 247 250 / 0.08) 100%);
  }
}
.sem-quebra { white-space: nowrap; }
/* Com o menu em painel, o «Ligar» encosta à direita ao lado do botão «Menu»
   (na V3 a regra estava no link do telefone; aqui o botão vive dentro de .ligar). */
@media (max-width: 1200px) {
  .cabecalho .ligar { order: 2; margin-left: auto; }
}

/* ==========================================================================
   26. Cartões de estúdio: a fotografia do estúdio como fundo muito suave
   Fica do lado direito, quase apagada e a desvanecer para o branco, para dar
   identidade ao cartão sem competir com o texto.
   ========================================================================== */
.estudio--foto::before { display: none; }
.estudio__fundo {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 72%;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  pointer-events: none;
}
.estudio__fundo picture, .estudio__fundo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.estudio__corpo { display: flex; flex-direction: column; flex: 1; }

/* ==========================================================================
   27. Sobre nós
   ========================================================================== */
.cabeca-seccao--centro { margin-inline: auto; text-align: center; }
.cabeca-seccao--centro .intro { margin-inline: auto; }

.pilares { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 820px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
.pilar { text-align: center; }
.pilar__foto { aspect-ratio: 4 / 5; max-width: 22rem; margin: 0 auto 1.5rem; }
.pilar__en {
  font-family: var(--titulo);
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--acento);
}
.pilar h3 { margin-top: 0.35rem; font-size: var(--h2); }
.pilar p:last-child { margin: 0.9rem auto 0; max-width: 30ch; color: var(--tinta-2); }

.citacao-marca, .wp-block-quote.is-style-marca {
  margin: 1.75rem 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--lilas);
}
.citacao-marca p, .wp-block-quote.is-style-marca p { font-family: var(--titulo); font-size: var(--h3); line-height: 1.4; text-transform: uppercase; color: var(--tinta); max-width: 34ch; }
.citacao-marca footer, .citacao-marca cite, .wp-block-quote.is-style-marca cite { margin-top: 0.75rem; font-size: var(--t-s); font-weight: 600; color: var(--acento); }

.carrossel__figura { margin: 0; }
.carrossel__legenda { margin-top: 0.9rem; }
.carrossel__legenda a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 0.25em;
}
.carrossel__legenda a:hover { color: var(--acento); text-decoration-color: currentColor; }

/* ==========================================================================
   28. Formulário curto: duas colunas quando o cartão tem largura
   ========================================================================== */
.cartao-form { container-type: inline-size; }
.cartao-form > .ajuda { margin-bottom: 1.35rem; padding-bottom: 1.25rem; }
.form { gap: 1.25rem; }
.form__grelha { display: grid; gap: 1.1rem 1rem; }
@container (min-width: 27rem) {
  .form__grelha { grid-template-columns: 1fr 1fr; }
  .form__grelha .campo--largo { grid-column: 1 / -1; }
}
.campo textarea { min-height: 5.25rem; }
.campo select {
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 2.75rem 0.8rem 1rem;
  appearance: none;
  -webkit-appearance: none;
  background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e4a8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1.1rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-m);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.campo select:focus {
  outline: none;
  background-color: var(--branco);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--lilas-claro);
}
/* Em telemóvel, três arcos à largura toda tornavam a filosofia num corredor. */
@media (max-width: 819.98px) {
  .pilar__foto { max-width: 13.5rem; }
}

/* ==========================================================================
   29. Modalidades: filtro por estúdio e carrossel de cartões
   ========================================================================== */
.aula[hidden], .aulas__vazio[hidden] { display: none; }
.aulas__vazio { margin-top: 0.5rem; }

.carrossel--cartoes .carrossel__item { width: min(80vw, 21rem); }
.carrossel--cartoes .aula {
  height: 100%;
  padding: 0.85rem 0.85rem 1.4rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.carrossel--cartoes .aula:hover { border-color: var(--lilas); box-shadow: var(--sombra); }
.carrossel--cartoes .aula__foto { margin-bottom: 1.1rem; border-radius: calc(var(--raio-foto) - 6px); }
.carrossel--cartoes .aula :is(h3, p, .aula__mais) { padding-inline: 0.45rem; }
.carrossel--cartoes .aula p { -webkit-line-clamp: 4; }
/* O painel «Ligar» pode abrir dentro do topo (Contactos): o topo não pode
   cortar o que passa dos seus limites e fica por cima da secção seguinte. */
.topo-estudio { overflow: visible; z-index: 2; }
.topo-estudio__fundo { overflow: hidden; }

/* ==========================================================================
   30. Ver em grande (fotografias dos carrosséis)
   ========================================================================== */
.carrossel__ampliar {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  font: inherit;
  text-align: inherit;
}
.carrossel__ampliar img { transition: scale 900ms var(--ease); }
.carrossel__ampliar:hover img { scale: 1.04; }
.carrossel__ampliar:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }

.ampliar {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(3.75rem, 3rem + 3vw, 5rem) clamp(0.75rem, 4vw, 5.5rem) clamp(1rem, 3vw, 2rem);
  border: 0;
  background: rgb(36 26 40 / 0.94);
  color: var(--creme);
}
.ampliar::backdrop { background: rgb(36 26 40 / 0.6); }
.ampliar[open] { display: grid; place-items: center; }
html:has(.ampliar[open]) { overflow: hidden; }
.ampliar__figura { display: grid; justify-items: center; gap: 0.9rem; max-width: 100%; max-height: 100%; margin: 0; }
.ampliar__figura picture { display: contents; }
.ampliar__figura img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 10rem);
  width: auto;
  height: auto;
  border-radius: var(--raio);
  object-fit: contain;
}
.ampliar__legenda { max-width: 60ch; text-align: center; font-size: var(--t-s); color: rgb(250 247 250 / 0.85); }
.ampliar__contador { margin-left: 0.5rem; font-variant-numeric: tabular-nums; color: rgb(250 247 250 / 0.65); }
.ampliar__botao {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgb(250 247 250 / 0.35);
  border-radius: 50%;
  background: rgb(36 26 40 / 0.55);
  color: var(--creme);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ampliar__botao svg { width: 22px; height: 22px; }
.ampliar__botao:hover, .ampliar__botao:focus-visible { background: var(--acento); border-color: var(--acento); }
.ampliar__botao:focus-visible { outline: 3px solid var(--lilas-claro); outline-offset: 2px; }
.ampliar__botao[hidden] { display: none; }
.ampliar__fechar { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.ampliar__anterior, .ampliar__seguinte { top: 50%; translate: 0 -50%; }
.ampliar__anterior { left: 0.75rem; }
.ampliar__seguinte { right: 0.75rem; }
@media (max-width: 700px) {
  .ampliar__anterior, .ampliar__seguinte { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); translate: none; }
  .ampliar__figura img { max-height: calc(100dvh - 12rem); }
}
/* Fora do cabeçalho o botão «Ligar» fica à esquerda: o painel alinha pela esquerda,
   senão saía do ecrã do lado esquerdo no telemóvel. */
.topo-estudio .ligar__painel, .capa__acoes .ligar__painel { left: 0; right: auto; }


/* ==========================================================================
   WordPress
   ========================================================================== */
/* Cada secção traz a sua margem: sem o espaço automático entre as partes. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { padding: 0; }
/* O conteúdo de páginas simples (legais, texto) fica dentro da largura de leitura. */
.bms-conteudo { width: min(100% - var(--margem) * 2, 780px); margin-inline: auto; padding-block: var(--seccao); }
.bms-conteudo > * + * { margin-block-start: 1.1em; }
/* Barra de administração: o cabeçalho preso fica por baixo dela. */
.admin-bar .cabecalho { top: var(--wp-admin--admin-bar--height, 32px); }
/* Imagens do editor e alinhamentos */
.wp-block-image img { border-radius: var(--raio); }
.aligncenter { margin-inline: auto; }

/* As partes de modelo embrulham o cabeçalho e o rodapé num <div>; sem este
   contents o cabeçalho deixava de ficar colado ao topo (sticky só vale dentro do pai). */
.wp-site-blocks > .wp-block-template-part { display: contents; }
.wp-site-blocks > main { margin: 0; }

/* Fotografia de um membro da equipa, no lugar das iniciais. */
.pessoa__foto { overflow: hidden; padding: 0; }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.citacao-marca cite, .wp-block-quote.is-style-marca cite { display: block; font-style: normal; }
/* As secções das páginas encostam umas às outras, como na V4 (sem o blockGap do WordPress entre blocos). */
main .wp-block-post-content > :is(section, aside, div),
main.wp-block-group > :is(section, div, aside),
main .wp-block-group > .wp-block-group { margin-block: 0; }

/* ==========================================================================
   Consentimento de cookies (inc/analytics.php)
   Recusar e aceitar com o mesmo peso; não tapa o conteúdo nem prende o foco.
   ========================================================================== */
.consentimento {
  position: fixed;
  z-index: 400;
  inset-inline: max(1rem, env(safe-area-inset-left));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--branco);
  color: var(--tinta-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--wp--preset--shadow--alta);
  font-size: var(--t-s);
  line-height: 1.55;
}
.consentimento__texto { flex: 1 1 18rem; }
.consentimento__titulo, .consentimento-escolha h2 { font-size: var(--h3); margin-bottom: .35rem; }
.consentimento__acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.consentimento-escolha {
  margin: auto; /* o reset da V4 tira a margem que centra o <dialog> */
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  width: min(100% - 2rem, 34rem);
  padding: 1.75rem;
  border: 0;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta-2);
  box-shadow: var(--wp--preset--shadow--alta);
}
.consentimento-escolha::backdrop { background: rgb(36 26 40 / .45); }
.consentimento-escolha fieldset { border: 0; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .9rem; }
.consentimento-escolha__opcao { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.consentimento-escolha__opcao input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--acento); }
.consentimento-escolha__opcao span { display: block; font-size: var(--t-s); }
.rodape__cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .consentimento:not([hidden]) { animation: consentimento-entra .35s var(--ease); }
  @keyframes consentimento-entra { from { opacity: 0; transform: translateY(1rem); } }
}
@media print { .consentimento { display: none; } }