/* batom.net — design system
   Paleta: Papel #FFF9F6 · Tinta #26161C · Cereja #AD1140 · Vinho #5E0B2B · Goiaba #F0708A · Malva #896971
   Malva é o cinza-rosado de apoio (.sub, .cartao span, .aviso, .migalha): mantém 4.6:1 sobre
   --papel e 4.8:1 sobre --card. Não clareie além disso ou o contraste cai abaixo de 4.5:1. */
:root{
  --papel:#FFF9F6; --tinta:#26161C; --cereja:#AD1140; --vinho:#5E0B2B;
  --goiaba:#F0708A; --malva:#896971; --linha:#EBD9DC; --card:#FFFFFF;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{font-family:var(--sans);color:var(--tinta);background:var(--papel);line-height:1.65;font-size:1.0625rem}
a{color:var(--cereja)}
a:focus-visible,button:focus-visible{outline:3px solid var(--goiaba);outline-offset:2px}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}

/* ---------- header ---------- */
.topo{background:var(--card);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:50}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{font-family:var(--serif);font-size:1.55rem;font-weight:700;letter-spacing:-.02em;color:var(--tinta);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo b{color:var(--cereja)}
.logo::before{content:"";width:26px;height:13px;border-radius:9px 12px 11px 8px;background:linear-gradient(100deg,var(--vinho),var(--cereja) 55%,var(--goiaba));transform:rotate(-6deg)}
.menu{display:flex;gap:1.4rem;list-style:none;flex-wrap:wrap}
.menu a{color:var(--tinta);text-decoration:none;font-size:.95rem;font-weight:500}
.menu a:hover,.menu a[aria-current=page]{color:var(--cereja)}
.hamb{display:none;background:none;border:1px solid var(--linha);border-radius:8px;padding:.45rem .6rem;font-size:1.1rem;cursor:pointer;color:var(--tinta)}
@media(max-width:840px){
  .hamb{display:block}
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--linha);flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem}
  .menu.aberto{display:flex}
  .menu li{border-top:1px solid var(--linha)}
  .menu a{display:block;padding:.7rem 0}
}

/* ---------- hero ---------- */
.hero{padding:3.5rem 0 2.5rem;text-align:left}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.1rem);line-height:1.12;letter-spacing:-.02em;max-width:20ch}
.hero h1 em{color:var(--cereja);font-style:italic}
.hero p{max-width:58ch;margin:1rem 0 0;color:#4a3a40}
.aviso{font-size:.8rem;color:var(--malva);margin-top:.9rem}

/* swatch strip — elemento assinatura */
.swatches{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 0;padding:0;list-style:none}
.swatches a{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:var(--tinta);font-size:.82rem;font-weight:600}
.swatches i{display:block;width:84px;height:30px;border-radius:14px 22px 18px 10px;transform:rotate(-2deg);transition:transform .15s}
.swatches a:hover i{transform:rotate(0) scale(1.05)}

/* ---------- seções ---------- */
.sec{padding:2.6rem 0}
.sec-alt{background:var(--card);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
h2{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.05rem);letter-spacing:-.015em;margin-bottom:.4rem}
.sub{color:var(--malva);margin-bottom:1.6rem;max-width:62ch}
h3{font-family:var(--serif);font-size:1.28rem;margin:1.8rem 0 .5rem}
.miolo p{margin:.8rem 0;max-width:70ch}
.miolo ul,.miolo ol{margin:.8rem 0 .8rem 1.4rem;max-width:68ch}
.miolo li{margin:.35rem 0}

/* grid de categorias com swatch */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.4rem}
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:1.1rem 1.2rem;text-decoration:none;color:var(--tinta);display:block;transition:border-color .15s,transform .15s}
.cartao:hover{border-color:var(--goiaba);transform:translateY(-2px)}
.cartao i{display:block;width:64px;height:22px;border-radius:11px 16px 14px 8px;transform:rotate(-3deg);margin-bottom:.7rem;background:linear-gradient(100deg,var(--vinho),var(--cereja) 60%,var(--goiaba))}
.cartao strong{font-family:var(--serif);font-size:1.08rem;display:block}
.cartao span{font-size:.88rem;color:var(--malva)}

/* swatch modifiers */
.s-vermelho{background:linear-gradient(100deg,#7A0C1E,#C1121F 60%,#E5383B)}
.s-nude{background:linear-gradient(100deg,#8D5B4C,#C08A76 60%,#E0B29E)}
.s-rosa{background:linear-gradient(100deg,#B4326B,#E75480 60%,#F8A1BC)}
.s-vinho{background:linear-gradient(100deg,#3C0919,#5E0B2B 60%,#8A1E4A)}
.s-marrom{background:linear-gradient(100deg,#4E2A1E,#7B4A33 60%,#A5714F)}
.s-coral{background:linear-gradient(100deg,#D9442B,#F26B4E 60%,#FF9E7D)}
.s-matte{background:linear-gradient(100deg,#6E1230,#A4133C 60%,#C9184A)}
.s-gloss{background:linear-gradient(100deg,#E58BA0,#F6A9BC 55%,#FFD3DE);box-shadow:inset 0 -4px 8px rgba(255,255,255,.7)}

/* ---------- produtos ---------- */
.produto{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:1.4rem;margin:1.1rem 0;display:flex;flex-direction:column;gap:.5rem}
.produto h3{margin:0;font-size:1.22rem}
.selo{align-self:flex-start;background:var(--vinho);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:.22rem .7rem}
.produto p{max-width:70ch}
.pros{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:.2rem 0}
.pros li{font-size:.82rem;background:var(--papel);border:1px solid var(--linha);border-radius:99px;padding:.2rem .7rem;color:#5c454d}
.btn{align-self:flex-start;display:inline-block;background:var(--cereja);color:#fff;text-decoration:none;font-weight:700;border-radius:10px;padding:.7rem 1.4rem;margin-top:.4rem;transition:background .15s}
.btn:hover{background:var(--vinho)}
.btn-2{align-self:flex-start;display:inline-block;border:2px solid var(--cereja);color:var(--cereja);text-decoration:none;font-weight:700;border-radius:10px;padding:.6rem 1.3rem;margin-top:.4rem}
.btn-2:hover{background:var(--cereja);color:#fff}

/* tabela comparativa */
.tabela{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem;background:var(--card)}
.tabela th,.tabela td{border:1px solid var(--linha);padding:.65rem .8rem;text-align:left;vertical-align:top}
.tabela th{background:var(--papel);font-family:var(--serif)}
.rolagem{overflow-x:auto}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--linha);border-radius:12px;margin:.6rem 0;padding:.9rem 1.1rem}
.faq summary{font-weight:700;cursor:pointer;font-family:var(--serif);font-size:1.05rem}
.faq details p{margin-top:.6rem;max-width:70ch}

/* breadcrumb */
.migalha{font-size:.83rem;color:var(--malva);padding:1.1rem 0 0}
.migalha a{color:var(--malva)}
.migalha a:hover{color:var(--cereja)}

/* ---------- footer ---------- */
.rodape{background:var(--tinta);color:#E9DCE0;margin-top:3rem;padding:2.8rem 0 2rem;font-size:.92rem}
.rodape h2{color:#fff;font-size:1.15rem;margin-bottom:.6rem}
.rodape a{color:#F3B7C4;text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.6rem}
.rodape ul{list-style:none}
.rodape li{margin:.3rem 0}
.disclosure{border-top:1px solid #4a3540;margin-top:2rem;padding-top:1.2rem;color:#B79AA3;font-size:.8rem;max-width:80ch}