/* =========================================================
 HORDAS — base de UI + identidade editorial
 Paleta e tipografia da marca ficam no bloco "IDENTIDADE
 EDITORIAL", no fim deste arquivo.
 ========================================================= */
/* Acessibilidade: esconder texto visualmente, manter para leitores de tela */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================
 TOKENS
 ========================= */
:root{
  --bg: #FAF7F2;              /* papel / newsprint */
  --surface: #ffffff;
  --surface-2: #F0EBE3;
  --text: #1F2023;            /* grafite do wordmark */
  --muted: #6E6862;
  --border: rgba(31, 32, 35, .14);

  /* Cor da marca: o ponto laranja do logo */
  --accent: #F04E23;
  --accent-rgb: 240, 78, 35;  /* usado nos glows/anéis de foco */
  --accent-ink: #8E2B10;
  --accent-2: #FFB400;        /* amarelo de apoio */
  --accent-3: #0E7C6B;        /* petróleo de apoio */

  /* Tipografia */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --r12: 8px;
  --r16: 10px;
  --shadow-sm: 0 1px 2px rgba(31, 32, 35, .06);
  --shadow-md: 0 10px 28px rgba(31, 32, 35, .12);

  --space-1: clamp(8px, 1vw, 12px);
  --space-2: clamp(12px, 1.4vw, 18px);
  --space-3: clamp(16px, 2vw, 24px);
  --space-4: clamp(22px, 3vw, 32px);
  --space-5: clamp(28px, 4vw, 44px);

  --h1: clamp(32px, 4.6vw, 56px);
  --h2: clamp(20px, 2.3vw, 28px);
  --h3: clamp(17px, 1.7vw, 20px);
}

/* =========================
 RESET / BASE
 ========================= */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
.container{
  max-width:1120px;
  margin:0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

/* Utilitários */
.w-100{ width:100%; }

/* =========================
 HEADER
 ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  max-width:1120px;
  height:100%;
  margin:0 auto;
  padding: 0 var(--space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-2);
}
.logo{
  display:flex;
  align-items:center;
  height:100%;
  flex-shrink:0;
}
.logo img{
  height: 32px;
  width:auto;
  display:block;
}

/* NAV desktop */
.main-nav{
  display:flex;
  gap: clamp(12px, 2vw, 22px);
  align-items:center;
}
.main-nav a{
  font-size: 14px;
  font-weight: 600;
  color: rgba(31,32,35,.78);
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.main-nav a:hover{
  background: var(--surface-2);
  color: var(--text);
}
.main-nav a.active{
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent-ink);
}

/* Nav Dropdown */
.nav-dropdown{
  position: relative;
  display: inline-block;
}
.nav-dropdown-toggle{
  font-size: 14px;
  font-weight: 600;
  color: rgba(31,32,35,.78);
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-dropdown-toggle:hover{
  background: var(--surface-2);
  color: var(--text);
}
.dropdown-arrow{
  font-size: 10px;
  transition: transform .2s ease;
}
.nav-dropdown:hover .dropdown-arrow{
  transform: rotate(180deg);
}
.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a{
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(31,32,35,.78);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown-menu a:hover{
  background: var(--surface-2);
  color: var(--text);
}

/* ações */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  
}

/* =========================
 BUTTONS
 ========================= */
.btn-primary, .btn-outline, .btn-ghost{
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-outline{
  background: transparent;
  border-color: var(--border);
  color: rgba(31,32,35,.85);
}
.btn-outline:hover{
  background: var(--surface-2);
  transform: translateY(-1px);
}
.btn-primary{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(var(--accent-rgb),.18);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(var(--accent-rgb),.22);
}
.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: rgba(31,32,35,.75);
}
.btn-ghost:hover{
  background: var(--surface-2);
}

/* =========================
 MOBILE MENU (drawer sem JS)
 ========================= */
.nav-toggle{ display:none; }
.nav-burger{
  display:none; /* aparece apenas no mobile */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  align-items:center;
  justify-content:center;
  gap: 5px;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
}
.nav-burger span{
  width: 18px;
  height: 2px;
  background: rgba(31,32,35,.82);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Drawer container (overlay) */
.nav-drawer{
  position: fixed;
  inset: 72px 0 0 0;
  background: rgba(31,32,35,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.nav-drawer-inner{
  width: min(520px, calc(100% - 24px));
  margin: 12px auto 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
  transition: transform .18s ease;
}
.nav-drawer-title{
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 4px 4px 10px;
}
.nav-drawer-link{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  font-weight: 650;
  color: rgba(31,32,35,.84);
  transition: background .15s ease;
}
.nav-drawer-link:hover{
  background: var(--surface-2);
}
.nav-drawer-link.active{
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent-ink);
}
.nav-drawer-actions{
  display:grid;
  gap:10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Nav Drawer Dropdown Mobile */
.nav-drawer-dropdown{
  position: relative;
}
.nav-drawer-dropdown-toggle{
  display: none;
}
.nav-drawer-dropdown-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.nav-drawer-dropdown-label .dropdown-arrow{
  font-size: 10px;
  transition: transform .2s ease;
}
.nav-drawer-dropdown-toggle:checked + .nav-drawer-dropdown-label .dropdown-arrow{
  transform: rotate(180deg);
}
.nav-drawer-submenu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding-left: 12px;
}
.nav-drawer-dropdown-toggle:checked ~ .nav-drawer-submenu{
  max-height: 300px;
}
.nav-drawer-sublink{
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
  padding: 10px 12px;
}

/* Toggle abre drawer */
#nav-toggle:checked ~ .nav-drawer{
  opacity: 1;
  pointer-events: auto;
}
#nav-toggle:checked ~ .nav-drawer .nav-drawer-inner{
  transform: translateY(0);
}

/* anima o burger */
#nav-toggle:checked + .nav-burger span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
#nav-toggle:checked + .nav-burger span:nth-child(2){
  opacity: 0;
}
#nav-toggle:checked + .nav-burger span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================
 FEATURED (Hero + Newsletter)
 ========================= */
.featured{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.featured-main,
.newsletter-box,
.post-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
}
.featured-main{
  padding: var(--space-4);
}
.featured-main h1{
  margin: 10px 0 12px;
  font-size: var(--h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.subtitle{
  color: var(--muted);
  margin: 0 0 var(--space-2);
}
.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.hero-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.meta-pill{
  font-size: 12px;
  color: rgba(31,32,35,.72);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: rgba(31,32,35,.75);
}

/* variações de tags (uma cor por categoria) */
.tag-soft{ background: var(--surface-2); }
.tag-opinion{
  background: rgba(124,58,237,.10);
  border-color: rgba(124,58,237,.18);
  color: rgba(55, 48, 163, .92);
}
.tag-culture{
  background: rgba(249,115,22,.12);
  border-color: rgba(249,115,22,.18);
  color: rgba(154, 52, 18, .92);
}
.tag-tech{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.20);
  color: rgba(29, 78, 216, .95);
}
.tag-sport{
  background: rgba(5,150,105,.12);
  border-color: rgba(5,150,105,.20);
  color: rgba(4, 120, 87, .95);
}
.tag-health{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.20);
  color: rgba(185, 28, 28, .95);
}
.tag-analysis{
  background: rgba(234,179,8,.16);
  border-color: rgba(234,179,8,.26);
  color: rgba(133, 77, 14, .95);
}

/* capa do card (listagem) */
.post-card-thumb{
  display: block;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r16) var(--r16) 0 0;
}
.post-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.post-card:hover .post-card-thumb img{
  transform: scale(1.04);
}

/* Newsletter */
.newsletter-box{
  padding: var(--space-3);
}
.newsletter-box h3{ margin: 0 0 6px; }
.newsletter-box p{
  margin: 0 0 var(--space-2);
  color: var(--muted);
}
.newsletter-form{
  display:grid;
  gap:10px;
}
.newsletter-box input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  outline: none;
  background: #fff;
}
.newsletter-box input:focus{
  border-color: rgba(var(--accent-rgb),.45);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.10);
}
.hint{
  color: rgba(31,32,35,.56);
}

/* =========================
 POSTS
 ========================= */
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.posts h2{
  margin: 0;
  font-size: var(--h2);
  letter-spacing: -0.01em;
}
.section-link{
  font-weight: 650;
  color: rgba(31,32,35,.74);
}
.section-link:hover{
  text-decoration: underline;
}
.posts-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.post-card{
  padding: var(--space-3);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.post-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(31,32,35,.16);
}
.post-card h3{
  margin: 10px 0 6px;
  font-size: var(--h3);
  line-height: 1.25;
}
.post-card p{
  margin: 0;
  color: var(--muted);
}

/* rodapé do card */
.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.meta{
  font-size: 12px;
  color: rgba(31,32,35,.62);
}
.read-more{
  font-weight: 750;
  color: rgba(31,32,35,.80);
}
.read-more:hover{
  color: var(--accent-ink);
}

/* =========================
 FOOTER
 ========================= */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 14px 0;
  background: #fff;
  font-size: 13px;
}
.footer-inner{
  max-width:1120px;
  margin:0 auto;
  padding: 0 var(--space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  color: rgba(31,32,35,.70);
}
.footer-copy{
  margin: 0;
  white-space: nowrap;
}
.site-footer nav{
  display:flex;
  gap: 14px;
}
.site-footer a:hover{ text-decoration: underline; }

/* =========================
 RESPONSIVO
 ========================= */
@media (max-width: 1024px){
  .featured{ grid-template-columns: 1fr; }
  .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  /* mostra burger e esconde menu horizontal (cobre celular + tablet retrato) */
  .nav-burger{ display:flex; }
  .main-nav{ display:none; }
}
@media (max-width: 640px){
  .posts-grid{ grid-template-columns: 1fr; }
  /* botões mais confortáveis pro toque */
  .btn-primary, .btn-outline, .btn-ghost{
    padding: 12px 14px;
  }
  .header-inner{
    gap: 10px;
  }
}

/* =========================================================
   ✅ DARK THEME OVERRIDES (ADICIONADO NO FINAL)
   - Mantém seu estilo, só troca os tokens e alguns "hardcodes".
   - Ative com: <html data-theme="dark">
   ========================================================= */

html[data-theme="dark"]{
  /* tokens */
  --bg: #121111;
  --surface: #1B1917;
  --surface-2: rgba(255,255,255,.07);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.66);
  --border: rgba(255,255,255,.14);
  --accent: #FF5E33;          /* laranja um pouco mais claro p/ contraste no escuro */
  --accent-rgb: 255, 94, 51;
  --accent-ink: #FFD9CC;
}

/* o seu header/nav/footer tinham fundos hardcoded claros */
html[data-theme="dark"] .site-header{
  background: rgba(18,17,17,.84);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .nav-burger{
  background: rgba(27,25,23,.75);
  border-color: var(--border);
}
html[data-theme="dark"] .nav-burger span{
  background: rgba(255,255,255,.82);
}
html[data-theme="dark"] .nav-drawer-inner{
  background: rgba(27,25,23,.98);
  border-color: var(--border);
}
html[data-theme="dark"] .site-footer{
  background: rgba(18,17,17,.90);
  border-top-color: var(--border);
}
html[data-theme="dark"] .footer-inner{
  color: rgba(255,255,255,.70);
}

/* inputs hardcoded */
html[data-theme="dark"] .newsletter-box input{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: var(--border);
}

/* textos que estavam com rgba(31,32,35,...) */
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .meta-pill,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .section-link,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .read-more,
html[data-theme="dark"] .nav-drawer-link,
html[data-theme="dark"] .nav-dropdown-toggle,
html[data-theme="dark"] .nav-dropdown-menu a{
  color: rgba(255,255,255,.78);
}

html[data-theme="dark"] .nav-dropdown-menu{
  background: rgba(27,25,23,.98);
  border-color: var(--border);
}

html[data-theme="dark"] .nav-dropdown-toggle:hover,
html[data-theme="dark"] .nav-dropdown-menu a:hover,
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .nav-drawer-link:hover{
  background: var(--surface-2);
  color: var(--text);
}

html[data-theme="dark"] .post-card:hover{
  border-color: rgba(255,255,255,.18);
}

/* =========================================================
   ✅ Botão de tema (NOVO)
   ========================================================= */
.theme-toggle-btn{
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.theme-toggle-btn:hover{
  background: var(--surface-2);
  transform: translateY(-1px);
}

.theme-toggle-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18);
  border-color: rgba(var(--accent-rgb),.40);
}

.theme-toggle-btn .theme-text{
  display:none;
}
@media (min-width: 740px){
  .theme-toggle-btn .theme-text{ display:inline; }
}

/* =========================================================
   ✅ LIGHT THEME – Spotify / Notion inspired
   ========================================================= */

html[data-theme="light"] {
  /* Fundos */
  --bg: #FAF7F2;              /* papel */
  --surface: #ffffff;         /* cards */
  --surface-2: #F0EBE3;       /* hovers, pills */

  /* Texto */
  --text: #1F2023;            /* grafite do wordmark */
  --muted: #6E6862;

  /* Bordas e sombras */
  --border: rgba(31, 32, 35, .14);
  --shadow-sm: 0 1px 2px rgba(31, 32, 35, .05);
  --shadow-md: 0 12px 28px rgba(31, 32, 35, .10);

  /* Accent da marca */
  --accent: #F04E23;
  --accent-rgb: 240, 78, 35;
  --accent-ink: #8E2B10;
}

/* =========================
   Ajustes finos por componente
   ========================= */

/* Header mais "Notion glass" */
html[data-theme="light"] .site-header {
  background: rgba(250,247,242,.86);
  backdrop-filter: blur(12px);
}

/* Cards com look limpo */
html[data-theme="light"] .featured-main,
html[data-theme="light"] .newsletter-box,
html[data-theme="light"] .post-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* Hover mais elegante (Spotify feel) */
html[data-theme="light"] .post-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(31,32,35,.14);
}

/* Pills e tags */
html[data-theme="light"] .meta-pill,
html[data-theme="light"] .tag {
  background: var(--surface-2);
  border-color: var(--border);
  color: rgba(31,32,35,.72);
}

/* Links mais suaves */
html[data-theme="light"] .section-link,
html[data-theme="light"] .read-more {
  color: rgba(31,32,35,.78);
}
html[data-theme="light"] .read-more:hover {
  color: var(--accent-ink);
}

/* Inputs */
html[data-theme="light"] .newsletter-box input {
  background: #ffffff;
  border-color: var(--border);
}
html[data-theme="light"] .newsletter-box input:focus {
  border-color: rgba(var(--accent-rgb),.45);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.10);
}

/* Botões ghost e outline */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-outline {
  color: rgba(31,32,35,.78);
}
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .btn-outline:hover {
  background: var(--surface-2);
}

/* Footer mais leve */
html[data-theme="light"] .site-footer {
  background: #ffffff;
  border-top-color: var(--border);
}
/* =========================================================
   ✅ FIX DEFINITIVO – MENU MOBILE
   ========================================================= */

.nav-drawer {
  z-index: 100; /* acima do header (z-index:50) */
}

/* garante visibilidade real quando aberto */
#nav-toggle:checked ~ .nav-drawer {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   ✅ FIX DEFINITIVO — MENU MOBILE (estrutura atual)
   ========================================================= */

.site-header:has(#nav-toggle:checked) .nav-drawer {
  opacity: 1;
  pointer-events: auto;
}

.site-header:has(#nav-toggle:checked) .nav-drawer .nav-drawer-inner {
  transform: translateY(0);
}

/* garante que fique visível acima */
.nav-drawer {
  z-index: 100;
}
/* =========================================================
   ✅ MOBILE: esconder botão "Assinar" quando menu abrir
   ========================================================= */

@media (max-width: 900px) {

  /* quando o hamburger estiver ativo */
  .site-header:has(#nav-toggle:checked) .header-actions .btn-primary {
    display: none;
  }

}
/* =========================================================
   ✅ MOBILE UX: CTA no drawer, não no header
   ========================================================= */

@media (max-width: 900px) {
  /* esconde "Assinar" no header quando menu estiver aberto */
  .site-header:has(#nav-toggle:checked) .header-actions .btn-primary {
    display: none;
  }
  /* opcional: também esconder "Entrar" */
  .site-header:has(#nav-toggle:checked) .header-actions {
    display: none;
    
  }
}

  .nav-drawer {
  z-index: 100;
}

/* =========================================================
   ✅ MENU MOBILE – ANIMAÇÃO POR NAVEGAÇÃO (SCROLL)
   ========================================================= */

@media (max-width: 900px) {

  /* base dos links */
  .nav-drawer-link {
    position: relative;
    transition:
      color .2s ease,
      transform .25s cubic-bezier(.22,1,.36,1);
  }

  /* estado ativo (dinâmico, via JS) */
  .nav-drawer-link.is-active {
    color: var(--text);
    transform: translateX(6px);
  }

  /* indicador lateral animado */
  .nav-drawer-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 70%;
    background: var(--accent);
    border-radius: 999px;
    transform: translateY(-50%);
    transition:
      width .25s ease,
      opacity .25s ease;
    opacity: 0;
  }

  .nav-drawer-link.is-active::before {
    width: 4px;
    opacity: 1;
  }

}

/* =========================================================
   DESKTOP NAV — mais inovador (glass + glow + underline)
   Não altera HTML, só melhora a experiência do .main-nav
   ========================================================= */

@media (min-width: 901px){

  /* Container vira uma “pílula” elegante */
  .main-nav{
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--surface), transparent 10%);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
  }

  /* Links com “camadas” (glow + underline animado) */
  .main-nav a{
    position: relative;
    isolation: isolate; /* garante que os pseudos fiquem bem comportados */
    padding: 10px 14px;
    border-radius: 999px;

    color: color-mix(in oklab, var(--text), transparent 22%);
    letter-spacing: .01em;

    transition:
      transform .18s ease,
      background .18s ease,
      color .18s ease,
      box-shadow .18s ease;
  }

  /* Glow suave (camada de fundo) */
  .main-nav a::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    z-index: -1;
    opacity: 0;
    background:
      radial-gradient(120px 80px at 30% 15%, rgba(var(--accent-rgb),.22), transparent 60%),
      radial-gradient(140px 90px at 70% 85%, rgba(var(--accent-rgb),.10), transparent 62%);
    transition: opacity .18s ease;
  }

  /* Underline animado (camada de destaque) */
  .main-nav a::after{
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;

    background: linear-gradient(90deg,
      transparent,
      color-mix(in oklab, var(--accent), transparent 10%),
      transparent
    );

    transform: scaleX(0);
    transform-origin: center;
    opacity: .9;

    transition: transform .22s ease;
  }

  /* Hover “premium” */
  .main-nav a:hover{
    background: color-mix(in oklab, var(--surface-2), var(--surface) 50%);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(31,32,35,.08);
  }

  .main-nav a:hover::before{
    opacity: 1;
  }

  .main-nav a:hover::after{
    transform: scaleX(1);
  }

  /* Active mais elegante (sem parecer “botão chapado”) */
  .main-nav a.active{
    background: color-mix(in oklab, rgba(var(--accent-rgb),.14), var(--surface) 70%);
    color: var(--accent-ink);
    box-shadow: 0 10px 22px rgba(var(--accent-rgb),.10);
  }

  .main-nav a.active::before{
    opacity: 1;
  }

  .main-nav a.active::after{
    transform: scaleX(1);
  }

  /* Acessibilidade: foco bem visível */
  .main-nav a:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18);
  }

  /* Se o usuário preferir menos animação */
  @media (prefers-reduced-motion: reduce){
    .main-nav a,
    .main-nav a::before,
    .main-nav a::after{
      transition: none !important;
    }
  }
}

/* =========================================================
   BUSCA NO HEADER (sem JS: checkbox + label, igual ao drawer)
   ========================================================= */
.search-toggle-input{ display:none; }
.search-toggle-wrap{
  position: relative;
}
.search-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 16px;
  transition: background .15s ease, border-color .15s ease;
}
.search-toggle-btn:hover{
  background: var(--surface-2);
}
.search-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow-md);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
}
#search-toggle:checked ~ .search-toggle-wrap .search-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.search-panel .search-form{
  display:flex;
  gap: 8px;
}
.search-panel .search-field{
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}
.search-panel .search-field:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18);
}

/* Campo de busca dentro do drawer mobile */
.nav-drawer-search{
  margin-bottom: 12px;
}
.nav-drawer-search .search-form{
  display:flex;
  gap: 8px;
}
.nav-drawer-search .search-field{
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}
.nav-drawer-search .search-submit{
  padding: 10px 16px;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */
.breadcrumbs{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.breadcrumbs a{
  color: var(--muted);
  transition: color .15s ease;
}
.breadcrumbs a:hover{
  color: var(--text);
  text-decoration: underline;
}
.breadcrumbs span[aria-current]{
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
.breadcrumbs-sep{
  opacity: .5;
}

/* =========================================================
   POSTS RELACIONADOS ("Leia também")
   ========================================================= */
.related-posts{
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* =========================================================
   FOOTER — tudo em uma linha só (compacto)
   ========================================================= */
.footer-inner{
  flex-wrap: wrap;
  row-gap: 6px;
}
.footer-categories{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-categories a{
  color: inherit;
}
.footer-categories a:hover{
  text-decoration: underline;
}

/* =========================================================
   RESPONSIVO — ajustes extras (tablet/celular)
   ========================================================= */
@media (max-width: 900px){
  .search-panel{
    right: auto;
    left: 50%;
    transform: translate(-50%, -8px);
    width: min(320px, 85vw);
  }
  #search-toggle:checked ~ .search-toggle-wrap .search-panel{
    transform: translate(-50%, 0);
  }
}
@media (max-width: 640px){
  .breadcrumbs span[aria-current]{
    max-width: 180px;
  }
  .footer-inner{
    justify-content: center;
    text-align: center;
  }
}

/* =========================================================
   IDENTIDADE EDITORIAL — "Hordas"
   Jornalismo das periferias. Tom: papel de jornal, manchete
   serifada de peso, etiquetas de seção sólidas e vibrantes.
   Bloco único e autocontido: remover daqui para baixo volta
   ao visual anterior.
   ========================================================= */

/* ---------- Tipografia ---------- */
body{
  font-family: var(--font-body);
}

.featured-main h1,
.entry-title,
.page-title,
.post-card h3,
.related-posts h2,
.no-results h2,
.entry-content blockquote{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.015em;
}

/* Rótulos de interface: sans pesada em caixa alta (contraste com a serifada) */
.section-head h2,
.nav-drawer-title,
.tag,
.meta{
  font-family: var(--font-body);
}

/* ---------- Faixa de identidade no topo ---------- */
.brand-stripe{
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 38%,
    var(--accent-2) 38% 68%,
    var(--accent-3) 68% 100%
  );
}

/* ---------- Marca + assinatura editorial ---------- */
.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
}
.brand-tagline{
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  max-width: 200px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

/* ---------- Header com mais peso ---------- */
.site-header{
  border-bottom-width: 2px;
}

/* ---------- Etiquetas de categoria: sólidas e vibrantes ----------
   Especificidade alta de propósito: as regras de tema
   (html[data-theme="light"] .tag) vinham sobrescrevendo as cores
   de categoria, deixando todas as tags cinzas no tema claro. */
html[data-theme] .tag{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 5px 9px;
  border-radius: 4px;
  border-color: transparent;
  background: #4B4844;
  color: #fff;
}
html[data-theme] .tag.tag-soft{    background: #4B4844; color:#fff; }
html[data-theme] .tag.tag-tech{    background: #1D4ED8; color:#fff; }
html[data-theme] .tag.tag-sport{   background: #15803D; color:#fff; }
html[data-theme] .tag.tag-health{  background: #BE123C; color:#fff; }
html[data-theme] .tag.tag-culture{ background: #C026A3; color:#fff; }
html[data-theme] .tag.tag-analysis{background: var(--accent-3); color:#fff; }
html[data-theme] .tag.tag-opinion{ background: #6D28D9; color:#fff; }
/* "Destaque" usa a cor da marca com texto escuro (contraste melhor que branco) */
html[data-theme] .tag.tag-glow{    background: var(--accent); color: #1F2023; }

/* Pílulas de meta com cara de ficha técnica */
html[data-theme] .meta-pill{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
}

/* ---------- Cabeçalhos de seção com barra da marca ---------- */
.section-head{
  align-items: center;
}
.section-head h2{
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(16px, 1.8vw, 20px);
}
.section-head h2::before{
  content: "";
  display: block;
  width: 8px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-link{
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--accent-ink);
}

/* ---------- Destaque da home ---------- */
.featured{
  align-items: start;
}
.featured-main{
  border-left: 6px solid var(--accent);
}
.featured-main h1{
  line-height: 1.04;
  margin: 14px 0 12px;
}
.featured-main .subtitle{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
}

/* ---------- Coluna direita do destaque: manchetes + seções ---------- */
.featured-side{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.featured-rail,
.rail-sections{
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r16);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.rail-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.rail-title::before{
  content: "";
  display: block;
  width: 7px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Itens do trilho */
.rail-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.rail-item:first-of-type{
  border-top: 0;
}
.rail-item:last-child{
  padding-bottom: 2px;
}
.rail-item-thumb{
  flex-shrink: 0;
  width: 74px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}
.rail-item-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rail-item-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.rail-item-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-item:hover .rail-item-title{
  color: var(--accent-ink);
}
html[data-theme] .rail-item .tag{
  font-size: 9.5px;
  padding: 3px 7px;
}

/* Chips de seções */
.rail-sections-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.rail-sections-chips .tag{
  transition: transform .15s ease, filter .15s ease;
}
.rail-sections-chips .tag:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ---------- Cards com presença de cartaz ---------- */
html[data-theme] .post-card{
  border-width: 1.5px;
}
html[data-theme] .post-card:hover{
  border-color: var(--accent);
  box-shadow: 7px 7px 0 rgba(var(--accent-rgb), .16);
  transform: translateY(-3px);
}
.post-card h3{
  line-height: 1.2;
}
.post-card h3 a:hover{
  color: var(--accent-ink);
}
.post-card-thumb{
  border-radius: var(--r16) var(--r16) 0 0;
}

/* ---------- Matéria (single) ---------- */
.entry-header{
  padding: var(--space-2) 0 0;
}
.entry-title{
  font-size: var(--h1);
  line-height: 1.06;
  margin: 14px 0 16px;
}
.entry-meta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.entry-thumbnail{
  margin: var(--space-4) 0;
}
.entry-thumbnail img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r12);
}
.entry-content{
  max-width: 760px;
  font-size: 17.5px;
  line-height: 1.75;
}
.entry-content p{
  margin: 0 0 var(--space-3);
}
/* Capitular: marca editorial no primeiro parágrafo */
.entry-content > p:first-of-type::first-letter{
  float: left;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 62px;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: var(--accent);
}
.entry-content a{
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content blockquote{
  margin: var(--space-4) 0;
  padding: 4px 0 4px 20px;
  border-left: 5px solid var(--accent);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.35;
}
.entry-content figure{
  margin: var(--space-4) 0;
}
.entry-content figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r12);
}
.entry-content figcaption{
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--accent-2);
}
.tags-links{
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--border);
  font-size: 14px;
}
.tags-links a{
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- Cabeçalho de arquivo/busca ---------- */
.page-header{
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--text);
  margin-bottom: var(--space-4);
}
.page-title{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  margin: 0;
}

/* ---------- Rodapé âncora (escuro nos dois temas, compacto) ---------- */
html[data-theme] .site-footer{
  background: #17161A;
  border-top: 3px solid var(--accent);
  padding: 12px 0;
}
html[data-theme] .footer-inner,
html[data-theme] .site-footer a{
  color: rgba(255,255,255,.78);
}
html[data-theme] .site-footer a:hover{
  color: #fff;
}

/* ---------- Ajustes responsivos da identidade ---------- */
@media (max-width: 1100px){
  .brand-tagline{ display: none; }
}
@media (max-width: 640px){
  .featured-main{
    border-left-width: 4px;
  }
  .entry-content{
    font-size: 17px;
  }
  .entry-content > p:first-of-type::first-letter{
    font-size: 50px;
  }
}