/* Schiave Supermercado — sistema visual. Tokens: ver MASTER.md (Decisões Schiave). */
:root{
  color-scheme: light;
  --tomato:#D42A1E; --tomato-ink:#B01E14; --tomato-deep:#8C160F; --tomato-soft:#FBE4E1;
  --bg:#F5F2EE; --stone:#ECE6DF; --line:#DDD5CC; --white:#FFFFFF;
  --ink:#221E1B; --muted:#5B534D; --char:#1E1A18; --char-muted:#C9C0B8;
  --r-card:16px; --r-ctl:10px;
  --display:'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --text:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap:1200px; --gutter:clamp(16px, 4vw, 40px);
  --topbar:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--text); font-size:1.0625rem; line-height:1.6; overflow-wrap:break-word}
img,svg{display:block; max-width:100%}
a{color:var(--tomato-ink)}
a:hover{color:var(--tomato-deep)}
:focus-visible{outline:3px solid var(--tomato); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:var(--display); font-stretch:112%; line-height:1.05; letter-spacing:-0.01em; margin:0 0 .5em}
h2{font-size:clamp(2rem, 4.6vw, 3.25rem); font-weight:800}
h3{font-size:1.25rem; font-weight:800}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 16px; z-index:100}
.skip:focus{left:8px; top:8px}

/* ---------- barra fixa: endereço e horário ---------- */
.topbar{position:sticky; top:0; z-index:40; background:var(--tomato-deep); color:#fff; font-size:.875rem; font-weight:600}
.topbar .wrap{display:flex; gap:8px 24px; align-items:center; justify-content:space-between; min-height:var(--topbar); flex-wrap:wrap; padding-top:6px; padding-bottom:6px}
.topbar span{display:inline-flex; align-items:center; gap:8px}
.topbar svg{width:16px; height:16px; flex:none}
.topbar a{color:#fff; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:28px}

/* ---------- nav ---------- */
.nav{background:var(--white); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand svg{width:44px; height:44px; flex:none}
.brand b{display:block; font-family:var(--display); font-stretch:112%; font-weight:800; font-size:1.5rem; line-height:1}
.brand small{display:block; font-size:.8125rem; color:var(--muted); font-weight:600; line-height:1.2}
.nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.nav ul a{display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:var(--r-ctl); color:var(--ink); text-decoration:none; font-weight:700; font-size:.95rem}
.nav ul a:hover{background:var(--stone)}
@media (max-width: 900px){.nav ul{display:none}}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:var(--r-ctl); font-weight:800; font-size:1rem; text-decoration:none; border:2px solid transparent; cursor:pointer; font-family:var(--text); transition:background-color .15s ease, color .15s ease, border-color .15s ease}
.btn svg{width:20px; height:20px; flex:none}
.btn--red{background:var(--tomato); color:#fff}
.btn--red:hover{background:var(--tomato-deep); color:#fff}
.btn--white{background:#fff; color:var(--tomato-ink)}
.btn--white:hover{background:var(--tomato-soft); color:var(--tomato-deep)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.75)}
.btn--ghost:hover{background:rgba(255,255,255,.12); color:#fff}
.btn--line{background:#fff; color:var(--ink); border-color:var(--line)}
.btn--line:hover{border-color:var(--ink); color:var(--ink)}
.nav .btn{min-height:44px; padding:0 16px; font-size:.95rem}
@media (max-width: 520px){.nav .btn{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--tomato); color:#fff; overflow:hidden; position:relative}
.hero .wrap{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:32px; align-items:center; padding-top:clamp(40px, 7vw, 88px); padding-bottom:clamp(48px, 7vw, 96px)}
.hero h1{font-size:clamp(2.5rem, 6vw, 4.75rem); font-weight:800; margin-bottom:.4em}
.hero h1 em{font-style:normal; background:#fff; color:var(--tomato-ink); padding:0 .14em; border-radius:8px; -webkit-box-decoration-break:clone; box-decoration-break:clone; line-height:1.25}
.hero p.lead{font-size:clamp(1.05rem, 1.7vw, 1.25rem); max-width:36em; color:#fff; margin-bottom:28px}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero-art{position:relative}
.hero-art svg{width:100%; height:auto}
@media (max-width: 860px){.hero .wrap{grid-template-columns:1fr} .hero-art{max-width:420px; margin:0 auto}}

/* ---------- faixa de confiança ---------- */
.trust{background:var(--white); border-bottom:1px solid var(--line)}
.trust ul{list-style:none; margin:0 auto; padding:0 var(--gutter); max-width:var(--wrap); display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.trust li{display:flex; gap:14px; align-items:flex-start; padding:22px 18px 22px 0; font-size:.95rem; color:var(--muted)}
.trust li + li{padding-left:18px; border-left:1px solid var(--line)}
.trust b{display:block; color:var(--ink); font-size:1rem}
.trust svg{width:32px; height:32px; flex:none; color:var(--tomato)}
@media (max-width: 960px){.trust ul{grid-template-columns:repeat(2, minmax(0,1fr))} .trust li:nth-child(3){padding-left:0; border-left:0} .trust li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width: 520px){.trust ul{grid-template-columns:1fr} .trust li, .trust li + li{padding-left:0; border-left:0} .trust li + li{border-top:1px solid var(--line)}}

/* ---------- seções ---------- */
section{scroll-margin-top:calc(var(--topbar) + 12px)}
.sec{padding:clamp(56px, 8vw, 104px) 0}
.sec--stone{background:var(--stone)}
.sec-head{max-width:44rem; margin-bottom:36px}
.sec-head p{color:var(--muted); font-size:1.125rem}

/* o problema */
.problem{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px, 5vw, 72px); align-items:start}
.problem h2{font-size:clamp(2.2rem, 5.2vw, 3.75rem)}
.problem .cold{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:24px}
.problem .cold ol{margin:0; padding:0; list-style:none; counter-reset:c}
.problem .cold li{counter-increment:c; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:12px 0}
.problem .cold li + li{border-top:1px dashed var(--line)}
.problem .cold li::before{content:counter(c); width:44px; height:44px; border-radius:50%; background:var(--tomato); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.2rem}
.problem .cold b{display:block}
.problem .cold span{color:var(--muted); font-size:.98rem}
@media (max-width: 860px){.problem{grid-template-columns:1fr}}

/* ---------- departamentos: placas de corredor ---------- */
.shelf-rail{height:14px; background:var(--tomato); border-radius:4px; position:relative; margin:0 0 34px}
.shelf-rail::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background:var(--tomato-deep); border-radius:0 0 4px 4px}
.depts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-flow:dense; gap:18px}
.dept{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:0 22px 22px; position:relative; display:flex; flex-direction:column; margin-top:22px}
.dept--xl{grid-column:span 2; grid-row:span 2}
.dept--wide{grid-column:span 2}
.dept .sign{position:relative; align-self:flex-start; margin:-22px 0 18px; background:var(--tomato); color:#fff; font-family:var(--display); font-stretch:112%; font-weight:800; font-size:1.15rem; padding:9px 16px; border-radius:var(--r-ctl); line-height:1.1}
.dept .sign::before,.dept .sign::after{content:""; position:absolute; top:-22px; width:2px; height:22px; background:var(--ink); opacity:.55}
.dept .sign::before{left:18px} .dept .sign::after{right:18px}
.dept--xl .sign{font-size:1.6rem; padding:12px 20px}
.dept .ico{width:56px; height:56px; color:var(--tomato); margin-bottom:12px}
.dept--xl .ico{width:88px; height:88px}
.dept p{color:var(--muted); font-size:.98rem}
.dept p.tip{color:var(--ink); background:var(--bg); border-left:4px solid var(--tomato); padding:12px 14px; border-radius:0 var(--r-ctl) var(--r-ctl) 0; font-size:.95rem}
.dept .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:var(--r-ctl); border:1.5px solid var(--line); background:#fff; color:var(--ink); font:700 .9rem var(--text); cursor:pointer; transition:background-color .15s ease, border-color .15s ease}
.chip svg{width:16px; height:16px; color:var(--tomato)}
.chip:hover{border-color:var(--tomato)}
.chip[aria-pressed="true"]{background:var(--tomato); border-color:var(--tomato); color:#fff}
.chip[aria-pressed="true"] svg{color:#fff}
.dept--cta{background:var(--ink); color:#fff; border-color:var(--ink); justify-content:center; padding-top:28px}
.dept--cta h3{font-size:1.5rem}
.dept--cta p{color:var(--char-muted)}
@media (max-width: 1000px){.depts{grid-template-columns:repeat(2, minmax(0, 1fr))} .dept--xl{grid-row:span 1}}
@media (max-width: 600px){.depts{grid-template-columns:minmax(0,1fr)} .dept--xl,.dept--wide{grid-column:span 1}}

/* ---------- lista de compras ---------- */
.list-wrap{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 5vw, 64px); align-items:start}
.app{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.app-head{background:var(--tomato); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; position:relative}
.app-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--tomato-deep)}
.app-head b{font-family:var(--display); font-stretch:112%; font-size:1.25rem}
.app-head .count{background:#fff; color:var(--tomato-ink); border-radius:999px; padding:2px 12px; font-weight:800; font-size:.9rem}
.app form{display:flex; gap:10px; padding:18px 20px 8px; flex-wrap:wrap}
.app label{width:100%; font-weight:700; font-size:.95rem}
.app input{flex:1 1 180px; min-width:0; min-height:48px; border:1.5px solid var(--line); border-radius:var(--r-ctl); padding:0 14px; font:500 1rem var(--text); color:var(--ink); background:#fff}
.app input:focus{border-color:var(--tomato); outline:none; box-shadow:0 0 0 3px var(--tomato-soft)}
.app .btn{min-height:48px}
.groups{padding:6px 20px 8px; min-height:120px}
.groups h3{font-family:var(--text); font-stretch:100%; font-size:.85rem; font-weight:800; color:var(--tomato-ink); margin:14px 0 4px; letter-spacing:0}
.groups ul{list-style:none; margin:0; padding:0}
.groups li{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--bg)}
.groups li label{flex:1; display:flex; align-items:center; gap:12px; min-height:46px; cursor:pointer; font-weight:600; font-size:1rem; width:auto}
.groups li input[type=checkbox]{width:22px; height:22px; min-height:0; flex:none; accent-color:var(--tomato)}
.groups li input:checked + span{text-decoration:line-through; color:var(--muted)}
.groups .del{width:44px; height:44px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:var(--r-ctl); display:grid; place-items:center}
.groups .del:hover{background:var(--bg); color:var(--tomato-ink)}
.groups .del svg{width:18px; height:18px}
.empty{color:var(--muted); padding:18px 0; margin:0}
.app-foot{display:flex; flex-wrap:wrap; gap:10px; padding:14px 20px 20px; border-top:1px solid var(--line)}
.app-foot .btn{flex:1 1 140px; min-height:48px; font-size:.95rem}
.app-foot #lista-whatsapp{flex:1 1 100%}
.note{font-size:.9rem; color:var(--muted)}
.status{min-height:1.5em; font-weight:700; color:var(--tomato-ink); padding:0 20px 12px; margin:0}
@media (max-width: 860px){.list-wrap{grid-template-columns:1fr}}

/* ---------- como funciona ---------- */
.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; list-style:none; margin:0; padding:0; border-top:3px solid var(--ink)}
.steps li{padding:28px 28px 8px 0}
.steps li + li{padding-left:28px; border-left:1px solid var(--line)}
.steps .n{font-family:var(--display); font-stretch:112%; font-weight:800; font-size:4.5rem; line-height:1; color:var(--tomato); display:block; margin-bottom:10px}
.steps p{color:var(--muted)}
@media (max-width: 760px){.steps{grid-template-columns:1fr} .steps li, .steps li + li{padding:24px 0 4px; border-left:0} .steps li + li{border-top:1px solid var(--line)}}

/* ---------- FAQ ---------- */
.faq{max-width:52rem}
.faq details{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); margin-bottom:12px}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:60px; padding:14px 20px; font-weight:800; font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--display); font-size:1.75rem; color:var(--tomato); line-height:1; flex:none}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 20px 18px; color:var(--muted)}

/* ---------- onde fica ---------- */
.where{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,56px); align-items:stretch}
.where-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:28px}
.where-card dl{margin:0 0 24px}
.where-card dt{font-weight:800; color:var(--tomato-ink); font-size:.95rem; margin-top:16px}
.where-card dd{margin:2px 0 0; font-size:1.125rem; font-weight:600}
.street{background:var(--ink); border-radius:var(--r-card); position:relative; overflow:hidden; min-height:300px; color:#fff}
.street svg{width:100%; height:100%; position:absolute; inset:0}
@media (max-width: 860px){.where{grid-template-columns:1fr}}

/* ---------- CTA final ---------- */
.final{background:var(--tomato); color:#fff; text-align:left}
.final .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center; padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(48px,7vw,88px)}
.final h2{font-size:clamp(2.2rem, 5.6vw, 4rem)}
.final p{font-size:1.125rem}
.final .ctas{display:flex; flex-wrap:wrap; gap:12px}
.final p{max-width:40em}
@media (max-width: 860px){.final .wrap{grid-template-columns:1fr} .final .ctas{justify-content:flex-start}}

/* ---------- rodapé ---------- */
.footer{background:var(--char); color:var(--char-muted); padding:56px 0 32px; font-size:.95rem}
.footer a{color:#fff}
.footer .grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:40px}
.footer .brand{color:#fff; margin-bottom:16px}
.footer .brand small{color:var(--char-muted)}
.footer dl{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 24px; margin:18px 0}
.footer dt{font-weight:700; color:#fff; font-size:.85rem}
.footer dd{margin:2px 0 0}
.footer ul{list-style:none; margin:0; padding:0}
.footer ul a{display:flex; align-items:center; min-height:44px; text-decoration:none}
.footer ul a:hover{text-decoration:underline}
.footer h2{font-family:var(--text); font-stretch:100%; font-size:1rem; color:#fff; margin:0 0 8px; letter-spacing:0}
.footer .bottom{border-top:1px solid #3A3431; margin-top:32px; padding-top:20px}
.footer .bottom p{margin:0}
@media (max-width: 760px){.footer .grid{grid-template-columns:1fr} .footer dl{grid-template-columns:1fr}}

/* ---------- barra de abas (celular) ---------- */
.tabbar{display:none}
@media (max-width: 760px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .tabbar{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:64px; color:var(--ink); text-decoration:none; font-size:.75rem; font-weight:700; position:relative}
  .tabbar svg{width:24px; height:24px; color:var(--tomato)}
  .tabbar .badge{position:absolute; top:6px; left:calc(50% + 6px); background:var(--tomato); color:#fff; border-radius:999px; font-size:.7rem; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center}
  .tabbar .badge[hidden]{display:none}
}

/* ---------- páginas internas ---------- */
.page-hero{background:var(--tomato); color:#fff; padding:clamp(40px,6vw,72px) 0 clamp(72px,9vw,104px)}
.page-hero h1{font-size:clamp(2.2rem, 6vw, 4rem); font-weight:800}
.page-hero p{max-width:44rem; font-size:1.125rem; margin:0}
.idcard{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:28px; margin-top:-40px; position:relative}
.idcard dl, .facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr)); gap:18px 28px; margin:0}
.idcard dt, .facts dt{font-weight:800; font-size:.875rem; color:var(--tomato-ink)}
.idcard dd, .facts dd{margin:4px 0 0; font-size:1.0625rem; font-weight:600}
.cnaes{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap:14px; list-style:none; margin:0; padding:0}
.cnaes li{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px}
.cnaes code{font-family:var(--display); font-weight:800; color:var(--tomato-ink); font-size:1.1rem; display:block; margin-bottom:4px}
.cnaes .main{border:2px solid var(--tomato)}
.prose{max-width:46rem}
.prose h2{font-size:clamp(1.5rem, 3vw, 2rem); margin-top:1.6em}
.prose li{margin-bottom:.5em}
.block{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:28px; margin-bottom:24px}

/* barra do topo no celular: endereço + horário; o telefone fica na barra de abas */
@media (max-width: 760px){
  .topbar{font-size:.8125rem}
  .topbar .wrap{gap:2px 16px; justify-content:flex-start}
  .topbar span:nth-child(3){display:none}
}
.final .btn--ghost{border-color:#fff}

/* impressão: só a lista */
@media print{
  body{background:#fff; padding:0}
  body > *:not(main), main > *:not(#lista), #lista .list-wrap > div:first-child, .app form, .app-foot, .status, .del, .tabbar{display:none!important}
  .app{border:0}
  .app-head{background:#fff; color:#000; border-bottom:2px solid #000}
  .app-head::after{display:none}
  .sec{padding:0}
}
.footer .idlink{display:inline-flex; align-items:center; min-height:44px}