/* ============================================================
   PORTAL FRAME 2.0 — design system
   Identidade: preto, grafite, branco e cinza. O vermelho da logo
   (o F) é a única cor de destaque e aparece pouco, sempre com motivo.

   Regras do sistema
   - Cor: um acento só (--accent). Laranja aparece apenas no degradê
     da própria logo (--brand-grad), nunca em componente solto.
   - Raios: 4px (selos), 6px (botões, campos, abas), 10px (cards),
     14px (modais). Nada de pílula, exceto contadores numéricos.
   - Tipo: Archivo (variável, com largura) para tudo; títulos mais
     largos e pesados. JetBrains Mono só para dados: datas, números,
     códigos e rótulos curtos.
   - Movimento: rápido e sutil, só transform/opacity. Tudo some com
     prefers-reduced-motion.
   ============================================================ */

/* fontes servidas pelo próprio site (antes vinham do Google Fonts: um servidor a menos no caminho e o IP
   de quem visita não vai para o Google). Arquivos oficiais do Google Fonts, licença OFL. */
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* fontes reserva (v43): enquanto a Archivo não chega, o texto sai em Arial (PC, Mac, iPhone) ou Roboto (Android)
   com a largura ajustada (size-adjust) para ocupar o mesmo espaço. Quando a Archivo entra, nada muda de linha:
   antes o título da home passava de 2 para 3 linhas e empurrava a página (CLS). Medido no Chromium com o texto do
   site: corpo Archivo/Arial ~99%, Archivo/Roboto ~100%; títulos (Archivo 800 com font-stretch 112–115%)
   ~117% da Arial e ~124% da Roboto. A Arial em negrito vem da própria face Bold */
@font-face{font-family:'Archivo Reserva';font-weight:100 599;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Helvetica');size-adjust:99%}
@font-face{font-family:'Archivo Reserva';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');size-adjust:99%}
@font-face{font-family:'Archivo Reserva Android';font-weight:100 599;src:local('Roboto'),local('Roboto-Regular');size-adjust:100%}
@font-face{font-family:'Archivo Reserva Android';font-weight:600 900;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:100%}
@font-face{font-family:'Archivo Titulo Reserva';font-weight:100 599;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Helvetica');size-adjust:117%}
@font-face{font-family:'Archivo Titulo Reserva';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');size-adjust:117%}
@font-face{font-family:'Archivo Titulo Reserva Android';font-weight:100 599;src:local('Roboto'),local('Roboto-Regular');size-adjust:124%}
@font-face{font-family:'Archivo Titulo Reserva Android';font-weight:600 900;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:124%}

:root{
  --font-display:'Archivo','Archivo Titulo Reserva','Archivo Titulo Reserva Android',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Archivo','Archivo Reserva','Archivo Reserva Android',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* superfícies — o preto é o mesmo do fundo da logo */
  --ash:#0A0A0F;
  --coal:#111117;
  --smoke:#18181F;
  --panel:#1F1F27;
  --card:var(--coal);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.26);

  /* texto (todos passam WCAG AA sobre qualquer superfície acima) */
  --fg:#F4F4F6;
  --fg-dim:#A6A6B0;
  --fg-mute:#8A8A95;
  --fg-read:#D9D9DF;

  /* o vermelho do F */
  --accent:#E01029;          /* fundo de botão: texto branco 4.9:1 */
  --accent-hover:#EA142D;
  --accent-ink:#FF4D5A;      /* vermelho como texto sobre o escuro */
  --accent-soft:rgba(224,16,41,.13);
  --accent-line:rgba(224,16,41,.5);
  --brand-grad:linear-gradient(90deg,#E30128 0%,#FC2421 48%,#FE5E14 100%);

  /* nomes antigos, ainda usados em estilos inline do app.js */
  --flare:var(--fg);
  --ember:var(--accent-ink);
  --fire:var(--fg);
  --fire-h:var(--accent);

  /* forma e profundidade */
  --r-sm:4px;
  --r:6px;
  --r-lg:10px;
  --r-xl:14px;
  --sh-pop:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -16px rgba(0,0,0,.65);
  --veil:rgba(10,10,15,.84);

  /* medidas e movimento */
  --wrap:1240px;
  --nav-h:64px;
  --ease:cubic-bezier(.2,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ícones desenhados por máscara (seguem a cor do texto) */
  --i-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-sai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --i-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-mais:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-baixo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  color-scheme:dark;
}

:root[data-theme="light"]{
  --ash:#F5F5F7;
  --coal:#FFFFFF;
  --smoke:#ECECF0;
  --panel:#FFFFFF;
  --line:rgba(14,14,19,.09);
  --line-2:rgba(14,14,19,.16);
  --line-3:rgba(14,14,19,.3);

  --fg:#0E0E13;
  --fg-dim:#4A4A55;
  --fg-mute:#62626D;
  --fg-read:#25252D;

  --accent:#E01029;
  --accent-hover:#C90E25;
  --accent-ink:#C70D24;
  --accent-soft:rgba(224,16,41,.08);
  --accent-line:rgba(224,16,41,.4);

  --sh-pop:0 1px 2px rgba(14,14,19,.06),0 24px 60px -18px rgba(14,14,19,.25);
  --veil:rgba(255,255,255,.9);
  color-scheme:light;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;background:var(--ash);color:var(--fg);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip, não hidden: hidden transforma o body em área de rolagem e o menu deixa de grudar no topo */
  overflow-x:clip;
}
body.no-scroll{overflow:hidden}
img,iframe,canvas,video,svg{max-width:100%}
img{display:block}
/* filho de grid/flex não pode forçar a largura do pai */
.wrap > *,.news-grid > *,.deck > *,.deck-sm > *,.promo-grid > *{min-width:0}
h1,h2,h3,h4,p,li,td{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
::selection{background:rgba(224,16,41,.38);color:var(--fg)}

.hidden{display:none !important}
.mono{font-family:var(--font-mono)}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

.pular{
  position:absolute;left:12px;top:-60px;z-index:300;padding:10px 14px;border-radius:var(--r);
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
}
.pular:focus{top:12px}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:800;font-stretch:112%;
  letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance;
}
h3,h4{font-weight:700;font-stretch:104%;letter-spacing:-.01em}
.lead{color:var(--fg-dim);font-size:17px;line-height:1.6;max-width:62ch;text-wrap:pretty}

/* rótulo curto acima de um título — usado com parcimônia */
.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);
}
.eyebrow::before{
  content:"";width:14px;height:4px;flex:none;background:var(--accent);transform:skewX(-45deg);
}

/* marcador de pilar: FRAME, FRAME SOCIAL, FRAME DIGITAL */
.pilar{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
}
.pilar img{width:16px;height:auto}

/* ============================================================
   BOTÕES E CONTROLES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;white-space:nowrap;
  font-family:var(--font-body);font-size:14.5px;font-weight:600;line-height:1;letter-spacing:.005em;
  color:var(--fg);background:var(--smoke);border:1px solid var(--line-2);border-radius:var(--r);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:var(--panel);border-color:var(--line-3)}
.btn:active{transform:scale(.96)}
.btn-fire{background:var(--accent);border-color:transparent;color:#fff}
.btn-fire:hover{background:var(--accent-hover);border-color:transparent;color:#fff}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--smoke)}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
/* esperando o servidor: um anel gira no lugar do texto (o botão mantém a largura) */
.btn.carregando{position:relative;opacity:1;color:transparent !important}
.btn.carregando::after{
  content:"";position:absolute;inset:0;width:15px;height:15px;margin:auto;border-radius:50%;
  border:2px solid var(--line-3);border-top-color:var(--fg);animation:girar .7s linear infinite;
}
.btn-fire.carregando::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
/* confirmação curta (link copiado etc.) */
.btn.feito::before{
  content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat;
}

.icon-btn{
  position:relative;width:40px;height:40px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);border-radius:var(--r);color:var(--fg-dim);
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.icon-btn:hover{background:var(--smoke);color:var(--fg);border-color:var(--line-2)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none}

.badge{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:9px;border:2px solid var(--ash);
  background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;box-sizing:content-box;
}

.mini{
  height:28px;padding:0 10px;display:inline-flex;align-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:12.5px;font-weight:500;color:var(--fg-dim);white-space:nowrap;
  transition:border-color .15s var(--ease),color .15s var(--ease),background-color .15s var(--ease);
}
.mini:hover{border-color:var(--line-3);color:var(--fg)}
.mini.danger:hover{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft)}

.tag{
  padding:3px 8px;border-radius:var(--r-sm);background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

.status{
  flex:none;display:inline-block;padding:3px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;
}
.status.aberto{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.status.respondido{color:var(--fg);border-color:var(--line-3);background:var(--smoke)}
.status.fechado{color:var(--fg-mute)}

/* abas: o selecionado é o único preenchido */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.tab{
  height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:14px;font-weight:500;color:var(--fg-dim);white-space:nowrap;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease);
}
.tab:hover{color:var(--fg);border-color:var(--line-3)}
.tab:active{transform:scale(.96)}
.tab.active{background:var(--fg);border-color:var(--fg);color:var(--ash)}
/* categorias de notícia são links (/noticias/<categoria>), para o Google achar as páginas */
a.tab{display:inline-flex;align-items:center}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--fg-dim);margin-bottom:7px}
.field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{
  width:100%;height:44px;padding:0 14px;background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);
  outline:0;font-size:15px;color:var(--fg);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{height:auto;min-height:130px;padding:12px 14px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder,.search input::placeholder,.coment-form textarea::placeholder{color:var(--fg-mute)}
.field input:focus,.field textarea:focus,.field select:focus,.coment-form textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.field select,.filtro{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:var(--i-baixo);background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.field-pass{position:relative}
.field-pass input{padding-right:46px !important}
.pass-toggle{
  position:absolute;right:1px;bottom:1px;height:42px;width:44px;display:grid;place-items:center;
  border-radius:0 var(--r) var(--r) 0;color:var(--fg-mute);
}
.pass-toggle:hover{color:var(--fg)}
.pass-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.search{
  display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;min-width:min(260px,100%);
  background:var(--coal);border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search input{background:none;border:0;outline:0;width:100%;font-size:15px;color:var(--fg)}
.search svg{width:16px;height:16px;stroke:var(--fg-mute);fill:none;stroke-width:2;flex:none}

.filtro{
  height:42px;padding-left:14px;background-color:var(--coal);border:1px solid var(--line-2);border-radius:var(--r);
  outline:0;font-size:14.5px;color:var(--fg);
}
.filtro:focus{border-color:var(--accent)}

.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;font-size:14px;color:var(--fg-dim);cursor:pointer}
.check input{margin-top:3px;flex:none}

.alert{
  padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.55;color:var(--fg);
  background:var(--smoke);border:1px solid var(--line-2);border-left:3px solid var(--fg-mute);border-radius:var(--r);
}
.alert.err{border-color:var(--accent-line);border-left-color:var(--accent);background:var(--accent-soft)}
.alert.ok{border-left-color:var(--fg)}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  position:relative;height:36px;display:flex;align-items:center;overflow:hidden;
  background:var(--ash);border-bottom:1px solid var(--line);
}
.ticker::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:80px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ash));
}
.ticker-tag{
  position:relative;z-index:2;height:100%;flex:none;display:flex;align-items:center;padding:0 22px 0 14px;
  background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.ticker-track{display:flex;gap:44px;white-space:nowrap;animation:slide 48s linear infinite;padding-left:20px}
.ticker-track span{font-size:13px;color:var(--fg-dim)}
.ticker-track span b{color:var(--fg);font-weight:600;margin-right:8px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line);
  background:rgba(10,10,15,.86);
  background:color-mix(in srgb,var(--ash) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
}
:root[data-theme="light"] .nav{background:rgba(245,245,247,.86);background:color-mix(in srgb,var(--ash) 84%,transparent)}
.nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h);min-width:0}

.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:30px;height:auto}
.brand-txt{
  display:flex;align-items:baseline;gap:5px;line-height:1;
  font-family:var(--font-display);font-stretch:125%;font-size:14px;letter-spacing:.07em;text-transform:uppercase;
}
.brand-txt span{font-weight:500;color:var(--fg-dim)}
.brand-txt strong{font-weight:800;color:var(--fg)}

.nav-links{display:flex;align-items:center;gap:2px;margin-inline:auto;min-width:0}
.nav-links a{
  position:relative;padding:9px 7px;border-radius:var(--r);white-space:nowrap;
  font-size:13.5px;font-weight:500;color:var(--fg-dim);transition:color .15s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.nav-links a:hover,.nav-links a.ativo{color:var(--fg)}
.nav-links a.ativo::after{transform:scaleX(1)}
.nav-sep{width:1px;height:18px;background:var(--line-2);margin:0 5px;flex:none}
.nav-actions{position:relative;display:flex;align-items:center;gap:8px;flex:none}

/* menu do celular */
.mobile-menu{
  position:fixed;inset:0;z-index:79;display:none;flex-direction:column;overflow-y:auto;
  padding:calc(var(--nav-h) + 52px) 20px 32px;background:var(--ash);
}
.mobile-menu.open{display:flex}
.mobile-menu.fechando{animation:fadeOut .15s var(--ease) both}
.mobile-menu a{
  padding:12px 2px;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-stretch:108%;font-size:22px;letter-spacing:-.01em;
}
.mm-grupo{
  margin:26px 0 2px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);
}
#mobilePainel + .mm-grupo,.mobile-menu > .mm-grupo:first-child{margin-top:0}

/* painel de notificações */
.notif-panel{
  position:absolute;top:calc(100% + 12px);right:0;z-index:90;display:none;
  width:min(380px,calc(100vw - 32px));max-height:460px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
  transform-origin:top right;
}
.notif-panel.open{display:block;animation:popIn .22s var(--ease-out) both}
.notif-panel.fechando{animation:popOut .15s var(--ease) both}
.notif-head{
  position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px 12px 16px;border-bottom:1px solid var(--line);background:var(--panel);
}
.notif-head span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.notif-head img{width:14px;height:auto}
.notif-item{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px}
.notif-item .nd{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}
.notif-item.read .nd{background:transparent;box-shadow:inset 0 0 0 1px var(--line-3)}
/* aviso com ícone (amizade, conquista) e que leva a algum lugar */
.notif-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink)}
.notif-ic svg{width:16px;height:16px}
.notif-item.read .notif-ic{background:transparent;border-color:var(--line-2);color:var(--fg-mute)}
.notif-item.com-link{cursor:pointer;transition:background-color .15s var(--ease)}
.notif-item.com-link:hover{background:var(--smoke)}
.notif-item strong{display:block;font-size:14px;margin-bottom:2px}
.notif-item p{margin:0;font-size:13.5px;color:var(--fg-dim)}
.notif-item time{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute);display:block;margin-top:6px}
.notif-x{
  flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--fg-mute);font-size:12px;transition:color .15s var(--ease),background-color .15s var(--ease);
}
.notif-x:hover{color:var(--fg);background:var(--smoke)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(50% 70% at 82% 45%,rgba(224,16,41,.10),transparent 70%),var(--ash);
}
.hero-in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;
  min-height:min(70vh,600px);padding:64px 0 72px;
}
.hero h1{font-size:clamp(38px,5.4vw,70px);font-stretch:115%;letter-spacing:-.035em;line-height:1}
.hero h1 .burn{
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero .lead{font-size:18px;margin:22px 0 32px;max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.hero-mark{position:relative;display:grid;place-items:center}
.hero-mark::before{
  content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,16,41,.24),transparent);
}
.hm-box{position:relative;width:min(100%,400px)}
.hm-box svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
/* camada do Remotion: mesmo enquadramento do SVG ampliado 50% (vídeo 1010x886 para o F de 673x590) */
.hm-video{
  position:absolute;left:-25.04%;top:-25.08%;width:150.07%;height:150.17%;max-width:none;
  mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);
}
.hm-video.tocando{opacity:1}
:root[data-theme="light"] .hm-video{display:none}

/* pilares logo abaixo do hero */
.pilares{background:var(--coal);border-block:1px solid var(--line)}
.pilares-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pilar-card{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 28px 22px;
  border-left:1px solid var(--line);transition:background-color .2s var(--ease);
}
.pilar-card:first-child{border-left:0;padding-left:0}
.pilar-card::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);
}
.pilar-card::after{
  content:"";position:absolute;top:26px;right:26px;width:16px;height:16px;
  background:var(--fg-mute);-webkit-mask:var(--i-seta) center/contain no-repeat;mask:var(--i-seta) center/contain no-repeat;
  transition:transform .25s var(--ease-out),background-color .2s var(--ease);
}
.pilar-card:hover::before{transform:scaleX(1)}
.pilar-card:hover::after{transform:translateX(3px);background:var(--fg)}
.pilar-nome{
  font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:15px;
  letter-spacing:.07em;text-transform:uppercase;
}
.pilar-nome em{font-style:normal;font-weight:500;color:var(--fg-dim)}
.pilar-desc{font-size:14.5px;color:var(--fg-dim);padding-right:24px}
.pilar-num{margin-top:auto;padding-top:6px;font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);font-variant-numeric:tabular-nums}
.pilar-num strong{color:var(--fg);font-weight:600}

/* ============================================================
   SEÇÕES
   ============================================================ */
.section{padding:88px 0;position:relative}
.section + .section{border-top:1px solid var(--line)}
.section-alt{background:var(--coal);--card:var(--smoke)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-bottom:36px}
.section-head h2,.section-head h1{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em}
.section-head .lead{margin:14px 0 0}
.mais{text-align:center;margin-top:32px}
.nota{font-size:13.5px;color:var(--fg-mute);line-height:1.7;max-width:84ch;margin:22px 0 0}
.credito{font-size:13.5px;color:var(--fg-mute);text-align:center;margin:36px 0 0}
.credito a{color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   NOTÍCIAS E CARDS
   ============================================================ */
.news-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.news-bar .tabs{margin:0}
.news-bar .search{margin-left:auto}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#newsGrid > .card:first-child{grid-column:span 2;grid-row:span 2}
.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .2s var(--ease),transform .3s var(--ease-out);
}
.card:hover{border-color:var(--line-3);transform:translateY(-2px)}
.card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--smoke);flex:none}
#newsGrid > .card:first-child .card-thumb{aspect-ratio:auto;flex:1 1 auto;min-height:300px}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.card:hover .card-thumb img{transform:scale(1.03)}

/* capa genérica quando a matéria não tem imagem: o F assina */
.gen{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 100% 0%,rgba(224,16,41,.16),transparent 55%),var(--smoke);
}
.gen span{
  font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(28px,4.6vw,52px);
  letter-spacing:.04em;color:var(--fg);opacity:.12;
}
.gen::after{
  content:"";position:absolute;right:16px;bottom:14px;width:26px;height:23px;
  background:url(/img/logo-mark.svg) center/contain no-repeat;
}

.cat,.meta-selo{
  position:absolute;top:10px;z-index:2;padding:4px 8px;border-radius:var(--r-sm);
  background:rgba(10,10,15,.82);border:1px solid var(--line-2);color:#F4F4F6;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.cat{left:10px}
.meta-selo{right:10px;font-weight:600;font-variant-numeric:tabular-nums}

.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-kicker{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);
}
.card-body h3{font-size:19px;line-height:1.22}
.card-body p{
  margin:0;font-size:14.5px;color:var(--fg-dim);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
#newsGrid > .card:first-child .card-body{flex:0 0 auto;padding:24px 26px 26px;gap:12px}
#newsGrid > .card:first-child .card-body p{flex:0 0 auto}
#newsGrid > .card:first-child .card-body h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;font-stretch:112%;letter-spacing:-.025em;line-height:1.08}
#newsGrid > .card:first-child .card-body p{font-size:16px;-webkit-line-clamp:4}
.card-meta{
  display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute);font-variant-numeric:tabular-nums;
}

.empty{
  grid-column:1/-1;padding:52px 24px;text-align:center;color:var(--fg-dim);font-size:15px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.empty::before{
  content:"";display:block;width:34px;height:30px;margin:0 auto 16px;
  background:url(/img/logo-mark.svg) center/contain no-repeat;
}
.empty strong{display:block;font-family:var(--font-display);font-weight:700;font-stretch:108%;font-size:20px;color:var(--fg);margin-bottom:6px}

/* esqueleto enquanto os dados chegam */
.sk{pointer-events:none;cursor:default}
.sk .card-thumb,.sk .promo-img,.sk i,.cal-sk i{
  background:linear-gradient(90deg,var(--smoke) 0%,var(--panel) 50%,var(--smoke) 100%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;
}
.section-alt .sk .card-thumb,.section-alt .sk .promo-img,.section-alt .sk i{
  background-image:linear-gradient(90deg,var(--panel) 0%,var(--smoke) 50%,var(--panel) 100%);
}
.sk i{display:block;height:12px;border-radius:3px;width:80%}
.sk i:first-child{width:34%;height:10px}
.sk i:nth-child(2){width:92%;height:18px}
.cal-sk i{display:block;height:62px;margin-bottom:10px;border-radius:var(--r)}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* categorias e assuntos (etapa 2) */
.cat-info{display:flex;flex-direction:column;gap:14px;margin:-4px 0 26px}
.cat-topo h3{font-size:26px;font-weight:800;font-stretch:112%;letter-spacing:-.02em}
.cat-topo p{margin:6px 0 0;color:var(--fg-dim);font-size:15px;max-width:72ch}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chips-rot{margin-right:6px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.chip{
  height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:13px;font-weight:500;color:var(--fg-dim);white-space:nowrap;
  transition:color .15s var(--ease),border-color .15s var(--ease),background-color .15s var(--ease),transform .12s var(--ease);
}
.chip:hover{color:var(--fg);border-color:var(--line-3)}
.chip:active{transform:scale(.96)}
.chip.on{color:var(--fg);border-color:var(--accent-line);background:var(--accent-soft)}
.chip-limpar{margin-left:4px;font-size:13px;color:var(--fg-mute);text-decoration:underline;text-underline-offset:3px}
.chip-limpar:hover{color:var(--fg)}

/* notícias + coluna "Mais lidas" */
.news-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.news-layout.com-aside{grid-template-columns:minmax(0,1fr) 300px}
.news-layout.com-aside #newsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.news-layout.com-aside #newsGrid > .card:first-child{grid-row:auto}
.news-layout.com-aside #newsGrid > .card:first-child .card-thumb{aspect-ratio:2/1;flex:none;min-height:0}
.mais-lidas{
  position:sticky;top:calc(var(--nav-h) + 20px);padding:20px 20px 6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
}
.mais-lidas h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;font-stretch:112%;margin-bottom:6px}
.mais-lidas h3::before{content:"";width:12px;height:4px;flex:none;background:var(--accent);transform:skewX(-45deg)}
.mais-lidas ol{list-style:none;margin:0;padding:0}
.mais-lidas li + li{border-top:1px solid var(--line)}
.mais-lidas button{display:flex;gap:14px;width:100%;padding:14px 0;text-align:left}
.ml-n{
  min-width:20px;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1;
  color:var(--fg-mute);font-variant-numeric:tabular-nums;
}
.mais-lidas li:first-child .ml-n{color:var(--accent-ink)}
.ml-txt strong{display:block;font-size:14.5px;font-weight:600;line-height:1.35;text-wrap:pretty}
.ml-txt small{display:block;margin-top:5px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}
.mais-lidas button:hover strong{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* leitor: categorias clicáveis, linha fina e assuntos */
.reader-cats{flex-wrap:wrap;gap:6px 14px}
.kicker-link{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;transition:color .15s var(--ease)}
.kicker-link:hover{color:var(--fg)}
.kicker-link + .kicker-link{color:var(--fg-mute)}
.reader-sub{margin:-2px 0 20px;font-size:19px;line-height:1.5;color:var(--fg-dim);text-wrap:pretty}
.reader-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.reader-tags > span{margin-right:6px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}

/* filtros do banco de jogos */
.filtros{margin:0 0 24px}
.filtros .search{margin:0 0 12px;max-width:100%}
.filtros-linha{display:flex;gap:10px;flex-wrap:wrap}
.contagem{font-size:12px;color:var(--fg-mute);margin:14px 0 0}

/* notas */
.score{display:flex;gap:8px;align-items:stretch}
.score-box{flex:1;padding:10px 12px;background:var(--ash);border:1px solid var(--line);border-radius:var(--r)}
.score-box span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:4px}
.score-box strong{font-family:var(--font-display);font-weight:800;font-stretch:110%;font-size:26px;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.score-box small{display:block;font-family:var(--font-mono);font-size:11px;color:var(--fg-mute);margin-top:4px}
.score-box.vazio strong{color:var(--fg-mute);font-size:20px}

.plats{display:flex;gap:4px;flex-wrap:wrap}
.plat{
  padding:3px 7px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--fg-dim);
}

/* ============================================================
   CALENDÁRIO
   ============================================================ */
.cal-mes{
  display:flex;align-items:center;gap:10px;padding:30px 0 12px;border-bottom:1px solid var(--line-2);
  font-family:var(--font-display);font-weight:800;font-stretch:118%;font-size:14px;letter-spacing:.07em;text-transform:uppercase;
}
.cal-mes:first-child{padding-top:4px}
.cal-mes::before{content:"";width:12px;height:4px;background:var(--accent);transform:skewX(-45deg);flex:none}
.cal-item{
  display:flex;align-items:center;gap:18px;padding:14px 12px 14px 4px;cursor:pointer;
  border-bottom:1px solid var(--line);border-radius:var(--r);transition:background-color .15s var(--ease);
}
.cal-item:hover{background:var(--coal)}
.cal-dia{flex:none;width:52px;text-align:center}
.cal-dia strong{display:block;font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.05;font-variant-numeric:tabular-nums}
.cal-dia span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.cal-info{flex:1;min-width:0}
.cal-info h4{font-size:17px;margin-bottom:4px}
.cal-info p{margin:0;font-size:13.5px;color:var(--fg-dim)}
.cal-hoje{background:var(--accent-soft)}
.cal-hoje .cal-dia strong{color:var(--accent-ink)}
.cal-passou{opacity:.5}

/* ============================================================
   PROMOÇÕES
   ============================================================ */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:18px}
.promo{
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .2s var(--ease),transform .3s var(--ease-out);
}
.promo:hover{border-color:var(--line-3);transform:translateY(-2px)}
.promo-top{border-color:var(--accent-line)}
.promo-img{position:relative;aspect-ratio:4/3;background:var(--smoke);overflow:hidden;flex:none}
.promo-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.promo:hover .promo-img img{transform:scale(1.03)}
.promo-off{
  position:absolute;top:10px;left:10px;z-index:2;padding:5px 8px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:800;font-size:14px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.promo-corpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.promo-loja{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute)}
.promo-corpo h3{font-size:17px;line-height:1.25}
.promo-prod{margin:0;font-size:13.5px;color:var(--fg-dim);flex:1}
.promo-preco{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.promo-preco s{font-size:13px;color:var(--fg-mute)}
.promo-preco strong{font-family:var(--font-display);font-weight:800;font-stretch:108%;font-size:24px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.promo-cupom{
  padding:7px 10px;border:1px dashed var(--line-3);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:12px;color:var(--fg-dim);
}
.promo-cupom b{color:var(--fg);letter-spacing:.12em}
.promo-desc{margin:0;font-size:13.5px;color:var(--fg-dim);line-height:1.6}
.promo-obs{margin:0;font-size:12.5px;color:var(--fg-mute)}
.promo .go{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--fg-dim);transition:color .15s var(--ease)}
.promo:hover .go{color:var(--fg)}

/* ============================================================
   COMUNIDADE E LAUNCHER (FRAME SOCIAL)
   ============================================================ */
.comunidade{
  background:radial-gradient(60% 120% at 0% 100%,rgba(224,16,41,.10),transparent 60%),var(--ash);
}
.comunidade-in{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:28px 48px;align-items:end}
.comunidade h2,.comunidade h1{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em;max-width:16ch}
.comunidade .lead{margin:16px 0 0}
#btnInstall{display:none}
#btnInstall.on{display:inline-flex}

.deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{
  position:relative;display:flex;flex-direction:column;gap:12px;min-height:196px;padding:24px 22px 22px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .2s var(--ease),transform .3s var(--ease-out);
}
.tile:hover{border-color:var(--line-3);transform:translateY(-2px)}
.tile-ico{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);
  background:var(--ash);border:1px solid var(--line);color:var(--fg);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.tile:hover .tile-ico{background:var(--accent);border-color:transparent;color:#fff}
.tile-ico svg{width:20px;height:20px;fill:currentColor}
.tile h3{font-size:18px}
.tile p{margin:0;font-size:14px;color:var(--fg-dim);flex:1}
.tile .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--fg-dim);transition:color .15s var(--ease)}
.tile .go::after{
  content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--i-seta) center/contain no-repeat;mask:var(--i-seta) center/contain no-repeat;
  transition:transform .25s var(--ease-out);
}
.tile:hover .go{color:var(--fg)}
.tile:hover .go::after{transform:translateX(3px)}

.deck-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.chip-link{
  display:flex;align-items:center;gap:12px;padding:13px 14px 13px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.chip-link:hover{border-color:var(--line-3)}
.chip-link .dot{display:none}
.chip-link > span:last-child{flex:1;min-width:0}
.chip-link::after{
  content:"";flex:none;width:14px;height:14px;background:var(--fg-mute);
  -webkit-mask:var(--i-sai) center/contain no-repeat;mask:var(--i-sai) center/contain no-repeat;
  transition:transform .25s var(--ease-out),background-color .18s var(--ease);
}
.chip-link:hover::after{background:var(--fg);transform:translate(2px,-2px)}
.chip-link strong{display:block;font-size:14.5px;font-weight:600}
.chip-link small{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}

/* ============================================================
   AGÊNCIA (FRAME DIGITAL)
   ============================================================ */
.spec{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}

/* vídeo feito no Remotion + lista de serviços */
.fd-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:32px;align-items:center;margin-bottom:56px}
.fd-video{
  position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  background:#0B0B0E url(/video/frame-digital.webp) center/cover;border:1px solid var(--line-2);box-shadow:var(--sh-pop);
}
.fd-video video{display:block;width:100%;height:100%;object-fit:cover}
.servicos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.servicos li{display:flex;flex-direction:column;gap:2px;padding:13px 0;border-bottom:1px solid var(--line)}
.servicos li:first-child{border-top:1px solid var(--line)}
.servicos b{font-family:var(--font-display);font-weight:800;font-stretch:110%;font-size:16.5px;letter-spacing:-.01em}
.servicos span{font-size:14px;color:var(--fg-dim);line-height:1.45}

/* calculadora "Quanto custa criar seu site?" */
.calc{
  display:grid;grid-template-columns:minmax(0,1fr) 368px;margin-bottom:14px;
  border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--card);overflow:hidden;
  scroll-margin-top:calc(var(--nav-h) + 16px);
}
.calc-perg{padding:30px 30px 8px;min-width:0}
.calc-head h3{font-size:clamp(25px,3vw,34px);font-stretch:112%;letter-spacing:-.03em;line-height:1.05;margin:8px 0}
.calc-head p{margin:0 0 22px;color:var(--fg-dim)}
.calc-q{border:0;margin:0;padding:22px 0 24px;border-top:1px solid var(--line);min-width:0}
.calc-q legend{display:flex;align-items:center;gap:10px;float:left;width:100%;padding:0;margin:0 0 14px;font-weight:700;font-size:16px}
.calc-q legend + *{clear:both}
.calc-n{
  display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--line-3);
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent-ink);
}
.calc-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.calc-chips{display:flex;flex-wrap:wrap;gap:8px}
.calc-op{position:relative;display:flex;min-width:0}
.calc-op input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.calc-op input:disabled{cursor:default}
.calc-tipo,.calc-chip{
  border:1px solid var(--line-2);color:var(--fg);
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);
}
.calc-tipo{display:flex;flex-direction:column;gap:4px;width:100%;padding:14px 14px 13px;border-radius:var(--r-lg);background:var(--ash)}
.calc-tipo b{font-size:15px;line-height:1.25}
.calc-tipo small{font-size:12.5px;line-height:1.4;color:var(--fg-mute)}
.calc-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r);background:var(--ash);font-size:14px;line-height:1.2}
.calc-chip small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.calc-op:hover .calc-tipo,.calc-op:hover .calc-chip{border-color:var(--line-3)}
.calc-op input:checked + .calc-tipo,.calc-op input:checked + .calc-chip{background:var(--fg);border-color:var(--fg);color:var(--ash)}
.calc-op input:checked + .calc-tipo small{color:inherit;opacity:.72}
.calc-op input:disabled + .calc-chip{opacity:.62}
.calc-op input:focus-visible + *{outline:2px solid var(--accent-ink);outline-offset:2px}
.calc-op:active input:not(:disabled) + *{transform:scale(.97)}

.calc-res{background:var(--smoke);border-left:1px solid var(--line)}
.calc-res-in{position:sticky;top:calc(var(--nav-h) + 12px);display:flex;flex-direction:column;gap:14px;padding:30px 28px}
.calc-valor{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.calc-valor i{font-style:normal;font-family:var(--font-mono);font-size:14px;color:var(--fg-mute);margin-right:5px}
.calc-valor b{
  display:inline-block;font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:36px;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
}
.calc-valor em{font-style:normal;font-size:15px;color:var(--fg-mute)}
.calc-valor > span,.nw{white-space:nowrap}
.calc-escala{display:grid;grid-template-columns:1fr 1fr;row-gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.calc-escala span:last-child{text-align:right}
.calc-trilho{grid-column:1/-1;position:relative;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
/* a faixa estimada dentro de R$ 1.000–5.000: só transform (posição e largura) */
.calc-trilho i{
  position:absolute;inset:0;border-radius:99px;background:var(--brand-grad);transform-origin:0 50%;
  transform:translateX(var(--de,0%)) scaleX(var(--larg,.1));transition:transform .5s var(--ease-out);
}
.calc-resumo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--fg-dim)}
.calc-resumo li{display:flex;gap:9px;line-height:1.4}
.calc-resumo li::before{
  content:"";flex:none;width:14px;height:14px;margin-top:3px;background:var(--fg-mute);
  -webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat;
}
.calc-prazo{margin:0;font-size:14px;color:var(--fg-dim)}
.calc-prazo b{color:var(--fg)}
.calc-aviso{margin:0;padding:12px 14px;border-left:2px solid var(--accent);border-radius:0 var(--r) var(--r) 0;background:var(--accent-soft);font-size:13.5px;line-height:1.45;color:var(--fg)}
.calc-nota{margin:0;font-size:12.5px;line-height:1.45;color:var(--fg-mute)}
.calc-barra{display:none}

/* resumo da estimativa no pedido */
.brief-est{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--smoke);font-size:14px;color:var(--fg-dim)}
.brief-est strong{display:block;font-family:var(--font-display);font-size:20px;font-stretch:110%;color:var(--fg);margin:4px 0 2px}
.brief-est a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}

/* linha do tempo do projeto: na agência e no painel do cliente */
.fd-etapas{margin-top:64px}
.etapas{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;
}
.etapas::before,.etapas-barra{content:"";position:absolute;left:15px;right:15px;top:14px;height:2px;background:var(--line-2)}
.etapas-barra{background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .9s var(--ease-out)}
.etapa{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.etapa .pt{
  position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;margin-bottom:10px;border-radius:50%;
  border:2px solid var(--line-3);background:var(--ash);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--fg-mute);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.etapa b{font-size:14.5px;line-height:1.25}
.etapa small{font-size:12.5px;line-height:1.4;color:var(--fg-mute)}
.etapa time{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.etapa.feita .pt{background:var(--fg);border-color:var(--fg);color:var(--ash)}
.etapa.atual .pt{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 6px var(--accent-soft)}
.etapas.com-estado .etapa:not(.feita):not(.atual) b{color:var(--fg-dim)}
/* onde não cabem 7 colunas, a linha do tempo fica em pé (mede o espaço do bloco, não da tela) */
.fd-etapas,.proj{container-type:inline-size}
@container (max-width:880px){
  .etapas{grid-template-columns:1fr;gap:16px}
  .etapas::before,.etapas-barra{left:14px;right:auto;top:15px;bottom:15px;width:2px;height:auto}
  .etapas-barra{transform-origin:50% 0;transform:scaleY(var(--p,0))}
  .etapa{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-items:start}
  .etapa .pt{grid-row:1 / span 3;margin:0}
  .etapa b{padding-top:5px}
}

/* painel do projeto (cliente e equipe) */
.proj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:-4px 0 26px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.proj .etapas{margin-bottom:26px}
.proj-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.proj-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--smoke)}
.proj-card b{font-family:var(--font-display);font-size:20px;font-weight:800;font-stretch:108%;letter-spacing:-.015em;line-height:1.15;margin-top:4px}
.proj-card small{font-size:12.5px;line-height:1.4;color:var(--fg-mute)}
.proj-adm{margin-bottom:22px;padding:16px;border:1px dashed var(--line-3);border-radius:var(--r-lg)}
.proj-adm .row-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 4px}
.proj-adm .field{margin-bottom:10px}
.proj-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
.proj-cols h4{font-size:15px;margin:0 0 12px}
.proj-lado{display:flex;flex-direction:column;gap:20px}
.proj-lado section{padding:16px;border:1px solid var(--line);border-radius:var(--r-lg)}
.proj-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--fg-dim)}
.proj-lista li{line-height:1.4;overflow-wrap:anywhere}
.proj-lista a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.proj-lista time{display:block;font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.proj-vazio{margin:0;font-size:13px;color:var(--fg-mute)}
.msg-tag{
  display:inline-block;margin-left:6px;padding:2px 6px;border-radius:var(--r-sm);vertical-align:1px;
  background:var(--fg);color:var(--ash);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
}
.msg .link-txt{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.proj-envio{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.proj-envio .check{margin:0}
.etapa-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.etapa-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.etapa-chip.fim::before{background:var(--fg)}

.port-lista li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:2px;background:var(--fg-mute);
  -webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat;
}

.portfolio{margin-top:72px}
.port-titulo{font-size:22px;margin:0 0 18px}
.port-item{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:center;padding:28px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
}
.port-img{
  aspect-ratio:1;display:grid;place-items:center;padding:44px;border:1px solid var(--line);border-radius:var(--r);
  background:radial-gradient(circle at 50% 55%,rgba(224,16,41,.18),transparent 62%),var(--ash);
}
.port-img img{width:100%;max-width:140px;height:auto}
.port-tag{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.port-txt h4{font-size:26px;font-weight:800;font-stretch:110%;margin-bottom:10px}
.port-txt p{margin:0 0 16px;font-size:15px;color:var(--fg-dim);line-height:1.65}
.port-lista{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.port-lista li{display:flex;gap:10px;font-size:14px;color:var(--fg-dim)}
.port-nota{margin-top:14px}

/* ============================================================
   ATENDIMENTO
   ============================================================ */
.support-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 40px;align-items:start}
.form-card{padding:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.form-card h3,.faq h3{font-size:21px;font-weight:800;font-stretch:108%;margin-bottom:6px}
.form-card .field input:not([type=checkbox]),.form-card .field textarea,.form-card .field select{background:var(--ash)}
.form-sub{color:var(--fg-dim);font-size:14.5px;margin:0 0 22px}
.form-alt{margin:18px 0 0;font-size:14px;color:var(--fg-dim);text-align:center}
.form-alt a,.auth-switch button{
  color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);
}

.faq h3{margin-bottom:14px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;
  cursor:pointer;list-style:none;font-size:15.5px;font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:14px;height:14px;background:var(--fg-mute);
  -webkit-mask:var(--i-mais) center/contain no-repeat;mask:var(--i-mais) center/contain no-repeat;
  transition:transform .3s var(--ease-out),background-color .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--accent-ink)}
.faq summary:hover::after{background:var(--fg)}
.faq p{margin:0;padding:0 2px 18px;color:var(--fg-dim);font-size:15px;line-height:1.7}

.my-tickets{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.ticket-row{
  display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;text-align:left;cursor:pointer;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s var(--ease);
}
.ticket-row:hover{border-color:var(--line-3)}
.ticket-row .t-id{font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);flex:none}
.ticket-row .t-title{flex:1;min-width:0;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat{
  display:flex;flex-direction:column;gap:10px;max-height:360px;overflow-y:auto;padding:16px;margin-bottom:18px;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r-lg);
}
.msg{padding:11px 14px;max-width:82%;font-size:14.5px;border:1px solid var(--line);border-radius:var(--r-lg)}
.msg.user{background:var(--smoke);align-self:flex-start;border-bottom-left-radius:var(--r-sm)}
.msg.admin{background:var(--accent-soft);border-color:var(--accent-line);align-self:flex-end;border-bottom-right-radius:var(--r-sm)}
.msg .who{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute);margin-bottom:4px}

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{background:var(--coal);border-top:1px solid var(--line);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;margin-bottom:44px}
.footer h5{
  margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg);
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer ul a{color:var(--fg-dim);font-size:14.5px;transition:color .15s var(--ease)}
.footer ul a:hover{color:var(--fg)}
.footer-brand p{color:var(--fg-dim);font-size:14.5px;max-width:36ch;margin:16px 0 0}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:22px;
  border-top:1px solid var(--line);font-size:13px;color:var(--fg-mute);
}

/* ============================================================
   MODAIS
   ============================================================ */
.overlay{
  --ov-pt:48px;
  position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
  padding:var(--ov-pt) 20px 48px;overflow-y:auto;background:rgba(5,5,8,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
:root[data-theme="light"] .overlay{background:rgba(20,20,26,.38)}
.overlay.open{display:flex;animation:fadeIn .2s var(--ease) both}
.modal:focus{outline:none}
.modal{
  position:relative;width:100%;max-width:520px;
  background:var(--coal);border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--sh-pop);
  animation:modalIn .32s var(--ease-out) both;
}
.modal-lg{max-width:880px}
.modal-xl{max-width:1080px}
/* o cabeçalho gruda na borda de cima da tela (e não 48px abaixo, deixando o texto aparecer por cima) */
.overlay .modal-head{top:calc(-1 * var(--ov-pt))}
.modal-head{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px 14px 24px;background:var(--coal);border-bottom:1px solid var(--line);
  border-top-left-radius:inherit;border-top-right-radius:inherit;
}
.modal-head h3{
  font-size:17px;font-weight:700;font-stretch:100%;letter-spacing:-.005em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.modal-title{display:flex;align-items:center;gap:10px;min-width:0}
.modal-mark{width:22px;height:auto;flex:none}
.modal-body{padding:24px}
.x{
  width:36px;height:36px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);border-radius:var(--r);color:var(--fg-dim);font-size:13px;
  transition:color .15s var(--ease),border-color .15s var(--ease),background-color .15s var(--ease);
}
.x:hover{color:var(--fg);border-color:var(--line-3);background:var(--smoke)}

.auth-switch{text-align:center;margin:18px 0 0;font-size:14px;color:var(--fg-dim)}
.auth-switch button{margin-left:4px}
.esqueci{margin:-6px 0 18px}
.esqueci button{font-size:13.5px;color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px}
.esqueci button:hover{color:var(--fg)}

/* leitor de notícia */
.reader-hero{aspect-ratio:21/9;background:var(--smoke);position:relative;overflow:hidden}
.reader-hero img{width:100%;height:100%;object-fit:cover}
.reader-body{padding:36px 40px 40px;max-width:760px;margin:0 auto}
.reader-body h1{font-size:clamp(26px,4vw,42px);letter-spacing:-.028em;line-height:1.1;margin-bottom:16px}
.reader-meta{
  display:flex;flex-wrap:wrap;gap:4px 18px;padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);font-variant-numeric:tabular-nums;
}
.reader-text{font-size:17.5px;line-height:1.75;color:var(--fg-read)}
.reader-text p{margin:0 0 20px;text-wrap:pretty}
.reader-text h2{font-size:25px;letter-spacing:-.02em;margin:36px 0 14px;color:var(--fg)}
.reader-text .sub3{font-size:20px;margin:28px 0 12px;color:var(--fg)}
.reader-text ul{padding-left:22px;margin:0 0 20px}
.reader-text li{margin-bottom:8px}
.reader-text li::marker{color:var(--accent-ink)}
.reader-text .realce{
  color:var(--fg);font-weight:700;
  background:linear-gradient(transparent 64%,rgba(224,16,41,.3) 64%);
}
.reader-text .link-txt{
  color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s var(--ease);
}
.reader-text .link-txt:hover{color:var(--accent-ink)}
.reader-text .fig{margin:30px 0}
.reader-text .fig img{width:100%;border:1px solid var(--line);border-radius:var(--r-lg)}
.reader-text .fig figcaption{font-size:13.5px;color:var(--fg-mute);padding:10px 2px 0;line-height:1.6}
.reader-text .destaque{
  margin:30px 0;padding:18px 20px;font-size:16.5px;line-height:1.7;color:var(--fg);
  background:var(--smoke);border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:var(--r);
}
.reader-text .citacao{
  margin:32px 0;padding:2px 0 2px 22px;border-left:2px solid var(--accent);
  font-size:21px;line-height:1.5;font-weight:500;color:var(--fg);
}
.video-yt{
  position:relative;padding-top:56.25%;margin:28px 0;overflow:hidden;
  background:var(--smoke);border:1px solid var(--line);border-radius:var(--r-lg);
}
.video-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* notícias relacionadas */
.relac{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.relac-item{
  display:flex;flex-direction:column;width:100%;overflow:hidden;text-align:left;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .2s var(--ease),transform .3s var(--ease-out);
}
.relac-item:hover{border-color:var(--line-3);transform:translateY(-2px)}
.relac-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--smoke);overflow:hidden}
.relac-thumb img{width:100%;height:100%;object-fit:cover}
.relac-txt{display:block;padding:12px 14px 14px}
.relac-cat{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.relac-item strong{display:block;margin-bottom:8px;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.25}
.relac-item time{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}

/* comentários */
.coment-form textarea{
  width:100%;min-height:110px;padding:12px 14px;resize:vertical;outline:0;
  background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);
  font:inherit;font-size:15px;color:var(--fg);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.coment{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.coment:last-child{border-bottom:0}
.coment.oculto{opacity:.55}
.coment-corpo{flex:1;min-width:0}
.coment-topo{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.coment-topo strong{font-size:15px}
.coment-topo time{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}
.coment-txt{margin:0;font-size:15px;line-height:1.65;color:var(--fg-read);word-break:break-word}
.coment-acoes{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.coment-acoes button{font-size:13px;font-weight:500;color:var(--fg-mute);transition:color .15s var(--ease)}
.coment-acoes button:hover{color:var(--fg)}
.coment-av-wrap{flex:none}
.coment-av{display:block;border-radius:var(--r);transition:transform .2s var(--ease-out)}
.coment-av:hover{transform:scale(1.05)}
.coment-autor{font-size:15px;font-weight:700;color:var(--fg);text-align:left}
.coment-autor:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.coment-bloq{padding:12px 0}
.coment-bloq .coment-txt{font-size:13.5px;font-style:italic;color:var(--fg-mute)}

/* "meu PC roda?" */
.veredito{
  display:flex;gap:18px;align-items:flex-start;padding:18px 20px;margin:26px 0 14px;
  background:var(--smoke);border:1px solid var(--line);border-left:3px solid var(--line-3);border-radius:var(--r);
}
.veredito strong{display:block;font-size:17px;margin-bottom:4px}
.veredito p{margin:0;font-size:14.5px;color:var(--fg-dim);line-height:1.6}
.v-selo{
  flex:none;min-width:92px;padding:7px 10px;text-align:center;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;
}
.v-sim{border-left-color:var(--fg)}
.v-sim .v-selo{background:var(--fg);color:var(--ash);border-color:transparent}
.v-talvez{border-left-color:var(--fg-dim)}
.v-nao{border-left-color:var(--accent)}
.v-nao .v-selo{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.v-indef{border-left-color:var(--line-2)}
.v-pc{display:block;margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--fg-mute)}
.v-pc button{margin-left:8px;font-size:12px;color:var(--fg);text-decoration:underline;text-underline-offset:2px}

/* votar */
.votos{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.voto{
  width:38px;height:38px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--ash);
  font-family:var(--font-mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:border-color .15s var(--ease),background-color .15s var(--ease),transform .12s var(--ease);
}
.voto:hover{border-color:var(--line-3)}
.voto:active{transform:scale(.96)}
.voto.meu{background:var(--accent);border-color:transparent;color:#fff}

/* ============================================================
   PERFIL E GAMIFICAÇÃO
   ============================================================ */
.avatares{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:6px}
.av{
  aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--ash);
  font-family:var(--font-display);font-weight:800;font-stretch:110%;font-size:16px;color:var(--fg-dim);
  transition:border-color .15s var(--ease),color .15s var(--ease),background-color .15s var(--ease),transform .12s var(--ease);
}
.av:hover{border-color:var(--line-3);color:var(--fg)}
.av:active{transform:scale(.96)}
.av.sel{background:var(--accent);border-color:transparent;color:#fff}
.av-foto{object-fit:cover;border:1px solid var(--line-2);border-radius:var(--r);display:block;flex:none}
.av-letras{
  display:grid;place-items:center;flex:none;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel);color:var(--fg);font-family:var(--font-display);font-weight:800;font-stretch:110%;
}

.nivel-barra{height:6px;margin:12px 0 8px;overflow:hidden;border-radius:3px;background:var(--smoke);box-shadow:inset 0 0 0 1px var(--line)}
/* a barra enche com transform (não com width): fica suave mesmo no celular */
.nivel-barra i{display:block;height:100%;background:var(--brand-grad);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .9s var(--ease-out)}
.nivel-linha{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}
.selo-nivel{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r-sm);
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;
}

/* ============================================================
   PATROCÍNIO — integrado, mas sempre identificado
   ============================================================ */
.ads{position:relative}
.ads::before{
  content:"Patrocinado";position:absolute;top:10px;right:10px;z-index:3;padding:4px 8px;border-radius:var(--r-sm);
  background:rgba(10,10,15,.85);border:1px solid var(--line-2);color:#C9C9D1;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
}
.ads-faixa{
  display:flex;align-items:center;gap:20px;padding:18px 20px;margin:34px 0;
  background:var(--smoke);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .2s var(--ease);
}
.ads-faixa:hover{border-color:var(--line-3)}
.ads-faixa img{width:72px;height:72px;object-fit:cover;flex:none;border:1px solid var(--line);border-radius:var(--r)}
.ads-faixa .txt{flex:1;min-width:0}
.ads-faixa h4{font-size:17px;margin-bottom:4px}
.ads-faixa p{margin:0;font-size:14px;color:var(--fg-dim)}
.ads-faixa .selo{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.ads-faixa .go{flex:none}

/* ============================================================
   AVISOS (TOASTS)
   ============================================================ */
.toasts{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{
  min-width:min(260px,100%);max-width:360px;padding:13px 16px;font-size:14px;color:var(--fg);
  background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--fg-mute);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);animation:toastIn .32s var(--ease-out) both;
}
.toast.saindo{animation:toastOut .26s var(--ease) both}
.toast.ok{border-left-color:var(--fg)}
.toast.err{border-left-color:var(--accent)}

/* ============================================================
   PAINEL DO ADM
   ============================================================ */
.admin{position:fixed;inset:0;z-index:150;display:none;flex-direction:column;background:var(--ash)}
.admin.open{display:flex}
.admin-top{
  height:60px;flex:none;display:flex;align-items:center;gap:14px;padding:0 20px;
  background:var(--coal);border-bottom:1px solid var(--line);
}
.admin-top img{width:28px;height:auto}
.admin-nome{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:14px;letter-spacing:.07em;text-transform:uppercase}
.admin-who{margin-left:auto;min-width:0;font-size:12px;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-main{flex:1;display:grid;grid-template-columns:232px minmax(0,1fr);overflow:hidden}
.admin-side{
  display:flex;flex-direction:column;gap:2px;padding:16px 12px;overflow-y:auto;
  background:var(--coal);border-right:1px solid var(--line);
}
.admin-side button{
  position:relative;text-align:left;padding:10px 12px;border-radius:var(--r);
  font-size:14px;font-weight:500;color:var(--fg-dim);
  transition:color .15s var(--ease),background-color .15s var(--ease);
}
.admin-side button:hover{color:var(--fg);background:var(--smoke)}
.admin-side button.active{color:var(--fg);background:var(--smoke)}
.admin-side button.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:1px;background:var(--accent)}
.admin-view{padding:32px 36px;overflow-y:auto}
.admin-view h2{font-size:30px;margin-bottom:6px}
.admin-view .sub{color:var(--fg-dim);font-size:15px;margin:0 0 26px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.kpi{padding:18px 20px;background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg)}
.kpi span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute)}
.kpi strong{display:block;margin-top:6px;font-family:var(--font-display);font-weight:800;font-size:36px;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}

.table{
  width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;
  background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);
}
.table th{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute);
}
.table td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--smoke)}
/* a célula continua sendo célula (flex aqui desalinhava as linhas da tabela) */
.table td.acts{text-align:right}
.table td.acts > *{margin:3px 0 3px 4px;vertical-align:middle}
.modal .table{background:var(--ash)}

/* editor do painel */
.editor{padding:26px;margin-bottom:30px;background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg)}
.editor > h3{font-size:18px;margin-bottom:18px}
.editor-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.editor-acoes .check{margin:0 0 0 auto}
.rotulo{display:block;font-size:13.5px;font-weight:600;color:var(--fg-dim);margin-bottom:8px}
.field label small,.rotulo small{font-weight:400;color:var(--fg-mute)}
.dica{margin:7px 0 0;font-size:12.5px;color:var(--fg-mute)}
.dica b{color:var(--fg-dim);font-weight:600}
.chip-check{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r);font-size:13.5px;color:var(--fg-dim);
  transition:border-color .15s var(--ease),color .15s var(--ease),background-color .15s var(--ease);
}
.chip-check:hover{border-color:var(--line-3);color:var(--fg)}
.chip-check:has(input:checked){border-color:var(--accent-line);background:var(--accent-soft);color:var(--fg)}
.chip-check.off{opacity:.4;cursor:not-allowed}
.chip-check input{width:15px;height:15px;margin:0;flex:none}

.tag-input{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;padding:6px 8px;cursor:text;
  background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.tag-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tag-lista{display:contents}
.tag-x{
  display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;
  background:var(--smoke);border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:13.5px;
}
.tag-x button{width:22px;height:22px;display:grid;place-items:center;border-radius:3px;font-size:10px;color:var(--fg-mute)}
.tag-x button:hover{color:var(--fg);background:var(--panel)}
.field .tag-input input{flex:1;width:auto !important;min-width:140px;height:30px !important;padding:0 6px !important;border:0 !important;background:none !important;box-shadow:none !important}

.rel-picker{display:flex;flex-direction:column;gap:8px}
.rel-escolhidas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rel-escolhidas:empty{display:none}
.rel-escolhidas li{
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;font-size:14px;
  background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);
}
.rel-escolhidas li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-picker > input{
  width:100%;height:44px;padding:0 14px;background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);
  outline:0;font-size:15px;color:var(--fg);
}
.rel-picker > input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rel-achadas{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden}
.rel-achadas:not(:empty){border:1px solid var(--line-2)}
.rel-achadas button{display:block;width:100%;padding:10px 14px;text-align:left;background:var(--smoke)}
.rel-achadas button + button{border-top:1px solid var(--line)}
.rel-achadas button:hover{background:var(--panel)}
.rel-achadas strong{display:block;font-size:14px;font-weight:600}
.rel-achadas small{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}

.lista-filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.lista-filtros .search{flex:1;min-width:min(260px,100%)}
.tags-linha{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tags-linha span{padding:1px 6px;border:1px solid var(--line-2);border-radius:3px;font-size:11.5px;color:var(--fg-mute)}

.imp-log{
  margin-top:16px;padding:14px;max-height:220px;overflow-y:auto;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--fg-dim);
}

/* ============================================================
   PERFIL FRAME (etapa 3)
   ============================================================ */
.perfil-capa{
  position:relative;height:150px;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.035) 22px 23px),
    radial-gradient(90% 130% at 100% 0%,rgba(224,16,41,.18),transparent 60%),var(--smoke);
}
:root[data-theme="light"] .perfil-capa{background:
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(14,14,19,.05) 22px 23px),
  radial-gradient(90% 130% at 100% 0%,rgba(224,16,41,.10),transparent 60%),var(--smoke)}
.perfil-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.perfil-capa.com-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,var(--coal))}
.perfil-cab{position:relative;z-index:1;display:flex;gap:18px;padding:0 24px}
.perfil-av{flex:none;margin-top:-44px}
.perfil-av .av-foto,.perfil-av .av-letras{border:3px solid var(--coal);border-radius:var(--r-lg);box-shadow:0 10px 28px -12px rgba(0,0,0,.7)}
.perfil-id{flex:1;min-width:0;padding-top:16px}
.perfil-id h2{font-size:clamp(22px,3vw,28px);font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.perfil-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.perfil-bio{margin:10px 0 0;max-width:60ch;font-size:15px;line-height:1.55;color:var(--fg-read);overflow-wrap:anywhere}
.perfil-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:10px 0 0;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}
.perfil-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.perfil-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:8px;max-width:380px;padding-top:16px}
.perfil-corpo{padding:24px 24px 28px}
.perfil-corpo > .alert{margin-bottom:18px}
.perfil-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.perfil-grade.so-nivel{grid-template-columns:minmax(0,1fr);max-width:440px}
.perfil-col{display:flex;flex-direction:column;gap:24px;min-width:0}
.perfil-sec h3{
  display:flex;align-items:baseline;gap:8px;margin:0 0 12px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);
}
.sec-conta{color:var(--fg-dim)}
.pf-vazio{margin:0;font-size:14px;color:var(--fg-mute)}
.selo-nv{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}

/* esqueleto do perfil enquanto os dados chegam */
.perfil-sk{padding-bottom:34px}
.perfil-sk .sk-av{
  width:96px;height:96px;flex:none;margin-top:-44px;border:3px solid var(--coal);border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--smoke) 0%,var(--panel) 50%,var(--smoke) 100%);background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
}
.perfil-sk div{flex:1;padding-top:18px}
.perfil-sk i{margin-bottom:10px}

/* nível */
.nivel-card{padding:16px;background:var(--ash);border:1px solid var(--line);border-radius:var(--r-lg)}
.nivel-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.nivel-rot{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.nivel-nome{display:block;margin-top:5px;font-family:var(--font-display);font-size:24px;font-weight:800;font-stretch:115%;letter-spacing:-.02em;line-height:1}
.nivel-xp{font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.nivel-xp b{font-size:16px;font-weight:600;color:var(--fg)}
.nivel-trilha{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:14px 0 0;padding:0;list-style:none}
.nivel-trilha li{
  padding-top:7px;border-top:2px solid var(--line-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--font-display);font-stretch:75%;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-mute);
}
.nivel-trilha li.feito{border-top-color:var(--fg-dim);color:var(--fg-dim)}
.nivel-trilha li.atual{border-top-color:var(--accent);color:var(--fg)}

/* conquistas */
.conqs{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.conq{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .2s var(--ease),transform .25s var(--ease-out);
}
.conq:not(.bloq):hover{border-color:var(--line-3);transform:translateX(2px)}
.conq-ic,.tc-ic{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);
}
.conq-ic svg{width:20px;height:20px}
.conq-txt strong{display:block;font-size:14.5px}
.conq-txt span{display:block;font-size:13px;line-height:1.4;color:var(--fg-dim)}
.conq-xp{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.conq.bloq{border-style:dashed}
.conqs + .chip-limpar{margin:10px 0 0}
.conq.bloq .conq-ic{background:transparent;border-color:var(--line-2);color:var(--fg-mute)}
.conq.bloq .conq-txt strong{color:var(--fg-dim)}
.conq.bloq .conq-txt span{color:var(--fg-mute)}

/* jogos favoritos */
.pf-jogos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-jogo{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:left}
.pf-capa{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--smoke);border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s var(--ease)}
.pf-capa img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out),opacity .45s var(--ease)}
.pf-jogo:hover .pf-capa{border-color:var(--line-3)}
.pf-jogo:hover .pf-capa img{transform:scale(1.04)}
.pf-nome{font-size:13px;line-height:1.3;color:var(--fg-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* atividade e histórico */
.pf-ativ,.pf-hist{margin:0;padding:0;list-style:none}
.pf-ativ button{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:start;width:100%;
  padding:10px 0;text-align:left;border-bottom:1px solid var(--line);
}
.pf-ativ li:last-child button{border-bottom:0}
.pf-ativ-ic{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg-dim)}
.pf-ativ-ic svg{width:15px;height:15px}
.pf-ativ-txt{min-width:0;font-size:14px;line-height:1.45;color:var(--fg-dim)}
.pf-ativ-txt b{font-weight:600;color:var(--fg)}
.pf-ativ button:hover .pf-ativ-txt b{text-decoration:underline;text-underline-offset:3px}
.pf-ativ-txt em{display:block;margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:normal;font-size:13px;color:var(--fg-mute)}
.pf-ativ time,.pf-hist time{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute);white-space:nowrap}
.pf-hist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--fg-dim)}
.pf-hist b{min-width:44px;text-align:right;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.pf-hist b.neg{color:var(--fg-mute)}
.pf-hist + .chip-limpar{margin:10px 0 0}
.pf-regras{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--fg-mute)}

/* editar perfil */
.editar-topo{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.editar-topo strong{display:block;font-size:19px}
.editar-topo .mono{font-size:11.5px;color:var(--fg-mute)}
#prefBio{min-height:84px}
.check-linha{
  display:flex;gap:11px;align-items:flex-start;padding:14px;margin-bottom:12px;cursor:pointer;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r);font-size:14px;line-height:1.5;color:var(--fg-dim);
}
.check-linha input{width:auto;flex:none;margin-top:3px}
.check-linha b{color:var(--fg)}
.check-linha:last-of-type{margin-bottom:20px}

/* avisos de XP, conquista e nível */
.toast-xp,.toast-conq,.toast-nivel{border-left-color:var(--accent)}
.toast-xp{min-width:min(290px,100%)}
.tx-topo{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.tx-ganho{font-family:var(--font-display);font-size:20px;font-weight:800;font-stretch:115%;letter-spacing:-.01em}
.tx-nivel{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.toast-xp .nivel-barra{margin:10px 0 2px}
.toast-conq,.toast-nivel{display:flex;align-items:center;gap:12px}
.tc-ic{width:40px;height:40px}
.tc-ic svg{width:22px;height:22px}
.tc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tc-rot{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.tc-txt strong{font-size:15.5px}
.tc-desc{font-size:13px;line-height:1.4;color:var(--fg-dim)}
.tn-mark{width:40px;height:auto;flex:none}

/* barra de leitura no topo do leitor de notícia */
.leitura{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.leitura i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* ============================================================
   FRAME SOCIAL (etapa 4)
   ============================================================ */
/* perfil de outra pessoa: estado da amizade e menu "⋯" */
.amigos-selo{cursor:default}
.amigos-selo::before{
  content:"";width:12px;height:12px;flex:none;background:currentColor;
  -webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat;
}
.amigos-selo:hover{background:var(--smoke);border-color:var(--line-2)}
.amigos-selo:active{transform:none}
.troca .t-b{display:none}
.troca:hover .t-a,.troca:focus-visible .t-a{display:none}
.troca:hover .t-b,.troca:focus-visible .t-b{display:inline}
.mais-wrap{position:relative}
.mais-btn{width:36px;padding:0}
.mais-btn svg{width:18px;height:18px;fill:currentColor}
.menu-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:6;display:none;flex-direction:column;min-width:220px;padding:6px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);transform-origin:top right;
}
.menu-pop.open{display:flex;animation:popIn .18s var(--ease-out) both}
.menu-pop button{padding:10px 12px;border-radius:var(--r);text-align:left;font-size:14px;color:var(--fg-dim);transition:background-color .15s var(--ease),color .15s var(--ease)}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--smoke);color:var(--fg);outline:none}
.menu-pop [data-mais="bloquear"],.menu-pop [data-mais="denunciar"]{color:var(--accent-ink)}

/* seção Amigos no perfil */
.sec-extra{margin-left:auto;font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-dim)}
.pf-amigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 10px}
.pf-amigo{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--fg-dim)}
.pf-amigo span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-amigo .av-foto,.pf-amigo .av-letras{transition:transform .25s var(--ease-out),border-color .2s var(--ease)}
.pf-amigo:hover .av-foto,.pf-amigo:hover .av-letras{transform:translateY(-2px);border-color:var(--line-3)}
.pf-amigo:hover span{color:var(--fg)}
.pf-amigos + .chip-limpar{margin:12px 0 0}
.pf-priv{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;margin-bottom:20px;
  background:var(--ash);border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--fg-dim);
}
.pf-priv .chip-limpar{flex:none}

/* painel Amigos */
.modal-amigos{max-width:640px}
.amigos-tabs{padding:14px 24px 0;border-bottom:1px solid var(--line)}
.amigos-tabs .tabs{margin-bottom:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.amigos-tabs .tabs::-webkit-scrollbar{display:none}
.tab-n{
  display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;
  background:var(--smoke);color:var(--fg-dim);font-family:var(--font-mono);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.tab.active .tab-n{background:var(--ash);color:var(--fg)}
.tab-n.on,.tab.active .tab-n.on{background:var(--accent);color:#fff}
.btn .tab-n{margin-left:2px}
.pessoas,.feed{margin:0;padding:0;list-style:none}
.pessoa{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pessoa:last-child{border-bottom:0}
.pessoa-id{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left}
.pessoa-txt{min-width:0}
.pessoa-txt strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}
.pessoa-id:hover strong{text-decoration:underline;text-underline-offset:3px}
.pessoa-txt > span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px}
.pessoa-meta{font-size:13px;color:var(--fg-mute)}
.pessoa-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;flex:none}
.pessoa-ok{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute)}
.pessoas-tit{
  display:flex;gap:8px;margin:22px 0 4px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);
}
.pessoas-tit:first-child{margin-top:0}
.pessoas-tit span{color:var(--fg-dim)}
.pessoas-nota{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--fg-mute)}
.pessoa-busca{width:100%;margin-bottom:8px}
.feed-item{
  display:grid;grid-template-columns:36px minmax(0,1fr) 22px;gap:12px;align-items:center;width:100%;
  padding:11px 0;text-align:left;border-bottom:1px solid var(--line);
}
.feed > li:last-child .feed-item{border-bottom:0}
.feed-txt{font-size:14px;line-height:1.45;color:var(--fg-dim)}
.feed-txt b{font-weight:600;color:var(--fg)}
.feed-item:hover .feed-txt b:last-of-type{text-decoration:underline;text-underline-offset:3px}
.feed-txt time{display:block;margin-top:2px;font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.feed-ic{color:var(--fg-mute)}
.feed-ic svg{width:18px;height:18px}
/* esqueleto das listas */
.sk .sk-av{
  flex:none;width:44px;height:44px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--smoke) 0%,var(--panel) 50%,var(--smoke) 100%);background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
}
.pessoa.sk,.feed-item.sk{display:flex;align-items:center;gap:12px;padding:12px 0}
.pessoa.sk > span:last-child,.feed-item.sk > span:last-child{flex:1}
.pessoa.sk i,.feed-item.sk i{margin-bottom:8px}

/* editor: abas e privacidade */
.editar-abas{margin:0 0 22px}
.pv-nota{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--fg-dim)}
.pv-lista{display:flex;flex-direction:column;margin-bottom:18px}
.pv-linha{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.pv-txt{min-width:0}
.pv-txt strong{display:block;font-size:15px}
.pv-txt span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--fg-mute)}
/* escolha segmentada (rádios): a opção marcada fica invertida, como as abas */
.seg{display:inline-flex;flex:none;padding:3px;background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seg span{
  display:block;padding:7px 12px;border-radius:4px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--fg-dim);
  transition:background-color .15s var(--ease),color .15s var(--ease);
}
.seg label:hover span{color:var(--fg)}
.seg input:checked + span{background:var(--fg);color:var(--ash)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}

/* ============================================================
   CHAT PRIVADO (etapa 5)
   ============================================================ */
.modal-chat{max-width:980px;height:min(760px,calc(100vh - 96px));display:flex;flex-direction:column}
.modal-chat .modal-head{position:relative;top:auto}
.chat-dm{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr)}
.chat-lista{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.chat-lista-topo{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--line)}
.chat-lista-topo .search{flex:1;min-width:0;width:auto;height:36px;padding:0 12px}
.chat-convs{flex:1;min-height:0;overflow-y:auto;margin:0;padding:6px;list-style:none;overscroll-behavior:contain}
.chat-conv{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;
  padding:10px;border-radius:var(--r-lg);text-align:left;transition:background-color .15s var(--ease);
}
.chat-conv:hover{background:var(--smoke)}
.chat-conv.on{background:var(--panel)}
.chat-conv-txt{min-width:0}
.chat-conv-txt strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px}
.chat-conv-txt span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--fg-mute)}
.chat-conv.nao-lida .chat-conv-txt span{color:var(--fg);font-weight:500}
.chat-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.chat-conv-meta time{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute);white-space:nowrap}
.chat-av{position:relative;display:block;flex:none}
/* online: ponto branco (o site não usa verde nem outra cor de destaque) */
.online-dot{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--fg);border:2px solid var(--coal)}
.chat-vazio{padding:28px 14px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--fg-mute)}
.chat-conversa{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:320px;margin:auto;padding:24px;text-align:center;font-size:14px;line-height:1.5;color:var(--fg-dim)}
.chat-placeholder strong{font-family:var(--font-display);font-size:20px;font-stretch:110%;color:var(--fg)}
.chat-placeholder .btn{margin-top:8px}
.chat-carregando{display:grid;place-items:center;flex:1}
.chat-carregando .sk-av{display:block;width:44px;height:44px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--smoke) 0%,var(--panel) 50%,var(--smoke) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.chat-topo{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 14px;border-bottom:1px solid var(--line)}
.chat-voltar{display:none;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--r);color:var(--fg-dim)}
.chat-voltar:hover{background:var(--smoke);color:var(--fg)}
.chat-voltar svg{width:20px;height:20px}
.chat-quem{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left}
.chat-quem strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}
.chat-quem:hover strong{text-decoration:underline;text-underline-offset:3px}
.chat-status{display:block;font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:18px 18px 8px;overscroll-behavior:contain}
.chat-inicio{display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0 18px;text-align:center;font-size:13.5px;color:var(--fg-dim)}
.chat-inicio strong{font-size:17px;color:var(--fg)}
.chat-dia{display:flex;justify-content:center;margin:16px 0 6px}
.chat-dia span{padding:3px 10px;border-radius:var(--r-sm);background:var(--smoke);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.msg-l{display:flex;flex-direction:column;align-items:flex-start;max-width:min(78%,560px);margin-top:10px}
.msg-l.junto{margin-top:3px}
.msg-l.meu{align-self:flex-end;align-items:flex-end}
.bolha{
  padding:9px 13px;border:1px solid var(--line);border-radius:14px 14px 14px 4px;background:var(--smoke);
  font-size:14.5px;line-height:1.5;color:var(--fg);overflow-wrap:anywhere;
}
.msg-l.meu .bolha{background:var(--fg);border-color:transparent;border-radius:14px 14px 4px 14px;color:var(--ash)}
.bolha p{margin:0}
.bolha .link-txt{color:inherit;text-decoration:underline}
.bolha.apagada,.msg-l.meu .bolha.apagada{background:transparent;border:1px dashed var(--line-3);color:var(--fg-mute);font-style:italic}
.bolha-resp{
  display:block;width:100%;margin:-1px 0 6px;padding:6px 9px;border-left:2px solid var(--accent);border-radius:4px;
  background:rgba(128,128,140,.16);text-align:left;font-size:12.5px;line-height:1.35;color:inherit;
}
.bolha-resp b{display:block;font-size:12px}
.bolha-resp span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.8}
.bolha-meta{display:flex;align-items:center;gap:8px;min-height:20px;padding:3px 4px 0;font-family:var(--font-mono);font-size:10.5px;color:var(--fg-mute)}
.recibo{color:var(--fg-dim)}
.bolha-acoes{display:inline-flex;gap:10px;opacity:0;transition:opacity .15s var(--ease)}
.msg-l:hover .bolha-acoes,.msg-l:focus-within .bolha-acoes{opacity:1}
.bolha-acoes button{font-family:var(--font-body);font-size:12px;color:var(--fg-dim)}
.bolha-acoes button:hover{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.chat-mais-antigas{align-self:center;margin-bottom:6px;font-size:13px;color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px}
.chat-digitando{padding:0 18px 8px;font-size:12.5px;color:var(--fg-mute)}
.dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:digitando 1.2s var(--ease) infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
.chat-composer{padding:10px 14px 14px;border-top:1px solid var(--line)}
.chat-linha{display:flex;align-items:flex-end;gap:10px}
.chat-linha textarea{
  flex:1;min-height:44px;max-height:140px;padding:11px 14px;resize:none;outline:0;
  background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:15px;line-height:1.45;color:var(--fg);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.chat-linha textarea::placeholder{color:var(--fg-mute)}
.chat-linha textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-resp{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;padding:8px 8px 8px 12px;
  border-left:2px solid var(--accent);border-radius:var(--r);background:var(--smoke);font-size:13px;color:var(--fg-dim);
}
.chat-resp > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-resp b{display:block;font-size:12.5px;color:var(--fg)}
.chat-resp .x{width:30px;height:30px}
.chat-conta{display:block;margin-top:6px;text-align:right;font-size:10.5px;color:var(--fg-mute)}
.chat-bloqueado{margin:10px 14px 14px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r);text-align:center;font-size:14px;color:var(--fg-mute)}
.chat-nova{flex:1;min-height:0;overflow-y:auto;padding:16px 18px}
.chat-nova-tit{font-size:15px}
.toast-msg{display:flex;align-items:center;gap:12px;cursor:pointer;border-left-color:var(--fg)}
.toast-msg .tc-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes digitando{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes bolhaIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .msg-l.entra{animation:bolhaIn .28s var(--ease-out) both;transform-origin:left bottom}
  .msg-l.meu.entra{transform-origin:right bottom}
}
@media (pointer:coarse){ .bolha-acoes{opacity:1} .bolha-acoes button{min-height:32px} }
@media (max-width:760px){
  .modal-chat{height:calc(100vh - 32px);height:calc(100dvh - 32px)}
  .chat-dm{grid-template-columns:minmax(0,1fr)}
  .chat-dm.com-conversa .chat-lista{display:none}
  .chat-dm:not(.com-conversa) .chat-conversa{display:none}
  .chat-lista{border-right:0}
  .chat-voltar{display:grid}
  .msg-l{max-width:86%}
  .chat-msgs{padding:14px 12px 6px}
  .chat-composer{padding:8px 10px 10px}
}

/* imagens de card e capa entram com fade quando carregam */
.js-img :is(.card-thumb,.promo-img,.relac-thumb,.pf-capa,.perfil-capa) img:not(.ok){opacity:0}
.card-thumb img,.promo-img img,.relac-thumb img,.perfil-capa img{transition:transform .7s var(--ease-out),opacity .45s var(--ease)}

/* card → leitor (View Transitions): a capa do card vira a capa da notícia */
::view-transition-group(capa-noticia){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(capa-noticia),::view-transition-new(capa-noticia){height:100%;object-fit:cover;overflow:clip}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
.overlay.vt,.overlay.vt .modal{animation:none}

/* saída dos modais: depois das regras de entrada para vencer as duas */
.overlay.saindo{animation:fadeOut .17s var(--ease) both;pointer-events:none}
.overlay.saindo .modal{animation:modalOut .17s var(--ease) both}

/* ============================================================
   MOVIMENTO
   ============================================================ */
/* revelação ao rolar: animação (não transição), para não atrasar o hover depois. Só o que estava abaixo da
   tela ao abrir ganha .espera (app.js, reveal); o resto aparece no primeiro desenho */
.reveal.espera{opacity:0}
.reveal.espera.in{opacity:1}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes modalOut{to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes popOut{to{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes pulsa{40%{transform:scale(1.12)}to{transform:none}}
@keyframes selo{from{opacity:0;transform:scale(.4) rotate(-12deg)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* o título do topo só sobe, sem fade: o navegador conta a maior pintura (LCP) quando ele aparece por inteiro,
   e com fade isso só acontecia no fim da animação (o PageSpeed no celular caía de ~95 para ~81) */
@keyframes subirSemSumir{from{transform:translateY(14px)}to{transform:none}}
@keyframes hmFaixa{from{opacity:0;transform:translate(-36px,-24px)}to{opacity:1;transform:none}}
@keyframes hmHaste{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes hmMeio{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* entrada da página: o texto sobe em sequência e o F se monta */
  .hero-txt > *{animation:subir .7s var(--ease-out) backwards}
  .hero-txt > :nth-child(2){animation-delay:.06s}
  .hero-txt > h1{animation-name:subirSemSumir}
  .hero-txt > :nth-child(3){animation-delay:.12s}
  .hero-txt > :nth-child(4){animation-delay:.18s}
  .hm-haste{animation:hmHaste .9s var(--ease-out) .1s backwards}
  .hm-faixa{animation:hmFaixa .9s var(--ease-out) .2s backwards}
  .hm-meio{animation:hmMeio .8s var(--ease-out) .42s backwards}
  .hero-mark::before{animation:fadeIn 1.4s var(--ease) .3s backwards}

  .reveal.espera.in{animation:subir .7s var(--ease-out) backwards}
  .deck .reveal.espera.in:nth-child(2){animation-delay:.07s}
  .deck .reveal.espera.in:nth-child(3){animation-delay:.14s}
  .deck .reveal.espera.in:nth-child(4){animation-delay:.21s}

  /* cards que entram ao trocar de categoria/assunto ou ao carregar mais */
  .card.entra{animation:subir .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms)}
  .fh-top.entra,.fh-lista > li.entra{animation:subir .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}
  /* perfil: as seções sobem em sequência */
  .perfil-cab.entra,.perfil-sec.entra{animation:subir .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 55ms)}
  .pessoa.entra,.feed > li.entra{animation:subir .4s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 40ms)}
  .conta-card.entra{animation:subir .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 35ms)}
  .toast-conq .tc-ic,.toast-nivel .tn-mark{animation:selo .6s var(--ease-out) .12s backwards}
  .pulsa{animation:pulsa .38s var(--ease-out)}

  .mobile-menu.open > *{animation:subir .4s var(--ease-out) backwards}
  .mobile-menu.open > :nth-child(2){animation-delay:.02s}
  .mobile-menu.open > :nth-child(3){animation-delay:.04s}
  .mobile-menu.open > :nth-child(4){animation-delay:.06s}
  .mobile-menu.open > :nth-child(5){animation-delay:.08s}
  .mobile-menu.open > :nth-child(6){animation-delay:.1s}
  .mobile-menu.open > :nth-child(7){animation-delay:.12s}
  .mobile-menu.open > :nth-child(8){animation-delay:.14s}
  .mobile-menu.open > :nth-child(9){animation-delay:.16s}
  .mobile-menu.open > :nth-child(10){animation-delay:.18s}
  .mobile-menu.open > :nth-child(n+11){animation-delay:.2s}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal.espera{opacity:1}
  .ticker-track{animation:none !important}
}

/* ============================================================
   TEMA CLARO — ajustes que não cabem só nas variáveis
   ============================================================ */
:root[data-theme="light"] .hero{background:radial-gradient(50% 70% at 82% 45%,rgba(224,16,41,.08),transparent 70%),var(--ash)}
:root[data-theme="light"] .hero-mark::before{background:radial-gradient(closest-side,rgba(224,16,41,.14),transparent)}
:root[data-theme="light"] .section-alt{background:#ECECF0;--card:#FFFFFF}
:root[data-theme="light"] .gen{background:radial-gradient(120% 90% at 100% 0%,rgba(224,16,41,.10),transparent 55%),var(--smoke)}
:root[data-theme="light"] .cat,:root[data-theme="light"] .meta-selo,:root[data-theme="light"] .ads::before{
  background:rgba(255,255,255,.92);color:#0E0E13;border-color:rgba(14,14,19,.14);
}
:root[data-theme="light"] .badge{border-color:var(--ash)}
:root[data-theme="light"] .reader-text .realce{background:linear-gradient(transparent 64%,rgba(224,16,41,.18) 64%)}
:root[data-theme="light"] ::selection{background:rgba(224,16,41,.22)}

/* botão de troca de tema */
.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
:root[data-theme="light"] .theme-btn .sun{display:none}

/* ============================================================
   HOME: DESTAQUES DA SEMANA / PARA VOCÊ (etapa 7)
   ============================================================ */
.feed-home{padding-bottom:24px}
.fh-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--fg-mute)}
.fh-ctrl-txt{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.btn-link{padding:2px 0;font-size:13.5px;font-weight:600;color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3);transition:color .15s var(--ease)}
.btn-link:hover{color:var(--fg)}
.fh-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:28px;align-items:start}
.fh-principal{display:flex;flex-direction:column;gap:6px;min-width:0}
.fh-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
.fh-top-img{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--smoke)}
.fh-top-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.fh-top:hover .fh-top-img img{transform:scale(1.035)}
.fh-sem-img{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-mute);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 16px)}
.fh-sem-img svg{width:34px;height:34px}
.fh-top-txt h3{font-size:clamp(22px,2.4vw,30px);font-stretch:110%;letter-spacing:-.025em;line-height:1.1;margin:10px 0}
.fh-top-txt h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out)}
.fh-top-txt h3 a:hover{background-size:100% 1px}
.fh-top-txt p{margin:0 0 12px;color:var(--fg-dim);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fh-motivo{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.fh-motivo::before{content:"";width:12px;height:2px;background:currentColor;transform:skewX(-45deg)}
.fh-meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.fh-lista{list-style:none;margin:0;padding:0}
.fh-l{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.fh-lista li:last-child .fh-l{border-bottom:0}
.fh-n{font-family:var(--font-display);font-weight:800;font-stretch:120%;font-size:26px;letter-spacing:-.03em;color:var(--fg-mute);transition:color .2s var(--ease)}
.fh-l:hover .fh-n{color:var(--accent-ink)}
.fh-l-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.fh-l-txt b{font-size:16px;line-height:1.3;font-weight:700}
.fh-l:hover .fh-l-txt b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fh-l img{width:92px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.fh-top.sk .fh-top-img{aspect-ratio:16/10}
.fh-top.sk .fh-top-txt i{display:block;height:14px;margin:10px 0;border-radius:var(--r-sm);background:var(--smoke)}
.fh-lado{display:flex;flex-direction:column;gap:18px;min-width:0}
.fh-bloco{padding:18px 18px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.fh-tit{margin:0 0 6px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.fh-bloco .feed-item{grid-template-columns:32px minmax(0,1fr);padding:10px 0}
.fh-bloco .feed-txt q{display:block;margin-top:3px;color:var(--fg-dim);font-size:13.5px;quotes:"“" "”"}
.fh-bloco .btn{margin:8px 0 6px}
.fh-vazio{margin:6px 0 4px;font-size:13.5px;line-height:1.5;color:var(--fg-mute)}
.fh-jogos{list-style:none;margin:0;padding:0}
.fh-jogos button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:9px 0;text-align:left;border-bottom:1px solid var(--line)}
.fh-jogos li:last-child button{border-bottom:0}
.fh-jogos img,.fh-capa{width:44px;height:56px;object-fit:cover;border-radius:var(--r-sm);background:var(--smoke)}
.fh-jogos b{display:block;font-size:14.5px;line-height:1.3}
.fh-jogos small{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute)}
.fh-jogos button:hover b{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   BUSCA GLOBAL (etapa 7)
   ============================================================ */
.overlay-busca{align-items:flex-start}
.modal-busca{max-width:680px;margin-top:min(12vh,110px);padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:min(76vh,680px)}
.busca-topo{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.busca-topo > svg{flex:none;width:20px;height:20px;stroke:var(--fg-mute);fill:none;stroke-width:1.8;stroke-linecap:round}
.busca-topo input{flex:1;min-width:0;height:44px;border:0;background:transparent;font-size:18px;color:var(--fg);outline:none}
.busca-topo input::-webkit-search-cancel-button{display:none}
.busca-res{flex:1;min-height:0;overflow-y:auto;padding:6px 8px 10px;overscroll-behavior:contain}
.br-grupo{margin:12px 10px 6px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.br-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:var(--r);text-align:left;transition:background-color .1s var(--ease)}
.br-item.sel{background:var(--smoke)}
.br-item.sel .br-txt b{color:var(--fg)}
.br-item img{flex:none;width:44px;height:30px;object-fit:cover;border-radius:var(--r-sm);background:var(--smoke)}
.br-item .av-letras,.br-item .av-foto{flex:none}
.br-ic{flex:none;display:grid;place-items:center;width:44px;height:30px;border-radius:var(--r-sm);background:var(--smoke);color:var(--fg-mute)}
.br-ic svg{width:16px;height:16px}
.br-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.br-txt b{font-size:14.5px;font-weight:600;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-txt small{font-size:12.5px;color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-txt mark,.busca-res mark{background:none;color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
.br-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px}
.br-dica{margin:10px 10px 4px;font-size:12.5px;color:var(--fg-mute)}
.br-vazio{padding:36px 18px;text-align:center;color:var(--fg-mute);font-size:14px}
.br-vazio strong{display:block;margin-bottom:6px;color:var(--fg);font-size:15px}
.busca-pe{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--fg-mute)}
.busca-pe-dica{margin-left:auto}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:4px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:11px;color:var(--fg-dim);background:var(--smoke)}

/* ============================================================
   INTERAÇÃO (v34): luz que segue o cursor, inclinação leve, progresso,
   voltar ao topo. Só transform/opacity; nada disso existe sem mouse
   ou com "reduzir movimento".
   ============================================================ */
/* a luz fica atrás do conteúdo (isolation + z-index -1): clareia o fundo do card, não o texto */
.card,.promo,.fh-bloco,.proj-card{isolation:isolate}
.promo{position:relative}
.fh-bloco,.proj-card{position:relative;overflow:hidden}
.card::after,.promo::after,.fh-bloco::after,.proj-card::after{
  content:"";position:absolute;left:0;top:0;z-index:-1;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);
  transform:translate(var(--mx,-999px),var(--my,-999px));opacity:0;transition:opacity .35s var(--ease);
}
:root[data-theme="light"] :is(.card,.promo,.fh-bloco,.proj-card)::after{background:radial-gradient(closest-side,rgba(224,16,41,.06),transparent)}
@media (hover:hover) and (pointer:fine){
  :is(.card,.promo,.fh-bloco,.proj-card):hover::after{opacity:1}
}
.icon-btn{transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease)}
.icon-btn:active{transform:scale(.92)}

/* barra de progresso da página, embaixo do menu (só onde o CSS sabe acompanhar a rolagem sozinho) */
.nav-progresso{display:none}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .nav-progresso{
      display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-grad);
      transform-origin:0 50%;transform:scaleX(0);animation:progressoPagina linear both;animation-timeline:scroll(root);pointer-events:none;
    }
  }
}
@keyframes progressoPagina{to{transform:scaleX(1)}}

/* seções do fim da página: o navegador só monta quando chegam perto da tela (abre mais rápido) */
#launcher,#suporte,.footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* voltar ao topo */
.topo-btn{
  position:fixed;left:24px;bottom:24px;z-index:60;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--coal);color:var(--fg-dim);box-shadow:var(--sh-pop);
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s var(--ease),transform .3s var(--ease-out),color .15s var(--ease);
}
.topo-btn.vis{opacity:1;transform:none;pointer-events:auto}
.topo-btn:hover{color:var(--fg)}
.topo-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  /* capas de jogo e o F do topo inclinam um pouco na direção do cursor */
  .card[data-game]{transition:border-color .2s var(--ease),transform .25s var(--ease-out)}
  .card[data-game]:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
  .hm-box{transform:perspective(1100px) rotateX(var(--hx,0deg)) rotateY(var(--hy,0deg));transition:transform .6s var(--ease-out)}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* logado (busca, chat, amigos, avisos, conta e painel) o menu aperta: ícones de 36px enquanto há
   links no topo e, entre 1181 e 1280, fica só o F da marca */
@media (min-width:1181px){
  .nav-actions{gap:6px}
  .nav-actions .icon-btn{width:36px;height:36px}
}
@media (max-width:1280px){
  .brand-txt{display:none}
}
@media (max-width:1180px){
  .brand-txt{display:flex}
  .nav-links{display:none}
  .burger{display:grid}
  .nav-actions{margin-left:auto}
  .games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .news-layout.com-aside{grid-template-columns:minmax(0,1fr)}
  .mais-lidas{position:static}
  .mais-lidas ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .mais-lidas li + li{border-top:0}
  .mais-lidas li{border-top:1px solid var(--line)}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #newsGrid > .card:first-child{grid-row:auto}
  .games-grid,.deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topo-btn{display:none}
  .fh-grid{grid-template-columns:1fr}
  .fh-lado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .fd-intro{grid-template-columns:1fr;gap:24px}
  .servicos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .servicos li:nth-child(2){border-top:1px solid var(--line)}
  .calc{grid-template-columns:1fr}
  .calc-res{border-left:0;border-top:1px solid var(--line)}
  .calc-barra{
    position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:70;
    display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--r-lg);
    background:var(--fg);color:var(--ash);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);text-align:left;
    transform:translateY(calc(100% + 24px));transition:transform .3s var(--ease-out);
  }
  .calc-barra.vis{transform:none}
  .calc-barra span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
  .calc-barra b{flex:1;font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .calc-barra i{font-style:normal;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .proj-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-adm .row-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-cols{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .hero-in{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);min-height:0;padding:56px 0 64px}
}
@media (max-width:900px){
  #btnAdmin{display:none}
  .support-grid{grid-template-columns:1fr}
  .comunidade-in{grid-template-columns:1fr}
  .port-item{grid-template-columns:1fr;gap:22px}
  .port-img{max-width:200px;padding:32px}
  .admin-main{display:flex;flex-direction:column}
  .admin-side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .admin-side button{white-space:nowrap}
  .admin-side button.active::before{left:12px;right:12px;top:auto;bottom:0;width:auto;height:2px}
  .admin-view{padding:22px 20px}

  /* pilares viram uma lista compacta */
  .pilares-in{grid-template-columns:1fr}
  .pilar-card{gap:2px;padding:14px 40px 14px 0;border-left:0;border-top:1px solid var(--line)}
  .pilar-card:first-child{border-top:0}
  .pilar-card::after{top:50%;right:4px;margin-top:-8px}
  .pilar-desc{display:none}
  .pilar-num{margin:0;padding:0}
}
@media (max-width:760px){
  .perfil-grade{grid-template-columns:minmax(0,1fr)}
  .perfil-cab{flex-wrap:wrap}
  .perfil-acoes{width:100%;max-width:none;justify-content:flex-start;padding-top:2px}
  .hero-in{grid-template-columns:1fr;padding:44px 0 52px}
  .hero-mark{display:none}
  .hero .lead{font-size:16.5px}
}
@media (max-width:640px){
  .section{padding:60px 0}
  .section-head{margin-bottom:28px}
  .news-grid,.games-grid,.deck{grid-template-columns:1fr}
  #newsGrid > .card:first-child,.news-layout.com-aside #newsGrid > .card:first-child{grid-column:auto}
  .news-layout.com-aside #newsGrid{grid-template-columns:1fr}
  #newsGrid > .card:first-child .card-thumb,.news-layout.com-aside #newsGrid > .card:first-child .card-thumb{aspect-ratio:16/10;min-height:0}
  .mais-lidas ol{grid-template-columns:1fr}
  .editor{padding:20px 16px}
  .editor-acoes .check{margin:6px 0 0;width:100%}
  #newsGrid > .card:first-child .card-body{padding:20px}
  .row-2{grid-template-columns:1fr}
  .servicos{grid-template-columns:1fr}
  .fh-top{grid-template-columns:1fr;gap:14px}
  .fh-lado{grid-template-columns:1fr}
  .fh-l{grid-template-columns:30px minmax(0,1fr) auto;gap:12px}
  .fh-n{font-size:20px}
  .fh-l img{width:72px}
  .modal-busca{margin-top:0;max-height:none;height:100%;border-radius:0}
  .overlay-busca{padding:0}
  .busca-pe{display:none}
  .servicos li:nth-child(2){border-top:0}
  .calc-perg{padding:22px 18px 4px}
  .calc-res-in{padding:22px 18px}
  .calc-tipos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-cards{grid-template-columns:1fr 1fr;gap:8px}
  .proj-card{padding:12px}
  .proj-card b{font-size:17px}
  .kpis{grid-template-columns:1fr 1fr}
  .news-bar .search,.search{width:100%;margin-left:0}
  /* abas deslizam de lado em vez de quebrar linha */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .tabs::-webkit-scrollbar{display:none}
  .news-bar .tabs{margin-inline:-20px}
  .cat-info .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .cat-info .chips::-webkit-scrollbar{display:none}
  .chips-rot{flex:none}
  .toasts{left:16px;right:16px;bottom:16px}
  .toast{max-width:none}
  .table{display:block;overflow-x:auto}
  .relac{grid-template-columns:1fr}
  .veredito{flex-direction:column;gap:12px}
  .v-selo{min-width:0}
  .avatares{grid-template-columns:repeat(4,1fr)}
  .ads-faixa{flex-direction:column;align-items:flex-start}
  .overlay{--ov-pt:16px;padding:16px 10px}
  .modal-body{padding:20px}
  .reader-body{padding:24px 20px 28px}
  .reader-text{font-size:16.5px}
  .form-card{padding:22px 18px}
  .port-lista{grid-template-columns:1fr}
  .cal-item{gap:12px}
  .cal-item .plats{display:none}
  .coment{gap:10px}
  .coment-av-wrap .av-letras,.coment-av-wrap .av-foto{width:34px !important;height:34px !important;font-size:13px !important}
  .coment-topo time{margin-left:0;width:100%}
  .perfil-capa{height:110px}
  .perfil-cab{padding:0 18px;gap:14px}
  .perfil-av{margin-top:-38px}
  .perfil-av .av-foto,.perfil-av .av-letras{width:76px !important;height:76px !important;font-size:27px !important}
  .perfil-id{padding-top:10px}
  .perfil-corpo{padding:20px 18px 24px}
  .pv-linha{flex-direction:column;align-items:stretch;gap:10px}
  .seg{display:flex}
  .seg label{flex:1}
  .seg span{text-align:center;padding:8px 6px}
  .pessoa{flex-wrap:wrap}
  .pessoa-acoes{width:100%;justify-content:flex-start;padding-left:56px}
  .amigos-tabs{padding:12px 16px 0}
  /* trilha de níveis: no estreito, só o nível atual tem nome */
  .nivel-trilha li:not(.atual){color:transparent}
  .nivel-trilha li.atual{overflow:visible}
}
@media (max-width:420px){
  .wrap{width:min(100% - 32px,var(--wrap))}
  .tabs,.news-bar .tabs,.cat-info .chips{margin-inline:-16px;padding-inline:16px}
  .brand-txt span{display:none}
  #btnTheme{display:none}
  #btnAmigos{display:none}          /* no celular bem estreito, Amigos fica no menu (com o número de pedidos) */
  .nav-actions{gap:6px}
  #btnAccount{max-width:92px;overflow:hidden;text-overflow:ellipsis;display:block;line-height:34px;padding:0 12px}
  .hero h1{font-size:clamp(32px,10vw,44px)}
  .calc-valor b{font-size:32px}
  .ticker-tag{padding:0 18px 0 10px;font-size:10px}
}
@media (max-width:370px){
  .brand-txt{display:none}
}
/* toque: alvos de pelo menos 40px mesmo nos controles compactos */
@media (pointer:coarse){
  .chip{height:36px}
  .notif-x{width:40px;height:40px}
  .mini{height:36px}
  .esqueci button,.coment-acoes button,.v-pc button{min-height:40px}
  .coment-autor{min-height:32px}
}

/* ============================================================
   MINHA CONTA E SEGURANÇA DA CONTA (etapa 8)
   ============================================================ */
.modal-conta{max-width:820px}
.conta-tabs .tabs{margin-bottom:14px}
.conta-topo{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,280px);align-items:center;gap:18px;margin-bottom:20px}
.conta-id{min-width:0}
.conta-id h2{font-size:24px;font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-id .mono{margin:6px 0 0;font-size:12px;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg)}
.conta-ic svg{width:20px;height:20px}
.conta-protecao{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:20px;background:var(--ash);border:1px solid var(--line);border-left:3px solid var(--fg);border-radius:var(--r)}
.conta-protecao.fraca{border-left-color:var(--accent)}
.conta-protecao.fraca .conta-ic{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.conta-protecao p{flex:1;margin:0;font-size:14px;line-height:1.5;color:var(--fg-dim)}
.conta-protecao strong{display:block;color:var(--fg);font-size:15px}
.conta-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.conta-card{
  display:flex;align-items:center;gap:12px;padding:14px;text-align:left;min-width:0;
  background:var(--coal);border:1px solid var(--line-2);border-radius:var(--r-lg);
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .12s var(--ease);
}
.conta-card:hover{border-color:var(--line-3);background:var(--smoke)}
.conta-card:active{transform:scale(.98)}
.conta-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.conta-card-txt{flex:1;min-width:0}
.conta-card-txt strong{display:block;font-size:15px}
.conta-card-txt span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--fg-mute)}
.conta-card-txt b{color:var(--fg);font-weight:600}
.conta-card.alerta .conta-ic{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.conta-seta{color:var(--fg-mute);flex:none;transition:transform .18s var(--ease),color .18s var(--ease)}
.conta-seta svg{width:16px;height:16px}
.conta-card:hover .conta-seta{color:var(--fg);transform:translateX(3px)}

.conta-sec{padding:20px 0;border-top:1px solid var(--line)}
.conta-sec:first-child{padding-top:0;border-top:0}
.conta-sec h3{
  display:flex;align-items:baseline;gap:8px;margin:0 0 10px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);
}
.conta-nota{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--fg-dim)}
.conta-nota b{color:var(--fg);font-weight:600}
.conta-acoes{display:flex;flex-wrap:wrap;gap:10px}
.conta-acoes .btn svg{width:16px;height:16px}
.conta-form{max-width:420px;margin-top:14px}
.conta-form .check-linha:last-of-type{margin-bottom:16px}
.forca{min-height:20px;margin:-8px 0 12px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}
.sessoes{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:var(--r-lg)}
.sessao{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.sessao:first-child{border-top:0}
.sessao.atual .conta-ic{background:var(--fg);border-color:var(--fg);color:var(--ash)}
.sessao.em-breve{opacity:.6}
.sessao-txt{flex:1;min-width:0}
.sessao-txt strong{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.sessao-txt .mono{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--fg-mute)}
.selo-atual,.selo-ok,.selo-pend{
  display:inline-block;padding:2px 6px;border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;
}
.selo-atual,.selo-ok{background:var(--smoke);border:1px solid var(--line-2);color:var(--fg)}
.selo-pend{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink)}
.conta-sk{display:grid;gap:14px;padding:6px 0}
.conta-sk i:nth-child(n){height:14px;width:70%}
.conta-sk i:nth-child(2n){width:92%}

/* 2FA: passos, QR e código */
.dois-fatores{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;padding:16px;background:var(--ash);border:1px solid var(--line);border-radius:var(--r-lg)}
.df-passos{margin:0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--fg-dim)}
.df-passos li + li{margin-top:6px}
.df-passos b{color:var(--fg)}
.df-qr{grid-row:span 2;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:200px}
/* o QR fica sempre em fundo branco: os apps leem melhor */
.df-qr img{width:180px;height:180px;padding:10px;background:#fff;border-radius:var(--r)}
.df-chave{margin:0;font-size:11.5px;line-height:1.6;color:var(--fg-mute);text-align:center;overflow-wrap:anywhere}
.df-chave b{color:var(--fg);letter-spacing:.06em}
.df-form .field{max-width:220px}
.codigo-2fa,#dfCodigo{font-family:var(--font-mono);font-size:22px !important;letter-spacing:.32em;font-variant-numeric:tabular-nums}

/* excluir conta: filete vermelho, sem fundo vermelho */
.zona-perigo{margin-top:6px;padding:18px 16px 4px;border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:var(--r)}
.zona-perigo h3{color:var(--accent-ink)}

@media (max-width:720px){
  .conta-topo{grid-template-columns:auto minmax(0,1fr)}
  .conta-nivel{grid-column:1 / -1}
  .dois-fatores{grid-template-columns:minmax(0,1fr)}
  .df-qr{grid-row:auto;max-width:none}
}
@media (max-width:640px){
  .conta-protecao{flex-wrap:wrap;align-items:flex-start}
  .conta-protecao p{flex-basis:calc(100% - 54px)}
  .conta-protecao .btn{width:100%}
  .conta-grade{grid-template-columns:minmax(0,1fr)}
  .sessao{flex-wrap:wrap}
  .sessao .mini{margin-left:52px}
}

/* ============================================================
   PÁGINAS (v37): cada endereço mostra só as suas seções
   O tema.js (e o _worker.js) põem data-pagina no <html>; cada seção diz em
   quais páginas aparece (data-em). A home ("inicio") é a vitrine: prévia
   curta de cada área (.so-inicio) sem os filtros e a lista completa (.so-pagina).
   ============================================================ */
html[data-pagina="inicio"] main > [data-em]:not([data-em~="inicio"]),
html[data-pagina="noticias"] main > [data-em]:not([data-em~="noticias"]),
html[data-pagina="jogos"] main > [data-em]:not([data-em~="jogos"]),
html[data-pagina="lancamentos"] main > [data-em]:not([data-em~="lancamentos"]),
html[data-pagina="ofertas"] main > [data-em]:not([data-em~="ofertas"]),
html[data-pagina="comunidade"] main > [data-em]:not([data-em~="comunidade"]),
html[data-pagina="agencia"] main > [data-em]:not([data-em~="agencia"]),
html[data-pagina="redacao"] main > [data-em]:not([data-em~="redacao"]),
html[data-pagina="privacidade"] main > [data-em]:not([data-em~="privacidade"]),
html[data-pagina="prime"] main > [data-em]:not([data-em~="prime"]),
html[data-pagina="termos-prime"] main > [data-em]:not([data-em~="termos-prime"]),
html[data-pagina="404"] main > [data-em]:not([data-em~="404"]){display:none}
html[data-pagina="inicio"] .so-pagina,
html:not([data-pagina="inicio"]) .so-inicio{display:none !important}
/* fora da home a página começa na própria seção: sem o filete de separação no topo */
html:not([data-pagina="inicio"]) main > .section{border-top:0}
#conteudo:focus{outline:none}
/* link antigo com # (ex.: /#jogos) indo para a página nova: não desenha a home no caminho */
html[data-indo] body{visibility:hidden}

/* ============================================================
   v38 — FRAME SOCIAL POR LOGIN E REDES EM ÍCONES
   O convite (so-visitante) só aparece para quem não entrou e o "Minha conta"
   (so-logado) só para quem entrou. Antes de o Supabase conferir a sessão, o
   <html> fica sem data-sessao e nenhum dos dois aparece.
   ============================================================ */
html:not([data-sessao="visitante"]) .so-visitante,
html:not([data-sessao="logado"]) .so-logado{display:none !important}

.redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.rede{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 11px;
  border:1px solid var(--line-2);border-radius:var(--r);font-size:14px;font-weight:600;color:var(--fg-dim);
  transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease);
}
.rede svg{width:20px;height:20px;flex:none;fill:currentColor}
.rede:hover{color:var(--fg);border-color:var(--line-3)}
.rede:active{transform:scale(.96)}
/* celular: só o ícone (o nome fica no aria-label e no title), os quatro numa linha */
@media (max-width:560px){
  .rede{width:44px;padding:0;justify-content:center}
  .rede span{display:none}
}

/* ============================================================
   v38 — FRAME OFERTAS: 4º PILAR E VITRINE
   ============================================================ */
@media (min-width:1025px){ .pilares-in{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* tablet: os quatro pilares em 2 × 2 (no celular continuam virando lista) */
@media (max-width:1024px) and (min-width:761px){
  .pilares-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilar-card:nth-child(odd){border-left:0;padding-left:0}
  .pilar-card:nth-child(n+3){border-top:1px solid var(--line)}
}

/* card: o título é o link da loja e cobre o card inteiro; copiar cupom e "Ver na loja" ficam por cima */
.promo-ir{color:inherit}
.promo-ir::before{content:"";position:absolute;inset:0;z-index:1}
.promo-ir:focus-visible{outline:none}
.promo:has(.promo-ir:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.promo-cupom,.promo-btn{position:relative;z-index:2}
.promo-selo{
  position:absolute;top:10px;right:10px;z-index:2;padding:5px 8px;border-radius:var(--r-sm);
  background:var(--fg);color:var(--ash);font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;
}
.promo-cupom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.promo-cupom .mini{flex:none}
.promo-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.promo-validade{margin:0;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute);font-variant-numeric:tabular-nums}
.promo-validade.acaba{color:var(--accent-ink)}
.promo-btn{align-self:flex-start;margin-top:auto}
.promo-corpo .plats{margin-top:-2px}
.vitrine-filtros .tabs{margin-bottom:12px}
.ofertas-aviso{margin-top:26px;text-align:center;max-width:none}

/* painel: categoria, plataformas e envio da foto */
.label-txt{display:block;font-size:13.5px;font-weight:600;color:var(--fg-dim);margin-bottom:7px}
.checks{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:9px}
.checks label{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--fg-dim);margin:0;cursor:pointer}
.checks input{width:auto}
.envio-img{display:flex;gap:14px;align-items:flex-start}
.envio-previa{flex:none;width:96px;aspect-ratio:4/3;border:1px dashed var(--line-3);border-radius:var(--r);overflow:hidden;display:grid;place-items:center}
.envio-previa img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   v38 — CONTAGEM REGRESSIVA DE LANÇAMENTOS
   Uma contagem ocupa a largura toda; duas ou mais viram um carrossel compacto
   (rola dentro da faixa, nunca a página). Números tabulares em caixas de
   largura fixa: os segundos mudam sem empurrar nada.
   ============================================================ */
.contagens-home{padding:22px 0;background:var(--ash)}
.cr-lista{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,430px),1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;
}
.cr-lista[data-n="1"]{grid-auto-columns:100%}
.cr-lanc{margin-bottom:30px}
.cr-card{
  scroll-snap-align:start;min-width:0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;
  padding:14px;background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);
}
.cr-capa{
  aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;
  background:repeating-linear-gradient(-45deg,var(--smoke) 0 10px,var(--ash) 10px 20px);
}
.cr-capa img{width:100%;height:100%;object-fit:cover}
.cr-capa span{padding:8px;text-align:center;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:17px;line-height:1.05;letter-spacing:-.01em}
.cr-info{min-width:0}
.cr-titulo{font-size:clamp(18px,2.2vw,24px);letter-spacing:-.02em;line-height:1.15}
.cr-titulo span{font-weight:500;font-stretch:100%;color:var(--fg-dim)}
.cr-tempo{display:flex;gap:6px;margin:10px 0 8px}
.cr-un{
  flex:none;min-width:60px;padding:7px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--ash);border:1px solid var(--line-2);border-radius:var(--r);
}
.cr-un b{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cr-un small{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.cr-pronto{margin:8px 0;font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:24px;color:var(--accent-ink)}
.cr-quando{margin:0;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-mute)}
.cr-pe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.cr-pe:empty{display:none}
.cr-obs{font-size:12.5px;color:var(--fg-mute)}
.cr-link{margin-top:10px}
@media (min-width:900px){
  .cr-lista[data-n="1"] .cr-card{grid-template-columns:120px minmax(0,1fr);padding:16px 20px}
  .cr-lista[data-n="1"] .cr-un{min-width:72px}
  .cr-lista[data-n="1"] .cr-un b{font-size:32px}
}
@media (max-width:420px){
  .cr-card{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
  .cr-lista:not([data-n="1"]){grid-auto-columns:88%}
  .cr-tempo{gap:5px}
  .cr-un{min-width:0;flex:1}
  .cr-un b{font-size:22px}
}

/* ============================================================
   v38 — AVISO DE VERSÃO NOVA (service worker)
   Camada flutuante (pode ter sombra). No celular ocupa a largura, acima da barra do sistema.
   ============================================================ */
.aviso-versao{
  position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:205;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);
  padding:10px 10px 10px 16px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);font-size:14px;font-weight:600;color:var(--fg);
}
.aviso-versao-x{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);color:var(--fg-mute)}
.aviso-versao-x:hover{color:var(--fg);background:var(--smoke)}
.aviso-versao-x svg{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){
  .aviso-versao{animation:aviso-sobe .32s var(--ease-out)}
  @keyframes aviso-sobe{from{opacity:0;transform:translate(-50%,12px)}}
}
@media (max-width:560px){
  .aviso-versao{left:16px;right:16px;width:auto;max-width:none;transform:none}
  .aviso-versao span{flex:1;font-size:13.5px}
  @media (prefers-reduced-motion:no-preference){ @keyframes aviso-sobe{from{opacity:0;transform:translateY(12px)}} }
}

/* ============================================================
   v39 — MANUTENÇÃO: Discord no lugar do chat, "Me avise" da contagem
   ============================================================ */
.icon-discord svg{fill:currentColor;stroke:none}
.cr-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cr-acoes:empty{display:none}
.cr-acoes .cr-link{margin-top:0}
.cr-avise svg{width:15px;height:15px}

/* v39 — SOBRE A REDAÇÃO (/redacao) */
.redacao-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.redacao-texto{max-width:68ch}
.redacao-texto .lead{margin:0 0 6px}
.redacao-texto h3{font-size:20px;letter-spacing:-.01em;margin:28px 0 8px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.redacao-texto p,.redacao-texto li{color:var(--fg-dim);font-size:16px;line-height:1.65}
.redacao-texto p{margin:0}
.redacao-texto ul{margin:0;padding-left:20px;display:grid;gap:6px}
.redacao-texto a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.redacao-autores{display:grid;gap:12px;position:sticky;top:calc(var(--nav-h) + 20px)}
.redacao-autores h3{margin:0 0 2px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
#autoresExtra{display:grid;gap:12px}
#autoresExtra:empty{display:none}
.autor{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px;
  background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);
  scroll-margin-top:calc(var(--nav-h) + 16px);transition:border-color .3s var(--ease);
}
.autor:target,.ancora-autor:target + .autor{border-color:var(--accent)}
.ancora-autor{display:block;height:0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.autor-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:800;font-size:17px}
.autor-av-frame{background:var(--ash);border:1px solid var(--line-2)}
.autor-txt{min-width:0}
.autor-txt strong{display:block;font-size:16px}
.autor-cargo{display:block;margin-top:2px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute)}
.autor-txt p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--fg-dim)}
.autor-n{display:block;margin-top:8px;font-size:12.5px;color:var(--fg-mute)}
.autor-n:empty{display:none}
.reader-meta a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.reader-meta a:hover{color:var(--fg)}
@media (max-width:860px){
  .redacao-grid{grid-template-columns:minmax(0,1fr)}
  .redacao-autores{position:static}
}

/* v39 — PÁGINA NÃO ENCONTRADA (404) */
html[data-pagina="404"] main{min-height:60vh}
.p404{max-width:620px;margin:0 auto;padding:24px 0 8px;display:flex;flex-direction:column;align-items:center;text-align:center}
.p404-mark{width:72px;height:auto;margin-bottom:18px}
.p404-cod{margin:0 0 10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.p404 h1,.p404 h2{margin:0;font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-.02em}
.p404 .lead{margin:14px 0 24px;color:var(--fg-dim)}
.p404 .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.p404-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}

/* ============================================================
   v40 — DISCOVER, BUSCA EM OFERTAS, DADOS DO PÚBLICO, FEEDBACK, PRIVACIDADE E PLANOS DA AGÊNCIA
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aviso-img:empty{display:none}
.aviso-img{color:var(--accent-ink)}

/* busca de Ofertas */
.of-busca{max-width:520px;margin-bottom:14px}

/* privacidade: o mesmo texto da /redacao, numa coluna só */
.privacidade .redacao-texto{max-width:72ch}
.redacao-data{margin-top:28px !important;font-size:13px !important;color:var(--fg-mute) !important}

/* painel: dados do público */
.dados-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;margin-top:20px}
.dados-bloco{background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-width:0;overflow-x:auto}
.dados-bloco h3{font-size:16px;margin:0}
.dados-bloco .sub{margin:6px 0 0;font-size:13px}
.dados-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tabela-dados{margin-top:8px}
.tabela-dados th.num,.tabela-dados td.num{text-align:right;white-space:nowrap}
.dados-barra{display:block;width:120px;height:8px;border-radius:4px;background:var(--smoke);overflow:hidden}
.dados-barra i{display:block;height:100%;background:var(--accent)}
.nota-estrelas{color:var(--accent-ink);letter-spacing:1px;white-space:nowrap}

/* aviso de feedback: card discreto no canto, sem cobrir o conteúdo do meio */
.feedback{
  position:fixed;left:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:150;width:min(340px,calc(100vw - 32px));
  padding:16px 16px 12px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
}
.feedback.saindo{opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.feedback-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);color:var(--fg-mute)}
.feedback-x:hover{color:var(--fg);background:var(--smoke)}
.feedback-x svg{width:16px;height:16px}
.feedback-tit{margin:0 36px 10px 0;font-weight:700;font-size:15px}
.feedback-notas{display:flex;gap:4px;margin-bottom:10px}
.feedback-notas button{width:40px;height:40px;border-radius:var(--r);font-size:22px;line-height:1;color:var(--fg-mute);border:1px solid var(--line)}
.feedback-notas button.on{color:#F5B301;border-color:var(--line-2)}
.feedback-notas button:hover{border-color:var(--line-3)}
.feedback textarea{width:100%;min-height:58px;resize:vertical;padding:8px 10px;font:inherit;font-size:14px;color:var(--fg);background:var(--ash);border:1px solid var(--line);border-radius:var(--r)}
.feedback-msg{margin:6px 0 0;font-size:13px;color:var(--fg-dim)}
.feedback-msg:empty{display:none}
.feedback-acoes{display:flex;gap:8px;margin-top:10px}
.feedback-rodape{margin:10px 0 0;font-size:12px}
.feedback-rodape a{color:var(--fg-mute);text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .feedback{animation:aviso-sobe-fb .32s var(--ease-out)}
  @keyframes aviso-sobe-fb{from{opacity:0;transform:translateY(12px)}}
}
@media (max-width:560px){ .feedback{left:16px;right:16px;width:auto} }

/* Frame Digital: planos com preço fechado */
.planos-agencia{margin:6px 0 44px}
.planos-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plano{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;
  background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);
}
.plano h3{margin:0;font-size:20px}
.plano-oque{margin:0;color:var(--fg-dim);font-size:14.5px}
.plano-preco{margin:4px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plano-preco strong{font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-.02em}
.plano-preco small{color:var(--fg-mute);font-size:13px}
.plano ul{margin:2px 0 0;padding-left:18px;display:grid;gap:5px;font-size:14px;color:var(--fg-dim);flex:1}
.plano-prazo{margin:0;font-family:var(--font-mono);font-size:12px;color:var(--fg-mute)}
.plano .btn{margin-top:4px}
.plano-duvida{font-size:13px;color:var(--fg-dim);text-align:center;text-decoration:underline;text-underline-offset:2px}
.planos-nota{margin:16px 0 0;font-size:14px;color:var(--fg-dim)}
.planos-nota a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){ .planos-grade{grid-template-columns:minmax(0,1fr)} }

/* ============================================================
   v40 — FRAME PRIME
   Selo, molduras e cores do nome só aparecem para quem é Prime
   (o banco decide; a view pública esconde moldura e cor de quem
   não é). Cores do nome: AA (4.5:1) nos dois temas e em qualquer
   superfície. Tudo que se mexe para com prefers-reduced-motion.
   ============================================================ */
:root{
  --cn-brasa:#FF8A4C;--cn-ouro:#F5C542;--cn-esmeralda:#34D399;--cn-ciano:#22D3EE;
  --cn-azul:#7AB4FF;--cn-violeta:#B49CFF;--cn-rosa:#F77FBE;--cn-gelo:#C9D6E8;
  --i-estrela:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{
  --cn-brasa:#B83D0A;--cn-ouro:#8A5A00;--cn-esmeralda:#036B4E;--cn-ciano:#0B6A83;
  --cn-azul:#1D4ED8;--cn-violeta:#6D28D9;--cn-rosa:#BE185D;--cn-gelo:#475569;
}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-brasa{color:var(--cn-brasa)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-ouro{color:var(--cn-ouro)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-esmeralda{color:var(--cn-esmeralda)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-ciano{color:var(--cn-ciano)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-azul{color:var(--cn-azul)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-violeta{color:var(--cn-violeta)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-rosa{color:var(--cn-rosa)}
:is(.coment-autor,.perfil-id h2,.conta-id h2,.prime-nome-amostra).cor-gelo{color:var(--cn-gelo)}

/* selo: texto branco sobre o degradê escuro do F (5:1 ou mais em toda a faixa) */
.selo-prime{
  position:relative;display:inline-flex;align-items:center;gap:4px;flex:none;vertical-align:middle;
  margin-left:6px;padding:2px 7px 2px 6px;border-radius:var(--r-sm);overflow:hidden;
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
  color:#fff;background:linear-gradient(100deg,#A3001C 0%,#D0021F 55%,#B83D0A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.selo-prime::before{content:"";width:9px;height:9px;flex:none;background:currentColor;-webkit-mask:var(--i-estrela) center/contain no-repeat;mask:var(--i-estrela) center/contain no-repeat}
.selo-prime::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);
}
@media (prefers-reduced-motion:no-preference){
  .selo-prime::after{animation:prime-brilho 4.2s var(--ease) infinite}
  @keyframes prime-brilho{0%,60%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
}
.coment-topo .selo-prime{margin-left:2px}
.perfil-sub .selo-prime{margin-left:0}
.conta-nome{display:flex;align-items:center;gap:8px;min-width:0}
.conta-nome h2{min-width:0}
.conta-nome .selo-prime{margin-left:0}
#btnAccount.prime::before{content:"";width:11px;height:11px;margin-right:6px;flex:none;background:currentColor;-webkit-mask:var(--i-estrela) center/contain no-repeat;mask:var(--i-estrela) center/contain no-repeat}
#btnAccount.prime{display:inline-flex;align-items:center}

/* molduras do avatar (anéis por box-shadow: valem para foto e letras e não mudam o tamanho) */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.av-foto.av-m,.av-letras.av-m{border-color:transparent}
.av-foto.av-m-chama,.av-letras.av-m-chama{box-shadow:0 0 0 2px var(--coal),0 0 0 4px #FE5E14,0 0 14px 2px rgba(254,94,20,.5)}
.av-foto.av-m-neon,.av-letras.av-m-neon{box-shadow:0 0 0 2px var(--coal),0 0 0 4px #22D3EE,0 0 0 6px var(--coal),0 0 0 8px #E879F9,0 0 18px 3px rgba(34,211,238,.35)}
.av-foto.av-m-ouro,.av-letras.av-m-ouro{border-color:#FFE7A0;box-shadow:0 0 0 2px #E0A526,0 0 0 3px #8A5A12,0 0 0 5px #F5C542,0 0 14px 2px rgba(245,197,66,.35)}
.av-foto.av-m-pixel,.av-letras.av-m-pixel{border-radius:2px;box-shadow:0 0 0 3px #22C55E,4px 4px 0 3px #14532D}
.av-foto.av-m-orbita{border:3px solid transparent;background:conic-gradient(from var(--ang),#7C3AED,#22D3EE,#F472B6,#7C3AED) border-box}
.av-letras.av-m-orbita{border:3px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--ang),#7C3AED,#22D3EE,#F472B6,#7C3AED) border-box}
@media (prefers-reduced-motion:no-preference){
  .av-m-chama{animation:moldura-chama 2.2s ease-in-out infinite alternate}
  @keyframes moldura-chama{to{box-shadow:0 0 0 2px var(--coal),0 0 0 4px #E30128,0 0 20px 4px rgba(227,1,40,.45)}}
  .av-m-orbita{animation:moldura-orbita 5s linear infinite}
  @keyframes moldura-orbita{to{--ang:360deg}}
}

/* faixa discreta na home (some para quem já é Prime) */
.prime-faixa{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--coal)}
.prime-faixa-in{display:flex;align-items:center;gap:14px;padding-block:14px}
.prime-faixa p{margin:0;flex:1;font-size:15px;color:var(--fg-dim)}
.prime-faixa p strong{color:var(--fg)}
.prime-faixa .selo-prime{margin:0}
html[data-assinante="1"] .prime-faixa,html[data-prime="1"] .prime-faixa{display:none}
@media (max-width:640px){
  .prime-faixa-in{flex-wrap:wrap;gap:10px}
  .prime-faixa p{flex-basis:100%;order:2}
  .prime-faixa .btn{order:3}
}
.nav-links a.nav-prime{color:var(--fg)}
.nav-links a.nav-prime::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;background:var(--accent-ink);-webkit-mask:var(--i-estrela) center/contain no-repeat;mask:var(--i-estrela) center/contain no-repeat}

/* página /prime */
.prime-hero{max-width:780px;margin-bottom:30px}
.prime-hero h1,.prime-hero h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em;line-height:1.05;margin:10px 0 14px;text-wrap:balance}
.prime-status{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:14px 16px;border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--accent-soft)}
.prime-status p{margin:0}
.prime-status a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prime-roda{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent-ink)}
@media (prefers-reduced-motion:no-preference){ .prime-roda{animation:prime-gira .8s linear infinite} @keyframes prime-gira{to{transform:rotate(360deg)}} }
.prime-grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.prime-compra{display:grid;gap:16px;padding:22px;background:var(--coal);border:1px solid var(--line-2);border-radius:var(--r-xl)}
.prime-planos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prime-plano{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;cursor:pointer;
  background:var(--smoke);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.prime-plano:hover{border-color:var(--line-3)}
.prime-plano.on{border-color:var(--accent);background:var(--accent-soft)}
.prime-plano input{position:absolute;top:14px;right:14px;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.prime-plano:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}
.prime-badge{align-self:flex-start;padding:2px 8px;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.prime-nome{font-size:18px;padding-right:26px}
.prime-preco{color:var(--fg-dim);font-size:14px}
.prime-preco b{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--fg)}
.prime-eq{font-family:var(--font-mono);font-size:12.5px;color:var(--fg)}
.prime-economia{font-size:13px;color:var(--fg-dim);display:flex;flex-wrap:wrap;gap:4px 8px}
.prime-economia s{color:var(--fg-mute)}
.prime-plano[data-plano="anual"] .prime-economia{color:var(--accent-ink);font-weight:600}
.prime-resumo{display:grid;gap:6px;padding:14px 16px;border-radius:var(--r-lg);background:var(--ash);border:1px solid var(--line)}
.prime-resumo p{margin:0;font-size:14.5px;color:var(--fg-dim);line-height:1.55}
.prime-resumo strong{color:var(--fg)}
.prime-btn{width:100%;justify-content:center;min-height:50px;font-size:16px}
.prime-letra{margin:0;font-size:12.5px;color:var(--fg-mute);line-height:1.6}
.prime-letra a{color:var(--fg-dim);text-decoration:underline;text-underline-offset:2px}
.prime-vantagens h3,.prime-faq h3{margin:0 0 14px;font-size:20px}
.prime-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.prime-lista li{display:flex;gap:14px;align-items:flex-start}
.prime-lista strong{display:block;font-size:16px}
.prime-lista p{margin:2px 0 0;color:var(--fg-dim);font-size:14.5px;line-height:1.55}
.prime-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent-ink)}
.prime-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prime-apoio{margin:18px 0 0;font-size:14px;color:var(--fg-mute)}
.prime-faq{margin-top:clamp(36px,5vw,56px);max-width:820px}
.prime-faq details{border-top:1px solid var(--line)}
.prime-faq details:last-child{border-bottom:1px solid var(--line)}
.prime-faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.prime-faq summary::-webkit-details-marker{display:none}
.prime-faq summary::after{content:"";width:16px;height:16px;flex:none;margin-top:3px;background:var(--fg-mute);-webkit-mask:var(--i-mais) center/contain no-repeat;mask:var(--i-mais) center/contain no-repeat;transition:transform .2s var(--ease)}
.prime-faq details[open] summary::after{transform:rotate(45deg)}
.prime-faq details p{margin:0 0 16px;color:var(--fg-dim);line-height:1.65}
.prime-faq a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){ .prime-grade{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .prime-planos{grid-template-columns:minmax(0,1fr)} .prime-compra{padding:16px} }

/* Minha conta → Frame Prime */
.prime-convite{display:grid;justify-items:start;gap:10px;padding:22px;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--coal)}
.prime-convite h3{margin:0;font-size:20px}
.prime-convite p{margin:0;color:var(--fg-dim)}
.prime-convite .selo-prime{margin:0}
.prime-fim{font-size:12px}
.prime-conta{display:grid;gap:16px}
.prime-situacao{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--coal)}
.prime-situacao .selo-prime{margin:3px 0 0}
.prime-situacao p{margin:4px 0 0;color:var(--fg-dim);font-size:14.5px}
.prime-acoes{display:flex;gap:8px;flex-wrap:wrap}
.prime-pers{display:grid;gap:18px}
.prime-pers fieldset{margin:0;padding:0;border:0;min-width:0}
.prime-pers legend{padding:0;margin-bottom:10px;font-weight:700}
.prime-ops{display:flex;flex-wrap:wrap;gap:10px}
.prime-op{position:relative;display:grid;justify-items:center;gap:8px;min-width:84px;padding:14px 10px 10px;cursor:pointer;border:1.5px solid var(--line-2);border-radius:var(--r-lg);background:var(--coal);font-size:12.5px;color:var(--fg-dim)}
.prime-op:hover{border-color:var(--line-3)}
.prime-op:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.prime-op:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}
.prime-op input{position:absolute;opacity:0;pointer-events:none}
.prime-ops.cores .prime-op{min-width:96px}
.prime-nome-amostra{font-size:16px;font-weight:700;color:var(--fg);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* oferta que ainda é só do Prime */
.promo-prime{position:absolute;left:10px;bottom:10px;z-index:2;padding:3px 8px;border-radius:var(--r-sm);background:#A3001C;color:#fff;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* termos do Prime */
.termos-prime .redacao-texto{max-width:72ch}

/* ============================================================
   v41: RASCUNHO, CRÉDITO DA CAPA E MÍDIA
   ============================================================ */
/* legenda discreta da capa, logo abaixo da imagem */
.capa-credito{
  max-width:760px;margin:0 auto;padding:8px 40px 0;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.5;color:var(--fg-mute);
}
.capa-credito i{font-style:normal;margin:0 4px}
/* faixa do rascunho no leitor (só a equipe vê): filete vermelho, sem fundo vermelho */
.faixa-rascunho{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  margin:0 0 22px;padding:12px 14px;background:var(--smoke);
  border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:var(--r);font-size:14px;
}
.faixa-rascunho b{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.fr-acoes{display:flex;gap:8px;flex-wrap:wrap}
.selo-rascunho{
  display:inline-block;padding:2px 6px;border-radius:var(--r-sm);vertical-align:1px;
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);
}
.editor-topo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.editor-topo h3{margin:0}
.table tr.linha-rascunho td{background:color-mix(in srgb, var(--accent-soft) 40%, transparent)}
/* capa: link, botão de enviar e arrastar e soltar */
.capa-campo{padding:12px;margin-left:-12px;margin-right:-12px;border:1px dashed transparent;border-radius:var(--r-lg);transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.capa-campo.arrastando{border-color:var(--accent-line);background:var(--accent-soft)}
.capa-linha{display:flex;gap:8px;align-items:center}
.capa-linha input{flex:1;min-width:0}
.capa-linha .btn{flex:none;height:44px}
.capa-previa:empty{display:none}
.capa-previa{margin-top:10px}
.capa-previa img{display:block;max-width:320px;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-2);border-radius:var(--r)}
.capa-campo .row-2{margin-top:14px}
.capa-campo .check{margin:4px 0 0}
/* botão que pede confirmação nele mesmo */
.btn.confirmando,.mini.confirmando{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft)}

/* aba Mídia */
.midia-envio .row-2{align-items:start}
.midia-envio .check{margin:8px 0 0}
.midia-fila:empty{display:none}
.midia-fila{list-style:none;margin:16px 0 12px;padding:0;border:1px solid var(--line);border-radius:var(--r-lg)}
.midia-fila li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);font-size:14px}
.midia-fila li:first-child{border-top:0}
.midia-fila .mono{font-size:11.5px;color:var(--fg-mute);font-variant-numeric:tabular-nums}
.mf-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-acoes{display:flex;gap:4px;flex:none}
.midia-progresso{font-size:12px;color:var(--fg-mute)}
.midia-total{align-self:center;font-size:12px;color:var(--fg-mute)}
.midia-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.midia-item{position:relative;display:flex;flex-direction:column;margin:0;min-width:0;background:var(--coal);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.midia-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--smoke)}
.midia-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.midia-item figcaption{display:flex;flex-direction:column;gap:3px;padding:10px 12px 0;min-width:0}
.midia-item strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.midia-item .mono{font-size:11px;color:var(--fg-mute)}
.midia-uso{font-size:11.5px;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.midia-acoes{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 12px;margin-top:auto}
.midia-confirma{position:absolute;inset:auto 0 0 0;padding:12px;background:var(--panel);border-top:1px solid var(--accent-line)}
.midia-confirma p{margin:0 0 10px;font-size:13px;line-height:1.45}
.midia-confirma div{display:flex;gap:8px}

@media (max-width:640px){
  .capa-credito{padding:8px 20px 0}
  .capa-linha{flex-wrap:wrap}
  .capa-linha .btn{width:100%}
  .faixa-rascunho .fr-acoes{width:100%}
  .midia-grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ============================================================
   v42: CABEÇALHO QUE NÃO ENCAVALA ("Mais") E PRIME EM ÍCONE
   ============================================================ */
/* o app.js (ligarMenu) mede o espaço e manda para "Mais" o que não cabe, na ordem de data-nivel */
.nav-links a.no-mais{display:none}
.nav-mais{position:relative;flex:none}
.nav-mais-btn{
  display:flex;align-items:center;gap:4px;padding:9px 7px;border-radius:var(--r);white-space:nowrap;
  font-size:13.5px;font-weight:500;color:var(--fg-dim);transition:color .15s var(--ease);
}
.nav-mais-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.nav-mais-btn:hover,.nav-mais-btn.ativo,.nav-mais.open .nav-mais-btn{color:var(--fg)}
.nav-mais.open .nav-mais-btn svg{transform:rotate(180deg)}
.nav-mais-lista{
  position:absolute;top:calc(100% + 12px);right:0;z-index:90;display:none;flex-direction:column;min-width:200px;padding:6px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);transform-origin:top right;
}
.nav-mais.open .nav-mais-lista{display:flex;animation:popIn .18s var(--ease-out) both}
.nav-links .nav-mais-lista a{padding:10px 12px;font-size:14px}
.nav-links .nav-mais-lista a::after{display:none}
.nav-links .nav-mais-lista a:hover{background:var(--smoke)}
.nav-links .nav-mais-lista a.ativo{color:var(--fg);background:var(--smoke)}
/* Prime: com espaço, estrela + "Prime"; apertado, só a estrela (o nome fica no aria-label e no title) */
.nav-links a.nav-prime.so-icone{padding-inline:10px}
.nav-links a.nav-prime.so-icone::before{margin-right:0}
.nav-prime.so-icone .nav-prime-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* nome comprido na conta não empurra o resto (o nome inteiro fica no title) */
#btnAccount{max-width:170px}
/* ainda sem espaço (celular com login, equipe): sai do topo, nesta ordem, o que também está no menu do celular */
.nav-in.sem-tema #btnTheme,.nav-in.sem-amigos #btnAmigos,.nav-in.sem-discord #btnDiscord,.nav-in.sem-busca #btnBusca{display:none}
.nav-in.sem-marca .brand-txt{display:none}
.nav-in.conta-curta #btnAccount{max-width:92px;overflow:hidden;text-overflow:ellipsis;display:block;line-height:34px;padding:0 12px}

/* v44: convite para os canais do WhatsApp (fim da notícia e /ofertas) */
.zap-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:34px;padding:20px 22px;border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--accent-soft)}
.zap-box h2,.zap-box h3{margin:0;font-family:var(--font-display);font-size:19px;font-weight:800;line-height:1.25;letter-spacing:0}
.zap-box p{margin:6px 0 0;color:var(--fg-dim);font-size:14.5px;line-height:1.5}
.zap-txt{flex:1 1 260px;min-width:0}
.zap-opcoes{display:flex;flex-wrap:wrap;gap:10px}
.zap-opcoes .btn{height:auto;min-height:44px;padding-block:10px;white-space:normal;text-align:center}
@media (max-width:560px){.zap-box{padding:18px}.zap-opcoes,.zap-opcoes .btn{width:100%}}

/* v45: pedido de orçamento (/agencia#pedido) */
.pedido-card{scroll-margin-top:calc(var(--nav-h) + 16px)}
.pedido-card .pilar{margin-bottom:12px}
.pedido-card h3{font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:-.01em;margin-bottom:8px}
.pedido-card .field{margin-bottom:20px}
.campo-ajuda{margin:7px 0 0;font-size:12.5px;color:var(--fg-mute)}
.campo-erro{margin:7px 0 0;font-size:13px;font-weight:600;color:var(--accent-ink)}
.campo-erro:empty{display:none}
.pedido-card [aria-invalid="true"]{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft)}
.pedido-alerta:empty{display:none}
.pedido-alerta .alert{margin-bottom:18px}
.pedido-anexo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 20px;padding:14px 16px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft)}
.pedido-anexo .spec{flex-basis:100%}
.pedido-anexo strong{font-size:16px}
.pedido-anexo-resumo{flex-basis:100%;font-size:13.5px;color:var(--fg-dim)}
.pedido-tirar{padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--fg-dim);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pedido-armadilha{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pedido-privacidade{margin:4px 0 18px;font-size:13px;line-height:1.6;color:var(--fg-mute)}
.pedido-privacidade a{color:var(--fg-dim);text-decoration:underline;text-underline-offset:2px}
.pedido-enviar{height:52px;font-size:16px}
.pedido-ok{padding:8px 0 4px;text-align:center;outline:0}
.pedido-ok-selo{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border:1px solid var(--accent-line);border-radius:50%;background:var(--accent-soft)}
.pedido-ok-selo svg{width:26px;height:26px;fill:none;stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pedido-ok h4{margin-bottom:8px;font-size:22px;font-weight:800}
.pedido-ok p{max-width:46ch;margin:0 auto 10px;color:var(--fg-dim)}
.pedido-ok-num{font-size:13.5px}
button.plano-duvida{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
/* enquanto o formulário está na tela, nada flutua por cima dele (voltar ao topo, feedback, aviso de versão) */
html.pedido-vis .topo-btn,html.pedido-vis .feedback,html.pedido-vis .aviso-versao{display:none !important}
/* celular: uma coluna (o .row-2 já vira uma), campos altos para o dedo e texto de 16px (o iPhone não dá zoom) */
@media (max-width:640px){
  .pedido-card .field input:not([type=checkbox]):not([type=radio]),.pedido-card .field select{height:50px;font-size:16px}
  .pedido-card .field textarea{font-size:16px}
}
.aviso-email{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-mute)}
.aviso-email.falhou,.aviso-email.pendente{color:var(--accent-ink)}

/* v46: o assistente que aparece depois do pedido (respostas em botões) */
.pedido-bot{max-width:560px;margin:22px auto 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ash);text-align:left;overflow:hidden}
.pedido-bot-topo{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.pedido-bot-topo span{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute)}
.pedido-bot-msgs{display:flex;flex-direction:column;gap:8px;padding:16px}
.pedido-ok .bot-msg{align-self:flex-start;max-width:88%;margin:0;padding:9px 13px;border:1px solid var(--line);border-radius:14px 14px 14px 4px;background:var(--smoke);font-size:14.5px;line-height:1.5;color:var(--fg);overflow-wrap:anywhere}
.pedido-ok .bot-msg.eu{align-self:flex-end;border-color:transparent;border-radius:14px 14px 4px 14px;background:var(--fg);color:var(--ash)}
.bot-digitando{display:inline-flex;gap:4px;padding:13px 14px !important}
.bot-digitando i{width:6px;height:6px;border-radius:50%;background:var(--fg-mute)}
.pedido-bot-acoes{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.pedido-bot-acoes:empty{display:none}
.bot-op{min-height:40px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:transparent;font:inherit;font-size:14px;line-height:1.3;color:var(--fg);text-align:left;cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.bot-op:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.bot-op:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bot-op.secundaria{color:var(--fg-dim);border-style:dashed}
.bot-livre{display:flex;flex-direction:column;gap:8px;width:100%}
.bot-livre textarea{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--coal);font-size:15px;line-height:1.5;color:var(--fg);resize:vertical;outline:0}
.bot-livre textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bot-livre textarea::placeholder{color:var(--fg-mute)}
.bot-livre-acoes{display:flex;gap:8px}
@media (prefers-reduced-motion:no-preference){
  .pedido-ok .bot-msg{animation:botEntra .22s var(--ease) both}
  .bot-digitando i{animation:botPonto 1s infinite ease-in-out}
  .bot-digitando i:nth-child(2){animation-delay:.15s}
  .bot-digitando i:nth-child(3){animation-delay:.3s}
}
@keyframes botEntra{from{opacity:0;transform:translateY(6px)}}
@keyframes botPonto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:640px){
  .pedido-bot-msgs{padding:14px 12px}
  .pedido-bot-acoes{padding:0 12px 14px}
  .bot-op{min-height:44px;font-size:15px}
  .bot-livre textarea{font-size:16px}
  .pedido-bot-topo span{display:none}
}

/* v47: plano sem link de pagamento com o preço atual: o pedido de orçamento vira o botão principal */
.plano-pagto{margin:0;font-size:13px;color:var(--fg-mute);text-align:center}