@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/InstrumentSans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/InstrumentSans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Hallmark · bespoke · fundo muda por seção: cobalto, claro, escuro, amarelo · o trabalho real é a imagem principal */
:root{
  color-scheme:light;
  --cobalto:#2733e6; --cobalto-fundo:#1d27b8; --sobre-cobalto:#ffffff; --sobre-cobalto-2:#dfe3ff;
  --claro:#f2f3f8; --cartao:#ffffff; --tinta:#10132b; --apagado:#50546f; --linha:#cfd2e2;
  --noite:#0e1024; --noite-2:#1b1e3a; --sobre-noite:#f2f3f8; --sobre-noite-2:#aeb2cf;
  --sol:#ffd84a; --laranja:#a84a00;
  --titulo:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --texto:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:clip}
body{margin:0;background:var(--claro);color:var(--tinta);font:400 1.0625rem/1.55 var(--texto);overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--cobalto)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--titulo);margin:0;text-wrap:balance;font-weight:800}
h2{font-size:clamp(2.2rem,6.4vw,5.2rem);line-height:1;letter-spacing:-.03em}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.01em}
p{margin:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--sol);outline-offset:3px;box-shadow:0 0 0 6px var(--tinta)}
.faixa{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.miolo{max-width:1240px;margin-inline:auto}
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--cobalto);color:var(--sobre-cobalto)}
.topo .miolo{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px}
.topo a{color:inherit;text-decoration:none;font-weight:600;white-space:nowrap}
.topo a:hover{text-decoration:underline;text-underline-offset:4px}
.marca{font-family:var(--titulo);font-weight:800;font-size:1.1rem}
.topo nav{display:flex;gap:clamp(12px,2.6vw,28px)}
.abertura{background:var(--cobalto);color:var(--sobre-cobalto);padding-top:clamp(24px,5vw,56px);overflow:clip}
h1{font-size:clamp(3.4rem,14.4vw,13.5rem);line-height:.86;letter-spacing:-.05em}
.fala{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:center;margin-top:clamp(24px,4vw,44px);max-width:760px}
.fala img{width:clamp(68px,8vw,96px);height:clamp(68px,8vw,96px);border-radius:50%;object-fit:cover;border:3px solid var(--sobre-cobalto)}
.fala p{font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.35;color:var(--sobre-cobalto)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,32px)}
.botao{display:inline-block;padding:14px 22px;font-weight:600;text-decoration:none;border-radius:6px;white-space:nowrap;transition:transform .25s var(--ease)}
.botao:hover{transform:translateY(-2px)}
.botao:active{transform:none}
.botao.sol{background:var(--sol);color:var(--tinta)}
.botao.vazado{border:2px solid var(--sobre-cobalto);color:var(--sobre-cobalto);padding:12px 20px}
.parede{margin-top:clamp(32px,5vw,60px);display:grid;gap:12px;padding-bottom:clamp(12px,2vw,20px);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
.fila{display:flex;gap:12px;width:max-content;animation:anda 70s linear infinite}
.fila.volta{animation-direction:reverse}
.fila img{width:clamp(220px,26vw,380px);border-radius:6px;flex:none}
.parede:hover .fila{animation-play-state:paused}
@keyframes anda{to{transform:translateX(-50%)}}
.secao{padding-block:clamp(56px,9vw,120px)}
.chamada{display:grid;gap:14px;margin-bottom:clamp(28px,5vw,56px);max-width:860px}
.chamada p{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--apagado);max-width:42em}
.lojas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(16px,2.4vw,28px)}
.loja{grid-column:span 6;display:grid;gap:14px;align-content:start;min-width:0}
.loja.larga{grid-column:1/-1}
.loja:nth-child(2),.loja:nth-child(5){grid-column:span 7}
.loja:nth-child(3),.loja:nth-child(4){grid-column:span 5}
.foto{display:block;overflow:hidden;border-radius:6px;border:1px solid var(--linha)}
.foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .7s var(--ease)}
.foto:hover img{transform:scale(1.025)}
.linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.legenda{display:grid;gap:8px;max-width:48em}
.legenda p{color:var(--apagado)}
.selo{background:var(--cobalto);color:var(--sobre-cobalto);font-size:.85rem;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.selo.parcial{background:var(--sol);color:var(--tinta)}
.escura{background:var(--noite);color:var(--sobre-noite)}
.escura .chamada p,.escura .legenda p{color:var(--sobre-noite-2)}
.escura .foto{border-color:var(--noite-2)}
.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-bottom:clamp(40px,6vw,72px)}
.dupla .loja{grid-column:auto}
.projetos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,40px)}
.projetos li{display:grid;grid-template-columns:clamp(96px,14vw,168px) minmax(0,1fr);gap:clamp(14px,2vw,22px);padding-block:18px;border-top:1px solid var(--noite-2);align-items:start}
.projetos li:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.projetos img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px;display:block}
.projetos h3{font-size:1.15rem;margin-bottom:4px}
.projetos a{color:var(--sol);text-underline-offset:3px}
.projetos p{color:var(--sobre-noite-2);font-size:.98rem}
.filtro{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.ficha{font:600 .95rem var(--texto);padding:9px 15px;border-radius:99px;border:1.5px solid var(--tinta);background:transparent;color:var(--tinta);cursor:pointer;white-space:nowrap}
.ficha:hover{background:var(--cartao)}
.ficha[aria-pressed="true"]{background:var(--tinta);color:var(--claro)}
.busca{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:24px}
.busca input{font:400 1rem var(--texto);padding:11px 14px;border:1.5px solid var(--tinta);border-radius:6px;background:var(--cartao);color:var(--tinta);width:min(100%,340px)}
.busca p{color:var(--apagado)}
.grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(18px,2.2vw,28px) clamp(12px,1.6vw,20px)}
.grade a{display:grid;gap:3px;text-decoration:none;color:inherit}
.grade img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px;border:1px solid var(--linha);margin-bottom:6px;background:var(--cartao)}
.grade a:hover .nome{text-decoration:underline;text-underline-offset:3px}
.nome{font-weight:600;line-height:1.25}
.ramo{font-size:.88rem;color:var(--apagado)}
.vazio{padding-block:24px;font-weight:600}
.fecho{background:var(--sol);color:var(--tinta)}
.fecho h2{font-size:clamp(2.4rem,7.6vw,6.4rem);max-width:15ch}
.fecho .textos{display:grid;gap:12px;margin-top:24px;max-width:46em;font-size:1.1rem}
.fecho .redes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fecho .redes a{background:var(--tinta);color:var(--sol)}
@media (max-width:760px){
  .lojas{grid-template-columns:minmax(0,1fr)}
  .loja,.loja:nth-child(n){grid-column:auto}
  .dupla,.projetos{grid-template-columns:minmax(0,1fr)}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topo nav a:not(:last-child){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fila{animation:none}
  .botao,.foto img{transition:none}
}
.rodape{background:var(--tinta);color:var(--sobre-noite-2);padding-block:20px;font-size:.92rem}