* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FAF7F4; font-family: 'Work Sans', sans-serif; }
a { text-decoration: none; }
a:hover { opacity: 0.72; cursor: pointer; }
a:focus-visible { outline: 2px solid #D6271E; outline-offset: 3px; }
.prod-card:hover .prod-photo { transform: scale(1.02); }
.rel-card { transition: transform .24s ease; }
.rel-card:hover { transform: translateY(-3px); opacity: 1; }
.rel-card:hover img { transform: scale(1.03); }
.rel-card img { transition: transform .24s ease; }
@media (prefers-reduced-motion: no-preference) {
  .page { animation: fadein .25s ease; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   CAMADA RESPONSIVA
   As páginas foram desenhadas com estilo inline em 1440px. Em vez de
   reescrever as 52, esta camada intercepta os padrões recorrentes por
   seletor de atributo. O !important existe porque estilo inline vence
   classe — é a única forma de sobrepor sem editar arquivo por arquivo.
   ============================================================ */

/* ---- até 1180px: aperta as margens laterais ---- */
@media (max-width: 1180px) {
  [style*="px 96px"] { padding-left: 56px !important; padding-right: 56px !important; }
}

/* ---- até 980px: colunas viram pilha; respiro vertical diminui ---- */
@media (max-width: 980px) {
  [style*="px 96px"] { padding-left: 34px !important; padding-right: 34px !important; }

  /* qualquer grade de duas ou mais colunas empilha... */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* ...menos as grades densas de catálogo, que ainda cabem em duas */
  [style*="repeat(3, minmax"], [style*="repeat(4, minmax"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* cards com posição fixa na grade não podem exigir uma coluna que não existe mais */
  [style*="grid-column:1"], [style*="grid-column:2"],
  [style*="grid-row: 1 / span 2"], [style*="grid-row:1"], [style*="grid-row:2"] {
    grid-column: auto !important; grid-row: auto !important;
  }

  /* respiro vertical das seções */
  [style*="padding:130px 96px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding:120px 96px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding:110px 96px"] { padding-top: 58px !important; padding-bottom: 58px !important; }
  [style*="padding:96px 96px 96px 80px"],
  [style*="padding:96px 80px 96px 96px"] { padding: 56px 34px !important; }
  [style*="padding:64px 96px 36px 96px"] { padding-top: 52px !important; }
  [style*="padding:56px 96px 72px 96px"] { padding-top: 44px !important; padding-bottom: 52px !important; }
  [style*="padding:32px 96px 64px 96px"],
  [style*="padding:32px 96px 72px 96px"] { padding-bottom: 48px !important; }

  /* painéis e vitrines altas encolhem */
  [style*="min-height:620px"] { min-height: 0 !important; }
  [style*="min-height:560px"] { min-height: 340px !important; }
  [style*="min-height:380px"] { min-height: 260px !important; }
  [style*="height:520px"] { height: 340px !important; }
  [style*="height:480px"] { height: 320px !important; }
  [style*="height:340px"] { height: 240px !important; }
  [style*="height:280px"] { height: 220px !important; }
  [style*="height:240px"] { height: 200px !important; }
  [style*="height:220px"] { height: 190px !important; }
  [style*="height:210px"] { height: 180px !important; }

  /* escala tipográfica */
  [style*="font-size:76px"], [style*="font-size:72px"] { font-size: 46px !important; }
  [style*="font-size:64px"] { font-size: 42px !important; }
  [style*="font-size:52px"] { font-size: 36px !important; }
  [style*="font-size:46px"], [style*="font-size:44px"] { font-size: 32px !important; }
  [style*="font-size:42px"] { font-size: 31px !important; }
  [style*="font-size:40px"] { font-size: 29px !important; }
  [style*="font-size:34px"] { font-size: 26px !important; }
  [style*="font-size:30px"] { font-size: 24px !important; }
  [style*="font-size:27px"], [style*="font-size:26px"] { font-size: 22px !important; }
  [style*="font-size:25px"] { font-size: 21px !important; }
}

/* ---- até 760px: barra de navegação reorganiza ---- */
@media (max-width: 760px) {
  /* home: marca centralizada acima, links numa linha que quebra */
  [style*="grid-template-columns:1fr auto 1fr"] {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; gap: 16px 22px !important;
  }
  [style*="grid-template-columns:1fr auto 1fr"] > :nth-child(2) {
    order: -1 !important; flex-basis: 100% !important; justify-content: center !important;
  }
  [style*="grid-template-columns:1fr auto 1fr"] > :nth-child(3) { justify-content: center !important; }

  /* páginas internas: marca acima, links abaixo */
  [style*="space-between; padding:26px 96px"] {
    flex-direction: column !important; gap: 15px !important;
  }
  /* links da barra encostam mais em telas estreitas */
  [style*="padding:26px 96px"] [style*="gap:40px"] { gap: 20px !important; flex-wrap: wrap !important; justify-content: center !important; }

  /* números do hero e listas lado a lado ganham quebra */
  [style*="gap:44px; margin-top:58px"] { gap: 24px !important; flex-wrap: wrap !important; }
  [style*="gap:64px"] { gap: 34px !important; }
}

/* ---- até 560px: uma coluna em tudo, margens mínimas ---- */
@media (max-width: 560px) {
  [style*="px 96px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="repeat(3, minmax"], [style*="repeat(4, minmax"],
  [style*="repeat(2, minmax"] { grid-template-columns: 1fr !important; }
  [style*="padding:96px 96px 96px 80px"],
  [style*="padding:96px 80px 96px 96px"] { padding: 48px 20px !important; }
  [style*="padding:36px 40px 40px 40px"] { padding: 26px 22px 30px 22px !important; }
  [style*="padding:30px 34px 34px 34px"] { padding: 24px 22px 28px 22px !important; }

  /* cartões que eram foto-ao-lado-do-texto empilham */
  [style*="width:44%"], [style*="width:38%"] { width: 100% !important; border-right: 0 !important; }
  [style*="width:44%"] ~ *, [style*="width:38%"] ~ * { width: 100% !important; }
  [style*="display:flex; background:#FFFFFF; border:1px solid #E3DBD3"] { flex-direction: column !important; }

  [style*="font-size:76px"], [style*="font-size:72px"] { font-size: 38px !important; }
  [style*="font-size:64px"] { font-size: 34px !important; }
}


/* ---- carrossel de parceiros: as setas saem do caminho em tela estreita ---- */
@media (max-width: 640px) {
  [style*="gap:28px; width:100%; max-width:860px"] { gap: 14px !important; flex-wrap: wrap !important; }
  [style*="gap:28px; width:100%; max-width:860px"] > [style*="width:46px; height:46px"] { display: none !important; }
  [style*="padding:36px 50px"] { padding: 28px 26px !important; }
  [style*="padding:84px 96px 60px 96px"] { padding-top: 56px !important; padding-bottom: 40px !important; }
}


/* ---- telas muito estreitas (≤360px): último aperto ---- */
@media (max-width: 360px) {
  [style*="px 96px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="gap:40px"] { gap: 16px !important; }
  [style*="letter-spacing:0.44em"], [style*="letter-spacing:0.42em"] { letter-spacing: 0.3em !important; }
}


/* ---- vitrines fotográficas: a legenda sai de cima da foto ----
   Os painéis de produto posicionam legenda e etiqueta em absoluto, contando
   com a altura do desktop. Quando o painel encolhe, isso vira texto por cima
   da imagem. Em tela estreita eles voltam ao fluxo, abaixo da foto. */
@media (max-width: 980px) {
  [style*="justify-content:center"][style*="position:relative"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 26px 22px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  [style*="justify-content:center"][style*="position:relative"] > img {
    align-self: center !important;
    max-width: 100% !important;
    max-height: 240px !important;
    width: auto !important;
    height: auto !important;
  }
  [style*="position:absolute; left:44px"], [style*="position:absolute; right:44px"],
  [style*="position:absolute; left:36px"], [style*="position:absolute; right:36px"],
  [style*="position:absolute; left:22px"], [style*="position:absolute; right:22px"],
  [style*="position:absolute; left:0; right:0"] {
    position: static !important;
  }
  /* fio de 1px decorativo no topo do painel escuro não vira bloco */
  [style*="position:absolute; top:0; left:0; right:0; height:1px"] { display: none !important; }
}

/* conteúdo largo nunca empurra a página para os lados */
.page > div { max-width: 100vw; }

/* hero */

.hpalco{position:relative;background:#141110;overflow:hidden;isolation:isolate;min-height:clamp(620px,86vh,920px);--banda:252px}
.hbrilho{position:absolute;left:68%;top:44%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(214,39,30,.20),rgba(214,39,30,.05) 42%,rgba(0,0,0,0) 68%);filter:blur(6px);z-index:0}
.hvin{position:absolute;inset:0;z-index:3;pointer-events:none;
 background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 40%,rgba(0,0,0,.58) 100%)}
.hbase{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;
 background:linear-gradient(to top,rgba(10,8,7,.90) 0%,rgba(10,8,7,.55) 42%,rgba(10,8,7,0) 100%)}
.hveu{position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(97deg,rgba(12,10,9,.97) 0%,rgba(12,10,9,.92) 30%,rgba(12,10,9,.55) 46%,rgba(12,10,9,.06) 62%,rgba(12,10,9,0) 100%)}
.hsl{position:absolute;top:34px;right:56px;bottom:172px;left:49%;display:flex;align-items:center;justify-content:flex-end;
 z-index:1;opacity:0;transition:opacity .85s cubic-bezier(.4,0,.2,1)}
.hsl.on{opacity:1}
.hsl img{max-width:100%;max-height:94%;object-fit:contain;
 filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)) drop-shadow(0 0 46px rgba(214,39,30,.13));
 transform:scale(1);transition:transform 5.2s linear}
.hsl.on img{transform:scale(1.055)}
.hcopy{position:relative;z-index:5;padding:88px 96px;max-width:min(640px,45%);display:flex;flex-direction:column;gap:18px}
.holho{font-family:'Work Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FF6B60}
.hcopy h1{font-family:'Source Serif 4',Georgia,serif;font-size:44px;line-height:1.08;font-weight:600;margin:0;color:#fff}
.hcopy p{font-family:'Work Sans',sans-serif;font-size:16.5px;line-height:1.6;color:#CDC3BA;margin:0;max-width:42ch}
.hcopy p strong{color:#fff;font-weight:600}
.hbtns{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.hb1{background:#D6271E;color:#fff;font-family:'Work Sans',sans-serif;font-size:14px;font-weight:600;padding:15px 30px}
.hb2{border:1px solid rgba(255,255,255,.45);color:#fff;font-family:'Work Sans',sans-serif;font-size:14px;font-weight:600;padding:15px 30px}
.hleg{position:absolute;z-index:4;right:64px;bottom:66px;display:flex;flex-direction:column;gap:5px;
 align-items:flex-end;text-align:right;padding:0 15px 0 0;border-right:2px solid #D6271E}
.hleg .m{font-family:'Work Sans',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#A79C93}
.hleg .n{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:600;color:#fff;line-height:1.1;display:block}
.hleg a.n:hover{opacity:.75}
.hleg .d{font-family:'Work Sans',sans-serif;font-size:13px;color:#C6BCB3;line-height:1.5;max-width:30ch}
.hleg .r{font-family:'Work Sans',sans-serif;font-size:11px;color:#8C817A;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-top:2px}
.hanim{animation:hsobe .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes hsobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hticks{position:absolute;z-index:4;right:64px;bottom:38px;display:flex;gap:6px}
.htk{width:28px;height:3px;background:rgba(255,255,255,.20);position:relative;overflow:hidden;border-radius:2px;border:0;padding:0;cursor:pointer}
.htk i{position:absolute;inset:0;width:0;background:#D6271E;display:block}
.htk.on i{animation:hench 5.2s linear forwards}
@keyframes hench{from{width:0}to{width:100%}}
@media (max-width:1200px) and (min-width:861px){
 .hpalco{min-height:560px}.hcopy{padding:56px 40px;max-width:46%}.hcopy h1{font-size:33px}
 .hcopy p{max-width:34ch}
 .hsl{top:24px;right:20px;bottom:150px;left:48%}.hsl img{max-width:100%;max-height:88%}
 .hleg{right:24px;bottom:56px}.hleg .n{font-size:26px}.hleg .d{max-width:26ch}.hticks{right:24px}}
/* No celular a peça e o texto não podem dividir a mesma faixa: a foto ganha
   uma banda própria no topo e o texto passa a correr abaixo dela. */
@media (max-width:860px){
 .hpalco{min-height:0}
 .hsl{top:14px;left:0;right:0;bottom:auto;height:var(--banda);justify-content:center;padding:0 18px}
 .hcopy{max-width:none}
 .hsl img{max-width:84%;max-height:100%;filter:drop-shadow(0 22px 34px rgba(0,0,0,.7)) drop-shadow(0 0 34px rgba(214,39,30,.13))}
 .hsl.on img{transform:scale(1.045)}
 .hbrilho{left:50%;top:calc(var(--banda)/2 + 14px);width:96%}
 .hvin{height:calc(var(--banda) + 48px);background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 100%)}
 .hbase{display:none}
 .hveu{background:linear-gradient(to bottom,rgba(12,10,9,0) 0%,rgba(12,10,9,.30) 56%,rgba(12,10,9,.92) 76%,rgba(12,10,9,.98) 100%)}
 .hleg{position:static;margin:calc(var(--banda) + 22px) 22px 0;align-items:flex-start;text-align:left;
   border-right:0;border-left:2px solid #D6271E;padding:0 0 0 13px}
 .hleg .n{font-size:25px}.hleg .d{font-size:12.5px;max-width:34ch}
 .hticks{position:static;margin:16px 22px 0;justify-content:flex-start}
 .hcopy{padding:26px 22px 46px;max-width:none;gap:14px}
 .hcopy h1{font-size:28px}.hcopy p{font-size:15px;max-width:none}
 .holho{font-size:10.5px}
 .hbtns{gap:10px}
 .hb1,.hb2{padding:13px 18px;font-size:13px;flex:1 1 46%;text-align:center}}
@media (max-width:860px) and (min-width:620px){ .hpalco{--banda:360px} }
@media (max-width:619px) and (min-height:760px){ .hpalco{--banda:290px} }
@media (prefers-reduced-motion:reduce){
 .hsl img,.hsl{transition:none}.hsl.on img{transform:none}.htk.on i{animation:none;width:100%}.hanim{animation:none}}

/* carrossel de fabricantes */

.fab-car{position:relative;margin-top:30px;display:flex;align-items:stretch;gap:12px}
.fab-trilho{flex:1;min-width:0;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
 scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:2px}
.fab-trilho::-webkit-scrollbar{display:none}
.fab-card{flex:0 0 calc((100% - 48px)/4);scroll-snap-align:start;background:#FFFFFF;border:1px solid #E3DBD3;
 padding:28px 22px 24px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;
 color:inherit;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.fab-card:hover{transform:translateY(-4px);border-color:#C9BFB6;box-shadow:0 14px 30px rgba(34,30,27,.09);opacity:1}
.fab-nav{flex:0 0 42px;align-self:center;height:42px;border:1px solid #E3DBD3;background:#FFFFFF;color:#D6271E;
 display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
 transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}
.fab-nav:hover{background:#D6271E;color:#FFFFFF;border-color:#D6271E;opacity:1}
.fab-nav[disabled]{opacity:.28;cursor:default;pointer-events:none}
.fab-pontos{display:flex;justify-content:center;gap:7px;margin-top:22px}
.fab-pontos i{width:26px;height:3px;background:#DED5CC;display:block;border-radius:2px;transition:background .25s ease}
.fab-pontos i.on{background:#D6271E}
@media (max-width:1180px){ .fab-card{flex:0 0 calc((100% - 32px)/3)} }
@media (max-width:900px){ .fab-card{flex:0 0 calc((100% - 16px)/2)} .fab-nav{flex-basis:36px;height:36px} }
@media (max-width:600px){ .fab-car{gap:8px} .fab-card{flex:0 0 100%;padding:24px 18px 20px} }
@media (prefers-reduced-motion:reduce){ .fab-trilho{scroll-behavior:auto} .fab-card{transition:none} }

/* contato */

.os-oculto{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.os-acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.os-zap{display:inline-flex;align-items:center;gap:9px;font-family:'Work Sans',sans-serif;font-size:14px;
 font-weight:600;color:#0F7A4E;border:1px solid #BFE0CE;background:#F1FAF4;padding:15px 26px;text-decoration:none;
 transition:background .2s ease,border-color .2s ease,color .2s ease}
.os-zap:hover{background:#0F7A4E;border-color:#0F7A4E;color:#FFFFFF;opacity:1}
.os-zap-cheio{justify-content:center;padding:14px 20px;font-size:14.5px}
.os-aviso{font-family:'Work Sans',sans-serif;font-size:14px;line-height:1.55;padding:0;display:none}
.os-aviso.ok{display:block;color:#0F7A4E;background:#F1FAF4;border-left:3px solid #0F7A4E;padding:14px 16px}
.os-aviso.erro{display:block;color:#8C1B16;background:#FDF3F2;border-left:3px solid #D6271E;padding:14px 16px}
.os-aviso.indo{display:block;color:#6B625B}

.page{display:block !important}