/* ============================================================
   Header + Hero premium — conforme referência aprovada
   ============================================================ */

:root{
  --navy:#06233A;
  --azul:#075F99;
  --teal:#0B7F7A;
  --mint:#7BC9B8;
  --tinta-h:#0A1F2E;
  --texto-h:#51606D;
  --linha-h:#DCE5E8;
  --sup:#FFFFFF;
  --sup-suave:#F7FAF9;
  --r-hero:42px;
  --r-card:18px;
  --sombra-suave:0 18px 50px rgba(8,39,55,.10);
  --cont:min(1536px,94vw);
  --ease:cubic-bezier(.22,.8,.22,1);
}

/* ---------------- header claro ---------------- */
.topo-claro{
  position:sticky;top:0;z-index:80;background:var(--sup);
  border-bottom:1px solid var(--linha-h);
}
.topo-claro .env-h{
  width:var(--cont);margin-inline:auto;display:flex;align-items:center;gap:1.5rem;
  min-height:96px;
}
.topo-claro .marca-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.topo-claro .marca-logo img{height:44px;width:auto;display:block}
.nav-h{display:flex;gap:2.1rem;list-style:none;padding:0;margin:0 auto;align-items:center}
.nav-h a{
  color:var(--tinta-h);text-decoration:none;font-size:.98rem;font-weight:500;
  padding:.4rem 0;border-bottom:2px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.nav-h a:hover,.nav-h a[aria-current=page]{color:var(--teal);border-bottom-color:var(--teal)}
.cta-zap{
  display:inline-flex;align-items:center;gap:.55rem;background:var(--teal);color:#fff;
  padding:.9rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.96rem;
  min-height:52px;flex:none;transition:background .18s var(--ease),transform .18s var(--ease);
}
.cta-zap:hover{background:#096B67;transform:translateY(-1px)}
.cta-zap .ic{width:19px;height:19px}
.menu-h{
  display:none;margin-left:auto;background:none;border:1px solid var(--linha-h);
  color:var(--tinta-h);border-radius:8px;padding:.6rem .8rem;cursor:pointer;
  font-family:inherit;font-size:.9rem;
}
.gaveta-h{display:none;background:var(--sup);border-bottom:1px solid var(--linha-h)}
.gaveta-h.on{display:block}
.gaveta-h ul{list-style:none;padding:.5rem 0;margin:0;width:var(--cont);margin-inline:auto}
.gaveta-h a{display:block;padding:.9rem 0;color:var(--tinta-h);text-decoration:none;border-bottom:1px solid var(--linha-h);font-weight:500}
@media (max-width:1180px){
  .nav-h{display:none}
  .menu-h{display:block}
  .topo-claro .env-h{min-height:76px;gap:.9rem}
  .topo-claro .marca-logo img{height:36px}
  .cta-zap{padding:.75rem 1.1rem;min-height:46px;font-size:.9rem}
}
@media (max-width:560px){
  .cta-zap span{display:none}
  .cta-zap{padding:.75rem .9rem;border-radius:12px}
  .topo-claro .marca-logo img{height:31px}
}

/* ---------------- hero clara ---------------- */
.hero-p{background:var(--sup-suave);padding:clamp(2rem,3.4vw,3.2rem) 0 0;overflow:hidden}
.hero-p .env-h{width:var(--cont);margin-inline:auto}
.hero-grade{display:grid;gap:clamp(2rem,3.5vw,3.4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:1080px){.hero-grade{grid-template-columns:43fr 57fr}}

.hero-olho{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-family:var(--dado);font-size:.79rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal);
}
.hero-olho i{font-style:normal;color:var(--mint)}
.hero-p h1{
  font-family:var(--titulo);font-weight:700;color:var(--tinta-h);
  font-size:clamp(2.4rem,1.5rem+3.1vw,3.85rem);line-height:1.06;letter-spacing:-.032em;
  margin:1.35rem 0 0;max-width:14ch;
}
.hero-p h1 .pt{color:var(--teal)}
.hero-p .apoio{
  color:var(--texto-h);margin-top:1.35rem;font-size:clamp(1rem,.96rem+.2vw,1.09rem);
  line-height:1.62;max-width:46ch;
}
.hero-acoes{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.1rem}
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:56px;padding:.9rem 1.7rem;border-radius:10px;text-decoration:none;
  font-family:var(--corpo);font-weight:600;font-size:1rem;border:1.5px solid transparent;
  cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.bt .ic{width:20px;height:20px;transition:transform .2s var(--ease)}
.bt-1{background:var(--teal);color:#fff;box-shadow:0 1px 2px rgba(8,39,55,.1)}
.bt-1:hover{background:#096B67;transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(11,127,122,.55)}
.bt-1:hover .ic{transform:translateX(4px)}
.bt-2{background:var(--sup);border-color:var(--teal);color:var(--teal)}
.bt-2:hover{background:rgba(11,127,122,.05);transform:translateY(-2px)}

/* ---------------- indicadores ---------------- */
.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.5rem}
.prova{display:flex;align-items:flex-start;gap:.55rem;padding:0 clamp(.6rem,1.3vw,1.6rem);min-width:0}
.prova:first-child{padding-left:0}
.prova:last-child{padding-right:0}
.prova+.prova{border-left:1px solid var(--linha-h)}
.prova .ic{width:23px;height:23px;color:var(--teal);opacity:.75;margin-top:.28rem;flex:none}
.prova b{
  display:block;font-family:var(--titulo);font-weight:700;color:var(--teal);
  font-size:clamp(1.65rem,1.3rem+.6vw,2rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.prova span{display:block;color:var(--texto-h);font-size:.85rem;line-height:1.4;margin-top:.4rem;
  hyphens:manual;text-wrap:pretty}
@media (max-width:560px){
  .provas{grid-template-columns:1fr;gap:1.05rem}
  .prova{padding:0}
  .prova+.prova{border-left:none;border-top:1px solid var(--linha-h);padding-top:1.05rem}
}

/* ---------------- painel do showroom ---------------- */
.painel{
  position:relative;border:1.5px solid var(--teal);overflow:hidden;background:var(--sup);
  border-radius:var(--r-hero) var(--r-card) var(--r-hero) var(--r-card);
  aspect-ratio:16/11;box-shadow:var(--sombra-suave);
}
.painel img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;
  will-change:transform}
.selo-local{
  position:absolute;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);
  display:inline-flex;align-items:center;gap:.6rem;background:var(--sup);
  padding:.72rem 1.15rem;border-radius:999px;box-shadow:0 6px 22px rgba(8,39,55,.18);
  font-size:.92rem;color:var(--tinta-h);max-width:calc(100% - 2rem);
}
.selo-local .ic{width:18px;height:18px;color:var(--teal);flex:none}
.selo-local b{font-weight:600}
.selo-local i{font-style:normal;color:var(--mint);margin:0 .1rem}
.selo-local span{color:var(--texto-h)}
@media (max-width:520px){
  .selo-local{padding:.6rem .85rem;font-size:.82rem;gap:.45rem}
  .painel{border-radius:26px 12px 26px 12px;aspect-ratio:4/3}
}

/* ---------------- faixa de fabricantes ---------------- */
.fabricantes{
  width:var(--cont);margin:clamp(2rem,3.4vw,3rem) auto 0;background:var(--sup);
  border:1px solid var(--linha-h);border-radius:var(--r-card);box-shadow:var(--sombra-suave);
  padding:clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2.4vw,2.4rem);
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;
}
.fabricantes::-webkit-scrollbar{display:none}
.fab-rot{
  font-family:var(--dado);font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-h);line-height:1.5;flex:none;padding-right:2.2rem;
  max-width:13ch;
}
.fab{
  flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;padding:.2rem 2.2rem;text-decoration:none;min-width:max-content;
  transition:opacity .2s var(--ease);
}
.fab+.fab,.fab-rot+.fab{border-left:1px solid var(--linha-h)}
.fab b{
  font-family:var(--titulo);font-size:1.42rem;font-weight:700;letter-spacing:-.028em;
  color:var(--navy);line-height:1.05;
}
.fab span{font-size:.74rem;color:var(--texto-h);letter-spacing:.01em}
.fab:hover{opacity:.72}
@media (max-width:900px){
  .fabricantes{padding:1.1rem 1.2rem}
  .fab-rot{padding-right:1.4rem;font-size:.68rem}
  .fab{padding:.2rem 1.3rem}
  .fab b{font-size:1.18rem}
}

.hero-p .respiro{height:clamp(2.2rem,4vw,3.6rem)}

/* ---------------- rodapé: logo em placa clara ---------------- */
.placa-logo{
  display:inline-flex;background:#fff;padding:.7rem .95rem;border-radius:10px;
  margin-bottom:1.1rem;
}
.placa-logo img{height:34px;width:auto;display:block}

/* ============================================================
   Animação de entrada — discreta e institucional
   ============================================================ */
.an{opacity:0}
.js-on .an{opacity:0;transform:translateY(var(--dy,10px))}
.js-on .an.vis{
  opacity:1;transform:none;
  transition:opacity .58s var(--ease) var(--atraso,0ms),
             transform .58s var(--ease) var(--atraso,0ms);
}
.js-on .an-painel{opacity:0;transform:scale(.985)}
.js-on .an-painel.vis{
  opacity:1;transform:none;
  transition:opacity .72s var(--ease) .34s, transform .72s var(--ease) .34s;
}
.js-on .an-selo{opacity:0;transform:translateY(10px)}
.js-on .an-selo.vis{opacity:1;transform:none;transition:opacity .45s var(--ease) 1s,transform .45s var(--ease) 1s}

/* sem JS, tudo visível */
.an{opacity:1}
.js-on .an:not(.vis){opacity:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js-on .an,.js-on .an-painel,.js-on .an-selo{opacity:1 !important;transform:none !important}
}

/* logos reais dos fabricantes na faixa */
.fab img{
  height:46px;width:auto;max-width:172px;object-fit:contain;display:block;
  transition:opacity .2s var(--ease);
}
.fab{padding:.2rem 2.4rem}
.fab:hover img{opacity:.72}
@media (max-width:900px){
  .fab{padding:.2rem 1.4rem}
  .fab img{height:36px;max-width:130px}
}

/* assinatura institucional do fabricante na página da marca */
.slogan-marca{
  font-family:var(--titulo);font-size:clamp(1.05rem,.95rem+.5vw,1.3rem);font-weight:600;
  color:var(--marca-clara);letter-spacing:-.015em;margin-top:1rem;max-width:34ch;line-height:1.35;
}

/* ---------------- News ---------------- */
.posts{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.post{background:var(--sup);border:1px solid var(--linha-h);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.post-capa{display:block;aspect-ratio:3/2;background:var(--sup-suave);overflow:hidden}
.post-capa img{width:100%;height:100%;object-fit:cover}
.post-txt{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-meta{font-family:var(--dado);font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-h);display:flex;gap:.5rem;align-items:center}
.post-meta i{font-style:normal;color:var(--mint)}
.post h3{font-size:1.1rem;line-height:1.3}
.post h3 a{color:var(--tinta-h);text-decoration:none}
.post h3 a:hover{color:var(--teal)}
.post p{color:var(--texto-h);font-size:.92rem}
.post .link{margin-top:auto;padding-top:.7rem}
.post-hero{margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--linha-h)}
.post-hero img{width:100%;height:auto;display:block}