/* =========================
   Variáveis globais
   ========================= */

:root {
  --primary: #6b46c1;
  --accent: #d35400;
  --text-main: #2d3748;
  --text-muted: #718096;
  --bg-light: #f7fafc;
}

/* =========================
   Reset e base
   ========================= */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  background-color: #fff;
  margin: 0;
}

/* =========================
   Tipografia
   ========================= */

h1,
h2,
h3 {
  color: var(--primary);
  letter-spacing: -0.025em;
  font-weight: 800;
}

/* =========================
   Layout principal
   ========================= */

main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  overflow-wrap: break-word;
}

/* =========================
   Header / Navegação
   ========================= */

header {
  display: flex;
  justify-content: space-between; /* Separa logo (esquerda) de nav (direita) */
  align-items: center;           /* Alinhamento vertical centralizado */
  padding: 1rem 2rem;
  background: linear-gradient(to bottom, #f9f7ff, #ffffff);
  border-bottom: 1px solid #e9e5f5;
}

.brand {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}

.logo-container {
  display: flex;
  flex-direction: column; /* Coloca a tagline abaixo da imagem */
  align-items: flex-start;
}

.logo-link {
  text-decoration: none !important;
  border: none;
  display: block;
}

.brand .logo-link:hover {
  text-decoration: none;
}

.logo-img {
  height: 75px;
  width: auto;
  display: block;
}

.logo-img:hover {
  transform: scale(1.05); /* Um leve efeito ao passar o mouse */
}

.tagline {
  margin: 4px 0 0 0;
  font-family: 'Inter', sans-serif; /* Fonte moderna já definida no seu projeto */
  font-size: 0.75rem;
  color: #888;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 850px) {
  header {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  
  .logo-container {
    align-items: center;
    margin-bottom: 1rem;
  }

  nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.brand h1 {
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: lowercase;
  background: linear-gradient(to right, var(--primary), var(--accent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand .tagline {
  margin: 0;
  font-size: 0.85rem;
  color: #999;
  font-weight: 400;
  line-height: 1.2;
}

nav {
  display: flex;
  gap: 1.5rem; /* Espaçamento entre os links */
}

nav a {
  position: relative;
  font-size: 0.95rem;
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.3s ease;
}

nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

nav a:hover {
  color: var(--accent);
}

nav a:hover::after {
  width: 100%;
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/* =========================
   Posts
   ========================= */

.post-preview {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  border-color: #edf2f7;
}

.post-preview h2 a {
  color: var(--primary);
  text-decoration: none;
}

.post-meta {
  font-family: "SF Mono", "Fira Code", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.post-content img {
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
  max-width: 100%;
}

/* =========================
   Paginação (corrigida)
   ========================= */

.pagination-container {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
}

.pagination-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.page-numbers {
  display: flex;
  gap: 6px;
}

.page-number,
.page-arrow {
  text-decoration: none;
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1px solid #edf2f7;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 40px;
  text-align: center;
}

.page-number:hover,
.page-arrow:hover {
  background-color: var(--bg-light);
  border-color: var(--primary);
  color: var(--primary);
}

.page-number.active {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: bold;
}

@media (max-width: 600px) {
  .page-numbers {
    display: none;
  }
}

/* =========================
   Footer
   ========================= */

.site-footer {
  margin-top: 5rem;
  padding: 3rem 1rem;
  border-top: 1px solid #edf2f7;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-info p {
  margin: 0;
}

.footer-sub {
  font-style: italic;
  margin-top: 0.2rem;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}
:root {
  --primary: #6b46c1; /* Púrpura da Arisa */
  --accent: #d35400; /* Laranja do botão antigo */
  --text-main: #2d3748;
  --text-muted: #718096;
  --bg-light: #f7fafc;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%; /* Isso impede que qualquer imagem fique maior que o container */
  height: auto;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  background-color: #fff;
}

/* Títulos com toque acadêmico (Serifa opcional para títulos) */
h1,
h2,
h3 {
  color: var(--primary);
  letter-spacing: -0.025em;
  font-weight: 800;
}

main {
  width: 100%;
  max-width: 720px; /* Conteúdo centralizado e controlado */
  margin: 0 auto;
  padding: 1rem;
  overflow-wrap: break-word; /* Evita que links longos quebrem o layout */
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand h1 {
  font-size: 1.75rem;
  background: linear-gradient(to right, var(--primary), var(--accent));
  -webkit-background-clip: text; /* Para Safari e Chrome antigo */
  background-clip: text; /* Propriedade padrão para compatibilidade */
  -webkit-text-fill-color: transparent;
  color: var(--primary); /* Fallback caso o degradê não carregue */
}

.brand .tagline {
  margin: 0;
  font-size: 0.85rem;
  color: #999;
  font-weight: 400;
  line-height: 1.2;
}

nav {
  display: flex;
  gap: 1.5rem;
}

nav a {
  position: relative;
  font-size: 0.95rem;
  /* color: var(--text-main); */
  color: #4a5568;
  transition: color 0.3s ease;
}

/* Efeito Artístico no Menu */
nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

nav a:hover {
  color: var(--primary);
  /* color: var(--accent); */
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

.arisa-float {
  float: right;
  max-width: 150px;
  margin-left: 20px;
}

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
}

.post-preview {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
}

.post-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  border-color: #edf2f7;
}

.post-preview h2 a {
  text-decoration: none;
  color: var(--primary);
}

.post-meta {
  font-family: "SF Mono", "Fira Code", monospace; /* Toque técnico/ciência */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.arisa-aside {
  position: sticky;
  top: 2rem;
  float: right;
  width: 200px;
  margin-left: 2rem;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
  z-index: 10;
}

/* Limpa o float para não quebrar o layout inferior */
main::after {
  content: "";
  display: table;
  clear: both;
}

/* Container principal usando Grid */
.layout-container {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 coluna */
  gap: 20px;
  max-width: 1100px; /* Limita a largura total */
  margin: 0 auto;
  width: 100%;
}

/* Sidebar: Escondida por padrão (Mobile) */
.sidebar-art {
  display: none; /* Esconde no celular */
}

/* Desktop: Telas maiores que 1024px */
@media (min-width: 1024px) {
  .layout-container {
    grid-template-columns: 1fr 250px; /* Conteúdo flexível | Sidebar fixa */
    align-items: start;
  }

  .sidebar-art {
    display: block;
    position: sticky;
    top: 2rem;
  }

  /* Garante que o main continue centralizado se não houver sidebar */
  main {
    margin: 0;
  }
}

/* Ajuste específico para as imagens que você centralizou no MD */
div[style*="text-align: center"] img {
  max-width: 100% !important;
  height: auto !important;
}

.academic-notice {
  background-color: var(--bg-light);
  border-left: 4px solid var(--accent); /* O laranja que você gosta */
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.academic-notice strong {
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.academic-notice ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.contact-card {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: var(--bg-light);
  border: 1px solid #eee;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-main);
  transition: all 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 20px rgba(107, 70, 193, 0.1);
}

.contact-icon {
  font-size: 2rem;
  margin-right: 1.2rem;
}

.contact-info h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary);
}

.contact-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Toque especial para o Mastodon (Arte/Cultura Digital) */
.contact-card.mastodon:hover {
  border-color: #6364ff;
  background: #f0f0ff;
}

/* Toque especial para o Lattes (Acadêmico) */
.contact-card.academic:hover {
  border-color: #2c3e50;
  background: #eef2f3;
}

.error-container {
  text-align: center;
  padding: 3rem 1rem;
}

.error-code {
  font-size: 8rem;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(to right, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  opacity: 0.3; /* Fica como uma marca d'água ao fundo */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.error-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-outline {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--text-muted);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.site-footer {
  margin-top: 5rem;
  padding: 3rem 1rem;
  border-top: 1px solid #edf2f7;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-info p {
  margin: 0;
}

.footer-sub {
  font-style: italic;
  margin-top: 0.2rem;
}

.footer-tech a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.footer-tech a:hover {
  text-decoration: underline;
}

.separator {
  margin: 0 10px;
  color: #e2e8f0;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

.pagination-container {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.pagination-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.pagination-links {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  gap: 12px; /* controla a distância entre tudo */
  flex-wrap: nowrap;
}

.page-numbers {
  display: flex;
  gap: 0.5rem;
}

.page-arrow {
  min-width: 120px;
  text-align: center;
}

.page-number,
.page-arrow {
  text-decoration: none;
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  border: 1px solid #edf2f7;
}

@media (max-width: 600px) {
  .page-arrow {
    min-width: auto;
    padding: 8px 12px;
  }
}

.page-number:hover,
.page-arrow:hover {
  background-color: var(--bg-light);
  border-color: var(--primary);
  color: var(--primary);
}

.page-number.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  font-weight: bold;
}

@media (max-width: 600px) {
  .page-numbers {
    display: none; /* Esconde números no celular para não quebrar o layout */
  }
}

.pagination-links,
.page-numbers,
.page-number,
.page-arrow {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.page-number {
  min-width: 40px;
  text-align: center;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-ellipsis {
  color: var(--text-muted);
  padding: 0 4px;
  font-weight: bold;
}

/* Garante que os números não sumam em telas médias, 
   apenas em telas muito pequenas de celulares antigos */
@media (max-width: 480px) {
  .page-number:not(.active) {
    display: none;
  }
}

/* =========================
   FIX DE PAGINAÇÃO (ISOLADO)
   ========================= */

.pagination-container {
  display: flex;
  justify-content: center;
}

.pagination-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.page-numbers {
  display: flex;
  gap: 6px;
}

.page-number,
.page-arrow {
  white-space: nowrap;
  min-width: 40px;
  text-align: center;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-ellipsis {
  color: var(--text-muted);
  padding: 0 4px;
  font-weight: bold;
}

/* Garante que os números não sumam em telas médias, 
   apenas em telas muito pequenas de celulares antigos */
@media (max-width: 480px) {
  .page-number:not(.active) {
    display: none;
  }
}

/* Container da Timeline */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1rem;
}

/* A Linha Central (Vertical) */
.timeline::after {
  content: "";
  position: absolute;
  width: 3px;
  background: var(--border-color);
  top: 0;
  bottom: 0;
  left: 20px; /* Alinhado à esquerda no mobile */
  margin-left: -1.5px;
}

/* Item Individual */
.timeline-item {
  padding-left: 50px;
  position: relative;
  margin-bottom: 3rem;
}

/* O Ponto na Linha */
.timeline-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--primary);
  border: 4px solid #fff;
  border-radius: 50%;
  left: 20px;
  margin-left: -8px;
  top: 5px;
  z-index: 2;
  box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.2);
}

/* Data (Ano) */
.timeline-date {
  font-weight: 800;
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* Cartão de Conteúdo */
.timeline-content {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: 12px;
  position: relative;
  transition: transform 0.3s ease;
  border: 1px solid var(--border-color);
}

.timeline-content:hover {
  transform: scale(1.02);
  border-color: var(--primary);
}

.timeline-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.timeline-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}

.timeline-content p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-main);
}

/* Ajuste para Desktop (Linha Centralizada se desejar, mas a lateral é mais moderna) */
@media (min-width: 768px) {
  .timeline::after {
    left: 30px;
  }
}

.timeline-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem; /* Controla o espaço entre título, texto e botão */
}

.timeline-link {
  display: inline-flex; /* Alinha o texto e a seta perfeitamente */
  align-items: center;
  text-decoration: none;
  padding: 6px 16px;
  border: 2px solid var(--primary);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: 0.5rem; /* Espaçamento controlado em relação ao texto anterior */
}

.timeline-link:empty {
  display: none;
}

.timeline-link:hover {
  background-color: var(--primary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.2);
}

.link-arrow {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.timeline-link:hover .link-arrow {
  transform: translateX(5px);
}

/* Ajuste de alinhamento para o ziguezague */
@media (min-width: 768px) {
  .timeline-block.left .timeline-link {
    align-self: flex-end; /* No lado esquerdo, o botão vai para a direita do card */
  }
}

.post-excerpt {
  margin: 1rem 0;
  color: var(--text-main);
  line-height: 1.6;
  font-size: 1rem;
}

/* Garante que o Continuar Lendo tenha um respiro */
.continue-reading {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
}

.continue-reading {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 1rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.continue-reading:hover {
  border-bottom-color: var(--accent);
  padding-left: 5px;
}