/* ALUMINAÇO — MEGA-MENU (estilo e-commerce) + drawer mobile SEM JS
   Regras de ouro:
   - Tudo é <a href> real (crawlável) e <details>/<summary> (teclado nativo).
   - Mobile: acordeão nativo <details> + drawer via checkbox-hack -> funciona com JS desligado.
   - Desktop: com JS (.mm-js) vira painel flutuante com rail família -> subgrupos.
   - Sem JS no desktop: degrada pra acordeão. Nada quebra.
   ------------------------------------------------------------------ */

/* ---------- reset local do header ---------- */
.hdr{gap:16px}
.mm-chk{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- logo: ALUMIN + AÇO (o AÇO gira nos setores via story.js) --------
   O CSS morava só no <style> do index.html. Trazido pra cá pra valer em TODA
   página e nunca mais depender de quem editou qual arquivo. */
.logo-rot{
  color:var(--red);font-weight:800;letter-spacing:.02em;display:inline-block;
  transition:opacity .28s ease,transform .28s ease;white-space:nowrap
}

/* ---------- barra de navegação ---------- */
.nav{display:flex;gap:26px;align-items:center}
.nav > a,
.mega-sum{font:600 14px/1 var(--fhead);letter-spacing:.02em;color:var(--muted);transition:.2s}
.nav > a:hover{color:var(--ink)}
.nav .btn{padding:11px 18px}

/* ---------- o gatilho "Catálogos" ---------- */
.mega{position:relative}
.mega-sum{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;user-select:none;padding:6px 0;border-radius:8px}
.mega-sum::-webkit-details-marker{display:none}
.mega-sum:hover,.mega[open] > .mega-sum{color:var(--ink)}
.mega-sum:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.mega-sum .cr{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:.25s}
.mega[open] > .mega-sum .cr{transform:rotate(-135deg) translate(-3px,-3px)}
.mega-sum .tag{font:700 10px/1 var(--fhead);letter-spacing:.06em;background:var(--red);color:#fff;padding:3px 6px;border-radius:5px}

/* ================================================================
   DESKTOP (>=901px) — só quando o JS marcou html.mm-js
   ================================================================ */
@media (min-width:901px){
  /* position:FIXED, não absolute. O gatilho "Catálogos" fica perto da borda
     direita: um painel de 1120px centralizado NELE vaza 250px pra fora da tela
     e joga o destaque do Corte Fino pro nada. Fixo + left:50% centraliza na
     TELA. (O .hdr tem backdrop-filter, então ele é o containing block — como
     ele é full-width no topo, dá no mesmo: centraliza no viewport.) */
  html.mm-js .mega-panel{
    position:fixed;top:76px;left:50%;transform:translateX(-50%);
    width:min(1120px,94vw);background:#101013;border:1px solid var(--line);
    border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);
    padding:0;overflow:hidden;z-index:80;
    animation:mmIn .18s ease-out;
  }
  @keyframes mmIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  html.mm-js .mega-inner{display:grid;grid-template-columns:1fr 250px;min-height:430px}
  html.mm-js .mega-cols{display:grid;grid-template-columns:250px 1fr;min-height:430px}

  /* rail esquerdo: famílias/categorias */
  html.mm-js .mega-rail{border-right:1px solid var(--line);padding:14px 0;max-height:62vh;overflow-y:auto;overscroll-behavior:contain}
  html.mm-js .mega-rail::-webkit-scrollbar{width:6px}
  html.mm-js .mega-rail::-webkit-scrollbar-thumb{background:#2e2e34;border-radius:3px}
  html.mm-js .mega-gt{font:700 10px/1 var(--fhead);letter-spacing:.2em;text-transform:uppercase;color:var(--steel);padding:14px 20px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  html.mm-js .mega-gt a{color:var(--steel)}
  html.mm-js .mega-gt a:hover{color:var(--red)}
  html.mm-js .mega-gt em{font-style:normal;color:#5a5e66;letter-spacing:0;font-size:10px}

  html.mm-js .famd{position:static}
  html.mm-js .famt{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:9px 16px 9px 20px;font:600 13px/1.25 var(--fbody);color:var(--alu);
    cursor:pointer;list-style:none;border-left:2px solid transparent;transition:.15s
  }
  html.mm-js .famt::-webkit-details-marker{display:none}
  /* nome comprido (ex.: "Portas/Janelas/Venezianas/Vitro") não pode empurrar
     a contagem pra fora do rail */
  html.mm-js .famt{overflow:hidden}
  html.mm-js .famt i{font-style:normal;font-size:11px;color:var(--steel);margin-left:auto;flex:0 0 auto}
  html.mm-js .famt .ar{width:6px;height:6px;border-right:1.5px solid var(--steel);border-top:1.5px solid var(--steel);transform:rotate(45deg);flex:0 0 auto}
  /* hover só REALÇA — não abre nada. Quem abre é o clique. */
  html.mm-js .famd:hover > .famt,
  html.mm-js .famd:focus-within > .famt{background:#17171b;color:#fff}
  html.mm-js .famd[data-on] > .famt{background:#17171b;color:#fff;border-left-color:var(--red)}
  html.mm-js .famd:hover > .famt .ar,
  html.mm-js .famd[data-on] > .famt .ar{border-color:var(--red)}
  /* a setinha do rail gira quando a família está aberta */
  html.mm-js .famt .ar{transition:transform .2s}
  html.mm-js .famd[data-on] > .famt .ar{transform:rotate(45deg) scale(1.15)}
  html.mm-js .famt:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

  /* painel direito: subgrupos (aparece no hover/foco da família) */
  /* left/right em vez de width: encaixa exato entre o rail (250) e o
     destaque (250), sem sobrar 2px em cima do Corte Fino */
  html.mm-js .famsubs{
    display:none;position:absolute;left:250px;right:250px;top:0;
    height:100%;padding:22px 26px;overflow-y:auto;overscroll-behavior:contain;
    background:#0e0e11;
  }
  /* >>> PRÉ-CATÁLOGO: abre MINIMIZADO. <<<
     Nada de :hover aqui. Só o [data-on] — que o JS põe no CLIQUE — mostra os
     subgrupos. Assim o painel abre limpo (só as famílias + contagem), e o
     Lauro clica no que interessa. Um por vez. */
  html.mm-js .famd[data-on] > .famsubs{display:block}

  /* estado vazio: enquanto ninguém clicou, o lado direito explica o que fazer */
  html.mm-js .mega-hint{
    position:absolute;left:250px;right:250px;top:0;height:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:30px;text-align:center;background:#0e0e11;pointer-events:none
  }
  html.mm-js .mega-cols.tem-sel .mega-hint{display:none}
  html.mm-js .mega-hint svg{width:34px;height:34px;stroke:var(--steel);fill:none;stroke-width:1.3}
  html.mm-js .mega-hint b{font:700 15px/1.3 var(--fhead);color:var(--alu)}
  html.mm-js .mega-hint span{font:500 12.5px/1.5 var(--fbody);color:var(--steel);max-width:280px}
  html.mm-js .famsubs-h{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    font:800 19px/1.15 var(--fhead);color:#fff;margin-bottom:14px;
    padding-bottom:10px;border-bottom:1px solid var(--line)
  }
  html.mm-js .famsubs-h a:hover{color:var(--red)}
  html.mm-js .famsubs-all{
    flex:0 0 auto;font:700 12px/1 var(--fbody);color:var(--red);white-space:nowrap
  }
  /* .famsubs-s (o "729 itens · 41 subgrupos") não é mais gerado — a contagem
     saiu do menu por ordem do Lauro. A regra fica aqui morta de propósito? Não:
     removida. CSS órfão faz o próximo achar que o elemento ainda existe. */

  /* ---- "VER MAIS" ----------------------------------------------------
     <details> puro: expande NO LUGAR, sem JS. Os subgrupos escondidos
     continuam no HTML — o Google lê os 41, o humano vê 8. É como o ML admite
     que não cabe tudo sem custar link nenhum. */
  html.mm-js .vmais{margin-top:10px}
  html.mm-js .vmais > summary{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
    padding:6px 10px;border:1px solid var(--line);border-radius:100px;
    font:700 11.5px/1 var(--fbody);color:var(--steel);transition:.14s
  }
  html.mm-js .vmais > summary::-webkit-details-marker{display:none}
  html.mm-js .vmais > summary::after{
    content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);
    transition:transform .18s
  }
  html.mm-js .vmais > summary:hover{border-color:var(--red);color:#fff}
  html.mm-js .vmais > summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  html.mm-js .vmais[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
  html.mm-js .vmais[open] > summary{color:var(--red);border-color:var(--red)}
  html.mm-js .vmais .famsubs-l{margin-top:10px}

  /* ---- AS DUAS PORTAS (rodapé do rail) -------------------------------
     Locação e Corte Fino não são famílias: são outras portas da casa. Linha
     em cima e cor da marca pra dizer "isto aqui é outra coisa". Rótulo
     honesto embaixo: Locação = cotação (não tem item pra listar), Corte Fino
     = outra loja (leva o ↗). */
  /* GRUDADAS NO PÉ DO RAIL.
     No primeiro print elas estavam no fim de uma lista de 21 famílias dentro de
     um rail com max-height:62vh e overflow:auto — ou seja, ABAIXO DA DOBRA: só
     apareciam pra quem rolasse o rail. Duas das TRÊS portas da casa, escondidas
     atrás de um scroll. O objetivo era juntar as três num lugar só; deixá-las
     ali era o contrário disso.
     position:sticky no fundo do container que rola: as famílias passam por
     baixo, as portas ficam. Fundo sólido senão o texto atravessa. */
  html.mm-js .mega-portas{
    position:sticky;bottom:0;z-index:2;
    background:#0e0e11;
    border-top:1px solid var(--line);margin-top:10px;padding:10px 0 4px
  }
  html.mm-js .porta{
    display:block;padding:9px 14px;border-radius:8px;transition:background .12s
  }
  html.mm-js .porta:hover{background:#17171b}
  html.mm-js .porta b{
    display:block;font:800 13px/1.2 var(--fhead);color:var(--red);letter-spacing:.01em
  }
  html.mm-js .porta b i{font-style:normal;font-size:11px;opacity:.8}
  html.mm-js .porta span{
    display:block;margin-top:2px;font:500 11px/1.3 var(--fbody);color:var(--steel)
  }
  html.mm-js .famsubs ul{columns:3;column-gap:22px;list-style:none;margin:0;padding:0}
  html.mm-js .famsubs li{break-inside:avoid;margin-bottom:2px}
  html.mm-js .famsubs a{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;border-radius:6px;font:500 12.5px/1.3 var(--fbody);color:var(--alu);transition:.12s}
  html.mm-js .famsubs a:hover{background:#1b1b20;color:#fff}
  html.mm-js .famsubs a i{font-style:normal;color:#55585f;font-size:11px}
  html.mm-js .famsubs a.all{color:var(--red);font-weight:700}
  html.mm-js .famsubs a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

  /* destaque Corte Fino (coluna direita) */
  html.mm-js .mega-hero{
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    padding:22px;border-left:1px solid var(--line);overflow:hidden;background:#0e0e11
  }
  html.mm-js .mega-hero::before{content:"";position:absolute;inset:0;background:url('img/corteedobra.jpg') center/cover;opacity:.28;filter:grayscale(.4)}
  html.mm-js .mega-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,17,.25),#0e0e11 78%)}
  html.mm-js .mega-hero > *{position:relative;z-index:2}

  /* fecha o acordeão-mobile do <details> raiz quando o mouse sai */
  html.mm-js .mega[open] > .mega-sum{color:#fff}
}

/* destaque Corte Fino — conteúdo (comum) */
.mega-hero .k{font:700 10px/1 var(--fhead);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.mega-hero h4{font:800 21px/1.05 var(--fhead);color:#fff;margin-bottom:8px}
.mega-hero p{font:500 12.5px/1.45 var(--fbody);color:var(--muted);margin-bottom:14px}
.mega-hero .lk{display:block;font:700 12.5px/1 var(--fhead);color:var(--alu);padding:8px 0;border-top:1px solid var(--line);transition:.15s}
.mega-hero .lk:hover{color:var(--red);padding-left:5px}
.mega-hero .lk b{color:var(--red)}

/* ================================================================
   MOBILE (<=900px) — drawer via checkbox (ZERO JS) + acordeão <details>
   ================================================================ */
.burger{display:none}
@media (max-width:900px){
  /* ================== A CORREÇÃO QUE FAZ O DRAWER FUNCIONAR ==================
     O .hdr tem backdrop-filter. Qualquer filtro/transform/backdrop-filter faz o
     elemento virar CONTAINING BLOCK dos descendentes position:fixed. Ou seja:
     o drawer (.nav) e o overlay (.mm-ov), que são filhos do header, ficavam
     presos DENTRO dos ~66px de altura dele — apareciam cortados no topo.
     Era exatamente por isso que o menu antigo precisava de JS pra arrancar o
     drawer e jogar no <body>.
     Tirando o blur no celular, o .hdr deixa de ser containing block, o
     position:fixed volta a valer contra a TELA e o drawer ocupa a altura toda —
     sem JS, sem mover nada no DOM. No desktop o blur continua.
     (De quebra o header sólido lê melhor no celular.)
     O z-index:200 é do contrato antigo: o header (e o drawer dentro dele) tem
     que ficar acima de tudo — inclusive do botão flutuante do WhatsApp (z 70). */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0a0b;z-index:200}

  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;
    border-radius:10px;flex:0 0 auto
  }
  .burger span{display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
  .mm-chk:focus-visible + .burger{outline:2px solid var(--red);outline-offset:2px}
  .mm-chk:checked + .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mm-chk:checked + .burger span:nth-child(2){opacity:0}
  .mm-chk:checked + .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* overlay */
  .mm-ov{
    position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:.3s;z-index:58;display:block
  }
  .mm-chk:checked ~ .mm-ov{opacity:1;visibility:visible}

  /* o drawer é o próprio .nav (um só markup, sem duplicar links).
     height:100dvh além do top/bottom: o dvh acerta a barra de endereço do
     Chrome/Safari no celular. Fundo SÓLIDO (nada de translúcido: o hero
     aparecia atrás e o Lauro leu como "menu sumiu"). */
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);
    height:100vh;height:100dvh;max-height:none;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:#0a0a0b;border-left:1px solid var(--line);
    transform:translateX(101%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    z-index:199;padding:76px 0 30px;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }
  .mm-chk:checked ~ .nav{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
  .nav > a{
    font:700 16px/1 var(--fhead);color:var(--ink);padding:16px 22px;
    border-bottom:1px solid rgba(255,255,255,.07)
  }
  .nav > a:active{background:#17171b}
  .nav .btn{margin:18px 22px 0;justify-content:center;padding:15px 18px}

  /* gatilho Catálogos no drawer */
  .mega{border-bottom:1px solid rgba(255,255,255,.07)}
  .mega-sum{
    font:700 16px/1 var(--fhead);color:var(--ink);padding:16px 22px;
    justify-content:space-between;border-radius:0
  }
  .mega-sum:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
  .mega[open] > .mega-sum{background:#141418}
  .mega-panel{background:#0a0a0c}
  .mega-inner{display:block}
  .mega-cols{display:block}
  .mega-rail{padding:2px 0 8px}
  .mega-gt{
    font:700 10px/1 var(--fhead);letter-spacing:.18em;text-transform:uppercase;
    color:var(--steel);padding:16px 22px 8px;display:flex;justify-content:space-between;gap:8px
  }
  .mega-gt em{font-style:normal;color:#4e525a;letter-spacing:0}

  /* família = acordeão nativo (nível 2) */
  .famt{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px 22px 14px 26px;font:600 14px/1.2 var(--fbody);color:var(--alu);
    cursor:pointer;list-style:none;min-height:48px  /* alvo de toque */
  }
  .famt::-webkit-details-marker{display:none}
  .famt:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
  .famt i{font-style:normal;font-size:11.5px;color:var(--steel);margin-left:auto;margin-right:8px}
  .famt .ar{
    width:7px;height:7px;flex:0 0 auto;
    border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);
    transform:rotate(45deg) translateY(-2px);transition:.25s
  }
  .famd[open] > .famt{color:#fff;background:#141418}
  .famd[open] > .famt .ar{transform:rotate(-135deg) translateY(-2px);border-color:var(--red)}
  .famsubs{background:#08080a;padding:6px 0 12px}
  /* No drawer o nome da família já está no acordeão logo acima — repetir o
     título aqui é redundância. Mas o "Ver toda a família" NÃO é redundante:
     ele é o único jeito de abrir a família inteira pelo celular.
     Eu tinha acabado de movê-lo pra DENTRO do .famsubs-h (pro layout do PC) e
     este display:none o levou junto — sumiu do 390px, que é de onde vem a
     maioria do acesso. Por isso o title some e o link fica. */
  .famsubs-h{
    display:block;padding:0;margin:0;border:0;background:none
  }
  .famsubs-h > a:not(.famsubs-all){display:none}   /* o título, não o link */
  .famsubs-all{
    display:block;padding:12px 22px 12px 34px;min-height:48px;  /* alvo de toque */
    font:700 13px/1.4 var(--fbody);color:var(--red);
    border-bottom:1px solid rgba(255,255,255,.06)
  }
  .famsubs-all:active{background:#17171b}
  .famsubs-s{display:none}

  /* "Ver mais" no drawer. As regras dele estavam só no bloco de PC
     (html.mm-js …), então no celular ele saía com o triângulo ▶ nativo do
     <details> e sem alvo de toque. Estilo é do PC; comportamento é dos dois. */
  .vmais > summary{
    display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
    padding:13px 22px 13px 34px;min-height:48px;
    font:700 12.5px/1 var(--fbody);color:var(--steel)
  }
  .vmais > summary::-webkit-details-marker{display:none}
  .vmais > summary::after{
    content:"";width:6px;height:6px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
    transition:transform .2s
  }
  .vmais[open] > summary{color:var(--red)}
  .vmais[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
  .vmais > summary:active{background:#17171b}

  .famsubs ul{list-style:none;margin:0;padding:0}
  .famsubs a{
    display:flex;justify-content:space-between;gap:10px;align-items:center;
    padding:12px 22px 12px 38px;font:500 13.5px/1.3 var(--fbody);color:var(--muted);min-height:44px
  }
  .famsubs a i{font-style:normal;font-size:11px;color:#4e525a}
  .famsubs a:active{background:#17171b;color:#fff}
  .famsubs a.all{color:var(--red);font-weight:700}
  .famsubs a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

  /* destaque Corte Fino no mobile */
  .mega-hero{display:block;padding:20px 22px;background:#111114;border-top:1px solid var(--line)}
  .mega-hero h4{font-size:18px}

  /* botão fechar do drawer */
  .mm-x{
    position:absolute;top:16px;right:16px;width:44px;height:44px;display:flex;
    align-items:center;justify-content:center;font:300 30px/1 var(--fbody);
    color:var(--ink);background:#17171b;border:1px solid var(--line);border-radius:10px;cursor:pointer
  }
  body.mm-open{overflow:hidden}
  /* o botão flutuante do WhatsApp (z-index 70) fica por cima do drawer.
     Com JS a gente esconde; sem JS ele só sobrepõe um canto — não trava nada. */
  body.mm-open .wa-float{opacity:0;pointer-events:none;transition:.2s}
}

/* >900px: some tudo que é só-mobile */
@media (min-width:901px){
  .mm-ov,.mm-x{display:none}
}

/* ---------- sem JS no desktop: acordeão simples, nada quebrado ---------- */
@media (min-width:901px){
  html:not(.mm-js) .mega-panel{
    position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
    width:min(760px,92vw);max-height:70vh;overflow:auto;background:#101013;
    border:1px solid var(--line);border-radius:14px;padding:10px 0;z-index:80
  }
  html:not(.mm-js) .famsubs ul{columns:2;column-gap:18px;list-style:none;padding:0 22px}
  html:not(.mm-js) .famsubs a{display:block;padding:5px 0;font:500 13px/1.3 var(--fbody);color:var(--alu)}
  html:not(.mm-js) .famt{display:flex;justify-content:space-between;padding:9px 22px;color:var(--alu);cursor:pointer;list-style:none}
}

@media (prefers-reduced-motion:reduce){
  .nav,.mega-panel,.famt .ar,.mega-sum .cr{transition:none;animation:none}
}