/* ==========================================================================
   Vintage Decor — folha de estilo
   Paleta e tipografia aprovadas na Fase 2.3
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes hospedadas junto com o site — nada é pedido a servidor de terceiro.
   Arquivos reduzidos só aos caracteres que o site usa (latino + acentos do
   português + pontuação): as seis somam 89 KB, contra 336 KB dos originais.
   Licença SIL Open Font: OFL-Figtree.txt e OFL-Fraunces.txt, nesta pasta.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;
  src:url("fontes/figtree-400.woff") format("woff")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;
  src:url("fontes/figtree-600.woff") format("woff")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;
  src:url("fontes/figtree-700.woff") format("woff")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("fontes/fraunces-400.woff") format("woff")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("fontes/fraunces-600.woff") format("woff")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url("fontes/fraunces-700.woff") format("woff")}

:root{
  /* cores */
  --preto:#14110F;
  --superficie:#1E1A17;
  --areia:#F5F1EA;
  --areia-2:#EBE5DA;
  --txt-claro:#F0EBE4;
  --txt-claro-2:#C9C0B5;
  --txt-escuro:#241F1B;
  --txt-escuro-2:#4A423A;
  --marca:#469E91;
  --marca-claro:#5FBFB0;
  --marca-escuro:#2C746A;
  --acao:#F1881C;
  --linha-escura:#3A342E;
  --linha-clara:#E0D9CE;
  --alerta:#FFE45C;

  /* seções de fundo verde */
  --verde:#1B4F47;          /* fundo */
  --verde-fundo:#164541;    /* superfície sobre o verde */
  --verde-linha:#3D6B64;
  --laranja-no-verde:#FBA94F; /* 4,83:1 sobre o verde — o #F1881C dá 3,67 e reprova */
  --claro-no-verde:#D8D2C7;   /* 6,19:1 sobre o verde */

  /* tipografia */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  /* medidas */
  --max:1200px;
  --medida:68ch;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--preto);
  color:var(--txt-claro);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
@media (min-width:768px){body{font-size:18px;line-height:1.65}}

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

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:34px;line-height:1.15}
h2{font-size:26px;line-height:1.25}
h3{font-size:20px;line-height:1.3}
@media (min-width:768px){
  h1{font-size:54px;line-height:1.1}
  h2{font-size:34px;line-height:1.2}
  h3{font-size:22px}
}
p{margin:0 0 1em;max-width:var(--medida)}
.apoio{font-size:15px;line-height:1.5}

.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.env{padding-inline:32px}}

section{padding-block:56px}
@media (min-width:768px){section{padding-block:88px}}

.claro{background:var(--areia);color:var(--txt-escuro)}
.claro h1,.claro h2,.claro h3{color:var(--txt-escuro)}
.claro .apoio,.claro .sub{color:var(--txt-escuro-2)}
.sub{color:var(--txt-claro-2)}

.olho{
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--marca-claro);margin:0 0 12px;
}
.claro .olho{color:var(--marca-escuro)}

/* ------------------------------------------------------ seções verdes */
.verde{background:var(--verde);color:var(--txt-claro)}
.verde h1,.verde h2,.verde h3{color:var(--txt-claro)}
.verde .olho{color:var(--laranja-no-verde)}
.verde p{color:var(--txt-claro)}
.verde .apoio,.verde .sub{color:var(--claro-no-verde)}
.verde .par figcaption,.verde .legenda{color:var(--claro-no-verde);border-top-color:var(--verde-linha)}
.verde .citacao{background:var(--verde-fundo);border-left-color:var(--laranja-no-verde)}
.verde .citacao p{color:var(--txt-claro)}
.verde .citacao footer{color:var(--claro-no-verde)}
.verde .citacao a{color:var(--laranja-no-verde)}
.verde .passos li{border-top-color:var(--verde-linha)}
.verde .passos li::before{color:var(--laranja-no-verde)}
.verde .passos b{color:var(--txt-claro)}
.verde .passos p{color:var(--claro-no-verde)}
.verde .btn-linha{border-color:var(--claro-no-verde);color:var(--txt-claro)}
.verde .btn-linha:hover{border-color:var(--laranja-no-verde);color:var(--laranja-no-verde)}

/* marcador de dado por confirmar — amarelo, impossível de publicar sem ver */
.confirmar{
  background:var(--alerta);color:#1a1a00;font-weight:700;
  padding:.15em .45em;border-radius:4px;font-size:.95em;
}

/* --------------------------------------------------------- acessibilidade */
:focus-visible{outline:3px solid var(--marca-claro);outline-offset:3px;border-radius:4px}
.pula{
  position:absolute;left:-9999px;top:0;background:var(--acao);color:var(--preto);
  padding:12px 18px;z-index:100;font-weight:700;border-radius:0 0 var(--r) 0;
}
.pula:focus{left:0}
.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;
}

/* ------------------------------------------------------------------ botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.2;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  background:transparent;color:inherit;  /* <button> vem branco por padrão do navegador */
  transition:transform .12s ease,background-color .12s ease,border-color .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-acao{background:var(--acao);color:var(--preto)}
.btn-acao:hover{background:#FF9829}
.btn-linha{border-color:var(--txt-claro-2);color:var(--txt-claro)}
.btn-linha:hover{border-color:var(--marca-claro);color:var(--marca-claro)}
.claro .btn-linha{border-color:var(--txt-escuro-2);color:var(--txt-escuro)}
.claro .btn-linha:hover{border-color:var(--marca-escuro);color:var(--marca-escuro)}
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------------------------------------------------------------- cabeçalho */
.topo{
  position:static;z-index:50;
  background:rgba(20,17,15,.96);border-bottom:1px solid var(--linha-escura);
}
@media (min-width:768px){
  .topo{position:sticky;top:0;backdrop-filter:saturate(140%) blur(6px)}
}
.topo-in{display:flex;align-items:center;gap:10px 16px;min-height:60px;flex-wrap:wrap;padding-block:8px}
.marca{
  display:block;max-width:220px;overflow:hidden;
  transition:opacity .25s ease,max-width .25s ease;
}
/* enquanto a logo grande do título estiver na tela, a pequena do cabeçalho
   sai — o menu e o botão do WhatsApp continuam onde estão */
.topo.sem-marca .marca{opacity:0;visibility:hidden;max-width:0}
.marca img{width:132px;height:46px;object-fit:contain}
@media (min-width:768px){
  .topo-in{min-height:68px;padding-block:0}
  .marca img{width:196px;height:68px}
}
.topo .btn-acao{margin-left:auto}
.menu{order:3;width:100%;display:flex;gap:2px;flex-wrap:wrap;
      border-top:1px solid var(--linha-escura);padding-top:2px}
@media (min-width:768px){
  .menu{order:0;width:auto;margin-left:auto;border-top:0;padding-top:0;gap:4px}
  .topo .btn-acao{margin-left:0}
}
.menu a{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;
  text-decoration:none;color:var(--txt-claro);font-weight:600;font-size:16px;border-radius:8px;
}
.menu a:hover{color:var(--marca-claro)}
.topo-tel{
  display:none;align-items:center;min-height:44px;padding:6px 10px;
  color:var(--txt-claro-2);text-decoration:none;font-size:15px;font-weight:600;
}
.topo-tel:hover{color:var(--txt-claro)}
@media (min-width:1000px){.topo-tel{display:inline-flex}}
.topo .btn{min-height:44px;padding:10px 18px;font-size:15px}

/* -------------------------------------------------------------------- capa */
.capa{padding-block:44px 0}
@media (min-width:768px){.capa{padding-block:72px 0}}
.capa-grade{display:flex;gap:22px;align-items:flex-start}
.redes{display:flex;flex-direction:column;gap:6px;padding-top:6px;flex:0 0 auto}
.redes a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--linha-escura);color:var(--txt-claro-2);
}
.redes a:hover{color:var(--marca-claro);border-color:var(--marca-claro)}
.redes svg{width:20px;height:20px;fill:currentColor}
/* O H1 é a logo mais a frase. A frase é um SVG com textLength fixo em 1000
   unidades: assim ela ocupa exatamente a mesma largura da logo em qualquer
   tela, e continua batendo mesmo se a fonte do Google não carregar. */
.titulo-capa{margin:0 0 22px;max-width:340px}
@media (min-width:768px){.titulo-capa{max-width:460px}}
@media (min-width:1100px){.titulo-capa{max-width:520px}}
.titulo-logo{width:100%;height:auto;display:block}
.titulo-frase{display:block;width:100%;height:auto;margin-top:8px}
.titulo-frase text{
  fill:var(--marca-claro);
  font-family:var(--sans);font-weight:700;font-size:66px;
}
.fachada{margin:32px 0 0}
.fachada img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:var(--r)}
.fachada figcaption{font-size:14px;color:var(--claro-no-verde);padding-top:8px}
.capa-corpo{display:grid;gap:26px;width:100%}
@media (min-width:1000px){
  .capa-corpo{grid-template-columns:1.3fr .7fr;gap:52px;align-items:end}
}
.capa-lado{
  padding-top:20px;border-top:1px solid var(--linha-escura);
  color:var(--txt-claro-2);font-size:15px;line-height:1.5;
}
@media (min-width:1000px){
  .capa-lado{border-top:0;border-left:1px solid var(--linha-escura);padding:4px 0 4px 28px}
}
.capa-lado p{margin:0 0 14px}
.capa-lado p:last-child{margin-bottom:0}
.capa-lado b{color:var(--txt-claro);font-weight:600}
.capa-foto{margin-top:40px}
.capa-foto img{width:100%;height:auto;max-height:560px;object-fit:cover}
.legenda{
  font-size:13px;color:var(--txt-claro-2);padding-top:10px;
  border-top:1px solid var(--linha-escura);margin-top:0;
}

/* ------------------------------------------------- carrossel da vitrine */
.vitrine{background:var(--superficie);padding-block:40px}
@media (min-width:768px){.vitrine{padding-block:56px}}
.vitrine-topo{display:flex;justify-content:flex-end;margin-bottom:12px}
.setas{display:none;gap:8px}
@media (min-width:700px){.setas{display:flex}}
.seta{
  width:48px;height:48px;border-radius:50%;background:transparent;
  border:1px solid var(--linha-escura);color:var(--txt-claro);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.seta:hover{border-color:var(--marca-claro);color:var(--marca-claro)}
.seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.trilho{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:10px;margin:0;list-style:none;
  scrollbar-width:thin;scrollbar-color:var(--linha-escura) transparent;
}
.trilho::-webkit-scrollbar{height:8px}
.trilho::-webkit-scrollbar-thumb{background:var(--linha-escura);border-radius:8px}
.trilho li{scroll-snap-align:start;flex:0 0 auto;width:min(84vw,340px)}
@media (min-width:620px){.trilho li{width:330px}}
@media (min-width:980px){.trilho li{width:376px}}
.trilho figure{margin:0}
.trilho img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.trilho figcaption{font-size:14px;color:var(--txt-claro-2);padding-top:8px}
@media (prefers-reduced-motion:reduce){.trilho{scroll-behavior:auto}}

/* ---------------------------------------------------------- faixa de prova */
.prova{padding-block:36px}
@media (min-width:768px){.prova{padding-block:48px}}
.selos{display:grid;grid-template-columns:1fr;gap:20px;margin:0;padding:0;list-style:none}
@media (min-width:560px){.selos{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:980px){.selos{grid-template-columns:repeat(4,1fr)}}
.selo{display:flex;gap:14px;align-items:flex-start}
.selo svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--marca-escuro);stroke-width:1.8;margin-top:2px}
.selo b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25}
.selo span{display:block;font-size:15px;color:var(--txt-escuro-2);line-height:1.45}

/* ------------------------------------------------------------- categorias */
.cat-grade{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;
  margin:34px 0 0;padding:0;list-style:none;
}
@media (min-width:620px){.cat-grade{grid-template-columns:repeat(3,1fr);gap:30px 22px}}
@media (min-width:940px){.cat-grade{grid-template-columns:repeat(5,1fr);gap:34px 24px}}
.cat{display:block;text-decoration:none;text-align:center}
.medalha{display:block;position:relative;width:100%;aspect-ratio:1/1;margin-bottom:10px}
.medalha::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--marca);opacity:.16;
}
.medalha img{
  position:absolute;inset:8%;width:84%;height:84%;
  object-fit:cover;border-radius:50%;
  transition:transform .18s ease;
}
.cat:hover .medalha img{transform:scale(1.04)}
.arco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:none}
.arco text{
  font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:.18em;fill:var(--txt-claro);
}
.cat-nome{
  display:block;font-family:var(--sans);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-claro);
}
@media (min-width:620px){
  .arco{display:block}
  .cat-nome{display:none}
}
.cat:hover .arco text{fill:var(--marca-claro)}

/* --------------------------------------------------------------- duas fotos */
.par{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
@media (min-width:768px){.par{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:900px){.par.tres{grid-template-columns:repeat(3,1fr);gap:20px}}
.par figure{margin:0}
.par img{width:100%;border-radius:var(--r)}
.par figcaption{font-size:14px;color:var(--txt-escuro-2);padding-top:8px}

/* ------------------------------------------------------------------ citação */
.citacao{
  margin:32px 0 0;padding:22px 24px;border-left:4px solid var(--marca);
  background:var(--areia-2);border-radius:0 var(--r) var(--r) 0;
}
.citacao p{font-family:var(--serif);font-size:21px;line-height:1.4;margin:0 0 8px}
.citacao footer{font-size:14px;color:var(--txt-escuro-2)}
.citacao a{color:var(--marca-escuro);display:inline-flex;align-items:center;min-height:44px;padding-block:12px}
.citacao-escura{background:var(--superficie);border-left-color:var(--marca-claro)}
.citacao-escura p{color:var(--txt-claro)}
.citacao-escura footer{color:var(--txt-claro-2)}
.citacao-escura a{color:var(--marca-claro)}

/* --------------------------------------------------------------- atendimento */
.dupla{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:860px){.dupla{grid-template-columns:1.05fr .95fr;gap:44px}}
.dupla.invertida .dupla-txt{order:2}

/* A foto de atendimento chegou em 27/08/2026; o espaço reservado saiu.
   A moldura abaixo só arredonda a foto igual às demais da página. */
.foto-atende{margin:0}
.foto-atende img{width:100%;height:auto;border-radius:var(--r)}

/* --------------------------------------------------------------- separador */
.veio{height:110px;overflow:hidden;background:var(--superficie)}
.veio img{width:100%;height:110px;object-fit:cover}
@media (min-width:768px){.veio,.veio img{height:150px}}

/* ------------------------------------------------------------ como funciona */
.passos{
  counter-reset:p;list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:22px;
}
@media (min-width:700px){.passos{grid-template-columns:1fr 1fr;gap:26px 32px}}
@media (min-width:1040px){.passos{grid-template-columns:repeat(5,1fr);gap:24px}}
.passos li{counter-increment:p;padding-top:16px;border-top:2px solid var(--linha-clara)}
.passos li::before{
  content:counter(p,decimal-leading-zero);
  display:block;font-family:var(--serif);font-size:15px;font-weight:700;
  color:var(--marca-escuro);margin-bottom:6px;letter-spacing:.06em;
}
.passos b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:4px}
.passos p{font-size:15px;line-height:1.5;color:var(--txt-escuro-2);margin:0}

/* --------------------------------------------------------------- na casa */
.trio{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px}
@media (min-width:640px){.trio{grid-template-columns:repeat(3,1fr);gap:20px}}
.trio figure{margin:0}
.trio img{width:100%;border-radius:var(--r)}
.trio figcaption{font-size:14px;color:var(--txt-claro-2);padding-top:8px}

/* ----------------------------------------------------------- depoimentos */
.notas{display:grid;grid-template-columns:1fr;gap:18px;margin:34px 0 0;padding:0;list-style:none}
@media (min-width:760px){.notas{grid-template-columns:repeat(3,1fr);gap:22px}}
.nota{
  background:#fff;border:1px solid var(--linha-clara);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;gap:12px;
}
.nota blockquote{margin:0;font-family:var(--serif);font-size:18px;line-height:1.45}
/* laranja escurecido: o #F1881C dá só 2,54:1 sobre branco e as estrelas
   carregam informação, então precisam de pelo menos 3:1 — este dá 4,75:1 */
.nota .estrelas{color:#A8620C;letter-spacing:.12em;font-size:15px;margin:0}
.nota cite{margin-top:auto;font-style:normal;font-size:13.5px;color:var(--txt-escuro-2)}

/* -------------------------------------------------------------- contato */
.contato-grade{display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:860px){.contato-grade{grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}}
.dados{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.dados li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.dados svg{width:22px;height:22px;flex:0 0 auto;margin-top:3px;fill:none;stroke:var(--marca-claro);stroke-width:1.8}
.dados a{
  color:var(--txt-claro);text-decoration:none;border-bottom:1px solid var(--linha-escura);
  display:inline-flex;align-items:center;min-height:44px;padding-block:9px;
}
.dados a:hover{color:var(--marca-claro);border-color:var(--marca-claro)}
.dados b{display:block;font-weight:700}
.dados span{color:var(--txt-claro-2);font-size:15px}
.contato-grade img{border-radius:var(--r)}

/* ------------------------------------------- páginas internas (texto longo) */
.pagina-topo{padding-block:44px 40px}
@media (min-width:768px){.pagina-topo{padding-block:64px 56px}}
.pagina-topo h1{max-width:20ch}
.chamada{font-size:19px;line-height:1.55;color:var(--txt-claro-2);max-width:62ch}
@media (min-width:768px){.chamada{font-size:21px}}

.texto-longo{max-width:760px}
.texto-longo h2{margin-top:1.6em}
.texto-longo p{max-width:none}
.texto-longo q{quotes:"“" "”"}
.texto-longo em{font-style:italic}
.texto-longo .fecho{
  font-family:var(--serif);font-size:21px;line-height:1.45;
  margin-top:1.6em;
}
.texto-longo .apoio{color:var(--txt-escuro-2)}
.texto-longo .apoio a{color:var(--marca-escuro)}
/* --------------------------------------------------- linhas de móveis */
.linhas{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:680px){.linhas{grid-template-columns:1fr 1fr;gap:30px}}
@media (min-width:1040px){.linhas{grid-template-columns:repeat(3,1fr);gap:32px 28px}}
.linha{display:flex;flex-direction:column;gap:14px}
.linha img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.linha h2{font-size:22px;margin:0 0 6px}
.linha p{font-size:16px;line-height:1.55;color:var(--txt-escuro-2);margin:0 0 14px}
.linha-txt{display:flex;flex-direction:column;flex:1}
.linha .btn{margin-top:auto;align-self:flex-start;font-size:15px;padding:10px 18px;min-height:44px}

figure.larga{margin:34px 0}
figure.larga img{width:100%;border-radius:var(--r)}
figure.larga figcaption{font-size:14px;color:var(--txt-escuro-2);padding-top:8px}

/* ------------------------------------------------------------ como chegar */
.chegar{margin-top:48px;padding-top:34px;border-top:1px solid var(--linha-escura)}
.chegar h2,.chegar h3{margin-bottom:10px}
.chegar .apoio{color:var(--txt-claro-2);max-width:var(--medida)}
.mapa{
  margin-top:26px;border:1px solid var(--linha-escura);border-radius:var(--r);
  background:var(--superficie);overflow:hidden;aspect-ratio:4/3;
}
@media (min-width:760px){.mapa{aspect-ratio:16/7}}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa-aviso{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:26px 22px;
}
.mapa-aviso svg{width:34px;height:34px;fill:none;stroke:var(--marca-claro);stroke-width:1.6}
.mapa-aviso p{margin:0;max-width:46ch}
.mapa-aviso b{color:var(--txt-claro)}
.mapa-nota{font-size:13.5px;color:var(--txt-claro-2);line-height:1.5}

/* espaço já previsto para o formulário entrar depois, sem redesenho */
.futuro-form{
  margin-top:30px;padding:18px 20px;border:1px dashed var(--linha-escura);
  border-radius:var(--r);color:var(--txt-claro-2);font-size:14px;max-width:var(--medida);
}

/* --------------------------------------------------------------- rodapé */
.rodape{background:#0E0C0B;border-top:1px solid var(--linha-escura);padding-block:40px 32px}
.rodape-grade{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:760px){.rodape-grade{grid-template-columns:1.2fr 1fr 1fr}}
.rodape img{width:170px;height:59px;object-fit:contain;margin-bottom:14px}
.rodape p,.rodape li{font-size:14.5px;color:var(--txt-claro-2);line-height:1.55}
.rodape h2{font-size:15px;font-family:var(--sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-claro)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rodape a{
  color:var(--txt-claro-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding-block:10px;
}
.rodape a:hover{color:var(--marca-claro)}
.fim{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--linha-escura);
  font-size:13.5px;color:var(--txt-claro-2);display:flex;flex-wrap:wrap;gap:8px 20px;
}

/* ------------------------------------------------- WhatsApp que acompanha */
.zap{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#0B3D22;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.zap svg{width:30px;height:30px;fill:currentColor}
.zap:hover{background:#1EBE5A}
@media (min-width:768px){.zap{right:24px;bottom:24px;width:62px;height:62px}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover{transform:none}
}

/* =================================================================== GALERIAS
   Grade de 2 / 3 / 4 colunas. O limite de 24 fotos por galeria foi escolhido
   para fechar linha cheia nos três tamanhos: 12, 8 e 6 linhas, sem foto órfã. */
.acoes-topo{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.acoes-fim{display:flex;justify-content:center;margin-top:34px}
.btn-linha-claro{border-color:var(--txt-claro-2);color:var(--txt-claro);background:transparent}
.btn-linha-claro:hover{border-color:var(--marca-claro);color:var(--marca-claro)}

.grade-fotos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
@media (min-width:680px){.grade-fotos{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1040px){.grade-fotos{grid-template-columns:repeat(4,1fr);gap:16px}}

/* O botão existe para que a foto seja alcançável pelo teclado e anunciada como
   controle. Sem ele, ampliar a imagem seria função exclusiva do mouse. */
.grade-fotos .foto{
  display:block;width:100%;padding:0;border:0;background:var(--superficie);
  border-radius:var(--r);overflow:hidden;cursor:zoom-in;
}
.grade-fotos img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  transition:transform .35s ease;
}
.grade-fotos .foto:hover img{transform:scale(1.04)}
.grade-fotos .foto:focus-visible{outline:3px solid var(--marca-escuro);outline-offset:3px}

.nota-ia{
  margin:0 0 26px;padding:16px 18px;border-radius:var(--r);
  background:rgba(27,79,71,.08);border-left:4px solid var(--verde);
  font-size:15px;line-height:1.55;color:var(--txt-escuro-2);max-width:70ch;
}
.nota-ia strong{color:var(--txt-escuro)}

.aviso-acervo{
  margin:30px auto 0;max-width:60ch;text-align:center;
  font-size:15.5px;line-height:1.6;color:var(--txt-escuro-2);
}

/* --------------------------------------------------------------- lupa (zoom) */
.lupa{
  position:fixed;inset:0;z-index:90;
  background:rgba(10,8,7,.94);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.lupa[hidden]{display:none}
.lupa-fecha,.lupa-nav{
  background:rgba(30,26,23,.9);color:var(--txt-claro);
  border:1px solid var(--linha-escura);border-radius:50%;
  width:48px;height:48px;min-width:48px;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.lupa-fecha{position:absolute;top:14px;right:14px;font-size:30px}
.lupa-fecha:hover,.lupa-nav:hover{border-color:var(--marca-claro);color:var(--marca-claro)}
.lupa-fecha:focus-visible,.lupa-nav:focus-visible{outline:3px solid var(--marca-claro);outline-offset:2px}

.lupa-caixa{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.lupa-caixa img{max-width:100%;max-height:58vh;width:auto;height:auto;border-radius:6px}
.lupa-pe{display:flex;align-items:center;gap:16px}
.lupa-conta{margin:0;font-size:14.5px;font-weight:600;color:var(--txt-claro);letter-spacing:.03em;text-align:center}
.lupa-zap{font-size:15px;padding:10px 20px;min-height:44px}

/* No monitor sobra largura ao lado da foto: as setas voltam para as laterais e
   a linha de baixo fica só com o código e o botão. */
@media (min-width:760px){
  .lupa-caixa img{max-height:74vh}
  .lupa-nav{position:absolute;top:50%;transform:translateY(-50%)}
  .lupa-ant{left:26px}
  .lupa-prox{right:26px}
}
.lupa-zap{font-size:15px;padding:10px 20px;min-height:44px}

/* ------------------------------------------------- código da peça na galeria
   Existe para o cliente citar a peça no WhatsApp sem dizer "a quarta foto da
   terceira linha". Fica sobre a foto, no canto, num fundo escuro sólido — o
   contraste precisa sobreviver a qualquer foto embaixo.

   ATENÇÃO: este bloco já foi apagado uma vez por uma edição em duas etapas do
   arquivo (uma regex que removia o bloco antigo da lupa engoliu daqui até a
   declaração seguinte de .lupa-conta). Se for mexer no CSS por script, confira
   depois que .codigo continua com position:absolute. */
.como-citar{
  margin:0 0 22px;max-width:66ch;font-size:15.5px;line-height:1.55;
  color:var(--txt-escuro-2);
}
.como-citar strong{color:var(--txt-escuro)}

.grade-fotos .foto{position:relative}
.codigo{
  position:absolute;left:8px;bottom:8px;
  background:rgba(20,17,15,.86);color:#F0EBE4;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:5px 9px;border-radius:6px;pointer-events:none;
}
@media (min-width:680px){.codigo{font-size:12.5px;left:10px;bottom:10px}}