/* Vina News — site (edição + índice). Tokens do brandbook v2.0. Não invente cores novas. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans-latin-wdth-normal.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url("/assets/fonts/permanent-marker-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --carvao:#1E1B18; --carvao-2:#2E2A25; --tinta-2:#57504A;
  --mostarda:#F7B924; --mostarda-soft:#FCE6A6; --tostado:#9E5A30;
  --pao:#EFD3A2; --pao-soft:#F7E8CD; --concreto:#E9E7E2; --concreto-2:#DDDAD3; --papel:#F7F6F3; --linha:#CFCBC2;
  --display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --hand:"Permanent Marker","Comic Sans MS","Segoe Print",cursive;
}
*{box-sizing:border-box}
html{background:var(--papel)}
body{margin:0;background:var(--papel);color:var(--carvao);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:3px solid var(--tostado);outline-offset:3px;border-radius:8px}
.in{max-width:640px;margin-inline:auto;padding-inline:20px}
.splat{position:absolute;pointer-events:none}

/* topo */
.topo{background:var(--mostarda);position:relative;overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
.topo .splat{width:280px;height:224px;right:-80px;top:-80px;--sp:#FFCB45;transform:rotate(20deg)}
.topo .in{position:relative;padding-block:40px 28px;display:grid;gap:18px;justify-items:start}
.onda-topo{display:block;width:100%;height:34px;background:var(--mostarda)}
.onda-topo path{fill:var(--papel)}

/* logo */
.mk{display:inline-block;flex:none;overflow:visible}
.lockup{--s:48px;display:inline-flex;align-items:center;gap:calc(var(--s)*.16);color:var(--wm,var(--carvao));text-decoration:none}
.lockup .mk{width:calc(var(--s)*1.55);height:calc(var(--s)*.61)}
.wm{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:var(--s);line-height:.8;letter-spacing:-.05em;padding-bottom:.1em}
.news{font-family:var(--mono);font-weight:600;font-size:calc(var(--s)*.2);letter-spacing:.14em;text-transform:uppercase;color:var(--carvao);background:var(--news-bg,var(--mostarda));border:max(1.5px,calc(var(--s)*.03)) solid var(--carvao);box-shadow:max(1.5px,calc(var(--s)*.04)) max(1.5px,calc(var(--s)*.04)) 0 var(--carvao);border-radius:99px;padding:.22em .75em .16em;transform:rotate(-8deg) translateY(-.9em);align-self:flex-start;margin-top:calc(var(--s)*.12);white-space:nowrap}
.topo .lockup{--s:clamp(38px,10.5vw,54px);--news-bg:var(--pao)}
.meta-ed{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:500}
.meta-ed span:first-child{background:var(--carvao);color:var(--mostarda);border-radius:99px;padding:1px 9px;font-weight:600}

/* abertura */
main.in{padding-top:20px}
.abertura{display:grid;gap:18px}
.abertura h1{font-size:clamp(28px,7vw,34px);font-weight:900;font-stretch:105%;line-height:1.04}
.rabisco{background:linear-gradient(transparent 56%,var(--mostarda) 56%,var(--mostarda) 90%,transparent 90%);padding-inline:.08em;margin-inline:-.08em}
.mao{font-family:var(--hand);font-weight:400;letter-spacing:0;color:var(--carvao);display:inline-block;transform:rotate(-2deg);line-height:1.15;font-size:1.08em}
.indice{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* adesivos */
.tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px 4px;border-radius:99px;background:var(--c);color:var(--t,var(--carvao));white-space:nowrap;border:1.5px solid var(--tb,var(--carvao));display:inline-block;justify-self:start}
.tag.stk{box-shadow:2px 2px 0 var(--tb,var(--carvao));transform:rotate(var(--r,-2deg))}
.t-tend{--c:var(--pao)}
.t-grow{--c:var(--mostarda);--r:2deg}
.t-perf{--c:var(--tostado);--t:#FFFFFF}
.t-ia{--c:var(--concreto);--r:-1deg}
.t-camp{--c:var(--carvao);--t:var(--mostarda)}
.tag.stk.t-camp-dest{--c:var(--mostarda);--tb:var(--mostarda);--r:-3deg;box-shadow:none}

/* separadores */
.linha-vina{display:block;width:100%;height:26px;margin-block:44px}
.linha-vina.curta{width:160px;height:18px;margin-block:32px}

/* seções e itens */
.secao{display:grid;gap:24px}
.item{display:grid;gap:16px}
.item h2{font-size:clamp(23px,5.6vw,27px);font-weight:900;line-height:1.08}
.item p{font-size:16.5px}
.porque,.pratica{border-radius:26px 26px 26px 8px;padding:18px 22px;font-size:15.5px!important;border:1.5px solid var(--carvao)}
.porque{background:var(--pao-soft)}
.pratica{background:var(--mostarda-soft)}
.porque b,.pratica b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
.fonte{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:4px;font-family:var(--mono);font-size:12px}
.fonte a{font-weight:600;text-decoration:none;background:linear-gradient(transparent 58%,var(--mostarda) 58%,var(--mostarda) 92%,transparent 92%);padding-inline:.1em}
.fonte a:hover{background:var(--mostarda);border-radius:99px}
.fonte span{letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);font-weight:500}

/* campanha do dia */
.camp{background:var(--carvao);color:var(--concreto);margin-top:48px;padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.camp-onda{display:block;width:100%;height:40px;background:var(--papel)}
.camp-onda path{fill:var(--carvao)}
.camp .in{padding-top:20px}
.camp .item h2{color:var(--concreto)}
.camp .item p{color:#D8D3CB}
.camp .porque,.camp .pratica{background:var(--carvao-2);border-color:var(--mostarda);color:var(--concreto)}
.camp .porque b,.camp .pratica b{color:var(--mostarda)}
.camp .fonte a{color:var(--mostarda);background:none;border-bottom:2px solid var(--mostarda)}
.camp .fonte a:hover{background:var(--mostarda);color:var(--carvao);border-radius:4px}
.camp .fonte span{color:#B9B2A8}
.pais{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pao)}
.nota{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.nota > b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mostarda);margin-right:6px}
.camp .mao{color:var(--mostarda);font-size:18px;margin-left:6px}
.radar{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B9B2A8;margin-top:20px}
.rodape{display:grid;gap:14px}
.rodape .sign{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2;color:var(--concreto)}
.rodape p{color:#B9B2A8;font-size:14.5px}
.rodape .lockup{--s:28px;--wm:var(--concreto);--mk-line:#2E2A25;margin-top:10px}
.rodape .voltar{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mostarda);text-decoration:none;border-bottom:2px solid var(--mostarda);justify-self:start}

/* CTA do grupo de WhatsApp (rodapé escuro: sombra em Concreto para a sombra chapada aparecer) */
.cta-grupo{display:grid;gap:14px;justify-items:start;margin-top:14px}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:48px;max-width:calc(100% - 6px);margin-right:6px;padding:13px 20px 12px;background:var(--mostarda);color:var(--carvao);font-family:var(--display);font-weight:800;font-size:clamp(14px,4.1vw,17px);line-height:1.15;letter-spacing:-.015em;text-decoration:none;border:2px solid var(--carvao);border-radius:28px;box-shadow:2px 2px 0 var(--concreto);transform:rotate(-2deg);transition:transform .15s ease,box-shadow .15s ease}
.cta-btn:hover,.cta-btn:active{box-shadow:0 0 0 var(--concreto);transform:rotate(-2deg) translate(2px,2px)}
.camp .cta-btn:focus-visible{outline:3px solid var(--concreto);outline-offset:4px;border-radius:99px}
.rodape .cta-apoio{color:#B9B2A8;font-size:14.5px}

/* Instagram no topo amarelo: recado à mão (Permanent Marker, até 6 palavras, inclinado) + ícone num selo carvão */
.topo-ig{position:absolute;z-index:2;top:28px;right:20px;display:flex;align-items:center;gap:10px;color:var(--carvao);text-decoration:none}
.topo-ig-txt{font-family:var(--hand);font-weight:400;font-size:20px;line-height:1.08;text-align:right;white-space:nowrap;transform:rotate(-4deg) translateY(-2px)}
.topo-ig-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--mostarda);background:var(--carvao);border:2px solid var(--carvao);border-radius:50%;box-shadow:2px 2px 0 var(--pao-soft);transform:rotate(4deg);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.topo-ig-ic .ic{width:24px;height:24px}
.topo-ig:hover .topo-ig-ic,.topo-ig:active .topo-ig-ic{background:var(--pao-soft);color:var(--carvao);box-shadow:0 0 0 var(--pao-soft);transform:rotate(4deg) translate(2px,2px)}
.topo-ig:focus-visible{outline:3px solid var(--carvao);outline-offset:4px;border-radius:24px}
/* celular: não há espaço ao lado do logo, então o conjunto ganha uma linha própria no fim do topo */
@media (max-width:519px){
  .topo .in{padding-block:32px 66px;gap:14px}
  .topo-ig{top:auto;bottom:14px}
  .topo-ig-txt{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.topo-ig-ic{transition:none}}

/* ícones dos botões (traço simples em currentColor: sem o verde do WhatsApp nem o degradê do Instagram) */
.ic{width:22px;height:22px;flex:none;display:block}

/* Instagram: ação secundária (no rodapé escuro: contorno Concreto; no topo da home: cartela branca com contorno Carvão) */
.cta-ig{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 18px 9px 14px;margin-right:4px;color:var(--concreto);font-family:var(--display);font-weight:800;font-size:15.5px;line-height:1.1;letter-spacing:-.01em;text-decoration:none;border:2px solid var(--concreto);border-radius:99px;box-shadow:2px 2px 0 var(--mostarda);transform:rotate(1deg);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.cta-ig .at{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.02em;color:#B9B2A8}
.cta-ig:hover,.cta-ig:active{background:var(--concreto);color:var(--carvao);box-shadow:0 0 0 var(--mostarda);transform:rotate(1deg) translate(2px,2px)}
.cta-ig:hover .at,.cta-ig:active .at{color:var(--tinta-2)}
.camp .cta-ig:focus-visible{outline:3px solid var(--concreto);outline-offset:4px;border-radius:99px}

/* CTA no início da home (fundo claro): só o WhatsApp, leve, para a lista de edições aparecer logo abaixo */
.cta-hero{display:grid;gap:10px;justify-items:start;margin-top:22px}
.cta-hero .cta-btn{width:auto;max-width:100%;margin:0;min-height:50px;gap:10px;padding:11px 20px 10px 15px;font-size:16px;border-radius:99px;box-shadow:2px 2px 0 var(--carvao);transform:rotate(-1.5deg)}
.cta-hero .cta-btn:hover,.cta-hero .cta-btn:active{box-shadow:0 0 0 var(--carvao);transform:rotate(-1.5deg) translate(2px,2px)}
.cta-hero .cta-btn .ic{width:22px;height:22px}
.cta-hero .cta-apoio{font-size:14px;color:var(--tinta-2)}
.cta-hero + .linha-vina{margin-block:30px}
@media (max-width:519px){.cta-hero + .linha-vina{margin-block:16px 18px}.cta-hero + .linha-vina + .secao{gap:16px}}
/* celular: WhatsApp na largura toda, em duas linhas de propósito ("Viu no Vina?" em cima, ação embaixo), sem palavra órfã */
@media (max-width:519px){
  .cta-hero .cta-btn{width:calc(100% - 4px);justify-content:flex-start;text-align:left;gap:12px;min-height:54px;padding:9px 18px 8px 14px;border-radius:26px}
  .cta-hero .cta-btn .txt{display:grid;gap:1px}
  .cta-hero .cta-btn .q{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
  .cta-hero .cta-btn .a{font-size:clamp(16px,4.6vw,18px);line-height:1.1}
}
@media (prefers-reduced-motion:reduce){.cta-btn,.cta-ig{transition:none}}

/* índice de edições */
.lista{display:grid;gap:14px;margin:8px 0 0;padding:0;list-style:none}
.lista a{display:grid;gap:6px;text-decoration:none;background:#fff;border:1.5px solid var(--carvao);border-radius:26px 26px 26px 8px;padding:18px 22px;box-shadow:3px 3px 0 var(--carvao)}
.lista a:hover{background:var(--mostarda-soft)}
.lista .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.lista .t{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.02em}
.vazio{font-size:16px;color:var(--tinta-2)}

/* aviso de cookies (GA4) */
.cookie{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;max-width:520px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 18px;background:var(--carvao);color:var(--papel);border-radius:28px;font-size:14px;line-height:1.45;box-shadow:2px 2px 0 var(--mostarda)}
.cookie[hidden]{display:none}
.cookie p{flex:1 1 220px}
.cookie-bt{display:flex;gap:8px}
.cookie button{font:inherit;font-family:var(--display);font-weight:800;font-size:14px;min-height:40px;padding:8px 18px;border-radius:99px;cursor:pointer;border:2px solid var(--mostarda)}
.cookie-sim{background:var(--mostarda);color:var(--carvao)}
.cookie-nao{background:transparent;color:var(--papel)}