* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #fffaf2;
      color: #3e3025;
      line-height: 1.6;
    }

    .container {
      width: 92%;
      max-width: 1100px;
      margin: 0 auto;
    }

    
    /* =========================
       CABEÇALHO
    ========================= */

    header {
      background: linear-gradient(135deg, #f5c96a, #f29f58);
      padding: 60px 20px;
      text-align: center;
      color: #4a2d16;
    }

    header .icone {
      font-size: 60px;
      margin-bottom: 10px;
    }

    header h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      line-height: 1.15;
      margin-bottom: 15px;
    }

    header p {
      font-size: 1.15rem;
      max-width: 760px;
      margin: 0 auto;
    }

    /* =========================
       INTRODUÇÃO
    ========================= */

    .introducao {
      text-align: center;
      padding: 50px 20px 25px;
    }

    .introducao h2 {
      color: #81502c;
      font-size: 2rem;
      margin-bottom: 15px;
    }

    .introducao p {
      max-width: 800px;
      margin: 0 auto;
      font-size: 1.08rem;
    }

    /* =========================
       CARDS
    ========================= */

    .dicas {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      padding: 30px 0 50px;
    }

    .card {
      background: #ffffff;
      border-radius: 22px;
      padding: 25px;
      border: 1px solid #eedbc7;
      box-shadow: 0 8px 25px rgba(75, 50, 30, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(75, 50, 30, 0.13);
    }

    .header-actions{
      display:flex;gap:9px;align-items:center;
    }
    .round-button{
      width:44px;
      height:44px;
      border:1px solid var(--line);
      border-radius:50%;
      background:rgba(255,255,255,.75);
      cursor:pointer
    }

    .numero {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5c96a;
      color: #54351d;
      font-weight: bold;
      font-size: 1.25rem;
      margin-bottom: 15px;
    }

    .card h3 {
      color: #714425;
      font-size: 1.35rem;
      margin-bottom: 10px;
    }

    .card p {
      margin-bottom: 15px;
    }

    .exemplo {
      background: #fff2d9;
      border-left: 5px solid #eaa755;
      padding: 12px 14px;
      border-radius: 8px;
      font-size: 0.95rem;
    }

    .exemplo strong {
      color: #8a4d23;
    }

    /* =========================
       FÓRMULA
    ========================= */

    .formula {
      background: #667f59;
      color: white;
      padding: 35px;
      border-radius: 25px;
      text-align: center;
      margin-bottom: 30px;
    }

    .formula .coracao {
      font-size: 50px;
      margin-bottom: 10px;
    }

    .formula h2 {
      font-size: 1.8rem;
      margin-bottom: 10px;
    }

    .formula p {
      font-size: 1.1rem;
    }

    /* =========================
       AURELINA
    ========================= */

    .aurelina {
      background: #f8e7c8;
      border: 2px dashed #c7894d;
      padding: 30px;
      border-radius: 24px;
      margin-bottom: 30px;
    }

    .aurelina h2 {
      color: #76451f;
      margin-bottom: 15px;
      font-size: 1.7rem;
    }

    .aurelina p {
      margin-bottom: 12px;
    }

    /* =========================
       PERGUNTAS
    ========================= */

    .perguntas {
      padding: 30px 0 50px;
    }

    .perguntas h2 {
      text-align: center;
      color: #714425;
      margin-bottom: 25px;
      font-size: 2rem;
    }

    .pergunta {
      background: white;
      padding: 17px 20px;
      margin-bottom: 12px;
      border-radius: 14px;
      border-left: 5px solid #f0b257;
      box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    }

    /* =========================
       ATIVIDADE
    ========================= */

    .atividade {
      padding: 35px;
      background: #e8f1dd;
      border-radius: 25px;
      margin-bottom: 50px;
    }

    .atividade h2 {
      color: #516c42;
      margin-bottom: 15px;
    }

    .pepita {
      background: #fff6cf;
      border: 2px solid #d9aa30;
      border-radius: 40px 18px 38px 25px;
      padding: 25px;
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
      color: #7b5b12;
    }

    /* =========================
       FRASE FINAL
    ========================= */

    .frase-final {
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      color: #704329;
      padding: 20px 20px 60px;
    }

    /* =========================
       RODAPÉ
    ========================= */

    footer {
      background: #563a29;
      color: white;
      text-align: center;
      padding: 30px 20px;
    }

    footer p {
      margin: 5px 0;
    }

    /* =========================
       RESPONSIVO
    ========================= */

    @media (max-width: 768px) {

      header {
        padding: 45px 15px;
      }

      header .icone {
        font-size: 48px;
      }

      .dicas {
        grid-template-columns: 1fr;
      }

      .card {
        padding: 20px;
      }

      .formula,
      .aurelina,
      .atividade {
        padding: 25px 20px;
      }

      .frase-final {
        font-size: 1.25rem;
      }
      .banner-container {
        margin: 10px auto 25px auto;
        padding: 0 10px;
      }
    
      .banner-wrapper {
        border-width: 3px;
        /* Suaviza o arredondamento em telas menores */
        border-radius: 20px;
      }
    }

    /* ==========================================
   ESTILOS DO BANNER INICIAL (DICAS DE LEITURA)
   ========================================== */

/* Container Principal do Banner */
.banner-container {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 40px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Moldura e Efeito Aquarela/Artesanal */
.banner-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Borda levemente assimétrica para simular estilo feito à mão */
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    border: 4px solid #FFE66D; /* Amarelo alegre */
    box-shadow: 0 10px 25px rgba(78, 205, 196, 0.25); /* Sombra suave em tom turquesa */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background-color: #FFFDF9;
}

/* Efeito Interativo ao Passar o Mouse */
.banner-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.3); /* Sombra levemente rosada ao passar o mouse */
}

/* Imagem do Banner */
.banner-imagem {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}