/* ==========================================================================
   ProTreine · Estudio de Treinamento Personalizado · Sao Jose dos Pinhais
   Design system em tokens. Sem framework, sem build.
   Cores do briefing do cliente (out/2026): laranja #E8712A, preto #161616.
   ========================================================================== */

/* --- Fontes self-hosted (variaveis, subset latin) ------------------------ */
@font-face{font-family:'Outfit';src:url('../fonts/outfit-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-var.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-var-i.woff2') format('woff2');font-weight:100 1000;font-style:italic;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* marca */
  --laranja:#E8712A;          /* cor da marca. BLOCO e traco, nunca texto sobre claro */
  --laranja-claro:#F2995E;
  --laranja-fraco:#FDEEE4;

  /* CONTRASTE MEDIDO (WCAG AA, recalculado 07/out com #E8712A):
     --laranja sobre branco da 3.08:1 e REPROVA como texto. O mesmo matiz
     escurecido passa: 5.58 sobre branco, 5.04 sobre papel e 4.92 sobre
     --laranja-fraco. Use --laranja para preencher, --laranja-tinta para
     escrever sobre claro. Sobre --grafite o --laranja da 5.88:1. */
  --laranja-tinta:#A84E14;

  /* superficies */
  --grafite:#161616;
  --grafite-2:#202020;
  --papel:#F6F3EF;
  --branco:#FFFFFF;

  /* tinta */
  --tinta:#161616;
  --tinta-media:#3D3934;
  --tinta-suave:#5F5A55;      /* 6.16:1 sobre papel */
  --sobre-escuro:#F2EFEA;
  --sobre-escuro-suave:#A8A29B; /* 7.12:1 sobre grafite */

  /* acao */
  --wa:#198845;               /* 4.52:1 com texto branco */
  --wa-escuro:#126934;

  /* tipografia */
  --display:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --corpo:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --t-display:clamp(2.5rem,1.55rem + 4vw,4.7rem);
  --t-h2:clamp(1.95rem,1.3rem + 2.8vw,3.35rem);
  --t-h3:clamp(1.2rem,1.06rem + 0.6vw,1.5rem);
  --t-lead:clamp(1.06rem,0.99rem + 0.4vw,1.28rem);
  --t-corpo:clamp(1rem,0.965rem + 0.18vw,1.08rem);
  --t-mini:0.8rem;

  /* ritmo */
  --secao-y:clamp(4.25rem,2.8rem + 5.6vw,8rem);
  --gutter:clamp(1.25rem,0.6rem + 2.6vw,2.75rem);
  --max:1220px;
  --max-texto:64ch;

  --raio:4px;
  --linha:1px solid color-mix(in srgb,var(--tinta) 13%,transparent);
  --linha-clara:1px solid color-mix(in srgb,#FFF 15%,transparent);
  --transicao:260ms cubic-bezier(.22,.61,.36,1);

  /* contexto do botao de contorno: trocado nos blocos escuros */
  --linha-btn:var(--tinta);
  --linha-btn-hover-fundo:var(--tinta);
  --linha-btn-hover-tinta:var(--branco);
}

/* Um unico contexto escuro. O botao de contorno e o texto secundario leem
   daqui, entao hero, fecho e secoes escuras se comportam igual. */
.hero,.fecho,.secao--escura,.plano--destaque{
  --linha-btn:var(--branco);
  --linha-btn-hover-fundo:var(--branco);
  --linha-btn-hover-tinta:var(--grafite);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:var(--corpo);font-size:var(--t-corpo);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;letter-spacing:-.025em;margin:0}
h1,h2{text-wrap:balance}
h1{font-size:var(--t-display);font-weight:800}
h2{font-size:var(--t-h2);font-weight:800}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.2;letter-spacing:-.015em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}

/* --- Utilitarios de layout ----------------------------------------------- */
.env{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.secao{padding-block:var(--secao-y)}
.secao--papel{background:var(--papel)}
.secao--escura{background:var(--grafite);color:var(--sobre-escuro)}
:where(.secao--escura,.fecho) :where(h2,h3){color:var(--branco)}
/* :where() zera a especificidade: este e o texto PADRAO do bloco escuro e
   qualquer classe (.manifesto__fecho, .fundador__citacao) sobrescreve. Com
   `.secao--escura p` cru, os dois ficavam cinza no lugar de branco. */
:where(.secao--escura,.fecho) p{color:var(--sobre-escuro-suave)}

.rotulo{
  font-family:var(--display);font-size:var(--t-mini);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laranja-tinta);
  display:block;margin-bottom:1rem;
}
:where(.secao--escura,.fecho) .rotulo{color:var(--laranja)}
.lead{font-size:var(--t-lead);color:var(--tinta-media);max-width:var(--max-texto)}
:where(.secao--escura,.fecho) .lead{color:var(--sobre-escuro)}
/* h2 nasce com margin:0 pelo reset; sem isto o titulo cola no paragrafo */
.cabeca h2,.split__texto h2,.local__grade h2{margin-bottom:1.05rem}
.cabeca{max-width:44rem;margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem)}
.cabeca--centro{margin-inline:auto;text-align:center}
.cabeca--centro .lead{margin-inline:auto}

/* --- Botoes -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:1.05rem 1.9rem;border-radius:999px;border:0;text-decoration:none;
  cursor:pointer;transition:var(--transicao);
}
.btn svg{width:1.15em;height:1.15em;flex:none}
/* texto GRAFITE sobre laranja (5.88:1): branco daria 3.08:1 e reprova */
.btn--marca{background:var(--laranja);color:var(--grafite)}
.btn--marca:hover{background:var(--laranja-claro);transform:translateY(-2px)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-escuro);transform:translateY(-2px)}
.btn--linha{background:transparent;color:var(--linha-btn);box-shadow:inset 0 0 0 1.5px currentColor}
.btn--linha:hover{background:var(--linha-btn-hover-fundo);color:var(--linha-btn-hover-tinta)}

/* --- Header -------------------------------------------------------------- */
.topo{
  position:fixed;inset:0 0 auto;z-index:80;background:color-mix(in srgb,var(--grafite) 92%,transparent);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:var(--linha-clara);
  transition:var(--transicao);
}
.topo__env{display:flex;align-items:center;gap:1.5rem;height:4.5rem}
.topo__logo{margin-right:auto;display:flex;align-items:center;padding-block:.4rem}
.topo__logo img{height:2rem;width:auto}
.topo__nav{display:flex;gap:1.75rem}
.topo__nav a{
  font-family:var(--display);font-weight:500;font-size:.94rem;color:var(--sobre-escuro);
  text-decoration:none;transition:var(--transicao);
}
.topo__nav a:hover{color:var(--laranja)}
.topo__cta{padding:.85rem 1.35rem;font-size:.92rem;min-height:44px} /* alvo de toque */
@media (max-width:860px){
  .topo__nav{display:none}
  .topo__env{height:4rem}
  .topo__logo img{height:1.7rem}
  .topo__cta{padding:.62rem 1.05rem;font-size:.85rem}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{background:var(--grafite);color:var(--sobre-escuro);padding-top:4.5rem;overflow:hidden}
.hero__grade{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:stretch;gap:clamp(2rem,1rem + 4vw,4.5rem);
  max-width:var(--max);margin:0 auto;padding-left:var(--gutter);
}
.hero__texto{padding-block:clamp(3.5rem,2rem + 6vw,7rem);align-self:center}
.hero__selo{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-size:var(--t-mini);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laranja);border:1px solid color-mix(in srgb,var(--laranja) 40%,transparent);
  padding:.45rem 1rem;border-radius:999px;margin-bottom:1.75rem;
}
.hero h1{color:var(--branco);margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero__lead{font-size:var(--t-lead);color:var(--sobre-escuro);max-width:34rem;margin-bottom:2.25rem}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__nota{margin-top:1.5rem;font-size:.88rem;color:var(--sobre-escuro-suave)}
/* a foto E a coluna da grade: sangra ate a borda, sem card e sem altura fixa */
.hero__foto{position:relative;min-height:100%}
/* enquadra pela ESQUERDA: a frase pintada na parede ("O corpo alcanca o que
   a mente acredita") comeca colada na borda esquerda da foto e some com o
   corte centralizado. */
/* fachada (pedido do cliente, 07/out): enquadra no letreiro da marca */
.hero__foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--grafite) 0%,color-mix(in srgb,var(--grafite) 25%,transparent) 32%,transparent 62%);
}
@media (max-width:900px){
  .hero__grade{grid-template-columns:1fr;padding-inline:0;gap:0}
  .hero__texto{padding-inline:var(--gutter);padding-block:3.25rem 2.5rem;order:2}
  /* faixa mais alta e enquadrada no alto: a foto e retrato 3:4 e numa tira
     baixa sobrava so um pedaco da frase pintada na parede */
  .hero__foto{order:1;min-height:clamp(17rem,64vw,26rem)}
  .hero__foto img{position:relative;height:clamp(17rem,64vw,26rem);object-position:50% 40%}
  .hero__foto::after{background:linear-gradient(180deg,transparent 45%,var(--grafite) 100%)}
}

/* --- Barra de numeros ---------------------------------------------------- */
.numeros{background:var(--laranja);color:var(--grafite)}
.numeros__grade{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,.5rem + 2vw,2.5rem);padding-block:clamp(2rem,1.2rem + 2vw,2.75rem);
}
.numeros dt{font-family:var(--display);font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.numeros dd{
  margin:.5rem 0 0;font-family:var(--display);font-size:.82rem;font-weight:600;
  line-height:1.3;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--grafite) 78%,transparent);
}
@media (max-width:520px){.numeros__grade{grid-template-columns:1fr;row-gap:1.5rem}}

/* --- Manifesto (a virada) ------------------------------------------------ */
.manifesto__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.manifesto h2{max-width:14ch}
/* a coluna do titulo e bem mais curta que a do texto: sem o sticky sobra um
   vazio de quase uma tela do lado esquerdo */
@media (min-width:861px){.manifesto__grade>*:first-child{position:sticky;top:7rem}}
.manifesto__lista{display:grid;gap:.85rem;margin-top:2rem}
.manifesto__lista li{
  display:flex;gap:.85rem;align-items:baseline;font-size:var(--t-lead);
  color:var(--sobre-escuro);
}
.manifesto__lista li::before{
  content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--laranja);transform:translateY(-.15em);
}
.manifesto__fecho{
  margin-top:2.5rem;padding-top:2rem;border-top:var(--linha-clara);
  font-family:var(--display);font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);
  font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--branco);
}
@media (max-width:860px){.manifesto__grade{grid-template-columns:1fr}}

/* --- Split (texto | foto sangrando) -------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,1rem + 4vw,4.5rem)}
.split__texto{max-width:36rem}
.split--dir .split__texto{padding-left:var(--gutter);margin-left:auto;padding-block:var(--secao-y)}
.split--esq .split__texto{padding-right:var(--gutter);margin-right:auto;padding-block:var(--secao-y)}
.split--esq{direction:rtl}
.split--esq>*{direction:ltr}
.split__foto{position:relative;align-self:stretch;min-height:26rem}
.split__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:0}
  .split--esq{direction:ltr}
  .split__foto{min-height:0;order:1}
  .split__foto img{position:relative;height:clamp(14rem,48vw,20rem)}
  .split__texto{order:2;padding:clamp(2.5rem,1.5rem + 4vw,4rem) var(--gutter) !important;max-width:none;margin:0}
}

/* --- Passos numerados ---------------------------------------------------- */
.passos{display:grid;gap:1.75rem;margin-top:2.25rem}
.passos li{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start}
.passos__n{
  font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1;
  color:var(--laranja-tinta);border:1.5px solid color-mix(in srgb,var(--laranja) 45%,transparent);
  width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;
}
.passos h3{margin-bottom:.3rem}
.passos p{color:var(--tinta-suave);margin:0}

/* --- Planos -------------------------------------------------------------- */
.planos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,.6rem + 1.6vw,1.75rem);align-items:start;max-width:52rem;margin-inline:auto}
.plano{
  background:var(--branco);border:var(--linha);border-radius:var(--raio);
  padding:clamp(1.75rem,1.2rem + 1.4vw,2.35rem);display:flex;flex-direction:column;height:100%;
  transition:var(--transicao);
}
.plano:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(23,22,26,.35)}
.plano--destaque{background:var(--grafite);border-color:var(--grafite);color:var(--sobre-escuro)}
.plano--destaque h3{color:var(--branco)}
.plano__tag{
  font-family:var(--display);font-size:var(--t-mini);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--laranja-tinta);margin-bottom:.85rem;display:block;
}
.plano--destaque .plano__tag{color:var(--laranja)}
.plano__lotacao{
  font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--laranja-tinta);
  margin:.9rem 0 1.1rem;display:flex;align-items:center;gap:.5rem;
}
/* sem largura declarada o SVG assume o viewBox e vira um icone gigante */
.plano__lotacao svg{width:1.35rem;height:1.35rem;flex:none}
.plano--destaque .plano__lotacao{color:var(--laranja)}
.plano p{color:var(--tinta-suave);font-size:.98rem}
.plano--destaque p{color:var(--sobre-escuro-suave)}
.plano__inclui{
  margin:1.25rem 0 1.75rem;padding-top:1.25rem;border-top:var(--linha);
  display:grid;gap:.6rem;font-size:.94rem;color:var(--tinta-media);
}
.plano--destaque .plano__inclui{border-top:var(--linha-clara);color:var(--sobre-escuro)}
.plano__inclui li{display:flex;gap:.6rem;align-items:flex-start}
.plano__inclui svg{width:1.1rem;height:1.1rem;flex:none;color:var(--laranja-tinta);margin-top:.22rem}
.plano--destaque .plano__inclui svg{color:var(--laranja)}
.plano .btn{margin-top:auto;width:100%}
@media (max-width:760px){.planos{grid-template-columns:1fr;max-width:34rem}}
/* valor de referencia: aparece UMA vez, fora dos cartoes */
.planos__rodape{max-width:40rem;margin:clamp(2rem,1.4rem + 2vw,3rem) auto 0;text-align:center}
.planos__valor{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);letter-spacing:-.02em;color:var(--tinta);margin-bottom:.6rem}
.planos__rodape p:not(.planos__valor){color:var(--tinta-suave);font-size:.98rem}

/* --- Para quem e --------------------------------------------------------- */
.publico{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,.6rem + 1.6vw,1.75rem)}
.publico__item{background:var(--branco);border:var(--linha);border-top:3px solid var(--laranja);border-radius:var(--raio);padding:clamp(1.6rem,1.2rem + 1vw,2.1rem)}
.publico__item h3{margin-bottom:.55rem}
.publico__item p{color:var(--tinta-suave);font-size:.98rem;margin:0}
@media (max-width:760px){.publico{grid-template-columns:1fr}}

/* CTA repetido no fim das secoes */
.secao__cta{margin-top:clamp(2rem,1.4rem + 2vw,2.75rem)}

/* --- Aula experimental --------------------------------------------------- */
.aula__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.aula h2{margin-bottom:1rem}
.aula .aula__apoio{font-family:var(--display);font-size:var(--t-lead);font-weight:600;color:var(--laranja)}
.aula__lista{display:grid;gap:.75rem;margin:1.75rem 0 2.25rem}
.aula__lista li{display:flex;gap:.85rem;align-items:baseline;color:var(--sobre-escuro)}
.aula__lista li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--laranja);transform:translateY(-.15em)}
@media (max-width:860px){.aula__grade{grid-template-columns:1fr}}

/* --- Depoimentos (texto integral do Google, sem foto) -------------------- */
.depoimentos{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:clamp(1.25rem,.6rem + 1.6vw,1.75rem)}
.depoimento{margin:0;background:var(--papel);border-radius:var(--raio);padding:clamp(1.6rem,1.2rem + 1vw,2.25rem);display:flex;flex-direction:column}
.depoimento--longo{grid-row:span 2}
.depoimento blockquote{margin:0 0 1.5rem;color:var(--tinta-media)}
.depoimento blockquote p{margin-bottom:.8em}
.depoimento figcaption{margin-top:auto;padding-top:1rem;border-top:var(--linha);font-size:.9rem;color:var(--tinta-suave)}
.depoimento figcaption strong{display:block;font-family:var(--display);font-size:1.02rem;color:var(--tinta)}
@media (max-width:860px){.depoimentos{grid-template-columns:1fr}.depoimento--longo{grid-row:auto}}

/* --- Sinais de exclusividade --------------------------------------------- */
.exclusivo{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;max-width:56rem}
.exclusivo li{display:flex;gap:.75rem;align-items:baseline;color:var(--tinta-media)}
.exclusivo li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--laranja);transform:translateY(-.15em)}
@media (max-width:760px){.exclusivo{grid-template-columns:1fr}}

/* --- Equipe (so texto) --------------------------------------------------- */
.equipe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.equipe h2{margin-bottom:1.05rem}
.equipe>div:last-child>p{font-size:var(--t-lead);color:var(--tinta-media)}
@media (max-width:860px){.equipe{grid-template-columns:1fr}}

/* --- Cards de servico ---------------------------------------------------- */
.servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,.6rem + 1.6vw,1.75rem)}
.servico{background:var(--branco);border:var(--linha);border-radius:var(--raio);padding:clamp(1.6rem,1.2rem + 1vw,2.1rem)}
.servico__icone{
  width:2.9rem;height:2.9rem;border-radius:50%;background:var(--laranja-fraco);
  display:grid;place-items:center;margin-bottom:1.15rem;color:var(--laranja-tinta);
}
.servico__icone svg{width:1.45rem;height:1.45rem}
.servico h3{margin-bottom:.55rem}
.servico p{color:var(--tinta-suave);font-size:.98rem;margin:0}
.servicos__nota{margin-top:1.5rem;color:var(--tinta-suave);font-size:.95rem}
@media (max-width:860px){.servicos{grid-template-columns:1fr}}

/* --- Galeria do estudio -------------------------------------------------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:clamp(2rem,1.4rem + 2vw,3rem)}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:var(--raio);background:var(--grafite-2)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figure:first-child{grid-column:span 2;grid-row:span 2}
.galeria figure:first-child img{aspect-ratio:1/1}
.galeria figure:not(:first-child) img{aspect-ratio:4/5}
@media (max-width:860px){
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria figure:first-child{grid-column:span 2;grid-row:auto}
  .galeria figure:first-child img{aspect-ratio:3/2}
}

/* --- Citacao do fundador ------------------------------------------------- */
.fundador__grade{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center;max-width:62rem;margin-inline:auto}
.fundador__video video{width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--raio);background:var(--grafite-2);display:block}
@media (max-width:760px){.fundador__grade{grid-template-columns:1fr}.fundador__video{max-width:18rem;margin-inline:auto}}
.fundador__citacao{
  font-family:var(--display);font-weight:600;font-style:normal;
  font-size:clamp(1.2rem,.98rem + 1.05vw,1.7rem);line-height:1.36;letter-spacing:-.02em;
  color:var(--branco);margin:0 0 1.75rem;
}
.fundador__assina{
  display:flex;flex-direction:column;gap:.15rem;padding-top:1.5rem;
  border-top:var(--linha-clara);
}
.fundador__assina strong{font-family:var(--display);font-weight:700;color:var(--branco);font-size:1.05rem}
.fundador__assina span{font-size:.9rem;color:var(--sobre-escuro-suave)}

/* --- Local + horario ----------------------------------------------------- */
.local__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,1rem + 3vw,3.5rem)}
.dados{display:grid;gap:1.6rem;margin-top:2rem}
.dados__item{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.dados__icone{color:var(--laranja-tinta);margin-top:.15rem}
.dados__icone svg{width:1.3rem;height:1.3rem}
.dados dt{font-family:var(--display);font-weight:700;font-size:.98rem;margin-bottom:.15rem}
.dados dd{margin:0;color:var(--tinta-suave);font-size:.98rem;line-height:1.55}
/* inline-block + padding para dar altura de toque nos contatos */
.dados a{
  color:var(--laranja-tinta);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:.32rem;
}
.local__visual{display:grid;gap:1rem}
.local__fachada{margin:0}
.local__fachada img{width:100%;height:auto;border-radius:var(--raio)}
.local__fachada figcaption{margin-top:.7rem;font-size:.88rem;color:var(--tinta-suave)}
.mapa{position:relative;min-height:17rem;border-radius:var(--raio);overflow:hidden;background:var(--papel)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){.local__grade{grid-template-columns:1fr}.mapa{min-height:15rem}}

/* --- FAQ ----------------------------------------------------------------- */
.faq{max-width:52rem;margin-inline:auto}
.faq details{border-bottom:var(--linha)}
/* o padding mora no summary, nao no details: e ele que recebe o toque */
.faq summary{
  font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.015em;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem;padding:1.35rem 0;min-height:44px;
}
.faq details[open] summary{padding-bottom:.5rem}
.faq details p{padding-bottom:1.35rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:.7rem;height:.7rem;border-right:2px solid var(--laranja-tinta);
  border-bottom:2px solid var(--laranja-tinta);transform:rotate(45deg);transition:var(--transicao);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:.9rem 0 0;color:var(--tinta-suave);max-width:58ch}

/* --- CTA final ----------------------------------------------------------- */
.fecho{position:relative;background:var(--grafite);color:var(--sobre-escuro);overflow:hidden}
.fecho__grade{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(2rem,1rem + 4vw,4rem)}
.fecho__texto{padding:var(--secao-y) 0 var(--secao-y) var(--gutter);max-width:36rem;margin-left:auto}
.fecho h2{color:var(--branco);margin-bottom:1.15rem}
.fecho__foto{position:relative;align-self:stretch;min-height:24rem}
.fecho__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fecho__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--grafite),transparent 45%)}
@media (max-width:860px){
  .fecho__grade{grid-template-columns:1fr;gap:0}
  .fecho__foto{order:1;min-height:0}
  .fecho__foto img{position:relative;height:clamp(13rem,44vw,18rem)}
  .fecho__foto::after{background:linear-gradient(180deg,transparent 45%,var(--grafite))}
  .fecho__texto{order:2;padding:clamp(2.5rem,1.5rem + 4vw,4rem) var(--gutter);margin:0;max-width:none}
}

/* --- Rodape -------------------------------------------------------------- */
.rodape{background:var(--grafite-2);color:var(--sobre-escuro-suave);padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem;font-size:.92rem}
.rodape__grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,1rem + 3vw,3.5rem);padding-bottom:2.5rem;border-bottom:var(--linha-clara)}
.rodape img{height:2rem;width:auto;margin-bottom:1.15rem}
.rodape h4{font-family:var(--display);font-size:var(--t-mini);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--branco);margin-bottom:1rem}
.rodape li{margin-bottom:.3rem}
.rodape a{
  color:var(--sobre-escuro-suave);text-decoration:none;transition:var(--transicao);
  display:inline-block;padding-block:.42rem;
}
.rodape a:hover{color:var(--laranja)}
.rodape__assinatura{font-family:var(--display);font-weight:700;color:var(--laranja);margin-top:.9rem}
.rodape__base{padding-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:.85rem}
@media (max-width:760px){.rodape__grade{grid-template-columns:1fr;gap:2.25rem}}

/* --- WhatsApp flutuante -------------------------------------------------- */
.zap{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:70;width:3.5rem;height:3.5rem;
  border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(25,136,69,.6);transition:var(--transicao);
}
.zap svg{width:1.75rem;height:1.75rem}
.zap:hover{background:var(--wa-escuro);transform:scale(1.06)}
.zap[hidden]{display:none}
/* Pedido do cliente: botao fixo so no celular, na altura do polegar */
@media (min-width:861px){.zap{display:none}}

/* --- Ancoras e revelacao ------------------------------------------------- */
[id]{scroll-margin-top:5.5rem}
/* A animacao de entrada so existe quando o JS assumiu (html.js). Sem essa
   trava, JS quebrado ou print de pagina inteira devolvem a LP em BRANCO,
   porque tudo nasceria em opacity:0 e nada chamaria .visivel. */
.js .revela{opacity:0;transform:translateY(22px);transition:opacity 700ms ease,transform 700ms cubic-bezier(.22,.61,.36,1)}
.js .revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js .revela{opacity:1;transform:none}
}