/* ==========================================================================
   TIME ELITE, folha unica.
   --------------------------------------------------------------------------
   Substitui tokens/base/scene/catalog/motion/vida (120 KB) por um arquivo so.
   A cena cinematografica foi apagada em 10/08/2026 a pedido do Cleo, e a
   Izabella confirmou por escrito no mesmo dia: "tem muitos efeitos, podemos
   fazer mais simples", "essa primeira dobra tem uma luz q fica passando, acho
   q e very distracting", "tem umas 4 fases com efeito, acho q ficou muito".

   DIAIS (design-taste-frontend, secao 1):
     DESIGN_VARIANCE 5 . assimetria no heroi e na prova, resto alinhado
     MOTION_INTENSITY 2 . SO hover, focus e active. Zero animacao de rolagem.
     VISUAL_DENSITY 4 . respiro de landing, nao de galeria

   TRAVA DE TEMA: a pagina tem UMA troca de tema, deliberada, e nao alternancia.
   Verde profundo do topo ate a prova social, greige do processo ate o
   agendamento, verde profundo no rodape. A troca existe porque o widget do
   Calendly e branco: um iframe branco sobre verde profundo pareceria colado.

   PALETA: so o brand kit real (docs/brand-kit.md, extraido da pasta do Drive).
   Regra de contraste medida: o dourado passa sobre o verde profundo (5,38) e
   REPROVA sobre o greige (1,83). Em fundo claro o acento e o verde medio (5,62).
   ========================================================================== */

/* ---------- fontes da marca, auto-hospedadas ---------- */
@font-face {
  font-family: "Mozilla Headline";
  src: url("../fonts/mozilla-headline-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Mozilla Text";
  src: url("../fonts/mozilla-text-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* cor */
  --verde-profundo: #0A3232;
  --verde-medio: #295954;
  --dourado: #BE945F;
  --areia: #D9C499;
  --greige: #DDD9CE;
  --branco: #FFFFFF;

  /* papel: branco quente, entre o branco puro e o greige do kit. E o fundo
     dominante do miolo, na gramatica de MB Tax e Women Painting. */
  --papel: #FAF7F1;

  /* papeis do tema CLARO, que agora e o padrao da pagina */
  --fundo: var(--papel);
  --superficie: var(--branco);
  --titulo: var(--verde-profundo);
  --texto: color-mix(in srgb, var(--verde-profundo) 74%, var(--papel));
  --acento: var(--verde-medio);
  --linha: color-mix(in srgb, var(--verde-profundo) 14%, transparent);

  /* ELEVACAO. Duas camadas e tingida na cor da marca, nunca preta: e metade da
     sensacao de acabamento nos dois exemplos que o Cleo aprovou. */
  --sombra: 0 1px 2px rgba(10, 50, 50, 0.05), 0 14px 34px -16px rgba(10, 50, 50, 0.26);
  --sombra-alta: 0 2px 4px rgba(10, 50, 50, 0.06), 0 24px 52px -20px rgba(10, 50, 50, 0.32);

  /* tipo */
  --f-display: "Mozilla Headline", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "Mozilla Text", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ritmo, grade de 8 */
  --pad-secao: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --largura: 78rem;
  /* trava de forma, com regra declarada: cartao 14px, elemento pequeno 10px,
     botao em pilula. Mesma escada de MB Tax (14 / 12 / 30) e Women Painting. */
  --raio: 14px;
  --raio-p: 10px;
  --borda-cta: 999px;
}

/* ---------- reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-inline-size: 100%; }
img { block-size: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--titulo);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.4rem); letter-spacing: -0.012em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

.envelope {
  inline-size: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .envelope { inline-size: min(100% - 5rem, var(--largura)); }
}

/* rotulo pequeno. Teto de 3 na pagina inteira (design-taste 4.7). */
.rotulo {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 0.9rem;
}

/* ---------- acessibilidade ---------- */
.so-leitor {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; inset-block-start: -100vh; inset-inline-start: 1rem;
  z-index: 100; padding: 0.75rem 1.25rem;
  background: var(--dourado); color: var(--verde-profundo);
  font-family: var(--f-mono); font-size: 0.8rem; text-decoration: none;
  border-radius: var(--borda-cta);
}
.pular:focus { inset-block-start: 1rem; }

:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 2px;
}
[id] { scroll-margin-block-start: 6rem; }

/* ==========================================================================
   BOTAO
   Um rotulo por intencao (design-taste 4.5): a pagina inteira usa
   "Agendar uma conversa". Nada de "Fale conosco" competindo com ele.
   ========================================================================== */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 3rem;
  padding: 0.85rem 1.75rem;
  font-family: var(--f-mono);
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--verde-profundo); border-radius: var(--borda-cta);
  background: var(--verde-profundo); color: var(--branco);
  cursor: pointer;
  box-shadow: 0 3px 10px -5px rgba(10, 50, 50, 0.45);
  transition: background 160ms ease, transform 120ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}
.botao:hover {
  background: var(--verde-medio); border-color: var(--verde-medio);
  box-shadow: 0 8px 20px -8px rgba(10, 50, 50, 0.5);
}
.botao:active { transform: translateY(1px); }

.botao--linha {
  background: transparent; color: var(--verde-profundo);
  border-color: color-mix(in srgb, var(--verde-profundo) 38%, transparent);
  box-shadow: none;
}
.botao--linha:hover {
  background: transparent; border-color: var(--verde-profundo);
  color: var(--verde-profundo); box-shadow: none;
}

/* no escuro o botao inverte: dourado cheio, que la passa com 5,01 */
.escura .botao {
  background: var(--dourado); border-color: var(--dourado); color: var(--verde-profundo);
}
.escura .botao:hover { background: var(--areia); border-color: var(--areia); }
.escura .botao--linha { background: transparent; color: var(--greige); border-color: var(--linha); }
.escura .botao--linha:hover { border-color: var(--greige); color: var(--branco); }

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .botao:active { transform: none; }
}

/* ==========================================================================
   CABECALHO. Uma linha no desktop, altura <= 76px.
   ========================================================================== */
.topo {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--verde-profundo) 96%, transparent);
  backdrop-filter: blur(10px);
  --texto: var(--greige);
  --linha: color-mix(in srgb, var(--greige) 20%, transparent);
  border-block-end: 1px solid var(--linha);
}
.topo .botao { background: var(--dourado); border-color: var(--dourado); color: var(--verde-profundo); }
.topo .botao:hover { background: var(--areia); border-color: var(--areia); }
.topo__grade {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; block-size: 4.5rem;
}
.topo__marca { display: flex; align-items: center; flex: 0 0 auto; }
.topo__marca img { block-size: 2.1rem; inline-size: auto; }
.topo__nav { display: none; }
@media (min-width: 62rem) {
  .topo__nav { display: flex; align-items: center; gap: 2rem; }
}
.topo__nav a {
  font-size: 0.94rem; text-decoration: none; color: var(--texto);
  transition: color 140ms ease;
}
.topo__nav a:hover { color: var(--titulo); }
.topo .botao { min-block-size: 2.6rem; padding: 0.6rem 1.25rem; font-size: 0.74rem; }

/* ==========================================================================
   HEROI. Split assimetrico: texto a esquerda, foto sangrando a direita.
   A foto sai do arco e ganha tamanho, que foi o pedido literal da Izabella:
   "a foto ficou ruim de ver aqui, acho q aumentaria mais a disposicao dessa
   foto, talvez tirar ela do frame".
   Teto de 4 elementos de texto: manchete, subtitulo, dois botoes. Sem chapeu,
   sem faixa de confianca aqui dentro (ela vira secao propria logo abaixo).
   ========================================================================== */
.heroi { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; overflow: clip; }
.heroi__grade { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) {
  /* A coluna da foto ENCOLHEU. A imagem e retrato 3:4, entao numa coluna larga
     ela ficaria alta demais e o heroi nao caberia na tela. Coluna estreita
     mantem a foto inteira E o heroi dentro da primeira dobra. */
  .heroi__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
}
.heroi__texto { display: grid; gap: 1.5rem; justify-items: start; }
/* A medida NAO fica no container. `ch` resolve na fonte do proprio elemento, e
   34ch medido no corpo de 17px trava o titulo display de 62px em ~290px, o que
   da seis linhas. Cada filho carrega a sua. */
.heroi__texto h1 { max-inline-size: 14ch; }
.heroi__sub {
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  max-inline-size: 46ch;
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* a foto sangra ate a borda direita da tela em telas largas */
.heroi__foto { position: relative; }
/* A FOTO NAO E MAIS RECORTADA.
   Ela e retrato 3:4 (1440x1920, lido do arquivo). Antes eu a enfiava numa
   caixa de altura fixa e o `cover` comia 256px: sumia o teto e as pessoas
   ficavam cortadas na canela. Agora a caixa TEM a proporcao da foto, entao
   `cover` nao corta nada. */
.heroi__foto img {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio);
}
@media (min-width: 62rem) {
  /* trava a LARGURA e deixa a altura sair da proporcao. Mais previsivel do que
     travar a altura e deixar o navegador reconstruir a largura. 26rem de largura
     dao 34,7rem de altura em 3:4, e o heroi cabe na primeira dobra. */
  .heroi__foto { max-inline-size: 26rem; margin-inline-start: auto; }
}

/* ==========================================================================
   FAIXA DE PROVA. Fica FORA do heroi, como secao propria.
   Linha de numeros separada por filete, nao por cartao.
   ========================================================================== */
.prova-faixa { padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.prova-faixa__grade { display: grid; gap: 1.75rem; }
@media (min-width: 40rem) { .prova-faixa__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .prova-faixa__grade { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; } }
.prova-faixa dt {
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--texto) 80%, transparent);
  margin-block-end: 0.4rem;
}
.prova-faixa dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  font-weight: 500; color: var(--titulo); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.prova-faixa .nota {
  display: block; margin-block-start: 0.35rem;
  font-family: var(--f-texto); font-size: 0.86rem;
  color: color-mix(in srgb, var(--texto) 78%, transparent);
}

/* ==========================================================================
   AUTOSSELECAO. Duas colunas em contraste. Sem icone, sem cartao:
   o filete lateral e a cor do titulo fazem o trabalho.
   ========================================================================== */
.selecao { padding-block: var(--pad-secao); }
.selecao__grade { display: grid; gap: var(--gap); margin-block-start: 2.5rem; }
@media (min-width: 54rem) { .selecao__grade { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); } }
.selecao__col { border-block-start: 3px solid var(--linha); }
.selecao__col--sim { border-block-start-color: var(--verde-medio); }
.selecao__col h3 { margin-block-end: 1.25rem; }
.selecao__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.selecao__col li { max-inline-size: 44ch; }

/* ==========================================================================
   O TRABALHO. Titulo fixo a esquerda, lista numerada a direita, foto abaixo.
   Familia de layout diferente das outras (regra anti repeticao).
   ========================================================================== */
.trabalho { padding-block: var(--pad-secao); }
.trabalho__grade { display: grid; gap: var(--gap); }
.trabalho__cab { align-self: start; }
@media (min-width: 62rem) {
  .trabalho__grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 6vw, 5rem); }
}
.trabalho__lista { margin: 0; padding: 0; display: grid; gap: 2rem; }
.trabalho__lista > div { display: grid; gap: 0.5rem; }
.trabalho__lista dt { font-family: var(--f-display); font-size: 1.24rem; font-weight: 500; color: var(--titulo); }
.trabalho__lista dd { margin: 0; max-inline-size: 52ch; }
/* A FOTO E FIGURA, NAO FAIXA.
   Ela mostra oito pessoas de corpo inteiro num quadro quase 1:1. Qualquer
   faixa panoramica corta todo mundo na altura do peito, e nao existe
   `object-position` que resolva: para caber inteira numa tela de 1850px, a
   faixa precisaria de 1850px de altura.
   Sem `object-fit`, sem altura fixa: a proporcao e a do arquivo. */
.trabalho__foto {
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  max-inline-size: 46rem;
  margin-inline: auto;
}
.trabalho__foto img {
  inline-size: 100%;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.trabalho__nota {
  margin-block-start: 2rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--linha);
  font-size: 0.92rem; color: color-mix(in srgb, var(--texto) 82%, transparent);
  max-inline-size: 56ch;
}

/* ==========================================================================
   TROCA DE TEMA, uma vez na pagina.
   Do processo ao agendamento o fundo e claro. Isso existe porque o widget do
   Calendly e branco.
   ========================================================================== */
/* --- superficies -----------------------------------------------------
   Tres, e nao cinco. O miolo alterna papel e tint, como o `tint2` da Women
   Painting, e o escuro fica so nas duas pontas, onde a marca se afirma. */
/* O tint e mais escuro que o papel, entao o texto precisa descer junto: com o
   token do papel ele dava 4,48 sobre greige, um fio abaixo do piso de 4,5.
   Medido, nao estimado. */
.tint {
  --fundo: var(--greige);
  --texto: color-mix(in srgb, var(--verde-profundo) 80%, var(--greige));
  --linha: color-mix(in srgb, var(--verde-profundo) 18%, transparent);
  background: var(--fundo);
  color: var(--texto);
}

.escura {
  --fundo: var(--verde-profundo);
  --superficie: color-mix(in srgb, var(--branco) 8%, var(--verde-profundo));
  --titulo: var(--branco);
  --texto: var(--greige);
  --acento: var(--dourado);
  --linha: color-mix(in srgb, var(--greige) 20%, transparent);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 40px -18px rgba(0, 0, 0, 0.5);
  background: var(--fundo);
  color: var(--texto);
}
.escura h1, .escura h2, .escura h3 { color: var(--titulo); }

/* ---------- o cartao, que e o que faltava ----------
   Superficie propria, elevacao tingida na marca e raio generoso. E a peca que
   da acabamento nos dois exemplos aprovados, e a pagina nao tinha nenhuma. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
}
.cartao--destaque { box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--verde-medio) 34%, transparent); }

/* ==========================================================================
   PROCESSO. Trilha vertical de 4 etapas. A etapa do custo ocupa a linha
   inteira e ganha superficie propria: e a objecao mais cara da pagina.
   ========================================================================== */
.processo { padding-block: var(--pad-secao); }
/* etapas em cartao, e nao em lista com filete: e a diferenca entre "lista de
   itens" e "quatro passos que alguem desenhou" */
.etapas { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.etapas > li { display: grid; gap: 0.6rem; }
@media (min-width: 54rem) {
  .etapas > li { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
}
.etapas__n {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--acento); padding-block-start: 0.35rem;
}
.etapas__corpo { display: grid; gap: 0.5rem; }
.etapas__corpo p { max-inline-size: 58ch; }

.custo {
  margin-block-start: 1.25rem;
  background: color-mix(in srgb, var(--verde-medio) 8%, var(--branco));
  border: 1px solid color-mix(in srgb, var(--verde-medio) 28%, transparent);
  border-radius: var(--raio-p);
  padding: clamp(1.1rem, 0.9rem + 1.2vw, 1.6rem);
  display: grid; gap: 1rem;
}
@media (min-width: 48rem) {
  .custo { grid-template-columns: auto minmax(0, 1fr); column-gap: 2.5rem; align-items: center; }
}
.custo__valor {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 500; color: var(--titulo); line-height: 1;
  white-space: nowrap;
}
.custo__valor small { display: block; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin-block-start: 0.5rem; color: var(--acento); }
.custo ul { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.custo strong { color: var(--titulo); }

/* ==========================================================================
   PROVA SOCIAL. Citacoes em coluna dupla + grade de fotos reais.
   ========================================================================== */
.depoimentos { padding-block: var(--pad-secao); }

/* ---------- ancora de identidade das avaliacoes ----------
   Sem isto a prova mais forte da pagina passa despercebida: foi exatamente o
   que aconteceu na versao anterior. */
.google {
  display: grid; gap: var(--gap);
  padding-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-block-end: 1px solid var(--linha);
}
@media (min-width: 54rem) {
  .google { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}
.google__nota { display: flex; align-items: center; gap: 1rem; }
.google__valor {
  font-family: var(--f-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  font-weight: 500; line-height: 0.9; color: var(--titulo);
  font-variant-numeric: tabular-nums;
}
.google__n {
  font-family: var(--f-mono); font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--texto) 82%, transparent);
  margin-block-start: 0.45rem;
}
.google__texto { display: grid; gap: 1rem; }
.google__texto p { max-inline-size: 60ch; }
.google__link {
  font-family: var(--f-mono); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acento);
  text-underline-offset: 4px;
}

/* a estrela: fileira de cinco, tamanho preso ao texto ao lado */
.estrelas { display: inline-flex; gap: 0.14em; vertical-align: middle; }
.estrelas svg {
  inline-size: 1em; block-size: 1em;
  fill: var(--acento);
  display: block;
}
.google__nota .estrelas { font-size: 1.15rem; }
.depoimentos__grade { display: grid; gap: var(--gap); margin-block-start: 2.5rem; }
@media (min-width: 54rem) { .depoimentos__grade { grid-template-columns: repeat(3, 1fr); } }
.depoimentos figure { margin: 0; display: grid; gap: 0.9rem; align-content: start; }
.depoimentos blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--titulo); }
/* usa o token, e nao uma cor fixa: assim a legenda acompanha a superficie
   em que a secao estiver, escura ou clara */
.depoimentos figcaption {
  font-size: 0.86rem; color: color-mix(in srgb, var(--texto) 78%, transparent);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.depoimentos figcaption .estrelas { font-size: 0.82rem; }
.depoimentos figcaption b { font-weight: 500; }

/* CADA FOTO NA PROPORCAO QUE ELA TEM. Antes era `aspect-ratio: 4/3` para
   todas, e a primeira em 8/3: uma foto retrato de 1100x1467 dentro de 8/3
   perde 70% da altura. Cada quadro agora declara a sua, lida do arquivo. */
.galeria { display: grid; gap: 0.9rem; margin-block-start: 3rem; align-items: start; }
@media (min-width: 48rem) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.galeria figure { margin: 0; }
.galeria img {
  inline-size: 100%; block-size: auto;
  border-radius: var(--raio);
}

/* ==========================================================================
   PERGUNTAS. Acordeao nativo, acessivel de graca.
   ========================================================================== */
.perguntas { padding-block: var(--pad-secao); }
.perguntas__lista { margin-block-start: 2.5rem; max-inline-size: 58rem; }
.perguntas__lista { display: grid; gap: 0.75rem; }
.perguntas details {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra);
  padding-inline: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  transition: box-shadow 160ms ease;
}
.perguntas details[open] { box-shadow: var(--sombra-alta); }
.perguntas summary {
  cursor: pointer; list-style: none;
  padding-block: 1.35rem; padding-inline-end: 2.5rem;
  position: relative;
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 500;
  color: var(--titulo);
  transition: color 140ms ease;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "+";
  position: absolute; inset-inline-end: 0.25rem; inset-block-start: 1.2rem;
  font-family: var(--f-mono); font-size: 1.3rem; line-height: 1;
  color: var(--acento);
}
.perguntas details[open] summary::after { content: "\2212"; }
.perguntas summary:hover { color: var(--acento); }
.perguntas details > p { padding-block-end: 1.5rem; max-inline-size: 62ch; }

/* ==========================================================================
   AGENDAMENTO. O widget do Calendly entra so quando a secao se aproxima.
   O link direto abaixo dele funciona sem JS e e a rede de seguranca.
   ========================================================================== */
.agenda { padding-block: var(--pad-secao); }
.agenda__cab { max-inline-size: 44rem; }
.agenda__caixa {
  margin-block-start: 2.5rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  min-block-size: 660px;
}
/* o plano B: bloco irmao do widget, escondido ate o vigia soltar */
.agenda__plano-b {
  margin-block-start: 1.5rem;
  display: grid; gap: 1rem; justify-items: start;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
}
.agenda__plano-b[hidden] { display: none; }
.agenda__plano-b p { max-inline-size: 52ch; }
.agenda__alt { margin-block-start: 1.5rem; font-size: 0.92rem; }
.agenda__alt a { color: var(--verde-medio); }

/* ==========================================================================
   RODAPE. Saida discreta para quem chegou procurando atendimento, nao carreira.
   ========================================================================== */
.rodape { padding-block: var(--pad-secao) 3rem; border-block-start: 1px solid var(--linha); }
.rodape__grade { display: grid; gap: var(--gap); }
@media (min-width: 54rem) { .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; column-gap: 3rem; } }
.rodape img { block-size: 2.4rem; inline-size: auto; margin-block-end: 1.25rem; }
.rodape h2 { font-size: 1.3rem; margin-block-end: 0.75rem; }
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; font-size: 0.95rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__legal {
  margin-block-start: 3rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--linha);
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--texto) 72%, transparent);
  display: grid; gap: 0.75rem;
}
.rodape__legal p { max-inline-size: 76ch; }