/* =========================================
   FONTE: ROBOTO (Visual Google/Clean)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

html, body, h1, h2, h3, h4, h5, h6, 
p, a, li, span, div, button, input, textarea,
.distill-site-header, .d-title, .d-article, .distill-site-footer {
  font-family: 'Roboto', sans-serif !important;
}

/* =========================================
   REMOVE O ÍCONE DE ÂNCORA NOS TÍTULOS
   ========================================= */
.anchor-section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Garante que não fique espaço vazio no lugar dele */
h1, h2, h3, h4, h5, h6 {
  pointer-events: none; /* Remove a interação de clique extra no título se houver */
}

/* Reabilita o clique no texto do título (caso queira selecionar o texto) */
h1 > span, h2 > span, h3 > span {
  pointer-events: auto;
}

/*  Barra de navegação */
.distill-site-header {
  background-color: #005f73; /* Seu verde */
  font-size: 18px;
  position: fixed !important;
  z-index: 1000000 !important;
}

/* Foto redonda */
.profile-pic {
  border-radius: 50%;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 4px solid #005f73; /* Borda verde */
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Container da Home (CORRIGIDO PARA CENTRALIZAR CORRETAMENTE) */
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* O TRUQUE MATEMÁTICO: */
  /* Altura total (100vh) MENOS o espaço da barra e um respiro (80px) */
  min-height: calc(100vh - 80px); 
  
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

/* 6. Botões */
.btn-personalizado {
  background-color: #005f73; /* Verde */
  color: white !important;
  padding: 12px 30px;
  margin: 10px;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: bold;
  display: inline-block;
  transition: 0.3s;
  border: 1px solid #005f73;
}

.btn-personalizado:hover {
  background-color: white;
  color: #005f73 !important;
  cursor: pointer;
}

/* 7. Botão de Email */
.btn-email {
  background-color: transparent;
  color: #005f73 !important;
  border: 2px solid #005f73;
  padding: 10px 25px;
  margin-top: 15px;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: bold;
  display: inline-block;
  transition: 0.3s;
}

.btn-email:hover {
  background-color: #003f4c;
  color: white !important;
}

/* 8. Linha Separadora */
.separator {
  width: 60%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 30px auto;
}

/* --- GRID (A estrutura que segura os cartões) --- */
/* --- GRID (Mais juntinho) --- */
.tutorial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;             /* <--- Juntei mais (era 20px) */
  max-width: 1000px;
  margin: 30px auto;     /* Reduzi a margem vertical também */
  padding: 0 10px;
}

/* --- O CARTÃO (Blindado contra linhas do Distill) --- */
.meu-cartao {
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 260px; 
  min-width: 260px;
  
  /* A MÁGICA CONTRA AS LINHAS: */
  text-decoration: none !important;
  border-bottom: none !important;     /* Remove borda padrão */
  background-image: none !important;  /* Remove sublinhado gradiente do Distill */
  border: 1px solid #e0e0e0;          /* Mantém apenas a borda da caixinha */
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* --- SELETOR DE SEGURANÇA MÁXIMA --- */
/* Isso garante que o Distill não coloque linha nem se ele quiser muito */
d-article a.meu-cartao, 
d-article a.meu-cartao:hover {
  border-bottom: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

/* --- TOPO DO CARTÃO (Verde) --- */
.cartao-topo {
  background-color: #005f73;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-icone {
  color: white;
  font-size: 24px;
}

/* --- CORPO DO CARTÃO --- */
.cartao-corpo {
  padding: 20px;
  text-align: center;
}

.cartao-titulo {
  display: block;
  color: #333;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 8px;
  border-bottom: none !important; /* Garantia extra */
}

.cartao-desc {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* --- EFEITO HOVER --- */
.meu-cartao:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  border-color: #005f73;
  border-bottom: none !important; /* Garante que a linha não apareça nem no mouse over */
}



/* -------------------------------------------------------------
/* --- GRID (Para organizar os cards) --- */
.tutorial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;               /* Diminuí o espaço entre eles também */
  margin: 40px auto;
  padding: 0 10px;
}

/* --- O CARD (Versão Compacta) --- */
.card-blog {
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow: hidden;
  
  /* MUDANÇA AQUI: Tamanhos menores */
  width: 100%;             
  max-width: 260px;        /* <--- De 320px para 260px */
  min-width: 240px;
  
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none !important;
}

/* Efeito Hover */
.card-blog:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* A Imagem do Topo (Menor) */
.card-img-top {
  width: 100%;
  height: 150px;             /* <--- De 200px para 150px */
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

/* O Corpo do Texto (Mais compacto) */
.card-body {
  padding: 15px;             /* <--- De 24px para 15px */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Título (Fonte levemente menor) */
.card-title {
  font-size: 1.1rem;         /* <--- Diminuí um pouco a fonte */
  font-weight: 700;
  color: #111;
  margin: 10px 0 15px 0;
  line-height: 1.3;
}

/* A Etiqueta (Trending/Categoria) */
.card-tag {
  background-color: #f0fdf4; /* Fundo verde bem clarinho */
  color: #005f73;            /* Seu verde */
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

/* O Botão (Read More) */
.card-btn {
  background-color: #005f73;
  color: white !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.card-btn:hover {
  background-color: #004655; /* Verde um pouco mais escuro */
}

/* Regra de segurança para links do Distill */
a.card-blog, a.card-btn {
  border-bottom: none !important;
  background-image: none !important;
}


/* =========================================
   BOTÕES DA HOME (Estilo ZacharyCrespin)
   ========================================= */

.btn-novo {
  cursor: pointer;
  font-weight: 700;
  font-family: Helvetica, sans-serif;
  transition: all .2s;
  padding: 12px 25px;       /* Um pouco mais de espaço interno */
  border-radius: 100px;
  background: #005f73;      /* SEU VERDE */
  border: 1px solid transparent;
  
  /* Comportamento de Link/Botão */
  display: inline-flex;     /* Garante que ícone e texto fiquem na linha */
  align-items: center;
  justify-content: center;
  
  font-size: 16px;
  color: white !important;  /* Texto branco */
  text-decoration: none !important; /* Remove sublinhado */
  margin: 10px;             /* Espaço entre os botões */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Efeito Hover (Mouse em cima) */
.btn-novo:hover {
  background: #003f4c;      /* Verde um pouquinho mais escuro */
  color: white !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px); /* Sobe um pouquinho */
}

/* Efeito Active (Ao clicar) */
.btn-novo:active {
  transform: scale(0.95);
}

/* Configuração do Ícone SVG */
.btn-novo > svg {
  width: 34px;
  margin-left: 10px;
  transition: transform .3s ease-in-out;
}

/* A animação da seta indo para o lado */
.btn-novo:hover svg {
  transform: translateX(5px);
}

.btn-email {
  background-color: transparent;
  color: #005f73 !important;
  border: 2px solid #005f73;
  
  /* AQUI QUE AUMENTA O TAMANHO: */
  padding: 15px 40px;      /* Mais espaço interno (Altura x Largura) */
  font-size: 1.2rem;       /* Letra maior */
  min-width: 280px;        /* Garante uma largura mínima imponente */
  
  margin-top: 15px;
  border-radius: 50px;     /* Mais arredondado */
  text-decoration: none !important;
  font-weight: 800;        /* Negrito mais forte */
  display: inline-block;
  transition: 0.3s;
  cursor: pointer;
  font-family: inherit;
}

.btn-email:hover {
  background-color: #005f73;
  color: white !important;
  transform: scale(1.05);  /* Cresce um pouquinho ao passar o mouse */
}

/* =========================================
   CARTÃO DE AUTOR E DATA (RODAPÉ)
   ========================================= */

.author-footer {
  background-color: #f8f9fa;
  border-left: 4px solid #005f73;
  
  /* MUDANÇA AQUI: */
  /* Topo: 25px | Direita: 25px | Baixo: 10px | Esquerda: 25px */
  padding: 25px 25px 10px 25px; 
  
  border-radius: 0 12px 12px 0;
  margin-top: 60px;
  font-family: 'Inter', Helvetica, sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.author-name {
  font-weight: 800;
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 8px;
  display: block;
}

.author-bio {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.post-meta-date {
  font-size: 0.85rem;
  color: #999;
  border-top: 1px solid #e9ecef; /* Linha fina separando a data */
  padding-top: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =========================================
   1. ESTILO DO MENU LATERAL (TOC)
   ========================================= */

/* Título "Contents" */
.d-contents nav h3 {
  color: #005f73 !important; /* Verde do tema */
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  font-weight: 800;
  margin-bottom: 15px;
}

/* Os Links do Menu */
.d-contents nav a {
  color: #888 !important;     /* Cinza suave */
  border-left: 2px solid #eee; /* Linha cinza clara à esquerda */
  padding: 5px 0 5px 15px;     /* Espaçamento */
  text-decoration: none !important;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

/* Efeito ao passar o mouse (Hover) */
.d-contents nav a:hover {
  color: #005f73 !important;   /* Texto fica verde */
  border-left: 3px solid #005f73; /* A linha fica verde e grossa */
  background: linear-gradient(to right, #f4fcf4, transparent); /* Fundo degradê suave */
  padding-left: 20px;          /* O texto "anda" um pouco para a direita */
}

/* =========================================
   2. SEÇÃO DE RECOMENDAÇÕES (FINAL DA PÁGINA)
   ========================================= */

.rec-section {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px dashed #ddd;
}

.rec-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* GRID APENAS PARA OS 3 CARDS */
.rec-grid {
  display: grid;
  /* Cria colunas automáticas, mas tenta manter 3 se houver espaço */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 20px;
  margin-bottom: 40px; /* Espaço entre os cards e o botão de voltar */
  justify-content: center;
}

/* O CARD (Estilo "Adesivo") */
.rec-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none !important;
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;
  height: 100%; /* Garante que todos tenham a mesma altura */
}

.rec-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #005f73;
  opacity: 0.5;
  transition: 0.3s;
}

.rec-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(108, 156, 88, 0.15);
  border-color: #bbf7d0;
}

.rec-card:hover::before { opacity: 1; }

.rec-icon {
  font-size: 1.5rem;
  color: #005f73;
  margin-bottom: 10px;
}

.rec-text {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
  line-height: 1.3;
}

.rec-sub {
  font-size: 0.8rem;
  color: #999;
  margin-top: 5px;
}

/* --- ÁREA DO BOTÃO VOLTAR (Separada do Grid) --- */
.rec-footer {
  text-align: center; /* Isso garante que o botão fique no meio */
  margin-top: 20px;
}

.rec-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #f4fcf4; /* Fundo verde bem clarinho */
  color: #005f73 !important;
  border: 1px solid #bbf7d0;
  padding: 12px 30px;
  border-radius: 50px;       /* Formato de pílula */
  text-decoration: none !important;
  font-weight: 700;
  transition: all 0.3s ease;
}

.rec-btn-back:hover {
  background-color: #005f73;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(108, 156, 88, 0.2);
}

/* Garante que o SPAN se comporte como bloco de texto */
.rec-text, .rec-sub {
  display: block; 
  width: 100%;
}