/* =========================================================================
   Alquimia dos Sentidos
   Ordenado pela ordem da página. Medidas em specs/plano.md.
   Nenhuma cor escrita fora do :root.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fontes
   Quatro ficheiros, subconjunto latin. O latin-ext não é preciso: os acentos
   do português (ã õ ç á ê) vivem todos em U+0000–00FF.
   Cormorant e Montserrat são variáveis — o mesmo ficheiro serve os dois pesos.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* A fonte manuscrita do material do Canva é a Eyesome Script, comercial e sem
   licença webfont. A Style Script é a mais próxima do Google Fonts: mesma
   ligação entre letras, mesmo peso de traço, mesma inclinação. Aparece em dois
   sítios apenas — ver `--acento`. */
@font-face {
  font-family: 'Style Script';
  src: url('../fonts/style-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Fontes de recurso com métricas ajustadas. Sem isto o texto salta quando a
   fonte real chega, porque as métricas do sistema são diferentes.
   A Montserrat tem altura-de-x maior do que a Arial: sem o `size-adjust` de
   113% o salto era visível a olho nu. */
@font-face {
  font-family: 'Montserrat Recurso';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 113%;
  ascent-override: 86%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cormorant Recurso';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
  size-adjust: 88%;
  ascent-override: 105%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   Variáveis
   ------------------------------------------------------------------------- */

:root {
  /* Paleta.

     Cada cor existe duas vezes: em hexadecimal para uso direto, e como trio
     de canais para os degradês e véus, que precisam da mesma cor com alfa.
     São os trios que permitem o tema escuro — troca-se o trio e todos os
     degradês seguem, sem uma única cor escrita à mão pelo meio. */
  --bone-rgb: 247 246 240;
  --creme-rgb: 251 243 232;
  --verde-rgb: 47 74 60;
  --texto-rgb: 58 50 43;
  --texto-suave-rgb: 107 95 84;

  --bone: rgb(var(--bone-rgb));
  --creme: rgb(var(--creme-rgb));
  --verde: rgb(var(--verde-rgb));
  --verde-claro: #3A5A49;
  --dourado: #B98230;
  --texto: rgb(var(--texto-rgb));
  --texto-suave: rgb(var(--texto-suave-rgb));

  /* Dourado para superfícies escuras. Como o `--sobre-escuro`, não muda com o
     tema — o rodapé, as bandas e o herói são escuros nos dois.
     O `--dourado` novo é mais escuro do que o `#B8935A` que substituiu, e
     sobre o verde mede 2,91:1 — abaixo dos 3:1 que um anel de foco precisa.
     O antigo passava a 3,40:1, por isso esta variável não existia. Este mede
     4,94:1 sobre o verde. */
  --dourado-claro: #DDB273;

  /* Cor do anel de foco. Sai do `--dourado` por omissão e passa a
     `--dourado-claro` dentro de qualquer superfície escura. É variável, e não
     uma regra por sítio, porque o anel tem `outline-offset: 3px` — assenta na
     superfície à volta, não na do próprio elemento. */
  --anel: var(--dourado);

  /* Claro que nunca muda.

     O herói, as bandas verdes e o rodapé são superfícies escuras nos DOIS
     temas. O que assenta neles — texto, contornos, traços — tem de ficar
     claro sempre. Se seguisse `--bone`, no tema escuro passava a escuro
     sobre escuro e desaparecia. */
  --sobre-escuro-rgb: 247 246 240;
  --sobre-escuro: rgb(var(--sobre-escuro-rgb));

  /* Quanto se escurece a fotografia do herói. No tema escuro sobe, porque a
     mesma foto sobre uma página escura fica a gritar. */
  --heroi-veu: .35;
  --imagem-brilho: 1;

  /* Tipografia */
  --titulo: 'Cormorant Garamond', 'Cormorant Recurso', Georgia, serif;
  --corpo: 'Montserrat', 'Montserrat Recurso', system-ui, sans-serif;
  --acento: 'Style Script', 'Cormorant Garamond', cursive;

  --t-h1: clamp(2.5rem, 6vw, 4.5rem);
  --t-h2: clamp(2rem, 4.5vw, 3rem);
  --t-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --t-abertura: clamp(1.25rem, 2.5vw, 1.75rem);
  --t-intro: clamp(1.0625rem, 1.2vw, 1.25rem);
  --t-corpo: clamp(1.0625rem, .4vw + 1rem, 1.125rem);
  --t-botao: clamp(.9375rem, 1vw, 1rem);
  --t-faixa: clamp(1.625rem, 4.4vw, 3rem);
  --t-rodape: clamp(.875rem, 1vw, .9375rem);

  /* Espaçamento — base 8 */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: 96px;  --e10: 128px; --e11: 160px;

  /* Estrutura */
  --envolve: 1200px;
  --prosa: 680px;
  --estreito: 560px;
  --goteira: 20px;
  --seccao: clamp(4rem, 10vw, 10rem);

  /* Raios */
  --raio-p: 8px;
  --raio: 12px;
  --raio-pilula: 999px;

  /* Movimento */
  --rapido: 200ms ease-out;
  --lento: 600ms cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 768px) { :root { --goteira: 32px; } }
@media (min-width: 1024px) { :root { --goteira: 48px; } }

/* -------------------------------------------------------------------------
   Tema escuro

   Não é a paleta invertida — é a mesma paleta noutro registo. O bone e o
   creme passam a dois castanhos-esverdeados muito escuros, o verde profundo
   mantém-se e passa a ser a cor *mais clara* das superfícies, o que faz as
   bandas continuarem a ler-se como bandas. O dourado sobe um pouco de brilho
   porque a 0% de luz o #B98230 apaga-se.

   Continua a não haver preto puro nem branco puro, como manda o design.md.

   O tema é escolhido pelo visitante e guardado. `data-tema` no <html> ganha
   sempre ao sistema — quem carregou no botão decidiu.
   ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --bone-rgb: 27 30 25;
    --creme-rgb: 34 38 31;
    --texto-rgb: 233 229 219;
    --texto-suave-rgb: 171 162 148;
    --verde-claro: #43654F;
    --dourado: #D7A965;
    --heroi-veu: .5;
    --imagem-brilho: .88;
  }
}

:root[data-tema='escuro'] {
  --bone-rgb: 27 30 25;
  --creme-rgb: 34 38 31;
  --texto-rgb: 233 229 219;
  --texto-suave-rgb: 171 162 148;
  --verde-claro: #43654F;
  --dourado: #D7A965;
  --heroi-veu: .5;
  --imagem-brilho: .88;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* O topo é fixo e tapa a página: 100px em telemóvel, 120px em desktop.
     Sem isto as âncoras param com o título por baixo do cabeçalho. */
  scroll-padding-top: 108px;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) { html { scroll-padding-top: 128px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: var(--t-corpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 350ms ease, color 350ms ease;
}

/* Enquanto a página ainda não decidiu o tema, não há transição — senão a
   primeira pintura vê-se a mudar de cor. A classe sai no primeiro clique. */
.sem-transicao, .sem-transicao * {
  transition: none !important;
}

img { display: block; max-width: 100%; height: auto; }

/* As fotografias foram tratadas para fundo claro. Sobre uma página escura
   ficam a gritar, por isso no tema escuro levam um travão de brilho. A logo
   e o ícone ficam de fora — são desenho, não fotografia. */
.servico__imagem,
.sobre__imagem,
.contacto__imagem,
.produto img {
  filter: brightness(var(--imagem-brilho));
  transition: filter 350ms ease;
}

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--anel);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dentro de superfícies escuras o anel troca de dourado. Basta redefinir a
   variável no contentor — herda para tudo o que esteja lá dentro, incluindo
   elementos que ainda não existem. */
.topo,
.heroi,
.banda,
.faixa,
.rodape { --anel: var(--dourado-claro); }

/* Palavras longas do português rebentam blocos estreitos em telemóvel.
   O hífen só entra abaixo dos 480px, onde é mesmo preciso. O `lang` do
   <html> é o que faz o browser hifenizar segundo as regras certas. */
@media (max-width: 480px) {
  p, dd, li { hyphens: auto; }
}

.envolve {
  width: 100%;
  max-width: var(--envolve);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

.saltar {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 100;
  padding: var(--e3) var(--e5);
  background: var(--verde);
  color: var(--sobre-escuro);
  font-size: .9375rem;
  text-decoration: none;
  border-radius: var(--raio-p);
  transition: top var(--rapido);
}
.saltar:focus { top: var(--e4); }

/* -------------------------------------------------------------------------
   Componentes
   ------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 14px var(--e6);
  background: var(--verde);
  color: var(--sobre-escuro);
  font-family: var(--corpo);
  font-size: var(--t-botao);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--verde);
  border-radius: var(--raio-pilula);
  transition: background var(--rapido), border-color var(--rapido);
}

.botao:hover { background: var(--verde-claro); border-color: var(--verde-claro); }

/* Fundo próprio, não transparente. O botão do herói é o elemento mais baixo do
   bloco de texto e cai já na zona onde o escurecimento cedeu lugar à fusão —
   em contorno vazio media 4,18:1 sobre a fotografia. Com este véu passa dos
   4,5:1 seja qual for a imagem por baixo. */
.botao--claro {
  background: rgb(var(--verde-rgb) / .42);
  backdrop-filter: blur(3px);
  border-color: rgb(var(--sobre-escuro-rgb) / .55);
  color: var(--sobre-escuro);
}
.botao--claro:hover {
  background: rgb(var(--verde-rgb) / .62);
  border-color: var(--sobre-escuro);
}

.botao--grande { padding: 17px var(--e7); }
.botao__icone { flex: none; }

.ornamento {
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto var(--e4);
  background: var(--dourado);
}
.ornamento--esquerda { margin-inline: 0 auto; }

/* -------------------------------------------------------------------------
   1 e 2 — Topo sobreposto ao herói

   Como na referência: enquanto o herói está no ecrã o topo é transparente e
   assenta sobre a fotografia. Ao rolar para lá dele ganha fundo e o texto
   escurece. Não há faixa branca a cortar a imagem.
   ------------------------------------------------------------------------- */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  color: var(--sobre-escuro);
  transition: background-color 400ms ease, box-shadow 400ms ease, color 400ms ease;
}

.topo[data-fixo] {
  background: rgb(var(--bone-rgb) / .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgb(var(--texto-rgb) / .1);
  color: var(--texto);
  /* Deixou de assentar na fotografia: o anel de foco volta ao dourado normal,
     pelo mesmo motivo que a cor do texto volta a `--texto`. */
  --anel: var(--dourado);
}

.barra-topo {
  border-bottom: 1px solid rgb(var(--sobre-escuro-rgb) / .18);
  font-size: .8125rem;
  letter-spacing: .04em;
  transition: border-color 400ms ease;
}
.topo[data-fixo] .barra-topo { border-bottom-color: rgb(var(--texto-rgb) / .08); }

.barra-topo__interior {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e5);
  min-height: 36px;
}

.barra-topo__horario {
  display: none;
  margin-right: auto;
  line-height: 1.4;
  opacity: .85;
}

.barra-topo__accoes { display: flex; align-items: center; }
.idioma { display: flex; align-items: center; }

/* A barra tem 36px de altura, mas o alvo de toque tem de ter 44. O ::after
   estende a área clicável para lá do botão sem engordar a barra — só assim
   se cumprem os 44px sem partir o desenho fino do topo. */
.idioma__opcao {
  position: relative;
  min-width: 44px;
  min-height: 36px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: .65;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity var(--rapido);
}
.idioma__opcao::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.idioma__opcao:hover { opacity: 1; }
.idioma__opcao[aria-current='true'] { opacity: 1; font-weight: 500; }

.idioma__separador { opacity: .4; }

/* Botão do tema. Mesma família visual do seletor de idioma — texto pequeno,
   discreto, área de toque de 44px estendida pelo ::after sem engordar a
   barra. Só muda o conteúdo: um símbolo em vez de duas letras. */
.tema {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 36px;
  margin-left: var(--e2);
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  transition: opacity var(--rapido);
}
.tema::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.tema:hover { opacity: 1; }

.tema__icone { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Sol quando está escuro (carregar traz a luz), lua quando está claro. */
.tema__lua { display: block; }
.tema__sol { display: none; }
:root[data-tema='escuro'] .tema__lua { display: none; }
:root[data-tema='escuro'] .tema__sol { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tema__lua { display: none; }
  :root:not([data-tema='claro']) .tema__sol { display: block; }
  :root[data-tema='claro'] .tema__lua { display: block; }
  :root[data-tema='claro'] .tema__sol { display: none; }
}

@media (min-width: 768px) { .tema { min-height: 40px; } }

@media (min-width: 768px) {
  .barra-topo__interior { min-height: 40px; }
  .barra-topo__horario { display: block; }
  .idioma__opcao { min-height: 40px; }
  .idioma__opcao::after { inset: -2px 0; }
}

/* -------------------------------------------------------------------------
   Cabeçalho e marca
   ------------------------------------------------------------------------- */

.cabecalho__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 64px;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
}

/* O símbolo vai apertado ao núcleo — lua e lótus, sem as folhas nem o arco.
   Nesta forma aguenta ser pequeno; com a filigrana à volta, a 52px virava
   uma mancha. A sombra ténue separa-o da fotografia do herói. */
.marca__simbolo {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .3));
}

/* O nome fica em Cormorant, não na manuscrita: a logo escreve "ALQUIMIA" numa
   serifada, e no rodapé é essa versão que aparece. Em Cormorant o cabeçalho
   lê-se como continuação da mesma marca; em manuscrita seriam duas marcas
   diferentes na mesma página. */
.marca__nome {
  font-family: var(--titulo);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 400;
  letter-spacing: .07em;
  line-height: 1;
  white-space: nowrap;
}

.menu-botao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.menu-botao__risca {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--rapido), opacity var(--rapido);
}
.menu-botao[aria-expanded='true'] .menu-botao__risca:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-botao[aria-expanded='true'] .menu-botao__risca:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.navegacao {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--bone);
  color: var(--texto);
  visibility: hidden;
  opacity: 0;
  /* O `visibility` nunca entra na transição de duração. A abrir muda logo,
     senão o painel ainda conta como escondido e não se pode pôr foco nele;
     a fechar espera pelo fim do esbatimento. */
  transition: opacity var(--rapido), visibility 0s linear var(--rapido);
}
.navegacao[data-aberto] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--rapido), visibility 0s;
}

.navegacao__lista {
  display: grid;
  gap: var(--e6);
  text-align: center;
}
.navegacao__lista a {
  font-family: var(--titulo);
  font-size: 1.75rem;
  letter-spacing: .03em;
  text-decoration: none;
}

@media (min-width: 768px) {
  .cabecalho__interior { min-height: 80px; }
  .marca__simbolo { height: 64px; }

  .menu-botao { display: none; }

  .navegacao {
    position: static;
    display: block;
    background: none;
    color: inherit;
    visibility: visible;
    opacity: 1;
  }
  .navegacao__lista {
    display: flex;
    /* e5, não e6: "O Nosso Compromisso" (2026-08-19) é a entrada mais comprida
       que o menu já teve. A e6 as cinco entradas quebravam a duas linhas a
       1024px, o primeiro breakpoint onde o menu completo aparece. */
    gap: var(--e5);
  }
  .navegacao__lista a {
    font-family: var(--corpo);
    font-size: .9375rem;
    letter-spacing: .06em;
    padding-block: var(--e2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--rapido);
  }
  .navegacao__lista a:hover { border-bottom-color: var(--dourado); }
}

/* -------------------------------------------------------------------------
   3 — Herói
   ------------------------------------------------------------------------- */

.heroi {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(60vh, 620px);
  isolation: isolate;
  /* Altura da faixa onde a fotografia se dissolve no fundo da secção
     seguinte. Aparece em três sítios: na camada de fusão, no recuo do texto e
     no ponto onde o escurecimento tem de acabar. */
  --fusao: 140px;
  /* Têm de ser a cor da secção que vem logo a seguir, senão o degradê acaba
     numa cor e a secção começa noutra — e volta a ver-se uma linha. Desde
     2026-08-19 é Quem Somos, que é bone. Antes disso era Serviços (creme) —
     mudou quando a ordem das secções mudou, exatamente como este comentário
     já avisava que aconteceria.

     Duas variáveis, não uma: `--fusao-cor` para usar a cor sólida direta
     (o último ponto do degradê), `--fusao-cor-rgb` para compor com alfa nos
     pontos intermédios. Sem a segunda, os pontos intermédios ficavam presos
     à cor antiga e o degradê mudava de tom mesmo no fim — a aresta que esta
     técnica existe para evitar. */
  --fusao-cor: var(--bone);
  --fusao-cor-rgb: var(--bone-rgb);
}

.heroi__imagem,
.heroi__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* A imagem não acaba a direito. Dissolve-se na cor da secção seguinte, como
   na referência — sem esta camada fica um corte horizontal duro entre a
   fotografia e o que vem a seguir. */
.heroi::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--fusao);
  z-index: -1;
  pointer-events: none;
  /* Passagem larga e progressiva. O último ponto tem de ser a cor sólida da
     vizinha, senão volta a aparecer uma linha — e os pontos intermédios têm
     de ser a MESMA cor, só com menos alfa, senão a linha aparece um pouco
     antes do fim em vez de no fim. */
  background: linear-gradient(
    to bottom,
    rgb(var(--fusao-cor-rgb) / 0) 0%,
    rgb(var(--fusao-cor-rgb) / .55) 45%,
    rgb(var(--fusao-cor-rgb) / .9) 78%,
    var(--fusao-cor) 100%);
}

.heroi__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Véu verde uniforme, degradê a subir do fundo para o texto, e um degradê
   curto no topo para o cabeçalho transparente ter onde assentar. Sem esse do
   topo, a logo dourada e a navegação em bone caem sobre a parte clara da
   fotografia e deixam de se ler. */
.heroi__veu {
  background:
    /* Escurecimento do topo em pixéis, não em percentagem: tem de cobrir a
       faixa do cabeçalho seja qual for a altura do herói. Medido — a janela
       clara do lado esquerdo da fotografia levava o contraste da logo a
       1,92:1 com um degradê em percentagem, que desvanecia cedo de mais.

       O planalto vai a 132px porque o cabeçalho tem 121px em desktop: com o
       planalto a acabar antes dele, a última faixa da navegação caía a
       4,31:1. A força tem de durar mais do que a barra que protege. */
    linear-gradient(to bottom,
      rgba(35, 30, 25, .58) 0,
      rgba(35, 30, 25, .5) 132px,
      rgba(35, 30, 25, 0) 320px),
    /* Escurecimento para o texto. Chega a zero antes da faixa de fusão: se
       entrasse por ela, o escuro e o claro cruzavam-se e davam um cinzento
       sujo em vez de uma passagem limpa. */
    /* Este escurecimento fica em cor fixa de propósito: é sombra sobre uma
       fotografia, não superfície do site. Se seguisse `--texto-rgb`, no tema
       escuro passava a clarear em vez de escurecer, e o texto bone por cima
       desaparecia. */
    linear-gradient(to top,
      rgba(58, 50, 43, 0) var(--fusao),
      rgba(58, 50, 43, .5) calc(var(--fusao) + 60px),
      rgba(58, 50, 43, .32) calc(var(--fusao) + 260px),
      rgba(58, 50, 43, 0) 72%),
    /* Este segue a paleta: é o verde da casa a tingir a fotografia, não uma
       sombra. Estava escrito à mão e ficou para trás quando o verde mudou. */
    rgb(var(--verde-rgb) / var(--heroi-veu));
}

.heroi__texto {
  /* Coluna flex, não blocos com linhas. O botão é inline-flex: numa caixa de
     linha normal ficava com ~20px de espaço de descida por baixo, e essa
     folga fantasma empurrava-o para dentro da faixa de fusão. Em flex os
     filhos não geram caixas de linha e o recuo abaixo é o que está escrito. */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* O recuo de baixo salta a faixa de fusão: o texto nunca assenta na parte
     onde a fotografia já está a desaparecer. */
  padding-block: var(--e9) calc(var(--fusao) + var(--e6));
  text-align: center;
  color: var(--sobre-escuro);
}

.heroi h1 {
  max-width: 16ch;
  margin-inline: auto;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: .04em;
}

.heroi__subtitulo {
  max-width: 46ch;
  margin: var(--e5) auto 0;
  font-size: var(--t-intro);
  line-height: 1.6;
  color: rgb(var(--sobre-escuro-rgb) / .92);
}

.heroi .botao { margin-top: var(--e6); }

@media (min-width: 1024px) {
  .heroi {
    min-height: min(78vh, 820px);
    --fusao: 220px;
  }
  .heroi__texto { padding-block: var(--e11) calc(var(--fusao) + var(--e7)); }
}

/* -------------------------------------------------------------------------
   Secções
   ------------------------------------------------------------------------- */

.seccao { padding-block: var(--seccao); }
.seccao--creme { background: var(--creme); }

.cabeca {
  max-width: var(--estreito);
  margin-inline: auto;
  text-align: center;
}

.cabeca h2,
.sobre h2,
.contacto__info h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: .03em;
}

.cabeca h2 { max-width: 20ch; margin-inline: auto; }

.cabeca__texto {
  margin-top: var(--e5);
  font-size: var(--t-intro);
  line-height: 1.6;
  color: var(--texto-suave);
}

.seccao__accao { margin-top: var(--e8); text-align: center; }

/* -------------------------------------------------------------------------
   Detalhe dos serviços — o "Saiba mais"

   Em <details>/<summary>, que abre sem JavaScript. O JS só traz o conteúdo.
   ------------------------------------------------------------------------- */

/* Não é mais o cartão a abrir — é a lista da secção. O comentário e o
   `:has()` que existiam aqui até 2026-08-19 tratavam do cartão que crescia
   para a linha inteira ao abrir o próprio `<details>`. Deixaram de ter
   alvo quando o "Saiba mais" saiu dos cartões — ver a secção "Lista de
   serviços", mais abaixo. */

.detalhes__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  margin-inline: auto;
  padding: 12px var(--e6);
  width: fit-content;
  border: 1px solid rgb(var(--texto-rgb) / .25);
  border-radius: var(--raio-pilula);
  font-size: var(--t-botao);
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--rapido), background var(--rapido);
}
/* O Safari mostra um triângulo próprio no summary se não se lhe tirar. */
.detalhes__botao::-webkit-details-marker { display: none; }
.detalhes__botao:hover { border-color: var(--dourado); background: rgb(var(--texto-rgb) / .04); }

.detalhes__seta { flex: none; transition: transform var(--rapido); }
.detalhes[open] .detalhes__seta { transform: rotate(180deg); }

.detalhes__conteudo {
  max-width: var(--prosa);
  margin: var(--e7) auto 0;
  text-align: left;
}

.detalhe + .detalhe {
  margin-top: var(--e7);
  padding-top: var(--e7);
  border-top: 1px solid rgb(var(--texto-rgb) / .12);
}

.detalhe__nome {
  margin: 0;
  font-family: var(--titulo);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
}

/* O preço vive aqui e só aqui — nos cartões não entra, para a secção não se
   ler como tabela de preços.

   Não vai a dourado, apesar de ser o que apetecia: `#B98230` sobre creme mede
   3,03:1. O design.md já o diz — o dourado é acento, não superfície, e como
   cor de texto quebra o contraste. Destaca-se pelo peso e pelo espaçamento. */
.detalhe__preco {
  margin-top: var(--e1);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto);
}

.detalhe__texto { margin-top: var(--e3); }
.detalhe__zonas { margin-top: var(--e2); color: var(--texto-suave); }

.detalhe__rotulo {
  margin: var(--e5) 0 var(--e2);
  font-family: var(--corpo);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--texto-suave);
}

.detalhe__lista {
  display: grid;
  gap: var(--e2);
  padding-left: var(--e4);
  list-style: disc;
  color: var(--texto-suave);
}
.detalhe__lista li { padding-left: var(--e1); }

/* O documento da Fátima escreve muitos itens como "Nome: explicação". O nome
   sobe para a cor cheia; o resto fica na cor suave. Peso 500, não 700 — a 700 o
   Montserrat fica pesada de mais ao lado do Cormorant do título. */
.detalhe__lista strong { font-weight: 500; color: var(--texto); }

.detalhes__aviso {
  margin-top: var(--e8);
  padding: var(--e5);
  border-left: 2px solid var(--dourado);
  background: rgb(var(--texto-rgb) / .04);
  font-size: .9375rem;
  color: var(--texto-suave);
}

/* -------------------------------------------------------------------------
   Lista de serviços — "Saiba mais sobre os serviços"

   Um <details> de secção inteira, com o mesmo botão em contorno que o antigo
   "Saiba mais" por cartão usava — reaproveita `.detalhes__botao`, não inventa
   um terceiro estilo de botão. Dentro, cada serviço é o seu próprio <details>,
   para dar oito títulos e preços à vista sem obrigar a abrir tudo.
   ------------------------------------------------------------------------- */

.lista { margin-top: var(--e8); text-align: center; }

.lista__botao { margin-inline: auto; }

.lista__conteudo {
  max-width: var(--prosa);
  margin: var(--e7) auto 0;
  text-align: left;
}

.servico-detalhe + .servico-detalhe { margin-top: var(--e5); }

.servico-detalhe__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e4);
  padding: var(--e4) 0;
  border-bottom: 1px solid rgb(var(--texto-rgb) / .12);
  cursor: pointer;
  list-style: none;
}
.servico-detalhe__cabeca::-webkit-details-marker { display: none; }

/* Sem `white-space: nowrap`: alguns preços vêm em duas partes — "25€ · uma
   zona · ±30min | 40€ · duas zonas · ±1h00" — e nowrap, dentro de uma linha
   flex sem espaço para encolher, empurrava a secção inteira para lá dos
   375px em telemóvel. `flex-wrap` no pai deixa o preço cair para a sua
   própria linha quando não cabe ao lado do nome.

   Nome e preço não levam `flex: 1` — um flex-basis a 0% obriga o browser a
   dar-lhe a linha inteira antes de colocar o resto, e o preço caía para
   baixo mesmo quando sobrava espaço de sobra. Ficam ao tamanho do próprio
   texto, colados um ao outro; é a seta que leva `margin-left: auto` e vai
   sozinha para a ponta direita. */
.servico-detalhe .detalhe__nome { min-width: 0; }
.servico-detalhe .detalhe__preco { margin-top: 0; }

.servico-detalhe .detalhes__seta { flex: none; margin-left: auto; }
.servico-detalhe[open] .detalhes__seta { transform: rotate(180deg); }

.lista[open] > summary .detalhes__seta { transform: rotate(180deg); }

.servico-detalhe__corpo {
  padding: var(--e5) 0 var(--e6);
}

@media (min-width: 768px) {
  .servico-detalhe__cabeca { padding: var(--e5) 0; }
}

/* -------------------------------------------------------------------------
   5 — Serviços
   ------------------------------------------------------------------------- */

.servicos {
  display: grid;
  gap: var(--e7);
  margin-top: var(--e7);
}

.servico { text-align: center; }

/* Alinhamento entre cartões.

   Os títulos têm uma ou duas linhas — "Aromaterapia" contra "Massagens
   terapêuticas" — e isso desalinha tudo o que vem a seguir: o texto começa
   a alturas diferentes.

   `subgrid` faz os quatro cartões partilharem as mesmas três linhas da
   grelha de fora: imagem, título, texto. Cada linha fica com a altura do
   maior, e as quatro colunas alinham nos três pontos.

   Até 2026-08-19 havia também um recuo em flex para navegadores sem
   `subgrid`, porque um quarto elemento (o botão "Saiba mais" de cada
   cartão) precisava de ficar empurrado para baixo com `margin-top: auto`.
   Sem esse quarto elemento, um `.servico` sem subgrid já empilha imagem,
   título e texto na ordem certa sem ajuda nenhuma — o recuo ficou morto e
   saiu. */

@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .servico {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 0;
    }
  }
}

.servico__imagem {
  width: 200px;
  height: 200px;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
}

.servico h3 {
  margin-top: var(--e5);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: .02em;
}

.servico p {
  max-width: 34ch;
  margin: var(--e3) auto 0;
  color: var(--texto-suave);
}

/* Quatro serviços, não três. Duas colunas em tablet e quatro em desktop —
   quatro em tablet espremia os círculos abaixo dos 160px e o texto por baixo
   ficava com quatro palavras por linha. */
@media (min-width: 768px) {
  .servicos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e8);
    margin-top: var(--e8);
  }
}

@media (min-width: 1024px) {
  .servicos { grid-template-columns: repeat(4, 1fr); gap: var(--e7); }
  /* 220px, não os 280px de quando eram três: quatro círculos de 280 não
     cabem no container de 1200px sem encostarem uns aos outros. */
  .servico__imagem { width: 220px; height: 220px; }
}

/* -------------------------------------------------------------------------
   6 — Banda escura
   ------------------------------------------------------------------------- */

.banda {
  position: relative;
  display: grid;
  place-items: center;
  /* `min-height`, não `height`: o recuo interno tem de caber, e em inglês a
     frase pode ganhar uma linha. Com altura fixa o texto transbordava para
     dentro das fusões. */
  min-height: 460px;
  padding-block: var(--fusao-banda);
  padding-inline: var(--goteira);
  background: var(--verde);
  isolation: isolate;
  overflow: hidden;
  --fusao-banda: 130px;
}

/* 28%, não os 40% de antes. A textura de linho tem zonas onde o tecido apanha
   luz e clareia o verde por baixo — a 40% a frase media 4,16:1, e a manuscrita
   é fina de traço, o que agrava. A 28% continua a ler-se como textura e o
   contraste sobe acima do mínimo.

   Esteve a 22% durante o ensaio do verde #2e6417, que era mais claro e fazia
   o piso cair para 3,88:1. Com o #2F4A3C de volta, 28% volta a servir. */
.banda__imagem {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
}

/* As duas arestas dissolvem-se nas secções encostadas, como o herói faz com
   Quem Somos. Cada uma acaba na cor da sua vizinha: bone em cima (Quem
   Somos), creme em baixo (Serviços) — trocadas a 2026-08-19, quando a Banda
   mudou de sítio com a reordenação das secções. Se a ordem voltar a mudar,
   estas cores mudam com ela.

   O fim de cada degradê é a mesma cor com alfa zero, não `transparent`: em
   `transparent` alguns motores interpolam por preto e deixam um véu cinzento
   a meio da passagem. */
.banda::before,
.banda::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--fusao-banda);
  pointer-events: none;
}

/* Curva em S, não recta.

   Um degradê linear de alfa deixa uma aresta visível onde a fusão começa: o
   olho não apanha a mudança de cor, apanha a mudança brusca de inclinação.
   Com dois ou três pontos o efeito é o mesmo — vê-se onde a faixa arranca.

   Estes pontos desenham um `smoothstep` (3t² − 2t³): a fusão parte de zero
   devagar, ganha velocidade a meio e volta a assentar devagar no fim. Não há
   princípio nem fim percetíveis, que é o que a referência faz. */
.banda::before {
  top: -1px;
  background: linear-gradient(to bottom,
    rgb(var(--bone-rgb) / 1)    0%,
    rgb(var(--bone-rgb) / .972) 10%,
    rgb(var(--bone-rgb) / .896) 20%,
    rgb(var(--bone-rgb) / .784) 30%,
    rgb(var(--bone-rgb) / .648) 40%,
    rgb(var(--bone-rgb) / .5)   50%,
    rgb(var(--bone-rgb) / .352) 60%,
    rgb(var(--bone-rgb) / .216) 70%,
    rgb(var(--bone-rgb) / .104) 80%,
    rgb(var(--bone-rgb) / .028) 90%,
    rgb(var(--bone-rgb) / 0)    100%);
}

.banda::after {
  bottom: -1px;
  background: linear-gradient(to top,
    rgb(var(--creme-rgb) / 1)    0%,
    rgb(var(--creme-rgb) / .972) 10%,
    rgb(var(--creme-rgb) / .896) 20%,
    rgb(var(--creme-rgb) / .784) 30%,
    rgb(var(--creme-rgb) / .648) 40%,
    rgb(var(--creme-rgb) / .5)   50%,
    rgb(var(--creme-rgb) / .352) 60%,
    rgb(var(--creme-rgb) / .216) 70%,
    rgb(var(--creme-rgb) / .104) 80%,
    rgb(var(--creme-rgb) / .028) 90%,
    rgb(var(--creme-rgb) / 0)    100%);
}

.banda__frase {
  position: relative;
  z-index: 1;
  max-width: 24ch;
  font-family: var(--acento);
  font-size: var(--t-faixa);
  line-height: 1.25;
  letter-spacing: .02em;
  text-align: center;
  color: var(--sobre-escuro);
}

@media (min-width: 1024px) {
  .banda {
    min-height: 680px;
    --fusao-banda: 190px;
  }
}

/* -------------------------------------------------------------------------
   7 — Quem Somos
   ------------------------------------------------------------------------- */

.sobre__grelha {
  display: grid;
  gap: var(--e7);
}

.sobre__imagem {
  width: 100%;
  max-height: 60vh;
  border-radius: var(--raio);
  object-fit: cover;
  object-position: center 30%;
}

.sobre__texto p { max-width: 65ch; }
.sobre__texto p + p { margin-top: var(--e5); }

.sobre__abertura {
  max-width: 50ch;
  margin-top: var(--e5);
  font-family: var(--titulo);
  font-style: italic;
  font-size: var(--t-abertura);
  line-height: 1.5;
  letter-spacing: .01em;
}

@media (min-width: 1024px) {
  .sobre__grelha {
    grid-template-columns: 40fr 60fr;
    gap: 80px;
    align-items: start;
  }
  .sobre__imagem { max-height: none; position: sticky; top: 120px; }
}

/* -------------------------------------------------------------------------
   9 — O Nosso Compromisso (até 2026-08-19, "Um gesto de gratidão")

   Secção só de texto, entalada entre duas secções bone (Produtos acima,
   Contacto abaixo, desde a reordenação de 2026-08-19). Vai a creme para se
   destacar sem precisar de imagem — não há fotografia desta história, e
   inventar uma seria pior do que não ter.

   A coluna é a de prosa, 680px, centrada. Sem colunas laterais: são sete
   parágrafos numa voz pessoal, e qualquer coisa ao lado rouba-lhes o silêncio.
   ------------------------------------------------------------------------- */

/* O cabeçalho do desconto, acrescentado a 2026-08-19. Fica entre o título da
   secção e o texto da Fátima — resume em três linhas o que os parágrafos
   contam por extenso, para quem só passa os olhos.

   "10% de desconto" vai a `--texto`, não a verde nem a dourado. O dourado é
   acento, não superfície, e sobre creme mede 2,59:1. O verde parecia óbvio —
   é a cor da marca — mas `--verde` é uma SUPERFÍCIE que fica escura nos dois
   temas (como o herói, as bandas e o rodapé), não um texto que clareia no
   tema escuro. Usado como cor de letra media 1,59:1 sobre o creme escuro:
   verde sobre verde, ilegível. Medido a testar, não a assumir — é a mesma
   armadilha do `--sobre-escuro`, ao contrário. */
.gratidao__desconto-bloco {
  max-width: var(--estreito);
  margin: var(--e5) auto 0;
  text-align: center;
}

.gratidao__desconto {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--texto);
}

.gratidao__desconto-sub {
  margin-top: var(--e2);
  font-size: var(--t-intro);
  line-height: 1.5;
  color: var(--texto-suave);
}

.gratidao__texto {
  max-width: var(--prosa);
  margin-inline: auto;
  margin-top: var(--e8);
}

.gratidao__texto p + p { margin-top: var(--e5); }

/* O parágrafo dos 10% é o único da secção com informação acionável. Ganha um
   traço dourado à esquerda e uma pausa maior à volta — o mesmo tratamento do
   aviso no detalhe dos serviços, para não inventar uma linguagem nova.
   O dourado fica no traço, nunca no texto: sobre creme mede 2,59:1. */
.gratidao__destaque {
  margin-top: var(--e7);
  padding: var(--e5) var(--e6);
  border-left: 2px solid var(--dourado);
  background: rgb(var(--texto-rgb) / .04);
}

.gratidao__destaque + p { margin-top: var(--e7); }

/* O fecho é a única frase da secção que não é prosa corrida — é a assinatura
   do gesto. Cormorant em itálico, como a abertura do "Quem Somos", para as
   duas vozes da Fátima rimarem. */
.gratidao__fecho {
  max-width: 30ch;
  margin-top: var(--e7);
  font-family: var(--titulo);
  font-style: italic;
  font-size: var(--t-abertura);
  line-height: 1.5;
  letter-spacing: .01em;
}

@media (min-width: 768px) {
  .gratidao__fecho { margin-inline: auto; text-align: center; max-width: 34ch; }
}

/* -------------------------------------------------------------------------
   8 — Faixa a rolar
   ------------------------------------------------------------------------- */

.faixa {
  display: flex;
  align-items: center;
  height: 72px;
  background: var(--verde);
  overflow: hidden;
}

.faixa__pista {
  display: flex;
  flex: none;
  animation: correr 40s linear infinite;
}

.faixa__grupo {
  flex: none;
  padding-inline: var(--e7);
  font-family: var(--acento);
  font-size: var(--t-faixa);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--sobre-escuro);
  white-space: nowrap;
}

@keyframes correr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa__pista { animation: none; }
}

@media (min-width: 1024px) { .faixa { height: 96px; } }

/* -------------------------------------------------------------------------
   9 — Produtos
   ------------------------------------------------------------------------- */

/* Três produtos. Uma coluna em telemóvel — duas deixariam um cartão órfão
   na segunda fila, que é pior do que a lista ficar mais comprida. */
.produtos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
  margin-top: var(--e7);
}

.produto img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--raio);
  object-fit: cover;
}

.produto__nome {
  margin-top: var(--e3);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
  color: var(--texto-suave);
}

/* O asterisco sobe meia linha sem alterar a altura da linha — `vertical-align`
   com `line-height: 0`, não `<sup>` cru, que empurra o nome para baixo e
   desalinha os três cartões entre si.

   Fica em `--texto-suave` e não no dourado: aponta para uma nota, e um sinal
   com função mede-se pelo contraste como texto. O dourado sobre bone dá
   2,59:1 — serve para ornamento, não para isto. */
.produto__marca,
.produtos__nota-marca {
  color: var(--texto-suave);
  font-size: .75em;
  line-height: 0;
  vertical-align: super;
}

.produto__marca { margin-left: 2px; }

.produtos__nota {
  max-width: var(--prosa);
  margin: var(--e7) auto 0;
  font-size: .8125rem;
  line-height: 1.6;
  text-align: center;
  color: var(--texto-suave);
}

/* Na nota o asterisco é o marcador de abertura: fica na linha de base e cola
   ao texto, para se ler como "* Estes produtos…" e não como expoente solto. */
.produtos__nota-marca {
  vertical-align: baseline;
  line-height: inherit;
  font-size: 1em;
  margin-right: .35em;
}

@media (min-width: 768px) {
  .produtos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e6);
    margin-top: var(--e8);
  }
  .produtos__nota { margin-top: var(--e8); }
}

/* -------------------------------------------------------------------------
   10 — Contacto
   ------------------------------------------------------------------------- */

.contacto__grelha {
  display: grid;
  gap: var(--e7);
}

.contacto__imagem {
  width: 100%;
  height: 240px;
  border-radius: var(--raio);
  object-fit: cover;
}

.contacto__intro {
  max-width: 46ch;
  margin-top: var(--e5);
  color: var(--texto-suave);
}

.dados { margin: var(--e7) 0 0; }

.dados dt {
  font-size: .875rem;
  letter-spacing: .06em;
  color: var(--texto-suave);
}

.dados dd {
  margin: var(--e1) 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.dados dd + dt { margin-top: var(--e5); }
.dados a { text-decoration-color: rgb(var(--texto-rgb) / .3); text-underline-offset: 3px; }
.dados a:hover { text-decoration-color: var(--dourado); }

.contacto__accao { margin-top: var(--e6); }

.contacto__mapa {
  margin-top: var(--e5);
  font-size: .9375rem;
}
.contacto__mapa a {
  color: var(--texto-suave);
  text-underline-offset: 4px;
  text-decoration-color: rgb(var(--texto-suave-rgb) / .4);
}
.contacto__mapa a:hover { color: var(--texto); text-decoration-color: var(--dourado); }

@media (min-width: 1024px) {
  .contacto__grelha {
    grid-template-columns: 1fr 1fr;
    gap: var(--e8);
    align-items: center;
  }
  .contacto__imagem { height: 100%; min-height: 420px; }
}

/* -------------------------------------------------------------------------
   11 — Rodapé
   ------------------------------------------------------------------------- */

.rodape {
  padding-block: var(--e7);
  background: var(--verde);
  color: rgb(var(--sobre-escuro-rgb) / .8);
  font-size: var(--t-rodape);
  line-height: 1.6;
}

.rodape__grelha {
  display: grid;
  gap: var(--e7);
}

/* A logo tem margem própria a mais em cima e o desenho é claro sobre verde:
   sem um pouco de ar à volta e uma sombra muito ténue, parece colada. */
.rodape__marca { display: flex; justify-content: flex-start; }
.rodape__marca img {
  height: 120px;
  width: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .22));
}

.rodape__bloco h2 {
  margin-bottom: var(--e3);
  font-family: var(--corpo);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--sobre-escuro);
}

.rodape__bloco p { white-space: pre-line; }
.rodape__accao { margin-top: var(--e4); }
.rodape a { text-decoration-color: rgb(var(--sobre-escuro-rgb) / .35); text-underline-offset: 3px; }
.rodape a:hover { color: var(--sobre-escuro); text-decoration-color: var(--dourado-claro); }

.rodape__base {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid rgb(var(--sobre-escuro-rgb) / .15);
  font-size: .8125rem;
  color: rgb(var(--sobre-escuro-rgb) / .6);
}

@media (min-width: 768px) {
  .rodape { padding-block: var(--e8); }
  .rodape__grelha { grid-template-columns: auto 1fr 1fr; gap: var(--e8); align-items: start; }
  .rodape__marca img { height: 150px; }
}

/* -------------------------------------------------------------------------
   Entrada ao rolar

   Três coisas fazem a diferença face a um simples fade:
   — a curva sai devagar no fim, em vez de parar de repente;
   — cada elemento de uma fila entra com um atraso próprio (--atraso), o que
     dá leitura da esquerda para a direita em vez de tudo de uma vez;
   — as imagens entram com uma escala mínima, que lê como aproximação lenta.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-revelar] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 900ms cubic-bezier(.22, 1, .36, 1) var(--atraso, 0ms),
      transform 900ms cubic-bezier(.22, 1, .36, 1) var(--atraso, 0ms);
    will-change: opacity, transform;
  }

  [data-revelar='visivel'] {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Imagens dentro de um bloco a revelar: entram um pouco depois do texto e
     com uma aproximação de escala. */
  [data-revelar] img {
    transform: scale(1.04);
    transition: transform 1200ms cubic-bezier(.22, 1, .36, 1) var(--atraso, 0ms);
  }
  [data-revelar='visivel'] img { transform: none; }

  /* O herói não espera pelo scroll — entra ao carregar.

     O estado escondido vive dentro do @keyframes, nunca na regra base, e o
     preenchimento é `backwards`, não `forwards`. A diferença importa: assim o
     estado normal do elemento é visível, e o esconderijo só existe enquanto a
     animação corre. Se a animação não correr — separador em segundo plano,
     browser a travar quadros — o texto aparece à mesma. Com `opacity: 0` na
     regra base, o herói ficava em branco. */
  .heroi__texto > * {
    animation: subir 1100ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .heroi h1 { animation-delay: 120ms; }
  .heroi__subtitulo { animation-delay: 280ms; }
  .heroi .botao { animation-delay: 440ms; }

  @keyframes subir {
    from { opacity: 0; transform: translateY(20px); }
  }
}