@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

/* CORES (opcional) */
:root {
    --verde: #08A73D;
    --branco: #ffffff;
    --preto: #000000;
}

/* BODY */
body {
    background: var(--verde);
    font-family: Inter, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/*============================================== HEADER =============================================*/
header {
    background: var(--branco);
    width: 80vw;
    max-width: 1400px;
    height: 10vh;
    border-radius: 25px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 25px auto 80px auto;
    gap: 180px;
    box-shadow: 0px 2px 36px -15px #000000;
}

.header-img {
    width: 190px;
}

nav {
    display: flex;
    gap: 25px;
}

.nav-a {
    color: var(--preto);
    font-size: 17px;
    text-decoration: none;
}

.nav-a:hover {
    color: var(--verde);
}

button {
    cursor: pointer;
}

.btn-header {
    background: var(--verde);
    padding: 13px;
    border-radius: 25px;
    border: none;
    box-shadow: 0px 3px 36px -15px #000000;
    transition: all 0.3s ease;
}

.btn-header:hover {
    transform: scale(1.05);
}

.a-btn {
    color: var(--branco);
    font-size: 17px;
    text-decoration: none;
}

/*============================================== SECTION 1 =============================================*/
.s1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
}

h1 {
    font-size: 45px;
    color: white;
}

.s1-p {
    font-size: 23px;
    color: white;
}

.s1-div-pai {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s1-img {
    width: 500px;
}

.s1-btn {
    padding: 13px;
    border-radius: 25px;
    width: 200px;
    border: none;
    box-shadow: 0px 3px 36px -15px #000000;
    transition: 100ms ease;
}

.s1-btn:hover {
    transform: translateY(-3px);
}

.s1-btn-a {
    font-size: 16px;
    font-weight:600;
    text-decoration: none;
    color: var(--verde);
}

/*============================================== SECTION 2 =============================================*/
.s2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
}

.s2-div-pai {
    width: 75vw;
    height: 70vh;
    display: flex;
    background: white;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0px 3px 50px -15px #000000;
}

.s2-div-filho-1 {
    margin: 10px;
    max-width: 37.5vw;
}

.s2-div-filho-1,
.s2-div-filho-2 {
    display: flex;
    flex-direction: column;
}

.s2-div-filho-2 {
    width: 37.5vw;
    box-shadow: 0px 3px 7px -5px #000000;
    border-radius: 10px;
    justify-content: center;
    padding: 0 25px 0 25px;
}

.s2-div-neto-h3 {
    font-size: 53px;
    font-weight: 450;
    margin-top: 10px;
}

.s2-div-neto {
    margin-bottom: 10px;
}

.s2-div-neto-linha {
    border-top: solid 2px #08A73D;
    margin: 10px 10px 10px 0px;
    padding-top: 15px;
}

.s2-div-neto-p {
    font-size: 23px;
}

.s2-div-neto-2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
}

.s2-div-neto-2 label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.s2-div-neto-2 input {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    color: #444;
    transition: all 0.3s ease;
    outline: none;
    background-color: #fff;
}

.s2-div-neto-2 input:focus {
    border-color: #00a84d;
    box-shadow: 0 0 0 3px rgba(0, 168, 77, 0.1);
}

.btn-form {
    background-color: #00a84d;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.btn-form:hover {
    background-color: #008f41;
}

/*====================================== SECTION 4 ========================================*/
.s4 {
    display: flex;
    height: 90vh;
    padding: 100px 0 0;
    margin-bottom: 30px;
}

.s4-div-pai-1,
.s4-div-pai-2 {
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.s4-div-pai-2 {
    margin-right: 50px;
}

.s4-img {
    width: 35vw;
}

.s4-h3 {
    font-size: 40px;
    color: var(--branco);
}

.s4-p {
    font-size: 23px;
    color: var(--branco);
}

.s4-div-filho {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: green;
    width: 25vw;
    height: 15vh;
    border-radius: 20px;
    color: var(--branco);
    gap: 15px;
}

.numero-js {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 25px;
}

.s4-btn {
    margin-top: 10px;
    padding: 13px;
    border-radius: 25px;
    width: 200px;
    border: none;
    box-shadow: 0px 3px 36px -15px #000000;
    transition: all 0.3s ease;
}

.s4-btn-a {
    font-size: 14px;
    font-weight:600;
    text-decoration: none;
    color: var(--verde);
}

.s4-btn:hover {
    transform: scale(1.05);
}

/*====================================== SECTION 5 ========================================*/
.s5 {
    background: var(--branco);
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.s5-div {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.s5-div-pai-2 {
    width: 34vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.s5-img {
    width: 20vw;
}

.s5-h3 {
    font-size: 50px;
}

.s5-p {
    font-size: 23px;
    text-align: center;
}

.s5-btn {
    padding: 15px;
    background: #08A73D;
    border: none;
    border-radius: 25px;
    box-shadow: 0px 3px 36px -15px #000000;
    transition: all 0.3s ease;
}

.s5-btn a {
    text-decoration: none;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.s5-btn:hover {
    transform: scale(1.05);
}

/*====================================== SECTION 6 ========================================*/
.s6 {
    height: 120vh;
    display: flex;
    flex-direction: column;
}

.s6-div-pai {
    margin-top: 70px;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.s6-div-pai img {
    width: 1100px;
}

.s6-div-pai h3 {
    font-size: 50px;
    color: white;
}

.s6-div-pai-flex-row {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.s6-div-pai-flex-row img {
    width: 250px;
}

/*====================================== SECTION 7 ========================================*/
.s7 {
    height: 100vh;
    width: 100vw;
    background: white;
    display: flex;
    flex-direction: column;
}

.s7-div-pai-1 {
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s7-div-pai-1 h3 {
    color: #08A73D;
    font-family: 'Inter', sans-serif;
    margin-top: 50px;
}

.s7-div-pai-2 {
    height: 80vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.s7-div-filho {
    background: #08A73D;
    border: solid 3px green;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 50px;
    height: 70%;
    width: 18%;
    gap: 20px;
    box-shadow: 0px 3px 36px -15px #000000;
}

.s7-img {
    background: white;
    height: 100px;
    width: 100px;
    border: solid 2px green;
    border-radius: 50px;
    margin-top: 20px;
    box-shadow: 0px 3px 36px -15px #000000;
}

.s7-div-filho h4 {
    color: white;
    font-family: 'Inter', sans-serif;
    border-bottom: solid 2px #fff;
    padding: 0 40px 10px 40px;
}

.s7-div-filho p {
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 0 25px 0 25px;
}

.s7-btn {
    padding: 10px;
    border: solid 2px green;
    border-radius: 25px;
    background: white;
    transition: all 0.3s ease;
    box-shadow: 0px 3px 36px -15px #000000;
}

.s7-btn a {
    text-decoration: none;
    color: green;
    font-family: 'Inter', sans-serif;
}

.s7-btn:hover {
    transform: scale(1.05);
}

/*====================================== SECTION 8 ========================================*/
.s8 {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 100px;
}

.s8 h3 {
    margin-top: 40px;
    font-family: 'Inter', sans-serif;
    color: white;
}

.s8-div-pai {
    display: flex;
    gap: 20px;
}

iframe {
    border: solid 3px green;
}

/*====================================== SECTION 9 ========================================*/
.s9 {
    height: 40vh;
    background: #08A73D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.s9 h3 {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
}

.s9-div-pai {
    display: flex;
    justify-content: space-around;
    margin: 20px auto 50px auto;
    gap: 50px;
}

.s9-div-filho {
    width: 100%;
    max-width: 500px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
    border-radius: 15px;
}

.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Ícone + */
.faq-item summary::after {
    content: "+";
    font-size: 26px;
    font-weight: bold;
    color: #08A73D;
    transition: transform 0.3s ease;
}

/* Quando abrir → vira − */
.faq-item[open] summary::after {
    content: "−";
}

/* Animação do texto */
.faq-item p {
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    animation: fade 0.3s ease;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*====================================== FOOTER ========================================*/
footer {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

footer img {
    width: 400px;
}

footer p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #08A73D;
}

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

/* regra geral pra não estourar no mobile */
img, iframe {
  max-width: 100%;
  height: auto;
}

main, header, section, footer {
  max-width: 100%;
}

/* tipografia mais fluida */
h1 { font-size: clamp(28px, 5vw, 45px); }
.s1-p, .s2-div-neto-p, .s4-p, .s5-p { font-size: clamp(16px, 3.6vw, 23px); }
.s4-h3, .s5-h3, .s6-div-pai h3 { font-size: clamp(22px, 5vw, 50px); }

/* ----------- até 1024px (tablet) ----------- */
@media (max-width: 1024px) {

  /* HEADER */
  header {
    width: 92vw;
    height: auto;
    padding: 14px 16px;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 18px auto 40px auto;
  }

  .header-img { width: 160px; }

  nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .btn-header {
    width: 100%;
    max-width: 340px;
  }

  /* SECTION 1 */
  .s1 {
    flex-direction: column;
    text-align: center;
    gap: 22px;
    padding: 0 16px;
  }

  .s1-div-pai { align-items: center; }
  .s1-img { width: min(520px, 92vw); }

  /* SECTION 2 (form) */
  .s2 { margin: 30px auto; padding: 0 16px; }

  .s2-div-pai {
    width: min(980px, 92vw);
    height: auto;
    flex-direction: column;
    gap: 20px;
    padding: 22px;
  }

  .s2-div-filho-1, .s2-div-filho-2 {
    width: 100%;
    max-width: none;
  }

  .s2-div-neto-h3 { font-size: clamp(24px, 5vw, 44px); }

  /* SECTION 4 */
  .s4 {
    height: auto;
    padding: 40px 16px 0;
    flex-direction: column;
    gap: 22px;
  }

  .s4-div-pai-1, .s4-div-pai-2 {
    width: 100%;
  }

  .s4-div-pai-2 { margin-right: 0; }
  .s4-img { width: min(520px, 92vw); }

  .s4-div-filho {
    width: min(520px, 92vw);
    height: auto;
    padding: 16px 12px;
  }

  /* SECTION 5 */
  .s5 {
    height: auto;
    padding: 40px 16px;
  }

  .s5-div {
    flex-direction: column;
    gap: 22px;
  }

  .s5-div-pai-2 {
    width: 100%;
    text-align: center;
  }

  .s5-img { width: min(280px, 40vw); }

  /* SECTION 6 */
  .s6 { height: auto; padding: 20px 16px 40px; }
  .s6-div-pai { height: auto; margin-top: 30px; }
  .s6-div-pai img { width: 100%; max-width: 1100px; }

  .s6-div-pai-flex-row {
    height: auto;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 10px;
  }

  .s6-div-pai-flex-row img { width: min(220px, 44vw); }

  /* SECTION 7 */
  .s7 { height: auto; }
  .s7-div-pai-1 { height: auto; padding: 24px 16px 0; text-align: center; }

  .s7-div-pai-2 {
    height: auto;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 16px 40px;
  }

  .s7-div-filho {
    width: min(360px, 92vw);
    height: auto;
    border-radius: 30px;
    padding-bottom: 18px;
  }

  /* SECTION 8 */
  .s8 {
    height: auto;
    padding: 20px 16px 40px;
    margin-bottom: 40px;
  }

  .s8-div-pai {
    flex-direction: column;
    width: 100%;
    max-width: 560px;
  }

  iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* SECTION 9 (FAQ) */
  .s9 {
    height: auto;
    padding: 30px 16px 40px;
  }

  .s9-div-pai {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 560px;
  }

  .s9-div-filho {
    max-width: 100%;
  }

  /* FOOTER */
  footer img { width: min(400px, 90vw); }
  footer p { font-size: 14px; text-align: center; }
}

/* ----------- até 480px (celular) ----------- */
@media (max-width: 480px) {
  .nav-a { font-size: 15px; }
  .a-btn { font-size: 15px; }

  .s1-btn, .s4-btn, .s5-btn {
    width: 100%;
    max-width: 320px;
  }

  .s7-div-filho p { font-size: 15px; }
}