/* geral.css (limpo para Index.html) */
:root {
  --bg: #0f172a;
  --card: #111827;
  --ink: #e5e7eb;
  --accent: #22c55e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0b1022;
  color: var(--ink);
  font-family: system-ui, Segoe UI, Roboto, Arial;
}

h1 {
  margin: 0.2rem 0 0;
  font-size: 1.8rem;
  color: #ff8c00;
}

main {
  padding: 1rem 1.25rem 2rem;
  display: grid;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 0.5rem;
  width: 100%;
}

/* === Responsividade do banner de anúncio === */
.ads-area {
  margin-top: 0.5rem;
  text-align: center;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ads-area picture,
.ads-area img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.ad-banner {
  width: 100%;
  height: auto;
  /* evita corte vertical */
  object-fit: contain;
  /* mantém proporções em containers estreitos */
}

/* Evitar corte por altura fixa */
.ads-area,
.ads-area * {
  max-height: none !important;
  overflow: visible !important;
}

/* Introdução ocupa somente a coluna 1, alinhando
   a margem esquerda ao H1 e a margem direita na borda da coluna 1 (antes do logo) */
section.introducao {
  grid-column: 1;
  margin: 0.5rem 0 0 0; /* pequena separação do h1 */
}
header .header-logo {
  grid-column: 1;
  justify-self: start;
  margin: 1rem 0 1rem 0;
  max-width: 180px;
}

/* === Imagens e textos dos cards === */

/* === Imagem alinhada ao título do card === */
.card {
  position: relative;
}

/* Posiciona a imagem flutuante alinhada ao topo do card (junto ao h2) */
.card > .resumo-img {
  float: right;
  width: 200px;
  height: 120px;
  object-fit: cover;
  margin: 0.75rem 0 0.5rem 1rem; /* espaço à esquerda e abaixo da imagem */
  border-radius: 6px;
  vertical-align: top;     /* força o topo da imagem a alinhar-se ao topo da linha anterior */
}

/* Corrige o comportamento de float para o card “abraçar” a imagem */
.card::after {
  content: "";
  display: block;
  clear: both;
}

/* Ajuste extra para garantir que o título não gere espaço extra antes da imagem */
.card h2 {
  margin-top: 0;
  display: inline-block;
  vertical-align: top;
}

/* Responsividade: em telas menores, imagem centralizada acima do texto */
@media (max-width: 720px) {
  .card > .resumo-img {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
  }
}

/* === Alinhamento do cabeçalho e introdução === */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header principal */
header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-direction: row-reverse;
}

.header-inner h1 {
  margin: 0;
  font-size: 1.6rem;
  color: #ff8c00;
  line-height: 1.2;
  text-align: left;
}

.header-logo {
  height: auto;
  max-height: 64px;
  flex-shrink: 0;
}

/* Introdução alinhada às margens dos cards */
section.introducao {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0rem;
  color: var(--ink);
  line-height: 1.6;
}

/* Cards seguem a mesma largura e margem lateral */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
  display: grid;
  gap: 1rem;
}

/* Responsividade: empilha o título e o logotipo */
@media (max-width: 720px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-logo {
    align-self: flex-start;
    max-width: 180px;
  }
}

/* Espaçamento vertical entre parágrafos da introdução */
section.introducao p {
  margin: 0; /* zera margens para evitar colapso e conflitos */
  line-height: 1.4; /* altura de linha confortável */
}

/* Aplica a “distância entre parágrafos” apenas quando existe um parágrafo seguinte */
section.introducao p + p {
  margin-top: 0.6rem; /* ajuste aqui o espaçamento desejado */
}

.seta-baixo {
  font-size: 1.6rem;       /* aumenta o tamanho */
  color: #ff8c00;          /* usa o mesmo laranja do título */
  margin-left: 0.25rem;    /* pequeno espaço antes da seta */
  vertical-align: middle;  /* alinha com o texto */
}

/* === Estilo dos subtítulos (h2) e links === */

/* Cor e espaçamento geral do título */
.card h2 {
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

/* Remove cor azul padrão dos links dentro do h2 */
.card h2 a {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  padding-right: 1.2rem; /* espaço para a seta à direita */
  transition: color 0.3s ease;
}

/* Adiciona seta à direita via pseudo-elemento */
.card h2 a::after {
  content: "➜"; /* seta direita */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #ff8c00; /* mesma cor do destaque do site */
  transition: transform 0.2s ease, color 0.3s ease;
}

/* Efeito hover: muda a cor e move ligeiramente a seta */
.card h2 a:hover {
  color: #ff8c00;
}

.card h2 a:hover::after {
  transform: translateY(-50%) translateX(3px);
  color: #ffd280;
}