/* =========================================================
   Tsoah — páginas internas
   Carregada só nas páginas de conteúdo, depois de style.css.
   Reaproveita os tokens, os botões, o header, o menu e o rodapé
   da home; aqui moram apenas os blocos que a home não tem.

   Os tamanhos de texto usam clamp() em vez de degraus por media
   query: a home precisava bater com o Figma de 1920, estas páginas
   não, então elas escalam sozinhas entre 320 e 1440.
   ========================================================= */

:root {
  /* O piso era 64px, o que no celular empilhava 128px entre uma seção e a
     seguinte — num texto de 390px de largura isso lê como buraco, não como
     respiro. Em 44px o intervalo cai para 88px e as seções voltam a
     parecer partes da mesma página. Acima de 630px o 7vw já passa de 44,
     então nada muda no desktop. */
  --secao-espaco: clamp(44px, 7vw, 112px);
  --texto: clamp(16px, 1.15vw, 18px);
  /* o creme do fundo das ilustrações de abertura — mais quente e mais
     claro que o --cream do site */
  --creme-arte: #f7f3e9;

  /* O azul das páginas internas é o do núcleo do Eixo Integrador
     (#073160, amostrado do próprio a-ellipse73.png), não o #06307c da
     home. Este arquivo só carrega nas páginas internas, então basta
     redefinir o token aqui: o header, os botões e os links herdam. */
  --navy: #073160;
  --navy-deep: #073160;
  --navy-rgb: 7 49 96;
}

/* auto-fit com minmax(Npx, 1fr) não encolhe abaixo de N: numa tela de
   320px a coluna continua com 300 e estoura. O min(Npx, 100%) deixa a
   coluna ceder quando não há espaço — é o que mantém a página inteira
   dentro da tela sem precisar de media query para cada grade. */

/* ---------- 1. Casca das seções ---------- */

.secao { padding: var(--secao-espaco) 0; background: var(--white); }
.secao--creme { background: var(--cream); }
.secao--fecho { background: var(--cream); }

.secao + .secao--creme,
.secao--creme + .secao { border-top: 1px solid var(--line); }

.secao-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.secao-head { max-width: 820px; margin-bottom: clamp(36px, 4vw, 56px); }

.secao-head h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}

.secao-lead {
  margin-top: 24px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* O tamanho do texto corrido mora na própria seção, não em `.secao p`:
   herdado, ele perde de qualquer classe posta num parágrafo. Com a regra
   no `p`, a especificidade (0,2,0) atropelava .ressoou, .nota-eco e .par,
   que precisavam de !important para existir. */
.secao { font-size: var(--texto); line-height: 1.6; color: var(--ink-soft); }
.secao p + p { margin-top: 16px; }
.secao strong { font-weight: 600; color: var(--ink); }

/* duas colunas de texto que viram uma só no celular */
.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

/* ---------- 1. O que é a Integração Psicológica (dobra) ----------
   Texto à esquerda, ilustração à direita. A coluna da imagem é a mais
   estreita e estica até a altura do texto: o bloco tem cinco parágrafos,
   então a imagem acompanha em vez de ditar a altura. */
.oque {
  /* a dobra fica sob o header, que nesta largura flutua sobre a página */
  padding-top: calc(80px + var(--secao-espaco));
}

.oque-inner {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .oque-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.oque-texto { display: flex; flex-direction: column; gap: 18px; }

.oque-texto h1 {
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.oque-texto p { max-width: 62ch; }

/* Proporção fixa em 3/4, a mesma do arquivo da ilustração: assim ela aparece
   inteira e o object-fit não tem o que recortar.

   3/4 e não esticar até a altura do texto porque o texto tem cinco
   parágrafos e passa de 1200px: a coluna da imagem ficaria 484x1300, um
   recorte que cortaria a orquestra e deixaria só o maestro.

   Daí o sticky: com proporção fixa a imagem acaba antes do texto e deixaria
   um vão à direita. Grudada, ela acompanha a leitura. */
.oque-arte {
  position: sticky;
  top: 100px;
  align-self: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--creme-arte);
}

/* dois seletores de classe: nesta folha, estilo de imagem dentro de um
   componente perde para as regras de imagem que já existem se vier com um só */
.oque-arte .oque-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* O rótulo é longo: com o white-space: nowrap que vem do .btn, ele media
   328px e estourava a coluna numa tela de 320px. Aqui ele pode quebrar em
   duas linhas, e a seta fica colada na última palavra por um  . */
.oque-btn {
  align-self: flex-start;
  display: inline-block;
  max-width: 100%;
  margin-top: 12px;
  white-space: normal;
  line-height: 1.35;
}

/* ---------- 2. Arquitetura da Integração Psicológica ----------
   É a seção .arq da home: mesmo layout, mesmo diagrama. Deixou de ser a
   primeira dobra quando o bloco "O que é" entrou na frente, então perdeu
   o espaço extra de topo que compensava o header flutuante — agora quem
   carrega esse espaço é o .oque. */

.pag-abre .arq-inner {
  height: auto;
  min-height: 760px;
  padding-top: var(--secao-espaco);
  padding-bottom: var(--secao-espaco);
}

/* A dobra de abertura passa a usar a mesma goteira do resto da página
   (var(--gutter)) em vez dos 20px + 1px de borda que o .arq-inner herda
   da home. Assim a logo do header, o h1 e o texto de todas as seções
   abaixo caem na mesma vertical. A borda lateral existe na home porque
   lá a seção fica no meio da página; aqui ela é a primeira dobra. */
@media (min-width: 1024px) {
  .pag-abre .arq-inner {
    padding-inline: var(--gutter);
    border-left: 0;
    border-right: 0;
  }
}

.pag-abre .arq-head { gap: 36px; }
.pag-abre .arq-head-text { gap: 20px; }

/* 440px em vez dos 389px da home: é o que permite "Arquitetura da" caber
   em uma linha e o título fechar em três, sem mudar o corpo da fonte. */
@media (min-width: 1024px) {
  .pag-abre .arq-head { flex: 0 0 440px; width: 440px; }
}

/* .arq-titulo porque este título virou h2 quando o bloco "O que é" assumiu
   o h1 da página — a página tem um h1 só */
.pag-abre h1,
.pag-abre .arq-titulo {
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}

.pag-abre .abre-lead {
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.pag-abre .arq-head-text > p:last-of-type { font-size: var(--texto); line-height: 1.6; }

/* ---------- 3. Frase com a arte à esquerda ---------- */

.frase--invertida .frase-inner { justify-content: flex-start; }

.frase--invertida .frase-text {
  width: 600px;
  border-right: 0;
  border-left: 1px solid var(--line);
  padding-left: 56px;
  margin-left: auto;
}

.frase--invertida .frase-art {
  left: 0;
  right: auto;
}

.frase--invertida h2 {
  max-width: 460px;
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}

/* ---------- 4. Os cinco corpos ----------
   O fio de 1px entre os cartões é o próprio gap, com o fundo da grade
   aparecendo por baixo — assim nenhum cartão precisa saber se tem
   vizinho à direita ou embaixo. */

.corpos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
}

.corpo {
  background: var(--cream);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--texto);
  line-height: 1.6;
}

/* o perceptivo percebe os outros quatro: ocupa a linha inteira */
.corpo--largo { grid-column: 1 / -1; }

.corpo-no { width: 34px; height: 34px; max-width: none; margin-bottom: 8px; }

.corpo h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--cor, var(--ink));
  margin: 0;
}

.corpo-tipo {
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--ink-soft);
  opacity: .72;
}



/* ---------- 5. Blocos abertos ----------
   Esta página não esconde mais conteúdo atrás de <details>: o texto do
   documento vem inteiro, visível. O que estruturava os "Ler mais" virou
   bloco próprio — a analogia da charrete, o destaque do Eixo Integrador
   e as funções estruturantes. */

/* Texto corrido numa coluna só: a largura de leitura é a mesma dos
   outros blocos longos da página (820px), e os parágrafos se seguem de
   cima para baixo, sem a dúvida de descer ou atravessar. */
.corrido { max-width: 820px; }
.corrido > p + p { margin-top: clamp(18px, 1.8vw, 26px); }

/* o parágrafo que abre a sequência: um ponto maior que os seguintes */
.lead-solto {
  max-width: 820px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
}
/* fora do .corrido ele continua sendo um bloco solto, com respiro abaixo */
.secao-inner > .lead-solto { margin-bottom: clamp(28px, 3vw, 44px); }

/* subtítulo dentro de uma seção, quando o assunto vira um segundo tempo */
.sub-titulo {
  margin: clamp(40px, 4.5vw, 64px) 0 clamp(20px, 2vw, 28px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}

/* ---------- 5a. A analogia da charrete ----------
   A ilustração traz o texto desenhado dentro dela, ilegível no celular.
   A legenda em HTML repete o mapeamento e usa as cores dos cinco nós do
   diagrama, para o leitor ligar a metáfora ao eixo. */

.analogia {
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  background: #faf3e8;
}

.analogia-intro {
  margin-bottom: clamp(18px, 2vw, 26px);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .66;
}

.analogia-quadro { width: 100%; }

/* só aparece onde a ilustração rola */
.analogia-arraste { display: none; }

.analogia img {
  display: block;
  width: 100%;
  height: auto;
}

/* Abaixo de 768px a ilustração deixa de encolher e passa a rolar dentro
   da própria moldura: reduzida a 310px o texto desenhado nela some. */
@media (max-width: 767.98px) {
  .analogia-quadro {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .analogia-quadro img {
    width: auto;
    max-width: none;
    height: clamp(320px, 58vh, 520px);
  }
  .analogia-arraste { display: block; margin-top: 4px; opacity: .8; }
}

.analogia-legenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  margin-top: clamp(24px, 3vw, 36px);
  background: var(--line);
  border: 1px solid var(--line);
}

.analogia-legenda li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 18px;
  background: #faf3e8;
  border-top: 3px solid var(--cor);
}

.analogia-legenda strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--cor);
}

.analogia-legenda span {
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  font-weight: 600;
}

.analogia-legenda em {
  font-style: normal;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  opacity: .8;
}

.analogia-fecho {
  max-width: 640px;
  margin: clamp(22px, 2.5vw, 32px) auto 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--wine);
}

/* ---------- 5b. O destaque do Eixo Integrador ----------
   O eixo não é mais um corpo da lista, e o bloco precisa dizer isso
   antes do texto: fundo escuro, o núcleo azul do diagrama ao lado. */

.eixo-destaque {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(36px, 4vw, 56px);
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--cream);
  border-left: 2px solid var(--navy);
}

.eixo-destaque-marca {
  position: relative;
  width: 62px;
  height: 62px;
  flex: none;
}

.eixo-nucleo,
.eixo-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.eixo-nucleo { background: var(--navy); inset: 7px; }
.eixo-halo { border: 1px solid var(--navy); opacity: .3; }

.eixo-destaque h3 {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--navy-deep);
  margin: 0 0 14px;
}

.eixo-definicao {
  max-width: 760px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45;
  color: var(--ink-soft);
}

.eixo-destaque .duas-colunas { margin-top: clamp(22px, 2.5vw, 32px); }

@media (max-width: 599.98px) {
  .eixo-destaque { grid-template-columns: minmax(0, 1fr); }
  .eixo-destaque-marca { width: 48px; height: 48px; }
}

/* ---------- 5c. Funções estruturantes ---------- */

.estruturantes {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid var(--line);
}

.estruturantes-head { max-width: 820px; }

.estruturantes-head h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.estruturantes-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  margin-top: clamp(26px, 3vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
}

.estruturantes-par li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--white);
}

.secao--creme .estruturantes-par li { background: var(--cream); }

.estruturantes-tipo {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}

.estruturantes-fecho {
  max-width: 820px;
  margin-top: clamp(24px, 2.6vw, 34px);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
}

/* ---------- 6. Notas e ecos ---------- */

.nota {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 56px);
}

.nota-eco {
  font-family: var(--display);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--wine);
}

.nota-solta {
  max-width: 820px;
  margin-top: clamp(32px, 3.5vw, 48px);
}

/* o par de frases curtas que se opõem */
.par {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.par span:first-child { color: var(--ink-soft); }
.par span:last-child { color: var(--wine); }

/* ---------- 7. As doze funções ---------- */

.doze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.doze li {
  background: var(--white);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doze span {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
}

.doze em {
  font-style: normal;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
  opacity: .78;
}

/* ---------- 8. Polaridades e transformações ----------
   Duas palavras ligadas por um fio que estica até o espaço acabar. */

.bloco-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
  margin-top: clamp(36px, 4vw, 56px);
}

.bloco-par-head h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.polos,
.viram { display: flex; flex-direction: column; }

.polos li,
.viram li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-soft);
}
.polos li:first-child,
.viram li:first-child { border-top: 1px solid var(--line); }

.polos i,
.viram i {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--line-soft);
}

.polos span:last-child { color: var(--navy-deep); }

.viram { margin-top: clamp(28px, 3vw, 40px); max-width: 680px; }
.viram span:first-child { flex: none; }
.viram span:last-child { flex: none; color: var(--wine); }

/* ---------- 9. A pergunta clínica ---------- */

/* a pergunta vem logo depois do parágrafo que a anuncia ("...uma
   pergunta clínica:"), e sem respiro os dois colavam */
.nota-solta + .pergunta { margin-top: clamp(22px, 2.4vw, 34px); }

.pergunta {
  margin: 0;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px);
  border-left: 2px solid var(--navy);
  background: var(--white);
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ink-soft);
}

/* ---------- 10. Os quatro campos ---------- */

/* Duas colunas fixas, não auto-fit: com auto-fit cabiam três numa tela
   larga e o quarto cartão sobrava sozinho na linha de baixo, ao lado de
   um vão cinza. Em 2x2 as quatro caixas fecham o quadrado. */
.quatro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 768px) {
  .quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quatro article {
  background: var(--white);
  padding: clamp(28px, 3vw, 44px);
}

.quatro h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--wine);
  margin: 0 0 14px;
}

/* ---------- 11. Fecho ---------- */

.fecho {
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: clamp(28px, 3.2vw, 48px) clamp(24px, 3vw, 44px);
  max-width: 900px;
  background: var(--white);
  border: 1px solid var(--line);
}
.fecho p {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}
.fecho p + p { margin-top: 6px; }
.fecho .wine { color: var(--wine); }

/* Dentro do painel, a continuação da frase: corpo de texto, sem fio
   separando — ela termina a frase grande, não abre outra ideia.
   Dois seletores de classe porque `.fecho p` e `.fecho p + p` são (0,1,1)
   e atropelariam uma classe sozinha. */
.fecho .fecho-coda {
  max-width: 740px;
  margin-top: clamp(22px, 2.4vw, 32px);
  font-family: var(--sans);
  font-size: var(--texto);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* ---------- 12. Chamada ---------- */

.chamada {
  background: var(--navy);
  font-size: var(--texto);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.chamada-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(56px, 6vw, 92px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}


.chamada h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--white);
}

.chamada-texto p:last-child { margin-top: 20px; }

.chamada-acao { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

.chamada-numeros { display: flex; flex-wrap: wrap; gap: 20px 48px; }
.chamada-numeros li { display: flex; flex-direction: column; gap: 4px; }
.chamada-numeros strong {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--white);
}
.chamada-numeros span { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .62); }

/* a unidade acompanha o número em corpo menor, como na seção Marcos */
.unid { font-size: .44em; letter-spacing: -.02em; margin-left: 2px; }

.chamada .btn--solid { background: var(--white); color: var(--navy); }
.chamada .btn--solid:hover { opacity: .88; }

.chamada-zap { font-size: 13px; color: rgba(255, 255, 255, .62); }

/* =========================================================
   13. Telas menores
   A maior parte já se resolve sozinha pelo clamp() e pelo auto-fit;
   aqui ficam só os ajustes que a grade não dá conta.
   ========================================================= */

/* abaixo de 1024 o header é fixo e a página já ganha padding no body */
@media (max-width: 1023.98px) {
  .pag-abre .arq-inner { min-height: 0; padding-top: var(--secao-espaco); }

  /* no celular o header é fixo e o body já ganha padding; e a ilustração
     vem antes do texto, como nas outras aberturas */
  /* 24px de ar, e só. O calc(80px + ...) do desktop existe porque lá o
     header flutua sobre a página; aqui ele é uma faixa fixa e o
     `body { padding-top: 60px }` já reservou esse espaço — somar de novo
     era o que abria o vão. */
  .oque { padding-top: 24px; }

  /* Empilhado não há vão à direita para preencher, então nada de sticky.
     E o quadro vira paisagem: em 3/4 a ilustração ficava com 456px de
     altura, tomava a tela inteira do celular e empurrava o título para
     fora da primeira dobra. Em 4/3 ela ocupa um terço disso e o título
     entra logo abaixo. O recorte é pela altura e o ponto de interesse —
     maestro e orquestra — fica um pouco abaixo do meio do arquivo. */
  /* `relative`, não `static`: desligar o sticky com `static` tirava do
     quadro a condição de bloco de referência, e a imagem — que é
     `position: absolute; inset: 0` — escapava para o viewport. Era isso
     que a cobria a tela inteira e passava por cima do título.
     `relative` desliga o sticky e mantém o quadro recortando. */
  .oque-arte {
    order: -1;
    position: relative;
    /* o `top: 100px` é o deslocamento do sticky no desktop; em `relative`
       ele vira deslocamento de verdade e jogava a imagem 100px para
       baixo, por cima do título */
    top: auto;
    aspect-ratio: 4 / 3;
  }
  .oque-arte .oque-img { object-position: center 58%; }

  .oque-inner { gap: 26px; }
  .oque-texto { gap: 14px; }

  /* a frase invertida volta a empilhar: arte embaixo do texto, como na home */
  .frase--invertida .frase-inner { flex-direction: column-reverse; }
  .frase--invertida .frase-text {
    width: 100%;
    max-width: 420px;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .frase--invertida h2 { max-width: none; text-align: center; }
}

@media (max-width: 767.98px) {
  .corpos { grid-template-columns: 1fr; }
  .par { flex-direction: column; gap: 6px; }
}

@media (max-width: 479.98px) {
  .doze { grid-template-columns: repeat(2, 1fr); }
  .polos li,
  .viram li { flex-wrap: wrap; gap: 4px 12px; }
  .polos i,
  .viram i { flex: 1 0 24px; }
}

/* =========================================================
   14. Página de Clínica
   ========================================================= */

/* ---------- abertura com foto ao fundo ----------
   Mesmo princípio do hero da home: a foto ocupa a seção inteira e um
   degradê de creme entra pela esquerda para o texto ter onde pousar.
   Na home esse degradê vinha no alpha do PNG; aqui ele é CSS, porque a
   mesma foto é usada em outro recorte na seção Sobre. */

.clin-hero {
  position: relative;
  min-height: clamp(560px, 68vh, 700px);
  display: flex;
  align-items: center;
  /* o creme do fundo da própria ilustração, não o creme do site: é o que
     faz a imagem não ter borda visível. O degradê no fim emenda com o
     creme da seção seguinte, sem degrau. */
  background: linear-gradient(to bottom,
    var(--creme-arte) 0%, var(--creme-arte) 74%, var(--cream) 100%);
  overflow: hidden;
}

.clin-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(80px + clamp(20px, 2.6vw, 44px)) var(--gutter) clamp(40px, 5vw, 72px);
  display: grid;
  /* a coluna do texto é um pouco maior: o novo título tem duas frases e
     cada uma precisa caber numa linha */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

/* A arte aparece inteira e sem moldura: o fundo da seção é a mesma cor
   do fundo dela, e uma máscara dissolve as quatro bordas. O topo precisa
   de máscara porque o círculo grande já vem cortado no arquivo — sem ela
   sobraria um corte reto atravessando a imagem. */
.clin-hero-arte {
  position: relative;
  /* um pouco maior que a coluna, dos dois lados: equilibra o peso do
     título. A sangria cabe na goteira do container, nunca encosta na
     borda da tela — a máscara precisa terminar dentro do quadro. */
  margin-left: -7%;
  margin-right: max(-7%, calc(var(--gutter) * -1));
}

.clin-hero-arte img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 10%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%,  #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 10%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%,  #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.clin-hero-texto { max-width: 560px; }

.clin-hero h1 {
  font-family: var(--display);
  /* Calibrado para cada frase do título fechar numa linha dentro da
     coluna. Com o corpo anterior (72px) "Pare de se procurar." quebrava
     sozinha e o título ia a quatro linhas. */
  font-size: clamp(30px, 3.7vw, 53px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -.035em;
  color: var(--ink);
}

.clin-lead {
  margin-top: 26px;
  max-width: 470px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* selos: as três informações que respondem "dá para mim?" */
.prova { margin-top: 30px; }

.selos { display: flex; flex-wrap: wrap; gap: 5px; }

/* O padding e o espaçamento entre letras são menores que o padrão da folha
   porque os três selos somavam 561px numa coluna de 516 a 560px — caíam para
   duas linhas em qualquer tela. Apertados somam 509px e cabem lado a lado já
   em 1024px, onde a coluna é mais estreita (516px) do que em telas maiores. */
.selos li {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

/* As bandeiras dos países já atendidos, logo abaixo do "+ 20 países".
   Grade de 11 colunas em vez de flex-wrap: com quebra livre a primeira fila
   levaria 17 bandeiras e a segunda 5, e o bloco ficava torto. Onze por fila
   dá duas filas iguais. */
.bandeiras {
  display: grid;
  grid-template-columns: repeat(11, auto);
  justify-content: start;
  gap: 6px;
  margin-top: 14px;
  list-style: none;
}

.bandeiras li { display: flex; }

/* dois seletores de classe: nesta folha, `img` dentro de um componente perde
   para qualquer regra de imagem já existente se vier com um só */
.bandeiras .bandeiras-img {
  width: auto;
  height: 20px;
  max-width: none;
  border-radius: 2px;
  /* A saturação cheia de 22 bandeiras puxava o olho para longe do título e
     dos botões. Dessaturadas e com um véu de opacidade, elas se apoiam no
     creme do fundo e viram o que são: uma informação de apoio ao selo
     "+ 20 países atendidos", não o assunto da dobra.

     Filtro em vez de regravar os arquivos: os WebP continuam fiéis às
     bandeiras de verdade, e o tom se acerta numa linha só. */
  filter: saturate(.4) opacity(.72);
  /* a moldura é o que segura as bandeiras de borda branca (Japão, Suíça,
     Canadá) contra o fundo claro da seção; mais fraca agora, para
     acompanhar o recuo das cores */
  box-shadow: 0 0 0 1px rgba(51, 51, 51, .10);
}

/* Onze por fila pedem 357px de conteúdo; abaixo de 480px a coluna de texto
   tem entre 272 e 432px e a última bandeira saía da coluna. Oito por fila
   cabem em 258px, que entra até nos 272px da tela de 320. */
@media (max-width: 479.98px) {
  .bandeiras { grid-template-columns: repeat(8, auto); }
}

.clin-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.btn--largo { width: auto; padding-inline: 24px; }

/* ---------- os sinais ----------
   Lista numerada: o número é discreto e o fio separa as linhas, como as
   polaridades da página de Arquitetura. */

.sinais { counter-reset: sinal; max-width: 980px; }

.sinais li {
  counter-increment: sinal;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.sinais li:first-child { border-top: 1px solid var(--line); }

.sinais li::before {
  content: counter(sinal, decimal-leading-zero);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  opacity: .5;
  padding-top: .45em;
}

.ressoou {
  max-width: 760px;
  margin-top: clamp(36px, 4vw, 56px);
  font-family: var(--display);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.18;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}

/* ---------- os três movimentos ----------
   O fio que liga os passos é a borda esquerda de cada item; no desktop
   ele vira uma linha no topo, atravessando os três. */

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  counter-reset: passo;
}

.passos li {
  padding-top: 26px;
  border-top: 1px solid var(--navy-deep);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.passo-num {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  opacity: .62;
}

.passos h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink-soft);
}

/* ---------- atalho para outra página ---------- */

.atalho {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--navy);
  transition: border-color .25s ease;
}
.atalho img { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.33, .1, .25, 1); }
.atalho:hover { border-color: var(--navy); }
.atalho:hover img { transform: translateX(5px); }

/* ---------- fundamentos ---------- */

.fundamentos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.fundamentos > div {
  background: var(--cream);
  padding: clamp(24px, 2.6vw, 36px);
}

.fundamentos dt {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .62;
  margin-bottom: 12px;
}

.fundamentos dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}

/* ---------- quem conduz ---------- */

.quem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}


.quem-texto h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.quem-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.quem-numeros li {
  background: var(--white);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quem-numeros strong {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--navy-deep);
}

.quem-numeros span { font-size: 13px; line-height: 1.35; color: var(--ink-soft); }

/* ---------- telas menores ---------- */

@media (max-width: 1023.98px) {
  /* uma coluna: a arte sobe para o topo e o texto vem abaixo dela */
  .clin-hero { display: block; min-height: 0; }

  /* mesma correção das outras aberturas: o body já reservou os 60px do
     header fixo, então aqui entra só o ar */
  .clin-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px var(--gutter) var(--secao-espaco);
    gap: clamp(20px, 4vw, 36px);
  }
  .clin-hero-texto { max-width: none; order: 2; }

  /* a arte fica dentro da goteira: a máscara continua ligada e precisa
     terminar dentro da tela, senão o corte reaparece na borda */
  .clin-hero-arte { order: 1; margin-inline: 0; }
}

@media (max-width: 479.98px) {
  .sinais li { grid-template-columns: 1fr; gap: 6px; }
  .sinais li::before { padding-top: 0; }
  .quem-numeros { grid-template-columns: 1fr; }
  .clin-acoes .btn { width: 100%; }
}

/* =========================================================
   15. Página de Livros e Cursos
   ========================================================= */

/* ---------- a pilha de capas da abertura ----------
   As capas vêm recortadas, sem fundo e sem sombra: a sombra é CSS, para
   acompanhar o creme da página. Uma sombra cinza embutida no arquivo
   denunciaria a colagem assim que o fundo mudasse. */

/* A dobra é uma moldura: respiro igual em cima e embaixo, as duas colunas
   centradas uma na outra e as capas contidas, sem encostar nas bordas. */
.liv-abre .secao-inner {
  /* Já foi 1010px, para "emoldurar" a abertura com mais recuo lateral. A
     moldura custava caro: o título nascia 95px à direita da logo e das
     seções logo abaixo, que usam o container de 1200. Sob um header
     alinhado à esquerda isso lê como desencontro, não como enquadramento,
     então a abertura voltou para a mesma vertical do resto. */
  padding-top: calc(80px + clamp(44px, 5vw, 88px));
  padding-bottom: clamp(44px, 5vw, 88px);
}

.liv-abre-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  justify-items: center;
}

@media (min-width: 1024px) {
  .liv-abre-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: stretch;
    gap: clamp(32px, 3.5vw, 52px);
  }
}

.liv-abre-texto { max-width: 430px; }

.liv-abre h1 {
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ink-soft);
}

.liv-abre-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* Cascata de três capas, como no mockup: cada uma recua para a esquerda
   e sobe um degrau. São três arquivos, não uma imagem só, porque cada
   capa precisa reagir ao cursor por conta própria. */

.pilha {
  position: relative;
  width: 100%;
  max-width: 418px;
  aspect-ratio: 1.7 / 2.255;
  margin-inline: auto;
}

.pilha img {
  position: absolute;
  width: 58.8%;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(51, 43, 33, .26));
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), filter .42s ease;
}

.pilha img:nth-child(1) { left: 0;      top: 0;   z-index: 1; }
.pilha img:nth-child(2) { left: 20.6%;  top: 8%;  z-index: 2; }
.pilha img:nth-child(3) { left: 41.2%;  top: 16%; z-index: 3; }

/* A capa sob o cursor sobe no lugar. Trazê-la para a frente com z-index
   parecia melhor, mas colava: uma vez por cima, ela passava a cobrir as
   vizinhas e o cursor não conseguia mais alcançá-las. Sem mudar a camada,
   o alvo é sempre a capa que se vê naquele ponto. */
.pilha img:hover {
  transform: translateY(-22px);
  filter: drop-shadow(0 30px 40px rgba(51, 43, 33, .34));
}

/* ---------- os três livros ---------- */

.livros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.livro { display: flex; flex-direction: column; gap: 24px; }

.livro-capa {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 340px;
  padding: 24px 0;
  background: var(--cream);
  border: 1px solid var(--line);
}

.livro-capa img {
  width: auto;
  height: clamp(240px, 22vw, 300px);
  filter: drop-shadow(0 14px 24px rgba(51, 43, 33, .20));
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.livro:hover .livro-capa img { transform: translateY(-8px) scale(1.02); }

.livro-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Rótulos e numeradores ficam em tom neutro: o azul em caixa alta acima
   de um título era o padrão de subtópico que saiu da página. */
.livro-tipo {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .62;
}

.livro h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}

.livro-sub { font-size: 15px; line-height: 1.45; color: var(--ink-soft); opacity: .78; }
.livro .btn { margin-top: 8px; }

/* ---------- cursos ---------- */

.curso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(28px, 3vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
}

.curso h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--ink-soft);
}

.curso--destaque { border-color: var(--navy-deep); }
.curso--destaque .curso-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
}

.curso-itens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 10px 0 4px;
}
.curso-itens li { display: flex; align-items: baseline; gap: 8px; }
.curso-itens strong {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--navy-deep);
}
.curso-itens span { font-size: 14px; color: var(--ink-soft); }

.curso-dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(20px, 2.4vw, 32px);
}
.curso .atalho { margin-top: 6px; }

/* ---------- as doze aulas ---------- */

.aulas {
  counter-reset: aula;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.aulas li {
  counter-increment: aula;
  position: relative;
  background: var(--white);
  padding: 26px 28px 26px 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aulas li::before {
  content: counter(aula, decimal-leading-zero);
  position: absolute;
  left: 28px;
  top: 29px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  opacity: .5;
}

.aulas h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}
.aulas p { font-size: 15px; line-height: 1.45; color: var(--ink-soft); opacity: .8; }

/* Aula com link: o cartão inteiro vira alvo, não só o título. O ::after
   esticado é o que faz isso sem embrulhar a lista toda num <a>. */
.aulas a { display: contents; color: inherit; }
.aulas a > h3::after {
  content: '';
  position: absolute;
  inset: 0;
}
.aulas li:has(a) { cursor: pointer; transition: background-color .25s ease; }
.aulas li:has(a):hover { background: var(--cream); }
.aulas li:has(a):hover h3 { color: var(--navy); }

.btn--sozinho { margin-top: clamp(32px, 3.5vw, 48px); }

/* ---------- telas menores ---------- */

@media (max-width: 1023.98px) {
  .liv-abre .secao-inner { padding-top: var(--secao-espaco); }

  /* Uma coluna só: em 768 a grade ainda abria duas de 332px e a pilha,
     que precisa de ~470, saía pela esquerda da tela. */
  .liv-abre-grade { grid-template-columns: 1fr; }
  .pilha { order: -1; max-width: min(400px, 100%); }
}

@media (max-width: 479.98px) {
  .liv-abre-acoes .btn,
  .livro .btn,
  .curso .btn { width: 100%; }
  .aulas li { padding: 22px 20px 22px 58px; }
  .aulas li::before { left: 20px; top: 25px; }
}

/* =========================================================
   16. Página de Arte
   ========================================================= */

/* As fotos das obras vêm com moldura e um fundo quase branco (#f6f6f5,
   medido nos quatro cantos das 26). As seções que mostram obra usam esse
   mesmo tom: o que aparece é a obra emoldurada, não um retângulo de foto
   com borda cinza. */
:root { --creme-obra: #f6f6f5; }

.art-hero {
  position: relative;
  min-height: clamp(540px, 66vh, 680px);
  display: flex;
  align-items: center;
  background: var(--creme-obra);
  overflow: hidden;
}

.art-hero-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* sem respiro embaixo: a seção das obras é do mesmo creme e já traz
     o seu --secao-espaco. As duas leem como uma faixa só. */
  padding: calc(80px + clamp(20px, 2.6vw, 44px)) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.art-hero h1 {
  font-family: var(--display);
  font-size: clamp(54px, 7vw, 104px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--ink);
}

.art-lead {
  margin-top: 22px;
  max-width: 480px;
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--wine);
}

.art-hero-texto > p:last-of-type {
  margin-top: 18px;
  max-width: 470px;
  font-size: var(--texto);
  line-height: 1.6;
  color: var(--ink-soft);
}

.art-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* A abertura passou de uma obra emoldurada (retrato, estreita) para uma
   foto deitada. Ela ocupa a coluna inteira: sem teto de largura e sem
   centralizar, porque agora é um bloco, não um objeto solto no creme. */
.art-hero-obra img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* ---------- a galeria ----------
   Colunas CSS em vez de grid: as fotos alternam retrato e paisagem, e o
   fluxo em coluna acomoda as duas alturas sem buraco nem recorte. */

.secao--obras { background: var(--creme-obra); }

.galeria {
  columns: 4 240px;
  column-gap: clamp(14px, 1.6vw, 26px);
}

/* No celular uma coluna só deixava a página com 20 mil pixels de altura.
   Duas colunas cortam isso pela metade: a miniatura aqui é índice, quem
   quiser ver a obra toca e abre o visor. */
@media (max-width: 599.98px) {
  .galeria { columns: 2 130px; column-gap: 10px; }
  .obra { margin-bottom: 10px; }
}

.obra {
  display: block;
  width: 100%;
  margin: 0 0 clamp(14px, 1.6vw, 26px);
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1),
              filter .4s ease;
}

.obra img { display: block; width: 100%; height: auto; }

.obra:hover,
.obra:focus-visible {
  transform: translateY(-6px);
  filter: drop-shadow(0 18px 26px rgba(51, 43, 33, .18));
}
.obra:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

/* ---------- bastidores ---------- */

.bastidores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.bastidores video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border: 1px solid var(--line);
  object-fit: cover;
}

/* ---------- declamações ---------- */

.palavra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
@media (min-width: 768px) {
  /* a coluna da direita era a aspa (largura do glifo); agora é um player
     e precisa de largura de verdade */
  .palavra { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.palavra-texto { max-width: 640px; }

.palavra-texto h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}
.palavra-texto p { margin: 20px 0 30px; }

/* o 16:9 reserva a altura antes de o player chegar: sem isso a página
   pula quando ele carrega */
.palavra-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
}
.palavra-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- o álbum ---------- */

.disco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  /* o texto leva mais que o player: o nome do álbum precisa fechar numa
     linha só, e o player não ganha nada sendo largo */
  .disco { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
}

.disco-texto { max-width: 640px; }

.disco-texto h2 {
  font-family: var(--display);
  /* calibrado para o nome do álbum fechar numa linha: com 52px ele
     quebrava e o título ia a três linhas */
  font-size: clamp(25px, 2.75vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink-soft);
}

.disco-sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
}
.disco-texto > p + p { margin-top: 26px; }

.disco-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 3vw, 44px);
  margin-top: 26px;
}
.disco-links .atalho { margin-top: 0; }

/* As marcas das plataformas não acompanham o deslize da seta no hover.
   Dois seletores de classe: `.atalho img` é (0,1,1) e atropelaria uma
   classe sozinha — foi o que manteve estas marcas em 16px quadrados
   mesmo com largura declarada. */
.atalho .atalho-marca { width: 18px; height: 18px; flex: none; }
/* a do YouTube é deitada, não quadrada */
.atalho .atalho-marca--yt { width: 24px; height: 17px; }
.atalho:hover .atalho-marca { transform: none; }

/* O embed do Spotify corta o próprio título do álbum abaixo de ~500px.
   Este é o piso: menos que isso e a caixa fica menor, mas ilegível. */
.disco-player { width: 100%; max-width: 520px; }

.disco-player iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

/* ---------- o visor ----------
   <dialog> nativo: Esc fecha, o foco fica preso dentro e o resto da
   página sai da árvore de acessibilidade, sem uma linha de biblioteca. */

.visor {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  border: 0;
  background: rgba(32, 28, 24, .94);
  display: none;
  place-items: center;
}
.visor[open] {
  display: grid;
  /* minmax(0,1fr) é o que impede a linha de crescer com a imagem: sem
     isso o max-height:100% da <img> mede uma linha "auto" que já cresceu,
     e a obra estoura a tela. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.visor::backdrop { background: rgba(32, 28, 24, .94); }

.visor img {
  justify-self: center;
  align-self: center;
  max-width: min(100%, 1000px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.visor-fechar,
.visor-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.visor-fechar:hover,
.visor-nav:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }

.visor-fechar { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); font-size: 30px; }
.visor-nav { top: 50%; transform: translateY(-50%); font-size: 32px; }
.visor-nav--ant  { left: clamp(10px, 2vw, 28px); }
.visor-nav--prox { right: clamp(10px, 2vw, 28px); }

.visor-conta {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2vw, 22px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .62);
}

@media (max-width: 599.98px) {
  .visor-nav { width: 40px; height: 40px; font-size: 26px; }
  .art-acoes .btn { width: 100%; }
}

/* uma coluna no celular: a abertura põe a obra acima do texto */
@media (max-width: 767.98px) {
  .art-hero { display: block; min-height: 0; }
  /* 24px de ar: o `body { padding-top: 60px }` do mobile já desceu a
     página abaixo do header fixo, e o calc(60px + …) que estava aqui
     somava esse espaço uma segunda vez */
  .art-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
    gap: 22px;
  }
  .art-hero-texto { order: 2; }
  .art-hero-obra { order: 1; }
  .art-hero-obra img { max-width: none; }
}

/* =========================================================
   17. Página de Mídia
   ========================================================= */

.mid-abre {
  background: var(--cream);
  /* sem respiro embaixo: a seção seguinte também é creme e já traz o
     seu --secao-espaco. As duas leem como uma faixa só. */
  padding: calc(80px + clamp(28px, 3.4vw, 56px)) 0 0;
}

/* No celular os 80px existem para compensar o header que flutua sobre a
   página no desktop. Aqui o header é faixa fixa e o body já reservou o
   espaço dele, então o 80px virava um vão de 108px entre o header e o
   título — fica só o ar. */
@media (max-width: 1023.98px) {
  .mid-abre { padding-top: 24px; }
}

.mid-abre-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: end;
}
@media (min-width: 900px) {
  .mid-abre-inner { grid-template-columns: auto minmax(0, 1fr); }
}

.mid-abre h1 {
  font-family: var(--display);
  font-size: clamp(42px, 5.4vw, 82px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
}

.mid-abre-texto { max-width: 520px; }

.mid-lead {
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--wine);
}
.mid-abre-texto > p + p {
  margin-top: 16px;
  font-size: var(--texto);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- as participações ---------- */

.midias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(26px, 3vw, 44px);
}

.midia { display: flex; flex-direction: column; }

/* o 16:9 reserva a altura antes de o player chegar: sem isso a página
   pula quando os quatro iframes carregam */
.midia-tela {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
}
.midia-tela iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.midia-info { padding-top: 18px; }

.midia-veiculo {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .7;
}

.midia-info h2 {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink-soft);
}

.midia-tipo {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: .78;
}

.mid-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(28px, 4vw, 56px);
  margin-top: clamp(28px, 3vw, 40px);
}
.mid-atalhos .atalho { margin-top: 0; }

/* =========================================================
   18. Depoimentos (página de Clínica)
   ========================================================= */

/* Carrossel de rolagem com encaixe: sem biblioteca. O dedo já arrasta
   sozinho no celular e os botões só empurram a rolagem — se o JS não
   carregar, a rolagem continua funcionando. */

.carrossel + .carrossel { margin-top: clamp(40px, 4.5vw, 64px); }

.carrossel-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

.carrossel-topo h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}

.carrossel-botoes { display: flex; gap: 8px; flex: none; }

.carrossel-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.carrossel-btn:hover { background: var(--white); border-color: var(--navy); }
.carrossel-btn[disabled] { opacity: .3; cursor: default; }
.carrossel-btn:hover[disabled] { background: transparent; border-color: var(--line-soft); }

.trilho {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* o respiro lateral entra como padding para o primeiro e o último
     cartão não encostarem na borda ao encaixar */
  padding-bottom: 6px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.trilho > li { flex: none; scroll-snap-align: start; list-style: none; }

/* ---------- os cartões de vídeo ---------- */

.trilho--video > li { width: clamp(220px, 24vw, 280px); }

/* O cartão segue o arranjo dos vídeos da página de mídia: a capa inteira
   num quadro 16:9, o nome embaixo. A capa do YouTube é 16:9 e já traz
   texto próprio — cortá-la para caber num quadro mais quadrado comeria a
   frase, e escrever o nome por cima empilharia texto sobre texto. */
.depo-video {
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.depo-video:hover,
.depo-video:focus-within { transform: translateY(-4px); }

.depo-play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s ease;
}
.depo-video:hover .depo-play,
.depo-play:focus-visible { border-color: var(--navy); }

.depo-capa { width: 100%; height: 100%; object-fit: cover; }

/* O triângulo de play sobre a capa. O disco atrás não é enfeite: a capa é
   uma imagem qualquer, e sobre as claras um triângulo solto sumiria. A
   sombra existe pelo mesmo motivo um passo adiante — três das capas são
   creme, e sobre elas um disco branco sem sombra também desaparece. */
.depo-seta {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
  transition: background-color .25s ease, transform .25s ease;
}
.depo-seta::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  /* 2px à direita do centro geométrico: um triângulo centrado pela caixa
     que o contém parece deslocado para a esquerda */
  translate: 2px 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--navy);
}
.depo-video:hover .depo-seta { background: var(--white); transform: scale(1.06); }

.depo-legenda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
}

.depo-nome {
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -.02em;
  color: var(--ink-soft);
}
.depo-dur { font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); opacity: .66; }

/* quando o play é apertado, o iframe toma o lugar do quadro da capa e o
   nome continua embaixo */
.depo-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--ink);
}

/* ---------- os cartões de mensagem ---------- */

.trilho--foto > li { width: clamp(170px, 18vw, 220px); }

.depo-foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: zoom-in;
  transition: border-color .25s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.depo-foto img { display: block; width: 100%; height: auto; }
.depo-foto:hover { border-color: var(--navy); transform: translateY(-4px); }

.carrossel-nota {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .6;
}

/* No desktop quem navega são as setas e a própria barra; as bolinhas só
   existem no celular, onde a barra nativa aparecia como um traço cinza
   atravessado sob os cartões. */
.carrossel-bolinhas { display: none; }

@media (max-width: 599.98px) {
  .trilho--video > li { width: 76vw; }
  .trilho--foto > li { width: 58vw; }

  .trilho { scrollbar-width: none; }
  .trilho::-webkit-scrollbar { display: none; }

  .carrossel-bolinhas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 14px;
  }

  /* o alvo tem 16px para o dedo acertar; a bolinha desenhada tem 6 */
  .carrossel-bolinha {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .carrossel-bolinha::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-soft);
    transition: background-color .2s ease, transform .2s ease;
  }
  .carrossel-bolinha.e-agora::before {
    background: var(--navy);
    transform: scale(1.35);
  }
}

/* aviso de "ainda não disponível": tem o azul e o peso de um link, mas
   não é um — não há para onde levar ainda */
.em-breve {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--navy);
}

/* =========================================================
   18. Termos de uso e política de privacidade
   =========================================================
   Duas páginas de texto corrido, sem ilustração e sem seções alternando
   de cor: o que elas pedem é largura de leitura e hierarquia clara, não
   composição. A coluna fica em 68ch — mais larga que isso e o olho perde
   a linha no retorno. */

/* A caixa mantém a largura do resto do site e quem limita a leitura são os
   filhos. Com `max-width: 820px` aqui, o `margin-inline: auto` do
   `.secao-inner` centrava a coluna e o texto nascia 190px à direita da
   logo — sob um header alinhado à esquerda, isso lê como desencontro. */
.legal-inner {
  padding-top: calc(80px + var(--secao-espaco));
  padding-bottom: var(--secao-espaco);
}
.legal-head,
.legal-corpo { max-width: 820px; }

.legal-head { margin-bottom: clamp(28px, 3vw, 44px); }

.legal-head h1 {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}

.legal-data {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .7;
}

.legal-corpo { max-width: 68ch; font-size: var(--texto); line-height: 1.7; }
.legal-corpo p + p { margin-top: 14px; }

/* o respiro maior vem antes do título, não depois: é ele que separa um
   assunto do anterior */
.legal-corpo h2 {
  margin-top: clamp(32px, 3.4vw, 48px);
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}

.legal-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

/* marcador desenhado em vez de list-style: o ::before alinha com a
   primeira linha mesmo quando o item ocupa três */
.legal-lista li {
  position: relative;
  padding-left: 20px;
  list-style: none;
}
.legal-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
  opacity: .5;
}

.legal-corpo a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-corpo a:hover { text-decoration-thickness: 2px; }

@media (max-width: 1023.98px) {
  /* o body já reservou os 60px do header fixo */
  .legal-inner { padding-top: 28px; }
}

/* =========================================================
   19. Página de erro (404)
   =========================================================
   Uma página de erro é uma bifurcação, não um aviso: quem chega aqui
   errou o endereço e precisa de saídas, por isso o peso está nos
   atalhos e não no número. */

/* mesma correção das páginas legais: o limite de leitura vai nos filhos,
   para a coluna nascer na mesma vertical da logo */
.erro-inner {
  padding-top: calc(80px + var(--secao-espaco));
  padding-bottom: var(--secao-espaco);
}
.erro-numero,
.erro h1,
.erro-lead,
.erro-atalhos,
.erro-lista { max-width: 720px; }

.erro-numero {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  color: var(--navy);
  opacity: .18;
}

.erro h1 {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink-soft);
}

.erro-lead {
  margin-top: 20px;
  max-width: 54ch;
  font-size: var(--texto);
  line-height: 1.65;
  color: var(--ink-soft);
}

.erro-atalhos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.erro-lista {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
}
.erro-lista a {
  font-size: 15px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1023.98px) {
  .erro-inner { padding-top: 28px; }
}
@media (max-width: 479.98px) {
  .erro-atalhos .btn { width: 100%; }
}