:root{
  --ink:#000000;
  --smoke:#0B0B0B;
  --coal:#141414;
  --paper:#FFFFFF;
  --steel:#8A8A8A;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.28);
  --display:"Saira Condensed",Impact,sans-serif;
  --brand:"Michroma",sans-serif;
  --body:"Saira",system-ui,sans-serif;
  --gut:clamp(20px,4vw,64px);
  /* ritmo da pagina: compacto para camada tecnica, amplo para os momentos de marca */
  --s-compacto:clamp(40px,5vw,72px);
  --s-medio:clamp(60px,7.5vw,112px);
  --s-amplo:clamp(84px,10.5vw,164px);
  --chrome:104px;                 /* topbar + header, o que o hero desconta */
  --ease:cubic-bezier(.4,0,.2,1);
  --shell:1720px;                 /* teto das secoes de conteudo; campanha sangra */
  /* micro-tipografia: 3 tamanhos e 3 trackings. Antes eram 4 e 8, escolhidos a esmo. */
  --label-xs:8px;                 /* dado tecnico, categoria, selo */
  --label-sm:9px;                 /* acoes, titulos de coluna */
  --label-md:10px;                /* navegacao, barra de topo */
  --tr-nav:.16em;
  --tr-ui:.2em;
  --tr-brand:.26em;               /* eyebrow e assinatura: camada de marca */
  /* #767676 e o cinza mais escuro que ainda da 4.5:1 sobre preto (AA em texto pequeno) */
  --text-quiet:#767676;
  --text-mute:#8A8A8A;
  --wa:5541999999999;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
/* imagem que nao carregou vira o simbolo da marca, nunca icone quebrado */
img.img-fallback{object-fit:contain!important;padding:16%;opacity:.16;background:var(--coal)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
/* o "*" (0,0,0) perdia para html{scroll-behavior:smooth} (0,0,1): quem pede menos
   movimento continuava com rolagem animada. Agora o html entra por nome. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto!important}
}

.wrap{padding-inline:var(--gut)}
/* secoes de conteudo param de crescer em tela ultralarga; hero/origem/manifesto
   seguem sangrando de ponta a ponta, que e a assimetria intencional da campanha */
.shell{width:min(100%,var(--shell));margin-inline:auto}
.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--paper);color:var(--ink);font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);padding:14px 20px}
.pular:focus{left:0}
.disp{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.03em}

/* ---------- topbar ---------- */
/* preta com fio, nao faixa branca: a informacao fica, o grito sai */
.topbar{background:var(--ink);color:var(--text-quiet);font-family:var(--brand);font-size:var(--label-xs);letter-spacing:var(--tr-ui);text-align:center;padding:11px var(--gut);border-bottom:1px solid rgba(255,255,255,.06)}

/* ---------- header ---------- */
/* no topo: scrim que escurece sem desenhar caixa nem divisoria.
   apos rolar: painel discreto com fio minimo. Nada pisca, so troca em 260ms. */
header{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%);transition:background .26s var(--ease),border-color .26s var(--ease),backdrop-filter .26s var(--ease)}
header.preso{background:rgba(0,0,0,.88);backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.09)}
.bar{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:74px}
.logo img{height:26px;width:auto}
nav.main{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;font-family:var(--brand);font-size:var(--label-md);letter-spacing:var(--tr-nav)}
nav.main a{position:relative;padding:6px 0;color:#B8B8B8;transition:color .22s var(--ease)}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.main a:hover{color:var(--paper)}
nav.main a:hover::after{transform:scaleX(1)}
.tools{display:flex;align-items:center;gap:18px;margin-left:clamp(14px,2vw,34px)}
.bag{display:flex;align-items:center;gap:9px;font-family:var(--brand);font-size:var(--label-md);letter-spacing:var(--tr-nav)}
/* circulo branco so quando existe item: sacola vazia nao precisa de selo */
.bag .count,.menu-sacola .count{min-width:19px;height:19px;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:var(--text-mute);display:grid;place-items:center;font-size:var(--label-xs);font-weight:400;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.bag .count.tem,.menu-sacola .count.tem{background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:700}
.burger{display:none}

/* ---------- menu mobile ----------
   Infraestrutura da marca, nao campanha: preto liso, a mesma Michroma da nav
   do desktop, um item por linha com fio fino. Nada de tipografia de display. */
.menu{display:none;position:fixed;inset:0;z-index:100;background:var(--ink);flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s}
.menu.on{opacity:1;visibility:visible;transform:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s}
.menu-topo{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:74px;padding-inline:var(--gut);border-bottom:1px solid rgba(255,255,255,.07);flex:none}
/* no menu o logo vem maior e sem a tagline: simbolo + nome, lado a lado.
   dimensionado para ainda caber ao lado do botao fechar em 320px. */
/* precisa vencer ".logo img" (0,1,1) da regra do header; por isso o
   seletor descendente aqui, e nao ".logo-nome" solto (0,1,0). */
.logo-menu{display:flex;align-items:center;gap:clamp(9px,2.8vw,14px)}
.logo-menu .logo-simbolo{height:clamp(26px,7.4vw,34px);width:auto}
.logo-menu .logo-nome{height:clamp(9px,2.5vw,12px);width:auto}
.menu-fechar{width:40px;height:40px;margin-right:-10px;display:grid;place-items:center;
  color:var(--paper);transition:opacity .22s var(--ease)}
.menu-fechar:hover{opacity:.6}
.menu-nav{display:flex;flex-direction:column;padding-inline:var(--gut);overflow-y:auto;flex:1}
.menu-nav a{display:flex;align-items:center;min-height:62px;
  font-family:var(--brand);font-size:clamp(13px,3.6vw,15px);letter-spacing:var(--tr-ui);
  color:#E4E4E4;border-bottom:1px solid rgba(255,255,255,.06);transition:color .22s var(--ease)}
.menu-nav a:last-child{border-bottom:none}
.menu-nav a:hover,.menu-nav a:focus-visible{color:var(--paper)}
.menu-pe{padding:22px var(--gut) calc(26px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.07);flex:none}
.menu-sacola{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;
  font-family:var(--brand);font-size:var(--label-md);letter-spacing:var(--tr-nav);color:var(--paper)}
/* trava a rolagem do fundo enquanto o menu esta aberto */
html.travado,html.travado body{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);min-height:calc(100svh - var(--chrome));border-bottom:1px solid var(--line)}
.hero-media{position:relative;overflow:hidden;background:var(--smoke)}
.hero-media figure{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero-media figure img{transition:transform 1.3s var(--ease)}
.hero-media figure:not(.on) img{transform:scale(1.045)}
.hero-media figure.on{opacity:1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:contrast(1.06)}
/* texto ancorado na base, nao centralizado numa caixa: leitura editorial */
.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(34px,min(7vw,7vh),104px) var(--gut) clamp(24px,min(4vw,3.4vh),56px) clamp(26px,3.2vw,58px)}
.hero-kicker,.eyebrow{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-brand);color:var(--text-mute);margin-bottom:clamp(18px,2vw,26px)}
.eyebrow{margin-bottom:clamp(16px,1.8vw,22px)}
.hero-sub{max-width:40ch;color:var(--paper);margin-top:clamp(14px,min(2.2vw,2.4vh),30px);font-size:clamp(16px,min(1.45vw,2.5vh),23px);font-weight:400;line-height:1.3;letter-spacing:-.005em}
/* assinatura, nao paragrafo: fio em cima e largura so do texto */
/* fechamento: mais ar acima, fio curto so sob o proprio texto */
.manifesto-sign{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-brand);color:var(--paper);margin-top:clamp(44px,5.4vw,76px);padding-top:20px;border-top:1px solid rgba(255,255,255,.22);align-self:flex-start}
/* 8.2vw e o teto medido: acima disso "Treino, rua," e "Precisao no" quebram
   em tres linhas e deixam orfao no meio. 15.2vh segura em tela baixa. */
.hero-h{font-size:clamp(54px,min(8.2vw,15.2vh),138px)}
.hero-h .thin{display:block;font-weight:600;-webkit-text-stroke:1px var(--paper);color:transparent;margin-top:-.04em}
.hero-text{max-width:38ch;color:#8E8E8E;margin-top:clamp(11px,min(1.6vw,1.8vh),20px);font-size:clamp(13px,min(1vw,1.7vh),15px);line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,min(3.6vw,3.8vh),48px)}
/* primario = solido; secundario = fio discreto. So esses dois. */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);border:1px solid var(--paper);transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn-solid{background:var(--paper);color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--paper)}
.btn-ghost{border-color:var(--line-strong);color:#D4D4D4}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero-nav{display:flex;align-items:center;gap:18px;margin-top:clamp(20px,min(5vw,4.2vh),76px)}
.dots{display:flex;gap:10px}
.dot{width:44px;height:2px;background:var(--line-strong);position:relative;overflow:hidden}
.dot span{position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.dot.on span{transform:scaleX(1);transition:transform 6s linear}
.hero-count{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-nav);color:var(--text-mute)}
.arrows{display:flex;gap:8px;margin-left:auto}
.arrows button{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.arrows button:hover{background:var(--paper);color:var(--ink)}

/* ---------- pilares ---------- */
/* faixa de informacao tecnica entre a campanha e o conteudo: le-se, nao se anuncia */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);background:var(--smoke);border-block:1px solid var(--line)}
.pillar{padding:clamp(24px,2.6vw,32px) var(--gut);border-right:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:13px}
.pillar:last-child{border-right:none}
.pillar svg{width:15px;height:15px;flex:none;stroke:#6E6E6E;fill:none;stroke-width:1.2}
.pillar .pillar-t{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);font-weight:400;color:#E4E4E4;margin-top:0;line-height:1.4}
/* #8A8A8A e nao #767676: o fundo aqui e --smoke, nao preto puro, e 767676 cai para 4.33:1 */
.pillar p{font-size:11px;color:var(--text-mute);line-height:1.4;margin-top:5px}

/* ---------- drop ---------- */
.drop{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--line)}
.drop-media{position:relative;min-height:clamp(520px,62vw,780px);overflow:hidden}
.drop-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* fundo igual ao da pagina: a copy deixa de parecer um painel colado na foto */
.drop-copy{padding:var(--s-amplo) var(--gut);display:flex;flex-direction:column;justify-content:center;background:var(--ink)}
.drop-copy h2{font-size:clamp(40px,4.6vw,80px);max-width:13ch}
.drop-copy p{color:#8E8E8E;max-width:36ch;margin-top:clamp(18px,2.2vw,28px);font-size:15px;line-height:1.65}
/* ficha tecnica: informacao secundaria, nunca concorrente da headline */
/* prova de construcao, nao tabela: um fio so no topo, linhas sem moldura,
   rotulo em coluna fixa para os valores alinharem entre si */
.spec{margin-top:clamp(38px,4.6vw,62px);padding-top:6px;border-top:1px solid rgba(255,255,255,.14);max-width:34ch}
.spec div{display:grid;grid-template-columns:9ch 1fr;align-items:baseline;gap:18px;padding:15px 0;font-size:13px}
.spec div+div{border-top:1px solid rgba(255,255,255,.05)}
.spec dt{color:var(--text-quiet);font-family:var(--brand);font-size:var(--label-xs);letter-spacing:var(--tr-ui);line-height:1.5}
.spec dd{color:#D4D4D4;line-height:1.5}

/* ---------- shop ---------- */
.shop{padding-block:var(--s-medio) var(--s-amplo)}
.shop-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;margin-bottom:clamp(38px,4.6vw,68px)}
.shop-head h2{font-size:clamp(36px,5vw,78px);max-width:15ch}
.shop-head p{color:#8E8E8E;font-size:14px;max-width:32ch;margin-bottom:6px;line-height:1.6}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.shop-como{font-size:13px;color:var(--text-mute);margin-bottom:clamp(22px,2.6vw,34px);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.filters button{height:36px;padding:0 17px;border:1px solid rgba(255,255,255,.14);font-family:var(--brand);font-size:var(--label-xs);letter-spacing:var(--tr-ui);color:var(--text-mute);transition:.2s var(--ease)}
.filters button:hover{border-color:var(--paper);color:var(--paper)}
.filters button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* sem linha separando: os produtos passam a ser composicao, nao caixas */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4vw,64px) clamp(16px,1.8vw,30px);background:none}
.card{background:none;position:relative;display:flex;flex-direction:column}
.card:has(.card-add:not(:disabled)){cursor:pointer}
/* fundo preto, nao cinza: imagem que ainda nao chegou nao vira bloco cinza */
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.03)}
.soon{position:absolute;inset:0;display:grid;place-items:center;background:var(--coal)}
.soon img{width:38%;height:auto;object-fit:contain;opacity:.16}
.tag{position:absolute;top:14px;left:14px;background:var(--paper);color:var(--ink);font-family:var(--brand);font-size:var(--label-xs);letter-spacing:var(--tr-ui);padding:6px 11px}
.tag.dark{background:transparent;color:var(--paper);border:1px solid var(--line-strong)}
/* legenda editorial: categoria miuda, nome, preco. Bloco compacto, CTA longe. */
.card-body{padding:18px 0 0;display:flex;flex-direction:column;gap:0;flex:1}
.card-body h3{font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:.01em;color:#EAEAEA;margin-top:7px;line-height:1.35}
.card-cat{font-family:var(--brand);font-size:var(--label-xs);letter-spacing:var(--tr-brand);color:var(--text-quiet)}
/* preco facil de achar: quebra em vez de empurrar a coluna */
.price{margin-top:9px;padding-top:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px}
.price b{font-family:var(--display);font-weight:700;font-size:clamp(16px,1.25vw,19px);letter-spacing:0}
.price s{color:#6A6A6A;font-size:12px}
/* CTA discreto: link com sublinhado que cresce, nao botao dentro do card */
/* o sublinhado agora nasce visivel: sem ele o CTA nao parecia clicavel */
.card-add{margin-top:auto;padding:18px 0 3px;border:none;text-align:left;align-self:flex-start;position:relative;font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);color:#D4D4D4;transition:color .22s var(--ease)}
.card-add::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;opacity:.45;transition:opacity .28s var(--ease),transform .34s var(--ease)}
.card:hover .card-add::after{opacity:1}
.card:hover .card-add:not(:disabled),.card-add:focus-visible:not(:disabled){color:var(--paper)}
.card-add:disabled{color:#4A4A4A;cursor:not-allowed}

/* ---------- entradas por categoria ---------- */
.categorias{padding-block:var(--s-medio) var(--s-amplo);border-top:1px solid var(--line)}
.categorias h2{font-size:clamp(32px,4vw,62px);margin-bottom:clamp(30px,3.6vw,54px)}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,38px)}
.cat{display:flex;flex-direction:column}
.cat-media{display:block;aspect-ratio:2/1;overflow:hidden;background:var(--ink)}
.cat-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat:hover .cat-media img{transform:scale(1.03)}
.cat-nome{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(22px,2vw,30px);line-height:1;margin-top:18px}
.cat-txt{display:block;color:#8E8E8E;font-size:13.5px;line-height:1.6;margin-top:9px;max-width:30ch}
.cat-cta{display:inline-block;position:relative;align-self:flex-start;margin-top:16px;padding-bottom:3px;
  font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);color:#D4D4D4;
  transition:color .22s var(--ease)}
.cat-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  opacity:.45;transition:opacity .28s var(--ease)}
.cat:hover .cat-cta{color:var(--paper)}
.cat:hover .cat-cta::after{opacity:1}

/* atalhos para a categoria cheia, no fim da curadoria */
.shop-mais{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(40px,4.6vw,68px);padding-top:clamp(34px,4vw,54px);
  border-top:1px solid rgba(255,255,255,.07)}

/* ---------- hero das paginas de categoria ---------- */
.cat-hero{position:relative;display:grid;align-items:end;aspect-ratio:2.4/1;min-height:300px;
  overflow:hidden;border-bottom:1px solid var(--line)}
.cat-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.cat-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.2) 100%)}
.cat-hero-copy{position:relative;z-index:2;padding:0 var(--gut) clamp(32px,4vw,60px)}
.cat-hero h1{font-size:clamp(42px,6vw,96px)}
.cat-hero p{color:#C4C4C4;max-width:40ch;margin-top:clamp(12px,1.6vw,20px);font-size:15px;line-height:1.7}
.cat-grade{padding-block:var(--s-medio) var(--s-amplo)}

@media (max-width:1080px){ .cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .cat-txt{font-size:12.5px} }
@media (max-width:820px){ .cats{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,38px)}
  .cat-media{aspect-ratio:16/9} .cat-txt{max-width:40ch}
  .cat-hero{aspect-ratio:auto;min-height:0;padding-top:52vw} }
@media (max-width:560px){ .shop-mais{flex-direction:column} .shop-mais .btn{width:100%} }

/* ---------- chamada da colecao estampada ---------- */
/* mesma anatomia do bloco Origem, espelhada: imagem a direita */
.campanha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  border-top:1px solid var(--line)}
.campanha-media{position:relative;min-height:clamp(440px,52vw,680px);overflow:hidden;order:2}
.campanha-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.campanha:hover .campanha-media img{transform:scale(1.02)}
.campanha-copy{padding:var(--s-amplo) var(--gut);display:flex;flex-direction:column;
  justify-content:center;order:1}
.campanha-copy h2{font-size:clamp(34px,4.2vw,66px);max-width:14ch}
.campanha-copy h2 .thin{display:block;font-weight:600;-webkit-text-stroke:1px var(--paper);
  color:transparent;margin-top:-.03em}
.campanha-copy p{color:#8E8E8E;max-width:34ch;margin-top:clamp(18px,2.2vw,28px);
  font-size:15px;line-height:1.7}

/* ---------- manifesto ---------- */
.manifesto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.manifesto-copy{padding:var(--s-amplo) var(--gut);display:flex;flex-direction:column;justify-content:center}
.manifesto-copy h2{font-size:clamp(40px,5.6vw,92px);max-width:18ch}
.manifesto-copy h2 .thin{display:block;font-weight:600;-webkit-text-stroke:1px var(--paper);color:transparent;margin-top:-.03em}
.manifesto-copy p{color:#8E8E8E;max-width:34ch;margin-top:clamp(22px,2.6vw,34px);font-size:15px;line-height:1.7}
.manifesto-media{position:relative;min-height:clamp(460px,56vw,760px)}
.manifesto-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- lista ---------- */
.list{padding-block:clamp(64px,7.5vw,116px);text-align:center;border-bottom:1px solid var(--line)}
/* 26ch: abaixo disso "depois" fica orfao numa segunda linha. Em 320px quebra,
   mas ai a quebra e natural e equilibrada. */
.list h2{font-size:clamp(30px,3.8vw,54px);max-width:26ch;margin-inline:auto}
.list p{color:#8E8E8E;margin:18px auto 0;max-width:38ch;font-size:14px;line-height:1.7}
/* campo com fio embaixo, nao caixa: o formulario deixa de parecer rodape */
.list form{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:flex-end;margin-top:clamp(34px,4vw,52px)}
.list input{height:48px;width:min(340px,78vw);background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.26);color:var(--paper);padding:0 2px;font-family:var(--body);font-size:15px;text-align:center;transition:border-color .22s var(--ease)}
.list input:hover,.list input:focus{border-bottom-color:var(--paper)}
.list input::placeholder{color:var(--text-quiet)}
.list-ok{margin-top:18px;font-size:13px;color:var(--paper);min-height:20px}

/* ---------- footer ---------- */
footer{padding-block:clamp(56px,6.5vw,96px) 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(32px,4vw,64px)}
.foot-brand img{width:124px;margin-bottom:20px}
.foot-brand p{color:var(--text-quiet);font-size:13px;max-width:30ch;line-height:1.7}
.foot-col h3{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);margin-bottom:18px;color:var(--paper);font-weight:400}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:13px;color:var(--text-mute);transition:color .22s var(--ease)}
.foot-col a:hover{color:var(--paper)}
.foot-base{margin-top:clamp(52px,6vw,80px);padding-top:24px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:11px;color:var(--text-quiet)}

/* ---------- sacola ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .3s;z-index:70}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--smoke);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:80;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line);font-family:var(--brand);font-size:var(--label-md);letter-spacing:var(--tr-nav)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 24px}
.empty{padding:60px 0;text-align:center;color:var(--steel);font-size:14px}
.line{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.line img{width:64px;height:80px;object-fit:cover;background:var(--coal)}
.line-info{flex:1;min-width:0}
.line-info h4{font-size:14px;font-weight:500}
.line-info span{font-size:11px;color:var(--text-mute);font-family:var(--brand);letter-spacing:var(--tr-nav)}
.qty{display:flex;align-items:center;gap:12px;margin-top:8px}
.qty button{width:24px;height:24px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:14px;line-height:1}
.qty b{font-size:13px;min-width:16px;text-align:center}
.line-price{font-family:var(--display);font-weight:800;font-size:16px}
.drawer-foot{padding:24px;border-top:1px solid var(--line)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.total span{font-family:var(--brand);font-size:var(--label-md);letter-spacing:var(--tr-nav);color:var(--text-mute)}
.total b{font-family:var(--display);font-weight:900;font-size:28px}
.drawer-foot .btn{width:100%}
.drawer-foot .btn+.btn{margin-top:10px}
.drawer-note{font-size:11px;color:#6E6E6E;text-align:center;margin-top:12px}

/* preco ainda nao fechado: le-se como informacao, nao como numero */
.price b.sob{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);
  font-weight:400;color:var(--text-mute);text-transform:uppercase}

/* tira de angulos do modal (so aparece quando a peca tem mais de uma foto) */
.angulos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.angulos[hidden]{display:none}
.angulos button{height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.18);
  font-family:var(--brand);font-size:var(--label-xs);letter-spacing:var(--tr-ui);
  color:var(--text-mute);transition:.2s var(--ease)}
.angulos button:hover{border-color:var(--paper);color:var(--paper)}
.angulos button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---------- aviso de canal em configuracao ---------- */
.aviso{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:20px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
.aviso.on{display:grid}
.aviso-card{background:var(--smoke);border:1px solid var(--line-strong);width:min(420px,100%);
  padding:clamp(28px,4vw,40px);text-align:center}
.aviso-card h3{font-size:clamp(22px,2.4vw,30px);margin:6px 0 14px}
.aviso-card p{color:#8E8E8E;font-size:14px;line-height:1.7;max-width:30ch;margin-inline:auto}
.aviso-card .btn{margin-top:clamp(22px,2.6vw,32px);width:100%}

/* ---------- modal produto ---------- */
.modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:20px}
.modal.on{display:grid}
.modal-card{background:var(--smoke);border:1px solid var(--line);width:min(880px,100%);max-height:92svh;overflow:auto;display:grid;grid-template-columns:1fr 1fr}
.modal-card>div:last-child{padding:34px}
.modal-media{background:var(--coal);position:relative;min-height:340px}
.modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border:1px solid var(--line-strong);background:rgba(0,0,0,.5);display:grid;place-items:center}
.modal h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:32px;line-height:.94;margin-bottom:10px}
.modal .price{margin:0 0 20px}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 22px}
.sizes button{min-width:46px;height:42px;border:1px solid var(--line-strong);font-family:var(--brand);font-size:10px;transition:.2s var(--ease)}
.sizes button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.field-label{font-family:var(--brand);font-size:var(--label-sm);letter-spacing:var(--tr-ui);color:var(--text-mute)}
.modal .desc{font-size:14px;color:#AFAFAF;margin-bottom:22px}
.modal .btn{width:100%}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(2){border-right:none}
  .pillar:nth-child(1),.pillar:nth-child(2){border-bottom:1px solid rgba(255,255,255,.05)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .drop{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media (max-width:820px){
  nav.main{display:none}
  .menu{display:flex}
  .burger{display:grid;place-items:center;margin-left:auto}
  /* mobile nao e desktop encolhido: a foto vira o topo e o texto ganha a coluna inteira */
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-media{aspect-ratio:4/5}
  .hero-copy{padding:clamp(34px,7vw,52px) var(--gut) clamp(30px,6vw,46px)}
  .hero-sub{max-width:32ch}
  .hero-text{max-width:42ch}
  .drop,.manifesto,.campanha{grid-template-columns:1fr}
  .campanha-media{order:1;min-height:0;aspect-ratio:4/5}
  .campanha-copy{order:2;padding:var(--s-medio) var(--gut)}
  .drop-media,.manifesto-media{min-height:0;aspect-ratio:4/5}
  .drop-copy,.manifesto-copy{padding:var(--s-medio) var(--gut)}
  .manifesto-copy h2{font-size:clamp(38px,8.6vw,64px)}
  .modal-card{grid-template-columns:1fr}
  .modal-media{aspect-ratio:4/5;min-height:0}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .hero-nav{flex-wrap:wrap;gap:14px}
  .grid{gap:clamp(26px,7vw,34px) clamp(12px,3.4vw,18px)}
  /* alvo de toque confortavel no CTA discreto do produto */
  .card-add{padding:16px 0 4px}
  .shop-head{gap:18px}
  .filters{margin-left:0}
}
/* abaixo disso duas colunas viram miniatura: uma peca por linha le melhor */
@media (max-width:380px){
  .grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .card-media{aspect-ratio:1/1}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:none;border-bottom:1px solid rgba(255,255,255,.05)}
  .pillar:last-child{border-bottom:none}
}