/* BracoDirei — caderno impresso: papel, tinta, um vermelho de carimbo */
:root{
  --papel:#F4F1EA; --papel2:#EAE5DA; --branco:#FFFDF8; --tinta:#1B1A17; --tinta2:#4A4740; --cinza:#8A857A;
  --carimbo:#A8321F; --verde:#3E6B4A; --regra:#D4CEC1;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --col:680px; --larg:1160px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:70px}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--serif);font-size:1.18rem;line-height:1.62;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--carimbo)}
:focus-visible{outline:2px solid var(--carimbo);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
.larg{max-width:var(--larg);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.saltar{position:absolute;left:-9999px}.saltar:focus{left:8px;top:8px;background:#fff;padding:6px 10px;z-index:99}
.sans{font-family:var(--sans)}
.rotulo{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--carimbo)}
.legenda{font-family:var(--sans);font-size:.78rem;line-height:1.45;color:var(--cinza);margin-top:8px}
.nota{font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--tinta2)}

/* ---- cabeçalho: mancha de jornal, mas assinada como publicidade ---- */
.faixa-pub{background:var(--tinta);color:#E8E3D7;font-family:var(--sans);font-size:.78rem;padding:7px 0}
.faixa-pub .larg{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.faixa-pub b{background:var(--carimbo);color:#fff;padding:1px 7px;letter-spacing:.08em;font-size:.68rem}
.faixa-pub a{color:#fff}
.cab{background:var(--papel);border-bottom:1px solid var(--tinta)}
.cab .topo{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:18px 0 12px;border-bottom:1px solid var(--regra)}
.cab .data,.cab .ed{font-family:var(--sans);font-size:.74rem;color:var(--tinta2);letter-spacing:.03em}
.cab .ed{text-align:right}
.marca{text-decoration:none;text-align:center;display:block;color:var(--tinta)}
.marca span{display:block;font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(2.2rem,5vw,3.4rem);line-height:.95;letter-spacing:-.02em}
.marca span b{font-style:normal;font-weight:700}
.marca small{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2);margin-top:6px}
.secoes{display:flex;justify-content:center;flex-wrap:wrap;gap:0;font-family:var(--sans);font-size:.84rem;padding:8px 0}
.secoes a{text-decoration:none;padding:4px 14px;border-left:1px solid var(--regra);color:var(--tinta)}
.secoes a:first-child{border-left:0}
.secoes a[aria-current]{color:var(--carimbo);font-weight:700}
@media (max-width:720px){.cab .topo{grid-template-columns:1fr}.cab .data,.cab .ed{display:none}.secoes{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}}
.fixa{position:sticky;top:0;z-index:40;background:var(--papel);border-bottom:1px solid var(--tinta);transform:translateY(-100%);transition:transform .25s;font-family:var(--sans);font-size:.82rem}
.fixa.on{transform:none}
.fixa .larg{display:flex;align-items:center;gap:16px;height:46px}
.fixa .m{font-family:var(--serif);font-style:italic;font-size:1.25rem;text-decoration:none;color:var(--tinta)}
.fixa .prog{flex:1;height:2px;background:var(--regra)}
.fixa .prog i{display:block;height:100%;width:0;background:var(--carimbo)}
.fixa a.ir{text-decoration:none;font-weight:700}

/* ---- abertura ---- */
.abertura{padding:clamp(28px,5vw,56px) 0 0}
.abertura .grelha{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.abertura .grelha{grid-template-columns:1fr}}
.antetitulo{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--carimbo);border-top:3px solid var(--carimbo);display:inline-block;padding-top:6px}
.abertura h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:500;margin:14px 0 18px;letter-spacing:-.025em}
.abertura h1 em{font-style:italic;font-weight:400}
.entrada{font-size:1.32rem;line-height:1.5;color:var(--tinta2);max-width:36em}
.assinatura{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--sans);font-size:.8rem;color:var(--tinta2);border-top:1px solid var(--regra);border-bottom:1px solid var(--regra);padding:10px 0;margin:22px 0}
.assinatura b{color:var(--tinta)}
.foto-ab{margin:0}
.foto-ab img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9)}

/* ---- corpo de texto ---- */
.texto{display:grid;grid-template-columns:1fr minmax(0,var(--col)) 1fr;gap:0 clamp(16px,3vw,40px);padding:clamp(30px,5vw,60px) clamp(16px,4vw,40px)}
.texto>*{grid-column:2}
.texto>.largo{grid-column:1/-1;max-width:var(--larg);width:100%;justify-self:center}
.texto>.margem{grid-column:3;grid-row:span 2;align-self:start;font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--tinta2);border-top:1px solid var(--tinta);padding-top:8px;max-width:220px}
@media (max-width:1100px){.texto{grid-template-columns:minmax(0,1fr)}.texto>*,.texto>.margem,.texto>.largo{grid-column:1}.texto>.margem{max-width:none;margin:0 0 1.4em}}
.texto h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:500;margin:1.6em 0 .5em}
.texto h2 .num{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--carimbo);margin-bottom:8px}
.texto h3{font-size:1.35rem;margin:1.2em 0 .4em}
.capitular::first-letter{float:left;font-size:4.4em;line-height:.82;padding:6px 10px 0 0;font-weight:600;color:var(--carimbo)}
.citacao{font-size:1.7rem;line-height:1.25;font-style:italic;border-top:3px solid var(--tinta);border-bottom:1px solid var(--tinta);padding:18px 0;margin:1.4em 0}
.citacao cite{display:block;font-family:var(--sans);font-style:normal;font-size:.76rem;color:var(--cinza);margin-top:8px}
figure{margin:1.6em 0}
.fig-larga img{width:100%;max-height:560px;object-fit:cover}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.duas{grid-template-columns:1fr}}
.duas img{width:100%;aspect-ratio:4/3;object-fit:cover}
ul.simples,ol.simples{padding-left:1.1em}
ul.simples li,ol.simples li{margin-bottom:.4em}
hr.fio{border:0;border-top:1px solid var(--regra);margin:2em 0}

/* ---- caixas interativas: parecem fichas, não "widgets" ---- */
.ficha{background:var(--branco);border:1px solid var(--tinta);padding:clamp(16px,3vw,26px);margin:1.6em 0;font-family:var(--sans);font-size:.95rem;line-height:1.5}
.ficha>.rotulo{display:block;margin-bottom:6px}
.ficha h3{font-family:var(--serif);font-size:1.45rem;margin:0 0 10px}
.ficha .linha{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.ficha label{display:block;font-size:.78rem;font-weight:700;margin-bottom:4px;color:var(--tinta2)}
.ficha input[type=number]{width:120px;font:inherit;font-size:1.4rem;padding:8px 10px;border:1px solid var(--tinta);background:var(--papel);border-radius:0}
.bt{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:.92rem;padding:11px 18px;border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);cursor:pointer;text-decoration:none;border-radius:0}
.bt:hover{background:var(--carimbo);border-color:var(--carimbo);color:#fff}
.bt.claro{background:transparent;color:var(--tinta)}
.bt.claro:hover{background:var(--tinta);color:var(--papel)}
.escala{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:14px;border:1px solid var(--tinta)}
.escala div{padding:10px;border-left:1px solid var(--tinta);font-size:.82rem}
.escala div:first-child{border-left:0}
.escala b{display:block;font-size:1rem}
.escala .on{background:var(--tinta);color:var(--papel)}
.resp{margin-top:12px;min-height:1.5em;font-size:.95rem}

.alimentos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--tinta);border-left:1px solid var(--tinta);margin:1.4em 0}
@media (max-width:760px){.alimentos{grid-template-columns:1fr 1fr}}
.alim{border-right:1px solid var(--tinta);border-bottom:1px solid var(--tinta);background:var(--branco);display:flex;flex-direction:column}
.alim img{aspect-ratio:4/3;object-fit:cover;width:100%}
.alim .t{padding:10px 12px;font-family:var(--sans);font-size:.84rem;flex:1}
.alim .t b{font-family:var(--serif);font-size:1.15rem;display:block}
.alim .t .k{color:var(--verde);font-weight:700}
.alim button{font:inherit;font-family:var(--sans);font-weight:700;font-size:.82rem;border:0;border-top:1px solid var(--tinta);background:transparent;padding:9px;cursor:pointer;text-align:left}
.alim button[aria-pressed="true"]{background:var(--verde);color:#fff}
.total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:3px solid var(--tinta);padding-top:10px;font-family:var(--sans)}
.total .n{font-family:var(--serif);font-size:2.6rem;line-height:1}
.barra{height:10px;background:var(--papel2);position:relative;margin:8px 0}
.barra i{display:block;height:100%;width:0;background:var(--verde);transition:width .4s}
.barra .meta{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--carimbo)}

.sal{width:100%;border-collapse:collapse;font-size:.9rem}
.sal td{padding:8px 0;border-bottom:1px solid var(--regra);vertical-align:middle}
.sal td:last-child{text-align:right;white-space:nowrap}
.sal small{color:var(--cinza)}
.cont{display:inline-flex;border:1px solid var(--tinta)}
.cont button{width:34px;height:32px;border:0;background:var(--papel);font:inherit;font-weight:700;cursor:pointer}
.cont output{width:34px;text-align:center;line-height:32px;border-left:1px solid var(--tinta);border-right:1px solid var(--tinta)}

.relogio{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
@media (max-width:560px){.relogio{grid-template-columns:1fr}}
.relogio .mostrador{font-family:var(--serif);font-size:4.6rem;line-height:1;font-variant-numeric:tabular-nums;border:1px solid var(--tinta);padding:10px 18px;background:var(--papel)}
.semana{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--tinta);margin:10px 0}
.semana button{font:inherit;font-family:var(--sans);font-weight:700;font-size:.8rem;border:0;border-left:1px solid var(--tinta);background:var(--branco);padding:14px 0;cursor:pointer}
.semana button:first-child{border-left:0}
.semana button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}

/* ---- produto: ficha de loja, honesta ---- */
.produto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:start;border-top:3px solid var(--tinta);border-bottom:1px solid var(--tinta);padding:clamp(20px,3vw,34px) 0;margin:1.8em 0}
@media (max-width:860px){.produto{grid-template-columns:1fr}}
.produto .img{background:#F2EFE8;border:1px solid var(--regra)}
.produto .img img{width:100%;aspect-ratio:4/3;object-fit:contain}
.produto .mini{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.produto .mini button{width:76px;height:58px;border:1px solid var(--regra);background:#F2EFE8;padding:2px;cursor:pointer}
.produto .mini button[aria-pressed="true"]{border-color:var(--tinta)}
.produto .mini img{width:100%;height:100%;object-fit:contain}
.produto h3{font-size:2rem;font-weight:500;margin:6px 0 10px}
.preco{display:flex;align-items:baseline;gap:12px;font-family:var(--sans);margin:12px 0}
.preco b{font-family:var(--serif);font-size:2.6rem;font-weight:600}
.preco s{color:var(--cinza)}
.dados{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.88rem;margin:12px 0}
.dados th,.dados td{text-align:left;padding:7px 0;border-bottom:1px solid var(--regra);vertical-align:top}
.dados th{width:42%;color:var(--tinta2);font-weight:600}
.aviso-prod{font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--tinta2);border-left:3px solid var(--carimbo);padding-left:10px;margin-top:12px}

/* ---- perguntas ---- */
.perg details{border-top:1px solid var(--tinta)}
.perg details:last-child{border-bottom:1px solid var(--tinta)}
.perg summary{list-style:none;cursor:pointer;font-weight:600;font-size:1.2rem;padding:14px 28px 14px 0;position:relative}
.perg summary::-webkit-details-marker{display:none}
.perg summary::after{content:"+";position:absolute;right:0;top:10px;font-family:var(--sans);font-size:1.4rem}
.perg details[open] summary::after{content:"−"}
.perg details p{font-size:1.05rem}
.urgente{border:2px solid var(--carimbo);padding:14px 16px;font-family:var(--sans);font-size:.92rem;margin:1.4em 0;background:var(--branco)}
.urgente b{color:var(--carimbo)}

/* ---- páginas internas ---- */
.pag-cab{border-bottom:1px solid var(--tinta);padding:clamp(28px,5vw,56px) 0 22px}
.pag-cab h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:500;margin:10px 0}
.pag-cab p{color:var(--tinta2);max-width:40em}
.doc{max-width:820px;padding:clamp(24px,4vw,44px) 0 clamp(50px,7vw,90px)}
.doc h2{font-size:1.7rem;font-weight:500;margin:1.7em 0 .4em}
.doc h3{font-size:1.22rem;font-weight:600;margin:1.15em 0 .35em}
.doc table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.9rem;margin:1em 0}
.doc th,.doc td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--regra);vertical-align:top}
.doc thead th{border-bottom:2px solid var(--tinta)}
.doc .indice{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--sans);font-size:.86rem;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);padding:12px 0;margin:4px 0 8px}
.doc .indice a{text-decoration:none}
.doc .cartoes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.1em 0 1.3em}
@media (max-width:680px){.doc .cartoes{grid-template-columns:1fr}}
.doc .cartoes article{background:var(--branco);border:1px solid var(--tinta);padding:14px 16px}
.doc .cartoes h3{margin:4px 0 8px}
.doc .cartoes p:last-child{margin:0}
.form label{display:block;font-family:var(--sans);font-size:.8rem;font-weight:700;margin:12px 0 4px}
.form select,.form textarea,.form input[type=text],.form input[type=email],.form input[type=tel]{width:100%;font:inherit;font-size:1rem;padding:10px;border:1px solid var(--tinta);background:var(--branco);border-radius:0}
.form textarea{min-height:160px}
.form .par{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:680px){.form .par{grid-template-columns:1fr}}

/* ---- rodapé ---- */
.rod{border-top:3px solid var(--tinta);margin-top:40px;font-family:var(--sans);font-size:.85rem;color:var(--tinta2)}
.rod .grelha{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:28px;padding:30px 0}
@media (max-width:860px){.rod .grelha{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rod .grelha{grid-template-columns:1fr}}
.rod h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin-bottom:10px}
.rod ul{list-style:none;padding:0;margin:0}.rod li{margin-bottom:6px}
.rod a{color:var(--tinta)}
.rod .marca{text-align:left}
.rod .marca span{font-size:2rem}
.rod .legal{border-top:1px solid var(--regra);padding:18px 0 30px;display:grid;gap:8px;font-size:.78rem;line-height:1.55}
.rod .legal b{color:var(--tinta)}

.ck{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;z-index:60;background:var(--branco);border:1px solid var(--tinta);padding:16px 18px;font-family:var(--sans);font-size:.88rem;box-shadow:6px 6px 0 var(--tinta)}
.ck p{margin:0 0 10px}
.ck .b{display:flex;gap:8px;flex-wrap:wrap}