/*
 Theme Name:   Canal do Estudante
 Description:  Tema filho personalizado para o Canal do Estudante
 Author:       Seu Nome
 Template:     generatepress
 Version:      1.0.0
*/

/* ─── CSS VARIABLES (Brand Guide v1.0) ─────────────── */
:root {
  --color-primary:       #F97316;
  --color-secondary:     #1E3A5F;
  --color-cta:           #EA580C;
  --color-bg:            #FAFAFA;
  --color-text:          #111827;
  --color-white:         #FFFFFF;
  --color-success:       #16A34A;
  --color-error:         #DC2626;
  --color-primary-light: #FED7AA;
  --color-secondary-light:#DBEAFE;
  --color-border:        #E5E7EB;
  --color-text-muted:    #6B7280;
  --color-bg-alt:        #F3F4F6;
  --font-head: 'Nunito', sans-serif;
  --font-body: 'Inter', sans-serif;
  --max-w: 1200px;
  --r: 12px;
  --r-pill: 999px;
}

/* ─── RESET ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--font-body); }

/* ─── LAYOUT ───────────────────────────────────────── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ─── PILL / BADGE ─────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.pill--primary { background: var(--color-primary-light); color: #C2410C; }
.pill--secondary { background: var(--color-secondary-light); color: var(--color-secondary); }
.pill--dark { background: var(--color-text); color: var(--color-white); }
.pill--success { background: #DCFCE7; color: #15803D; }

/* ─── NAVBAR ───────────────────────────────────────── */
.nav {
  background: var(--color-secondary);
  position: sticky; top: 0; z-index: 100;
}
.nav__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 0px;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; /* Voltamos para a altura original que você gosta */
}
.nav__logo {
  display: flex; align-items: center; gap: 0px;
}

/* ─── AJUSTE DAS LOGOS (Computador) ─── */
.logo-mobile { 
  display: none; /* Por padrão, escondemos a logo mobile no computador */
}

.logo-desktop {
  display: block;
  height: 52px; /* Mantém a altura que você definiu */
  width: auto;  /* A MÁGICA: O navegador calcula a largura sozinho */
  object-fit: contain; /* Garantia extra de que a imagem não vai deformar */
}

.nav__logo-text span { color: var(--color-primary); }

/* ─── AJUSTE PARA O MENU DINÂMICO DO WORDPRESS ─── */
.nav__links {
  display: flex; 
  gap: 2px; 
  list-style: none;
  align-items: center; /* Força o alinhamento vertical ao centro */
  margin: 0; /* Remove margens padrão do WordPress que empurram o menu para cima */
  padding: 0; /* Remove espaçamentos padrão do WordPress */
  height: 100%; /* Garante que a <ul> ocupe toda a altura do .nav__inner */
}

/* Garante que os links dentro do menu fiquem centralizados */
.nav__links li {
    display: flex;
    align-items: center;
}
.nav__links a {
  padding: 7px 14px; border-radius: var(--r-pill);
  font-size: 0.82rem; font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: color 0.15s, background 0.15s;
}
.nav__links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav__links a.active { color: #fff; background: rgba(255,255,255,0.12); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__cta {
  background: var(--color-cta); color: var(--color-white);
  font-size: 0.8rem; font-weight: 600;
  padding: 8px 18px; border-radius: var(--r-pill);
  transition: background 0.15s;
}
.nav__cta:hover { background: #D4570A; }
.nav__login {
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem; font-weight: 500;
  padding: 7px 12px;
  transition: color 0.15s;
}
.nav__login:hover { color: #fff; }

/* ─── BANNER ESTÁTICO ─────────────────────────────────── */
.top-banner {
  background-color: var(--color-primary); /* Puxa a sua cor #F97316 */
  color: var(--color-white);
  text-align: center;
  padding: 4px 24px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.top-banner a {
  color: var(--color-white);
  transition: opacity 0.2s;
  display: block; /* Facilita o clique no celular */
}

.top-banner a:hover {
  opacity: 0.8; /* Dá um leve efeitinho de brilho ao passar o mouse */
}

.top-banner strong {
  font-weight: 800;
  text-decoration: underline; /* Destaca bem o "2.000+" */
}

/* ─── HERO ─────────────────────────────────────────── */
.hero { padding: 32px 0; border-bottom: 1px solid var(--color-border); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}
.hero__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
}
.hero__kicker-text {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #C2410C;
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.12;
  color: var(--color-text);
  margin-bottom: 14px;
}
.hero__title a:hover { color: var(--color-cta); }
.hero__excerpt {
  font-size: 0.95rem; line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  max-width: 520px;
}
.hero__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.75rem; font-weight: 500;
  color: var(--color-text-muted);
}
/* hero side */
.hero__side {
  border-left: 1px solid var(--color-border);
  padding-left: 28px;
  display: flex; flex-direction: column; gap: 0;
}
.hero__side-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.hero__side-item:first-child { padding-top: 0; }
.hero__side-item:last-child { border-bottom: none; padding-bottom: 0; }
.si__cat {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.si__cat--primary { color: #C2410C; }
.si__cat--secondary { color: var(--color-secondary); }
.si__cat--success { color: #15803D; }
.si__title {
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.92rem;
  line-height: 1.35;
  color: var(--color-text);
  margin-bottom: 4px;
  transition: color 0.15s;
  display: block;
}
.si__title:hover { color: var(--color-cta); }
.si__meta {
  font-size: 0.72rem; color: var(--color-text-muted);
}

/* ─── CONTENT GRID ─────────────────────────────────── */
.content {
  padding: 28px 0 48px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}

/* ─── SECTION HEAD ─────────────────────────────────── */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2.5px solid var(--color-text);
}
.sec-head__title {
  font-family: var(--font-head);
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.sec-head__bar {
  width: 4px; height: 16px; border-radius: 2px;
  background: var(--color-primary);
}
.sec-head__more {
  font-size: 0.75rem; font-weight: 600;
  color: var(--color-text-muted);
  transition: color 0.15s;
}
.sec-head__more:hover { color: var(--color-cta); }

/* ─── ARTICLE LIST ─────────────────────────────────── */
.a-list { display: flex; flex-direction: column; gap: 0; }
.a-card {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.a-card:last-child { border-bottom: none; }
.a-card:hover .a-card__title { color: var(--color-cta); }
.a-card__cat {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.a-card__title {
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-text);
  margin-bottom: 5px;
  transition: color 0.15s;
}
.a-card__excerpt {
  font-size: 0.8rem; color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.a-card__meta {
  font-size: 0.7rem; font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 6px; display: flex; gap: 8px;
}
.a-card__thumb {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; align-self: center;
  border: 1px solid var(--color-border);
}

/* ─── CATEGORY GRID ────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--r);
  padding: 18px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.c-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.c-card--blue { border-top-color: var(--color-secondary); }
.c-card--green { border-top-color: var(--color-success); }
.c-card__cat {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.c-card__title {
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.9rem;
  line-height: 1.35; color: var(--color-text);
  margin-bottom: 6px;
  transition: color 0.15s;
  display: block;
}
.c-card:hover .c-card__title { color: var(--color-cta); }
.c-card__meta {
  font-size: 0.7rem; color: var(--color-text-muted);
}

/* ─── SECTION BLOCK ────────────────────────────────── */
.sec-block { margin-bottom: 32px; }

/* ─── SIDEBAR ──────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 20px; }

.sb {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  overflow: hidden;
}
.sb__head {
  padding: 10px 16px;
  font-family: var(--font-head);
  font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.sb__head--blue { background: var(--color-secondary); color: var(--color-white); }
.sb__head--primary { background: var(--color-primary); color: var(--color-white); }
.sb__head--orange-lt { background: var(--color-primary-light); color: #C2410C; }
.sb__head--green { background: #DCFCE7; color: #15803D; }
.sb__body { padding: 14px 16px; }

/* categories sidebar */
.cat-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.cat-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px; border-radius: 6px;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background 0.12s;
}
.cat-list li:hover { background: var(--color-bg-alt); }
.cat-list__left { display: flex; align-items: center; gap: 8px; }
.cat-list__count {
  font-size: 0.68rem; font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 1px 8px; border-radius: var(--r-pill);
}

/* popular posts */
.pop-list { display: flex; flex-direction: column; gap: 0; }
.pop-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 6px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s;
}
.pop-item:hover { background: var(--color-bg-alt); }
.pop-item__num {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1rem;
  color: var(--color-primary-light);
  width: 22px; flex-shrink: 0; line-height: 1.3;
}
.pop-item__title {
  font-size: 0.8rem; font-weight: 600;
  line-height: 1.4;
}
.pop-item:hover .pop-item__title { color: var(--color-cta); }

/* promo box */
.promo {
  background: var(--color-secondary);
  border-radius: var(--r);
  padding: 20px;
  color: var(--color-white);
}
.promo__kicker {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 8px;
}
.promo__title {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.1rem;
  line-height: 1.25; margin-bottom: 8px;
}
.promo__title span { color: var(--color-primary); }
.promo__sub {
  font-size: 0.78rem; color: rgba(255,255,255,0.6);
  line-height: 1.6; margin-bottom: 14px;
}
.promo__price {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.8rem;
  margin-bottom: 4px;
}
.promo__price small {
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 500;
  color: rgba(255,255,255,0.45);
}
.promo__features {
  list-style: none; margin: 10px 0 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.promo__features li {
  font-size: 0.75rem; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; gap: 6px;
}
.promo__features li::before { content: '✓'; color: var(--color-primary); font-weight: 800; }
.promo__btn {
  display: block; text-align: center;
  background: var(--color-cta); color: var(--color-white);
  font-size: 0.82rem; font-weight: 700;
  padding: 10px; border-radius: var(--r-pill);
  transition: background 0.15s;
}
.promo__btn:hover { background: #D4570A; }

/* newsletter */
.nl-form { display: flex; flex-direction: column; gap: 8px; }
.nl-input {
  width: 100%; padding: 10px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 500;
  background: var(--color-bg);
  outline: none; transition: border-color 0.15s;
}
.nl-input:focus { border-color: var(--color-primary); }
.nl-btn {
  background: var(--color-cta); color: var(--color-white);
  font-size: 0.82rem; font-weight: 700;
  padding: 10px; border-radius: var(--r-pill);
  border: none; transition: background 0.15s;
}
.nl-btn:hover { background: #D4570A; }
.nl-note { font-size: 0.68rem; color: var(--color-text-muted); text-align: center; }

/* ─── FOOTER ───────────────────────────────────────── */
.footer {
  background: var(--color-secondary);
  color: rgba(255,255,255,0.55);
  padding: 40px 0 20px;
}
.footer__grid {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 28px;
}
.footer__logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
/* ─── AJUSTE DAS LOGOS DO FOOTER (Computador) ─── */
.footer__logo {
  display: flex; align-items: center; gap: 0; /* Tiramos o gap pois o texto sumiu */
  margin-bottom: 16px;
}

.footer-logo-mobile {
  display: none; /* Esconde a logo pequena no PC */
}

.footer-logo-desktop {
  display: block;
  height: 44px; /* Tamanho elegante para o rodapé (um pouco menor que o header) */
  width: auto;
  object-fit: contain;
}
.footer__logo-text {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1rem; color: var(--color-white);
}
.footer__logo-text span { color: var(--color-primary); }
.footer__tagline { font-size: 0.8rem; line-height: 1.65; max-width: 220px; }
.footer__ig {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  background: rgba(255,255,255,0.08);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 600;
  color: rgba(255,255,255,0.7);
  transition: background 0.15s, color 0.15s;
}
.footer__ig:hover { background: var(--color-primary); color: var(--color-text); }
.footer__col-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 14px;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer__links a { font-size: 0.82rem; font-weight: 500; transition: color 0.15s; }
.footer__links a:hover { color: var(--color-primary); }
.footer__bottom {
  max-width: var(--max-w); margin: 0 auto; padding: 18px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem;
}

/* ─── BARRA DE PESQUISA LARGA (HOME) ──────────────────────── */
.search-wide {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  padding: 36px 40px;
  margin-top: 32px; /* Empurra um pouco para baixo do Hero */
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04); /* Leve sombreado para destacar */
}

.search-wide__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-secondary); /* Azul Noturno */
  margin-bottom: 20px;
}

.search-wide__form {
  display: flex;
  gap: 12px;
  max-width: 720px; /* Controla a largura máxima para não ficar esticado demais em telas gigantes */
  margin: 0 auto; /* Centraliza a barra perfeitamente */
}

.search-wide__input {
  flex-grow: 1; /* A MÁGICA: Faz o campo esticar e ocupar todo o espaço disponível */
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 2px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  outline: none;
  transition: border-color 0.2s;
}

.search-wide__input:focus {
  border-color: var(--color-primary); /* Fica Laranja Impulso ao clicar para digitar */
}

.search-wide__btn {
  background-color: var(--color-primary); /* Laranja Impulso */
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: 0 32px;
  border-radius: var(--r-pill);
  border: none;
  transition: background-color 0.2s, transform 0.1s;
}

.search-wide__btn:hover {
  background-color: var(--color-cta); /* Laranja Chama no hover */
  transform: translateY(-2px); /* Efeitinho elegante de levantar a tecla */
}

/* ─── PÁGINAS ESTÁTICAS (PAGE.PHP) ──────────────────────── */
.page-main {
  width: 100%; 
  max-width: 960px; /* A MÁGICA: O texto cresce, mas "bate no teto" dos 800px e para, ficando perfeito no PC */
  margin: 48px auto 80px auto; /* Centraliza na tela */
  padding: 0;
}

.page-header {
  text-align: center; 
  margin-bottom: 40px;
}

.page-title-bar {
  width: 60px;
  height: 4px;
  background-color: var(--color-primary); 
  border-radius: var(--r-pill);
  margin: 16px auto 0; 
}

/* ─── PÁGINAS DE CATEGORIA E ARQUIVO (ARCHIVE.PHP) ──────── */
.archive-main { 
  padding: 40px 0 80px; 
}

.archive-header { 
  text-align: center; 
  margin-bottom: 48px; 
}

.archive-title { 
  font-family: var(--font-head); 
  font-size: 2.5rem; 
  color: var(--color-secondary); /* Azul Noturno */
  font-weight: 800; 
}

.archive-desc { 
  margin-top: 16px; 
  color: var(--color-text-muted); 
  font-size: 1.1rem; 
}

/* A MÁGICA DA GRADE RESPONSIVA */
.archive-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  gap: 32px; 
  margin-bottom: 48px;
  align-items: start; /* Impede que os cartões estiquem verticalmente se houver poucos na linha */
}

/* O Design do Cartão */
.archive-card { 
  background: var(--color-white); 
  border: 1px solid var(--color-border); 
  border-radius: var(--r); 
  overflow: hidden; 
  transition: transform 0.2s, box-shadow 0.2s; 
  display: flex;
  flex-direction: column;
}

.archive-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 12px 24px rgba(0,0,0,0.06); 
}

.archive-card__thumb img { 
  width: 100%; 
  height: 200px; 
  object-fit: cover; 
  display: block; 
}

.archive-card__content { 
  padding: 24px; 
  flex-grow: 1; /* Empurra a data para o final do cartão */
  display: flex;
  flex-direction: column;
}

.archive-card__title { 
  font-family: var(--font-head); 
  font-size: 1.35rem; 
  font-weight: 700; 
  line-height: 1.3; 
  margin-bottom: 12px; 
}

.archive-card__title a { 
  color: var(--color-text); 
  text-decoration: none; 
}

.archive-card__title a:hover { 
  color: var(--color-primary); /* Laranja Impulso ao passar o mouse */
}

.archive-card__excerpt { 
  font-size: 0.95rem; 
  color: var(--color-text-muted); 
  margin-bottom: 20px; 
  line-height: 1.6; 
  flex-grow: 1; /* Faz o resumo ocupar o espaço livre */
}

.archive-card__meta { 
  font-size: 0.85rem; 
  font-weight: 600; 
  color: var(--color-primary); 
}

/* O Design da Paginação */
.archive-pagination { text-align: center; }
.archive-pagination .nav-links { display: inline-flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.archive-pagination a, .archive-pagination span { padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--color-border); color: var(--color-text); font-weight: 600; text-decoration: none; transition: 0.2s; }
.archive-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.archive-pagination .current { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* ─── AJUSTE DA PESQUISA PARA O CELULAR ─── */
@media (max-width: 620px) {
  .search-wide { padding: 24px 20px; }
  .search-wide__title { font-size: 1.25rem; }
  .search-wide__form { flex-direction: column; /* Coloca o botão embaixo do campo no celular */ }
  .search-wide__btn { padding: 14px 24px; }
}

/* ─── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__side { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 16px; }
  .content { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* ─── RESPONSIVO CELULAR (max-width: 620px) ──────────────── */
@media (max-width: 620px) {
  /* 1. Fundo Azul Noturno */
  .nav {
    background-color: var(--color-secondary); 
  }

  /* 2. Header mais alto e respirável */
  .nav__inner {
    justify-content: space-between; 
    padding: 0 16px; 
    height: 64px; /* AUMENTADO: Mais altura para a barra no celular */
    gap: 8px; 
  }

  /* 3. A MÁGICA DA LOGO MAIOR */
  .logo-desktop { 
    display: none !important; 
  }

  .logo-mobile {
    display: block !important; 
    height: 40px !important; /* AUMENTADO: Logo muito mais imponente (era 24px) */
    width: auto !important;
    flex-shrink: 0; 
    object-fit: contain;
  }

  /* 4. Esconde textos e links não essenciais */
  .nav__logo-text { display: none; }
  .nav__links { display: none; }

  /* 5. BOTÕES MAIORES E CLICÁVEIS */
  .nav__right { 
    display: flex; 
    gap: 10px; /* Mais espaço entre os dois botões */
    align-items: center; 
  }

  .nav__login {
    padding: 8px 10px; /* Mais espaço para o clique do dedo */
    font-size: 0.85rem; /* AUMENTADO: Letra maior e legível */
  }

  .nav__cta {
    padding: 8px 14px; /* Mais espaço interno no botão Laranja */
    font-size: 0.8rem; /* AUMENTADO: Letra maior */
    border-radius: var(--r-pill);
  }
}

/* ─── ANIMATIONS ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.fu { animation: fadeUp 0.45s ease both; }
.d1 { animation-delay: 0.04s; }
.d2 { animation-delay: 0.12s; }
.d3 { animation-delay: 0.22s; }
.d4 { animation-delay: 0.30s; }

/* ─── PÁGINA DO ARTIGO (SINGLE) ───────────────────────── */

/* 1. O Grid que separa o texto da barra lateral */
.single-grid {
  display: grid;
  grid-template-columns: 1fr 320px; /* Texto flexível e barra de 320px */
  gap: 40px;
  /* MÁGICA 1: O align-items: start é OBRIGATÓRIO para o sticky funcionar num grid */
  align-items: start; 
  padding-top: 20px;
}

/* 2. Estilos do Cabeçalho do Artigo */
.post-header { margin-bottom: 28px; }

.post-cat a {
  display: inline-block;
  background: var(--color-primary-light);
  color: #C2410C;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.post-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: 16px;
}

.post-meta {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  display: flex; gap: 8px; align-items: center;
}

.post-thumb img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  margin-bottom: 32px;
}

/* 3. Deixando o texto de leitura confortável */
.post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text);
}
.post-content h2, .post-content h3 {
  font-family: var(--font-head);
  color: var(--color-text);
  margin: 40px 0 16px;
}
.post-content p { margin-bottom: 20px; }
.post-content ul, .post-content ol { margin: 0 0 20px 24px; padding: 0; }
.post-content img { border-radius: 8px; margin: 24px 0; }

/* ─── AJUSTE DOS LINKS NO ARTIGO ─── */
.post-content a {
  background-color: transparent; /* Remove a cor de fundo */
  color: var(--color-primary); /* Aplica a cor #F97316 diretamente no texto */
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.post-content a:hover {
  opacity: 0.8; /* Mantém a leve transparência ao passar o mouse */
}

/* 4. A MÁGICA DO STICKY (O Banner que acompanha a rolagem) */
.sticky-sidebar {
  position: sticky;
  top: 90px; /* Distância do topo da tela (deixa um respiro para o menu) */
}

/* 5. Responsivo: No celular, a barra lateral cai para baixo do texto */
@media (max-width: 900px) {
  .single-grid { 
    grid-template-columns: 1fr; 
  }
  .sticky-sidebar {
    position: static; /* Desliga o sticky no celular para não travar a tela */
  }
  /* ─── TROCA DE LOGO NO FOOTER (Celular) ─── */
  .footer-logo-desktop {
    display: none !important; /* Esconde a grande */
  }

  .footer-logo-mobile {
    display: block !important; /* Mostra a pequena */
    height: 32px !important; /* Tamanho proporcional para o rodapé mobile */
    width: auto !important;
    flex-shrink: 0;
    object-fit: contain;
    margin: 0 auto; /* Ajuda a centralizar a logo no celular */
  }
  /* ─── CORREÇÃO DAS GRADES (Para empilhar no celular) ─── */
  
  /* 1. Barra Lateral (Sidebar): Um bloco embaixo do outro */
  .sidebar { 
    grid-template-columns: 1fr; 
    gap: 24px;
  }

  /* 2. Cartões de Vestibular: Um embaixo do outro */
  .cat-grid { 
    grid-template-columns: 1fr; 
  }

  /* 3. Rodapé: Uma coluna só, centralizada */
  .footer__grid { 
    grid-template-columns: 1fr; 
    gap: 32px; 
    text-align: center; /* Centraliza os links do rodapé no mobile */
  }

  /* Ajuste dos links do rodapé para acompanhar o centro */
  .footer__logo { justify-content: center; }
  .footer__links { align-items: center; }

  /* 4. Barra final do rodapé (Direitos Autorais) empilhada */
  .footer__bottom { 
    flex-direction: column; 
    gap: 12px; 
    text-align: center; 
  }
}