/* Ampla · proporções compactas, fotografias e movimento ligado à rolagem. */
:root {
  --max: 1320px;
  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --secao-y: clamp(3.2rem, 5.6vw, 5rem);
  --t-xl: clamp(2rem, 3.4vw, 3.25rem);
  --t-2xl: clamp(3.5rem, 6.3vw, 5.9rem);
  --acento: var(--teal-400);
  --claro: var(--papel);
}
.progresso { position: fixed; inset: 0 0 auto; z-index: 150; height: 3px; background: var(--teal-400); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.titulo-secao { font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
.indice-secao { margin-bottom: 1.2rem; font-size: .72rem; }
.indice-secao::after { max-width: 75px; }
.chamada { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; }
.btn { font-size: .82rem; letter-spacing: 0; text-transform: none; padding: .95rem 1.4rem; }
.btn .seta { margin-left: .6rem; }
.btn--ocre { background: var(--teal-400); color: var(--teal-900); }
.btn--ocre:hover { background: var(--papel); color: var(--teal-900); }
.cabecalho__interior { padding-block: 1rem; }
.marca img { height: 44px; }
/* Logo horizontal: mais larga, um pouco mais baixa para o cabeçalho manter a altura. */
.marca img { height: 40px; }
.cabecalho--fixo .marca img { height: 32px; }
@media (max-width: 560px) { .marca img { height: 32px; } .cabecalho--fixo .marca img { height: 28px; } }
.cabecalho::before { height: 110%; background: linear-gradient(oklch(20% .04 195 / .8), oklch(20% .04 195 / .2)); }
.cabecalho--fixo { background: var(--papel); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav a { font-size: .8rem; }
.nav__cta { border-width: 1px; }
.hero { min-height: clamp(590px, 86svh, 780px); align-items: center; background: var(--teal-900); }
.hero__fundo { inset: -16% 0; z-index: -2; will-change: transform; }
.hero__fundo img { animation: none; object-position: center 62%; }
.hero__fundo::after { background: linear-gradient(90deg, oklch(18% .035 192 / .88), oklch(18% .035 192 / .44) 50%, oklch(18% .035 192 / .08)), linear-gradient(0deg, oklch(18% .035 192 / .75), transparent 50%); }
.hero__interior { padding-top: 128px; padding-bottom: 138px; will-change: transform; }
.hero__local { font-family: var(--fonte-titulo); font-size: .73rem; letter-spacing: .09em; margin-bottom: 1.6rem; color: var(--papel); }
.hero__local::before { display: none; }
.ponto-vivo { width: 7px; height: 7px; background: var(--teal-400); border-radius: 50%; box-shadow: 0 0 0 5px oklch(72% .072 196 / .15); }
.hero__titulo { font-size: var(--t-2xl); line-height: 1.02; font-weight: 700; letter-spacing: -.05em; max-width: 15ch; }
.hero__linha { display: block; }
.hero__titulo .destaque { font-style: normal; font-weight: 300; color: var(--teal-400); letter-spacing: -.04em; }
.hero__ponto { color: var(--papel); }
.hero__base { border: 0; padding: 0; margin-top: 1.6rem; display: block; }
.hero__texto { font-size: 1rem; max-width: 43ch; line-height: 1.65; }
.hero__acoes { margin-top: 1.6rem; }
.hero__legenda { position: absolute; bottom: 115px; right: max(var(--gutter), calc((100vw - 1200px) / 2)); display: grid; gap: .4rem; font-size: .7rem; text-align: right; }
.hero__coordenada { font-size: .63rem; opacity: .75; }
.hero__rodape { position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); max-width: 1200px; margin-inline: auto; padding: 1.2rem 0; border-top: 1px solid oklch(98% .004 195 / .25); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .7rem; }
.hero__rodape a { display: inline-flex; align-items: center; gap: 1rem; }
.hero__rodape a span { display: inline-block; font-size: 1.3rem; animation: convite-scroll 2s ease-in-out infinite; }
@keyframes convite-scroll { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes entrada-ampla { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
.hero__titulo > span { animation: entrada-ampla 1.05s var(--saida) both; }
.hero__titulo > span:nth-child(2) { animation-delay: .18s; }
.hero__local, .hero__base { animation: entrada-ampla 1.1s .28s var(--saida) both; }
.numeros { padding-block: 2.4rem; }
.numeros__grade { border: 0; background: none; gap: 2rem; }
.numero { padding: 0; }
.numero__valor { font-size: clamp(2.2rem, 3.5vw, 3.4rem); font-weight: 600; }
.numero__rotulo { font-family: var(--fonte-titulo); font-size: .77rem; text-transform: none; letter-spacing: 0; max-width: 27ch; margin-top: .65rem; color: oklch(88% .025 195); }
.numeros__nota { font-size: .87rem; max-width: none; border-top: 1px solid oklch(94% .01 195 / .18); margin-top: 1.6rem; padding-top: 1.3rem; }
.sobre__grade { gap: clamp(2rem, 5vw, 4.5rem); }
.sobre__figura { padding-bottom: 2rem; }
.sobre__janela { position: relative; overflow: hidden; aspect-ratio: 1.1; }
.sobre__janela img { position: absolute; top: -22%; width: 100%; height: 144%; aspect-ratio: auto; object-fit: cover; will-change: transform; }
.sobre__selo { bottom: 0; right: -1rem; max-width: 210px; padding: 1.25rem; background: var(--teal-800); color: var(--papel); }
.sobre__selo strong { font-size: 2.4rem; font-weight: 650; }
.sobre__selo span { font-family: var(--fonte-titulo); font-size: .71rem; text-transform: none; letter-spacing: 0; }
.sobre__texto .corpo { font-size: .9rem; line-height: 1.75; }
.sobre__texto h2 { margin-bottom: 1.2rem; }
.sobre__texto .chamada { margin-bottom: 1rem; }
.btn-expandir { font-family: var(--fonte-titulo); font-size: .8rem; text-transform: none; letter-spacing: 0; }
.servicos__cabeca { margin-bottom: 2.2rem; }
.servicos__experiencia { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.servicos__visual { position: sticky; top: 100px; aspect-ratio: .9; overflow: hidden; background: var(--teal-900); }
.servicos__visual > img { width: 100%; height: 100%; object-fit: cover; }
.servicos__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, oklch(20% .04 195 / .9), transparent 50%); pointer-events: none; }
.servicos__visual figcaption { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; color: var(--papel); display: grid; gap: .4rem; z-index: 1; }
#servico-contagem { color: var(--teal-400); font-size: .7rem; }
#servico-legenda { font-size: 1.3rem; font-weight: 550; }
.servicos__visual-marca { display: none; }
.servico { grid-template-columns: 1.5rem 1fr 30px; gap: .6rem 1rem; padding-block: 1.1rem; transition: color .3s, background-color .3s; }
.servico:hover { padding-inline: 0; background: transparent; }
.servico__nome { font-size: 1.15rem; font-weight: 650; }
.servico__desc { grid-column: 2; grid-row: 2; font-size: .8rem; line-height: 1.55; font-weight: 400; }
.servico__marca { grid-column: 3; grid-row: 1; width: 30px; height: 30px; }
.visao { height: clamp(340px, 48vw, 470px); position: relative; overflow: hidden; background: var(--teal-900); display: flex; align-items: center; color: var(--papel); }
.visao__imagem { position: absolute; inset: -52% 0; will-change: transform; }
.visao__imagem img { width: 100%; height: 100%; object-fit: cover; }
.visao__imagem::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(18% .03 192 / .8), oklch(18% .03 192 / .2)); }
.visao__conteudo { position: relative; z-index: 1; }
.visao__conteudo > p { font-size: .8rem; margin-bottom: 1.2rem; }
.visao h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.15; letter-spacing: -.04em; font-weight: 550; }
.visao h2 span { color: var(--teal-400); }
.visao__link { display: inline-flex; align-items: center; gap: 1.2rem; font-size: .8rem; margin-top: 1.4rem; padding-bottom: .5rem; border-bottom: 1px solid oklch(98% .004 195 / .5); }
.visao__link span { font-size: 1.3rem; }
.visao__credito { position: absolute; right: var(--gutter); bottom: 1rem; font-size: .6rem; color: var(--papel); }
.obras__cabeca { margin-bottom: 1.8rem; gap: 1.2rem; }
.filtros { gap: .4rem; max-width: 610px; }
.filtro { font-family: var(--fonte-titulo); font-size: .72rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: .65rem .85rem; border-width: 1px; }
.obras__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1.8rem 1.2rem; align-items: start; }
.obra, .obra--larga, .obra--alta, .obra--media { grid-column: auto; grid-row: auto; background: none; overflow: visible; }
.obra__foto { display: block; width: 100%; aspect-ratio: 1.45; overflow: hidden; position: relative; padding: 0; border: 0; cursor: pointer; background: var(--teal-900); }
.obra__foto img { position: absolute; top: -24%; width: 100%; height: 148%; object-fit: cover; transition: filter .4s; will-change: transform; }
.obra:hover img { transform: none; filter: saturate(1.12); }
.obra > img { aspect-ratio: 1.45; height: auto; }
.obra__abrir { position: absolute; right: .75rem; bottom: .75rem; width: 34px; height: 34px; display: grid; place-items: center; background: var(--papel); color: var(--teal-900); font-size: 1.3rem; border-radius: 50%; }
.obra__veu { display: none; }
.obra__info { position: static; padding: .85rem 0 0; color: var(--tinta); }
.obra__tipo { font-family: var(--fonte-titulo); color: var(--teal-700); font-size: .67rem; letter-spacing: .025em; text-transform: none; margin-bottom: .3rem; }
.obra__nome { font-size: 1.05rem; font-weight: 650; }
.obra__meta { font-family: var(--fonte-titulo); font-size: .73rem; line-height: 1.5; color: var(--tinta-media); max-height: none; opacity: 1; transition: none; }
.obras__grade[data-total="1"] .obra { max-width: 580px; grid-column: span 2; }
.obras__orientacao { font-size: .78rem; color: var(--tinta-media); margin-top: 1.5rem; }
.metodo__cabeca { margin-bottom: 2.5rem; gap: 3rem; }
.metodo__nota blockquote { font-size: 1.1rem; line-height: 1.55; }
.etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.etapa { padding: 1.4rem 1rem; }
.etapa__num { font-size: .72rem; margin-bottom: 1rem; }
.etapa__nome { font-size: 1.1rem; }
.etapa__desc { font-size: .8rem; font-weight: 400; }
.clientes__cabeca { margin-bottom: 2rem; }
.clientes__grade { gap: 1.8rem 3rem; padding-block: 2rem; }
.cliente img { max-height: 34px; max-width: 120px; }
.contato__grade { gap: 3rem; }
.form { padding: 1.8rem; }
.campo label { font-family: var(--fonte-titulo); font-size: .76rem; text-transform: none; letter-spacing: 0; }
.campo input, .campo select, .campo textarea { font-size: .85rem; padding: .8rem; }
.dado { padding-block: 1rem; font-size: .85rem; }
.dado__valor { overflow-wrap: anywhere; }
.form__nota { color: var(--tinta-media); }
.rodape { padding-top: 2.7rem; }
.rodape__grade { grid-template-columns: 1.1fr .7fr .7fr 1.2fr; gap: 2rem; padding-bottom: 2.4rem; }
.rodape__base { padding-block: 1.2rem; }
.rodape__sobre, .rodape li { font-size: .8rem; }
.zap { width: 48px; height: 48px; }
.zap svg { width: 25px; height: 25px; }
@media (max-width: 1024px) {
  .sobre__grade, .servicos__cabeca, .clientes__cabeca { grid-template-columns: 1fr 1fr; }
  .sobre__selo { right: .7rem; }
  .sobre__grade { gap: 2rem; }
  .servicos__experiencia { grid-template-columns: .8fr 1.2fr; gap: 2rem; }
  .obras__cabeca { display: block; }
  .filtros { margin-top: 1.5rem; }
  .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav a, .cabecalho--fixo .nav a { font-size: 1.7rem; }
  .hero { min-height: 610px; }
  .hero__interior { padding-top: 115px; padding-bottom: 125px; }
  .hero__titulo { font-size: clamp(3.1rem, 7.6vw, 4.5rem); }
  .hero__legenda { display: none; }
  .hero__territorio { display: none; }
  .hero__fundo img { object-position: 57% center; }
  .numeros__grade { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .sobre__grade, .servicos__cabeca, .clientes__cabeca { grid-template-columns: 1fr; }
  .sobre__figura { max-width: none; }
  .sobre__janela { aspect-ratio: 1.6; }
  .servicos__experiencia { grid-template-columns: 1fr; }
  .servicos__visual { position: relative; top: auto; aspect-ratio: 2; }
  .obras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metodo__cabeca { gap: 1.5rem; }
  .metodo__nota { max-width: none; }
  .contato__grade { gap: 2rem; }
}
@media (max-width: 560px) {
  .hero { min-height: 570px; }
  .hero__interior { padding-top: 115px; padding-bottom: 105px; }
  .hero__titulo { font-size: clamp(2.6rem, 10.8vw, 3.8rem); max-width: 15ch; }
  .hero__local { font-size: .61rem; letter-spacing: .035em; margin-bottom: 1.25rem; }
  .hero__texto { font-size: .88rem; max-width: 38ch; }
  .hero__base { margin-top: 1.2rem; }
  .hero__acoes { gap: .7rem; margin-top: 1.2rem; }
  .hero__acoes .btn { flex: 0 1 auto; padding: .85rem .95rem; font-size: .76rem; }
  .hero__acoes .seta { margin-left: 0; }
  .hero__rodape { font-size: .62rem; padding-block: 1rem; }
  .hero__rodape > span { max-width: 16ch; }
  .hero__fundo::after { background: linear-gradient(90deg, oklch(18% .035 192 / .82), oklch(18% .035 192 / .4)); }
  .numero__valor { font-size: 2.4rem; }
  .numero__rotulo { font-size: .73rem; }
  .numeros__nota { font-size: .8rem; }
  .sobre__janela { aspect-ratio: 1.3; }
  .sobre__selo { padding: 1rem; max-width: 185px; }
  .sobre__selo strong { font-size: 2rem; }
  .servicos__visual { aspect-ratio: 1.7; }
  .servico { grid-template-columns: 1.3rem 1fr 28px; gap: .5rem .6rem; }
  .servico__nome { font-size: 1.05rem; }
  .servico__desc { font-size: .8rem; }
  .visao { height: 350px; }
  .visao h2 { font-size: 2.15rem; }
  .visao__credito { font-size: .52rem; }
  .visao__conteudo > p { font-size: .73rem; margin-bottom: 1rem; }
  .visao__link { font-size: .74rem; }
  .obras__grade { gap: 1.4rem .8rem; }
  .obra__foto { aspect-ratio: .95; }
  .obra__nome { font-size: .9rem; line-height: 1.3; }
  .obra__meta { font-size: .68rem; }
  .obra__abrir { width: 29px; height: 29px; right: .5rem; bottom: .5rem; font-size: 1.1rem; }
  .obras__grade[data-total="1"] .obra { max-width: none; }
  .obras__grade[data-total="1"] .obra__foto { aspect-ratio: 1.45; }
  .filtro { font-size: .68rem; padding: .65rem .7rem; }
  .etapas { grid-template-columns: 1fr; background: none; }
  .etapa { padding: 1.2rem 0; border-top: 1px solid oklch(94% .01 195 / .2); }
  .etapa__num { margin-bottom: .55rem; }
  .etapa__nome { margin-bottom: .45rem; }
  .clientes__grade { gap: 1.5rem; }
  .cliente img { max-width: 82px; max-height: 28px; }
  .form { padding: 1.25rem; }
  .rodape__grade { gap: 1.7rem 1rem; }
  .rodape__marca, .rodape__grade > div:last-child { grid-column: 1 / -1; }
  .rodape__base { padding-bottom: 4.5rem; }
}
.galeria { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 1.5rem var(--gutter); background: oklch(17% .017 175); color: var(--claro); border: 0; }
.galeria[open] { display: flex; flex-direction: column; }
.galeria::backdrop { background: oklch(17% .017 175); }
.galeria__topo, .galeria__base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .8rem; }
.galeria__topo { padding-bottom: 1rem; }
.galeria button { background: none; border: 1px solid oklch(98% .006 100 / .35); color: var(--claro); cursor: pointer; min-width: 48px; min-height: 48px; }
.galeria button:hover { background: var(--teal-700); }
.galeria__fechar { display: flex; gap: 1.5rem; align-items: center; padding-inline: 1rem; font-size: .8rem; }
.galeria__fechar span { font-size: 1.7rem; }
.galeria__palco { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 1.5rem; flex: 1; min-height: 0; }
.galeria__palco img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.galeria__base { padding-top: 1.3rem; }
#galeria-titulo { font-size: 1.5rem; font-weight: 450; letter-spacing: -.035em; margin-block: .25rem; }
#galeria-categoria, #galeria-posicao { color: var(--acento); }
#galeria-descricao { color: oklch(83% .015 175); }
@media (max-width: 560px) {
  .galeria { padding: 1rem; }
  .galeria__topo > span { max-width: 16ch; }
  .galeria__palco { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 48px; gap: 1rem; }
  .galeria__palco img { grid-column: 1 / -1; grid-row: 1; }
  .galeria__anterior, .galeria__proxima { grid-row: 2; }
  #galeria-titulo { font-size: 1.2rem; }
  #galeria-descricao { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax], .obra__foto img, .hero__interior { transform: none !important; will-change: auto; }
  .hero__titulo > span, .hero__local, .hero__base, .hero__rodape a span { animation: none; }
  .js-revelar [data-revelar] { opacity: 1; transform: none; }
}
@media print {
  .progresso, .galeria, .hero__rodape, .hero__legenda, .visao { display: none; }
  .js-revelar [data-revelar] { opacity: 1; transform: none; }
}
/* Evita a entrada involuntária do menu ao mudar de desktop para celular. */
@media (max-width: 860px) {
  .nav { transition: none; }
  .nav[data-aberto="true"] { transition: transform .45s var(--saida), visibility 0s; }
}
.dado__rotulo { color: var(--tinta-media); }
/* Cenas controladas pelo progresso da rolagem, com reversão ao voltar. */
.scroll-object { transition: none !important; }
.js-cenas .hero__titulo > span { animation: none; }
.js-cenas .hero__titulo .hero__linha, .js-cenas .hero__titulo .destaque { will-change: transform; }
.visao { height: 440px; overflow: visible; display: block; background: var(--papel); }
.visao__palco { height: 440px; overflow: hidden; position: relative; display: flex; align-items: center; background: var(--teal-900); }
.js-cenas .visao { height: 660px; }
.js-cenas .visao__palco { position: sticky; top: 76px; will-change: clip-path; }
.visao__imagem { inset: -10% 0; }
.visao__linha { display: block; color: var(--papel) !important; will-change: transform; }
.visao__linha em { color: var(--teal-400); font-style: normal; }
.visao__conteudo { padding-block: 2rem; }
.servicos__visual > .servico-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.servicos__visual > .servico-frame:first-child { opacity: 1; }
.servico[data-em-foco="true"] .servico__nome { color: var(--teal-700); }
.servico[data-em-foco="true"] .servico__marca { background: var(--teal-800); color: var(--papel); border-color: var(--teal-800); transform: rotate(-45deg); }
.servicos__visual { z-index: 2; }
@media (max-width: 860px) {
  .js-cenas .servicos__visual { position: sticky; top: 72px; height: 220px; aspect-ratio: auto; margin-bottom: .3rem; }
  .js-cenas .servicos__visual figcaption { left: 1rem; bottom: 1rem; }
  .js-cenas .servicos__experiencia { gap: 1rem; }
  .js-cenas .servicos__lista { position: relative; z-index: 1; }
  .visao, .visao__palco { height: 340px; }
  .js-cenas .visao { height: 500px; }
  .js-cenas .visao__palco { top: 72px; height: 340px; }
  .visao h2 { font-size: clamp(1.8rem, 6.5vw, 2.7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .js-cenas .visao { height: 440px; }
  .js-cenas .visao__palco { position: relative; top: auto; clip-path: none !important; }
  .scroll-object, .hero__titulo > span, .visao__linha, .visao__imagem { transform: none !important; opacity: 1 !important; }
  .js-cenas .servicos__visual { position: relative; top: auto; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .js-cenas .visao { height: 340px; }
}
.visao__conteudo { text-align: center; }
.visao__linha { transform-origin: center; }
.visao__credito { right: max(8vw, var(--gutter)); }
/* Hero em vídeo: da planta à obra. O vídeo cobre a foto e para no último quadro,
   que é a própria foto. Sem JS, sem movimento ou se o autoplay falhar, fica a foto. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: none; }
.hero--video .hero__video { display: block; }
.hero--video .hero__fundo img { visibility: hidden; }
.hero__linha-tempo { display: block; height: 1px; margin-top: .35rem; background: oklch(98% .004 195 / .2); overflow: hidden; }
.hero__linha-tempo i { display: block; height: 100%; background: var(--teal-400); transform: scaleX(1); transform-origin: right; }
.hero--video .hero__linha-tempo i { transform: scaleX(var(--obra, 0)); transform-origin: left; }
.hero__coordenada { transition: opacity .35s var(--saida); }
@media (max-width: 860px) {
  .hero__video { object-position: 57% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none !important; }
  .hero--video .hero__fundo img { visibility: visible; }
}
/* Intro do hero: o vídeo entra com zoom rápido saindo do desfoque, sem textos.
   Ao terminar, cabeçalho e conteúdo entram em sequência. Usa `translate` (não `transform`)
   porque o scroll já escreve `transform` inline nesses elementos. */
.hero--video .hero__video { opacity: 0; }
.hero--rodando .hero__video { opacity: 1; animation: intro-zoom 5s linear both; }
@keyframes intro-zoom {
  0% { transform: scale(1.45); filter: blur(22px) brightness(.55); opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  20% { transform: scale(1.05); filter: blur(0) brightness(1); opacity: 1; }
  100% { transform: scale(1); filter: none; opacity: 1; }
}
.hero__fundo::after { transition: opacity 1.4s var(--saida); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: var(--teal-400); transform: scaleX(var(--obra, 0)); transform-origin: left; opacity: 0; transition: opacity .5s; pointer-events: none; }

.intro-hero .hero__fundo::after { opacity: .15; }
.intro-hero .hero--rodando::after { opacity: .9; }
.intro-hero .cabecalho, .intro-hero .zap, .intro-hero .hero__interior > *, .intro-hero .hero__legenda, .intro-hero .hero__rodape { opacity: 0; pointer-events: none; animation: none !important; }

@keyframes revela-linha { from { opacity: 0; translate: 0 .5em; clip-path: inset(0 0 100% 0); filter: blur(12px); } to { opacity: 1; translate: 0 0; clip-path: inset(-20% -5% -30% -5%); filter: blur(0); } }
@keyframes revela-sobe { from { opacity: 0; translate: 0 26px; filter: blur(8px); } }
@keyframes revela-desce { from { opacity: 0; translate: 0 -100%; } }
@keyframes revela-traco { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
html.intro-revelada .hero__titulo > span { animation: revela-linha 1.1s var(--saida) backwards; }
html.intro-revelada .hero__titulo > span:nth-child(2) { animation-delay: .14s; }
html.intro-revelada .hero__local { animation: revela-sobe .9s .32s var(--saida) backwards; }
html.intro-revelada .hero__base { animation: none; }
html.intro-revelada .hero__texto { animation: revela-sobe .9s .44s var(--saida) backwards; }
html.intro-revelada .hero__acoes .btn { animation: revela-sobe .9s .58s var(--saida) backwards; }
html.intro-revelada .hero__acoes .btn + .btn { animation-delay: .68s; }
html.intro-revelada .hero__legenda { animation: revela-sobe .9s .8s var(--saida) backwards; }
html.intro-revelada .hero__rodape { animation: revela-traco 1.2s .7s var(--saida) backwards; }
html.intro-revelada .cabecalho { animation: revela-desce .9s .5s var(--saida) backwards; }
html.intro-revelada .zap { animation: revela-sobe .9s 1s var(--saida) backwards; }
@media (prefers-reduced-motion: reduce) {
  .intro-hero .cabecalho, .intro-hero .zap, .intro-hero .hero__interior > *, .intro-hero .hero__legenda, .intro-hero .hero__rodape { opacity: 1; pointer-events: auto; }
  html.intro-revelada * { animation: none !important; }
  .hero::after { display: none; }
}
/* Hero ocupa a tela inteira: a faixa de números só aparece ao rolar, com contagem e entrada. */
.hero { min-height: 100vh; min-height: 100svh; }
/* Números em cena: a faixa vira um palco fixo e a rolagem passa por um número de cada vez,
   grande e centralizado, contando conforme entra. Fecha com a frase acendendo palavra a palavra.
   Só existe com .numeros--cena (posta pelo JS); sem ela, vale a grade original. */
.numeros--cena { height: 500vh; height: 500svh; padding: 0; position: relative; }
.numeros__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 70% 55% at 50% 50%, oklch(27% .045 192), var(--teal-900) 70%); }
.numeros__palco::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle min(46vw, 620px) at var(--luz-x, 50%) var(--luz-y, 50%), oklch(48% .085 190 / .42), oklch(40% .07 190 / .14) 45%, transparent 72%); }
.numeros--cena .env { position: relative; height: 100%; max-width: none; padding: 0; }
.numeros--cena .numeros__grade { display: contents; }
.numeros--cena .numero, .numeros--cena .numeros__nota { position: absolute; inset: 0; margin: 0; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: none; border: 0; opacity: 0; will-change: transform, opacity, filter; }
.numeros--cena .numero__valor { justify-content: center; font-size: clamp(7rem, 25vw, 21rem); font-weight: 600; line-height: .82; letter-spacing: -.065em; color: var(--papel); font-variant-numeric: tabular-nums; }
.numeros--cena .numero__sufixo { font-size: .32em; font-weight: 400; letter-spacing: -.02em; color: var(--teal-400); margin-left: .08em; }
.numeros--cena .numero__rotulo { font-family: var(--fonte-titulo); font-size: clamp(1rem, 1.7vw, 1.45rem); letter-spacing: -.01em; text-transform: none; color: oklch(88% .025 195); max-width: 26ch; margin-top: clamp(1.2rem, 3vh, 2rem); line-height: 1.35; }
.numeros--cena .numeros__nota { display: block; height: max-content; inset: 50% 0 auto; translate: 0 -50%; max-width: 24ch; margin-inline: auto; padding: 0; font-size: clamp(1.7rem, 3.9vw, 3.6rem); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; color: var(--papel); text-wrap: balance; }
@media (max-width: 860px) { .numeros--cena .numeros__nota { max-width: calc(100% - 2 * var(--gutter)); font-size: clamp(1.6rem, 7.4vw, 2.4rem); } }
.numeros__nota .palavra { opacity: .16; transition: opacity .25s linear; }
.numeros__nota .palavra[data-acesa="true"] { opacity: 1; }
.numeros__nota .palavra--destaque[data-acesa="true"] { color: var(--teal-400); }
.numeros__chamada { position: absolute; top: clamp(5.5rem, 13vh, 8rem); left: 0; right: 0; text-align: center; font-family: var(--fonte-titulo); font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--teal-400); }
.numeros__marcador { position: absolute; bottom: clamp(1.6rem, 5vh, 3rem); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: .5rem; }
.numeros__marcador span { width: 28px; height: 2px; background: oklch(98% .004 195 / .2); overflow: hidden; }
.numeros__marcador span i { display: block; height: 100%; background: var(--teal-400); transform: scaleX(var(--p, 0)); transform-origin: left; }
.numeros__indice { position: absolute; bottom: clamp(1.4rem, 4.6vh, 2.8rem); right: max(var(--gutter), calc((100vw - 1200px) / 2)); font-family: var(--fonte-titulo); font-size: .72rem; letter-spacing: .12em; color: oklch(88% .025 195 / .7); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .numeros--cena { height: 400vh; height: 400svh; }
  .numeros--cena .numero__valor { font-size: clamp(5.5rem, 30vw, 10rem); }
  .numeros__indice { display: none; }
}
@media print {
  .numeros--cena { height: auto; }
  .numeros__palco { position: static; height: auto; }
  .numeros--cena .numero, .numeros--cena .numeros__nota { position: static; opacity: 1 !important; transform: none !important; filter: none !important; }
  .numeros__chamada, .numeros__marcador, .numeros__indice { display: none; }
}
/* Telas menores: o recorte do hero fica ancorado à esquerda, onde está a logo da Ampla na fachada.
   O zoom também parte da esquerda, para a logo não sair do quadro durante a animação. */
@media (max-width: 1440px) {
  .hero__video, .hero__fundo img { object-position: left center; }
  .hero__video, .hero__fundo { transform-origin: left center; }
}
/* Celular em pé: vídeo e foto verticais mostram a sede inteira. Menos folga de parallax
   e recorte puxado para a esquerda, para a logo da fachada não sair do quadro. */
.hero__fundo picture { display: contents; }
@media (max-width: 860px) and (orientation: portrait) {
  .hero__fundo { inset: -5% 0; }
  .hero__video, .hero__fundo img { object-position: 14% 72%; }
}

/* Faixa de crédito no fim do rodapé. */
.rodape__credito { border-top: 1px solid oklch(98% .004 195 / .08); background: oklch(21% .056 192); }
.rodape__credito p { padding-block: 1rem; font-size: .74rem; text-align: center; color: oklch(88% .025 195 / .7); }
.rodape__credito a { color: var(--papel); font-weight: 600; text-decoration: underline; text-decoration-color: var(--teal-400); text-underline-offset: 3px; transition: color .25s var(--saida); }
.rodape__credito a:hover { color: var(--teal-400); }

/* Paradas da seção de números (classe posta pelo JS só enquanto a seção está na tela). */
html.numeros-snap { scroll-snap-type: y mandatory; scroll-padding-top: 0; scroll-behavior: auto; }
.numeros__parada { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.numeros__parada[data-ativa="false"] { scroll-snap-align: none; }