
:root{
  /* Identidade Home Sushi Home: preto, branco e o ponto vermelho do logo. Página institucional em prosa, fotos em faixas, painéis com tabela + foto. */
  color-scheme:light;
  --paper:#FFFFFF;
  --panel:#F3F2F0;
  --ink:#141312;
  --muted:#55524E;
  --line:#DAD7D2;
  --red:#E11D1D;
  --black:#0B0B0B;
  --on-black:#FFFFFF;
  --on-black-muted:#B9B5AF;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;text-wrap:balance;font-stretch:118%;text-transform:uppercase;line-height:1.08}
h1{font-size:clamp(1.9rem,4.6vw,3.3rem);font-weight:800;letter-spacing:.01em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:14px}
h2::before{content:"";flex:none;width:12px;height:12px;background:var(--red)}
h3{font-size:1.02rem;font-weight:700;letter-spacing:.04em}
p{margin:0}
.prose{display:flex;flex-direction:column;gap:14px}
.prose p{color:var(--muted)}
.prose b{color:var(--ink)}

/* topo */
.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.logo img{width:56px;height:56px}
.logo span{font-stretch:118%;font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.nav{display:flex;gap:20px;font-size:.92rem;font-weight:500}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--black);color:var(--on-black);font-weight:700;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;text-decoration:none;padding:14px 22px;border:2px solid var(--black);border-bottom:5px solid var(--red)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper);border-bottom-color:var(--red)}
.btn.line{background:transparent;color:var(--ink)}
.topcta{display:flex;gap:10px;align-items:center}
.topcta .lbl{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topcta .btn{padding:10px 16px}
.topcta .narrow{display:none}
.nav a,.topcta .btn,.topcta .lbl{white-space:nowrap}
@media (max-width:1320px){.topcta .lbl{display:none}}
.order{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.order > div{background:var(--panel);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:12px}
.order p{color:var(--muted)}
.order .btn{align-self:flex-start;margin-top:auto}
@media (max-width:940px){.order{grid-template-columns:1fr}}
@media (max-width:1180px){.nav{display:none}}
@media (max-width:640px){.topcta .wide,.topcta .lbl{display:none}.topcta .narrow{display:inline-block}.top .wrap{gap:12px}}

/* hero: foto em largura total, como abertura institucional */
.hero{position:relative;background:var(--black);color:var(--on-black)}
.hero img{width:100%;height:clamp(300px,52vw,560px);object-fit:cover;object-position:50% 50%}
.hero-text{position:absolute;inset:auto 0 0 0;padding:90px 0 34px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0))}
.hero-text .wrap{display:flex;flex-direction:column;gap:12px}
.kicker{font-stretch:118%;font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:8px;height:8px;background:var(--red)}
.hero h1{max-width:18ch}

section{padding:56px 0}
.stack{display:flex;flex-direction:column;gap:22px}

/* faixa de fotos */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.photos figure{margin:0;display:flex;flex-direction:column;gap:8px}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.photos figcaption{font-size:.9rem;color:var(--muted)}

/* marcas */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--ink);margin-top:8px}
.brand{padding:22px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line)}
.brand:last-child{border-right:0}
.brand .kind{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.brand p{color:var(--muted);font-size:.96rem;line-height:1.55}
.brand .when{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--ink);font-size:.92rem}

/* painel com tabela + foto */
.panel{background:var(--panel);border-radius:8px;padding:36px;display:grid;grid-template-columns:1.7fr 1fr;gap:36px;align-items:center}
.panel.flip{grid-template-columns:1fr 1.4fr}
.panel img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.panel.flip img{aspect-ratio:1/1}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.97rem}
th,td{text-align:left;vertical-align:top;padding:11px 12px}
tbody tr:nth-child(odd){background:var(--paper)}
tbody th{font-weight:700;width:38%}
td{color:var(--muted)}
.note{font-size:.93rem;color:var(--muted)}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cta span{color:var(--muted);font-size:.95rem}

/* ocasiões em prosa */
.occ{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px}
.occ article{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--ink)}
.occ p{color:var(--muted)}

/* faixa preta */
.band{background:var(--black);color:var(--on-black)}
.band .prose p,.band .why p{color:var(--on-black-muted)}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 36px}
.loc{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:2px solid var(--ink)}
.loc img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;border-radius:6px}
.loc > div{padding:30px;display:flex;flex-direction:column;gap:14px}
.loc .addr{background:var(--black);color:var(--on-black)}
.loc .addr .k{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-black-muted)}
.loc .addr .v{font-stretch:118%;font-weight:800;font-size:1.3rem;text-transform:uppercase;line-height:1.2}
.loc .addr p{color:var(--on-black-muted)}
.loc .addr .btn{align-self:flex-start;margin-top:auto}
@media (max-width:940px){.loc{grid-template-columns:1fr}}
.why div{display:flex;flex-direction:column;gap:8px}

/* linha do tempo */
.hist{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}
.hist img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:35% 60%;border-radius:6px}
@media (max-width:940px){.hist{grid-template-columns:1fr}.hist img{aspect-ratio:4/3;object-position:30% 75%}}
.time{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.time li{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.time .y{font-stretch:118%;font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums}
.time p{color:var(--muted);max-width:70ch}
.time b{color:var(--ink)}

.info{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink)}
.info div{padding:22px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.info div:last-child{border-right:0}
.info .k{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.info .v{font-stretch:118%;font-weight:800;font-size:1.15rem;text-transform:uppercase}
.info p{color:var(--muted);font-size:.94rem}

.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 48px}
.faq div{display:flex;flex-direction:column;gap:8px}
.faq h3{text-transform:none;font-stretch:100%;letter-spacing:0;font-size:1.08rem;line-height:1.3}
.faq p{color:var(--muted)}

/* aba Marcas */
.nav a[aria-current="page"]{color:var(--ink);font-weight:700}
.pagehead{background:var(--black);color:var(--on-black);padding:56px 0 48px}
.pagehead .wrap{display:flex;flex-direction:column;gap:14px}
.pagehead p{color:var(--on-black-muted);max-width:62ch;font-size:1.08rem}
.jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.jump a{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--on-black);border:1px solid var(--on-black-muted);padding:8px 14px}
.jump a:hover{border-color:var(--red)}
.bp{display:grid;grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:44px;padding:40px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.bp-head{display:flex;flex-direction:column;gap:12px}
.bp-head .kind{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.bp-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.bp-head img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.bp-head img.blogo{width:auto;height:84px;aspect-ratio:auto;align-self:flex-start}
.claim{font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:1.02rem;line-height:1.25;padding:12px 14px;border:2px solid var(--ink);border-left:8px solid var(--red)}
.facts{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.facts li{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.96rem}
.facts b{color:var(--ink);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.big{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink)}
.big div{padding:22px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.big div:last-child{border-right:0}
.big .n{font-stretch:118%;font-weight:900;font-size:2rem;line-height:1}
.big p{color:var(--muted);font-size:.95rem}
@media (max-width:940px){.bp{grid-template-columns:1fr;gap:18px}.bp-head img{aspect-ratio:16/10}.bp-head img.blogo{aspect-ratio:auto}}
@media (max-width:640px){.facts,.big{grid-template-columns:1fr}.big div{border-right:0;border-bottom:1px solid var(--line)}.big div:last-child{border-bottom:0}}

footer{background:var(--black);color:var(--on-black-muted);padding:36px 0 48px;font-size:.9rem}
footer .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
footer img{width:64px;height:64px}
footer .wrap{flex-wrap:nowrap}
footer div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
footer b{color:var(--on-black)}

@media (max-width:940px){
  .nav{display:none}
  .brands{grid-template-columns:repeat(2,1fr)}
  .brand{border-right:0;border-bottom:1px solid var(--line)}
  .brand:nth-child(odd){border-right:1px solid var(--line)}
  .panel,.panel.flip{grid-template-columns:1fr;padding:24px}
  .panel img,.panel.flip img{aspect-ratio:16/10}
  .why{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  section{padding:40px 0}
  .photos{grid-template-columns:1fr}
  .brands{grid-template-columns:1fr}
  .brand:nth-child(odd){border-right:0}
  .occ,.faq,.why{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
  .info div{border-right:0;border-bottom:1px solid var(--line)}
  .info div:last-child{border-bottom:0}
  .time li{grid-template-columns:64px 1fr;gap:12px}
  .logo span{display:none}
  .btn{padding:12px 16px}
}

/* pacote multi-página */
.map{width:100%;height:340px;border:0;border-radius:6px;display:block}
.art{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.art img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.more{display:flex;gap:12px;flex-wrap:wrap}
.more a{font-size:.9rem;font-weight:600}
.occ a.go{font-weight:700;font-size:.92rem;align-self:flex-start}
@media (max-width:940px){.art{grid-template-columns:1fr}.art img{aspect-ratio:16/10}}
