/* =========================================================================
   Edge · Área de notícias e artigos
   Folha única compartilhada por: índice, template e todos os artigos.
   Identidade oficial: Navy Deep dominante, Edge Blue de contraste,
   Amber Gold só como detalhe, Warm White de fundo.
   Rajdhani nos títulos, Manrope no corpo, JetBrains Mono em dado e etiqueta.
   ========================================================================= */

:root{
  --navy:#042C53;
  --deep:#02121F;
  --blue:#185FA5;
  --amber:#EF9F27;
  --warm:#F1EFE8;
  --ice:#85B7EB;
  --ink:#26333F;
  --papel:#FFFFFF;
  --linha:rgba(4,44,83,.14);
  --linha-forte:rgba(4,44,83,.28);
  --claro:#F6FAFD;
  --leitura:700px;   /* largura de leitura confortável */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--warm);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:19px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{max-width:var(--leitura);margin:0 auto;padding:0 24px}

/* Glifos e etiquetas em mono ------------------------------------------- */
.mono,.migalha,.chapeu,.etiqueta,.meta,.fonte-sel,footer .wrap{
  font-family:'JetBrains Mono',ui-monospace,monospace;
}

/* ── Barra do topo ────────────────────────────────────────────────────── */
.topo{background:var(--navy);color:var(--claro);padding:18px 0;
  border-bottom:1px solid rgba(133,183,235,.18)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo .marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--claro)}
.topo .marca img{height:26px;width:auto;display:block}
.topo nav{display:flex;gap:20px;align-items:center}
.topo nav a{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(226,240,253,.74);text-decoration:none;white-space:nowrap;
}
.topo nav a:hover{color:var(--amber)}

/* ── Capa do artigo ───────────────────────────────────────────────────── */
.capa{background:var(--navy);color:var(--claro);padding:30px 0 58px;position:relative;overflow:hidden}
.capa::after{ /* fio âmbar de assinatura, detalhe único */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--amber) 0 18%,rgba(239,159,39,0) 60%);
}

/* Breadcrumb curto com glifo separador: edge // notícia · 09 set */
.migalha{
  font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);display:block;
}
.migalha a{color:var(--ice);text-decoration:none}
.migalha a:hover{color:var(--amber)}
.migalha .sep{color:rgba(133,183,235,.45);padding:0 2px}

.capa h1{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(34px,7vw,58px);line-height:1.04;letter-spacing:-.015em;
  margin-top:18px;text-wrap:balance;
}
/* Só um pedaço da frase ganha cor, nunca o título inteiro */
.capa h1 span{color:var(--amber)}

.capa .dek{font-size:20px;line-height:1.55;color:rgba(231,242,253,.9);margin-top:20px;max-width:62ch}

.capa .meta{
  font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(214,232,250,.6);margin-top:28px;padding-top:16px;
  border-top:1px solid rgba(214,232,250,.22);
  display:flex;flex-wrap:wrap;gap:6px 14px;
}
.capa .meta .pt{color:rgba(133,183,235,.5)}

/* ── O resumo em 3 linhas ─────────────────────────────────────────────── */
.resumo{
  background:var(--papel);border:1px solid var(--linha);border-top:2px solid var(--amber);
  border-radius:4px 4px 10px 10px;padding:26px 28px;margin:-30px 0 0;position:relative;z-index:2;
  box-shadow:0 14px 34px -20px rgba(4,44,83,.5);
}
.resumo .etiqueta{
  font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:16px;
}
.resumo ul{list-style:none;display:grid;gap:13px}
/* Marcador posicionado, não flex: o <strong> e o texto seguinte precisam
   fluir na MESMA linha. Com display:flex o navegador vira cada um num item
   flex separado e o resumo quebra em duas colunas. */
.resumo li{position:relative;padding-left:24px;font-size:17.5px;line-height:1.52}
.resumo li::before{
  content:"▸";position:absolute;left:0;top:0;
  font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--amber);
}
.resumo strong{color:var(--navy);font-weight:700}

/* ── Corpo do artigo ──────────────────────────────────────────────────── */
article{padding:46px 0 10px}
article p{margin-top:22px}
article p:first-child{margin-top:0}
article strong{font-weight:700;color:var(--navy)}
article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
article a:hover{color:var(--navy)}

/* Seção numerada com título descritivo */
.secao{margin-top:52px}
.secao .chapeu{
  font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:10px;
}
.secao .chapeu .num{
  background:var(--navy);color:var(--claro);border-radius:4px;
  padding:3px 8px;font-size:11.5px;letter-spacing:.1em;
}
.secao h2{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(27px,4.6vw,36px);line-height:1.12;color:var(--navy);
  margin-top:12px;letter-spacing:-.005em;text-wrap:balance;
}

/* ── Caixas de destaque ───────────────────────────────────────────────── */
.caixa{
  margin:32px 0 0;border:1px solid var(--linha);border-radius:10px;
  background:var(--papel);padding:24px 26px;
}
.caixa .etiqueta{
  font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.caixa p{margin-top:12px;font-size:17.5px;line-height:1.6}
.caixa p:first-of-type{margin-top:0}

/* As três variantes se separam por tinta e etiqueta, não por barra lateral.
   O glifo antes da etiqueta é o que identifica o tipo de caixa. */
.caixa--aviso{border-color:rgba(239,159,39,.4);background:rgba(239,159,39,.08)}
.caixa--aviso .etiqueta{color:#A5660B}
.caixa--dado{border-color:rgba(24,95,165,.3);background:rgba(24,95,165,.06)}
.caixa--dado .etiqueta{color:var(--blue)}
.caixa--fazer{border-color:var(--navy);background:var(--navy);color:rgba(231,242,253,.92)}
.caixa--fazer .etiqueta{color:var(--amber)}
.caixa--fazer strong{color:#fff}
.caixa--fazer ol,.caixa--fazer ul{margin:14px 0 0 20px;display:grid;gap:9px;font-size:17px}

/* ── Painel de dado com barras ────────────────────────────────────────── */
.dados{margin:32px 0 0;border:1px solid var(--linha);border-radius:10px;
  background:var(--papel);overflow:hidden}
.dados .linha{padding:24px 26px;border-bottom:1px solid var(--linha)}
.dados .linha:last-of-type{border-bottom:0}
.dados .rot{font-size:16px;font-weight:600;color:var(--ink);line-height:1.4}
.dados .trilho{display:flex;align-items:center;gap:16px;margin-top:14px}
.dados .barra{height:40px;border-radius:4px;flex:none;min-width:6px}
.dados .valor{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:32px;
  color:var(--navy);letter-spacing:-.02em;line-height:1}
.dados .rodape{
  background:rgba(4,44,83,.05);padding:14px 26px;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(4,44,83,.72);line-height:1.5;
}

/* ── Tabela de comparação ─────────────────────────────────────────────── */
.tabela-rolagem{margin:32px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linha);border-radius:10px;background:var(--papel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:16.5px}
thead th{
  background:var(--navy);color:var(--claro);text-align:left;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;padding:14px 18px;white-space:nowrap;
}
tbody td{padding:15px 18px;border-bottom:1px solid var(--linha);vertical-align:top;line-height:1.45}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(4,44,83,.025)}
tbody td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
.tabela-nota{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(4,44,83,.6);margin-top:10px}

/* ── Citação em destaque ──────────────────────────────────────────────── */
.pull{margin:40px 0 0;padding:2px 0 2px 24px;border-left:4px solid var(--amber)}
.pull p{margin:0;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(25px,4.2vw,33px);line-height:1.18;color:var(--navy);text-wrap:balance}

/* ── Lista marcada ────────────────────────────────────────────────────── */
.marcada{list-style:none;margin:26px 0 0;display:grid;gap:11px}
/* Mesmo motivo do .resumo li: marcador absoluto para o conteúdo fluir inline. */
.marcada li{position:relative;border:1px solid var(--linha);border-radius:8px;
  padding:16px 20px 16px 42px;background:var(--papel);font-size:17.5px;line-height:1.5}
.marcada li::before{content:"";position:absolute;left:20px;top:1.55em;
  width:9px;height:9px;border-radius:2px;background:var(--amber)}

/* ── Caixa da entrega gratuita ────────────────────────────────────────── */
.presente{margin:52px 0 0;background:var(--navy);color:var(--claro);
  border-radius:12px;padding:38px 34px;position:relative;overflow:hidden}
.presente::before{
  content:"";position:absolute;top:-40%;right:-14%;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,95,165,.55),transparent 68%);pointer-events:none;
}
.presente>*{position:relative}
.presente .etiqueta{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.presente h3{font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(27px,5vw,38px);line-height:1.08;margin-top:12px}
.presente p{font-size:17.5px;line-height:1.6;color:rgba(231,242,253,.9);margin-top:14px}

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;letter-spacing:.04em;
  text-transform:uppercase;padding:15px 28px;border-radius:10px;text-decoration:none;
  border:2px solid transparent;transition:filter .15s ease,transform .15s ease;
  line-height:1.15;text-align:center;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn--amber{background:var(--amber);color:#06243F;margin-top:24px}
.btn--navy{background:var(--navy);color:var(--claro)}
.btn--linha{border-color:var(--navy);color:var(--navy)}

/* ── CTA duplo do fim ─────────────────────────────────────────────────── */
.fim{margin:52px 0 0;border-top:1px solid var(--linha);padding-top:32px}
.fim h2{font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(27px,4.6vw,36px);line-height:1.12;color:var(--navy)}
.fim .dupla{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}

/* ── Resposta direta ──────────────────────────────────────────────────────
   Bloco de 40 a 60 palavras que responde a pergunta da seção sozinho, sem
   depender do resto da página. É o trecho que ChatGPT, Perplexity e o AI
   Overview do Google extraem e citam. Um por seção, logo abaixo do <h2>. */
.resposta{
  margin:22px 0 0;padding:20px 24px;background:var(--papel);
  border:1px solid var(--linha);border-radius:10px;
  font-size:18px;line-height:1.58;color:var(--navy);font-weight:600;
}
.resposta .etiqueta{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  display:block;margin-bottom:10px;
}

/* ── Perguntas frequentes ─────────────────────────────────────────────────
   Pergunta em linguagem natural, do jeito que a pessoa digita. A resposta
   é curta e vale sozinha. Espelhado no JSON-LD FAQPage do <head>. */
.faq{margin:52px 0 0}
.faq>.chapeu{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
.faq h2{font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(27px,4.6vw,36px);line-height:1.12;color:var(--navy);margin-top:12px}
.faq dl{margin-top:24px;display:grid;gap:12px}
.faq dt{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:22px;line-height:1.2;
  color:var(--navy);background:var(--papel);border:1px solid var(--linha);
  border-radius:10px 10px 0 0;padding:18px 22px 12px;margin-bottom:-12px;
}
.faq dd{
  background:var(--papel);border:1px solid var(--linha);border-top:0;
  border-radius:0 0 10px 10px;padding:0 22px 18px;font-size:17px;line-height:1.58;
}

/* ── Assinatura do autor ──────────────────────────────────────────────────
   Autor identificado, com nome e cargo. Pesa em E-E-A-T e em citação por IA. */
.autor{
  margin:44px 0 0;padding:22px 24px;background:var(--papel);
  border:1px solid var(--linha);border-radius:10px;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
}
.autor .nome{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:21px;
  color:var(--navy);letter-spacing:.01em}
.autor .cargo{font-size:15.5px;line-height:1.5;color:rgba(38,51,63,.88);flex:1 1 100%}

/* ── Bloco de fonte ───────────────────────────────────────────────────── */
.fonte{margin:40px 0 0;padding:20px 24px;background:rgba(4,44,83,.05);
  border-radius:8px;font-size:15px;line-height:1.6;color:rgba(38,51,63,.92)}
.fonte b{color:var(--navy)}
.fonte a{color:var(--blue)}

/* ── Voltar para o índice ─────────────────────────────────────────────── */
.voltar{margin:34px 0 0;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.voltar a{color:var(--blue);text-decoration:none}
.voltar a:hover{color:var(--navy)}

/* ── Rodapé ───────────────────────────────────────────────────────────── */
footer{margin-top:58px;background:var(--deep);color:rgba(222,238,252,.72);padding:44px 0 34px}
footer .rodape-topo{display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  justify-content:space-between;padding-bottom:28px;
  border-bottom:1px solid rgba(133,183,235,.16)}
footer .rodape-marca img{height:30px;width:auto;display:block}
footer .rodape-frase{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:21px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--claro);margin-top:10px}
footer .rodape-linha{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  margin-top:24px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase}
footer a{color:var(--amber);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ═══ ÍNDICE DE NOTÍCIAS ═══════════════════════════════════════════════ */
.indice-capa{background:var(--navy);color:var(--claro);padding:30px 0 52px;position:relative}
.indice-capa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--amber) 0 18%,rgba(239,159,39,0) 60%)}
.indice-capa h1{font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(36px,7vw,58px);line-height:1.04;letter-spacing:-.015em;margin-top:16px}
.indice-capa h1 span{color:var(--amber)}
.indice-capa .dek{font-size:19px;line-height:1.55;color:rgba(231,242,253,.88);
  margin-top:18px;max-width:58ch}

.lista{padding:44px 0 10px;display:grid;gap:20px}

.cartao{
  display:block;background:var(--papel);border:1px solid var(--linha);border-radius:12px;
  padding:26px 28px;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.cartao:hover{border-color:var(--linha-forte);transform:translateY(-2px);
  box-shadow:0 16px 34px -24px rgba(4,44,83,.6)}
.cartao .chapeu{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cartao .chapeu .sep{color:rgba(4,44,83,.3)}
.cartao h2{font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(24px,4vw,31px);line-height:1.12;color:var(--navy);margin-top:12px;
  letter-spacing:-.005em;text-wrap:balance}
.cartao p{font-size:17px;line-height:1.55;margin-top:12px;color:rgba(38,51,63,.9)}
.cartao .ir{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  margin-top:18px;display:inline-block}
.cartao:hover .ir{color:var(--navy)}

.vazio{border:1px dashed var(--linha-forte);border-radius:12px;padding:30px 28px;
  text-align:center;color:rgba(38,51,63,.7);font-size:16.5px}

/* ── Responsivo: testado em 390px ─────────────────────────────────────── */
@media(max-width:640px){
  body{font-size:17.5px}
  .wrap{padding:0 18px}
  .topo{padding:14px 0}
  .topo nav{gap:14px}
  .topo nav a{font-size:11px;letter-spacing:.12em}
  .capa{padding:24px 0 48px}
  .capa .dek{font-size:18px}
  .indice-capa{padding:24px 0 44px}
  .resumo{padding:22px 20px;margin-top:-24px}
  .resumo li{font-size:16.5px}
  article{padding-top:36px}
  .secao{margin-top:42px}
  .caixa{padding:20px 20px}
  .caixa p{font-size:16.5px}
  .presente{padding:30px 22px}
  .presente p{font-size:16.5px}
  .dados .linha{padding:20px 18px}
  .dados .rodape{padding:13px 18px}
  .dados .valor{font-size:27px}
  .dados .barra{height:32px}
  .marcada li{padding:14px 16px;font-size:16.5px}
  .cartao{padding:22px 20px}
  .lista{gap:16px;padding-top:34px}
  /* Botão ocupa a largura toda, sem texto espremido */
  .btn{width:100%;font-size:18px;padding:15px 18px}
  .fim .dupla{gap:11px}
  footer .rodape-topo{gap:18px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}