@font-face {
  font-family: "Public Sans";
  src: url("fontes/public-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fontes/libre-franklin-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ==========================================================================
   Sistema: toda medida da pagina sai daqui. Nada de px solto nas regras.
   ========================================================================== */
:root {
  /* cor: neutros puxados para o verde da marca, nunca para o azul */
  --fundo: #FBFCFB;
  --faixa: #EDF1EE;
  --texto: #131A17;         /* 17.2:1 no fundo */
  --suave: #4C5853;         /* 7.2:1 no fundo, 6.5:1 na faixa */
  --verde: #1C3A34;         /* marca: titulos, botao principal, faixa escura */
  --verde-escuro: #132A25;
  --ouro: #C9A45C;          /* destaque: so sobre verde (5.3:1) ou com texto escuro dentro */
  --ouro-claro: #D4B06A;
  --claro-suave: #C9D8D0;   /* texto secundario sobre verde (8.3:1) */
  --linha: #D5DDD8;         /* divisoria, decorativa */
  --linha-verde: rgb(201 216 208 / .22);
  --borda-ui: rgb(28 58 52 / .45);  /* contorno de botao: 3:1 ou mais */

  /* tipo: escala fluida (celular -> computador); letras apertam com o tamanho */
  --titulo: "Libre Franklin", "Public Sans", system-ui, sans-serif;
  --corpo: "Public Sans", system-ui, sans-serif;
  --t-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);     /* 40 -> 68 */
  --t-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);   /* 30 -> 48 */
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);    /* 20 -> 24 */
  --t-lg: 1.25rem;     /* 20 */
  --t-base: 1.125rem;  /* 18: publico mais velho, nunca menor no corpo */
  --t-sm: .9375rem;    /* 15 */
  --t-rotulo: .8125rem;/* 13 */
  --tr-h1: -.035em; --tr-h2: -.03em; --tr-corpo: -.005em; --tr-rotulo: .12em;

  /* espaco: base 4 */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --secao: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  --largura: 72rem;
  --margem: clamp(1.25rem, .6rem + 2vw, 2.5rem);

  --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-pilula: 999px;
  --toque: 48px;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --d-1: 150ms; --d-2: 300ms; --d-3: 600ms;

  --altura-cabecalho: 76px;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
/* Link do sumario: pula o respiro do topo da secao e para com o titulo a --s-7 do
   cabecalho, sem mostrar a borda da secao de cima. */
section[id] { scroll-margin-top: calc(var(--s-7) - var(--secao)); }
html { scroll-padding-top: var(--altura-cabecalho); scrollbar-color: var(--verde) var(--faixa); accent-color: var(--verde); }
body { margin: 0; color: var(--texto); background: var(--fundo); font: 400 var(--t-base)/1.6 var(--corpo); letter-spacing: var(--tr-corpo); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
::selection { background: rgb(201 164 92 / .35); color: var(--texto); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: var(--r-sm); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; color: var(--verde); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: var(--tr-h1); }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: var(--tr-h2); }
p { max-width: 62ch; text-wrap: pretty; }
figure { margin: 0; }
.envolve { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
.pular { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 40; padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); color: var(--texto); background: var(--ouro); transform: translateY(-160%); transition: transform var(--d-1) var(--curva); }
.pular:focus { transform: none; }

/* rotulo: bolinha + texto pequeno espacado. Um por secao, sempre acima do titulo */
.rotulo { display: flex; width: fit-content; align-items: center; gap: var(--s-2); max-width: none; font: 600 var(--t-rotulo)/1 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--suave); }
.rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); }
.rotulo + h1, .rotulo + h2 { margin-top: var(--s-5); }

/* ==========================================================================
   Botoes: pilula, sempre em par quando ha escolha (solido + contorno)
   ========================================================================== */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--toque); padding: 0 var(--s-6); border-radius: var(--r-pilula); border: 1px solid transparent; background: var(--verde); color: var(--fundo); font: 600 var(--t-sm)/1 var(--titulo); text-decoration: none; white-space: nowrap; transition: background-color var(--d-1) var(--curva), transform var(--d-1) var(--curva); }
.botao:hover { background: var(--verde-escuro); }
.botao:active { transform: scale(.98); }
.botao-contorno { background: transparent; color: var(--verde); border-color: var(--borda-ui); }
.botao-contorno:hover { background: rgb(28 58 52 / .06); }
.botao-ouro { background: var(--ouro); color: var(--texto); }
.botao-ouro:hover { background: var(--ouro-claro); }
.seta { font-size: 1.2em; line-height: 0; transition: transform var(--d-1) var(--curva); }
.botao:hover .seta, .botao:focus-visible .seta, .link-com-seta:hover .seta, .link-com-seta:focus-visible .seta { transform: translateX(3px); }
.link-com-seta { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--toque); color: var(--verde); font: 600 var(--t-base)/1 var(--titulo); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; }

/* ==========================================================================
   Cabecalho fixo com vidro: fica no topo ao rolar, nome e telefone sempre a vista.
   O vidro tem funcao: o conteudo passa por baixo e continua sugerido, o texto
   do cabecalho continua legivel. Com desfoque forte, 62% basta: o que passa por
   baixo vira mancha de cor, nao texto. Sem
   desfoque (navegador que nao desenha), 95%, senao o texto de baixo fica legivel.
   ========================================================================== */
.cabecalho { position: sticky; top: 0; z-index: 30; background: rgb(251 252 251 / .95); border-bottom: 1px solid rgb(255 255 255 / .7); box-shadow: 0 1px 0 rgb(28 58 52 / .08), 0 8px 24px -12px rgb(28 58 52 / .18); }
@supports (backdrop-filter: blur(1px)) {
  .cabecalho { background: rgb(251 252 251 / .62); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); }
}
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--altura-cabecalho); }
.marca { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--toque); color: var(--verde); font: 600 .9375rem/1.1 var(--titulo); letter-spacing: -.015em; text-decoration: none; }
.marca-segunda { display: block; margin-top: var(--s-1); color: var(--suave); font: 500 .75rem/1.2 var(--corpo); letter-spacing: .02em; }
.marca-simbolo { flex: none; width: 30px; height: 30px; }
.relogio-ouro { stroke: var(--ouro); }
.relogio-centro { fill: var(--ouro); }
.nav-larga { display: none; gap: var(--s-6); }
.nav-larga a, .nav-celular a { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--verde); font: 500 var(--t-sm)/1 var(--titulo); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 0 1.5px no-repeat; transition: background-size var(--d-1) var(--curva); }
.nav-larga a:hover, .nav-larga a:focus-visible, .nav-celular a:hover, .nav-celular a:focus-visible { background-size: 100% 1.5px; }
.telefone-topo { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pilula); background: var(--verde); color: var(--fundo); font: 600 var(--t-sm)/1 var(--titulo); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; transition: background-color var(--d-1) var(--curva); }
.telefone-topo svg { width: 16px; height: 16px; flex: none; transition: transform var(--d-1) var(--curva); }
.telefone-topo:hover { background: var(--verde-escuro); }
.telefone-topo:hover svg { transform: rotate(-12deg); }
.telefone-numero { display: none; }
.nav-celular { display: flex; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--linha); }

/* ==========================================================================
   Abertura: texto centralizado sobre foto escura, de ponta a ponta. A foto e so
   ambiente (7.1); a camada verde garante o contraste do texto branco em qualquer
   ponto dela. Sem a foto, o fundo verde sozinho ja segura a leitura.
   ========================================================================== */
.abertura { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: min(44rem, calc(100svh - var(--altura-cabecalho))); padding-block: clamp(4rem, 2rem + 7vw, 8rem); text-align: center; background: var(--verde-escuro); color: var(--fundo); }
.abertura-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 8% 50%; }
.abertura::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgb(19 42 37 / .6), rgb(19 42 37 / .25)); }
.abertura-texto { display: flex; flex-direction: column; align-items: center; }
.abertura h1 { max-width: 15ch; color: var(--fundo); text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.introducao { margin-top: var(--s-5); max-width: 36rem; color: var(--suave); font-size: var(--t-lg); line-height: 1.55; }
.abertura .introducao { color: var(--claro-suave); }
.abertura .acoes { justify-content: center; margin-top: var(--s-7); }
.botao-vidro { background: rgb(255 255 255 / .08); color: var(--fundo); border-color: rgb(255 255 255 / .45); }
.botao-vidro:hover { background: rgb(255 255 255 / .16); }
@supports (backdrop-filter: blur(1px)) { .botao-vidro { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
/* No celular os fatos empilham; a linha entre eles so aparece quando cabem lado a lado. */
.fatos-abertura { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: var(--s-7) 0 0; padding: 0; list-style: none; color: var(--claro-suave); font-size: var(--t-sm); }
@media (min-width: 40rem) {
  .abertura-fundo { object-position: center; }
  .fatos-abertura { flex-direction: row; gap: var(--s-5); }
  .fatos-abertura li + li { padding-left: var(--s-5); border-left: 1px solid rgb(255 255 255 / .28); }
}

/* ==========================================================================
   Equipe
   ========================================================================== */
.servicos { padding-block: var(--secao); }
.servicos-grade { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.grupo-servico { padding: var(--s-6); border-radius: var(--r-lg); background: var(--faixa); }
.grupo-servico h3 { color: var(--suave); font: 600 var(--t-rotulo)/1 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.grupo-servico ul { display: grid; gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; color: var(--verde); font: 600 1.375rem/1.2 var(--titulo); letter-spacing: -.015em; }
.grupo-destaque { display: flex; flex-direction: column; min-height: 18rem; background: var(--verde); color: var(--fundo); }
.grupo-destaque h3 { color: var(--claro-suave); }
.servico-principal { margin: var(--s-5) 0 var(--s-6); max-width: 11ch; color: var(--fundo); font: 600 clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem)/1 var(--titulo); letter-spacing: -.03em; }
.grupo-destaque .link-com-seta { align-self: flex-start; margin-top: auto; color: var(--ouro); }
.equipe { padding-block: var(--secao); background: var(--faixa); }
.cabeca-secao { max-width: 40rem; }
.equipe-grade { display: grid; gap: var(--s-6); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
/* celular: foto pequena ao lado do nome, senao tres retratos viram tres telas */
.pessoa { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 var(--s-5); align-items: start; }
.pessoa .foto-pendente { grid-row: span 2; }
.foto-pendente { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--linha); color: var(--suave); font: 600 var(--t-rotulo)/1 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.pessoa-nome { margin-top: 0; color: var(--verde); font: 600 var(--t-h3)/1.2 var(--titulo); letter-spacing: -.02em; }
.pessoa-dados { display: grid; margin: var(--s-3) 0 0; border-top: 1px solid var(--linha); }
.pessoa-dados > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--linha); font-size: var(--t-sm); }
.pessoa-dados dt { color: var(--suave); }
.pessoa-dados dd { margin: 0; color: var(--texto); }

/* ==========================================================================
   Declaracao: uma pergunta grande, centralizada, e duas linhas
   ========================================================================== */
.declaracao { padding-block: var(--secao); text-align: center; }
.declaracao > div { display: flex; flex-direction: column; align-items: center; }
.declaracao h2 { max-width: 16ch; font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4rem); line-height: 1; letter-spacing: var(--tr-h1); }
.declaracao p:not(.rotulo) { margin-top: var(--s-5); max-width: 34rem; color: var(--suave); }
.declaracao .link-com-seta { margin-top: var(--s-5); }

/* ==========================================================================
   O que trazer: faixa verde
   ========================================================================== */
.preparar { padding-block: var(--secao); background: var(--verde); color: var(--fundo); }
.preparar-grade { display: grid; gap: var(--s-8); align-items: center; }
.preparar h2 { color: var(--fundo); }
.preparar .rotulo { color: var(--claro-suave); }
.preparar-intro { margin-top: var(--s-5); color: var(--claro-suave); max-width: 34rem; }
.checklist { display: grid; margin: var(--s-7) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linha-verde); }
.checklist li { position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-6); border-bottom: 1px solid var(--linha-verde); line-height: 1.45; }
.checklist li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-4) + .55em); width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); }
.foto-secundaria { overflow: hidden; border-radius: var(--r-lg); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .45); }
.foto-secundaria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ==========================================================================
   Contato
   ========================================================================== */
.contato { padding-block: var(--secao); }
.contato-grade { display: grid; gap: var(--s-8); align-items: center; }
address { margin-top: var(--s-5); font-size: var(--t-lg); font-style: normal; line-height: 1.55; }
.dados-contato { display: grid; margin: var(--s-6) 0 0; max-width: 30rem; border-top: 1px solid var(--linha); }
.dados-contato > div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--linha); font-size: var(--t-sm); }
.dados-contato dt { color: var(--suave); }
.dados-contato dd { margin: 0; }
.dados-contato a { text-decoration: none; font-variant-numeric: tabular-nums; }
.endereco > .botao { margin-top: var(--s-6); }
.mapa-local { overflow: hidden; border-radius: var(--r-lg); background: var(--linha); box-shadow: 0 24px 60px -28px rgb(19 42 37 / .45); }
.mapa-local iframe { display: block; width: 100%; height: 22rem; border: 0; }

/* ==========================================================================
   Chamada final: cartao de vidro sobre a foto. Aqui o vidro tem funcao: deixa
   a foto presente e segura a leitura do texto claro por cima dela.
   ========================================================================== */
.chamada { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--secao); background: var(--verde-escuro); }
.chamada-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.chamada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(19 42 37 / .35), rgb(19 42 37 / .6)); }
.chamada-cartao { max-width: 44rem; margin-inline: auto; padding: var(--s-8) var(--s-6); border-radius: var(--r-lg); text-align: center; color: var(--fundo); background: rgb(19 42 37 / .82); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 30px 80px -30px rgb(0 0 0 / .6); border: 1px solid rgb(255 255 255 / .14); }
@supports (backdrop-filter: blur(1px)) {
  .chamada-cartao { background: rgb(19 42 37 / .58); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
}
.chamada h2 { margin-inline: auto; max-width: 16ch; color: var(--fundo); }
.chamada p { margin: var(--s-5) auto 0; max-width: 30rem; color: var(--claro-suave); }
.chamada .acoes { justify-content: center; margin-top: var(--s-7); }

/* ==========================================================================
   Rodape: tres colunas na faixa escura
   ========================================================================== */
.rodape { padding-block: var(--s-8) var(--s-9); background: var(--verde-escuro); color: var(--claro-suave); font-size: var(--t-sm); }
.rodape-grade { display: grid; gap: var(--s-6); }
.rodape-grade p + p { margin-top: var(--s-2); }
.rodape-marca { color: var(--fundo); font: 600 1.0625rem/1.2 var(--titulo); letter-spacing: -.015em; }
.rodape a { color: var(--fundo); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape-credito { grid-column: 1 / -1; max-width: none; margin: var(--s-8) 0 calc(var(--s-6) - var(--s-9)); padding-top: var(--s-5); text-align: right; border-top: 1px solid var(--linha-verde); font-size: .75rem; }
.rodape .rodape-credito a, .rodape .rodape-credito a:hover { color: inherit; text-decoration: none; }

/* ==========================================================================
   Movimento: toque, entrada do topo, blocos na rolagem (design/animacao.md)
   ========================================================================== */
/* O que entra pelos lados passa da borda da tela; clip corta sem criar rolagem
   horizontal (e, ao contrario de hidden, nao quebra nada de rolagem vertical). */
main { overflow-x: clip; }
@media (hover: hover) {
  .foto-secundaria img { transition: transform var(--d-3) var(--curva); }
  .foto-secundaria:hover img { transform: scale(1.03); }
}
/* Tudo sobe 18px, devagar e uma vez so: quase imperceptivel, como no site da
   StreamLines. Nada entra pelos lados. */
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.abertura-texto > * { animation: subir 800ms cubic-bezier(.16, 1, .3, 1) both; }
.abertura-texto > :nth-child(2) { animation-delay: 100ms; }
.abertura-texto > :nth-child(3) { animation-delay: 200ms; }
.abertura-texto > :nth-child(4) { animation-delay: 300ms; }
/* Blocos da rolagem: o script poe .anima no <html> e .visto em cada bloco quando
   ele aparece. */
.anima [data-bloco] { transition: opacity 800ms ease-out, transform 800ms cubic-bezier(.16, 1, .3, 1); }
.anima [data-bloco]:not(.visto) { opacity: 0; transform: translateY(18px); }

/* ==========================================================================
   Telas maiores
   ========================================================================== */
@media (min-width: 40rem) {
  .equipe-grade { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .pessoa { grid-template-columns: 1fr; }
  .pessoa .foto-pendente { grid-row: auto; }
  .pessoa-nome { margin-top: var(--s-5); }
  .pessoa-dados { margin-top: var(--s-4); }
  .rodape-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 48rem) {
  .marca { font-size: 1.125rem; gap: var(--s-3); }
  .marca-segunda { font-size: .8125rem; }
  .marca-simbolo { width: 34px; height: 34px; }
  .telefone-curto { display: none; }
  .telefone-numero { display: inline; }
  .telefone-topo { padding: 0 var(--s-5); }
  .preparar-grade, .contato-grade { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .mapa-local iframe { height: 26rem; }
  .servicos-grade { grid-template-columns: 1.25fr 1fr; }
  .grupo-destaque { grid-row: span 2; padding: var(--s-7); }
  .chamada-cartao { padding: var(--s-9) var(--s-8); }
}
@media (min-width: 64rem) {
  /* So o cabecalho usa a tela inteira: logo e telefone nos cantos, links no centro exato. */
  .cabecalho .envolve { width: calc(100% - 2 * var(--margem)); }
  .cabecalho-linha { display: grid; grid-template-columns: 1fr auto 1fr; }
  .telefone-topo { justify-self: end; }
  .nav-larga { display: flex; }
  .nav-celular { display: none; }
}

/* ==========================================================================
   Movimento reduzido e impressao
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .rotulo::before, .checklist li::before { background: CanvasText; }
}
@media print {
  body { font-size: 12pt; }
  .cabecalho { position: static; }
  .nav-larga, .nav-celular, .botao, .pular, .mapa-local, .foto-secundaria, .chamada-fundo, .foto-pendente { display: none; }
  .preparar, .chamada, .chamada-cartao, .rodape { background: white; color: black; }
  .preparar h2, .chamada h2, .rodape-marca, .rodape a { color: black; }
}