/* ==========================================================================
   LOUÇADADA · sistema visual do site
   Executa a Identidade Visual aprovada (Fortunato Estúdio, ago/2026).
   Paleta 60-25-10-5: Grafite palco · Porcelana respiro · Azul assina · Latão joia.
   Regra de contraste da marca: escuro carrega claro, claro carrega escuro,
   e os dois acentos (azul e latão) nunca se tocam.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  /* as quatro cores da casa */
  --grafite:#24282C;
  --grafite-fundo:#1C1F22;   /* um tom abaixo, pra dar profundidade de noite */
  --grafite-alto:#2C3136;    /* superfície elevada sobre o grafite */
  --azul:#1F66AC;
  --azul-vivo:#2E7FCE;       /* o azul que respira em cima do grafite */
  --azul-link:#5AA0E8;       /* o azul do toque: 6:1 no grafite, aguenta texto miúdo */
  --latao:#B8934A;
  --latao-claro:#CBA95F;
  --porcelana:#F2EDE3;
  --porcelana-fundo:#EDE7DA;

  /* texto */
  --tinta:var(--porcelana);
  --tinta-suave:#C3BCAE;
  --tinta-fraca:#969084;
  --linha:rgba(242,237,227,.16);
  --linha-fraca:rgba(242,237,227,.08);

  /* letras
     Bookmania é a serifa oficial da marca (licença Adobe). Se o webfont for
     hospedado um dia, basta um @font-face com esse nome que ele assume sozinho.
     Até lá, Fraunces segura a linhagem: serifa de corpo generoso, presença de
     letreiro. O logotipo em si nunca depende de fonte — é vetor. */
  --serifa:"Bookmania","Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --caneta:"Caveat",cursive;

  /* medidas */
  --largura:1180px;
  --largura-texto:64ch;
  --gutter:clamp(20px,5vw,44px);
  --secao:clamp(72px,10vw,128px);
  --raio:4px;          /* a casa é de serifa e fita: canto quase reto */
  --raio-foto:6px;
  --transicao:.32s cubic-bezier(.22,.61,.36,1);
}

/* --- base --------------------------------------------------------------- */
*,*::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(--grafite-fundo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(16px,.42vw + 15px,17.5px);
  line-height:1.65;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;cursor:pointer}

::selection{background:var(--azul);color:var(--porcelana)}

:focus-visible{
  outline:2px solid var(--latao-claro);
  outline-offset:3px;
  /* um anel escuro por fora garante o contraste também sobre porcelana */
  box-shadow:0 0 0 5px var(--grafite-fundo);
  border-radius:2px;
}
.claro :focus-visible{box-shadow:0 0 0 5px var(--grafite)}

/* pula pro conteúdo, pra quem navega no teclado */
.pular{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--porcelana);color:var(--grafite);
  padding:12px 20px;font-weight:600;
}
.pular:focus{left:12px;top:12px}

/* --- tipografia --------------------------------------------------------- */
.display,h1,h2,h3{
  font-family:var(--serifa);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.018em;
  font-variation-settings:"SOFT" 30,"WONK" 0;
}
h1,.t-1{font-size:clamp(40px,6.2vw,76px)}
h2,.t-2{font-size:clamp(31px,4.1vw,52px);line-height:1.1}
h3,.t-3{font-size:clamp(22px,2.2vw,29px);line-height:1.18;letter-spacing:-.012em}

.sobrelinha{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:650;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--latao);
  display:block;
  margin-bottom:18px;
}
.sobrelinha--azul{color:var(--azul)}

.linha-fina{
  font-size:clamp(18px,1.9vw,22.5px);
  line-height:1.5;
  color:var(--tinta-suave);
  max-width:56ch;
  font-weight:340;
}

.texto p + p{margin-top:1.15em}
.texto{max-width:var(--largura-texto)}

/* a terceira voz: a caneta da casa. Sempre grande, sempre torta. */
.nota{
  font-family:var(--caneta);
  font-size:clamp(25px,2.6vw,33px);
  line-height:1.15;
  color:var(--latao-claro);
  transform:rotate(-2.5deg);
  display:inline-block;
  font-weight:500;
}
.nota--porcelana{color:var(--porcelana)}
.nota--direita{transform:rotate(2deg)}

/* --- layout ------------------------------------------------------------- */
.envelope{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.secao{padding-block:var(--secao)}
.secao--curta{padding-block:clamp(52px,7vw,84px)}

/* o claro entra como respiro, nunca como regra */
.claro{background:var(--porcelana);color:var(--grafite)}
.claro .sobrelinha{color:var(--azul)}
.claro .cartao__num{color:var(--azul)}
.claro .linha-fina{color:#54514A}
.claro .nota{color:var(--azul)}
.claro a:not(.botao){text-decoration-color:rgba(36,40,44,.35)}

.escuro-alto{background:var(--grafite)}

.duas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.duas--texto-maior{grid-template-columns:1.08fr .92fr}
@media (max-width:860px){
  .duas,.duas--texto-maior{grid-template-columns:1fr;gap:36px}
}

.grade{display:grid;gap:clamp(20px,2.4vw,30px)}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){
  .grade--3,.grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .grade--2,.grade--3,.grade--4{grid-template-columns:1fr}
}

/* --- marca -------------------------------------------------------------- */
.marca{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--porcelana)}
/* o laço é o herói da fachada, em escala de arquitetura: na assinatura ele
   também manda, e não fica de coadjuvante do nome */
.marca__laco{width:56px;color:var(--azul-vivo);flex:none;transition:color var(--transicao)}
.marca__nome{width:132px;color:currentColor}
/* o toque acende o azul, não troca de cor: latão é joia parada, não é estado */
.marca:hover .marca__laco{color:var(--azul-link)}
.claro .marca:hover .marca__laco{color:var(--azul-vivo)}
.claro .marca{color:var(--grafite)}
.claro .marca__laco{color:var(--azul)}

/* --- cabeçalho ---------------------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:60;
  background:rgba(28,31,34,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--linha-fraca);
  padding-top:env(safe-area-inset-top,0px);
}
.topo__linha{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:74px;
}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.menu a{
  text-decoration:none;font-size:14.5px;font-weight:500;
  color:var(--tinta-suave);letter-spacing:.01em;
  padding:6px 0;position:relative;transition:color var(--transicao);
}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--latao);transition:right var(--transicao);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--porcelana)}
.menu a:hover::after,.menu a[aria-current="page"]::after{right:0}
/* o botão dentro do menu não herda o estilo de link do menu */
.menu a.botao{padding:14px 26px;font-weight:600;letter-spacing:.02em;color:var(--porcelana)}
.menu a.botao::after{display:none}

.abrir-menu{
  display:none;background:none;border:1px solid var(--linha);
  color:var(--porcelana);padding:9px 15px;border-radius:var(--raio);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
@media (max-width:860px){
  .abrir-menu{display:block}
  /* o backdrop-filter do topo criaria um containing block e prenderia o painel
     fixo do menu dentro da altura do cabeçalho. No celular ele sai, e o fundo
     vira sólido, que é melhor pra leitura de qualquer jeito. */
  .topo{
    background:var(--grafite-fundo);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .menu{
    position:fixed;inset:0;top:0;
    background:var(--grafite);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:8px;
    padding:calc(var(--gutter) + 56px + env(safe-area-inset-top,0px)) var(--gutter)
            calc(var(--gutter) + env(safe-area-inset-bottom,0px));
    /* se a lista crescer, ela rola dentro do painel em vez de vazar pra fora dele */
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateY(-100%);
    /* fechado, some de verdade: sai do foco do teclado e do leitor de tela */
    visibility:hidden;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),visibility 0s linear .4s;
    z-index:80;
  }
  .menu[data-aberto="true"]{
    transform:translateY(0);
    visibility:visible;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),visibility 0s;
  }
  .menu a{font-family:var(--serifa);font-size:30px;color:var(--porcelana);padding:10px 0}
  .menu a::after{display:none}
  .menu .botao{margin-top:20px;font-size:15px}
  .fechar-menu{
    position:absolute;top:calc(22px + env(safe-area-inset-top,0px));right:var(--gutter);
    background:none;border:1px solid var(--linha);color:var(--porcelana);
    padding:9px 15px;border-radius:var(--raio);font-size:13px;
    letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  }
}
.fechar-menu{display:none}
@media (max-width:860px){.menu[data-aberto="true"] .fechar-menu{display:block}}

/* --- botões ------------------------------------------------------------- */
.botao{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;border:1px solid transparent;
  transition:background var(--transicao),color var(--transicao),border-color var(--transicao),transform .18s;
  white-space:nowrap;
}
.botao:active{transform:translateY(1px)}
.botao svg{width:15px;flex:none}

.botao--azul{background:var(--azul);color:var(--porcelana);border-color:var(--azul)}
.botao--azul:hover{background:var(--azul-vivo);border-color:var(--azul-vivo)}

.botao--linha{border-color:var(--linha);color:var(--porcelana)}
.botao--linha:hover{border-color:var(--porcelana);background:rgba(242,237,227,.06)}

.claro .botao--linha{border-color:rgba(36,40,44,.28);color:var(--grafite)}
.claro .botao--linha:hover{border-color:var(--grafite);background:rgba(36,40,44,.05)}

.botao--escuro{background:var(--grafite);color:var(--porcelana);border-color:var(--grafite)}
.botao--escuro:hover{background:#171A1D;border-color:#171A1D}

/* link de texto com o filete de latão */
.link{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--latao);
  padding-bottom:2px;
  transition:border-color var(--transicao),color var(--transicao);
}
.link:hover{color:var(--azul-link);border-color:var(--azul-link)}
.claro .link:hover{color:var(--azul);border-color:var(--azul)}

/* --- abertura (hero) ---------------------------------------------------- */
.abertura{
  padding-block:clamp(52px,8vw,104px) clamp(60px,9vw,120px);
  position:relative;overflow:hidden;
}
.abertura__grade{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,74px);
  align-items:center;
}
@media (max-width:900px){.abertura__grade{grid-template-columns:1fr;gap:38px}}

.abertura h1{margin-bottom:22px}
.abertura h1 em{
  font-style:italic;color:var(--latao-claro);
  font-variation-settings:"SOFT" 60,"WONK" 1;
}
.abertura__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.abertura__foto{
  position:relative;border-radius:var(--raio-foto);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.abertura__foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.abertura__legenda{
  position:absolute;left:0;right:0;bottom:0;
  padding:72px 26px 20px;
  background:linear-gradient(to top,rgba(20,23,25,.94) 32%,transparent);
  font-size:13px;color:var(--tinta-suave);letter-spacing:.02em;
  line-height:1.45;
}

/* --- o álbum da casa: as fotos se revezando ----------------------------- */
/* Sem JS, só a primeira aparece, e ela sozinha já conta a história.
   Com JS, o script liga os controles e o revezamento. */
.album{display:grid}
.album__item{
  grid-area:1/1;margin:0;position:relative;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;
}
.album__item[data-ativa]{
  opacity:1;visibility:visible;
  transition:opacity .9s ease,visibility 0s;
}
.album__item img{display:block}

.album__controles{
  grid-area:1/1;align-self:end;justify-self:stretch;
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 18px 16px;
  opacity:0;visibility:hidden;pointer-events:none;  /* o JS revela quando assume o álbum */
}
.album[data-ligado] .album__controles{opacity:1;visibility:visible;pointer-events:auto}
.album[data-ligado] .abertura__legenda{padding-bottom:52px}

.album__pontos{display:flex;gap:7px}
.album__ponto{
  width:7px;height:7px;padding:0;border-radius:50%;
  border:1px solid rgba(242,237,227,.55);background:transparent;
  transition:background var(--transicao),border-color var(--transicao),transform var(--transicao);
}
.album__ponto[aria-current="true"]{
  background:var(--latao-claro);border-color:var(--latao-claro);transform:scale(1.25);
}
.album__ponto:hover{border-color:var(--porcelana)}

.album__pausa{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(20,23,25,.62);border:1px solid rgba(242,237,227,.22);
  color:var(--porcelana);border-radius:999px;padding:5px 12px 5px 9px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color var(--transicao),background var(--transicao);
}
.album__pausa:hover{border-color:var(--porcelana);background:rgba(20,23,25,.82)}
/* duas barrinhas quando está correndo, um triângulo quando está parado */
.album__icone{
  width:8px;height:9px;flex:none;
  background:linear-gradient(90deg,currentColor 0 32%,transparent 32% 68%,currentColor 68% 100%);
}
.album__pausa[aria-pressed="true"] .album__icone{
  background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);
}

@media (prefers-reduced-motion:reduce){
  .album__item{transition:none}
}

/* --- números da casa ---------------------------------------------------- */
.provas{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  padding-block:clamp(30px,4vw,46px);
}
@media (max-width:760px){.provas{grid-template-columns:repeat(2,1fr);gap:28px}}
.claro .provas{border-color:rgba(36,40,44,.14)}
.claro .prova__num,.claro .cartao p.prova__num{color:var(--azul)}
.claro .prova__txt,.claro .cartao p.prova__txt{color:#54514A}
.prova__num{
  font-family:var(--serifa);font-size:clamp(34px,4vw,50px);
  line-height:1;color:var(--latao);font-weight:600;letter-spacing:-.02em;
}
.prova__txt{
  margin-top:11px;font-size:14px;color:var(--tinta-suave);
  line-height:1.45;max-width:24ch;
}

/* --- cartões ------------------------------------------------------------ */
.cartao{
  background:var(--grafite);
  border:1px solid var(--linha-fraca);
  border-radius:var(--raio);
  padding:clamp(26px,3vw,36px);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--transicao),transform var(--transicao);
}
.cartao__num{
  font-family:var(--serifa);font-size:13px;letter-spacing:.2em;
  color:var(--latao);font-weight:600;
}
.cartao p{color:var(--tinta-suave);font-size:15.5px;line-height:1.6}
.cartao p.prova__num{font-size:clamp(34px,4vw,50px);color:var(--latao);line-height:1}
.cartao p.prova__txt{font-size:14px;color:var(--tinta-suave)}
.claro .cartao{
  background:#fff;border-color:rgba(36,40,44,.12);
}
.claro .cartao p{color:#54514A}
a.cartao{text-decoration:none}
a.cartao:hover{border-color:var(--azul-link);transform:translateY(-3px)}
.claro a.cartao:hover{border-color:var(--azul)}

/* --- passos (o jeito da casa) ------------------------------------------- */
.passos{counter-reset:passo;display:grid;gap:0}
.passo{
  display:grid;grid-template-columns:78px 1fr;
  gap:clamp(18px,3vw,38px);
  padding-block:clamp(26px,3.2vw,38px);
  border-top:1px solid var(--linha);
  align-items:start;
}
.passo:last-child{border-bottom:1px solid var(--linha)}
.passo__n{
  font-family:var(--serifa);font-size:clamp(26px,3vw,38px);
  color:var(--azul-vivo);line-height:1;font-weight:600;
}
.claro .passo{border-color:rgba(36,40,44,.14)}
.claro .passo__n{color:var(--azul)}
.passo h3{margin-bottom:9px}
.passo p{color:var(--tinta-suave);max-width:58ch}
.claro .passo p{color:#54514A}
@media (max-width:560px){
  .passo{grid-template-columns:1fr;gap:10px}
}

/* --- manifesto ---------------------------------------------------------- */
.manifesto{
  background:var(--grafite);
  position:relative;
}
.manifesto__texto{
  font-family:var(--serifa);
  font-size:clamp(21px,2.5vw,31px);
  line-height:1.42;
  letter-spacing:-.012em;
  max-width:22ch;
  font-weight:400;
  /* o navegador reparte as linhas sozinho e não deixa palavra sobrando
     sozinha no fim; onde ele não entende, os espaços rígidos do HTML
     seguram as duas últimas palavras juntas do mesmo jeito */
  text-wrap:balance;
}
/* a segunda frase é a resposta da primeira: precisa de um respiro antes,
   senão as duas viram um bloco só */
.manifesto__texto .depois{display:block;margin-top:.62em}
.manifesto__corpo{
  max-width:60ch;font-size:16.5px;line-height:1.75;color:var(--tinta-suave);
}
.manifesto__corpo p + p{margin-top:1.1em}
.manifesto__corpo em{color:var(--porcelana);font-style:italic}
.manifesto__laco{
  width:96px;color:var(--azul-vivo);margin-bottom:30px;
}
/* o selo e a frase são uma coisa só: ficam colados no topo da coluna,
   alinhados com a primeira linha do texto ao lado */
.manifesto__marca{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(22px,2.6vw,32px);
  align-self:start;
}
.manifesto__selo{width:clamp(108px,11vw,148px);height:auto;flex:none}
/* essa seção alinha pelo topo, não pelo meio: com o texto longo ao lado,
   centralizar deixava a frase boiando no vazio */
.manifesto .duas,
.manifesto .duas--texto-maior{align-items:start}
@media (max-width:860px){
  .manifesto__selo{width:96px}
}

/* --- citação ------------------------------------------------------------ */
.citacao{
  border-left:2px solid var(--latao);
  padding-left:clamp(20px,2.6vw,32px);
  max-width:46ch;
}
.citacao p{
  font-family:var(--serifa);font-size:clamp(20px,2.3vw,28px);
  line-height:1.34;font-style:italic;letter-spacing:-.01em;
}
.citacao footer{
  margin-top:14px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-fraca);font-weight:600;font-style:normal;
}
.claro .citacao footer{color:#6E6A61}

/* --- galeria ------------------------------------------------------------ */
.figura{margin:0;position:relative}
.figura img{
  width:100%;border-radius:var(--raio-foto);object-fit:cover;
  background:var(--grafite-alto);
}
.figura figcaption{
  margin-top:12px;font-size:13.5px;color:var(--tinta-fraca);line-height:1.45;
}
.claro .figura figcaption{color:#6E6A61}
.figura--alta img{aspect-ratio:3/4}
.figura--larga img{aspect-ratio:16/9}
.figura--quadrada img{aspect-ratio:1/1}

/* faixa de fotos que rola no dedo, sem virar carrossel de banner */
.trilho{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(260px,31%);
  gap:clamp(14px,1.8vw,22px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:16px;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  scrollbar-width:thin;
  scrollbar-color:var(--linha) transparent;
}
.trilho > *{scroll-snap-align:start}
.trilho::-webkit-scrollbar{height:5px}
.trilho::-webkit-scrollbar-thumb{background:var(--linha);border-radius:99px}
@media (max-width:640px){.trilho{grid-auto-columns:minmax(220px,78%)}}

/* --- gente da casa ------------------------------------------------------ */
.gente{display:flex;flex-direction:column;gap:14px}
.gente img{
  border-radius:var(--raio-foto);aspect-ratio:4/5;width:100%;
  object-fit:cover;
  /* o corte puxa pro alto da imagem, que é onde os rostos ficam */
  object-position:50% 22%;
}
.gente p.gente__papel{
  font-family:var(--caneta);font-size:23px;color:var(--latao-claro);line-height:1.1;
}
.gente h3{font-size:clamp(20px,2vw,25px)}
.gente p{font-size:15px;color:var(--tinta-suave);line-height:1.58}
.claro .gente p{color:#54514A}
.claro .gente p.gente__papel{color:var(--azul)}

/* --- linha do tempo ----------------------------------------------------- */
.tempo{display:grid;gap:0}
.marco{
  display:grid;grid-template-columns:120px 1fr;
  gap:clamp(18px,3vw,40px);
  padding-block:clamp(22px,2.8vw,32px);
  border-top:1px solid var(--linha);
  align-items:start;
}
.marco:last-child{border-bottom:1px solid var(--linha)}
.claro .marco{border-color:rgba(36,40,44,.14)}
.marco__ano{
  font-family:var(--serifa);font-size:clamp(19px,2vw,25px);
  color:var(--latao);font-weight:600;line-height:1.2;letter-spacing:.01em;
}
.marco p{color:var(--tinta-suave);max-width:62ch}
.claro .marco p{color:#54514A}
.marco strong{color:var(--porcelana);font-weight:600}
.claro .marco strong{color:var(--grafite)}
@media (max-width:620px){
  .marco{grid-template-columns:1fr;gap:6px}
}

/* --- chamada final ------------------------------------------------------ */
.chamada{
  background:var(--azul);color:var(--porcelana);
  border-radius:var(--raio);
  padding:clamp(34px,5vw,64px);
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(24px,4vw,52px);align-items:center;
}
@media (max-width:820px){.chamada{grid-template-columns:1fr}}
.chamada h2{margin-bottom:14px}
.chamada p{color:rgba(242,237,227,.94);max-width:44ch}
.chamada .botao--escuro{background:var(--grafite);border-color:var(--grafite)}

/* --- ficha de contato --------------------------------------------------- */
.ficha{display:grid;gap:26px}
.ficha dt{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--latao);font-weight:650;margin-bottom:7px;
}
.ficha dd{margin:0;font-size:17px;line-height:1.5}
.ficha dd a{text-decoration:none;border-bottom:1px solid var(--linha);transition:border-color var(--transicao)}
.ficha dd a:hover{border-color:var(--azul-link)}
.claro .ficha dt{color:var(--azul)}
.claro .ficha dd a{border-color:rgba(36,40,44,.25)}
.claro .ficha dd a:hover{border-color:var(--azul)}

.mapa{
  width:100%;border:0;border-radius:var(--raio-foto);
  aspect-ratio:4/3;background:var(--grafite-alto);filter:saturate(.75) contrast(1.05);
}
@media (max-width:860px){.mapa{aspect-ratio:4/3}}

/* --- rodapé ------------------------------------------------------------- */
.rodape{
  background:var(--grafite);
  border-top:1px solid var(--linha-fraca);
  padding-block:clamp(48px,6vw,76px) clamp(28px,3vw,38px);
  padding-bottom:calc(clamp(28px,3vw,38px) + env(safe-area-inset-bottom,0px));
}
.rodape__grade{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
}
@media (max-width:760px){.rodape__grade{grid-template-columns:1fr;gap:34px}}
.rodape h2{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--latao);font-weight:650;margin-bottom:16px;
}
.rodape li{margin-bottom:10px}
.rodape a{
  text-decoration:none;color:var(--tinta-suave);font-size:15px;
  transition:color var(--transicao);
}
.rodape a:hover{color:var(--porcelana)}
.rodape__fim{
  margin-top:clamp(36px,4.6vw,56px);padding-top:24px;
  border-top:1px solid var(--linha-fraca);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  font-size:13px;color:var(--tinta-fraca);
}
.rodape__frase{
  font-family:var(--serifa);font-style:italic;font-size:17px;
  color:var(--tinta-suave);max-width:34ch;margin-top:18px;line-height:1.45;
}

/* --- entrada suave ------------------------------------------------------ */
.surge{opacity:0;transform:translateY(18px)}
.surge.visivel{opacity:1;transform:none;transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .surge{opacity:1;transform:none;transition:none}
  .botao,.cartao,.marca__laco{transition:none}
}

/* --- utilidades --------------------------------------------------------- */
.centro{text-align:center;margin-inline:auto}
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.mt-p{margin-top:clamp(20px,2.4vw,30px)}
.mt-m{margin-top:clamp(34px,4.4vw,56px)}
.mt-g{margin-top:clamp(48px,6vw,80px)}
.laco-divisor{
  width:62px;color:var(--azul-vivo);margin:0 auto clamp(26px,3vw,38px);
}
.claro .laco-divisor{color:var(--azul)}

/* quem já não está, fica marcada com discrição: um filete de latão antes do
   papel dela, sem transformar a lembrança em enfeite. O filete fica no texto e
   não na coluna inteira, senão a foto dela encolhia e quebrava a fila. */
.gente--memoria .gente__papel{display:flex;align-items:center;gap:10px}
.gente--memoria .gente__papel::before{
  content:"";width:24px;height:1px;background:var(--latao);flex:none;
}

/* depoimento usa o mesmo cartão, só com a fonte da citação no rodapé */
blockquote.cartao p{font-family:var(--serifa);font-size:17.5px;line-height:1.5;color:var(--tinta)}
blockquote.cartao footer{margin-top:auto;padding-top:16px;color:var(--latao)}
.claro blockquote.cartao p{color:var(--grafite)}

/* --- link com ícone ------------------------------------------------------ */
.com-icone{display:inline-flex;align-items:center;gap:8px}
.com-icone .icone{width:16px;height:16px;flex:none;opacity:.85;transition:opacity var(--transicao)}
.com-icone:hover .icone{opacity:1}
/* quando o texto tem mais de uma linha, o ícone acompanha a primeira,
   em vez de flutuar no meio do bloco */
.com-icone--topo{align-items:flex-start}
.com-icone--topo .icone{margin-top:4px}
/* num endereço de duas linhas o filete embaixo do bloco grifaria só a última
   linha, e isso parece erro. Aqui quem sublinha é o texto, nas duas linhas. */
.ficha dd a.com-icone--topo{border-bottom:none}
.ficha dd a.com-icone--topo span{
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--linha);
  transition:text-decoration-color var(--transicao);
}
.claro .ficha dd a.com-icone--topo span{text-decoration-color:rgba(36,40,44,.25)}
.ficha dd a.com-icone--topo:hover span{text-decoration-color:var(--azul-link)}
.claro .ficha dd a.com-icone--topo:hover span{text-decoration-color:var(--azul)}

/* os dois caminhos até a porta, lado a lado embaixo do mapa */
.mapa-acoes{display:flex;flex-wrap:wrap;gap:10px}
.mapa-acoes .botao{font-size:14px;padding:12px 20px}

/* páginas de confiança no rodapé: discretas, mas presentes em todo lugar */
.rodape__legais{display:flex;gap:20px}
.rodape__legais a{font-size:13px;color:var(--tinta-fraca);text-decoration:none}
.rodape__legais a:hover{color:var(--porcelana)}

/* --- seção no azul da casa ----------------------------------------------- */
/* O azul é assinatura, não parede: entra numa seção só por página, na parte
   que merece o destaque. Aqui, o condicional, que é o coração do serviço. */
.azul{background:var(--azul);color:var(--porcelana)}
.azul .sobrelinha{color:var(--porcelana);opacity:.78}
.azul .linha-fina{color:rgba(242,237,227,.92)}
.azul .texto p,.azul .passo p,.azul .cartao p{color:rgba(242,237,227,.92)}
.azul .nota{color:var(--porcelana)}
.azul .citacao{border-left-color:var(--porcelana)}
.azul .citacao footer{color:rgba(242,237,227,.75)}
.azul .figura figcaption{color:rgba(242,237,227,.8)}
.azul .passo{border-color:rgba(242,237,227,.26)}
.azul .passo__n{color:var(--porcelana)}
.azul .botao--linha{border-color:rgba(242,237,227,.5);color:var(--porcelana)}
.azul .botao--linha:hover{border-color:var(--porcelana);background:rgba(242,237,227,.1)}
.azul .botao--escuro{background:var(--grafite);border-color:var(--grafite)}
.azul :focus-visible{box-shadow:0 0 0 5px rgba(20,23,25,.55)}
/* dentro do azul o cartão afunda um tom, em vez de virar buraco branco */
.azul .cartao{background:rgba(13,42,74,.4);border-color:rgba(242,237,227,.22)}
.azul .cartao__num,.azul blockquote.cartao footer{color:rgba(242,237,227,.8)}
.azul .link{border-color:rgba(242,237,227,.55)}
.azul .link:hover{color:var(--porcelana);border-color:var(--porcelana)}
.azul a.cartao:hover{border-color:var(--porcelana)}

/* --- abertura com a foto do tamanho do texto ----------------------------- */
/* Em vez de recortar a foto numa proporção fixa, ela estica e acompanha a
   altura da coluna de texto: topo com topo, base com base. */
.abertura__grade--cheia{align-items:stretch}
.abertura__grade--cheia > div{align-self:center}
.abertura__grade--cheia .abertura__foto{display:flex}
.abertura__grade--cheia .abertura__foto img{
  aspect-ratio:auto;
  height:100%;
  width:100%;
  object-fit:cover;
  min-height:clamp(320px,42vw,520px);
}
@media (max-width:900px){
  .abertura__grade--cheia .abertura__foto img{min-height:0;aspect-ratio:16/10}
}

/* --- selo de caso real ---------------------------------------------------- */
/* Marca a história que aconteceu de verdade. Fica em cima da sobrelinha,
   com filete de latão, pra quem passa o olho saber que não é exemplo. */
.selo-caso{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--latao);
  border-radius:999px;
  padding:6px 15px;
  margin-bottom:16px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:650;
  color:var(--latao-claro);
}
.selo-caso::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--latao);flex:none;
}
.claro .selo-caso{color:#7D5F28;border-color:rgba(184,147,74,.6)}
.azul .selo-caso{color:var(--porcelana);border-color:rgba(242,237,227,.5)}
.azul .selo-caso::before{background:var(--porcelana)}