/* blog.css */

/* Variáveis de cores e fontes atualizadas */
:root {
    --cor-primaria: #3a7ca5;         /* Azul médio para títulos */
    --cor-secundaria: #7fb8d1;       /* Azul claro para detalhes */
    --cor-texto: #666f7a;            /* Cinza azulado para textos */
    --cor-fundo: #ffffff;            /* Fundo branco */
    --cor-fundo-secundario: #f0f4f8; /* Fundo cinza claro azulado para seções */
    --cor-link: #3a7ca5;
    --cor-link-hover: #7fb8d1;
    --fonte-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fonte-titulo: 'Georgia', serif;
  }
  
  /* Container principal */
  .blog-container {
    max-width: 850px;
    margin: 2rem auto 4rem;
    padding: 0 1rem;
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    line-height: 1.7;
  }
  
  /* Título principal */
  .blog-titulo {
    font-family: var(--fonte-titulo);
    font-size: 2.4rem;
    color: var(--cor-primaria);
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  /* Introdução */
  .blog-introducao {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;
    font-weight: 500;
    color: var(--cor-primaria);
  }
  
  /* Seções do blog */
  .blog-secao {
    background-color: var(--cor-fundo-secundario);
    padding: 1.8rem 1.8rem;
    border-radius: 14px;
    margin-bottom: 3rem;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.07);
    overflow: hidden; /* Para conter floats */
  }
  
  /* Subtítulos */
  .blog-subtitulo {
    font-family: var(--fonte-titulo);
    font-size: 1.7rem;
    color: var(--cor-secundaria);
    margin-bottom: 1.2rem;
    border-bottom: 3px solid var(--cor-secundaria);
    padding-bottom: 0.3rem;
  }
  
  /* Parágrafos */
  .blog-secao p {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    color: var(--cor-texto);
    text-align: justify;
  }
  
  /* Imagens com texto ao redor - flutuando à direita ou esquerda alternadamente */
  .blog-imagem {
    width: 235px;          /* 30% maior que 180px */
    height: auto;
    border-radius: 14px;
    box-shadow: 0 5px 14px rgb(0 0 0 / 0.12);
    margin: 0 1.5rem 1.5rem 0;
    float: left;
    object-fit: cover;
  }
  
  /* Alternar imagem à direita para seções pares */
  .blog-secao:nth-of-type(even) .blog-imagem {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
  }
  
  /* Conclusão */
  .blog-conclusao {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cor-primaria);
    text-align: center;
    margin-top: 3rem;
    padding-bottom: 2rem;
    clear: both; /* Garante que fique abaixo das imagens flutuantes */
  }
  
  /* Responsividade */
  
  /* Para telas pequenas (celulares) */
  @media (max-width: 720px) {
    .blog-container {
      margin: 1.5rem 1rem 3rem;
      padding: 0 0.75rem;
    }
  
    .blog-titulo {
      font-size: 2rem;
    }
  
    .blog-subtitulo {
      font-size: 1.5rem;
    }
  
    /* Imagens passam a ocupar 100% da largura e perdem o float */
    .blog-imagem {
      width: 100%;
      max-width: 100%;
      margin: 1.2rem 0 1.8rem 0;
      float: none;
      display: block;
    }
  
    /* Remove margem lateral para imagens */
    .blog-secao:nth-of-type(even) .blog-imagem {
      margin-left: 0;
    }
  }
  
  /* Evitar overflow horizontal e "dança" */
  body, html {
    overflow-x: hidden;
    background-color: var(--cor-fundo);
    margin: 0;
    padding: 0;
  }
  
  /* Links do blog, caso tenha */
  a {
    color: var(--cor-link);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  a:hover,
  a:focus {
    color: var(--cor-link-hover);
    text-decoration: underline;
  }