@import url('../fonts/fontes.css');

/* ==========================================================================
   Psicóloga Patrícia Rocha — CRP 07/6944

   A identidade sai da marca da própria Patrícia: uma linha única que parte de
   um emaranhado e se abre numa espiral. A espiral não fecha — volta ao mesmo
   ângulo num raio diferente. Repetição com deslocamento, que é o que a clínica
   psicanalítica trata. Esse fio é a assinatura do site e aparece três vezes,
   nos três pontos em que a página vira de assunto.

   As cores têm nome do que existe na sala dela: o reboco cinza-claro das
   paredes, o musgo do logotipo, a tinta quase preta. O tijolo, a cortina
   bordô e a luminária vermelha entram só pelas fotografias — a interface fica
   fria de propósito, porque as fotos já são quentes demais para competir.
   ========================================================================== */

:root {
  /* — cor ———————————————————————————————————————————————————————— */
  --reboco: #e4e2da;        /* a parede rebocada, fundo da página */
  --reboco-claro: #f1f0ec;  /* superfícies levantadas */
  --reboco-fundo: #d9d6cd;  /* recuos, galeria */
  --musgo: #6a8852;         /* o verde do logotipo da Patrícia */
  --musgo-texto: #4c6639;   /* mesmo verde, escurecido até passar em AA */
  --musgo-fundo: #2f3d29;   /* verde profundo — fecho e rodapé */
  --musgo-claro: #a9c091;   /* texto de apoio sobre o verde profundo */
  --tinta: #1f231d;         /* texto corrente */
  --grafite: #4f544a;       /* texto secundário */
  --linha: rgb(31 35 29 / 15%);
  --linha-forte: rgb(31 35 29 / 28%);
  --fio: rgb(31 35 29 / 38%);  /* o traço da assinatura, um pouco mais firme */

  /* — tipografia ————————————————————————————————————————————————— */
  --serifa: 'Vollkorn', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --t-titulo: clamp(2.45rem, 1.55rem + 3.4vw, 4.2rem);
  --t-secao: clamp(1.85rem, 1.35rem + 1.9vw, 2.8rem);
  --t-sub: clamp(1.2rem, 1.06rem + 0.5vw, 1.45rem);
  --t-corpo: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem);
  --t-guia: clamp(1.15rem, 1.06rem + 0.4vw, 1.3rem);
  --t-mini: 0.8125rem;

  /* — espaço ————————————————————————————————————————————————————— */
  --margem: clamp(1.25rem, 4.5vw, 3.5rem); /* nunca menos que 20px de lateral */
  --largura: 74rem;
  --medida: 62ch;                          /* linha de leitura confortável */
  --respiro: clamp(4rem, 8vw, 7.5rem);     /* entre seções */
  /* Quando a última coisa da seção é um botão, ele precisa de mais chão antes
     de o fundo mudar de cor — senão fica espremido contra a borda. */
  --respiro-cta: clamp(6rem, 11vw, 10rem);
  --cabecalho: 4.25rem;
}

/* ── base ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecalho) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--reboco);
  color: var(--tinta);
  font-family: var(--serifa);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.68;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* rede de segurança; o layout não deve precisar dela */
}

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

img { height: auto; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection {
  background: var(--musgo);
  color: #fff;
}

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

.pular {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--tinta);
  color: var(--reboco-claro);
  font-family: var(--sans);
  font-size: var(--t-mini);
  text-decoration: none;
  transition: top 0.18s ease;
}
.pular:focus { top: 0.5rem; }

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

/* ── estruturas repetidas ─────────────────────────────────────────────── */

.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao { padding-block: var(--respiro); }

.secao--recuo { background: var(--reboco-fundo); }

.guia {
  font-family: var(--sans);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  margin: 0 0 1.1rem;
}

.titulo {
  font-size: var(--t-secao);
  margin: 0 0 1.6rem;
}

.titulo--curto { max-width: 18ch; }

.guia--claro { color: rgb(233 238 226 / 62%); }

.definicoes {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.prosa { max-width: var(--medida); }

.prosa--larga { max-width: 68ch; }

.abertura {
  font-size: var(--t-guia);
  line-height: 1.58;
  color: var(--tinta);
}

/* ── o fio: a assinatura ──────────────────────────────────────────────── */

/* Três estados da mesma linha, um em cada virada da página:
   o nó, a primeira volta, e a espiral que não fecha. */
.fio {
  display: block;
  width: 100%;
  color: var(--fio);
  margin-block: calc(var(--respiro) * -0.15);
  pointer-events: none;
}

.fio svg,
.fio img {
  width: 100%;
  height: auto;
}

/* Enquanto o JS não trocou o <img> por SVG inline, a linha não herda cor —
   a opacidade deixa o traço no mesmo peso visual do estado final. */
.fio img { opacity: 0.38; }

.fio path {
  stroke-width: 1.35;
}

/* ── cabeçalho ────────────────────────────────────────────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(228 226 218 / 92%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.topo[data-grudado='sim'] {
  border-bottom-color: var(--linha);
  background: rgb(228 226 218 / 97%);
}

.topo__interno {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  min-height: var(--cabecalho);
  padding-block: 0.5rem;
}

.assinatura {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.assinatura__marca {
  width: 3.6rem;
  height: auto;
  color: var(--tinta);
  flex: 0 0 auto;
}

/* O traço não escala junto (non-scaling-stroke), então o peso é escolhido para
   o tamanho em que a marca aparece de fato. */
.assinatura__marca path { stroke-width: 1.2; }

.assinatura__nome {
  display: block;
  font-family: var(--serifa);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.assinatura__registro {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-top: 0.18rem;
}

.menu { margin-left: auto; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--tinta);
  text-decoration: none;
  padding-block: 0.4rem;
  position: relative;
  white-space: nowrap;
}

.menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1px;
  background: var(--musgo-texto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.menu__link[aria-current='true']::after,
.menu__link:hover::after { transform: scaleX(1); }

.topo__acao { flex: 0 0 auto; }

.gatilho {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--linha-forte);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  border-radius: 2px;
}

.gatilho__barras,
.gatilho__barras::before,
.gatilho__barras::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentcolor;
  transition: transform 0.24s ease, opacity 0.18s ease;
}

.gatilho__barras::before,
.gatilho__barras::after {
  content: '';
  position: absolute;
}

.gatilho__barras::before { transform: translateY(-0.38rem); }
.gatilho__barras::after { transform: translateY(0.38rem); }

.gatilho[aria-expanded='true'] .gatilho__barras { background: transparent; }
.gatilho[aria-expanded='true'] .gatilho__barras::before { transform: rotate(45deg); }
.gatilho[aria-expanded='true'] .gatilho__barras::after { transform: rotate(-45deg); }

/* ── botões ───────────────────────────────────────────────────────────── */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.35rem;
  border: 1px solid var(--musgo-fundo);
  border-radius: 2px;
  background: var(--musgo-fundo);
  color: var(--reboco-claro);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

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

.botao--compacto {
  padding: 0.58rem 1rem;
  font-size: 0.8125rem;
}

.botao--vazado {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha-forte);
}

.botao--vazado:hover {
  background: var(--musgo-fundo);
  border-color: var(--musgo-fundo);
  color: var(--reboco-claro);
}

.botao--claro {
  background: var(--reboco-claro);
  border-color: var(--reboco-claro);
  color: var(--musgo-fundo);
}

.botao--claro:hover {
  background: #fff;
  border-color: #fff;
  color: var(--musgo-fundo);
}

.botao__seta {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.botao:hover .botao__seta { transform: translateX(2px); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.capa {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: min(84svh, 40rem);
}

.capa__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.capa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* O véu existe para o texto ser legível, não para apagar a foto.
   Em tela estreita o texto desce para o rodapé do hero e o véu sobe de baixo:
   a janela e a vista, que são o assunto da imagem, ficam limpas no alto.
   Em tela larga ele vem da esquerda, onde o texto está, e libera a janela.
   Os valores não são chute — saíram da medição por pixel em scripts/qa.mjs. */
.capa__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgb(20 24 18 / 94%) 0%,
      rgb(20 24 18 / 92%) 46%,
      rgb(20 24 18 / 72%) 64%,
      rgb(20 24 18 / 26%) 84%,
      rgb(20 24 18 / 8%) 100%
    );
}

@media (width >= 46rem) {
  .capa__veu {
    background:
      linear-gradient(
        100deg,
        rgb(20 24 18 / 92%) 0%,
        rgb(20 24 18 / 86%) 34%,
        rgb(20 24 18 / 46%) 64%,
        rgb(20 24 18 / 14%) 100%
      );
  }
}

.capa__interno {
  align-self: end;
  /* o rodapé do Hero segue a mesma régua de folga sob botão do resto do site */
  padding-block: clamp(4rem, 12vh, 7rem) clamp(4.5rem, 9vh, 5.5rem);
}

@media (width >= 46rem) {
  .capa__interno {
    align-self: center;
    padding-block: clamp(4rem, 12vh, 7rem);
  }
}

.capa__texto { max-width: 34rem; }

.capa__guia {
  font-family: var(--sans);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.25rem;
}

.capa__titulo {
  font-size: var(--t-titulo);
  color: #fff;
  margin: 0 0 1.1rem;
  letter-spacing: -0.02em;
}

.capa__linha {
  font-size: var(--t-guia);
  color: #fff;
  margin: 0 0 0.55rem;
  line-height: 1.4;
}

.capa__apoio {
  color: rgb(255 255 255 / 94%);
  margin: 0 0 2rem;
  max-width: 30rem;
}

/* ── sobre ────────────────────────────────────────────────────────────── */

.sobre__grade {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}

.sobre__retrato {
  margin: 0;
  position: relative;
}

.sobre__retrato img {
  width: 100%;
  border-radius: 2px;
}

.sobre__legenda {
  font-family: var(--sans);
  font-size: var(--t-mini);
  color: var(--grafite);
  margin-top: 0.85rem;
  line-height: 1.5;
}

.ficha {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--linha);
}

.ficha__item {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--linha);
}

.ficha__rotulo {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite);
  margin: 0;
}

.ficha__valor {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

/* ── quando o sofrimento aparece ──────────────────────────────────────── */

.formas {
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha);
}

.formas__item { border-bottom: 1px solid var(--linha); }

.formas__nome {
  font-size: var(--t-sub);
  font-weight: 600;
  margin: 0;
  padding-block: 1.6rem 0.5rem;
}

.formas__texto {
  margin: 0;
  padding-bottom: 1.6rem;
  color: var(--grafite);
  max-width: 54ch;
}

/* ── atendimentos ─────────────────────────────────────────────────────── */

.atendimento__grade {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}

.atendimento__foto { margin: 0; }

.atendimento__foto img {
  width: 100%;
  border-radius: 2px;
}

.condicoes {
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--linha);
}

.condicoes__item {
  display: grid;
  gap: 0.2rem 1.75rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--linha);
}

.condicoes__rotulo {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--musgo-texto);
  margin: 0;
  padding-top: 0.22rem;
}

.condicoes__texto {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.atendimento__acao { margin-top: 2.25rem; }

.secao--fecha-com-botao { padding-bottom: var(--respiro-cta); }

/* ── consultório ──────────────────────────────────────────────────────── */

.consultorio__cabeca {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.endereco {
  font-style: normal;
  border-top: 1px solid var(--linha);
  padding-top: 1.35rem;
}

.endereco__rua {
  font-size: var(--t-sub);
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.endereco__detalhe {
  margin: 0 0 1.35rem;
  color: var(--grafite);
  font-size: 1rem;
}

.endereco__horario {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--grafite);
  margin: 0;
  line-height: 1.55;
}

.galeria {
  list-style: none;
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

/* A proporção vive no botão, e a imagem preenche com object-fit: cover. Assim
   as fotos de uma mesma linha têm sempre a mesma altura — sem isso a linha fica
   com barriga, porque cada foto tem uma proporção diferente. */
.galeria__botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* O <picture> precisa repassar a altura: sem isso o height:100% da imagem se
   resolve contra altura automática e a foto não preenche a célula. */
.galeria__botao picture {
  display: block;
  width: 100%;
  height: 100%;
}

.galeria__botao img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Cada foto recebe um recorte perto do seu enquadramento real. */
.galeria__item--panorama .galeria__botao { aspect-ratio: 2.77; }

.galeria__botao:hover img { transform: scale(1.03); }

.mapa {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  border: 1px solid var(--linha);
  border-radius: 2px;
  overflow: hidden;
  background: var(--reboco-claro);
}

.mapa__convite {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.mapa__nota {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--grafite);
  max-width: 48ch;
  line-height: 1.6;
}

.mapa__moldura {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: 0;
}

@media (width <= 40rem) {
  .mapa__moldura { aspect-ratio: 4 / 3; }
}

/* ── artigos ──────────────────────────────────────────────────────────── */

.artigos__lista {
  list-style: none;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}

.artigo { border-bottom: 1px solid var(--linha); }

.artigo__link {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding-block: 1.6rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.artigo__link:hover { background: rgb(106 136 82 / 7%); }

.artigo__titulo {
  font-size: var(--t-sub);
  font-weight: 600;
  margin: 0;
  line-height: 1.28;
}

.artigo__link:hover .artigo__titulo { color: var(--musgo-texto); }

.artigo__resumo {
  margin: 0;
  color: var(--grafite);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 56ch;
}

.artigos__autoria {
  margin: 2rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--grafite);
}

.artigos__autoria a { color: var(--musgo-texto); }

/* ── página de artigo ─────────────────────────────────────────────────────
   O bloco chama-se `leitura`, e não `artigo`, de propósito: `.artigo__*` já é
   o item da lista de artigos da Home. Quando os dois dividiam o nome, a regra
   desta seção — que vem depois no arquivo — vencia a cascata e os títulos da
   lista da Home saíam do tamanho de um h1.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* A página de artigo é só texto, então a medida de leitura manda em tudo. */
.leitura { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--respiro-cta); }

.migalhas {
  font-family: var(--sans);
  font-size: var(--t-mini);
  color: var(--grafite);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  /* o recuo negativo devolve o alinhamento que o padding dos links empurra */
  margin: -0.6rem -0.4rem clamp(1.75rem, 4.5vw, 3rem);
}

/* Alvo de toque: sem o recuo os links ficam com 31x22 px no celular. Numa
   trilha horizontal o vizinho está ao lado, então a largura importa tanto
   quanto a altura. */
.migalhas a {
  display: inline-block;
  padding: 0.6rem 0.4rem;
  color: var(--musgo-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.leitura__cabeca { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* A medida vai no próprio título: `ch` se resolve contra a fonte do elemento,
   e num contêiner com o tamanho do corpo isso espremeria o h1 a sete letras
   por linha. */
.leitura__titulo {
  font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 1.5rem;
  max-width: 17ch;
  text-wrap: balance;
}

.leitura__ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linha);
  font-family: var(--sans);
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--grafite);
  max-width: 44ch;
}

.leitura__autora { color: var(--tinta); }

.leitura__corpo { max-width: var(--medida); }

.leitura__abertura {
  font-size: var(--t-guia);
  line-height: 1.55;
  margin-bottom: 1.4em;
}

.leitura__secao {
  font-size: var(--t-sub);
  margin: 2.6rem 0 1rem;
}

.leitura__lista {
  margin: 0 0 1.3em;
  padding-left: 1.15rem;
}

.leitura__lista li { margin-bottom: 0.65em; }
.leitura__lista li:last-child { margin-bottom: 0; }

.leitura__citacao {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--musgo);
  font-style: italic;
}

.leitura__pe {
  max-width: var(--medida);
  margin-top: clamp(2.75rem, 6vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}

.leitura__assinatura {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--grafite);
}

.leitura__assinatura a {
  color: var(--tinta);
  font-weight: 500;
}

/* ── outros textos ────────────────────────────────────────────────────── */

.tambem__lista {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}

.tambem__item { border-bottom: 1px solid var(--linha); }

.tambem__link {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding-block: 1.5rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.tambem__link:hover { background: rgb(106 136 82 / 7%); }

.tambem__titulo {
  font-size: var(--t-sub);
  font-weight: 600;
  margin: 0;
  line-height: 1.28;
}

.tambem__link:hover .tambem__titulo { color: var(--musgo-texto); }

.tambem__resumo {
  margin: 0;
  color: var(--grafite);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 56ch;
}

/* ── chamada final ────────────────────────────────────────────────────── */

.fecho {
  background: var(--musgo-fundo);
  color: var(--reboco-claro);
  padding-bottom: var(--respiro-cta);
}

.fecho .fio { color: rgb(233 238 226 / 34%); }

.fecho__titulo {
  font-size: var(--t-secao);
  color: #fff;
  margin: 0 0 1.35rem;
  max-width: 20ch;
}

.fecho__texto {
  max-width: 50ch;
  color: rgb(233 238 226 / 88%);
  margin-bottom: 2rem;
}

/* ── rodapé ───────────────────────────────────────────────────────────── */

.rodape {
  background: var(--musgo-fundo);
  color: rgb(233 238 226 / 78%);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.7;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid rgb(233 238 226 / 14%);
}

.rodape__grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.rodape__marca {
  width: 5.25rem;
  color: rgb(233 238 226 / 72%);
  margin-bottom: 1.1rem;
}

.rodape__marca path { stroke-width: 1.25; }

.rodape__nome {
  font-family: var(--serifa);
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.rodape__local { margin: 0; }

.rodape__titulo {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(233 238 226 / 74%);
  margin: 0 0 0.9rem;
}

.rodape__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.rodape__links a {
  display: inline-block;
  /* altura de toque confortável no celular sem afastar demais no desktop */
  padding-block: 0.55rem;
  text-decoration: none;
  color: rgb(233 238 226 / 82%);
  transition: color 0.18s ease;
}

.rodape__links a:hover { color: #fff; }

/* Seletor com a lista junto de propósito: `.rodape__links a` é mais específico
   que `.social` sozinho e venceria o display, empilhando o ícone sobre o texto. */
.rodape__links a.social,
.social {
  display: inline-flex;
  align-items: center;
  padding-block: 0.55rem;
  gap: 0.5rem;
  text-decoration: none;
  color: rgb(233 238 226 / 82%);
}

.social:hover { color: #fff; }

.social svg { width: 1.15rem; height: 1.15rem; }

.rodape__emergencia {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(233 238 226 / 14%);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgb(233 238 226 / 68%);
  max-width: 78ch;
}

.rodape__emergencia strong {
  color: rgb(233 238 226 / 92%);
  font-weight: 500;
}

.rodape__fim {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgb(233 238 226 / 14%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgb(233 238 226 / 74%);
}

/* ── atalho flutuante de WhatsApp ─────────────────────────────────────── */

/* Verde oficial #25D366 e o logotipo oficial da marca.
   Sobre esse verde, texto branco dá 1,98:1 — reprovaria em AA. O logotipo em si
   é isento (WCAG 1.4.11 dispensa logo e nome de marca), então o glifo fica
   branco como manda a marca, e o rótulo, que é texto comum, fica na tinta
   escura: 8,04:1. O anel em #075E54, o verde escuro da própria paleta do
   WhatsApp, dá ao controle uma borda de 5,91:1 contra o fundo da página — o
   verde claro sozinho ficaria em 1,53:1 e o botão não teria contorno. */
.flutuante {
  position: fixed;
  z-index: 45;
  right: max(var(--margem), env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem;
  border: 1.5px solid #075e54;
  border-radius: 999px;
  background: #25d366;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 22px -12px rgb(7 94 84 / 55%);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.2s ease;
}

.flutuante:hover { filter: brightness(1.06); }

.flutuante__marca {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  color: #fff; /* o glifo branco é o lockup oficial da marca */
}

/* Em tela estreita fica só o logotipo: o rótulo comeria metade da largura.
   O nome acessível continua vindo do texto, que segue no DOM. */
.flutuante__texto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (width >= 30rem) {
  .flutuante { padding: 0.75rem 1.15rem 0.75rem 0.9rem; }

  .flutuante__texto {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

/* Estado de entrada: só some de vez com [hidden], que o JS controla. */
.flutuante[data-entrando='sim'] {
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
}

/* ── lightbox da galeria ──────────────────────────────────────────────── */

/* Um <dialog> fechado é escondido pelo navegador com display:none. Declarar
   display aqui sem qualificar reativaria o diálogo fechado por cima da página
   inteira — por isso o layout só vale com [open]. */
.lupa:not([open]) { display: none; }

.lupa[open] {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(18 21 16 / 94%);
  border: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lupa::backdrop { background: rgb(18 21 16 / 94%); }

.lupa__figura {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  max-width: 100%;
}

.lupa__figura img {
  max-width: 100%;
  max-height: calc(100svh - 11rem);
  width: auto;
  object-fit: contain;
  border-radius: 2px;
}

.lupa__legenda {
  margin: 0;
  padding-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(233 238 226 / 80%);
  text-align: center;
  max-width: 60ch;
}

.lupa__barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lupa__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(233 238 226 / 30%);
  border-radius: 2px;
  background: transparent;
  color: rgb(233 238 226 / 88%);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.lupa__botao:hover {
  background: rgb(233 238 226 / 14%);
  color: #fff;
}

.lupa__botao svg { width: 1.1rem; height: 1.1rem; }

.lupa__conta {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: rgb(233 238 226 / 65%);
  min-width: 4ch;
  text-align: center;
}

body[data-travado='sim'] { overflow: hidden; }

/* ==========================================================================
   Larguras. O celular é o estado base; daqui para cima o layout se abre.
   ========================================================================== */

/* — até 60rem: menu vira painel ————————————————————————————————— */
@media (width <= 60rem) {
  .gatilho { display: inline-flex; position: relative; }

  .menu {
    position: fixed;
    inset: var(--cabecalho) 0 auto;
    margin: 0;
    background: var(--reboco-claro);
    border-bottom: 1px solid var(--linha);
    max-height: calc(100svh - var(--cabecalho));
    overflow-y: auto;
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s;
    box-shadow: 0 18px 40px -28px rgb(31 35 29 / 55%);
  }

  .menu[data-aberto='sim'] {
    transform: translateY(0);
    visibility: visible;
  }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--margem) 1.5rem;
  }

  .menu__link {
    display: block;
    padding-block: 0.95rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--linha);
  }

  .menu__link::after { display: none; }

  .menu__link[aria-current='true'] { color: var(--musgo-texto); }

  .topo__acao { display: none; }

  .menu__acao { padding: 1.25rem var(--margem) 0; }
}

/* — a partir de 40rem ————————————————————————————————————————— */
@media (width >= 40rem) {
  .ficha__item,
  .condicoes__item {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }

  .galeria {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }

  /* Em duas colunas o panorama atravessa a linha, e a última foto quadrada
     ficaria sozinha deixando um buraco — então ela também atravessa, num
     enquadramento mais largo. No desktop são três por linha e isso não ocorre. */
  .galeria__item--panorama { grid-column: 1 / -1; }

  .galeria__item--quadro:last-child { grid-column: 1 / -1; }
  .galeria__item--quadro:last-child .galeria__botao { aspect-ratio: 1.9; }

  .artigo__link { grid-template-columns: 1fr; }
}

/* — a partir de 48rem ————————————————————————————————————————— */
@media (width >= 48rem) {
  .formas {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  /* a borda de cima já vem do contêiner; some com a do primeiro par */
  .formas__item:nth-child(-n + 2) .formas__nome { padding-top: 1.6rem; }

  .consultorio__cabeca { grid-template-columns: 1.1fr 1fr; }

  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* — a partir de 60rem: desktop ————————————————————————————————— */
@media (width >= 60rem) {
  /* o CTA do painel é só para o menu em telas estreitas */
  .menu__acao { display: none; }

  .sobre__grade {
    grid-template-columns: minmax(18rem, 25rem) 1fr;
  }

  .sobre__retrato {
    position: sticky;
    top: calc(var(--cabecalho) + 2rem);
  }

  .atendimento__grade {
    grid-template-columns: 1fr minmax(20rem, 30rem);
  }

  .atendimento__foto {
    order: 2;
    position: sticky;
    top: calc(var(--cabecalho) + 2rem);
  }

  .artigo__link,
  .tambem__link {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.4rem 3rem;
  }

  /* Linha 1: o panorama das duas poltronas, que é o coração do atendimento.
     Linha 2: as três fotos quadradas do ambiente. Sem buracos na grade. */
  .galeria {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9rem;
  }

  .galeria__item--panorama { grid-column: span 6; }
  .galeria__item--quadro,
  .galeria__item--quadro:last-child { grid-column: span 2; }

  .galeria__item--quadro .galeria__botao,
  .galeria__item--quadro:last-child .galeria__botao { aspect-ratio: 1.15; }
}

/* ==========================================================================
   Movimento: um gesto só. O fio se desenha quando entra na tela, e o topo da
   página assenta no carregamento. Nada mais anima.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .fio path {
    stroke-dasharray: var(--traco, 4000);
    stroke-dashoffset: var(--traco, 4000);
  }

  .fio[data-visivel='sim'] path {
    transition: stroke-dashoffset 2.4s cubic-bezier(0.37, 0.16, 0.2, 1);
    stroke-dashoffset: 0;
  }

  .assenta {
    opacity: 0;
    transform: translateY(0.85rem);
    animation: assentar 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--atraso, 0s);
  }
}

@keyframes assentar {
  to {
    opacity: 1;
    transform: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Sem JavaScript o fio aparece inteiro e nada fica escondido. */
.sem-js .assenta { opacity: 1; transform: none; animation: none; }
.sem-js .fio path { stroke-dasharray: none; stroke-dashoffset: 0; }

@media (hover: none) {
  .galeria__botao:hover img { transform: none; }
  .artigo__link:hover,
  .tambem__link:hover { background: none; }
}

@media print {
  .topo, .gatilho, .lupa, .capa__veu { display: none !important; }
  body { background: #fff; color: #000; }
}