/* Bazara33 Afiliadas — inspirado no Shopify Editions Winter '26:
   topo preto, seções em papel com textura;
   títulos pesados e apertados com uma palavra em itálico; capitular grande em itálico; listas em duas colunas.
   Fonte única: Montserrat. Cores da marca: marrom café, off-white, preto. */
:root{
  --noite:#110D0A; --noite-2:#1B1511; --linha-noite:rgba(244,239,232,.14);
  --papel:#EEE9E1; --papel-2:#F6F2EC; --ink:#14100D; --muted:#6B6058;
  --brown:#4C3A29; --brown-2:#6B5340; --brown-soft:#B9A794; --off:#F4EFE8;
  --line:#D9D1C6; --tint:#E4DDD3;
  --good:#3F6B4A; --warn:#9A6A1F; --bad:#9B3B30;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:6px;
  color-scheme:light;
  /* textura de papel (ruído bem sutil) */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel) var(--grao);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:700;line-height:1.02;letter-spacing:-.035em}
h1 em,.display em,.capitular em{font-style:italic;font-weight:400;letter-spacing:-.02em}
h2{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
h3{font-size:.95rem;font-weight:700}
.eyebrow{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lead{font-size:1.02rem;color:var(--muted);max-width:58ch;margin:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.erro{color:var(--bad);margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brown);outline-offset:2px}

/* botões: pílula clara (como o "Start for free") e retangular marrom */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--ink);color:var(--off);border:1px solid var(--ink);padding:.75rem 1.3rem;font-weight:600;font-size:.85rem;border-radius:999px;text-decoration:none}
.btn:hover{background:var(--brown);border-color:var(--brown)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--off)}
.btn.claro{background:var(--off);color:var(--ink);border-color:var(--off)}
.btn.claro:hover{background:#fff}
.btn.contorno-claro{background:transparent;color:var(--off);border-color:rgba(244,239,232,.5)}
.btn.contorno-claro:hover{border-color:var(--off)}
.btn.small{padding:.42rem .9rem;font-size:.74rem}
.btn.block{width:100%;padding-block:1rem}
.seta::after{content:"↗";font-weight:500}
.linkbtn{background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:3px;padding:0;font-size:.85rem;font-weight:500}

/* topo preto */
header{background:var(--noite);color:var(--off);position:sticky;top:0;z-index:5}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:14px}
.logo{display:grid;gap:2px;line-height:1.1}
/* a logo é preta: invertida ela fica off-white sobre o preto */
.logo img{display:block;height:17px;width:auto;filter:invert(1);mix-blend-mode:screen}
.logo span{font-size:.72rem;color:rgba(244,239,232,.55);font-weight:500}
.mode{display:flex;border:1px solid var(--linha-noite);border-radius:999px;overflow:hidden}
.mode button{background:none;border:0;padding:.38rem .85rem;font-size:.72rem;font-weight:600;color:rgba(244,239,232,.6)}
.mode button[aria-pressed="true"]{background:var(--off);color:var(--ink)}
header .linkbtn{color:var(--off)}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--linha-noite)}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs:empty{display:none}
nav.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.7rem .8rem;white-space:nowrap;font-size:.8rem;color:rgba(244,239,232,.6)}
nav.tabs button[aria-current="page"]{color:var(--off);border-bottom-color:var(--off);font-weight:600}

main{padding-block:40px 80px}
.view{display:grid;gap:28px}
.cabeca{display:grid;gap:12px}
.panel{background:var(--papel-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;min-width:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media (max-width:620px){.g2{grid-template-columns:1fr}}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.stat{display:grid;gap:6px;align-content:start}
.stat .l{font-size:.7rem;font-weight:600;color:var(--muted)}
.stat .v{font-size:1.7rem;font-weight:700;letter-spacing:-.03em}
.destaque{background:var(--noite) var(--grao);border-color:var(--noite);color:var(--off)}
.destaque .l{color:var(--brown-soft)}
/* o cupom encolhe para caber no cartão (cqi = % da largura do cartão) */
.stat:has(.cupom-card){container-type:inline-size}
.stat .v.cupom-card{color:var(--brown);letter-spacing:.03em;white-space:nowrap;font-size:min(1.6rem,11cqi)}
.cupom{font-size:clamp(2rem,7vw,3.2rem);font-weight:800;letter-spacing:.12em;color:var(--ink)}

/* capitular e listas em duas colunas */
.capitular{font-size:clamp(1.6rem,4.4vw,2.6rem);font-weight:500;line-height:1.12;letter-spacing:-.03em;max-width:22ch;margin:0}
.capitular::first-letter{font-style:italic;font-weight:500;font-size:2.6em;float:left;line-height:.8;margin:.06em .06em 0 -.04em}
.lista2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 48px}
.lista2 div{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:12px}
.lista2 b{font-weight:700;font-size:.95rem}
.lista2 p{margin:0;color:var(--muted);font-size:.88rem}
@media (max-width:620px){.lista2{grid-template-columns:1fr}}
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.numeros div{padding:20px 16px 20px 0;display:grid;gap:4px}
.numeros div+div{border-left:1px solid var(--line);padding-left:16px}
.numeros b{font-size:clamp(2rem,6vw,3.2rem);font-weight:700;letter-spacing:-.05em;line-height:1}
@media (max-width:620px){.numeros{grid-template-columns:1fr}.numeros div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}}
.auth{max-width:640px;margin:0 auto}

/* formulários */
label{display:grid;gap:6px;font-size:.74rem;font-weight:600;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea{border:1px solid var(--line);background:#FBF9F5;padding:.75rem .85rem;border-radius:var(--r);width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--ink);font-weight:400}
.check input{margin-top:.2rem;accent-color:var(--ink)}
form{display:grid;gap:16px}
.campo-copia{display:flex;border:1px solid var(--line);border-radius:var(--r);background:#FBF9F5;min-width:0}
.campo-copia input{border:0;background:transparent;flex:1;min-width:0}
.campo-copia button{border:0;border-left:1px solid var(--line);background:none;padding:0 1rem;font-size:.75rem;font-weight:700}

/* alternador cupom / link */
.troca{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden;justify-self:start}
.troca button{background:none;border:0;padding:.55rem 1.3rem;font-size:.82rem;font-weight:600}
.troca button[aria-pressed="true"]{background:var(--ink);color:var(--off)}

/* tabelas */
.tablebox{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px;border-bottom:1px solid var(--ink)}
td{padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:0}
.r{text-align:right}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.7rem;font-weight:600;border:1px solid currentColor}
.p-pendente{color:var(--warn)}.p-aprovada,.p-aberto{color:var(--brown)}.p-paga,.p-pago{color:var(--good)}.p-cancelada{color:var(--bad)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:none;padding:.35rem .85rem;border-radius:999px;font-size:.75rem;font-weight:500}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--off);border-color:var(--ink)}
.bar{height:4px;background:var(--tint);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink)}
details{border-bottom:1px solid var(--line);padding:14px 0}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:700}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--noite);color:var(--off);padding:.75rem 1.2rem;font-size:.82rem;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* banco de imagens */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.foto-card{display:grid;gap:8px;text-align:left;background:var(--papel-2);border:1px solid var(--line);border-radius:var(--r);padding:0 0 12px;overflow:hidden;cursor:pointer}
.foto-card:hover{border-color:var(--ink)}
.foto-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--tint)}
.foto-card span{display:grid;gap:2px;padding:0 12px}
.foto-card b{font-size:.85rem;font-weight:600;line-height:1.3}
.foto-card small{font-size:.74rem;color:var(--muted)}
.modal{position:fixed;inset:0;z-index:20;background:rgba(17,13,10,.6);display:grid;place-items:center;padding:16px}
.modal-caixa{background:var(--papel) var(--grao);border-radius:12px;padding:22px;width:min(980px,100%);max-height:calc(100svh - 32px);overflow:auto;display:grid;gap:16px}
.peca{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.peca img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);background:var(--tint)}
@media (max-width:620px){.peca{grid-template-columns:1fr}}