/* ============================================================
   Mack Medical · Direcao C · "Showroom em contraste"
   CSS proprio, sem dependencia externa.
   Paleta oficial: #005bab, #00aeef, #002e6b, #0cc0df. Verde e proibido.
   ============================================================ */

/* ---------- 1. Fundacao ---------- */
:root{
  /* marca */
  --azul:#005bab;
  --ciano:#00aeef;
  --tinta:#002e6b;
  --acento:#0cc0df;

  /* neutros derivados da marca */
  --papel:#ffffff;
  --nevoa:#f3f7fb;
  --nevoa-2:#e9f0f8;
  --linha:#dfe8f2;
  --linha-forte:#c6d5e6;
  --grafite:#52617a;
  --carvao:#12213a;

  /* escuros */
  --noite:#002e6b;
  --noite-fundo:#00224f;
  --noite-linha:rgba(255,255,255,.14);
  --noite-texto:#9dbfe4;

  /* tipografia */
  --fonte:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --t-display:clamp(2.4rem,5.6vw,4.35rem);
  --t-h1:clamp(2rem,4.2vw,3.25rem);
  --t-h2:clamp(1.7rem,3.2vw,2.6rem);
  --t-h3:clamp(1.15rem,1.7vw,1.4rem);
  --t-corpo:1.0625rem;
  --t-pequeno:.875rem;
  --t-micro:.75rem;

  /* espaco */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;
  --caixa:1280px;
  --gutter:clamp(20px,4.6vw,48px);
  --secao:clamp(56px,8vw,112px);

  /* forma */
  --r1:6px; --r2:10px; --r3:16px; --r4:22px; --r9:999px;
  --s1:0 1px 2px rgba(0,46,107,.05), 0 2px 6px rgba(0,46,107,.05);
  --s2:0 2px 4px rgba(0,46,107,.05), 0 12px 26px -10px rgba(0,46,107,.20);
  --s3:0 4px 8px rgba(0,46,107,.06), 0 28px 60px -18px rgba(0,46,107,.34);

  /* movimento */
  --rapido:130ms; --medio:190ms; --lento:240ms;
  --curva:cubic-bezier(.2,.75,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fonte);
  font-size:var(--t-corpo);
  line-height:1.62;
  color:var(--carvao);
  background:var(--papel);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

:focus-visible{
  outline:3px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--r1);
}
.escura :focus-visible{outline-color:#fff}

.pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:0 0 var(--r2) 0;font-weight:700;
}
.pular:focus{left:0}

.caixa{width:100%;max-width:var(--caixa);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- 2. Tipografia ---------- */
.display{
  font-size:var(--t-display);font-weight:800;line-height:.98;
  letter-spacing:-.033em;margin:0;
}
.h1{font-size:var(--t-h1);font-weight:800;line-height:1.04;letter-spacing:-.028em}
.h2{font-size:var(--t-h2);font-weight:800;line-height:1.08;letter-spacing:-.025em}
.h3{font-size:var(--t-h3);font-weight:700;line-height:1.25;letter-spacing:-.012em}
.olho{
  font-size:var(--t-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.17em;color:var(--azul);margin:0 0 var(--e4);
  display:flex;align-items:center;gap:var(--e3);
}
.olho::before{content:"";width:22px;height:2px;background:var(--ciano);flex:none;border-radius:2px}
.escura .olho{color:var(--acento)}
.escura .olho::before{background:var(--acento)}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:var(--grafite);max-width:58ch}
.escura .lede{color:var(--noite-texto)}
.miudo{font-size:var(--t-pequeno);color:var(--grafite)}
.escura .miudo{color:var(--noite-texto)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* lockup tipografico das linhas proprias (nao substitui o logotipo) */
.lockup{font-weight:800;letter-spacing:-.036em;line-height:1;text-transform:lowercase;font-size:1.8rem}
.lockup b{color:var(--tinta);font-weight:800}
.lockup span{color:var(--ciano);font-weight:800}
.escura .lockup b{color:#fff}
.escura .lockup span{color:var(--acento)}

/* ---------- 3. Secoes ---------- */
.secao{padding-block:var(--secao)}
.secao-nevoa{background:var(--nevoa)}
.escura{
  background:var(--noite);color:#fff;position:relative;overflow:hidden;
}
.escura::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% 0%,rgba(0,174,239,.24),transparent 62%),
    radial-gradient(620px 380px at 96% 88%,rgba(12,192,223,.16),transparent 66%);
}
.escura > *{position:relative}
.cabecalho-secao{max-width:62ch;margin-bottom:clamp(32px,4vw,56px)}
.cabecalho-secao.entre{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e5);max-width:none;
}

/* ---------- 4. Botoes ---------- */
.btn{
  --bg:var(--azul); --fg:#fff; --bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;border:1px solid var(--bd);border-radius:var(--r9);
  background:var(--bg);color:var(--fg);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  cursor:pointer;transition:transform var(--rapido) var(--curva),background var(--rapido) var(--curva),box-shadow var(--medio) var(--curva),border-color var(--rapido) var(--curva);
  text-align:center;
}
.btn:hover{background:var(--tinta);transform:translateY(-1px);box-shadow:var(--s2)}
.btn:active{transform:translateY(0)}
.btn .ico{width:18px;height:18px;flex:none}
.btn-ciano{--bg:var(--ciano);--fg:#00233f}
.btn-ciano:hover{background:var(--acento);color:#00233f}
.btn-vazio{--bg:transparent;--fg:var(--tinta);--bd:var(--linha-forte)}
.btn-vazio:hover{--fg:#fff;background:var(--tinta);border-color:var(--tinta)}
.escura .btn-vazio{--fg:#fff;--bd:rgba(255,255,255,.4)}
.escura .btn-vazio:hover{background:#fff;--fg:var(--tinta);border-color:#fff}
.btn-branco{--bg:#fff;--fg:var(--tinta)}
.btn-branco:hover{background:var(--nevoa-2);color:var(--tinta)}
.btn-bloco{width:100%}
.btn-pequeno{min-height:40px;padding:8px 16px;font-size:.85rem}

.heroi .btn-vazio{--fg:#fff;--bd:rgba(255,255,255,.45)}
.heroi .btn-vazio:hover{background:#fff;--fg:var(--tinta);border-color:#fff}

.link-seta{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--azul);
  min-height:44px;font-size:.95rem;
}
.link-seta .ico{width:16px;height:16px;transition:transform var(--rapido) var(--curva)}
.link-seta:hover .ico{transform:translateX(4px)}
.escura .heroi .btn-vazio{--fg:#fff;--bd:rgba(255,255,255,.45)}
.heroi .btn-vazio:hover{background:#fff;--fg:var(--tinta);border-color:#fff}

.link-seta{color:var(--acento)}

/* ---------- 5. Topo ---------- */
.utilitaria{background:var(--tinta);color:#c8ddf3;font-size:var(--t-micro);letter-spacing:.02em}
.utilitaria-int{display:flex;align-items:center;gap:var(--e4);min-height:38px;flex-wrap:wrap}
.utilitaria-int strong{color:#fff;font-weight:700}
.utilitaria-fim{margin-left:auto;display:flex;align-items:center;gap:var(--e4)}
.utilitaria a{color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:38px}
.utilitaria a:hover{color:var(--acento)}
.util-esconde{display:none}

.topo{
  position:sticky;top:0;z-index:70;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--linha);
  transition:box-shadow var(--medio) var(--curva);
}
.topo.rolado{box-shadow:0 8px 24px -14px rgba(0,46,107,.4)}
.topo-int{display:flex;align-items:center;gap:var(--e5);min-height:72px}
.marca{display:flex;align-items:center;flex:none}
.marca img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:var(--e2)}
.nav a{
  padding:10px 14px;border-radius:var(--r9);font-size:.925rem;font-weight:600;color:var(--carvao);
  min-height:44px;display:inline-flex;align-items:center;transition:background var(--rapido),color var(--rapido);
}
.nav a:hover{background:var(--nevoa);color:var(--azul)}
.nav a[aria-current="page"]{color:var(--azul);background:var(--nevoa-2)}
.topo-acoes{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}

.busca-topo{position:relative;display:flex;align-items:center}
.busca-topo input{
  width:clamp(160px,19vw,250px);height:44px;padding:0 14px 0 40px;border-radius:var(--r9);
  border:1px solid var(--linha);background:var(--nevoa);font-size:.9rem;
  transition:border-color var(--rapido),background var(--rapido),width var(--medio) var(--curva);
}
.busca-topo input::placeholder{color:#7c8ba3}
.busca-topo input:focus{background:#fff;border-color:var(--ciano);outline-offset:1px}
.busca-topo .ico{position:absolute;left:14px;width:17px;height:17px;color:var(--grafite);pointer-events:none}

.icone-btn{
  position:relative;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linha);border-radius:var(--r9);background:#fff;cursor:pointer;
  transition:border-color var(--rapido),background var(--rapido),transform var(--rapido) var(--curva);
}
.icone-btn:hover{border-color:var(--ciano);background:var(--nevoa);transform:translateY(-1px)}
.icone-btn .ico{width:20px;height:20px;color:var(--tinta)}
.btn-orcamento{
  min-height:46px;padding:0 18px 0 16px;gap:10px;border-radius:var(--r9);border:1px solid transparent;
  background:var(--tinta);color:#fff;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;
  cursor:pointer;transition:background var(--rapido),transform var(--rapido) var(--curva),box-shadow var(--medio);
}
.btn-orcamento:hover{background:var(--azul);transform:translateY(-1px);box-shadow:var(--s2)}
.btn-orcamento .ico{width:19px;height:19px}
.selo{
  min-width:22px;height:22px;padding:0 6px;border-radius:var(--r9);background:var(--ciano);color:#00233f;
  font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.selo.pulsa{animation:selo-pulso 420ms var(--curva)}
@keyframes selo-pulso{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
.menu-btn{display:none}

/* painel de navegacao no celular */
.nav-painel{
  position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;z-index:95;
  transform:translateX(102%);transition:transform var(--lento) var(--curva);
  padding:var(--e5) var(--e5) var(--e7);display:flex;flex-direction:column;gap:var(--e2);
  box-shadow:var(--s3);overflow-y:auto;
}
.nav-painel[data-aberto="1"]{transform:translateX(0)}
.nav-painel a{padding:14px 12px;border-radius:var(--r2);font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--linha)}
.nav-painel a:hover{background:var(--nevoa);color:var(--azul)}
.nav-painel-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--e3)}

/* ---------- 6. Heroi ---------- */
.heroi{position:relative;background:var(--noite-fundo);color:#fff;overflow:hidden;isolation:isolate}
.heroi-fundo{position:absolute;inset:0;z-index:-2}
.heroi-fundo img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.heroi::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(0,34,79,.96) 0%,rgba(0,34,79,.90) 34%,rgba(0,46,107,.52) 68%,rgba(0,46,107,.30) 100%),
    linear-gradient(to top,rgba(0,34,79,.92),transparent 44%);
}
.heroi-int{padding-block:clamp(64px,10vw,124px) clamp(28px,4vw,44px);max-width:var(--caixa);margin-inline:auto;padding-inline:var(--gutter)}
.heroi-texto{max-width:min(680px,100%)}
.heroi .olho{color:var(--acento)}
.heroi .olho::before{background:var(--acento)}
.heroi p.lede{color:#d5e6f8;margin-top:var(--e5);max-width:46ch}
.heroi-acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
.heroi-painel{
  margin-top:clamp(44px,6vw,84px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r3);overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.heroi-painel div{background:rgba(0,34,79,.58);padding:var(--e5) var(--e4)}
.heroi-painel dt{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.heroi-painel dd{margin:8px 0 0;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.11em;color:#a9cdee;font-weight:700}

/* ---------- 7. Cartao de produto ---------- */
.grade-produtos{
  display:grid;gap:clamp(16px,1.6vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
.trilho{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(238px,1fr);
  gap:var(--e4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--e4);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:thin;
}
.trilho > *{scroll-snap-align:start}

.cartao{
  position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);
  border-radius:var(--r3);overflow:hidden;
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva),border-color var(--medio) var(--curva);
}
.cartao:hover,.cartao:focus-within{transform:translateY(-4px);box-shadow:var(--s3);border-color:var(--linha-forte)}
.cartao-figura{
  position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;flex:none;
  border-bottom:1px solid var(--linha);
}
.cartao-figura img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;
  transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva);
}
.cartao-figura img.alt{opacity:0}
.cartao:hover .cartao-figura img.base{opacity:0;transform:scale(1.03)}
.cartao:hover .cartao-figura img.alt{opacity:1;transform:scale(1.03)}
.cartao:hover .cartao-figura img.base.sozinha{opacity:1;transform:scale(1.04)}
.cartao-corpo{padding:var(--e4) var(--e4) var(--e5);display:flex;flex-direction:column;gap:8px;flex:1}
.cartao-cat{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--azul);
  line-height:1.35;min-height:2.7em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cartao-nome{
  font-size:.975rem;font-weight:700;line-height:1.3;letter-spacing:-.012em;color:var(--carvao);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cartao-cod{font-size:var(--t-pequeno);color:var(--grafite);font-variant-numeric:tabular-nums;margin-top:auto;padding-top:4px}
.cartao-acoes{display:flex;gap:8px;padding:0 var(--e4) var(--e4)}
.cartao-acoes .btn{flex:1;min-height:44px;font-size:.85rem;padding:10px 12px}
.cartao-espiar{
  width:44px;height:44px;flex:none;border:1px solid var(--linha);background:#fff;border-radius:var(--r9);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tinta);
  transition:border-color var(--rapido),background var(--rapido),color var(--rapido);
}
.cartao-espiar:hover{border-color:var(--ciano);background:var(--nevoa);color:var(--azul)}
.cartao-espiar .ico{width:19px;height:19px}
.cartao-link{position:absolute;inset:0 0 72px;z-index:1}
.fita{
  position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.94);
  border:1px solid var(--linha);border-radius:var(--r9);padding:5px 11px;
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta);
}
.cartao-acoes,.cartao-espiar{position:relative;z-index:2}

/* ---------- 8. Linhas proprias ---------- */
.grade-linhas{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(3,1fr)}
.linha-cartao{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-radius:var(--r4);
  overflow:hidden;transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva);
}
.linha-cartao:hover{transform:translateY(-5px);box-shadow:var(--s3)}
.linha-figura{aspect-ratio:16/11;background:var(--nevoa-2);position:relative;overflow:hidden}
.linha-figura img{width:100%;height:100%;object-fit:cover;transition:transform 420ms var(--curva)}
.linha-cartao:hover .linha-figura img{transform:scale(1.045)}
.linha-corpo{padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3);flex:1}
.linha-corpo p{color:var(--grafite);font-size:.95rem}
.linha-frase{
  font-size:var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--azul);line-height:1.5;
}
.linha-pe{margin-top:auto;padding-top:var(--e3);border-top:1px solid var(--linha)}

.parceiro{
  margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5);
  padding:var(--e5) clamp(20px,3vw,36px);border:1px dashed var(--linha-forte);border-radius:var(--r4);
  background:#fff;
}
.parceiro-rotulo{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--grafite);
  padding-right:var(--e5);border-right:1px solid var(--linha);
}
.parceiro-nome{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:var(--tinta)}
.parceiro p{color:var(--grafite);font-size:.925rem;flex:1;min-width:240px}

/* ---------- 9. Categorias ---------- */
.grade-categorias{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cat-cartao{
  display:flex;align-items:center;gap:var(--e4);padding:var(--e4);background:#fff;
  border:1px solid var(--linha);border-radius:var(--r3);min-height:88px;
  transition:border-color var(--rapido),box-shadow var(--medio) var(--curva),transform var(--medio) var(--curva);
}
.cat-cartao:hover{border-color:var(--ciano);box-shadow:var(--s2);transform:translateY(-2px)}
.cat-icone{
  width:52px;height:52px;flex:none;border-radius:var(--r2);background:var(--nevoa);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cat-icone img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:multiply}
.cat-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-nome{font-weight:700;font-size:.95rem;line-height:1.25;letter-spacing:-.012em}
.cat-qtd{font-size:var(--t-pequeno);color:var(--grafite);font-variant-numeric:tabular-nums}

/* ---------- 10. Ciclo de 7 etapas ---------- */
.ciclo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.ciclo-lista{display:flex;flex-direction:column;gap:2px}
.ciclo-bt{
  display:flex;align-items:center;gap:var(--e4);width:100%;text-align:left;background:transparent;
  border:0;border-left:2px solid var(--noite-linha);padding:13px var(--e4);color:#cfe3f7;cursor:pointer;
  font-weight:700;font-size:.95rem;min-height:48px;
  transition:color var(--rapido),border-color var(--rapido),background var(--rapido);
}
.ciclo-bt span.n{
  font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--noite-texto);
  font-variant-numeric:tabular-nums;flex:none;width:18px;
}
.ciclo-bt:hover{color:#fff;background:rgba(255,255,255,.05)}
.ciclo-bt[aria-selected="true"]{color:#fff;border-left-color:var(--acento);background:rgba(12,192,223,.12)}
.ciclo-bt[aria-selected="true"] span.n{color:var(--acento)}
.ciclo-painel{
  border:1px solid var(--noite-linha);border-radius:var(--r4);padding:clamp(24px,3.4vw,44px);
  background:rgba(255,255,255,.05);min-height:260px;
}
.ciclo-painel h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--e4)}
.ciclo-painel p{color:#cfe3f7;max-width:56ch}
.ciclo-etiqueta{
  display:inline-flex;align-items:center;gap:8px;font-size:var(--t-micro);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin-bottom:var(--e3);
}
.ciclo-pe{margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--noite-linha);display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center}
.ciclo-troca{animation:sobe 260ms var(--curva)}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 11. Blog ---------- */
.faixa-blog{
  margin-top:clamp(48px,6vw,88px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--noite-linha);
}
.grade-posts{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(3,1fr)}
.grade-posts.duas{grid-template-columns:repeat(2,1fr)}
.post{
  display:flex;flex-direction:column;background:rgba(255,255,255,.055);border:1px solid var(--noite-linha);
  border-radius:var(--r3);overflow:hidden;text-align:left;cursor:pointer;padding:0;color:inherit;font:inherit;
  transition:transform var(--medio) var(--curva),background var(--medio),border-color var(--medio),box-shadow var(--medio);
}
.post:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);box-shadow:0 26px 48px -24px rgba(0,0,0,.7)}
.post-figura{aspect-ratio:16/10;overflow:hidden;background:var(--noite-fundo);flex:none}
.post-figura img{width:100%;height:100%;object-fit:cover;transition:transform 420ms var(--curva)}
.post:hover .post-figura img{transform:scale(1.05)}
.post-corpo{padding:var(--e5);display:flex;flex-direction:column;gap:10px;flex:1}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--t-micro);color:var(--noite-texto);font-weight:600}
.post-tag{
  display:inline-flex;padding:4px 10px;border-radius:var(--r9);background:rgba(12,192,223,.18);
  color:var(--acento);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;
}
.post h3{font-size:1.12rem;font-weight:700;line-height:1.28;letter-spacing:-.018em;color:#fff}
.post p{font-size:.9rem;color:#c2d8ee;line-height:1.55}
.post-ler{margin-top:auto;padding-top:var(--e3);display:inline-flex;align-items:center;gap:8px;color:var(--acento);font-weight:700;font-size:.875rem}
.post-ler .ico{width:15px;height:15px;transition:transform var(--rapido) var(--curva)}
.post:hover .post-ler .ico{transform:translateX(4px)}

/* blog em fundo claro (catalogo e produto) */
.claro .post{background:#fff;border-color:var(--linha)}
.claro .post:hover{background:#fff;border-color:var(--linha-forte);box-shadow:var(--s3)}
.claro .post h3{color:var(--carvao)}
.claro .post p{color:var(--grafite)}
.claro .post-meta{color:var(--grafite)}
.claro .post-tag{background:var(--nevoa-2);color:var(--azul)}
.claro .post-ler{color:var(--azul)}

/* ---------- 12. Autoridade ---------- */
.dupla{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4.4vw,72px);align-items:center}
/* itens de grade nao podem herdar min-width:auto, senao um filho com rolagem
   propria (as abas, o trilho) empurra a pagina para o lado */
.dupla > *,.produto-grade > *,.catalogo-layout > *,.chamada-int > *,.ciclo > *,.grade-posts > *,.grade-linhas > *{min-width:0}
.moldura{
  border-radius:var(--r4);overflow:hidden;background:var(--nevoa);position:relative;box-shadow:var(--s2);
}
.moldura img{width:100%;aspect-ratio:3/2;object-fit:cover}
.moldura-legenda{
  position:absolute;left:0;right:0;bottom:0;padding:var(--e5);color:#fff;font-size:var(--t-pequeno);font-weight:600;
  background:linear-gradient(to top,rgba(0,34,79,.9),transparent);
}
.lista-marcada{display:flex;flex-direction:column;gap:var(--e4);margin-top:var(--e5)}
.lista-marcada li{display:flex;gap:var(--e3);align-items:flex-start;font-size:.975rem;color:var(--grafite)}
.lista-marcada .ico{width:20px;height:20px;flex:none;color:var(--ciano);margin-top:3px}
.lista-marcada strong{color:var(--carvao);font-weight:700}

/* ---------- 13. Chamada final ---------- */
.chamada{
  border-radius:var(--r4);padding:clamp(32px,5vw,72px);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(118deg,var(--tinta) 0%,var(--azul) 58%,#0069c4 100%);
}
.chamada::after{
  content:"";position:absolute;right:-90px;top:-90px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,192,223,.42),transparent 66%);
}
.chamada-int{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.chamada p{color:#cfe6fa;margin-top:var(--e4)}
.chamada-acoes{display:flex;flex-wrap:wrap;gap:var(--e3)}
.chamada .btn-vazio{--fg:#fff;--bd:rgba(255,255,255,.5)}
.chamada .btn-vazio:hover{background:#fff;--fg:var(--tinta);border-color:#fff}

/* ---------- 14. Rodape ---------- */
.rodape{background:var(--noite-fundo);color:#b9d3ec;padding-block:clamp(48px,6vw,80px) var(--e6)}
.rodape-grade{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px)}
.marca-placa{
  display:inline-flex;background:#fff;padding:12px 16px;border-radius:var(--r2);margin-bottom:var(--e4);
}
.marca-placa img{height:28px;width:auto}
.rodape h4{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.15em;color:#fff;font-weight:800;margin-bottom:var(--e4);
}
.rodape li{margin-bottom:10px}
.rodape a{font-size:.9rem;transition:color var(--rapido);display:inline-flex;align-items:center;min-height:32px}
.rodape a:hover{color:#fff}
.rodape address{font-style:normal;font-size:.9rem;line-height:1.7}
.rodape-base{
  margin-top:clamp(36px,4vw,60px);padding-top:var(--e5);border-top:1px solid var(--noite-linha);
  display:flex;flex-wrap:wrap;gap:var(--e4);justify-content:space-between;align-items:center;font-size:var(--t-pequeno);
}
.rodape-lema{color:#fff;font-weight:700}

/* ---------- 15. Gaveta de orcamento ---------- */
.veu{
  position:fixed;inset:0;background:rgba(0,26,60,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--lento) var(--curva);z-index:90;
}
.veu[data-aberto="1"]{opacity:1;pointer-events:auto}
.gaveta{
  position:fixed;top:0;right:0;bottom:0;width:min(432px,100%);background:#fff;z-index:100;
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform var(--lento) var(--curva);box-shadow:var(--s3);
}
.gaveta[data-aberto="1"]{transform:translateX(0)}
.gaveta-topo{
  display:flex;align-items:center;gap:var(--e3);padding:var(--e5);border-bottom:1px solid var(--linha);flex:none;
}
.gaveta-topo h2{font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.gaveta-topo .miudo{margin-left:2px}
.gaveta-fechar{margin-left:auto}
.gaveta-corpo{flex:1;overflow-y:auto;padding:var(--e4) var(--e5)}
.gaveta-pe{border-top:1px solid var(--linha);padding:var(--e5);flex:none;background:var(--nevoa);display:flex;flex-direction:column;gap:var(--e3)}

.item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--e4);padding:var(--e4) 0;border-bottom:1px solid var(--linha)}
.item:last-child{border-bottom:0}
.item-figura{width:64px;height:64px;border-radius:var(--r2);background:#fff;border:1px solid var(--linha);overflow:hidden;flex:none}
.item-figura img{width:100%;height:100%;object-fit:contain;padding:6px}
.item-nome{font-size:.9rem;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.item-cod{font-size:var(--t-pequeno);color:var(--grafite);margin-top:3px}
.item-linha{display:flex;align-items:center;gap:var(--e3);margin-top:10px}
.passo{display:inline-flex;align-items:center;border:1px solid var(--linha);border-radius:var(--r9);overflow:hidden;background:#fff}
.passo button{
  width:38px;height:38px;border:0;background:transparent;cursor:pointer;color:var(--tinta);
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--rapido);
}
.passo button:hover{background:var(--nevoa-2)}
.passo .ico{width:14px;height:14px}
.passo output{min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem}
.remover{
  margin-left:auto;background:transparent;border:0;color:var(--grafite);cursor:pointer;font-size:var(--t-pequeno);
  font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:6px;border-radius:var(--r1);
  transition:color var(--rapido);
}
.remover:hover{color:var(--azul)}
.remover .ico{width:15px;height:15px}

.vazio{text-align:center;padding:var(--e8) var(--e5);display:flex;flex-direction:column;align-items:center;gap:var(--e3)}
.vazio-icone{
  width:68px;height:68px;border-radius:50%;background:var(--nevoa);display:flex;align-items:center;justify-content:center;color:var(--azul);
}
.vazio-icone .ico{width:28px;height:28px}
.vazio h3{font-size:1.05rem;font-weight:700}
.vazio p{color:var(--grafite);font-size:.925rem;max-width:34ch}

/* ---------- 16. Aviso curto ---------- */
.aviso{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:120;
  background:var(--tinta);color:#fff;border-radius:var(--r9);padding:12px 20px;font-size:.9rem;font-weight:700;
  display:flex;align-items:center;gap:10px;box-shadow:var(--s3);opacity:0;pointer-events:none;
  transition:opacity var(--medio) var(--curva),transform var(--medio) var(--curva);max-width:calc(100vw - 32px);
}
.aviso[data-aberto="1"]{opacity:1;transform:translate(-50%,0)}
.aviso .ico{width:18px;height:18px;color:var(--acento);flex:none}

/* ---------- 17. Janela (espiar e leitura) ---------- */
.janela{
  position:fixed;inset:0;z-index:105;display:grid;place-items:center;padding:var(--e5);
  opacity:0;pointer-events:none;transition:opacity var(--medio) var(--curva);
}
.janela[data-aberto="1"]{opacity:1;pointer-events:auto}
.janela-caixa{
  position:relative;background:#fff;border-radius:var(--r4);width:min(920px,100%);max-height:min(86vh,860px);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--s3);transform:translateY(12px) scale(.985);
  transition:transform var(--lento) var(--curva);
}
.janela[data-aberto="1"] .janela-caixa{transform:none}
.janela-fechar{position:absolute;top:18px;right:18px;z-index:2}
.espiar-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow-y:auto}
.espiar-figura{background:#fff;aspect-ratio:1/1;position:relative;border-right:1px solid var(--linha)}
.espiar-figura img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:var(--e6)}
.espiar-corpo{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:var(--e3)}
.espiar-corpo h2{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;letter-spacing:-.022em;line-height:1.16}
.espiar-corpo .ficha{margin-top:var(--e2)}
.espiar-acoes{margin-top:auto;padding-top:var(--e4);display:flex;flex-direction:column;gap:10px}

.janela-caixa.leitura{width:min(780px,100%)}
.leitura-figura{aspect-ratio:21/9;background:var(--nevoa);flex:none}
.leitura-figura img{width:100%;height:100%;object-fit:cover}
.leitura-corpo{padding:clamp(26px,3.4vw,44px);overflow-y:auto}
.leitura-corpo h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.028em;line-height:1.1;margin-bottom:var(--e4)}
.leitura-corpo p{margin-bottom:var(--e4);color:var(--grafite);font-size:1.02rem}
.leitura-corpo p:first-of-type{color:var(--carvao);font-size:1.1rem}
.leitura-corpo h3{font-size:1.1rem;font-weight:800;color:var(--tinta);margin:var(--e6) 0 var(--e3)}
.leitura-passos{counter-reset:p;display:grid;gap:10px;margin-bottom:var(--e5)}
.leitura-passos li{
  counter-increment:p;display:flex;gap:var(--e3);align-items:baseline;font-size:.96rem;color:var(--grafite);
  padding:10px 14px;background:var(--nevoa);border-radius:var(--r2);
}
.leitura-passos li::before{
  content:counter(p);font-weight:800;color:var(--azul);font-size:.8rem;flex:none;
  font-variant-numeric:tabular-nums;
}
.leitura-passos strong{color:var(--carvao)}
.leitura-cta{margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}

/* ---------- 18. Catalogo ---------- */
.catalogo-topo{padding-block:clamp(40px,5vw,72px) clamp(32px,4vw,56px)}
.catalogo-busca{position:relative;margin-top:var(--e6);max-width:620px}
.catalogo-busca input{
  width:100%;height:60px;border-radius:var(--r9);border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);color:#fff;padding:0 56px 0 56px;font-size:1.02rem;
  transition:background var(--medio),border-color var(--medio);
}
.catalogo-busca input::placeholder{color:#9dbfe4}
.catalogo-busca input:focus{background:rgba(255,255,255,.16);border-color:var(--acento)}
.catalogo-busca > .ico{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9dbfe4;pointer-events:none}
.busca-limpar{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;
}
.busca-limpar[data-ver="1"]{display:inline-flex}
.busca-limpar:hover{background:rgba(255,255,255,.26)}
.busca-limpar .ico{width:15px;height:15px}

.catalogo-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(24px,2.6vw,40px);align-items:start}
.catalogo-layout .grade-produtos{grid-template-columns:repeat(auto-fill,minmax(202px,1fr));gap:18px}
.filtros{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:6px}
.filtro-grupo{border-bottom:1px solid var(--linha);padding-block:var(--e5)}
.filtro-grupo:first-child{padding-top:0}
.filtro-grupo h3{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--tinta);margin-bottom:var(--e3);
}
.filtro-nota{font-size:var(--t-pequeno);color:var(--grafite);margin:-6px 0 var(--e3);line-height:1.45}
.opcao{
  display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;cursor:pointer;
  padding:9px 10px;border-radius:var(--r2);text-align:left;font-size:.925rem;color:var(--carvao);
  min-height:44px;transition:background var(--rapido),color var(--rapido);
}
.opcao:hover{background:var(--nevoa)}
.opcao[aria-pressed="true"]{background:var(--nevoa-2);color:var(--azul);font-weight:700}
.opcao .marca-caixa{
  width:18px;height:18px;border-radius:5px;border:1.5px solid var(--linha-forte);flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--rapido),border-color var(--rapido);
}
.opcao[aria-pressed="true"] .marca-caixa{background:var(--azul);border-color:var(--azul)}
.opcao .marca-caixa .ico{width:11px;height:11px;color:#fff;opacity:0}
.opcao[aria-pressed="true"] .marca-caixa .ico{opacity:1}
.opcao .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opcao .qtd{font-size:.78rem;color:var(--grafite);font-variant-numeric:tabular-nums;flex:none}
.opcao[aria-pressed="true"] .qtd{color:var(--azul)}
.opcao[data-vazio="1"]{opacity:.38;pointer-events:none}
.sub-lista{margin-left:14px;padding-left:12px;border-left:1px solid var(--linha)}
.sub-lista .opcao{font-size:.875rem;min-height:40px;padding-block:7px}

.barra{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);padding-bottom:var(--e4);
  border-bottom:1px solid var(--linha);margin-bottom:var(--e5);
}
.barra-conta{font-size:.95rem;font-weight:700;color:var(--carvao)}
.barra-conta b{color:var(--azul)}
.barra-fim{margin-left:auto;display:flex;align-items:center;gap:var(--e3)}
.ordenar{
  height:44px;border-radius:var(--r9);border:1px solid var(--linha);background:#fff;padding:0 36px 0 16px;
  font-size:.875rem;font-weight:600;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2352617a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;
}
.ordenar:hover{border-color:var(--linha-forte)}
.fichas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--e5)}
.ficha-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:var(--r9);
  background:var(--nevoa-2);color:var(--tinta);font-size:.825rem;font-weight:700;border:1px solid transparent;
}
.ficha-chip button{
  width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,46,107,.1);color:var(--tinta);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--rapido);
}
.ficha-chip button:hover{background:rgba(0,46,107,.22)}
.ficha-chip .ico{width:10px;height:10px}
.limpar-tudo{
  background:transparent;border:0;color:var(--azul);font-weight:700;font-size:.825rem;cursor:pointer;
  min-height:38px;padding-inline:10px;border-radius:var(--r9);text-decoration:underline;text-underline-offset:3px;
}
.limpar-tudo:hover{background:var(--nevoa)}

.filtro-btn{display:none}
.mais-wrap{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px)}
.esqueleto{
  display:grid;gap:clamp(16px,1.6vw,24px);grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
.esqueleto div{
  border:1px solid var(--linha);border-radius:var(--r3);height:330px;background:
  linear-gradient(100deg,var(--nevoa) 30%,var(--nevoa-2) 50%,var(--nevoa) 70%);
  background-size:220% 100%;animation:brilho 1.3s infinite linear;
}
@keyframes brilho{to{background-position:-120% 0}}

/* ---------- 19. Produto ---------- */
.trilha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--t-pequeno);color:var(--grafite);padding-block:var(--e5)}
.trilha a:hover{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.trilha .sep{color:var(--linha-forte)}
.trilha span[aria-current]{color:var(--carvao);font-weight:600}

.produto-grade{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,72px);align-items:start}
.galeria-principal{
  aspect-ratio:1/1;background:#fff;border:1px solid var(--linha);border-radius:var(--r4);
  position:relative;overflow:hidden;
}
.galeria-principal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(24px,4vw,56px);transition:opacity var(--medio)}
.galeria-tiras{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.tira{
  width:76px;height:76px;border-radius:var(--r2);border:1.5px solid var(--linha);background:#fff;padding:0;
  overflow:hidden;cursor:pointer;transition:border-color var(--rapido),transform var(--rapido) var(--curva);
}
.tira img{width:100%;height:100%;object-fit:contain;padding:6px}
.tira:hover{border-color:var(--linha-forte);transform:translateY(-2px)}
.tira[aria-pressed="true"]{border-color:var(--azul)}

.compra{display:flex;flex-direction:column;gap:var(--e4);position:sticky;top:96px}
.compra-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r9);
  font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--nevoa-2);color:var(--azul);
}
.chip-tinta{background:var(--tinta);color:#fff}
.compra h1{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:800;letter-spacing:-.028em;line-height:1.1}
.compra-cod{display:flex;align-items:baseline;gap:10px;font-size:.95rem;color:var(--grafite)}
.compra-cod b{font-size:1.1rem;color:var(--carvao);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.compra-caixa{
  border:1px solid var(--linha);border-radius:var(--r4);padding:var(--e5);background:#fff;box-shadow:var(--s1);
  display:flex;flex-direction:column;gap:var(--e4);
}
.compra-linha{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap}
.compra-linha label{font-size:.875rem;font-weight:700;color:var(--grafite)}
.compra-nota{font-size:var(--t-pequeno);color:var(--grafite);display:flex;gap:10px;align-items:flex-start}
.compra-nota .ico{width:17px;height:17px;color:var(--ciano);flex:none;margin-top:2px}
.garantias{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);padding-top:var(--e2)}
.garantia{display:flex;flex-direction:column;gap:5px;font-size:var(--t-micro);color:var(--grafite);line-height:1.4}
.garantia .ico{width:20px;height:20px;color:var(--azul)}
.garantia b{color:var(--carvao);font-size:.8rem;font-weight:700}

.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);margin-bottom:var(--e5);overflow-x:auto}
.aba{
  background:transparent;border:0;border-bottom:2px solid transparent;padding:14px 18px;cursor:pointer;
  font-weight:700;font-size:.925rem;color:var(--grafite);white-space:nowrap;min-height:48px;
  transition:color var(--rapido),border-color var(--rapido);
}
.aba:hover{color:var(--carvao)}
.aba[aria-selected="true"]{color:var(--azul);border-bottom-color:var(--azul)}
.aba-painel{max-width:72ch;animation:sobe 220ms var(--curva)}
.aba-painel p{color:var(--grafite)}
.ficha{display:grid;gap:0;border:1px solid var(--linha);border-radius:var(--r3);overflow:hidden}
.ficha div{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1fr);gap:var(--e4);padding:13px var(--e4);border-bottom:1px solid var(--linha);font-size:.925rem}
.ficha div:last-child{border-bottom:0}
.ficha div:nth-child(odd){background:var(--nevoa)}
.ficha dt{color:var(--grafite);font-weight:600}
.ficha dd{margin:0;font-weight:700;color:var(--carvao)}

.video{
  position:relative;border-radius:var(--r4);overflow:hidden;background:var(--tinta);cursor:pointer;
  border:0;padding:0;display:block;width:100%;text-align:left;
}
.video img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 420ms var(--curva)}
.video:hover img{transform:scale(1.03)}
.video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,34,79,.94) 0%,rgba(0,34,79,.55) 32%,rgba(0,34,79,.10) 62%,rgba(0,34,79,.02) 100%);
}
.video-sobre{position:absolute;inset:auto 0 0 0;z-index:1;padding:clamp(20px,3vw,32px);display:flex;align-items:center;gap:var(--e4);color:#fff}
.video-play{
  width:58px;height:58px;border-radius:50%;background:#fff;color:var(--tinta);flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--s2);
  transition:transform var(--medio) var(--curva);
}
.video:hover .video-play{transform:scale(1.07)}
.video-play .ico{width:20px;height:20px;margin-left:3px}
.video-sobre b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.018em}
.video-sobre span{font-size:var(--t-pequeno);color:#c8ddf3}

/* ---------- 20. Utilidades ---------- */
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico-cheio{fill:currentColor;stroke:none}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.js .revela{opacity:0;transform:translateY(20px);transition:opacity 520ms var(--curva),transform 520ms var(--curva)}
body.js .revela.visivel{opacity:1;transform:none}
[data-atraso="1"]{transition-delay:70ms}
[data-atraso="2"]{transition-delay:140ms}
[data-atraso="3"]{transition-delay:210ms}
.sem-rolagem{overflow:hidden}

/* ---------- 21. Larguras ---------- */
@media (max-width:1080px){
  .catalogo-layout{grid-template-columns:1fr}
  .filtros{
    position:fixed;inset:0 0 0 auto;width:min(360px,90vw);background:#fff;z-index:95;max-height:none;
    transform:translateX(102%);transition:transform var(--lento) var(--curva);padding:var(--e5);overflow-y:auto;
    box-shadow:var(--s3);top:0;
  }
  .filtros[data-aberto="1"]{transform:translateX(0)}
  .filtro-btn{display:inline-flex}
  .filtros-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--e4);position:sticky;top:0;background:#fff;padding-bottom:var(--e3)}
}
@media (min-width:1081px){.filtros-topo{display:none}}

@media (max-width:980px){
  .grade-linhas{grid-template-columns:1fr}
  .grade-posts,.grade-posts.duas{grid-template-columns:1fr}
  .ciclo{grid-template-columns:1fr}
  .ciclo-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:var(--e5)}
  .ciclo-bt{
    border-left:0;border:1px solid var(--noite-linha);border-radius:var(--r2);
    padding:12px;font-size:.875rem;line-height:1.3;align-items:flex-start;
  }
  .ciclo-bt[aria-selected="true"]{border-color:var(--acento);background:rgba(12,192,223,.14)}
  .dupla{grid-template-columns:1fr}
  .produto-grade{grid-template-columns:1fr}
  .compra{position:static}
  .chamada-int{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:repeat(2,1fr)}
  .espiar-grade{grid-template-columns:1fr}
  .espiar-figura{aspect-ratio:4/3;border-right:0;border-bottom:1px solid var(--linha)}
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .util-esconde{display:none}
}
@media (max-width:760px){
  .heroi-painel{grid-template-columns:repeat(2,1fr)}
  .heroi-texto{max-width:none}
  .busca-topo{display:none}
  .grade-produtos,.catalogo-layout .grade-produtos{grid-template-columns:repeat(2,1fr);gap:12px}
  .esqueleto{grid-template-columns:repeat(2,1fr);gap:12px}
  .cartao-corpo{padding:12px 12px var(--e4)}
  .cartao-acoes{padding:0 12px 12px}
  .cartao-acoes .btn{font-size:.8rem;padding:10px 8px}
  .cartao-link{inset:0 0 68px}
  .garantias{grid-template-columns:1fr;gap:var(--e4)}
  .parceiro-rotulo{border-right:0;padding-right:0}
  .barra-fim{margin-left:0;width:100%}
  .ordenar{flex:1}
  .rodape-grade{grid-template-columns:1fr}
  .janela{padding:0}
  .janela-caixa{max-height:100vh;height:100%;border-radius:0;width:100%}
  .leitura-figura{aspect-ratio:16/9}
  .grade-categorias{grid-template-columns:1fr 1fr}
  .cat-cartao{flex-direction:column;align-items:flex-start;gap:10px;min-height:0}
  .utilitaria-fim{margin-left:0}
}
@media (max-width:520px){
  /* no celular a acao rapida vira o cartao inteiro: o toque abre o produto */
  .cartao-espiar{display:none}
  .cartao-acoes .btn{width:100%;font-size:.8rem}
  .cartao-link{inset:0 0 62px}
}
@media (max-width:430px){
  .heroi-acoes .btn{width:100%}
  .marca img{height:26px}
  .topo-int{min-height:64px;gap:var(--e3)}
  .grade-categorias{grid-template-columns:1fr}
  .tira{width:64px;height:64px}
}

@media (max-width:359px){
  .grade-produtos,.catalogo-layout .grade-produtos,.esqueleto{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  body.js .revela{opacity:1;transform:none}
}