/* RESET E ESTILO BASE */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
html, body { overflow-x: hidden; scroll-behavior: smooth; }
body { background: linear-gradient(135deg, #f5f7fa, #d4edda); color: #111; }

/* HEADER */
header { 
  position: fixed; top: 0; width: 100%; background: linear-gradient(135deg, #28a745, #1e682f); z-index: 1000; padding: 12px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom-left-radius: 30px; border-bottom-right-radius: 1px; box-shadow: 0 4px 1px rgba(0,0,0,0.2);
  }

  .menu-logo { 
    color:#fff; font-weight:bold; font-size:1.5rem; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }

    .menu-toggle { display: none; flex-direction: column; cursor: pointer; z-index: 1010; }
    .menu-toggle span { height: 3px; width: 28px; background: #fff; margin: 5px 0; border-radius: 3px; transition: all 0.4s; }

    .menu-container { display: flex; gap: 25px; }
    .menu-container a { color: #fff; font-weight: bold; padding: 12px 18px; transition: 0.4s; border-radius: 10px; position: relative; text-transform: uppercase; }
    .menu-container a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: #d4edda; border-radius: 3px; transition: all 0.3s; transform: translateX(-50%); }
    .menu-container a:hover::after { width: 80%; }
    .menu-container a:hover { background: rgba(255,255,255,0.15); backdrop-filter: blur(5px); }

    /* RESPONSIVO MENU */
    @media(max-width:768px){
      .menu-container { 
          position: fixed; top: 60px; left: -100%; width: 100%; height: calc(100vh - 60px); background: linear-gradient(135deg, #28a745, #1e682f); flex-direction: column; align-items: center; justify-content: center; transition: 0.4s; z-index: 999;
            }
              .menu-container.active { left: 0; }
                .menu-toggle { display: flex; }
                }

                
                /* Hero - Imagem do Planalto ajustada */
                .hero { 
                  display: flex; 
                    flex-direction: column; 
                      justify-content: center; 
                        align-items: center; 
                          height: 100vh; 
                            text-align: center; 
                              background: url('https://upload.wikimedia.org/wikipedia/commons/7/78/Pal%C3%A1cio_do_Planalto_GGFD8938.jpg') center top/cover no-repeat; 
                                color: #fff; 
                                  position: relative; 
                                    margin-top: 60px; 
                                    }

                                    .hero::after { 
                                      content: ''; 
                                        position: absolute; 
                                          inset: 0; 
                                            background: rgba(0,0,0,0.6); /* overlay mais escuro pra destacar o texto */
                                            }

                                            .hero-content { 
                                              position: relative; 
                                                z-index: 1; 
                                                }
    

                      /* SECTIONS */
                      section { padding: 80px 20px; max-width: 1200px; margin: auto; }
                      section h2 { text-align: center; margin-bottom: 50px; font-size: 2.5rem; color: #1e682f; }

                      /* CARDS */
                      .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 50px; }
                      .card { 
                        background: linear-gradient(145deg, #f0fff4, #d4edda); padding: 35px 25px; border-radius: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
                          flex: 1 1 300px; position: relative; overflow: hidden; transition: transform 0.4s, box-shadow 0.4s, background 0.4s;
                          }
                          .card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: rgba(40,167,69,0.05); transform: rotate(45deg); z-index: 0; transition: all 0.5s; }
                          .card:hover::before { top: 0; left: 0; width: 100%; height: 100%; background: rgba(40,167,69,0.1); }
                          .card h3 { margin-bottom: 20px; color: #1e682f; font-size: 1.8rem; position: relative; z-index:1; }
                          .card p { line-height: 1.6; position: relative; z-index:1; color: #145c23; }
                          .card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 25px 50px rgba(0,0,0,0.25); }

                          /* MISSION */
                          .mission { background: #d4edda; border-radius: 20px; padding: 50px 20px; text-align: center; }
                          .mission p { font-size: 1.2rem; }

                          /* DOAÇÃO */
                          #donate p { text-align: center; margin-bottom: 30px; }
                          #donate a { display: inline-block; padding: 20px 40px; background: #28a745; color: #fff; border-radius: 30px; font-weight: bold; transition: 0.3s; text-decoration:none; }
                          #donate a:hover { background: #218838; }

                          /* CONTATO */
                          .contact form { display: flex; flex-direction: column; gap: 20px; max-width: 500px; margin: auto; }
                          .contact input, .contact textarea { padding: 15px; border-radius: 10px; border: 1px solid #ccc; resize: none; }
                          .contact button { padding: 15px; background: #1e682f; color: #fff; font-weight: bold; border: none; border-radius: 30px; cursor: pointer; transition: 0.3s; }
                          .contact button:hover { background: #145c23; }

                          /* FOOTER */
                          footer { background: #1e682f; color: #fff; text-align: center; padding: 30px 20px; margin-top: 50px; }

                          /* TABS */
                          .tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
                          .tab { padding: 10px 20px; background: #28a745; color: #fff; border-radius: 30px; cursor: pointer; font-weight:bold; transition: 0.3s; }
                          .tab:hover { background: #218838; }
                          .tab.active { background: #145c23; }
                          .tab-content { display: none; background: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-width: 800px; margin: auto; }
                          .tab-content.active { display: block; }

                          /* WHATSAPP FLUTUANTE */
                          #whatsapp { position: fixed; bottom: 20px; right: 20px; background: #25d366; color: #fff; padding: 15px 20px; border-radius: 50px; font-weight: bold; text-decoration:none; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index:1000; transition:0.3s;}
                          #whatsapp:hover { background:#1ebe57; }

                          /* RESPONSIVO MOBILE */
                          @media(max-width:768px){
                            .hero h1 { font-size: 2.2rem; }
                              .hero p { font-size: 1.2rem; }
                                .cards { flex-direction: column; gap: 20px; }
                                }