/* Guias Rande — modo Read (RDS 2.3). Dark first, Solid para conteúdo, sem animação de entrada. */
:root{
  --rv-canvas:#0B0B0C;--rv-surface:#151618;--rv-raised:#1D1F23;
  --rv-text:#F5F7FA;--rv-text-2:#B4BAC4;--rv-text-3:#7D8592;
  --rv-line:rgba(255,255,255,.08);--rv-line-2:rgba(255,255,255,.14);
  --rv-hi:rgba(255,255,255,.06);--rv-key:rgba(0,0,0,.45);
  --rv-cobalt:#1F8CFF;--rv-cobalt-hover:#4BA3FF;
  --rv-primary:#F5F7FA;--rv-primary-hover:#DDE8F0;--rv-on-primary:#111820;
  --rv-r-btn:8px;--rv-r-box:10px;
  --rv-font-display:'Syne',sans-serif;--rv-font-ui:'Onest',system-ui,sans-serif;--rv-font-mono:'Azeret Mono',ui-monospace,monospace;
  --rv-t-hover:140ms;--rv-t-press:90ms;
  --pad:20px;--max:1120px;--read:68ch;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --rv-canvas:#F6F7F9;--rv-surface:#FFFFFF;--rv-raised:#EEF0F3;
    --rv-text:#111820;--rv-text-2:#424B57;--rv-text-3:#6A7380;
    --rv-line:rgba(17,24,32,.09);--rv-line-2:rgba(17,24,32,.16);
    --rv-hi:rgba(255,255,255,.9);--rv-key:rgba(17,24,32,.06);
    --rv-cobalt:#0A6FD8;--rv-cobalt-hover:#085CB4;
    --rv-primary:#1A2028;--rv-primary-hover:#2A323C;--rv-on-primary:#F5F7FA;
    color-scheme:light;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--rv-canvas);color:var(--rv-text);font:400 17px/1.65 var(--rv-font-ui);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--rv-cobalt);text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--rv-cobalt-hover)}}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--rv-cobalt);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--pad);top:-60px;background:var(--rv-primary);color:var(--rv-on-primary);padding:10px 14px;border-radius:var(--rv-r-btn);z-index:10}
.skip:focus{top:12px}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--rv-canvas) 92%,transparent);
  border-bottom:1px solid var(--rv-line);padding-top:env(safe-area-inset-top)}
.topo-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{font:700 19px/1 var(--rv-font-display);letter-spacing:-.01em;color:var(--rv-text);text-decoration:none}
.marca span{color:var(--rv-cobalt)}
.topo-links{display:flex;align-items:center;gap:4px}
.topo-links a{color:var(--rv-text-2);text-decoration:none;font-size:15px;font-weight:500;padding:10px 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--rv-r-btn);
  transition:color var(--rv-t-hover) ease,background-color var(--rv-t-hover) ease}
@media (hover:hover) and (pointer:fine){.topo-links a:hover{color:var(--rv-text);background:var(--rv-raised)}}
.topo-links .topo-entrar{color:var(--rv-text);border:1px solid var(--rv-line-2);min-height:36px;padding:6px 12px;margin-left:6px}
@media (max-width:480px){.topo-links .topo-entrar{display:none}.topo-links a{padding:10px 8px}}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 48px}

/* Hero e títulos */
.hero{padding:56px 0 32px;max-width:820px}
.kicker,.meta{font:500 12px/1.4 var(--rv-font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--rv-text-3);font-variant-numeric:tabular-nums}
.kicker{margin:0 0 14px}
h1{font:700 clamp(34px,6vw,56px)/1.06 var(--rv-font-display);letter-spacing:-.025em;margin:0;text-wrap:balance}
.lede{font-size:clamp(18px,2.2vw,20px);line-height:1.55;color:var(--rv-text-2);margin:18px 0 0;max-width:var(--read)}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0}

/* Superfícies Solid: um pixel, duas luzes */
.destaque,.card,.visao{background:var(--rv-surface);border:1px solid var(--rv-line);border-radius:var(--rv-r-box);
  box-shadow:inset 0 1px 0 var(--rv-hi),0 1px 0 var(--rv-key)}
.destaque{padding:28px;margin:8px 0 32px}
.destaque h2{font:700 clamp(26px,3.6vw,34px)/1.15 var(--rv-font-display);letter-spacing:-.02em;margin:12px 0 10px;text-wrap:balance}
.destaque h2 a,.card h3 a{color:var(--rv-text);text-decoration:none}
@media (hover:hover) and (pointer:fine){.destaque h2 a:hover,.card h3 a:hover{color:var(--rv-cobalt-hover)}}
.destaque p:not(.meta){color:var(--rv-text-2);max-width:var(--read);margin:0 0 20px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--rv-r-btn);
  background:var(--rv-primary);color:var(--rv-on-primary);font:600 15px/1 var(--rv-font-ui);text-decoration:none;
  transition:background-color var(--rv-t-hover) ease,transform var(--rv-t-press) ease}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--rv-primary-hover);color:var(--rv-on-primary)}}
.btn:active{transform:scale(.98)}

.secao{padding:32px 0 8px}
.secao-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:16px;border-top:1px solid var(--rv-line);padding-top:24px}
.secao-cab h2{font:700 clamp(24px,3vw,32px)/1.2 var(--rv-font-display);letter-spacing:-.02em;margin:0}
.secao-cab p{margin:0;color:var(--rv-text-3);font-size:15px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{padding:20px;display:flex;flex-direction:column;gap:8px}
.card h3{font:600 19px/1.3 var(--rv-font-ui);letter-spacing:-.01em;margin:4px 0 0;text-wrap:balance}
.card p:not(.meta){margin:0;color:var(--rv-text-2);font-size:15px;line-height:1.55}

.visao{padding:32px 28px;margin:40px 0 8px;text-align:left}
.visao h2{font:700 clamp(28px,4vw,40px)/1.1 var(--rv-font-display);letter-spacing:-.02em;margin:0 0 10px}
.visao p{color:var(--rv-text-2);margin:0 0 20px;max-width:var(--read)}

/* Artigo (leitura) */
.artigo{max-width:var(--read);margin:0 auto;padding:40px 0 16px}
.artigo h1{font-size:clamp(32px,5vw,46px)}
.artigo>.meta{margin-top:16px}
.trilha{display:flex;gap:8px;font-size:14px;margin-bottom:18px;color:var(--rv-text-3)}
.trilha a{color:var(--rv-text-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){.trilha a:hover{color:var(--rv-text)}}
.texto{margin-top:28px;font-size:18px;line-height:1.72}
.texto p{margin:0 0 1.15em}
.texto h2{font:700 clamp(24px,3.2vw,30px)/1.2 var(--rv-font-ui);letter-spacing:-.02em;margin:1.8em 0 .6em;text-wrap:balance}
.texto h3{font:600 20px/1.3 var(--rv-font-ui);margin:1.5em 0 .5em}
.texto ul,.texto ol{padding-left:1.3em;margin:0 0 1.2em}
.texto li{margin:.35em 0}
.texto li::marker{color:var(--rv-text-3)}
.texto strong{font-weight:600;color:var(--rv-text)}
.nota{background:var(--rv-surface);border:1px solid var(--rv-line);border-left:3px solid var(--rv-cobalt);border-radius:var(--rv-r-btn);padding:16px 18px;font-size:16px;color:var(--rv-text-2)}

/* Espaços de anúncio: separados do texto e identificados */
.ad{margin:32px auto;max-width:var(--max);padding-top:8px;border-top:1px solid var(--rv-line);min-height:120px}
.texto .ad{margin:2em 0}
.ad-label{display:block;font:500 11px/1 var(--rv-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rv-text-3);margin-bottom:8px}

/* Rodapé */
.rodape{border-top:1px solid var(--rv-line);background:var(--rv-surface);padding:40px var(--pad) calc(24px + env(safe-area-inset-bottom))}
.rodape-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:24px}
.rodape-in p{color:var(--rv-text-3);font-size:14px;margin:10px 0 0;max-width:32ch}
.rodape nav{display:flex;flex-direction:column;gap:2px}
.rodape h2{font:500 12px/1.4 var(--rv-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--rv-text-3);margin:0 0 6px}
.rodape nav a{color:var(--rv-text-2);text-decoration:none;font-size:15px;padding:6px 0}
@media (hover:hover) and (pointer:fine){.rodape nav a:hover{color:var(--rv-text)}}
.rodape-meta{max-width:var(--max);margin:32px auto 0;padding-top:16px;border-top:1px solid var(--rv-line);display:flex;justify-content:space-between;gap:12px;font:400 13px/1.4 var(--rv-font-mono);color:var(--rv-text-3)}
.rodape-meta a{color:var(--rv-text-3)}
@media (max-width:760px){.rodape-in{grid-template-columns:1fr 1fr}.rodape-in>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.hero{padding-top:40px}.destaque,.visao{padding:22px 18px}.texto{font-size:17px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}