/* ============================================================
   Site institucional — Mário Pereira, fisioterapeuta
   Folha de estilo partilhada pelas 14 páginas.

   Convertida dos artboards `.dc.html` a 2026-09-06.
   Regra que a governa: uma mudança de cabeçalho, rodapé, cor ou
   espaçamento faz-se AQUI, uma vez, e as 14 páginas seguem.

   Ordem do ficheiro:
     1. Tokens          6. Faixas e grelha
     2. Base            7. Botões e ligações
     3. Tipografia      8. Cartões e acordeões
     4. Cabeçalho       9. Blocos próprios da Início
     5. Rodapé         10. Responsivo (o que não coube em clamp)
   ============================================================ */

/* ---------- 0. Fontes, servidas pelo próprio site ----------
   ⚠️ 2026-09-15, decisão dele: as fontes vinham de fonts.googleapis.com em todas
   as páginas, ANTES de qualquer escolha, e a Google recebia o IP de quem visitava,
   nas páginas de problemas de saúde também. São as mesmas Roboto e Roboto Condensed
   (fontes variáveis, um ficheiro serve os pesos todos), só com o alfabeto latino e
   o latino alargado. O url() é relativo a este CSS, por isso serve também a /bio/.
   O publicar.py recusa subir uma página que volte a pedir fonts.googleapis.com. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fontes/roboto-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fontes/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(fontes/roboto-condensed-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(fontes/roboto-condensed-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */

:root {
  /* Paleta da marca — de 02_wiki/negocio/identidade-visual.md */
  --navy: #324D7D;
  --azul: #4A7EDA;
  --ceu: #9AC2F9;
  --turquesa: #19BBC0;
  --branco: #FFFFFF;

  /* Derivados */
  --tinta: #16203A;
  --wash: #F5F8FC;
  --linha: #E1E9F4;
  --linha-suave: #EEF3FA;
  --texto-2: #3D4B66;
  --texto-3: #6B7891;
  --texto-4: #8DA0BC;
  --texto-5: #7B8AA3;
  --ceu-suave: #7FA6D8;

  /* Rodapé escuro */
  --fundo-escuro: #16203A;
  --linha-escura: #2A3652;
  --texto-escuro: #A8B7CE;
  --texto-escuro-2: #6E7F9B;
  --texto-claro: #C9DBF6;

  /* Aviso — sinais de alarme */
  --alarme: #B45309;
  --alarme-fundo: #FDF8F2;
  --alarme-linha: #E0BC93;
  --alarme-linha-2: #EFDFC9;
  --alarme-texto: #5B4636;
  --alarme-texto-2: #4A3A2C;
  --alarme-texto-3: #A8825F;

  /* ⚠️ A velocidade de TODO o movimento, num sitio so. Ele achou as animacoes
     rapidas de mais a 1x — nao chegava a perceber que existiam. Afina-se no
     cursor de _animacoes.html e escreve-se aqui o numero escolhido. */
  --vel: 2.2;

  /* Medidas */
  --largura-max: 1280px;
  --pad-lado: clamp(20px, 5vw, 56px);
  --pad-faixa: clamp(48px, 7vw, 92px);
  --gap-grelha: clamp(24px, 3.5vw, 48px);

  /* Escala tipográfica — fluida, sem saltos entre ecrãs */
  --t-h1: clamp(32px, 4.4vw, 54px);
  --t-h2-grande: clamp(28px, 3.4vw, 42px);
  --t-h2: clamp(26px, 3vw, 40px);
  --t-h2-peq: clamp(24px, 2.8vw, 36px);
  --t-numero: clamp(52px, 7.2vw, 92px);
  --t-lead: clamp(17px, 1.5vw, 19px);
  --t-corpo: clamp(16px, 1.35vw, 17.5px);
  --t-corpo-peq: clamp(15.5px, 1.3vw, 16.5px);
  --t-nota: clamp(13px, 1.05vw, 13.5px);

  /* Grão de fundo (ruído SVG embutido) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27180%27 height=%27180%27 filter=%27url(%23g)%27 opacity=%270.4%27/%3E%3C/svg%3E");

  /* Fundos compostos, repetidos em várias faixas */
  --fundo-claro: var(--grao) repeat, #FFFFFF;
  --fundo-azulado: var(--grao) repeat, linear-gradient(135deg, #F7FAFE 0%, #CFE2F7 100%);
  --fundo-navy: var(--grao) repeat, linear-gradient(135deg, #3A5893 0%, #1B2942 100%);

  /* Sombra do botão principal */
  --relevo-zap: 0 2px 0 #16203A, 0 8px 20px rgba(22, 32, 58, 0.32);
}

/* ---------- 2. Base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, sans-serif;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--navy); }

p { text-wrap: pretty; margin: 0 0 18px 0; }
p:last-child { margin-bottom: 0; }

/* O invólucro de toda a página */
.pagina {
  max-width: var(--largura-max);
  margin: 0 auto;
  background: var(--branco);
}

/* Só para leitores de ecrã */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Tipografia ---------- */

h1, h2, h3 { font-weight: 400; color: var(--tinta); }

.h1 {
  margin: 0 0 26px 0;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.018em;
  /* Afinacao 2 das 23 (pedido dele a 07-09): 3 linhas em vez de 4 no
     computador. A 15ch o titulo da Inicio quebrava em 4; a 21ch a linha mais
     longa ("A sua coluna merece uma") cabe, e passa a 3. Medido no browser a
     1280 px, nao calculado. */
  max-width: 21ch;
}

.h2-grande {
  margin: 16px 0 18px 0;
  font-size: var(--t-h2-grande);
  line-height: 1.16;
  letter-spacing: -0.016em;
}

.h2 {
  margin: 14px 0 16px 0;
  font-size: var(--t-h2);
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.h2-peq {
  margin: 14px 0 22px 0;
  font-size: var(--t-h2-peq);
  line-height: 1.22;
  letter-spacing: -0.012em;
}

/* O rótulo pequeno em Condensed maiúsculas que abre cada secção */
.sobretitulo {
  display: block;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
}
.sobretitulo.claro { color: #BFE0FF; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--texto-2);
  max-width: 52ch;
}

.corpo {
  font-size: var(--t-corpo);
  line-height: 1.68;
  color: var(--texto-2);
  max-width: 60ch;
}
/* 80ch e nao 96ch: acima de 90 caracteres o olho perde-se a saltar do fim de
   uma linha para o inicio da seguinte. O intervalo legivel e 45-90, com 66 no
   ideal — investigacao do Baymard, ver 00_sistema/referencias-design-web.md. */
.corpo.largo { max-width: 80ch; }
.corpo.estreito { max-width: 58ch; }
.corpo.destaque { color: var(--tinta); font-weight: 500; }

.nota {
  font-size: var(--t-nota);
  line-height: 1.6;
  color: var(--texto-5);
}

.marca { font-kerning: none; }

/* Bloco "Mário Pereira / fisioterapeuta" — a linha 2 em Condensed
   com letter-spacing calibrado para igualar a largura da linha 1. */
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nome { font-size: 21px; font-weight: 500; color: var(--tinta); }
.marca-papel {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 300;
  font-size: 14.32px;
  letter-spacing: 0.27em;
  margin-right: -0.27em;
  color: var(--azul);
  margin-top: 3px;
}

/* ---------- 4. Cabeçalho ---------- */

/* A barra fininha azul-escura do topo */
.tira {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 8px var(--pad-lado);
  background: var(--navy);
  color: var(--texto-claro);
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 20px var(--pad-lado);
  border-bottom: 1px solid var(--linha);
  position: relative;
}

.cab-marca {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.cab-simbolo { height: 44px; color: var(--navy); flex-shrink: 0; }
.cab-simbolo svg { display: block; height: 100%; width: auto; }

.cab-nav { display: flex; align-items: center; gap: 26px; }

.nav-link {
  font-size: 15px;
  color: var(--tinta);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--navy); border-bottom-color: var(--turquesa); }
.nav-link[aria-current="page"] { border-bottom-color: var(--turquesa); }

/* O botão de menu — só aparece em ecrã estreito.
   Feito com checkbox e :checked, sem JavaScript: assim funciona
   igual em ficheiro solto, em WordPress e com o JS desligado. */
.menu-estado { display: none; }
.menu-botao {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linha);
  border-radius: 3px;
  cursor: pointer;
  color: var(--navy);
  flex-shrink: 0;
}
.menu-botao svg { display: block; }
.menu-botao .fechar { display: none; }
.menu-estado:checked ~ .cab .menu-botao .abrir { display: none; }
.menu-estado:checked ~ .cab .menu-botao .fechar { display: block; }

/* ---------- 5. Rodapé ---------- */

.rodape {
  padding: 64px var(--pad-lado) 32px var(--pad-lado);
  background: var(--grao) repeat, var(--fundo-escuro);
  color: var(--texto-escuro);
}

.rodape-topo {
  padding-bottom: 44px;
  border-bottom: 1px solid var(--linha-escura);
}

.rodape-marca { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.rodape-simbolo { height: 42px; color: var(--branco); flex-shrink: 0; }
.rodape-simbolo svg { display: block; height: 100%; width: auto; }
.rodape .marca-nome { font-size: 20px; color: var(--branco); }
.rodape .marca-papel { font-size: 13.64px; color: var(--ceu); }

.rodape-titulo {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 18px;
}

.rodape-texto { font-size: 15px; line-height: 1.75; }
.rodape-texto strong { color: var(--branco); font-weight: 500; }

/* ⚠️ As duas formas de ser atendido levam rotulo — pedido dele a 07-09 as 22:43,
   a ver o rodape no telemovel. Antes, a morada ocupava cinco linhas e o
   "Consultas online" vinha a seguir sem nada a separa-lo: lia-se como um detalhe
   da clinica e nao como a segunda maneira de ser atendido. Quem so podia ir
   online podia sair da pagina a pensar que tinha de ir a Lisboa. */
.rodape-modo {
  display: block;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin: 16px 0 4px;
}
.rodape-modo:first-child { margin-top: 0; }

.redes { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.rede {
  width: 40px; height: 40px;
  border: 1px solid var(--linha-escura);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ---------- As redes acendem na cor da marca ---------- */
/* Escolhido por ele a 07-09 as 23:00, na bancada `_redes.html`, entre cinco
   versoes. Parados ficam todos da mesma cor: assim leem-se como um conjunto e
   nao competem com o botao do WhatsApp, que e a unica accao do rodape.

   ⚠️ A LINHA DO QUADRADO LEVA A COMPOSICAO DE CORES DO LOGOTIPO, e nao uma cor
   chapada -- reparo dele as 23:24, com o rato no TikTok: uma borda vermelha
   simples ao lado de um logotipo ciano-e-vermelho fica a dizer outra coisa.
   O YouTube, o Facebook e o LinkedIn nao mudam com esta regra, e nao por serem
   excepcao: o logotipo deles JA e de uma cor so.

   ⚠️ E `:active` alem de `:hover`, decisao dele as 23:52: no telemovel nao ha
   passar o rato, e sem isto a maioria das pessoas nunca via a cor. */
.rede svg { stroke: currentColor; transition: stroke .28s ease; }
.rede { transition: background .28s ease, border-color .28s ease, color .28s ease; }

/* ⚠️ O YouTube nao acende so a linha: o ecra enche-se de vermelho e a seta fica
   branca, como o logotipo verdadeiro. Pedido dele a 08-09 as 00:10, a ver no
   telemovel. As cores entram por VARIAVEL porque o CSS de fora nao seleciona o
   que esta dentro do <use> -- o que atravessa e a heranca, e as custom
   properties herdam. Cada path la dentro le a sua.

   ⚠️ E o fundo vai a #16203A chapado, para o espaco entre o icone e a linha
   ficar igual ao do TikTok -- reparo dele na mesma frase. O rodape tem grao por
   cima da cor; sem esta linha, os quadrados do Instagram e do TikTok ficavam sem
   grao e os outros com, e a diferenca via-se lado a lado. */
.rede--youtube:hover, .rede--youtube:active {
  border-color: #FF0000;
  background: #16203A;
  --yt-ecra: #FF0000;
  --yt-ecra-linha: #FF0000;
  --yt-seta: #FFFFFF;
  --yt-seta-linha: #FFFFFF;
}
.rede--facebook:hover, .rede--facebook:active { background: #1877F2; border-color: #1877F2; color: #FFFFFF; }
.rede--linkedin:hover, .rede--linkedin:active { background: #FFFFFF; border-color: #FFFFFF; color: #0A66C2; }

/* ⚠️ `border-color` nao aceita gradientes. A borda em degrade faz-se com dois
   fundos: o de dentro ate ao padding-box com a cor do rodape, o degrade ate ao
   border-box, e a borda transparente a deixar ver a camada de tras. E NAO
   `border-image`, que ignora o border-radius e devolvia cantos vivos.
   ⚠️ O #16203A tem de ser o --fundo-escuro: se um dia mudar, muda aqui tambem,
   senao aparece um halo da cor velha a volta do icone. */
.rede--instagram:hover, .rede--instagram:active,
.rede--tiktok:hover,    .rede--tiktok:active { border-color: transparent; }

.rede--instagram:hover, .rede--instagram:active {
  background: linear-gradient(#16203A, #16203A) padding-box,
              linear-gradient(135deg, #FEDA75 0%, #FA7E1E 30%, #D62976 60%, #962FBF 100%) border-box;
}
.rede--instagram:hover svg, .rede--instagram:active svg { stroke: url(#g-instagram); }

.rede--tiktok:hover, .rede--tiktok:active {
  background: linear-gradient(#16203A, #16203A) padding-box,
              linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%) border-box;
}
.rede--tiktok:hover svg, .rede--tiktok:active svg { stroke: url(#g-tiktok); }

.selo-por-vir { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--texto-escuro-2); }

.rodape-fundo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: 26px;
  flex-wrap: wrap;
  font-size: 14px;
}
.rodape-legais { display: flex; gap: 26px; flex-wrap: wrap; }
.rodape-legais a { color: var(--texto-escuro); }
.rodape-legais a:hover { color: var(--branco); }

/* ---------- 6. Faixas e grelha ---------- */

.faixa { padding: var(--pad-faixa) var(--pad-lado); }
.faixa.clara { background: var(--fundo-claro); }
.faixa.azulada { background: var(--fundo-azulado); }
.faixa.navy { background: var(--fundo-navy); color: var(--branco); }
.faixa.centrada { text-align: center; }
.faixa.sem-topo { padding-top: 0; }

.grelha {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grelha);
}
.grelha.topo { align-items: start; }
.grelha.meio { align-items: center; }
.grelha.junta { --gap-grelha: clamp(20px, 2.2vw, 32px); }

.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.c6 { grid-column: span 6; }
.c7 { grid-column: span 7; }
.c8 { grid-column: span 8; }

.cabecalho-seccao { margin-bottom: clamp(28px, 3.5vw, 46px); }

/* ---------- 7. Botões e ligações ---------- */

.zap {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: linear-gradient(180deg, #43649F 0%, #324D7D 50%, #22365B 100%);
  box-shadow: var(--relevo-zap);
  color: var(--branco);
  padding: 17px 30px;
  border-radius: 3px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.zap:hover {
  color: var(--branco);
  filter: brightness(1.07);
  box-shadow: 0 2px 0 #16203A, 0 10px 24px rgba(22, 32, 58, 0.38);
}
.zap svg { flex-shrink: 0; }

.zap.pequeno { padding: 11px 19px; font-size: 15px; gap: 9px; }
.zap.medio { padding: 14px 24px; font-size: 16px; gap: 10px; }

/* Em fundo escuro o botão inverte-se: o verde do WhatsApp sobre
   turquesa fica ilegível, por isso o fundo passa a branco. */
.zap.invertido {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 52%, #DDE7F5 100%);
  box-shadow: 0 2px 0 #9FB2CE, 0 8px 20px rgba(0, 0, 0, 0.34);
  color: var(--tinta);
  padding: 16px 28px;
  font-size: 16.5px;
}
.zap.invertido:hover { color: var(--tinta); }

/* Botão secundário sobre fundo escuro */
.botao-contorno {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--branco);
  padding: 16px 26px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 52%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.26);
}
.botao-contorno:hover { color: var(--branco); filter: brightness(1.12); }

/* Ligação com seta */
.seta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 500;
}
.seta.peq { font-size: 16px; gap: 8px; }

.accoes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- 8. Cartões e acordeões ---------- */

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 30px;
}
.cartao:hover { border-color: var(--ceu); }
.cartao-titulo { font-size: 20px; font-weight: 500; color: var(--tinta); margin-bottom: 11px; }
.cartao-texto { font-size: var(--t-corpo-peq); line-height: 1.64; color: var(--texto-2); }

/* Espaço reservado a fotografia, enquanto ela não entra */
.foto-por-vir {
  width: 100%;
  min-height: 420px;
  border: 1px dashed var(--ceu);
  border-radius: 4px;
  background: var(--branco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.foto-por-vir.cinza { background: var(--wash); min-height: 460px; }
.foto-por-vir .rotulo {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceu-suave);
}
.foto-por-vir .dica {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-4);
  max-width: 30ch;
}

/* Acordeão das situações — <details> nativo, sem JavaScript.
   O atributo name faz com que abrir um feche o anterior. */
.situacoes { display: flex; flex-direction: column; gap: 12px; }

.situacao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(22, 32, 58, 0.06);
}

.situacao > summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 6px 14px rgba(22, 32, 58, 0.16);
  transition: box-shadow 0.15s;
}
.situacao > summary::-webkit-details-marker { display: none; }
.situacao > summary:hover { filter: brightness(1.07); }
.situacao[open] > summary { box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3); }

/* Cada situação tem a sua cor. Ficam aqui, e não inline no HTML,
   porque um estilo inline vence sempre uma media query — foi essa
   a razão de as 14 páginas não terem onde receber o responsivo. */
/* ⚠️ A cor de cada situacao passa tambem a variavel, porque deixou de servir so
   os acordeoes da Inicio: as paginas de situacao precisam dela no selo do heroi.
   As regras `> summary` abaixo ficam como estavam -- estao no ar e funcionam. */
.situacao--obstrucao { --cor-situacao: #324D7D; }
.situacao--hernia { --cor-situacao: #4A7EDA; }
.situacao--estenose { --cor-situacao: #7FAEEF; }
.situacao--pos-cirurgico { --cor-situacao: #19BBC0; }
.selo-heroi svg { color: var(--cor-situacao, var(--turquesa)); }

.situacao--obstrucao > summary { background: linear-gradient(180deg, #40639F 0%, #324D7D 52%, #24395F 100%); }
.situacao--obstrucao .sinal svg { color: #324D7D; }

.situacao--hernia > summary { background: linear-gradient(180deg, #5E8DE5 0%, #4A7EDA 52%, #3159A8 100%); }
.situacao--hernia .sinal svg { color: #4A7EDA; }

.situacao--estenose > summary { background: linear-gradient(180deg, #7CA9E9 0%, #6294DE 52%, #4470B4 100%); }
.situacao--estenose .sinal svg { color: #7FAEEF; }

.situacao--pos-cirurgico > summary { background: linear-gradient(180deg, #1AC4C9 0%, #12A5A9 52%, #0B7B7E 100%); }
.situacao--pos-cirurgico .sinal svg { color: #19BBC0; }

.situacao-numero {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
  width: 26px;
  flex-shrink: 0;
}
/* Afinacao 5 das 23 (pedido dele a 07-09): "mais grossos e maiores".
   ⚠️ O peso 600 e real, nao sintetizado: a Roboto servida pelo site e variavel
   de 300 a 700 (ver os @font-face no topo). Num peso fora do intervalo o
   browser engorda a letra por conta propria, e nota-se. */
.situacao-titulo { flex-grow: 1; font-size: clamp(18.5px, 2.1vw, 23px); font-weight: 600; color: var(--branco); }
.situacao-rotulo { font-size: 15px; color: rgba(255, 255, 255, 0.82); }
.situacao-seta { flex-shrink: 0; transition: transform 0.15s; }
.situacao[open] .situacao-seta { transform: rotate(180deg); }

.situacao-corpo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding: 8px 32px 34px 32px;
  background: var(--branco);
}
.situacao-destaque {
  margin: 20px 0 0 0;
  font-size: var(--t-corpo);
  line-height: 1.58;
  color: var(--tinta);
  font-weight: 500;
}
.situacao-texto {
  margin: 20px 0 0 0;
  font-size: var(--t-corpo-peq);
  line-height: 1.7;
  color: var(--texto-2);
}
.situacao-destaque + .situacao-texto { margin-top: 13px; }

.sinais-titulo {
  margin-top: 20px;
  margin-bottom: 12px;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-5);
}
.sinais { display: flex; flex-direction: column; gap: 9px; }
.sinal { display: flex; align-items: flex-start; gap: 11px; }
.sinal svg { margin-top: 4px; flex-shrink: 0; }
.sinal span { font-size: 16px; line-height: 1.5; color: var(--texto-2); }

/* Acordeão das perguntas frequentes */
.perguntas { display: flex; flex-direction: column; }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta > summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 8px;
  cursor: pointer;
  list-style: none;
}
.pergunta > summary::-webkit-details-marker { display: none; }
.pergunta > summary:hover { filter: brightness(1.07); }
.pergunta-texto { flex-grow: 1; font-size: clamp(17px, 1.6vw, 18.5px); color: var(--tinta); }
.pergunta-seta { flex-shrink: 0; transition: transform 0.15s; }
.pergunta[open] .pergunta-seta { transform: rotate(180deg); }
.pergunta-resposta {
  margin: 0 8px 24px 8px;
  font-size: var(--t-corpo-peq);
  line-height: 1.7;
  color: var(--texto-2);
  max-width: 66ch;
}

/* ---------- 9. Blocos próprios da Início ---------- */

/* Símbolo de quatro blocos que abre o herói */
.selo-heroi { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }

/* O número grande do estudo */
.numero-grande {
  font-size: var(--t-numero);
  line-height: 1;
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -0.03em;
}
.numero-legenda {
  margin-top: 14px;
  font-size: clamp(16.5px, 1.55vw, 18px);
  line-height: 1.55;
  color: var(--texto-2);
  max-width: 30ch;
}
.numero-legenda strong { font-weight: 500; color: var(--tinta); }

/* Caixa dos sinais de alarme */
.alarme {
  border: 2px solid var(--alarme-linha);
  border-radius: 6px;
  background: var(--alarme-fundo);
  padding: clamp(28px, 3.6vw, 48px);
  box-shadow: 0 4px 22px rgba(180, 83, 9, 0.07);
}
.alarme-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}
.alarme-titulo svg { flex-shrink: 0; }
.alarme-titulo span {
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 500;
  color: var(--tinta);
  text-align: center;
  line-height: 1.25;
}
.alarme-intro {
  margin: 0 auto;
  font-size: clamp(16.5px, 1.5vw, 18px);
  line-height: 1.66;
  color: var(--alarme-texto);
  max-width: 76ch;
  text-align: center;
}
.alarme-intro strong { font-weight: 700; color: var(--tinta); }

.alarme-grupo {
  background: var(--branco);
  border: 1px solid var(--alarme-linha-2);
  border-radius: 5px;
  padding: 26px 26px 28px 26px;
}
.alarme-grupo-nome {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alarme);
  margin-bottom: 6px;
}
.alarme-grupo-clinico {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--alarme-texto-3);
  margin-bottom: 15px;
}
.alarme-itens { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.alarme-item { display: flex; align-items: flex-start; gap: 11px; }
.alarme-ponto {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--alarme);
  margin-top: 8px;
  flex-shrink: 0;
}
.alarme-item span { font-size: 16px; line-height: 1.56; color: var(--alarme-texto-2); }

.alarme-remate {
  margin-top: 38px;
  background: var(--fundo-escuro);
  border-radius: 5px;
  padding: clamp(24px, 2.8vw, 36px);
}
.alarme-remate-titulo {
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 500;
  color: var(--branco);
  margin-bottom: 14px;
  text-align: center;
}
.alarme-remate p {
  margin: 0 auto 14px auto;
  font-size: var(--t-corpo-peq);
  line-height: 1.68;
  color: var(--texto-claro);
  max-width: 82ch;
  text-align: center;
}
.alarme-remate p:last-child { margin-bottom: 0; color: var(--branco); font-weight: 500; }
.alarme-remate strong { font-weight: 500; color: var(--branco); }

/* Fases de "Como marcar" */
.fase { border-top: 2px solid var(--turquesa); padding-top: 22px; }
.fase-n {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ceu);
  margin-bottom: 12px;
}
.fase-titulo { font-size: clamp(18px, 1.9vw, 21px); font-weight: 500; margin-bottom: 12px; color: var(--branco); }
.fase-texto { font-size: var(--t-corpo-peq); line-height: 1.64; color: var(--texto-claro); }

/* Grelha do Instagram */
.instagram { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.post {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  cursor: pointer;
}
.post:hover { opacity: 0.82; }
.post span { font-size: 13.5px; line-height: 1.4; color: var(--branco); font-weight: 500; }

.cabecalho-largo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* Faixa da prova social */
.prova {
  padding: clamp(36px, 4.2vw, 54px) var(--pad-lado);
  background: var(--branco);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.prova-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  text-align: center;
}
.prova-nota { display: flex; align-items: center; gap: 14px; }
.prova-valor {
  font-size: clamp(34px, 3.4vw, 42px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--tinta);
  line-height: 1;
}
.prova-estrelas { display: flex; gap: 3px; }
.prova-estrelas svg { display: block; }
.prova-detalhe { text-align: left; }
.prova-detalhe .quantas { font-size: 17px; line-height: 1.5; color: var(--texto-2); }
.prova-detalhe .quando {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-4);
  margin-top: 4px;
}
.prova-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--azul);
  border-bottom: 1px solid var(--ceu);
  padding-bottom: 3px;
}

/* Remate final */
.remate { max-width: 60ch; margin: 0 auto; }
.remate .h2 { margin: 0 0 20px 0; line-height: 1.2; letter-spacing: -0.015em; }
.remate p { margin: 0 0 34px 0; font-size: clamp(16.5px, 1.5vw, 18px); line-height: 1.65; color: var(--texto-2); }
.remate .depois { margin-top: 16px; margin-bottom: 0; font-size: 15px; color: var(--texto-3); }

.aviso-curto { font-size: 15px; line-height: 1.5; color: var(--texto-3); max-width: 26ch; }

.remate-linha {
  margin-top: 30px;
  font-size: clamp(16.5px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--tinta);
  font-weight: 500;
  text-align: center;
}

/* ---------- 10. Responsivo ---------- */

/* Tablet — a grelha de 12 aguenta metades, mas não terços. */
/* ---------- 12. Página "Sobre mim" ---------- */

/* Os quatro princípios, sobre fundo navy. Quatro colunas em ecrã largo,
   duas no tablet, uma no telemóvel — ver as media queries no fim. */
.principios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.principio { border-top: 2px solid var(--turquesa); padding-top: 22px; }
.principio-titulo {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--branco);
}
.principio-texto {
  font-size: var(--t-corpo-peq);
  line-height: 1.64;
  color: var(--texto-claro);
}

/* A linha do tempo do percurso. O fio liga os pontos; o último marco
   não o leva, senão a linha fica pendurada no vazio. */
.percurso { display: flex; flex-direction: column; }
.marco { display: flex; gap: 26px; padding-bottom: 30px; }
.marco:last-child { padding-bottom: 0; }
.marco-eixo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  flex-shrink: 0;
}
.marco-ponto {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: var(--turquesa);
  margin-top: 6px;
  flex-shrink: 0;
}
.marco-fio {
  width: 2px;
  flex-grow: 1;
  background: var(--linha);
  min-height: 40px;
  margin-top: 8px;
}
.marco:last-child .marco-fio { display: none; }
.marco-tempo {
  font-family: 'Roboto Condensed', Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ceu);
  margin-bottom: 7px;
}
.marco-titulo {
  font-size: 20px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 8px;
}
.marco-texto {
  font-size: var(--t-corpo-peq);
  line-height: 1.66;
  color: var(--texto-2);
  max-width: 60ch;
}

/* O bloco de notas de honestidade — letra miúda, mas presente. */
.bloco-nota {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  max-width: 82ch;
}
.bloco-nota .nota p { margin: 0 0 13px 0; }
.bloco-nota .nota p:last-child { margin-bottom: 0; }

/* Cartão de identificação profissional. */
.ficha {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 32px;
}
.ficha-dados {
  font-size: var(--t-corpo-peq);
  line-height: 2;
  color: var(--texto-2);
}
.ficha-dados strong { font-weight: 500; color: var(--tinta); }
.ficha-accao {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linha-suave);
}
.ficha-accao .zap { justify-content: center; width: 100%; }

@media (max-width: 1024px) {
  .c4 { grid-column: span 6; }
  .instagram { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h1 { max-width: 20ch; }

  /* Quatro princípios numa linha ficam com 87 px cada num tablet. */
  .principios { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A navegação já não cabe folgada ao lado da marca. */
  .cab-nav { gap: 18px; }
  .nav-link { font-size: 14px; }
}

/* Telemóvel — o ponto onde o cabeçalho partia dez das catorze páginas.
   A barra de navegação mede 479 px numa linha que não quebra; abaixo
   deste ponto passa a menu, e as grelhas de 12 colunas passam a uma. */
@media (max-width: 860px) {
  .menu-botao { display: flex; }

  .cab { flex-wrap: wrap; gap: 16px; }

  .cab-nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 8px;
  }
  .menu-estado:checked ~ .cab .cab-nav { display: flex; }

  .cab-nav .nav-link {
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--linha);
  }
  .cab-nav .nav-link[aria-current="page"] { border-bottom-color: var(--turquesa); }
  /* ⚠️ A MARGEM VAI NO ARO, NÃO NO BOTÃO DENTRO DELE. Reparo dele a 09-09: o aro
     do botão do menu aparecia desconfigurado. A causa, medida: esta regra dava
     `margin-top: 16px` ao `.zap`, e o `.zap` está DENTRO do `.aro` desde 07-09 —
     a margem ficava a empurrar o botão para baixo por dentro do invólucro, e o
     aro esticava para a acomodar. Media 73 px de altura para um botão de 49,
     quando a diferença devia ser os 8 px do padding: sobravam 16 px de metal
     vazio por cima do botão.

     A regra é anterior ao aro e não estava errada quando foi escrita. Quem
     acrescenta um invólucro tem de ir ver as margens do que passou a estar lá
     dentro. */
  .cab-nav .aro { margin-top: 16px; }
  /* 48 px de alvo: abaixo de 44 px o dedo falha o botão. */
  .cab-nav .zap {
    margin-top: 0;
    justify-content: center;
    padding: 15px 24px;
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  /* Uma coluna. É isto que desfaz os blocos de 87 px com texto dentro. */
  .grelha,
  .situacao-corpo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .c4, .c5, .c6, .c7, .c8 { grid-column: auto; }

  .situacao-corpo { gap: 4px; padding: 8px 20px 28px 20px; }

  .instagram { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* A tira do topo tem duas frases que não cabem lado a lado. */
  .tira {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 12px;
    line-height: 1.45;
  }

  .situacao > summary { padding: 18px 20px; gap: 14px; }
  /* O rótulo lateral é contexto, não conteúdo: sai antes do título encolher. */
  .situacao-rotulo { display: none; }

  .alarme-titulo { gap: 12px; }
  .alarme-titulo svg { width: 24px; height: 24px; }

  .cabecalho-largo { gap: 20px; align-items: flex-start; }

  .prova-linha { gap: 18px; }

  .accoes { gap: 16px; }
  .aviso-curto { max-width: none; }

  .principios { grid-template-columns: 1fr; }
  .marco { gap: 18px; }

  /* ⚠️ A .nota-fonte NAO entra nesta lista: e o post-it, e tem de ficar
     pequeno. Estica-lo no telemovel desfazia o efeito todo. */
  .h1, .lead, .corpo, .corpo.estreito, .numero-legenda,
  .pergunta-resposta, .marco-texto { max-width: none; }

  .zap { padding: 15px 24px; font-size: 16px; }
}

/* Ecrãs muito estreitos — 375 px e abaixo. */
@media (max-width: 400px) {
  .alarme-titulo { flex-direction: column; gap: 10px; }
  .rodape-fundo { gap: 18px; }
  .rodape-legais { gap: 14px 20px; }
  .prova-nota { gap: 10px; }
  .prova-estrelas svg { width: 18px; height: 18px; }
}

/* Quem pediu menos movimento não leva transições. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Impressão — sem fundos pesados, sem navegação. */
@media print {
  .tira, .cab, .rodape, .zap, .botao-contorno, .menu-botao { display: none !important; }
  .faixa { padding: 12px 0; background: none !important; }
  body { color: #000; }
}

/* ---------- 13. Fotografias ---------- */
/* O marcador .foto-por-vir fica no CSS enquanto houver paginas por converter:
   as onze que faltam ainda o usam. Sai quando a ultima o deixar de usar. */

.foto {
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wash);
}

/* object-fit: cover com o enquadramento puxado para cima — nestes retratos o
   rosto esta no terco superior, e um corte centrado corta-lhe a testa. */
.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.foto.alta { min-height: 420px; }
.foto.mais-alta { min-height: 460px; }

/* O selo oficial do Livro de Reclamacoes. Largura fixa: o ficheiro tem 140 px
   de origem e nao se redesenha nem se estica — as regras da Direcao-Geral do
   Consumidor pedem que fique legivel e sem alteracoes. */
.selo-lre { display: inline-block; margin-top: 14px; }
.selo-lre img { display: block; width: 140px; height: auto; }

/* ---------- 14. Movimento ---------- */
/* Aprovado por ele a 2026-09-07, sobre a demonstracao em _animacoes.html.
   A regra que governa tudo o que esta aqui: O ESTADO FINAL E O ESTADO POR
   DEFEITO. Sem JavaScript, sem suporte, ou com o movimento desligado no
   sistema, a pagina aparece inteira. Nada disto e preciso para a ler.

   O motor so arranca com a classe .mv no <html>, que o movimento.js poe na
   primeira linha. Assim uma pagina cujo JavaScript nao corra nunca fica com
   conteudo invisivel a espera de um observador que nao existe. */

/* 1 — entrada de seccao */
.mv [data-anim] {
  transition: opacity calc(var(--vel) * 0.62s) cubic-bezier(.22, .61, .36, 1),
              transform calc(var(--vel) * 0.62s) cubic-bezier(.22, .61, .36, 1);
}
.mv [data-anim="subir"]:not(.entrou) { opacity: 0; transform: translateY(20px); }

/* 2 — um cartao de cada vez. Quem e observado sao os filhos, um a um: e isso
   que faz o cartao aparecer quando ELE chega, e nao quando chega o conjunto.
   No telemovel, empilhados, vai aparecendo um de cada vez ao rolar; no desktop
   chegam quase juntos, e o atraso por posicao encadeia-os da esquerda para a
   direita. Pedido dele a 07-09 as 03:37. */
.mv [data-cada] > * {
  transition: opacity calc(var(--vel) * 0.58s) cubic-bezier(.22, .61, .36, 1),
              transform calc(var(--vel) * 0.58s) cubic-bezier(.22, .61, .36, 1);
}
.mv [data-cada] > :not(.entrou) { opacity: 0; transform: translateY(24px); }
.mv [data-cada] > :nth-child(2) { transition-delay: calc(var(--vel) * 0.07s); }
.mv [data-cada] > :nth-child(3) { transition-delay: calc(var(--vel) * 0.14s); }
.mv [data-cada] > :nth-child(4) { transition-delay: calc(var(--vel) * 0.21s); }
.mv [data-cada] > :nth-child(5) { transition-delay: calc(var(--vel) * 0.28s); }

/* 3 — a linha do tempo a desenhar-se. O unico movimento que conta alguma
   coisa: o percurso desenha-se pela ordem em que aconteceu. */
.mv [data-anim="percurso"] .marco-fio { transform-origin: top; transition: transform calc(var(--vel) * 0.5s) ease-out; }
.mv [data-anim="percurso"] .marco-ponto { transition: transform calc(var(--vel) * 0.38s) cubic-bezier(.34, 1.56, .64, 1); }
.mv [data-anim="percurso"]:not(.entrou) .marco-fio { transform: scaleY(0); }
.mv [data-anim="percurso"]:not(.entrou) .marco-ponto { transform: scale(0); }
.mv [data-anim="percurso"] .marco:nth-child(1) .marco-ponto { transition-delay: calc(var(--vel) * 0.05s); }
.mv [data-anim="percurso"] .marco:nth-child(1) .marco-fio { transition-delay: calc(var(--vel) * 0.20s); }
.mv [data-anim="percurso"] .marco:nth-child(2) .marco-ponto { transition-delay: calc(var(--vel) * 0.55s); }
.mv [data-anim="percurso"] .marco:nth-child(2) .marco-fio { transition-delay: calc(var(--vel) * 0.70s); }
.mv [data-anim="percurso"] .marco:nth-child(3) .marco-ponto { transition-delay: calc(var(--vel) * 1.05s); }
.mv [data-anim="percurso"] .marco:nth-child(3) .marco-fio { transition-delay: calc(var(--vel) * 1.20s); }
.mv [data-anim="percurso"] .marco:nth-child(4) .marco-ponto { transition-delay: calc(var(--vel) * 1.55s); }

/* 5 — a fotografia a revelar-se por baixo de uma cortina. So nas grandes: numa
   foto pequena o efeito nao se le e so atrasa. */
.mv [data-anim="foto"] img {
  clip-path: inset(0 0 0 0);
  transition: transform calc(var(--vel) * 1.1s) cubic-bezier(.22, .61, .36, 1),
              clip-path calc(var(--vel) * 0.9s) cubic-bezier(.22, .61, .36, 1);
}
.mv [data-anim="foto"]:not(.entrou) img { transform: scale(1.06); clip-path: inset(0 0 100% 0); }

/* 6 e 7 — o que responde ao rato. Sem JavaScript, e so em ecras com rato:
   no telemovel nao existe, e nao deve. */
.situacao > summary { transition: box-shadow .15s, filter .2s ease, transform .24s ease; }
@media (hover: hover) {
  .situacao:not([open]) > summary:hover { transform: translateY(-2px); }
}

.zap { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.zap svg { transition: transform .22s ease; }
@media (hover: hover) {
  /* ⚠️ A sombra passa a verde no hover — o verde do WhatsApp, nao o azul da
     marca. E o unico sitio do site onde uma cor de fora entra, e entra porque
     diz para onde o botao leva. Ele viu-a na demonstracao e pediu-a. */
  .zap:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 #16203A, 0 10px 26px rgba(37, 211, 102, .34);
  }
  .zap.invertido:hover {
    box-shadow: 0 2px 0 #9FB2CE, 0 10px 26px rgba(37, 211, 102, .40);
  }
  .zap:hover svg { transform: scale(1.09) rotate(-4deg); }
}

/* ⚠️ Quem pede menos movimento no sistema nao recebe nenhum. Nao e um extra:
   para quem tem enxaqueca vestibular, movimento a mais e sintoma. */
@media (prefers-reduced-motion: reduce) {
  .mv [data-anim="subir"]:not(.entrou),
  .mv [data-cada] > :not(.entrou),
  .mv [data-anim="percurso"]:not(.entrou) .marco-fio,
  .mv [data-anim="percurso"]:not(.entrou) .marco-ponto,
  .mv [data-anim="foto"]:not(.entrou) img {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .mv [data-anim], .mv [data-cada] > *, .mv [data-anim="foto"] img,
  .mv [data-anim="percurso"] *, .zap, .zap svg, .situacao > summary {
    transition: none !important;
  }
  .zap:hover, .situacao:not([open]) > summary:hover { transform: none; }
}

/* ---------- 15. A coluna em fundo ---------- */
/* Hipotese C, escolhida por ele a 2026-09-07 as 04:10 entre tres. Faixa
   lateral com o recorte do modelo de coluna, tingida de azul e esbatida por
   uma mascara do lado do texto. E FUNDO E NAO CONTEUDO: nao intercepta o rato,
   nao entra na arvore de acessibilidade, e o texto nao perde contraste.
   So em faixas escuras — sobre fundo claro a 16% ficaria suja. */
/* ⚠️ overflow: clip e nao hidden. O hidden cria um contexto de scroll e
   QUEBRA o position: sticky dos filhos — foi o que impediu as fases de
   empilharem, e so se percebeu com as duas coisas na mesma faixa. O clip
   corta igual e nao cria contexto nenhum. */
.faixa.com-coluna { position: relative; overflow: clip; }
.faixa.com-coluna > * { position: relative; z-index: 1; }
.faixa.com-coluna::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 34%;
  background: url("img/coluna-fundo.webp") center / cover no-repeat;
  opacity: .16;
  filter: sepia(1) hue-rotate(175deg) saturate(2.2);
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  pointer-events: none;
}

/* No telemovel a faixa e estreita e a imagem passaria por tras do texto todo.
   Fica mais larga e muito mais apagada — presenca, nao ilustracao. */
@media (max-width: 700px) {
  .faixa.com-coluna::after { width: 62%; opacity: .09; }
}

/* ---------- 16. Cartoes que se depositam uns sobre os outros ---------- */
/* Pedido dele a 2026-09-07, aprovado a ver, e alargado por ele ao "Depois da
   consulta". Os cartoes sao irmaos diretos, todos sticky, com um top que sobe
   22 px de cada vez — e essa folga que deixa ver o titulo do cartao anterior
   por baixo, em vez de parecer um cartao so a mudar de texto.

   ⚠️ Zero JavaScript: e position: sticky e mais nada. Onde nao houver suporte
   os cartoes ficam empilhados e leem-se por ordem — nunca desaparece nada.

   ⚠️ E NENHUM ancestral pode ter overflow: hidden, ou o sticky morre em
   silencio. Ver a nota da .faixa.com-coluna, na seccao 15. */
/* ⚠️ O cartao encolhe ate ao texto, e nao o contrario. Reparo dele a 07-09:
   no computador o texto nao chegava ao fim do cartao. A tentacao era espalha-lo
   ate a borda — mas a 1153 px isso da cerca de 140 caracteres por linha, contra
   os 66 do ideal e os 90 do limite. Acima dos 90 o olho perde-se a saltar de
   linha, e foi esse o defeito que a conversao da Inicio existiu para corrigir.

   Fica alinhado a esquerda de proposito: deixa a coluna de fundo respirar do
   lado direito, em vez de a tapar. */
.pilha { display: flex; flex-direction: column; max-width: 820px; }

.pilha > * {
  position: sticky;
  margin-bottom: 24px;
  box-shadow: 0 -6px 24px rgba(22, 32, 58, .12);
}
.pilha > :nth-child(1) { top: 30px; }
.pilha > :nth-child(2) { top: 52px; }
.pilha > :nth-child(3) { top: 74px; }
.pilha > :nth-child(4) { top: 96px; }
.pilha > :nth-child(5) { top: 118px; }
.pilha > :last-child { margin-bottom: 0; }

/* As fases, em faixa escura, ganham corpo de cartao — sem fundo opaco via-se
   o cartao de baixo atraves do de cima. */
.pilha .fase {
  background: linear-gradient(180deg, #223357 0%, #1B2A47 100%);
  border: 1px solid #33456B;
  border-top: 2px solid var(--turquesa);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .34);
}

/* ⚠️ 80ch e nao mais: e a mesma medida que a .corpo.largo ja usa no resto do
   site, esta dentro do limite legivel de 90, e faz o texto acabar junto a
   borda do cartao em vez de deixar um vazio a direita — que foi o reparo dele.
   Acima dos 90 o olho perde-se a saltar do fim de uma linha para o inicio da
   seguinte, e ai o cartao ficava cheio a custa de se ler pior. */
.pilha .fase-texto, .pilha .cartao-texto { max-width: 80ch; }

/* ---------- 17. O numero a contar ---------- */
/* ⚠️ O valor final esta escrito no HTML e e ele que se le se o JavaScript nao
   correr. O script so o substitui DEPOIS de comecar a contar — nunca ha um
   momento em que o numero esteja em branco ou a zero sem razao. */
.numero-grande [data-contar] { font-variant-numeric: tabular-nums; }

/* ⚠️ O % deixa de ter o tamanho do numero e passa a ficar mais pequeno e
   assente na base — pedido dele a 15:40. E o que liberta espaco para o numero
   crescer sem transbordar: com o simbolo do mesmo tamanho, cada ponto de corpo
   que o numero ganhava custava tres de largura. */
.numero-grande { display: inline-flex; align-items: flex-end; line-height: .92; }
.numero-grande .pct {
  font-size: 0.44em;
  font-weight: 400;
  margin-left: 0.03em;
  padding-bottom: 0.10em;
  color: var(--azul);
}

/* ---------- 18. Botoes em capsula, com aro de luz ---------- */
/* Decisao dele a 2026-09-07 as 14:47, depois de ver e aprovar na demonstracao:
   TODOS os botoes passam a capsula com aro. Nasceu de um botao que ele viu no
   21st.dev; o efeito de la e um gradiente conico a rodar — CSS puro, sem
   WebGL. O estilo de la (preto e cromado, texto cinzento) ficou de fora: nao e
   a linguagem deste site e o contraste era mau.

   ⚠️ DUAS REGRAS DESTE SITE FICAM CONTRARIADAS, e ficam registadas como
   decisao explicita dele e nao como deslize:
     1. "nada a repetir-se em ciclo" — o aro roda sozinho, sempre.
     2. os cantos de 3 px — os botoes passam a capsula.

   COMO FUNCIONA: o involucro tem 2 px de padding e um gradiente prateado por
   fundo; e esse padding que se ve como aro. Por cima corre um gradiente conico
   em screen, que e o reflexo a andar. O botao vai dentro e tapa o centro.

   ⚠️ O aro TEM de ser um involucro e nao um ::before do proprio botao: dentro
   de um elemento, um ::before com z-index negativo fica atras do texto mas a
   FRENTE do fundo, e pintava por cima do botao. */
/* ⚠️ NAO se anima o angulo do gradiente conico, e a razao e de desempenho:
   animar --ang obriga o browser a REPINTAR o gradiente inteiro a cada
   fotograma, e num telemovel com seis aros ao mesmo tempo isso faz a pagina
   arrastar — apanhado por ele a 14:54, no telemovel dele.

   Em vez disso, o gradiente e FIXO e o que roda e um quadrado por baixo, com
   transform: rotate. Uma rotacao e feita na placa grafica e nao repinta nada.
   O resultado no ecra e o mesmo; o custo nao e.

   Efeito lateral bom: deixa de precisar de @property, que nem todos os
   browsers tem. */
.aro {
  position: relative;
  display: inline-flex;
  /* 4 px e nao 2: a 2 px o aro lia-se como contorno e a animacao passava
     despercebida. Reparo dele a 14:48 — "pouco se percebe da animacao a
     decorrer". Ao dobro, o reflexo tem onde correr. */
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(175deg, #F2F6FC 0%, #A9BAD4 42%, #6E7F9B 52%, #DCE6F4 100%);
  /* Sombra curta e fraca: a 18 px de desfoque fazia um halo esbranquicado a
     volta do botao sobre os fundos claros, com ar de recorte mal feito. */
  box-shadow: 0 3px 10px rgba(22, 32, 58, .14);
}

/* O involucro corta o quadrado que roda la dentro. É overflow: clip e nao
   hidden — hidden quebraria position: sticky em qualquer descendente, e ja
   nos custou uma manha a descobrir isso noutra seccao. */
.aro { overflow: clip; }

.aro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    transparent 0deg, var(--turquesa) 34deg, #FFFFFF 58deg,
    var(--ceu) 82deg, transparent 128deg, transparent 360deg);
  mix-blend-mode: screen;
  animation: rodar-aro 5s linear infinite;
  will-change: transform;
}
@keyframes rodar-aro {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ⚠️ Um aro que ninguem esta a ver nao tem razao nenhuma para gastar bateria.
   O movimento.js poe .parado nos que saem do ecra. */
.aro.parado::before { animation-play-state: paused; }

.aro > * { position: relative; border-radius: 999px; }

/* ⚠️ O involucro tem de encolher ao botao. Sem isto, num contentor que estica
   os filhos — o menu do telemovel, por exemplo — o ARO estica e o botao fica
   la dentro com metade da largura, com ar de barra partida ao meio. Apanhado
   por ele no telemovel a 14:56. */
.aro { width: fit-content; max-width: 100%; align-self: flex-start; }
.aro > * { width: 100%; justify-content: center; }

@media (hover: hover) {
  .aro:hover::before { animation-duration: 2.4s; }
}

/* ⚠️ No telemovel os botoes ficam centrados — pedido dele a 07-09 as 21:38.
   No computador continuam alinhados a esquerda, com o texto: e a coluna de
   texto que manda ali. Num ecra estreito nao ha coluna nenhuma, e um botao
   encostado a esquerda com espaco vazio a direita le-se como desalinhamento.

   Precisa das duas linhas: `align-self` resolve dentro de um pai flex (que e
   como as .accoes estao), e `margin-inline` resolve quando o pai e um bloco
   normal — sem a segunda, os botoes fora de um flex nao se mexiam. */
@media (max-width: 700px) {
  /* ⚠️ E `display: flex` e nao so `margin-inline: auto`: o aro e inline-flex, e
     margens automaticas nao centram um elemento em linha — nao fazem nada.
     Dentro de um pai flex o `align-self` resolvia, mas os botoes que estao numa
     coluna da grelha (`.c4`, que e um bloco) ficavam encostados a esquerda com
     99 px de vazio a direita. Medido, nao suposto. */
  .aro { display: flex; align-self: center; margin-inline: auto; }
  .accoes { justify-content: center; }
  /* A caixa dos cookies e a excecao: la os dois botoes ja ocupam metade cada
     um, e centra-los encolhia-os ao texto. */
  .cookies-botoes .aro { align-self: stretch; margin-inline: 0; }
}

/* Uma cor por destino: o aro nao decora, DIZ para onde o botao leva. Quem ja
   usa o WhatsApp, o Instagram ou o Google reconhece as cores antes de ler. */
.aro.verde::before {
  background: conic-gradient(
    transparent 0deg, #25D366 34deg, #FFFFFF 58deg,
    #7BE8A6 82deg, transparent 128deg, transparent 360deg);
}
.aro.instagram::before {
  background: conic-gradient(
    transparent 0deg, #F58529 22deg, #DD2A7B 46deg, #FFFFFF 64deg,
    #8134AF 82deg, #515BD4 102deg, transparent 146deg, transparent 360deg);
}
.aro.google::before {
  background: conic-gradient(
    transparent 0deg, #4285F4 20deg, #EA4335 42deg, #FFFFFF 56deg,
    #FBBC05 70deg, #34A853 90deg, transparent 132deg, transparent 360deg);
}

/* Os botoes perdem os cantos de 3 px e passam a capsula. */
.zap, .zap.pequeno, .zap.medio, .zap.invertido, .botao-contorno { border-radius: 999px; }

/* ⚠️ O botao de contorno tinha fundo SEMI-TRANSPARENTE, de proposito: foi
   desenhado para deixar ver a faixa navy por tras. Com o aro atras dele, o que
   se via passou a ser o metal do aro — o botao ficava uma peca prateada com
   texto escuro por cima, ilegivel. Apanhado por ele no telemovel a 14:52.
   Dentro de um aro, o fundo passa a opaco, com os tons que a transparencia
   dava sobre a faixa navy. */
.aro > .botao-contorno {
  background: linear-gradient(180deg, #46639C 0%, #35507F 52%, #22344F 100%);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Ligacoes secundarias — Instagram e prova social. Azul intermedio da
   identidade com o mesmo degrade dos outros botoes, a pedido dele.
   ⚠️ O degrade nao foi inventado: e o mesmo que a situacao "Hernia discal" ja
   usa no acordeao, com o --azul da marca ao meio. */
.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5E8DE5 0%, #4A7EDA 52%, #3159A8 100%);
  box-shadow: 0 2px 0 #2A4C8F;
  color: var(--branco);
  font-size: 15.5px;
  font-weight: 500;
  transition: filter .22s ease, transform .22s ease;
}
@media (hover: hover) {
  .botao-secundario:hover { filter: brightness(1.07); color: var(--branco); transform: translateY(-2px); }
}

/* ⚠️ Quem pede menos movimento no sistema nao ve o aro a rodar. O aro fica —
   parado, com o reflexo num sitio so —, mas deixa de girar. Para quem tem
   enxaqueca vestibular, movimento a repetir e sintoma, e sao varios aros na
   mesma pagina. */
@media (prefers-reduced-motion: reduce) {
  .aro::before { animation: none; }
}

/* ---------- 19. O numero e a nota da fonte ---------- */
/* Dois pedidos dele a 2026-09-07 as 14:56, a ver a pagina no telemovel. */

/* ⚠️ So no telemovel. No computador o numero ja tem a sua coluna, e po-los
   lado a lado ali nao resolve nada. */
@media (max-width: 700px) {
  /* ⚠️ align-items: center e nao flex-start. Ele pediu que o numero ficasse
     "centralizado verticalmente com o texto" — e pediu tambem que tivesse a
     MESMA ALTURA do texto, o que nao e possivel: o texto tem 5 a 6 linhas
     (~150 px), e um numero com 150 px de altura ocuparia 290 dos 375 px do
     ecra, sem sobrar nada para o texto ao lado. Centrar da o mesmo efeito de
     equilibrio sem o impossivel. */
  .numero-bloco { display: flex; align-items: center; gap: 16px; }

  /* Ele pediu os dois maiores a 14:59, depois de ver. O numero ganha ainda uma
     sombra por tras — discreta, so para o levantar do fundo. */
  .numero-grande {
    font-size: 72px;
    flex-shrink: 0;
    line-height: .92;
    letter-spacing: -0.035em;
    text-shadow: 0 4px 14px rgba(50, 77, 125, .26);
  }
  .numero-legenda { margin-top: 0; font-size: 15px; line-height: 1.5; }
}

/* A nota da fonte, com ar de papel colado. Ideia dele, alargada por ele a
   2026-09-07 as 15:03: fica bem mais pequena, e ao CLIQUE abre e a ponta
   dobra-se.

   ⚠️ E um <details> e nao um div com JavaScript: abre e fecha de origem,
   responde ao teclado, e o texto da fonte esta sempre no HTML — quem tiver o
   JavaScript desligado, ou usar leitor de ecra, le-o na mesma. Num site de
   saude, a fonte de um numero nao pode depender de um script.

   ⚠️ E a unica peca informal do site, e resulta pelo que ELA e: uma nota a
   margem de quem foi verificar a fonte. Nao serve de precedente — o que a
   torna simpatica e ser a excepcao. */

/* permite animar a altura de auto para o conteudo; onde nao houver suporte a
   nota abre de uma vez, sem transicao */
:root { interpolate-size: allow-keywords; }

.nota-fonte {
  width: fit-content;
  max-width: 34ch;
  margin: 26px auto 0;
  padding: 0;
  border: 0;
  border-radius: 2px 2px 2px 2px;
  background: linear-gradient(180deg, #FDF8E7 0%, #F8F0D8 100%);
  box-shadow: 0 1px 2px rgba(22, 32, 58, .10), 0 6px 14px rgba(22, 32, 58, .10);
  transform: rotate(-2.6deg);
  color: #6B5F44;
  font-size: 12.5px;
  line-height: 1.58;
  transition: transform .3s ease, box-shadow .3s ease;
}

.nota-fonte > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: #4A4130;
}
.nota-fonte > summary::-webkit-details-marker { display: none; }

.nota-fonte > p {
  margin: 0;
  padding: 0 14px 13px;
  max-width: none;
}

/* ⚠️ A ponta dobrada, no canto INFERIOR DIREITO do papel — reparo dele a 15:40:
   estava no canto do titulo e nao se lia como dobra. Sao duas peças:
   o papel tem o canto CORTADO por clip-path, e a .dobra e o triangulo do
   avesso da folha, com sombra por dentro para dar o relevo. */
.nota-fonte {
  --dobra: 20px;
  clip-path: polygon(0 0, 100% 0,
                     100% calc(100% - var(--dobra)),
                     calc(100% - var(--dobra)) 100%,
                     0 100%);
}

.nota-fonte .dobra {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--dobra);
  height: var(--dobra);
  /* o avesso do papel: mais escuro em baixo, como se estivesse virado */
  background: linear-gradient(135deg, #F6EFD8 0%, #E2D3A8 46%, #C9B786 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: -2px -2px 5px rgba(74, 65, 48, .22);
  transition: width .34s cubic-bezier(.34, 1.4, .64, 1),
              height .34s cubic-bezier(.34, 1.4, .64, 1);
}

.nota-fonte > summary { position: relative; }

.nota-fonte[open] { transform: rotate(-1.2deg); box-shadow: 0 2px 3px rgba(22, 32, 58, .12), 0 12px 26px rgba(22, 32, 58, .14); }
.nota-fonte[open] { --dobra: 30px; }

@media (hover: hover) {
  .nota-fonte:hover { --dobra: 26px; }
  .nota-fonte[open]:hover { --dobra: 34px; }
}

/* ⚠️ Quem pede menos movimento no sistema abre e fecha sem transicao nenhuma.
   O conteudo e o mesmo; so nao ha animacao. */
@media (prefers-reduced-motion: reduce) {
  .nota-fonte, .nota-fonte .dobra { transition: none; }
}

@media (max-width: 700px) {
  .nota-fonte { transform: rotate(-2.2deg); }
  .nota-fonte[open] { transform: rotate(-1deg); }
}


/* ---------- 20. Contactos ---------- */

/* O mapa e o cartao da morada. Pedido dele a 14-09 as 17:26: "um quadrado que
   mostra o Maps com o local bem no centro". ⚠️ O mapa da Google so entra com
   consentimento (Aceito no banner, ou o botao "Mostrar o mapa") — e o cookies.js
   que o poe e tira. Ate la, o cartao ocupa o MESMO quadrado, para a pagina nao
   saltar quando o mapa entra. */
.mapa { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.mapa-cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: clamp(24px, 3vw, 32px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 5px;
}
/* ⚠️ Sem esta linha o `display: flex` de cima ganha ao `hidden` e o cartao nao sai. */
.mapa-cartao[hidden] { display: none; }

.mapa-cartao button.botao-secundario { border: 0; font-family: inherit; line-height: 1.2; cursor: pointer; }
.mapa-aviso { margin: 0; max-width: 36ch; }

.mapa-quadro {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--linha);
  border-radius: 5px;
  overflow: clip;
  background: var(--wash);
}
.mapa-quadro iframe { display: block; width: 100%; height: 100%; border: 0; }

.mapa-morada {
  font-size: var(--t-corpo-peq);
  line-height: 1.72;
  color: var(--texto-2);
}
.mapa-morada strong {
  display: block;
  font-size: 19px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 5px;
}

/* Titulo de cartao com icone ao lado */
.cartao-cab {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

/* ---------- 21. Como marcar ---------- */

/* As sete etapas. Nao se empilham como as fases da Inicio: sete cartoes
   colados uns sobre os outros deixariam o ultimo a 150 px do topo, e o
   conteudo destas e longo — o empilhamento serve conjuntos curtos. */
.etapas { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }

.etapa {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--turquesa);
  border-radius: 5px;
  padding: clamp(24px, 3vw, 34px);
}

.etapa-cab {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.etapa-n {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
}
.etapa-quando {
  font-size: 13.5px;
  color: var(--texto-4);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 3px 11px;
}

.etapa-titulo {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  color: var(--tinta);
  margin: 0 0 14px;
  max-width: 46ch;
}

.etapa-texto {
  font-size: var(--t-corpo-peq);
  line-height: 1.68;
  color: var(--texto-2);
  max-width: 80ch;
  margin: 0 0 12px;
}
.etapa-texto:last-child { margin-bottom: 0; }

/* O destaque de uma etapa e a frase que ele nao quer que passe despercebida:
   fica em caixa propria, com a marca turquesa. */
.etapa-destaque {
  margin: 18px 0 0;
  padding: 15px 18px;
  background: var(--wash);
  border-left: 2px solid var(--turquesa);
  border-radius: 0 3px 3px 0;
  font-size: var(--t-corpo-peq);
  line-height: 1.6;
  font-weight: 500;
  color: var(--tinta);
  max-width: 78ch;
}

/* ---------- Presencial ou online ---------- */
/* ⚠️ O artboard trocava de modo com JavaScript e estado. Aqui sao dois botoes
   de radio com :checked — o mesmo truque do menu do telemovel. Funciona com o
   JavaScript desligado, responde ao teclado de origem, e nao ha script nenhum
   para manter nem para o WordPress engolir. */
.modo-estado { position: absolute; opacity: 0; pointer-events: none; }

.modo-botoes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  margin-bottom: clamp(22px, 2.6vw, 30px);
}
.modo-botao {
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--texto-claro);
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.modo-botao:hover { color: var(--branco); }

/* o painel escondido nao e display:none — sai da arvore de acessibilidade
   com hidden implicito e volta quando o radio muda */
.modo-painel { display: none; }
/* ⚠️ Tres colunas fixas e nao auto-fit: os detalhes sao sempre tres, e o
   auto-fit abria quatro colunas num ecra largo, deixando uma vazia ao lado do
   terceiro cartao. */
.modo-estado#modo-presencial:checked ~ .modo-painel--presencial,
.modo-estado#modo-online:checked ~ .modo-painel--online {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 900px) {
  .modo-estado#modo-presencial:checked ~ .modo-painel--presencial,
  .modo-estado#modo-online:checked ~ .modo-painel--online {
    grid-template-columns: 1fr;
  }
}
.modo-estado#modo-presencial:checked ~ .modo-botoes label[for="modo-presencial"],
.modo-estado#modo-online:checked ~ .modo-botoes label[for="modo-online"] {
  background: var(--navy);
  color: var(--branco);
}

/* ⚠️ O foco tem de continuar visivel: o radio esta escondido, e sem isto quem
   navega por teclado nao ve onde esta. */
.modo-estado:focus-visible ~ .modo-botoes { outline: 2px solid var(--turquesa); outline-offset: 3px; }

/* A mensagem que o WhatsApp abre ja escrita */
.mensagem-exemplo {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--wash);
  border: 1px solid var(--linha);
  border-radius: 3px 12px 12px 12px;
  font-size: var(--t-corpo-peq);
  line-height: 1.6;
  color: var(--texto-2);
  font-style: italic;
}

/* ---------- 22. Informacao legal ---------- */
/* ⚠️ Os quatro separadores nao usam JavaScript. Sao quatro botoes de radio com
   :checked, como o seletor Presencial/Online da Como marcar e o menu do
   telemovel.

   ⚠️ E UMA CORRECAO A MIM PROPRIO, apanhada a medir: escrevi aqui que "o texto
   esta sempre no HTML, o Ctrl+F encontra-o e imprimir leva tudo". NAO E VERDADE
   com display: none — o texto escondido nao e encontrado pelo Ctrl+F, nao e
   lido por leitores de ecra, e nao sai na impressao. O teste mostrou-o: as
   palavras CNPD e Google Ads nao apareciam no texto visivel da pagina.

   Numa pagina legal isso importa. A vantagem sobre o JavaScript mantem-se
   (funciona sem script, responde ao teclado), mas o buraco tapa-se em baixo,
   na regra de impressao: AO IMPRIMIR, os quatro separadores aparecem todos. */
.abas { position: relative; }

.aba-estado { position: absolute; opacity: 0; pointer-events: none; }

.aba-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(26px, 3vw, 38px);
  padding-bottom: 2px;
}

.aba-botao {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--branco);
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-2);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.aba-botao:hover { border-color: var(--ceu); color: var(--tinta); }

.aba-painel { display: none; }

#aba-termos:checked       ~ .aba-painel--termos,
#aba-privacidade:checked  ~ .aba-painel--privacidade,
#aba-cookies:checked      ~ .aba-painel--cookies,
#aba-carta:checked        ~ .aba-painel--carta { display: block; }

#aba-termos:checked       ~ .aba-botoes label[for="aba-termos"],
#aba-privacidade:checked  ~ .aba-botoes label[for="aba-privacidade"],
#aba-cookies:checked      ~ .aba-botoes label[for="aba-cookies"],
#aba-carta:checked        ~ .aba-botoes label[for="aba-carta"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--branco);
}

/* ⚠️ O foco tem de continuar visivel: os radios estao escondidos, e sem isto
   quem navega por teclado nao ve onde esta. */
.aba-estado:focus-visible ~ .aba-botoes { outline: 2px solid var(--turquesa); outline-offset: 4px; }

.legal-cabeca {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

.legal-seccao { margin-bottom: clamp(24px, 3vw, 36px); }
.legal-seccao:last-child { margin-bottom: 0; }

.legal-titulo {
  font-size: clamp(17px, 1.8vw, 19.5px);
  font-weight: 500;
  color: var(--tinta);
  margin: 0 0 12px;
  max-width: 52ch;
}

.legal-texto {
  font-size: var(--t-corpo-peq);
  line-height: 1.72;
  color: var(--texto-2);
  max-width: 80ch;
  margin: 0 0 12px;
}
.legal-texto:last-child { margin-bottom: 0; }
.legal-texto strong { font-weight: 500; color: var(--tinta); }
.legal-texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }


/* ⚠️ Ao imprimir, a pagina legal mostra os QUATRO separadores. Quem imprime uma
   pagina legal quer o documento inteiro, nao o separador que por acaso estava
   aberto — e e a unica forma de o texto escondido chegar ao papel. */
@media print {
  .aba-painel { display: block !important; }
  .aba-botoes { display: none; }
  .legal-cabeca { break-after: avoid; }
  .legal-seccao { break-inside: avoid; }
}

/* ---------- 23. Banner de cookies ---------- */
/* Pedido dele a 2026-09-07 as 16:35: "quanto mais simples melhor, aceito/nao
   aceito, os essenciais sao obrigatorios". E e tambem o que a lei quer.

   ⚠️ O QUE ESTE BANNER FAZ E QUE OUTROS NAO FAZEM:
   1. RECUSAR E TAO FACIL COMO ACEITAR — os dois botoes lado a lado, do mesmo
      tamanho, no mesmo ecra. Um banner so com "Aceitar" nao recolhe
      consentimento valido: recolhe rendicao.
   2. Nada e carregado antes da escolha. O Google Ads so entra depois de
      "Aceitar" — nao antes, com um aviso por cima.
   3. Nao ha "ao continuar a navegar, aceita". Isso nao e consentimento.
   4. Da para mudar de ideias depois, pela ligacao do rodape.

   O banner da clinica onde ele atende falha os pontos 1 e 3. Serviu de
   contra-exemplo, nao de modelo. */

/* ⚠️ COMPACTA, e por uma razao que nao e de gosto: a caixa larga empurrava a
   pagina para tras dela e a pessoa perdia de vista o que estava a ler. Reparo
   dele a 07-09 as 21:37. Passou de 680 para 470 px, e o texto encolheu ao que
   e mesmo preciso — o resto esta na politica, que agora abre NOUTRO separador
   para a caixa nao desaparecer por baixo dela. */
.cookies {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2vw, 20px);
  transform: translateX(-50%);
  z-index: 90;
  width: min(470px, calc(100vw - 2 * clamp(12px, 3vw, 20px)));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 18px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(22, 32, 58, .26);
}

/* O titulo da a caixa uma cabeca, para nao ser um bloco de texto solto. */
.cookies-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -.01em;
}
.cookies-titulo svg { flex-shrink: 0; color: var(--azul); }

/* Entra a subir, uma vez. Sem animacao para quem pede menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  .cookies { animation: cookies-entra .5s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes cookies-entra {
    from { opacity: 0; transform: translate(-50%, 18px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
}

.cookies-texto {
  font-size: 14px;
  line-height: 1.58;
  color: var(--texto-2);
  margin: 0;
}
.cookies-texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* Os dois botoes ocupam a largura toda, meio a meio: e a forma mais simples de
   garantir que sao do mesmo tamanho ao pixel, e nao so parecidos. */
/* ⚠️ O `width: auto` e o `min-width: 0` nao sao decoracao: o .aro traz
   `width: fit-content`, e sem os anular cada botao encolhia ao seu texto — o
   "Nao aceito" ficava visivelmente maior do que o "Aceito". Dois botoes de
   tamanhos diferentes sao exatamente o que a regra dos dois iguais existe para
   impedir. Apanhado a 07-09 a medir a 375 px. */
.cookies-botoes { display: flex; gap: 10px; }
.cookies-botoes .aro {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  align-self: stretch;
  margin-inline: 0;
}

/* ⚠️ Os dois botoes TEM de ter o mesmo peso visual. Fazer o "Aceitar" grande e
   colorido e o "Recusar" um link cinzento e desenhar a resposta que se quer —
   e a lei ve isso como consentimento viciado. */
/* Pedido dele a 07-09 as 21:36: os botoes da caixa passam a ser os botoes da
   pagina — capsula dentro do aro, o mesmo degrade. O que muda e so o involucro
   de <button>, que traz border e font proprios do browser. */
.cookies-botao {
  font: inherit;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: 13px 18px;
  font-size: 15.5px;
}
/* ⚠️ OS DOIS BOTOES SAO IGUAIS, e nao e descuido de desenho: a primeira versao
   tinha o "Aceito" preenchido e o "Nao aceito" so com contorno, e um botao
   preenchido chama mais o dedo do que um contorno. E precisamente o desenho que
   a CNPD trata como consentimento viciado — a escolha aparenta ser livre mas
   esta encaminhada. Iguais, a escolha e mesmo da pessoa.

   Se um dia isto parecer "pouco bonito": e suposto. Um banner de cookies nao e
   sitio para persuadir. */
/* Lado a lado ate ao fim: a 375 px os dois cabem, e empilha-los punha um por
   cima do outro — o de cima ganha o dedo, que e o vies que se quer evitar. */
@media (max-width: 400px) {
  .cookies-botao { padding: 12px 10px; font-size: 15px; }
}

/* ---------- 24. Problemas de coluna ---------- */
/* Os quatro cartoes do indice. Cada um tem a cor da sua situacao, que e a mesma
   que o acordeao da Inicio usa — a cor e o que liga as duas paginas. */
.problemas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

@media (max-width: 860px) {
  .problemas { grid-template-columns: 1fr; }
}

.problema {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--cor-problema, var(--azul));
  border-radius: 5px;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
@media (hover: hover) {
  .problema:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(22, 32, 58, .10);
    border-color: var(--linha);
    border-top-color: var(--cor-problema, var(--azul));
  }
}

.problema-etiqueta {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-problema, var(--azul));
  margin-bottom: 12px;
}

.problema-titulo {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 500;
  color: var(--tinta);
  margin: 0 0 14px;
}

.problema-resumo {
  font-size: var(--t-corpo-peq);
  line-height: 1.68;
  color: var(--texto-2);
  margin: 0 0 20px;
}

/* A frase que ele ouve muitas vezes: e a que faz a pessoa reconhecer-se, e por
   isso destaca-se do resto em vez de ficar mais um paragrafo. */
.problema-frase {
  margin: 0 0 22px;
  padding: 15px 18px;
  background: var(--wash);
  border-left: 2px solid var(--cor-problema, var(--azul));
  border-radius: 0 3px 3px 0;
}
.problema-frase-rotulo {
  display: block;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-4);
  margin-bottom: 7px;
}
.problema-frase p {
  margin: 0;
  font-size: var(--t-corpo-peq);
  line-height: 1.6;
  font-style: italic;
  color: var(--tinta);
}

/* ⚠️ margin-top:auto encosta a ligacao ao fundo do cartao, para que os quatro
   fiquem alinhados entre si mesmo com resumos de tamanhos diferentes. */
.problema-link { margin-top: auto; color: var(--cor-problema, var(--azul)); }

/* ---------- 25. Páginas de situação (Obstrução, Estenose, Hérnia, Pós-cirúrgico) ---------- */
/* A primeira das quatro é a Obstrução mecânica, convertida a 2026-09-08.
   ⚠️ Quase tudo o que estas páginas precisam JÁ EXISTIA e foi reaproveitado —
   `.selo-heroi`, `.sinais`/`.sinal`, `.numero-grande`, `.fase`, `.pergunta`,
   e o bloco inteiro dos sinais de alarme, copiado da Início. Aqui em baixo está
   só o que não existia mesmo. */

/* As migalhas: onde estou, e como volto atrás. */
.migalhas {
  padding: 18px var(--pad-lado) 0;
  font-size: 14px;
  color: var(--texto-3);
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.migalhas a { color: var(--texto-3); }
.migalhas a:hover { color: var(--azul); }
.migalhas [aria-current] { color: var(--tinta); }

/* A nota "Ser honesto com os nomes" — um aparte dentro do texto corrido. */
.nota-lateral {
  margin-top: 26px;
  padding: 24px 28px;
  background: var(--wash);
  border-left: 3px solid var(--turquesa);
  border-radius: 0 4px 4px 0;
  max-width: 62ch;
}
.nota-lateral-titulo {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0F8E92;
  margin-bottom: 12px;
}
.nota-lateral p { margin: 0; font-size: var(--t-corpo); line-height: 1.66; color: var(--texto-2); }

.nota-cartao {
  margin: 22px 0 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linha-suave);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-3);
}
.nota-remate { margin: 16px 0 0 0; font-size: 15px; color: var(--texto-3); }

/* ⚠️ O lugar da ilustração que ainda não existe. Fica VISÍVEL de propósito: um
   espaço vazio passa despercebido e nunca se faz; este pede o desenho e diz
   qual. Sai da página no dia em que a ilustração entrar. */
.por-ilustrar {
  width: 100%;
  min-height: 380px;
  border: 1px dashed var(--ceu);
  border-radius: 4px;
  background: var(--wash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: var(--ceu);
}
.por-ilustrar-etiqueta {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7FA6D8;
}
.por-ilustrar-texto { font-size: 13.5px; line-height: 1.55; color: var(--texto-4); max-width: 32ch; }

/* O alternador agrava/alivia. ⚠️ É o mesmo truque do Presencial/Online da
   *Como marcar* — radios com :checked —, mas com IDs próprios: as regras de lá
   estão presas a `#modo-presencial`/`#modo-online`, e alargá-las arriscava
   partir uma página que já está no ar. */
.alterna-estado { position: absolute; opacity: 0; pointer-events: none; }
.alterna-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.alterna-botoes {
  display: flex;
  gap: 6px;
  background: var(--branco);
  padding: 5px;
  border: 1px solid var(--linha);
  border-radius: 3px;
}
.alterna-botao {
  padding: 11px 26px;
  border-radius: 2px;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--texto-3);
  transition: background 0.18s ease, color 0.18s ease;
}
.alterna-botao:hover { color: var(--tinta); }
.alterna-painel { display: none; }
.alterna-estado#quadro-agrava:checked ~ .alterna-painel--agrava,
.alterna-estado#quadro-alivia:checked ~ .alterna-painel--alivia { display: grid; }
.alterna-estado#quadro-agrava:checked ~ .alterna-cabeca label[for="quadro-agrava"],
.alterna-estado#quadro-alivia:checked ~ .alterna-cabeca label[for="quadro-alivia"] {
  background: var(--navy);
  color: var(--branco);
}
/* O foco tem de ver-se: sem rato, é isto que diz onde se está. */
.alterna-estado:focus-visible ~ .alterna-cabeca label[for="quadro-agrava"],
.alterna-estado:focus-visible ~ .alterna-cabeca label[for="quadro-alivia"] {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* As referências, no fim da página. Discretas, mas presentes: uma afirmação
   clínica sem fonte é uma opinião. */
.referencias { border-top: 1px solid var(--linha-suave); padding-top: 46px; padding-bottom: 46px; }
.referencias-titulo {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-4);
  margin-bottom: 16px;
}
.referencias-lista { display: flex; flex-direction: column; gap: 10px; max-width: 100ch; }
.referencias-lista p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--texto-4); }
.referencias-ressalva {
  margin: 20px 0 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha-suave);
  font-size: 13px;
  line-height: 1.62;
  color: var(--texto-4);
  max-width: 100ch;
}

@media (max-width: 700px) {
  .alterna-cabeca { align-items: stretch; }
  .alterna-botoes { width: 100%; }
  .alterna-botao { flex: 1; text-align: center; padding: 11px 12px; }
  .por-ilustrar { min-height: 240px; }
}

/* A ligação no fim de um cartão de problema. Só aparece nos que já têm página:
   dos quatro, a Obstrução mecânica é a primeira (08-09). */
.problema-ligacao { margin-top: 20px; }

/* ---------- 26. A Hérnia: duas dimensões ao mesmo tempo ---------- */
/* ⚠️ Esta página tem duas escolhas independentes — região (lombar/cervical) e
   agrava/alivia —, e o artboard resolvia-as com estado em JavaScript. Aqui são
   dois grupos de radios ao mesmo nível, e o `~` encadeia-se: cada painel exige
   que DOIS inputs anteriores estejam marcados. Quatro combinações, zero script.

   ⚠️ Por isso os quatro inputs vivem todos no topo do bloco e por esta ordem —
   `~` só alcança irmãos que venham DEPOIS. Mudar a ordem parte tudo em silêncio,
   sem erro nenhum a dizer porquê. */
.alterna-grupos { display: flex; gap: 10px; flex-wrap: wrap; }

.painel--lombar-agrava, .painel--lombar-alivia,
.painel--cervical-agrava, .painel--cervical-alivia { display: none; }

#reg2-lombar:checked ~ #quadro-agrava:checked ~ .painel--lombar-agrava,
#reg2-lombar:checked ~ #quadro-alivia:checked ~ .painel--lombar-alivia,
#reg2-cervical:checked ~ #quadro-agrava:checked ~ .painel--cervical-agrava,
#reg2-cervical:checked ~ #quadro-alivia:checked ~ .painel--cervical-alivia { display: grid; }

#reg2-lombar:checked ~ .alterna-cabeca label[for="reg2-lombar"],
#reg2-cervical:checked ~ .alterna-cabeca label[for="reg2-cervical"] {
  background: var(--navy);
  color: var(--branco);
}

/* A caixa de sinais do herói, que troca de região com o seu próprio par. */
.regiao { position: relative; }
.regiao-estado { position: absolute; opacity: 0; pointer-events: none; }
.regiao-botoes {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--wash);
  padding: 4px;
  border: 1px solid var(--linha);
  border-radius: 3px;
}
.regiao-botoes .alterna-botao { flex: 1; text-align: center; padding: 9px 10px; font-size: 14px; }
.regiao-painel { display: none; }
.regiao-estado#regiao-lombar:checked ~ .regiao-painel--lombar,
.regiao-estado#regiao-cervical:checked ~ .regiao-painel--cervical { display: block; }
.regiao-estado#regiao-lombar:checked ~ .regiao-botoes label[for="regiao-lombar"],
.regiao-estado#regiao-cervical:checked ~ .regiao-botoes label[for="regiao-cervical"] {
  background: var(--navy);
  color: var(--branco);
}

/* A centralização: duas barras que dizem até onde a dor desce. A da direita é
   mais curta de propósito — subir é melhorar. */
.central { background: var(--wash); border: 1px solid var(--linha); border-radius: 5px; padding: 28px 26px 22px; }
.central-barras { display: flex; gap: 26px; align-items: flex-end; }
.central-col { flex: 1; display: flex; flex-direction: column; }
.central-barra {
  height: 190px;
  border-radius: 4px;
  background: var(--branco);
  border: 1px solid var(--linha);
  display: flex;
  align-items: flex-end;
  overflow: clip;
}
.central-barra span { display: block; width: 100%; border-radius: 3px; }
.central-barra--inicio span { height: 100%; background: linear-gradient(180deg, #D9714F 0%, #B0472F 100%); }
.central-barra--melhor span { height: 34%; background: linear-gradient(180deg, #19BBC0 0%, #0F8E92 100%); }
.central-rotulo {
  margin-top: 12px;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.central-rotulo--inicio { color: #B0472F; }
.central-rotulo--melhor { color: #0F8E92; }
.central-nota { margin: 7px 0 0 0; font-size: 14px; line-height: 1.55; color: var(--texto-3); }
.central-legenda {
  margin: 20px 0 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-4);
}

@media (max-width: 700px) {
  .alterna-grupos { width: 100%; flex-direction: column; }
  .central-barras { gap: 16px; }
  .central-barra { height: 150px; }
}

/* ---------- 27. O Pós-cirúrgico ---------- */
/* A etiqueta "Situação 1"/"Situação 2" no topo de um cartão. */
.cartao-etiqueta {
  display: block;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-5);
  margin-bottom: 8px;
}

/* ⚠️ Os botões do alternador nesta página estão sobre faixa navy, e o desenho
   claro do alternador — fundo branco, texto escuro — desaparecia contra ela. */
.alterna-botoes.escuro {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--linha-escura);
}
.alterna-botoes.escuro .alterna-botao { color: var(--texto-claro); }
.alterna-botoes.escuro .alterna-botao:hover { color: var(--branco); }

.alterna-painel--recente, .alterna-painel--tardia { display: none; }
.alterna-estado#fase-recente:checked ~ .alterna-painel--recente,
.alterna-estado#fase-tardia:checked ~ .alterna-painel--tardia { display: grid; }
.alterna-estado#fase-recente:checked ~ .alterna-cabeca label[for="fase-recente"],
.alterna-estado#fase-tardia:checked ~ .alterna-cabeca label[for="fase-tardia"] {
  background: var(--branco);
  color: var(--tinta);
}

/* ---------- 28. Os sinais de alarme, afinados por ele (secções 4 e 5) ---------- */
/* ⚠️ ISTO CONTRARIA A REGRA "nada a repetir-se em ciclo" DESTE SITE, e fica
   registado como decisão dele e não como deslize. A razão é clínica e não
   decorativa: esta é a única secção do site cuja função é fazer alguém fechar a
   página e ir para uma urgência. Quando a razão clínica e a regra de desenho se
   cruzam, manda a clínica.

   E fica contido de propósito: 2,6 s por ciclo, opacidade entre 0 e 0,45, sem
   mudar o tamanho de nada. Um pisca-pisca rápido leria como publicidade — que é
   exatamente o contrário do que esta secção precisa de transmitir. */
.alarme-farol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--alarme);
  flex-shrink: 0;
}
.alarme-farol::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 83, 9, 0.55) 0%, rgba(180, 83, 9, 0) 70%);
  opacity: 0;
}
.alarme-farol svg { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .alarme-farol::before { animation: farol 2.6s ease-in-out infinite; }
  @keyframes farol {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.45; }
  }
}

/* A frase que ele mandou passar para baixo, sozinha. Antes vinha no fim do
   parágrafo de aviso e perdia-se lá dentro. */
.alarme-urgente {
  margin: 16px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--alarme-texto);
}
.alarme-urgente strong {
  font-weight: 700;
  font-size: 1.12em;
  color: var(--alarme);
}

/* No remate: o que ele mandou aumentar, e a frase que mandou separar. */
.alarme-destaque { font-weight: 700; font-size: 1.1em; color: var(--branco); }
.alarme-separada {
  margin: 18px auto;
  padding: 14px 20px;
  max-width: 74ch;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* ⚠️ Os triângulos dos grupos: maiores e a piscar, como ele pediu na secção 5.
   O ponto redondo passa a triângulo — é a forma que diz "atenção" sem precisar
   de legenda, e é a mesma do título. */
.alarme-item .alarme-ponto {
  width: 13px;
  height: 13px;
  border-radius: 0;
  background: none;
  margin-top: 4px;
  position: relative;
}
.alarme-item .alarme-ponto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--alarme);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .alarme-item .alarme-ponto::before {
    animation: farol-ponto 2.6s ease-in-out infinite;
  }
  @keyframes farol-ponto {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.42; }
  }
}

/* A condição que distingue o alarme do sintoma comum — reparo dele a 08-09.
   ⚠️ "Dor forte que não alivia em nenhuma posição" sozinha descreve quase toda
   a gente que devia ir a um fisioterapeuta. É a SEGUNDA metade da frase — "e que
   piora de dia para dia" — que faz dela um alarme, e é a que se perde na
   leitura. Destacada, a pessoa que tem dor há três dias sem agravar percebe que
   não é o seu caso.

   ⚠️ Sublinhado NA COR DO ALARME e não a azul: neste site um sublinhado azul é
   uma ligação, e um sublinhado que parece clicável e não abre nada é pior do
   que não ter destaque nenhum. */
.rf-condicao,
.alarme-item .rf-condicao {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--alarme);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- 29. A página dos sinais de alarme (09-09) ---------- */
/* ⚠️ Nasceu de um pedido dele: "tenho um campo no site e em vários vídeos que
   permita a pessoa ler e identificar — se ela tiver aquilo que ali lê, sabe que
   tem de ir a uma urgência hospitalar e não ficar à espera. Não é o objetivo ser
   alarmante, é ser claro."

   ⚠️ E o conteúdo NÃO é escrita nossa: a lista do fundo das costas vem, quase
   palavra a palavra, do Percurso Nacional de Suspeita de Cauda Equina do NHS
   England / GIRFT, na redação do MACP que existe em 35 línguas. Reescrevê-la
   seria arriscar perder precisão numa lista onde a precisão é tudo. */

.alarme-heroi { max-width: 74ch; }

/* As duas velocidades. ⚠️ São a parte mais importante da página e é por isso que
   vêm ANTES das listas: sem elas, quem se reconhece num sinal não sabe se corre
   ou se marca, e na dúvida ou entra em pânico ou adia. */
.velocidade {
  border-radius: 6px;
  padding: 22px 24px;
  border: 1px solid var(--linha);
  background: var(--branco);
}
.velocidade--agora { border-color: var(--alarme-linha); background: var(--alarme-fundo); }
.velocidade-etiqueta {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--texto-5);
}
.velocidade--agora .velocidade-etiqueta { color: var(--alarme); }
.velocidade--semanas .velocidade-etiqueta { color: var(--navy); }
.velocidade-texto { margin: 0; font-size: var(--t-corpo); line-height: 1.62; color: var(--texto-2); }
.velocidade--agora .velocidade-texto { color: var(--alarme-texto-2); }

/* Os três cartões por zona. A .pilha faz o empilhamento; isto é só a aparência. */
.alarme-pilha { max-width: 860px; margin-top: 28px; }
.rf-regiao {
  border: 1px solid var(--alarme-linha-2);
  border-radius: 6px;
  background: var(--alarme-fundo);
  padding: 24px 26px 26px;
  box-shadow: 0 -3px 16px rgba(180, 83, 9, .12);
}
.rf-regiao-nome {
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alarme);
  margin-bottom: 4px;
}
.rf-regiao-titulo { font-size: 17px; font-weight: 500; color: var(--tinta); margin-bottom: 14px; }
.rf-intro {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--alarme-linha-2);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--alarme-texto);
}
.rf-item { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; }
.rf-tri { width: 13px; height: 13px; flex-shrink: 0; margin-top: 4px; position: relative; }
.rf-tri::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--alarme);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .rf-tri::before { animation: farol-ponto 2.6s ease-in-out infinite; }
}
.rf-item > span:last-child { font-size: 16px; line-height: 1.55; color: var(--alarme-texto-2); }

/* Os atalhos que saltam para cada zona. */
.a-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.a-atalho {
  font-size: 14.5px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--alarme-linha);
  color: var(--alarme-texto);
  background: var(--branco);
}
.a-atalho:hover { background: var(--alarme-fundo); color: var(--alarme-texto); }

@media (max-width: 700px) {
  .a-atalhos { flex-direction: column; }
  .a-atalho { text-align: center; }
  .rf-regiao { padding: 20px 18px 22px; }
}

/* A ligação do bloco de alarme para a página inteira dos sinais (09-09). */
.alarme-ligacao { margin-top: 20px; }

/* ⚠️ As duas velocidades ganham número e ordem — reparo dele a 09-09 às 16:03.
   A ordem é do mais leve para o mais grave, e a segunda aponta para as listas
   em vez de as pressupor: antes, a caixa "hoje ao hospital" dizia "qualquer um
   dos sinais das listas abaixo" quando as listas ainda não tinham sido vistas. */
.velocidades { align-items: stretch; }
.velocidade { position: relative; padding-top: 26px; }
.velocidade-numero {
  position: absolute;
  top: -16px;
  left: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--branco);
  background: var(--navy);
}
.velocidade--agora .velocidade-numero { background: var(--alarme); }
.velocidade-texto + .velocidade-texto { margin-top: 10px; }

/* ⚠️ A regra dos 14 dias vive AQUI, colada às listas, e não na secção acima:
   não é uma terceira velocidade — é a condição que se aplica a estes sinais, e
   solta antes deles referia listas que ainda não tinham aparecido. */
.regra-14 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 860px;
  margin-bottom: 22px;
  padding: 20px 24px;
  border: 1px solid var(--alarme-linha);
  border-left: 4px solid var(--alarme);
  border-radius: 4px;
  background: var(--branco);
}
.regra-14 p { margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--alarme-texto-2); }
.regra-14 .alarme-farol { color: var(--alarme); margin-top: 2px; }

/* O trajeto por onde a dor desce, ao lado do nome da zona. ⚠️ Existe porque há
   quem não saiba que uma dor na mão pode vir do pescoço, nem que uma dor no pé
   pode vir da lombar — e quem procura pelo sítio onde lhe dói tem de se
   encontrar aqui. Pedido dele a 09-09. */
.rf-zona-partes { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--alarme-texto-3); }
.a-atalho-partes { display: block; font-size: 12.5px; margin-top: 3px; color: var(--texto-4); }

/* ⚠️ O ÚNICO SÍTIO DO SITE COM MAIÚSCULAS, NEGRITO E SUBLINHADO AO MESMO TEMPO,
   e é decisão dele a 09-09: "urgência médica deve estar escrito em letras
   garrafais, a negrito, sublinhado, porque a pessoa tem que perceber que é uma
   urgência médica". Em qualquer outro lado do site isto seria excesso; aqui é a
   frase que decide se alguém sai de casa. */
.urgencia-medica {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.16em;
  letter-spacing: 0.02em;
  color: var(--alarme);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}


/* ---------- 30. Três classes que o HTML usava e o CSS não tinha (09-09) ---------- */
/* ⚠️ ACHADO DELE: "não se lê, corrige para branco?" — a secção do 112, em faixa
   navy, tinha o texto na cor escura do corpo. A causa é pior do que parecia:
   `.corpo.claro` e `.seta.clara` NUNCA EXISTIRAM. Foram escritas no HTML a 08-09
   a supor que existiam, e uma classe que não existe não dá erro nenhum: o
   elemento fica simplesmente com a cor de origem — escura, sobre fundo escuro.

   ⚠️ E não era só esta página: estavam em quatro (Estenose, Obstrução mecânica,
   Pós-cirúrgico, Sinais de alarme), no ar desde ontem. Uma varredura das classes
   usadas no HTML contra as definidas no CSS apanhou-as em segundos — e é
   verificação que passa a fazer-se antes de subir. */
.corpo.claro,
.corpo.claro strong { color: var(--texto-claro); }
.corpo.claro strong { color: var(--branco); font-weight: 500; }

.seta.clara { color: var(--branco); border-bottom: 1px solid rgba(255, 255, 255, 0.42); padding-bottom: 3px; }
.seta.clara:hover { color: var(--branco); border-bottom-color: var(--branco); }

/* O `.passo` ficou de uma primeira escrita da Obstrução mecânica, antes de se
   reaproveitar a `.fase` que já existia. Aponta para o mesmo, para não haver
   duas maneiras de fazer o mesmo cartão. */
.passo { border-top: 2px solid var(--turquesa); padding-top: 22px; }

/* ---------- 31. As dez afinações baratas da *Início* (feitas a 22-09) ---------- */
/* Das 23 que ele ditou a 07-09, as que são larguras, pesos e aspeto de botão:
   1, 2, 3, 4, 5, 16, 19, 20, 21, 22. As 2 e 5 estão nas suas próprias regras,
   lá acima, porque mexem em classes de tipografia usadas por todo o site.

   ⚠️ As outras oito levam classe própria da *Início* (`.heroi`, `.a-largura-caixas`,
   `.remate.largo`) e NÃO mexem na classe base: `faixa azulada grelha` está em
   dez das doze páginas, `.corpo.largo` em cinco, e `.prova-linha` também na
   *Como marcar*. Mexer na base mudava páginas que ninguém pediu para mudar. */

/* Afinação 1 — no telemóvel o herói da *Início* centra-se. Só o herói.
   ⚠️ 720 px e não 700: é o ponto onde a grelha passa a uma coluna (regra da
   secção 18). Centrar antes disso deixava o texto centrado numa coluna estreita
   ao lado da fotografia, que é pior do que o alinhamento à esquerda. */
@media (max-width: 720px) {
  .heroi .c7 { text-align: center; }
  /* O selo é um flex: `text-align` não o move. */
  .heroi .selo-heroi { justify-content: center; }
  /* O aviso por baixo do botão já vem centrado pelo `.accoes`, mas a 720 px
     perde o `max-width` e ficava com a última linha desencontrada. */
  .heroi .aviso-curto { margin-inline: auto; }
}

/* Afinação 3 — o título do número 74,4% alarga até à largura do parágrafo que
   tem por baixo. Tinha `max-width: 20ch` posto à mão no HTML, e quebrava muito
   mais cedo do que o texto.

   ⚠️ A ARMADILHA: `ch` é a largura do algarismo 0 NA FONTE DO PRÓPRIO ELEMENTO.
   Os `.corpo` limitam-se a 60ch a ~17,5 px; o mesmo 60ch neste título, que
   corre a 36 px, daria o DOBRO da largura física. 29ch é o valor que iguala os
   dois em píxeis (60 × 17,5 ÷ 36), e foi medido no browser, não só calculado. */
.numero-titulo { max-width: 29ch; }

/* Afinação 4 — o texto de entrada das situações alarga até à largura das caixas
   que tem por baixo.
   ⚠️ RESERVA DITA A ELE A 22-09: as caixas ocupam a faixa toda, e a 1280 px isso
   dá ~122 caracteres por linha. O intervalo legível é 45–90 (Baymard, ver
   00_sistema/referencias-design-web.md), e é a razão pela qual a `.corpo.largo`
   está em 80ch. O pedido foi feito como ele pediu; 90ch fica aqui ao lado se
   ele preferir o limite do legível depois de ver. */
.corpo.largo.a-largura-caixas { max-width: 100%; }

/* Afinações 21 e 22 — no remate final, o título e o texto de baixo alargam até
   à largura da secção.
   ⚠️ Mesma reserva da afinação 4, e aqui pesa mais: o remate é texto CENTRADO, e
   uma linha centrada muito longa obriga o olho a procurar onde a seguinte começa.
   Fica no pedido dele, com o aviso escrito. */
.remate.largo { max-width: 100%; }
/* O botão e o "Respondo sempre" não têm de esticar com o texto: continuam a
   ler-se como um bloco no meio. */
.remate.largo .depois { max-width: 60ch; margin-inline: auto; }