@font-face{font-family:Satoshi;src:url("fontes/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url("fontes/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url("fontes/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url("fontes/satoshi-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ==========================================================================
   VITÓRIA BRASIL EVENTOS
   Sistema visual — preto azulado, tipografia pesada, fotografia protagonista.
   Verde da marca só como acento. Sem gradiente, sem glass, raio máximo 2px.
   ========================================================================== */

:root{
  --preto:#080B14;
  --preto-2:#0C111C;
  --preto-3:#131A28;
  --branco:#FFFFFF;
  --off:#F4F4F1;

  /* verde da identidade (#007A1B no logo) clareado para segurar contraste
     sobre o preto azulado; a versão escura fica para fundo claro */
  --verde:#00A62E;
  --verde-claro:#2BC94F;
  --verde-escuro:#00701A;

  /* ouro das tendas do logotipo (#EFC400 medido). So traco e numeracao. */
  --ouro:#EFC400;

  --texto-claro:#FFFFFF;
  --texto-medio:#A7AEBC;
  --texto-fraco:#6E7686;
  --texto-escuro:#0F1420;
  --texto-escuro-2:#4A5261;

  --linha-escura:rgba(255,255,255,.10);
  --linha-clara:#DCDCD5;

  --larg:1560px;
  --pad:clamp(20px,4.2vw,72px);
  --secao:clamp(60px,4.6vw,76px);

  /* raio: foto e card em --raio, caixa menor em --raio-2, campo e botao em --raio-3.
     Faixa de ponta a ponta (hero, CTA, foto cheia, header) continua reta. */
  --raio:16px;
  --raio-2:12px;
  --raio-3:10px;

  --fonte:Satoshi,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--preto);color:var(--texto-claro);
  font-family:var(--fonte);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.travado{overflow:hidden}
img{display:block;max-width:100%}
picture{display:contents}
/* <source> nao renderiza sozinho, mas com display:contents no picture ele vira
   item do grid/flex do pai e ocupa uma celula. Ja embaralhou as fotos do modal. */
picture>source{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--fonte);margin:0;
  line-height:1;letter-spacing:-.022em;font-weight:700;
}
.display{
  font-size:clamp(2.2rem,4.4vw,3.9rem);text-transform:uppercase;
  font-weight:900;line-height:.96;letter-spacing:-.022em;
}
.titulo{
  font-family:var(--fonte);font-weight:500;letter-spacing:-.026em;
  font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.08;
}
.titulo--caps{text-transform:uppercase;font-weight:900;letter-spacing:-.02em}
.pt{color:var(--verde)}
.rotulo{
  font-family:var(--fonte);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--verde);margin:0;
}
.rotulo--fraco{color:var(--texto-fraco)}
.texto{font-size:.94rem;line-height:1.8;color:var(--texto-medio);margin:0}
.claro .texto{color:var(--texto-escuro-2)}
.claro .rotulo--fraco{color:#8C8C82}

/* ---------- estrutura ---------- */
.container{width:100%;max-width:var(--larg);margin:0 auto;padding:0 var(--pad)}
.secao{padding:var(--secao) 0}
.claro{background:var(--off);color:var(--texto-escuro)}
.claro h1,.claro h2,.claro h3{color:var(--texto-escuro)}
[id]{scroll-margin-top:88px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--fonte);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:19px 30px;border:1px solid transparent;border-radius:var(--raio-3);
  transition:background .3s var(--t),color .3s var(--t),border-color .3s var(--t);
  white-space:nowrap;
}
.btn .seta{transition:transform .35s var(--t);display:inline-block}
.btn:hover .seta{transform:translateX(6px)}
.btn--verde{background:var(--verde);color:#04140A;border-color:var(--verde)}
.btn--verde:hover{background:var(--verde-claro);border-color:var(--verde-claro)}
.btn--linha{border-color:var(--verde);color:var(--verde);background:transparent}
.btn--linha:hover{background:var(--verde);color:#04140A}
.btn--escuro{border-color:rgba(255,255,255,.35);color:var(--branco)}
.btn--escuro:hover{background:var(--branco);color:var(--preto);border-color:var(--branco)}
.link-tec{
  display:inline-flex;align-items:center;gap:16px;padding-bottom:14px;
  border-bottom:1px solid currentColor;
  font-family:var(--fonte);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s var(--t),border-color .3s var(--t);
}
.link-tec .seta{transition:transform .35s var(--t)}
.link-tec:hover{color:var(--verde);border-color:var(--verde)}
.link-tec:hover .seta{transform:translateX(6px)}

/* ---------- header ---------- */
.cabecalho{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--t),border-color .4s var(--t);
  border-bottom:1px solid transparent;
}
.cabecalho.solido{
  background:rgba(8,11,20,.88);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--linha-escura);
}
.cabecalho__in{display:flex;align-items:center;gap:40px;height:84px}
.marca img{height:46px;width:auto;transition:height .4s var(--t)}
.cabecalho.solido .marca img{height:40px}
.menu{display:flex;gap:44px;margin-left:auto}
.menu a{
  font-family:var(--fonte);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#D7DBE4;
  position:relative;padding:6px 0;transition:color .3s var(--t);
}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--verde);transition:right .35s var(--t);
}
.menu a:hover{color:var(--branco)}
.menu a:hover::after{right:0}
.cabecalho .btn{margin-left:44px}
.hamburguer{display:none;margin-left:auto;padding:12px;width:48px}
.hamburguer i{
  display:block;height:1px;background:var(--branco);margin:6px 0;
  transition:transform .3s var(--t),opacity .3s var(--t);
}
.hamburguer[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.gaveta{
  position:fixed;inset:0;z-index:99;background:var(--preto);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .35s var(--t),visibility .35s;
}
.gaveta.aberta{opacity:1;visibility:visible}
.gaveta a{
  font-family:var(--fonte);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.8rem,7vw,2.8rem);letter-spacing:-.03em;
  padding:16px 0;border-bottom:1px solid var(--linha-escura);
}
.gaveta a:last-child{border-bottom:0;margin-top:28px;color:var(--verde);font-size:1rem;letter-spacing:.16em}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__fundo{position:absolute;inset:0;z-index:0}
.hero__fundo img{
  width:100%;height:110%;object-fit:cover;object-position:center 46%;
  will-change:transform;
}
.hero__fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(8,11,20,.93) 0%,rgba(8,11,20,.66) 34%,rgba(8,11,20,.06) 68%,rgba(8,11,20,.24) 100%),
    linear-gradient(180deg,rgba(8,11,20,.72) 0%,rgba(8,11,20,0) 24%,rgba(8,11,20,0) 52%,rgba(8,11,20,.82) 100%);
}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(28px,4vw,44px);padding-top:160px}
.hero .rotulo{margin-bottom:26px}
.hero h1{max-width:15ch}
.hero__texto{margin-top:32px;max-width:44ch;font-size:1rem;color:#C9CEDA;line-height:1.75}
.hero__acoes{display:flex;gap:18px;flex-wrap:wrap;margin-top:44px}
.hero__barra{
  position:relative;z-index:2;border-top:1px solid var(--linha-escura);
  margin-top:clamp(32px,5vw,56px);padding:22px 0 clamp(24px,3vw,34px);
  display:flex;gap:clamp(20px,4vw,54px);align-items:center;flex-wrap:wrap;
  font-family:var(--fonte);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#9AA2B2;
}
.hero__barra b{color:var(--branco);font-weight:700}
.hero__barra span{color:var(--texto-fraco)}
/* ---------- sobre ---------- */

/* ---------- estruturas ---------- */
.est__grade{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.18fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(clamp(130px,9.8vw,168px),auto));gap:14px;
}
.est__texto{grid-column:1;grid-row:1/3;align-self:center;padding-right:clamp(0px,2vw,32px)}
.est__texto h2{margin-top:18px}
.est__texto .texto{margin-top:18px;max-width:34ch}
.est__texto .link-tec{margin-top:30px}
.bloco{position:relative;overflow:hidden;display:block;background:var(--preto-2);border-radius:var(--raio)}
.bloco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);transition:transform 1.1s var(--t),filter .5s var(--t);filter:saturate(.92) brightness(.82)}
.bloco:hover img{transform:scale(1.045);filter:saturate(1) brightness(.95)}
.bloco::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,20,.42) 0%,rgba(8,11,20,.05) 40%,rgba(8,11,20,.55) 100%)}
.bloco__rot{
  position:absolute;top:26px;left:26px;right:26px;z-index:2;
  display:flex;align-items:center;gap:16px;
  font-family:var(--fonte);font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--branco);
}
.bloco__rot .seta{transition:transform .4s var(--t);opacity:.75}
.bloco:hover .bloco__rot .seta{transform:translateX(8px);opacity:1;color:var(--verde)}
.est__palcos{grid-column:2;grid-row:1/3}
.est__coberturas{grid-column:3;grid-row:1}
.est__tendas{grid-column:3;grid-row:2}
.est__larga{margin-top:14px;height:clamp(140px,13vw,196px);position:relative;overflow:hidden;display:block;background:var(--preto-2);border-radius:var(--raio)}

/* ---------- projetos ---------- */
.proj__cab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.proj__cab h2{margin-top:26px}
.proj__cab .texto{max-width:40ch}
.proj__linha{display:grid;gap:14px}
.proj__linha--b{grid-template-columns:repeat(3,minmax(0,1fr))}
/* o card e um <button>: esticado pelo flex do carrossel, o UA centraliza o
   conteudo na vertical e o de metadado curto desce ~9px. Em coluna, alinha. */
.proj{position:relative;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;text-align:left;width:100%;padding:0;background:none}
.proj__foto{display:block;position:relative;overflow:hidden;border-radius:var(--raio)}
.proj__linha--b .proj__foto{aspect-ratio:4/3}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--t),filter .5s var(--t);filter:saturate(.95) brightness(.9)}
.proj:hover img{transform:scale(1.045);filter:saturate(1) brightness(1)}
.proj__info{padding:16px 2px 0;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.proj__info h3{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.proj__meta{
  display:block;margin-top:9px;font-family:var(--fonte);font-size:.66rem;
  font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--texto-fraco);
}
.claro .proj__meta{color:#8C8C82}
.proj__mais{
  font-family:var(--fonte);font-size:.66rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--verde-escuro);white-space:nowrap;padding-top:4px;
  opacity:0;transform:translateX(-6px);transition:opacity .35s var(--t),transform .35s var(--t);
}
.proj:hover .proj__mais{opacity:1;transform:none}

/* ---------- carrossel de projetos ---------- */
.carrossel{position:relative}
.carrossel__trilho{
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:2px;margin:-2px;
}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__trilho:focus-visible{outline:2px solid var(--verde-escuro);outline-offset:4px;border-radius:var(--raio)}
.carrossel__trilho .proj{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}
.carrossel__trilho .proj__foto{aspect-ratio:4/3}
.carrossel__ctrl{display:flex;align-items:center;gap:12px;margin-top:26px}
.carrossel__pontos{display:flex;align-items:center;gap:8px;margin-right:auto}
.carrossel__ponto{
  width:8px;height:8px;padding:0;border-radius:99px;background:#CFCFC6;
  transition:width .35s var(--t),background .35s var(--t);
}
.carrossel__ponto[aria-current="true"]{width:28px;background:var(--verde-escuro)}
.carrossel__seta{
  width:46px;height:46px;flex:none;border:1px solid var(--linha-clara);border-radius:50%;
  display:grid;place-items:center;font-size:1rem;color:var(--texto-escuro);
  transition:border-color .3s var(--t),color .3s var(--t),background .3s var(--t);
}
.carrossel__seta:hover{border-color:var(--verde-escuro);color:var(--verde-escuro);background:rgba(0,112,26,.06)}

/* ---------- operação ---------- */
.oper__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:14px;align-items:stretch}
.oper__texto{background:var(--preto-2);border-radius:var(--raio);padding:clamp(32px,3.6vw,60px);display:flex;flex-direction:column;justify-content:center}
.oper__texto h2{margin-top:26px}
.oper__texto .texto{margin-top:26px;max-width:38ch}
.oper__foto{position:relative;overflow:hidden;min-height:clamp(240px,25vw,380px);border-radius:var(--raio)}
.oper__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.etapas{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(32px,3.4vw,52px);border-top:1px solid var(--linha-escura)}
.etapa{padding:24px 20px 4px 0;position:relative;transition:color .3s var(--t)}
.etapa::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--verde);
  transition:width .5s var(--t);
}
.etapa:hover::before{width:100%}
.etapa b{
  display:block;font-family:var(--fonte);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;color:var(--verde);
}
.etapa span{
  display:block;margin-top:12px;font-family:var(--fonte);font-size:.76rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#9AA2B2;
  transition:color .3s var(--t);
}
.etapa:hover span{color:var(--branco)}

/* ---------- capacidade ---------- */

/* ---------- cta ---------- */
.cta{position:relative;min-height:clamp(380px,42vw,552px);display:flex;align-items:center;overflow:hidden}
.cta__fundo{position:absolute;inset:0}
.cta__fundo img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.cta__fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,20,.94) 0%,rgba(8,11,20,.72) 34%,rgba(8,11,20,.80) 62%,rgba(8,11,20,.93) 100%)}
.cta__in{position:relative;z-index:2;padding-top:clamp(44px,4.6vw,72px);padding-bottom:clamp(44px,4.6vw,72px)}
.cta h2{max-width:16ch}
.cta .texto{margin-top:28px;max-width:40ch;color:#C9CEDA}
.cta__acoes{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:44px}
.cta__zap{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--fonte);
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#C9CEDA;transition:color .3s var(--t);
}
.cta__zap:hover{color:var(--verde)}
.cta__zap svg{width:17px;height:17px;flex:none}

/* ---------- contato ---------- */
.contato{background:var(--preto)}
.contato__grade{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,4vw,80px);align-items:start;
}
.contato__lado h2{margin-top:24px}
.contato__lado .texto{margin-top:24px;max-width:36ch}
.passos{margin:clamp(28px,3vw,38px) 0 0;padding:0;list-style:none;counter-reset:p}
.passos li{
  counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:15px 0;border-top:1px solid var(--linha-escura);
  font-size:.9rem;color:var(--texto-medio);
}
.passos li::before{
  content:"0" counter(p);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  color:var(--verde);padding-top:4px;
}
.canais{margin-top:clamp(24px,2.6vw,34px);display:grid;gap:1px;background:var(--linha-escura);border:1px solid var(--linha-escura);border-radius:var(--raio-2);overflow:hidden}
.canal{display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--preto);transition:background .3s var(--t)}
.canal:hover{background:var(--preto-3)}
.canal svg{width:17px;height:17px;fill:var(--verde);flex:none}
.canal b{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-fraco)}
.canal__txt{min-width:0}
.canal i{display:block;margin-top:3px;font-size:.94rem;color:#fff;font-style:normal}
.canal .seta{margin-left:auto;color:var(--texto-fraco);transition:transform .3s var(--t),color .3s var(--t)}
.canal:hover .seta{transform:translateX(4px);color:var(--verde)}

/* ---------- cartão do formulário ---------- */
.cartao{background:var(--off);padding:clamp(22px,2.4vw,38px);border-radius:var(--raio)}
form{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 20px}
.form-tit{
  grid-column:1/-1;margin:0;display:flex;align-items:center;gap:14px;
  font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8C8C82;
}
.form-tit::after{content:"";height:1px;flex:1;background:var(--linha-clara)}
.form-tit + .campo,.form-tit + .campo + .campo{margin-top:-3px}
.form-tit ~ .form-tit{margin-top:20px}
.campo{display:flex;flex-direction:column;min-width:0}
.campo--full{grid-column:1/-1}
.campo label{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#6F6F66;margin-bottom:6px;
}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:.96rem;color:var(--texto-escuro);background:#fff;
  border:1px solid var(--linha-clara);border-radius:var(--raio-3);padding:11px 14px;width:100%;
  transition:border-color .2s var(--t),box-shadow .2s var(--t);
}
.campo select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#6F6F66 50%),linear-gradient(135deg,#6F6F66 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#BEBEB4}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde-escuro);box-shadow:0 0 0 3px rgba(0,112,26,.10);
}
.campo textarea{resize:vertical;min-height:92px;line-height:1.65}
.campo input::placeholder,.campo textarea::placeholder{color:#B4B4AA}
.campo.invalido input,.campo.invalido select{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.09)}
.campo .msg{font-size:.76rem;color:#C0392B;margin-top:7px;display:none}
.campo.invalido .msg{display:block}

.form__envio{grid-column:1/-1;margin-top:10px;padding-top:24px;border-top:1px solid var(--linha-clara)}
.form__envio .btn{width:100%;justify-content:center;padding-top:20px;padding-bottom:20px}
.form__envio .btn[disabled]{opacity:.6;pointer-events:none}
.form__envio .btn svg{width:17px;height:17px;fill:currentColor}
.form__nota{margin:14px 0 0;font-size:.8rem;color:#84847A;text-align:center;line-height:1.6}
.form__nota a{color:var(--verde-escuro);border-bottom:1px solid rgba(0,112,26,.35)}
.form__estado{margin:14px 0 0;font-size:.86rem;line-height:1.6;text-align:center;color:var(--texto-escuro-2)}
.form__estado.ok{color:var(--verde-escuro)}
.form__estado.erro{color:#C0392B}
.form__estado a{text-decoration:underline}
.girando{
  width:14px;height:14px;border:2px solid rgba(0,0,0,.22);border-top-color:#04140A;
  border-radius:50%;animation:gira .7s linear infinite;display:inline-block;vertical-align:-2px;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- rodapé ---------- */
.rodape{background:var(--preto);padding:clamp(48px,4.6vw,72px) 0 28px;border-top:1px solid var(--linha-escura)}
.rodape__grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.72fr) minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.rodape__marca img{height:52px;width:auto}
.rodape__marca p{margin-top:26px;max-width:30ch;font-size:.86rem;line-height:1.8;color:var(--texto-fraco)}
.rodape__redes{display:flex;gap:18px;margin-top:30px}
.rodape__redes a{
  width:38px;height:38px;border:1px solid var(--linha-escura);border-radius:50%;display:grid;place-items:center;
  transition:border-color .3s var(--t),background .3s var(--t);
}
.rodape__redes a:hover{border-color:var(--verde);background:rgba(0,166,46,.12)}
.rodape__redes svg{width:16px;height:16px;fill:currentColor}
.rodape h4{
  font-family:var(--fonte);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texto-fraco);margin:0 0 22px;
}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:12px}
.rodape li a,.rodape li span{font-size:.88rem;color:#B9BFCB;transition:color .3s var(--t)}
.rodape li a:hover{color:var(--verde)}
.rodape__contato li{display:flex;gap:12px;align-items:flex-start}
.rodape__contato svg{width:14px;height:14px;margin-top:5px;flex:none;fill:var(--texto-fraco)}
.rodape__duas{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.rodape__base{
  margin-top:clamp(36px,3.4vw,52px);padding-top:22px;border-top:1px solid var(--linha-escura);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.76rem;color:var(--texto-fraco);
}

/* ---------- modal de projeto ---------- */
.modal{
  position:fixed;inset:0;z-index:200;background:rgba(4,6,12,.94);
  display:flex;align-items:center;justify-content:center;padding:var(--pad);
  opacity:0;visibility:hidden;transition:opacity .3s var(--t),visibility .3s;
}
.modal.aberto{opacity:1;visibility:visible}
.modal__caixa{
  background:var(--preto-2);width:min(1180px,100%);max-height:88vh;overflow-y:auto;
  border:1px solid var(--linha-escura);border-radius:var(--raio);
}
.modal__topo{
  display:flex;justify-content:space-between;gap:24px;align-items:flex-start;
  padding:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--linha-escura);
}
.modal__topo h3{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.03em}
.modal__meta{margin-top:14px;display:flex;gap:26px;flex-wrap:wrap}
.modal__meta div b{
  display:block;font-family:var(--fonte);font-size:.62rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--texto-fraco);
}
.modal__meta div span{display:block;margin-top:6px;font-size:.9rem;color:#D7DBE4}
.modal__fechar{
  width:44px;height:44px;border:1px solid var(--linha-escura);border-radius:50%;display:grid;place-items:center;
  flex:none;transition:border-color .3s var(--t),color .3s var(--t);font-size:1.1rem;
}
.modal__fechar:hover{border-color:var(--verde);color:var(--verde)}
.modal__corpo{padding:clamp(28px,3.4vw,44px)}
.modal__corpo>p{margin:0 0 30px;font-size:.94rem;line-height:1.8;color:var(--texto-medio);max-width:64ch}
.modal__fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.modal__fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio-2)}

/* ---------- páginas internas ---------- */
.interna{padding:calc(84px + clamp(48px,6vw,96px)) 0 clamp(40px,5vw,72px)}
.migalha{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:34px;
  font-family:var(--fonte);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-fraco);
}
.migalha a:hover{color:var(--verde)}
.interna h1{max-width:16ch}
.interna .texto{margin-top:30px;max-width:52ch;font-size:1rem}
.interna__acoes{display:flex;gap:18px;flex-wrap:wrap;margin-top:44px}
.foto-cheia{position:relative;height:clamp(280px,44vw,560px);overflow:hidden}
.foto-cheia img{width:100%;height:100%;object-fit:cover}
.foto-cheia figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,34px) var(--pad);
  background:linear-gradient(180deg,transparent,rgba(8,11,20,.9));
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
}
.foto-cheia b{font-family:var(--fonte);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.foto-cheia span{font-size:.84rem;color:var(--texto-medio)}
.duas-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px)}
.itens{list-style:none;margin:34px 0 0;padding:0}
.itens li{padding:26px 0;border-top:1px solid var(--linha-escura)}
.claro .itens li{border-top-color:var(--linha-clara)}
.itens b{display:block;font-family:var(--fonte);font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.itens p{margin:10px 0 0;font-size:.9rem;line-height:1.75;color:var(--texto-medio)}
.claro .itens p{color:var(--texto-escuro-2)}
.itens--simples li{padding:17px 0;display:flex;gap:16px;align-items:baseline}
.itens--simples li::before{content:"";width:5px;height:5px;background:var(--verde);flex:none}
.nota{border-left:2px solid var(--verde);padding:24px 0 24px 26px;margin-top:44px}
.nota b{display:block;font-family:var(--fonte);font-size:.95rem;font-weight:600;margin-bottom:10px}
.nota p{margin:0;font-size:.9rem;line-height:1.75;color:var(--texto-medio)}
.claro .nota p{color:var(--texto-escuro-2)}
.outras{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(32px,4vw,52px)}
.outra{border:1px solid var(--linha-escura);border-radius:var(--raio-2);padding:26px;transition:border-color .3s var(--t),background .3s var(--t)}
.outra:hover{border-color:var(--verde)}
.outra b{display:block;font-family:var(--fonte);font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.outra span{display:block;margin-top:10px;font-size:.8rem;color:var(--texto-fraco)}

/* ---------- animação de entrada ---------- */
/* o conteúdo NUNCA depende de JS para aparecer: só esconde se a classe .js
   estiver no <html>, e mesmo assim há um timeout de segurança no script */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--t),transform .9s var(--t)}
.js .reveal.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsivo ---------- */
@media(max-width:1180px){
  .est__grade{grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(2,clamp(150px,18vw,240px))}
  .est__texto{grid-column:1/3;grid-row:1;padding-right:0}
  .est__palcos{grid-column:1;grid-row:2/4}
  .est__coberturas{grid-column:2;grid-row:2}
  .est__tendas{grid-column:2;grid-row:3}
  .carrossel__trilho .proj{flex-basis:calc((100% - 14px)/2)}
      .rodape__grade{grid-template-columns:1fr 1fr;gap:48px}
  .outras{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .menu,.cabecalho .btn{display:none}
  .hamburguer{display:block}
  .oper__grade,.contato__grade,.proj__cab,.duas-col{grid-template-columns:1fr}
  .oper__texto{padding:clamp(32px,6vw,56px) 0}
  .oper__foto{min-height:56vw;margin-top:8px}
  .proj__linha--b{grid-template-columns:1fr 1fr}
  .etapas{grid-template-columns:1fr;border-top:0}
  .etapa{border-top:1px solid var(--linha-escura);padding:20px 0}
  .etapa::before{display:none}
  form{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--secao:72px}
  .est__grade{grid-template-columns:1fr;grid-template-rows:auto}
  .est__texto{grid-column:1;grid-row:auto}
  .est__palcos,.est__coberturas,.est__tendas{grid-column:1;grid-row:auto;min-height:52vw}
  .carrossel__trilho .proj{flex-basis:86%}
  .proj__linha--b{grid-template-columns:1fr}
  .rodape__grade{grid-template-columns:1fr}
  .rodape__duas{grid-template-columns:1fr 1fr}
  .outras{grid-template-columns:1fr}
  .hero__in{padding-top:130px}
  .hero__acoes .btn{flex:1 1 100%;justify-content:center}
  .cta__acoes .btn{flex:1 1 100%;justify-content:center}
  .modal__caixa{max-height:92vh}
}

/* ======================================================================
   v3.6 — direcao da referencia de 26/08: hero com a foto ocupando a
   direita, faixa de servicos, carrossel de evento com veu, sobre em
   painel ao lado de foto sangrada.
   A COR NAO MUDOU: o acento continua o verde da identidade (#00A62E) e o
   ouro entra so no traco, como manda o design-guide.
   ====================================================================== */

/* ---------- rotulo com pontos: Estrutura . Montagem . Operacao ---------- */
.rotulo--pontos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 clamp(18px,2.4vw,28px)}
.rotulo--pontos span{display:inline-flex;align-items:center;gap:14px}
.rotulo--pontos span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ouro);flex:none}

/* ---------- hero: texto a esquerda, foto ocupando a direita ---------- */
.hero__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:62% center}
/* escurece a esquerda para o texto ficar legivel e solta a direita, que e
   onde esta o assunto da foto. Faixa de ponta a ponta: segue reta, sem raio. */
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,11,20,.88) 0%,rgba(8,11,20,.30) 16%,rgba(8,11,20,0) 34%,rgba(8,11,20,.34) 78%,rgba(8,11,20,.90) 100%),
    linear-gradient(100deg,var(--preto) 0%,rgba(8,11,20,.92) 26%,rgba(8,11,20,.60) 52%,rgba(8,11,20,.26) 78%,rgba(8,11,20,.42) 100%);
}
.display em{font-style:normal;color:rgba(244,244,241,.58);display:block}
.hero h1{max-width:18ch}

/* ---------- o que fazemos ---------- */
.fazemos__grade{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,2fr);gap:clamp(32px,5vw,86px);align-items:start}
.fazemos__cab .titulo{margin-top:22px}
.fazemos__risco{display:block;width:56px;height:2px;background:var(--verde);margin-top:clamp(22px,3vw,34px)}
.fazemos__itens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,38px)}
.fazemos__item{border-left:1px solid var(--linha-clara);padding-left:clamp(16px,1.8vw,26px)}
.fazemos__itens .fazemos__item:first-child{border-left:0;padding-left:0}
.fazemos__icone{width:38px;height:38px;color:var(--verde-escuro);display:block;margin-bottom:20px}
.fazemos__item h3{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-escuro);margin-bottom:12px;line-height:1.4;
}
.fazemos__item p{margin:0;font-size:.87rem;line-height:1.7;color:var(--texto-escuro-2)}

/* ---------- carrossel de evento ---------- */
.eventos__cab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.eventos__cab .titulo{margin-top:26px}
.eventos__cab .texto{max-width:40ch}
.evento{
  position:relative;display:block;overflow:hidden;text-align:left;width:100%;
  padding:0;background:var(--preto-2);border-radius:var(--raio);aspect-ratio:3/4;
}
.evento__foto{position:absolute;inset:0;display:block}
.evento__foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) brightness(.86);transition:transform 1.1s var(--t),filter .5s var(--t);
}
.evento:hover .evento__foto img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.evento__veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,20,.10) 0%,rgba(8,11,20,0) 34%,rgba(8,11,20,.72) 74%,rgba(8,11,20,.94) 100%);
}
.evento__txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.2vw,28px);display:block;z-index:2}
.evento__tag{
  display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:var(--raio-3);
  background:var(--verde);color:#04140A;
  font-size:.6rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
}
.evento__nome{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--branco)}
.evento__meta{
  display:block;margin-top:8px;font-size:.64rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto-medio);
}
.evento__mais{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--verde);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--t),transform .35s var(--t);
}
.evento:hover .evento__mais,.evento:focus-visible .evento__mais{opacity:1;transform:none}
.carrossel__trilho .evento{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}

/* ---------- sobre a VBE: foto sangrada + painel ---------- */
.sobre{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:stretch;background:var(--off)}
.sobre__foto{position:relative;overflow:hidden;min-height:clamp(280px,30vw,440px)}
.sobre__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sobre__painel{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(30px,4vw,72px);align-items:center;
  padding:clamp(44px,5vw,84px) var(--pad) clamp(44px,5vw,84px) clamp(36px,4.4vw,76px);
}
.sobre__texto .titulo{margin-top:22px;font-size:clamp(1.5rem,2.5vw,2.05rem)}
.sobre__texto .texto{margin-top:24px;max-width:46ch;color:var(--texto-escuro-2)}
.sobre__texto .link-tec{margin-top:30px}
.sobre__num{margin:0 0 26px;display:flex;align-items:baseline;gap:16px}
.sobre__num b{
  font-size:clamp(2.6rem,4.4vw,3.7rem);font-weight:900;line-height:.9;
  letter-spacing:-.03em;color:var(--texto-escuro);
}
.sobre__num em{font-style:normal;font-size:.8rem;line-height:1.55;color:var(--texto-escuro-2);max-width:22ch}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha-clara)}
.checks li{
  display:flex;align-items:center;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--linha-clara);
  font-size:.9rem;color:var(--texto-escuro);
}
.checks li::before{
  content:"";flex:none;width:17px;height:17px;border-radius:50%;
  border:1.5px solid var(--verde-escuro);
  background:no-repeat center/9px 9px url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.2 10.5 2.8' fill='none' stroke='%2300701A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- cta: titulo a esquerda, chamada a direita ---------- */
.cta__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:center}
.cta__lado{border-left:1px solid rgba(255,255,255,.22);padding-left:clamp(24px,3vw,48px)}
.cta__lado .texto{max-width:38ch;margin-top:0;color:#DDE2EC}
.cta__acoes{margin-top:clamp(24px,3vw,36px)}
.cta__zap span{display:flex;flex-direction:column;gap:3px;text-align:left}
.cta__zap i{font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-medio)}
.cta__zap b{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--branco)}

/* ---------- responsivo das secoes novas ---------- */
@media(max-width:1180px){
  .fazemos__grade{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .fazemos__itens{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,34px)}
  .fazemos__itens .fazemos__item:nth-child(3){border-left:0;padding-left:0}
  .carrossel__trilho .evento{flex-basis:calc((100% - 14px)/2)}
  .sobre__painel{grid-template-columns:1fr;gap:34px}
}
@media(max-width:960px){
  .hero__foto img{object-position:70% center}
  .hero__foto::after{background:linear-gradient(178deg,rgba(8,11,20,.60) 0%,rgba(8,11,20,.80) 46%,var(--preto) 100%)}
  .sobre{grid-template-columns:1fr}
  .sobre__foto{min-height:56vw;order:-1}
  .sobre__painel{padding:clamp(40px,6vw,60px) var(--pad)}
  .cta__in{grid-template-columns:1fr;gap:30px}
  .cta__lado{border-left:0;border-top:1px solid rgba(255,255,255,.22);padding-left:0;padding-top:28px}
}
@media(max-width:640px){
  .fazemos__itens{grid-template-columns:1fr;gap:0}
  .fazemos__item{border-left:0;padding-left:0;border-top:1px solid var(--linha-clara);padding-top:26px;margin-top:26px}
  .fazemos__itens .fazemos__item:first-child{border-top:0;padding-top:0;margin-top:0}
  .fazemos__icone{margin-bottom:14px}
  .carrossel__trilho .evento{flex-basis:82%}
  .eventos__cab{grid-template-columns:1fr;gap:20px}
  .evento{aspect-ratio:4/5}
}

/* ======================================================================
   v3.7 — a FORMA veio da referencia Landeros (26/08): header em pilula
   flutuante, rotulo em pill, titulo grande e leve centrado, lista+preview,
   esteira de pills. A MATERIA continua da VBE: base escura, verde de acento,
   ouro no traco, foto real, Satoshi.
   ====================================================================== */

/* ---------- header em pilula flutuante ---------- */
.cabecalho{padding:18px 0;border-bottom:0}
.cabecalho.solido{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.cabecalho__in{
  width:auto;max-width:none;margin:0 auto;
  display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);height:auto;
  padding:9px 9px 9px clamp(18px,2vw,26px);
  background:rgba(12,17,28,.72);backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.10);border-radius:999px;
  width:fit-content;
  transition:background .4s var(--t),border-color .4s var(--t);
}
.cabecalho.solido .cabecalho__in{background:rgba(12,17,28,.92);border-color:rgba(255,255,255,.16)}
.cabecalho__in .marca{display:flex;align-items:center;padding-right:clamp(14px,1.6vw,22px);border-right:1px solid rgba(255,255,255,.12)}
.marca img{height:34px}
.cabecalho.solido .marca img{height:34px}
.menu{margin-left:0;gap:clamp(18px,2vw,30px)}
.menu a{font-size:.7rem;letter-spacing:.14em;padding:4px 0}
.cabecalho .btn{padding:11px 20px;font-size:.66rem;border-radius:999px}

/* ---------- rotulo em pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  font-family:var(--fonte);font-size:.63rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:#D7DBE4;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verde);flex:none}
.claro .pill{border-color:var(--linha-clara);background:#fff;color:var(--texto-escuro-2)}
.claro .pill::before{background:var(--verde-escuro)}

/* ---------- hero centrado, titulo leve ---------- */
.hero--centro .hero__in{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero--centro .display{
  font-weight:500;letter-spacing:-.032em;text-transform:none;
  font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.02;max-width:17ch;
}
.hero--centro .display em{color:rgba(244,244,241,.52)}
.hero--centro .hero__texto{margin-left:auto;margin-right:auto;max-width:52ch;text-align:center}
.hero--centro .hero__acoes{justify-content:center}
.hero--centro .pill{margin-bottom:clamp(20px,2.6vw,30px)}

/* ---------- esteira de pills (marquee) ---------- */
.esteira{position:relative;overflow:hidden;padding:clamp(22px,2.6vw,34px) 0;border-block:1px solid var(--linha-escura)}
.claro .esteira{border-block-color:var(--linha-clara)}
.esteira::before,.esteira::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(60px,10vw,160px);z-index:2;pointer-events:none;
}
.esteira::before{left:0;background:linear-gradient(90deg,var(--preto),transparent)}
.esteira::after{right:0;background:linear-gradient(270deg,var(--preto),transparent)}
.claro .esteira::before{background:linear-gradient(90deg,var(--off),transparent)}
.claro .esteira::after{background:linear-gradient(270deg,var(--off),transparent)}
.esteira__trilho{display:flex;width:max-content;gap:12px;animation:correr var(--tempo,46s) linear infinite}
.esteira:hover .esteira__trilho{animation-play-state:paused}
/* anda a largura de UM conjunto, medida pelo JS. -50% assumia duas copias e
   deixava buraco quando a fita era mais estreita que a tela. */
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(calc(var(--anda,50%) * -1))}}
.esteira__item{
  display:inline-flex;align-items:center;gap:11px;flex:none;
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--linha-escura);background:var(--preto-2);
  font-family:var(--fonte);font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:#D7DBE4;white-space:nowrap;
}
.esteira__item svg{width:15px;height:15px;color:var(--verde);flex:none}
.claro .esteira__item{border-color:var(--linha-clara);background:#fff;color:var(--texto-escuro-2)}
.claro .esteira__item svg{color:var(--verde-escuro)}

/* ---------- lista + preview (o padrao de projetos da referencia) ---------- */
.famil__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(30px,4vw,72px);align-items:center}
.famil__cab .titulo{margin-top:22px}
.famil__cab .texto{margin-top:22px;max-width:44ch}
.famil__lista{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0}
.famil__lista li+li{border-top:1px solid var(--linha-escura)}
.claro .famil__lista li+li{border-top-color:var(--linha-clara)}
.famil__lin{
  display:flex;align-items:center;gap:18px;width:100%;
  padding:16px 18px;border-radius:var(--raio-2);
  text-align:left;background:transparent;
  transition:background .3s var(--t),padding .3s var(--t);
}
.famil__lin b{
  flex:1;font-size:1rem;font-weight:600;letter-spacing:-.015em;
  color:var(--texto-medio);transition:color .3s var(--t);
}
.famil__lin i{
  font-style:normal;font-size:.63rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-fraco);transition:color .3s var(--t);
}
.famil__lin .seta{opacity:0;transform:translateX(-8px);color:var(--verde);transition:opacity .3s var(--t),transform .3s var(--t)}
.famil__lin:hover,.famil__lin:focus-visible,.famil__lin[aria-current="true"]{background:var(--preto-2)}
.famil__lin:hover b,.famil__lin[aria-current="true"] b{color:var(--branco)}
.famil__lin[aria-current="true"] i{color:var(--verde)}
.famil__lin[aria-current="true"] .seta{opacity:1;transform:none}
.claro .famil__lin:hover,.claro .famil__lin[aria-current="true"]{background:#fff}
.claro .famil__lin b{color:var(--texto-escuro-2)}
.claro .famil__lin:hover b,.claro .famil__lin[aria-current="true"] b{color:var(--texto-escuro)}
.claro .famil__lin[aria-current="true"] i{color:var(--verde-escuro)}
.claro .famil__lin[aria-current="true"] .seta{color:var(--verde-escuro)}

.famil__mostra{position:relative;border-radius:var(--raio);overflow:hidden;aspect-ratio:4/3;background:var(--preto-2)}
.famil__quadro{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--t)}
.famil__quadro[data-ativo="1"]{opacity:1}
.famil__quadro img{width:100%;height:100%;object-fit:cover}
.famil__quadro::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,20,0) 44%,rgba(8,11,20,.86) 100%);
}
.famil__leg{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.4vw,30px);
}
.famil__leg b{display:block;font-size:1.16rem;font-weight:700;letter-spacing:-.02em;color:var(--branco)}
.famil__leg span{
  display:block;margin-top:8px;font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-medio);
}

/* ---------- responsivo ---------- */
@media(max-width:1180px){
  .famil__grade{grid-template-columns:1fr;gap:32px}
  .famil__mostra{order:-1}
}
@media(max-width:960px){
  .cabecalho__in{width:auto;padding:8px 8px 8px 16px}
  .cabecalho__in .marca{border-right:0;padding-right:0}
  .hero--centro .display{font-size:clamp(2rem,7.4vw,2.9rem);max-width:14ch}
}
@media(max-width:640px){
  .cabecalho{padding:12px 0}
  .esteira__trilho{animation-duration:calc(var(--tempo,34s) * .74)}
  .famil__lin{padding:14px 12px}
}
@media(prefers-reduced-motion:reduce){
  .esteira__trilho{animation:none}
}

/* veu proprio do hero centrado: simetrico, porque o texto cruza o meio da foto */
.hero--centro .hero__foto::after{
  background:
    radial-gradient(78% 62% at 50% 46%,rgba(8,11,20,.80) 0%,rgba(8,11,20,.52) 46%,rgba(8,11,20,.16) 78%),
    linear-gradient(180deg,rgba(8,11,20,.90) 0%,rgba(8,11,20,.34) 18%,rgba(8,11,20,.30) 62%,rgba(8,11,20,.92) 100%);
}
.hero--centro .hero__foto img{object-position:center 44%}
/* a segunda linha precisa de mais corpo sobre foto do que sobre chapado */
.hero--centro .display em{color:rgba(255,255,255,.74)}

/* ======================================================================
   v4.7 — menu do celular e barra do topo (15/10/2026). O menu aberto usava
   letra de titulo (29px, peso 800) e parecia cartaz: virou lista de menu, no
   mesmo idioma do menu do desktop (caixa alta pequena e espacada, seta verde),
   com o pedido de orcamento em botao no pe. E a barra em pilula encostava nas
   bordas da tela abaixo de 960px, com os cantos redondos cortados.
   ====================================================================== */
@media(max-width:960px){
  .cabecalho__in{margin:0 clamp(10px,3vw,20px)}
}
.gaveta{
  justify-content:flex-start;overflow-y:auto;
  padding:calc(108px + env(safe-area-inset-top)) clamp(22px,6vw,36px) calc(28px + env(safe-area-inset-bottom));
}
.gaveta a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:.92rem;font-weight:700;letter-spacing:.16em;
  padding:21px 2px;
}
.gaveta a:first-child{border-top:1px solid var(--linha-escura)}
.gaveta a::after{content:"→";font-size:1rem;letter-spacing:0;color:var(--verde);transition:transform .3s var(--t)}
.gaveta a:hover::after{transform:translateX(5px)}
.gaveta a:last-child{
  margin-top:auto;justify-content:center;
  padding:19px 24px;border:1px solid var(--verde);border-radius:999px;
  background:var(--verde);color:#04140A;
  font-size:.72rem;letter-spacing:.16em;
}
.gaveta a:last-child::after{content:none}