/* Reset básico e box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos globais do corpo da página */
body {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    line-height: 1.6;
}

/* Seção Hero (primeira tela) */
.hero {
    background: url('mulher.jpeg') center 40%/cover no-repeat;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
    align-items: flex-start; /* MODIFICADO: Alinha o conteúdo ao topo verticalmente */
}

/* Overlay com degradê sobre a imagem de fundo da Hero */
.overlay {
    background: linear-gradient(to bottom, rgba(0, 50, 50, 0.3) 0%, rgba(0, 50, 50, 0.9) 100%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* Alinha o container à esquerda dentro do overlay */
    align-items: flex-start; /* MODIFICADO: Alinha o conteúdo ao topo verticalmente */
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Contêiner principal dentro da Hero para alinhamento do conteúdo */
.container {
    max-width: 800px;
    z-index: 1;
    padding: 20px;
    text-align: left;
    margin-left: 10%;
    margin-right: auto;
    padding-top: 3px; /* NOVO: Adiciona um espaçamento do topo para o conteúdo. AJUSTE ESTE VALOR! */
    /* Você pode ajustar 80px para 100px, 120px, etc., até ficar bom visualmente */
}

/* ... o restante do seu CSS permanece o mesmo ... */

/* Ajustes na responsividade (dentro da @media (max-width: 768px)) */
@media (max-width: 768px) {
    /* ... outras regras ... */

    .hero {
        justify-content: center;
        align-items: center; /* MODIFICADO: Centraliza verticalmente em telas pequenas (geralmente melhor) */
    }

    .overlay {
        justify-content: center;
        align-items: center; /* MODIFICADO: Centraliza verticalmente em telas pequenas (geralmente melhor) */
    }

    .container {
        margin-left: 0;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        padding-top: 3px; /* NOVO: Adiciona padding-top para telas pequenas também. Ajuste se necessário. */
    }

    /* ... o restante das regras da media query ... */
}

/* Estilo para o logo (se você tiver uma imagem de logo) */
/* Nota: Seu HTML atual não usa mais a tag <img> com classe .logo */
.logo {
    max-width: 150px;
    margin-bottom: 20px;
}

/* Estilos para o <h2> principal da seção Hero */
.hero h2 {
    font-size: 2em; /* Tamanho ajustado */
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffffff;
    /* Lembre-se de aplicar a Google Font escolhida aqui também */
    /* font-family: 'SuaGoogleFont', sans-serif; */
}

/* Estilos para parágrafos gerais */
p {
    font-size: 1.3em;
    margin-bottom: 20px; /* Margem padrão para parágrafos */
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
    color: #e0f2e8;
}

.cta {
    background: #3cb371;
    padding: 15px 25px;
    color: white;
    text-decoration: none;
    border: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 1.1em;
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    margin: 10px auto;
    max-width: 90vw; /* evita estourar em telas pequenas */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.3s ease, transform 0.3s ease;
}



.cta:hover {
    background-color: #2e8b57; /* Cor de fundo ao passar o mouse */
    transform: scale(1.05); /* Efeito de aumentar 5% ao passar o mouse */
}

/* Estilos para o botão CTA .cta_2 (este é o que VAI piscar) */
.cta_2 {
    background: #3cb371; /* Cor de fundo */
    padding: 15px 30px; /* Preenchimento interno */
    color: white; /* Cor do texto */
    text-decoration: none; /* Remove sublinhado */
    border: none; /* Remove borda padrão */
    font-weight: bold; /* Negrito */
    border-radius: 8px; /* Bordas arredondadas */
    font-size: 1.1em; /* Tamanho da fonte */
    display: block; /* MUITO IMPORTANTE: Transforma em bloco para centralizar com margin: auto */
    cursor: pointer; /* Muda o cursor para indicar clicável */
    white-space: nowrap; /* Impede que o texto quebre linhas */
    margin: 0 auto; /* Centraliza o botão horizontalmente */
    max-width: 300px; /* Largura máxima para o botão */
    overflow: hidden; /* Esconde texto que excede a largura */
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transição suave para cor e tamanho */

    /* PROPRIEDADE PARA O EFEITO DE PISCAR/PULSAR */
    animation: pulseCta 2s infinite ease-in-out; /* Aplica a animação 'pulseCta' */
}

.cta_2:hover {
    background-color: #2e8b57; /* Cor de fundo ao passar o mouse */
    transform: scale(1.05); /* Efeito de aumentar 5% ao passar o mouse */
    /* PAUSA A ANIMAÇÃO QUANDO O MOUSE ESTÁ EM CIMA */
    animation-play-state: paused;
}

/* * DEFINIÇÃO DA ANIMAÇÃO 'pulseCta'
 * ESTE BLOCO DEVE ESTAR NO SEU CSS PARA QUE O EFEITO FUNCIONE.
 * Geralmente é adicionado no final do arquivo CSS.
 */
@keyframes pulseCta {
    0% {
        box-shadow: 0 0 0 0 rgba(60, 179, 113, 0.7); /* Sombra transparente no início */
        transform: scale(1); /* Tamanho normal */
    }
    40% {
        box-shadow: 0 0 0 10px rgba(60, 179, 113, 0); /* Sombra expande e fica transparente */
        transform: scale(1.02); /* Aumenta um pouco */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(60, 179, 113, 0.7); /* Volta ao estado inicial */
        transform: scale(1); /* Volta ao tamanho normal */
    }
}

/* Estilos para a seção de Benefícios */
.beneficios {
    padding: 60px 20px;
    text-align: center;
    background: #2e4a4a; /* Tom de verde escuro harmonioso */
    color: #fff;
}

/* Estilos para o <h2> da seção de Benefícios */
.beneficios h2 {
    font-size: 2.5em;
    margin-bottom: 40px; /* Espaço abaixo do título, já que o parágrafo de subtítulo foi removido */
    color: #d1e7dd;
    /* Lembre-se de aplicar a Google Font escolhida aqui também */
    /* font-family: 'SuaGoogleFont', sans-serif; */
}

/* Contêiner dos cards de Benefícios */
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilos de cada Card de Benefício */
.card {
    background: #3c6363;
    padding: 30px;
    border-radius: 8px;
    width: calc(25% - 20px); /* 4 cards por linha em telas maiores, descontando o gap */
    min-width: 250px; /* Largura mínima para o card */
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #f0f8f0;
    /* Lembre-se de aplicar a Google Font escolhida aqui também */
    /* font-family: 'SuaGoogleFont', sans-serif; */
}

/* Estilos para os ícones Material Symbols dentro dos cards de Benefício */
.card .material-symbols-outlined {
    color: #3cb371; /* Cor verde para o ícone */
    font-size: 1.8em; /* Tamanho do ícone */
    margin-right: 10px;
    vertical-align: middle;
}

/* Estilos para a seção de Apresentação do Guia na Hero (Lista com Ícones) */
.apresentacao-guia {
    margin-top: 2px;
    margin-bottom: 3px;
    text-align: left;
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
}

.apresentacao-guia p {
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #e0f2e8;
}

.lista-beneficios-hero {
    list-style: none; /* Remove os marcadores de lista padrão */
    padding: 0;
    margin: 0;
}

.lista-beneficios-hero li {
    font-size: 1.2em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #f0f8f0;
}

.lista-beneficios-hero .check-icon {
    color: #3cb371;
    font-size: 1.5em;
    margin-right: 10px;
    /* font-variation-settings: 'FILL' 1; */
}

/* Estilos para a Seção de Depoimento */
.depoimento-section {
    background-color: #255050; /* Fundo verde mais escuro */
    padding: 80px 20px;
    text-align: center;
    color: #fff;
}

/* Contêiner da grade de depoimentos (para múltiplos lado a lado) */
.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Contêiner de cada depoimento individual */
.container-depoimento {
    max-width: 40%; /* Para dois depoimentos lado a lado em telas grandes */
    flex: 1; /* Permite que os depoimentos cresçam e encolham */
    min-width: 300px; /* Largura mínima para não ficarem muito pequenos */
    background-color: #3c6363;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}

.quote {
    font-size: 1em;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #d1e7dd;
}

.author {
    font-size: 1.0em;
    font-weight: bold;
    color: #f0f8f0;
    margin-top: 10px;
}

/* Estilos para a Seção "Sobre a Autora" */
.about-author-section {
    background-color: #2e4a4a;
    padding: 80px 20px;
    text-align: center;
    color: #fff;
}

.container-author {
    max-width: 800px;
    margin: 0 auto;
}

.about-author-section h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #d1e7dd;
    /* Lembre-se de aplicar a Google Font escolhida aqui também */
    /* font-family: 'SuaGoogleFont', sans-serif; */
}

.author-bio-photo {
    width: 150px; /* Tamanho da foto */
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 30px;
    border: 4px solid #3cb371;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.about-author-section p {
    font-size: 1.2em;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    color: #f0f8f0;
    /* Lembre-se de aplicar a Google Font escolhida aqui também */
    /* font-family: 'SuaGoogleFont', sans-serif; */
}


/* RESPONSIVIDADE: Ajustes para telas menores (media queries) */
@media (max-width: 768px) {
    /* Hero Section */
    .hero {
        justify-content: center;
    }

    .overlay {
        justify-content: center;
    }

    .container {
        margin-left: 0;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }

    .hero h2 {
        font-size: 2.2em; /* Tamanho do título principal em telas pequenas */
    }

    /* CTA Button */
    .cta {
        margin-top: 30px;
        margin-bottom: 60px;
    }

    /* Paragraphs (geral) */
    p {
        font-size: 1em;
        margin-left: auto;
        margin-right: auto;
    }

    /* Beneficios Section */
    .beneficios h2 {
        font-size: 2em;
        margin-bottom: 30px;
    }

    .cards {
        flex-direction: column; /* Cards de benefício empilhados */
        align-items: center;
    }

    .card {
        width: 90%;
        max-width: 400px;
    }

    /* Apresentacao Guia (lista na Hero) */
    .apresentacao-guia {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .lista-beneficios-hero li {
        justify-content: center;
        text-align: left; /* Mantém o texto alinhado à esquerda dentro do item da lista */
    }

    /* Depoimento Section */
    .depoimento-section {
        padding: 50px 20px;
    }

    .testimonials-grid {
        flex-direction: column; /* Depoimentos empilhados em telas pequenas */
        gap: 20px;
    }

    .container-depoimento {
        max-width: 90%;
        min-width: unset;
    }

    .quote {
        font-size: 1.4em;
    }

    /* Sobre a Autora Section */
    .about-author-section {
        padding: 50px 20px;
    }

    .about-author-section h2 {
        font-size: 2em;
        margin-bottom: 20px;
    }

    .author-bio-photo {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }

    .about-author-section p {
        font-size: 1em;
    }
}

.icone-beneficio {
    background-color: #26d19e;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.icone-beneficio .material-symbols-outlined {
    font-size: 30px;
    color: #0F2F27; /* Ícone escuro para fundo claro */
    font-variation-settings: 'FILL' 1; /* Força o preenchimento sólido */
}

.faixa-promocional {
  background-color: #3cb371;
  overflow: hidden;
  white-space: nowrap;
  height: 45px;
  position: relative;
}

.faixa-conteudo {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: faixa-scroll 30s linear infinite;
}

.faixa-conteudo span {
  display: inline-block;
  padding-right: 50px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
}

@keyframes faixa-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.icon-promocional {
  vertical-align: middle;
  font-size: 18px;
  margin-right: 8px;
  color: white;
}