:root { color-scheme: light dark; --bg:#f8fafc; --card:#fff; --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --accent:#c2410c; --soft:#fff7ed; --code:#f1f5f9; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1120; --card:#111827; --ink:#e5e7eb; --muted:#a3b1c6; --line:#1f2937; --accent:#fb923c; --soft:#1f150d; --code:#0f172a; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); text-underline-offset:2px; }
img { max-width:100%; height:auto; }
.skip { position:absolute; left:-9999px; } .skip:focus { left:16px; top:8px; background:var(--card); padding:8px 12px; z-index:9; }
.wrap { max-width:820px; margin:0 auto; padding:0 16px; }
main.wide { max-width:1080px; }
.top { background:var(--card); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; padding-block:8px; }
.brand { font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand span { color:var(--accent); }
.menu { display:flex; gap:4px 14px; flex-wrap:wrap; margin-left:auto; font-size:15px; }
.menu a { color:var(--muted); text-decoration:none; font-weight:600; }
.menu a[aria-current="page"], .menu a:hover { color:var(--accent); }
.crumbs { font-size:14px; color:var(--muted); margin:20px 0 0; }
.crumbs a { color:inherit; }
.page-head { margin:16px 0 20px; }
.kicker { text-transform:uppercase; letter-spacing:.08em; font-size:13px; font-weight:700; color:var(--accent); margin:0 0 6px; }
h1 { font-size:clamp(28px,4.2vw,40px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; text-wrap:balance; }
h2 { font-size:24px; line-height:1.25; margin:40px 0 12px; letter-spacing:-.01em; text-wrap:balance; }
h3 { font-size:19px; margin:24px 0 6px; }
p, li { text-wrap:pretty; }
.dates { color:var(--muted); font-size:14px; margin:0; }
.dates a { color:inherit; }
.answer { background:var(--soft); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:14px 18px; font-size:18px; }
.answer p { margin:0; }
table { width:100%; border-collapse:collapse; font-size:15px; margin:12px 0; background:var(--card); }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.tbl { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.tbl table { margin:0; }
ol.list { list-style:none; padding:0; counter-reset:item; display:grid; gap:12px; }
ol.list > li { counter-increment:item; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px 14px 56px; position:relative; }
ol.list > li::before { content:counter(item); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--soft); color:var(--accent); font-weight:800; display:grid; place-items:center; font-size:14px; }
ol.list h3 { margin:0 0 4px; font-size:18px; }
ol.list p { margin:4px 0 0; }
.meta { color:var(--muted); font-size:14px; }
.tag { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--soft); color:var(--accent); margin-right:4px; }
.author { display:flex; gap:18px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin:36px 0; }
.author img { border-radius:50%; flex:none; object-fit:cover; }
.author p { margin:0; }
.author-k { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.author-n { font-size:20px; font-weight:800; }
.author-n a { color:var(--ink); text-decoration:none; }
.author-n span { color:var(--muted); font-weight:600; font-size:16px; }
.author-b { color:var(--muted); font-size:15px; }
.author-l { margin-top:8px !important; display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:15px; font-weight:600; }
.author.featured { border:2px solid var(--accent); margin:24px 0; }
.btn { display:inline-block; background:var(--accent); color:#fff !important; text-decoration:none; padding:6px 12px; border-radius:8px; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:8px 0; }
summary { font-weight:700; cursor:pointer; }
details p { margin:8px 0 2px; }
.sources ol { font-size:14px; color:var(--muted); padding-left:22px; }
.sources a { overflow-wrap:anywhere; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; padding:0; list-style:none; }
.cards li { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.cards a { font-weight:700; font-size:18px; text-decoration:none; }
.cards p { margin:6px 0 0; color:var(--muted); font-size:15px; }
.note { font-size:14px; color:var(--muted); }
.foot { border-top:1px solid var(--line); margin-top:48px; padding:20px 0 32px; color:var(--muted); font-size:14px; }
.foot a { color:inherit; }
@media (max-width:560px) { body { font-size:16px; } .author { flex-direction:column; align-items:flex-start; } .menu { margin-left:0; } ol.list > li { padding-left:48px; } ol.list > li::before { left:12px; } }
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:20px 0}.gallery figure{margin:0;min-width:0}.gallery picture{display:block;overflow:hidden;border-radius:12px}.gallery img{width:100%;height:240px;object-fit:cover;object-position:50% 25%;border-radius:12px;display:block;background:var(--line)}.gallery figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.hero-photo{margin:20px 0;max-width:320px}.hero-photo img{border-radius:20px;display:block;width:100%;height:auto}.hero-photo figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.howmade{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.legal{font-size:14px}
.service{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px 8px;margin:28px 0}.service h2{margin-top:16px}
picture{display:contents}
.brand span{display:inline-block}
/* Animações (lib/anima.js). Nada fica escondido pelo CSS; html.anim só liga cabeçalho fixo, pulso e hover. */
.anim .top{position:sticky;top:0;z-index:5}
.progress{position:fixed;inset:0 0 auto;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:6;pointer-events:none}
.anim .btn{animation:pulso 2.8s ease-out infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
.anim .cards li,.anim ol.list>li{transition:box-shadow .3s,border-color .3s}
.anim .cards li:hover,.anim ol.list>li:hover{border-color:var(--accent);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--accent) 45%,transparent)}
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}
/* Rede de segurança: transformações das animações (zoom, inclinação) nunca criam rolagem lateral. */
body{overflow-x:clip}
.hero-photo{max-width:min(320px,100%)}
/* Alvo de toque de pelo menos 24 px nos links soltos (padding em inline não mexe no layout). */
.crumbs a,main li a,.author a,.foot a,.menu a{padding-block:6px}
details summary{padding-block:4px}
/* Telas grandes em 100%: amplia tudo para a coluna não virar um fiapo no meio. */
@media (min-width:2200px){body{zoom:1.3}}@media (min-width:3200px){body{zoom:1.75}}