/* ==========================================================================
   BASE — COLORIDO, TIPOGRAFIA, RESET E COMPONENTES GLOBAIS
   Site da psicóloga Bianca Auer.
   Identidade própria: verde sálvia profundo, areia e terracota.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTES HOSPEDADAS NO PRÓPRIO SITE (sem requisição a servidores externos)
   -------------------------------------------------------------------------- */

/* Declara a fonte serifada usada nos títulos */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-normal.woff2') format('woff2');
}

/* Declara a versão itálica da fonte serifada */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 500;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}

/* Declara a fonte sem serifa usada no corpo do texto */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 200 500;
    font-display: swap;
    src: url('../fonts/outfit-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   VARIÁVEIS DE DESIGN
   -------------------------------------------------------------------------- */

:root {
    /* Verde sálvia profundo: cor principal da marca */
    --verde: #2C4A3F;
    /* Verde médio: usado em estados de apoio e ícones */
    --verde-medio: #567C6D;
    /* Verde neblina: fundos suaves e realces */
    --verde-neblina: #DCE7E0;
    /* Areia: cor de fundo das páginas */
    --areia: #F8F4EC;
    /* Areia escura: fundo das seções alternadas */
    --areia-2: #EFE7D9;
    /* Terracota: cor de destaque em detalhes e acentos */
    --terracota: #B96B45;
    /* Terracota clara: variações suaves do destaque */
    --terracota-claro: #E0C3AC;
    /* Tinta: cor principal do texto */
    --tinta: #22312B;
    /* Tinta suave: textos de apoio */
    --tinta-2: #52655C;
    /* Tinta de leitura: usada nos textos longos */
    --tinta-leitura: #384A42;
    /* Linha: bordas e divisórias */
    --linha: #DCD3C3;

    /* Fonte dos títulos */
    --fonte-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    /* Fonte do corpo do texto */
    --fonte-texto: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

    /* Curva de animação padrão do site */
    --curva: cubic-bezier(0.16, 1, 0.3, 1);
    /* Raio pequeno das bordas */
    --raio: 2px;
    /* Altura do cabeçalho fixo */
    --altura-cabecalho: 76px;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

/* Remove as margens padrão de todos os elementos */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

/* Define o comportamento de rolagem suave e o ajuste de texto no celular */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Define a fonte, o tamanho base e a cor do texto do site */
body {
    font-family: var(--fonte-texto);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.9;
    word-spacing: 0.04em;
    color: var(--tinta);
    background: var(--areia);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Impede que as imagens estouram o tamanho do container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Define a cor dos links herdada do texto */
a {
    color: inherit;
}

/* Define o estilo dos títulos com a fonte serifada */
h1,
h2,
h3,
h4 {
    font-family: var(--fonte-display);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--tinta);
}

/* Define o estilo das listas sem marcadores padrão */
ul,
ol {
    list-style: none;
    padding: 0;
}

/* Define o estilo do botão do navegador */
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Define o estilo dos campos de formulário */
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Define o foco visível para navegação por teclado */
:focus-visible {
    outline: 2px solid var(--verde-medio);
    outline-offset: 3px;
    border-radius: var(--raio);
}

/* Esconde o conteúdo de forma acessível para leitores de tela */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   ESTRUTURA DE CONTEÚDO
   -------------------------------------------------------------------------- */

/* Limita a largura do conteúdo e centraliza na tela */
.envolucro {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Define o espaçamento vertical das seções do site */
.secao {
    padding: 104px 0;
}

/* Reduz o espaçamento das seções mais curtas */
.secao--compacta {
    padding: 64px 0 104px;
}

/* Aplica o fundo de areia escura nas seções alternadas */
.secao--tinta {
    background: var(--areia-2);
}

/* Define o cabeçalho das páginas internas */
.cabecalho-pagina {
    padding: 84px 0 48px;
}

/* Define o título grande do cabeçalho das páginas internas */
.cabecalho-pagina h1 {
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    max-width: 14ch;
    margin-top: 18px;
}

/* Define o itálico de destaque nos títulos */
.cabecalho-pagina h1 em,
.heroi h1 em {
    font-style: italic;
    color: var(--terracota);
}

/* --------------------------------------------------------------------------
   ETIQUETA, TÍTULOS E TEXTOS DE APOIO
   -------------------------------------------------------------------------- */

/* Estilo da pequena etiqueta em caixa alta */
.etiqueta {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--verde-medio);
}

/* Define o tamanho dos títulos de seção */
.secao h2 {
    font-size: clamp(1.95rem, 3.4vw, 2.9rem);
    max-width: 18ch;
    margin-top: 18px;
}

/* Texto de apoio logo abaixo dos títulos */
.linha-apoio {
    color: var(--tinta-2);
    max-width: 48ch;
    margin-top: 18px;
}

/* Texto de apoio do parágrafo de destaque */
.prosa-destaque {
    font-family: var(--fonte-display);
    font-size: clamp(1.4rem, 2.3vw, 1.95rem);
    line-height: 1.45;
    letter-spacing: 0.005em;
    color: var(--verde);
    margin-bottom: 30px;
}

/* Parágrafos do texto corrido */
.prosa p {
    color: var(--tinta-leitura);
    font-weight: 400;
    max-width: 64ch;
    margin-bottom: 26px;
    line-height: 1.95;
}

/* Nota pequena de rodapé de seção */
.nota-fina {
    margin-top: 28px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--tinta-2);
    max-width: 64ch;
}

/* Mensagem de lista vazia */
.vazio {
    padding: 48px 0;
    color: var(--tinta-2);
}

/* --------------------------------------------------------------------------
   BOTÕES E LINKS
   -------------------------------------------------------------------------- */

/* Estilo do botão principal */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--verde);
    color: var(--areia);
    padding: 16px 28px;
    border-radius: var(--raio);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--verde);
    transition: background 0.3s var(--curva), transform 0.3s var(--curva), color 0.3s var(--curva), border-color 0.3s var(--curva);
}

/* Aplica o deslocamento do botão no estado de foco do mouse */
.botao:hover {
    background: var(--tinta);
    border-color: var(--tinta);
    transform: translateY(-2px);
}

/* Reduz o botão quando ele é pressionado */
.botao:active {
    transform: scale(0.98);
}

/* Versão com fundo transparente e borda marcada */
.botao--claro {
    background: transparent;
    color: var(--verde);
    border-color: var(--verde);
}

/* Mantém a borda marcada ao passar o mouse na versão clara */
.botao--claro:hover {
    background: var(--verde);
    color: var(--areia);
    border-color: var(--verde);
}

/* Versão menor do botão */
.botao--pequeno {
    padding: 12px 20px;
    font-size: 0.7rem;
}

/* Versão que ocupa toda a largura do container */
.botao--cheio {
    width: 100%;
}

/* Estilo do link sublinhado em caixa alta */
.link {
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: opacity 0.3s var(--curva);
}

/* Reduz a opacidade do link no estado de foco do mouse */
.link:hover {
    opacity: 0.7;
}

/* Link com espaço acima do conteúdo */
.link--mais {
    display: inline-block;
    margin-top: 28px;
}

/* Link de retorno ao topo de um texto */
.link--voltar {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--verde-medio);
}

/* --------------------------------------------------------------------------
   FORMULÁRIOS
   -------------------------------------------------------------------------- */

/* Estilo do formulário */
.formulario {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

/* Estilo de cada campo */
.campo {
    display: grid;
    gap: 8px;
}

/* Estilo do rótulo do campo */
.rotulo {
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--verde-medio);
}

/* Observação opcional dentro do rótulo */
.rotulo-opcional {
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--tinta-2);
}

/* Estilo do campo de entrada */
.entrada {
    width: 100%;
    padding: 14px 16px;
    background: var(--areia);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    font-size: 1rem;
    font-weight: 300;
    color: var(--tinta);
    transition: border-color 0.3s var(--curva), background 0.3s var(--curva);
}

/* Destaca o campo quando ele recebe o foco do teclado */
.entrada:focus {
    border-color: var(--verde-medio);
    background: #fff;
    outline: none;
}

/* Mantém a altura mínima das áreas de texto */
textarea.entrada {
    min-height: 150px;
    resize: vertical;
    line-height: 1.7;
}

/* Cartão que envolve um formulário */
.cartao-formulario {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 34px;
}

/* Título do cartão de formulário */
.cartao-formulario h2 {
    font-size: 1.8rem;
}

/* Texto de apoio do cartão de formulário */
.cartao-formulario-texto {
    margin-top: 8px;
    color: var(--tinta-2);
    font-size: 0.96rem;
}

/* --------------------------------------------------------------------------
   AVISOS E NOTIFICAÇÕES
   -------------------------------------------------------------------------- */

/* Cartão de aviso exibido abaixo do cabeçalho */
.aviso {
    max-width: 1180px;
    margin: 20px auto 0;
    padding: 14px 24px;
    border-radius: var(--raio);
    font-size: 0.95rem;
    border-left: 3px solid;
}

/* Aviso de sucesso */
.aviso--sucesso {
    background: var(--verde-neblina);
    border-color: var(--verde-medio);
    color: var(--verde);
}

/* Aviso de erro */
.aviso--erro {
    background: #F6E3DA;
    border-color: var(--terracota);
    color: #7A4026;
}

/* Lista de erros dentro do aviso */
.aviso-lista {
    display: grid;
    gap: 4px;
}

/* Área fixa onde aparecem as notificações temporárias */
.area-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: grid;
    gap: 10px;
    justify-items: end;
    pointer-events: none;
}

/* Notificação temporária */
.toast {
    background: var(--verde);
    color: var(--areia);
    padding: 14px 20px;
    border-radius: var(--raio);
    font-size: 0.92rem;
    box-shadow: 0 14px 34px rgba(34, 49, 43, 0.24);
    animation: toast-entra 0.4s var(--curva) both;
}

/* Notificação temporária de erro */
.toast--erro {
    background: var(--terracota);
}

/* Animação de entrada da notificação */
@keyframes toast-entra {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   -------------------------------------------------------------------------- */

/* Link para pular direto ao conteúdo */
.pular-para-conteudo {
    position: absolute;
    left: -999px;
    top: 8px;
    background: var(--tinta);
    color: var(--areia);
    padding: 10px 16px;
    z-index: 100;
}

/* Torna o link de salto visível quando ele recebe o foco do teclado */
.pular-para-conteudo:focus {
    left: 8px;
}

/* Classifica a marca de JavaScript ativo no documento */
.js .revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
    transition-delay: calc(var(--i, 0) * 90ms);
}

/* Define o estado final dos elementos revelados */
.js .revelar.revelado {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVO — BASE
   -------------------------------------------------------------------------- */

/* Reduz o espaçamento e o tamanho dos títulos nas telas menores */
@media (max-width: 960px) {
    .secao {
        padding: 72px 0;
    }

    .secao--compacta {
        padding: 48px 0 72px;
    }

    .cabecalho-pagina {
        padding: 56px 0 32px;
    }

    .envolucro {
        padding: 0 20px;
    }
}

/* Ajusta o tamanho base da fonte no celular */
@media (max-width: 480px) {
    body {
        font-size: 1rem;
    }

    .botao {
        padding: 15px 22px;
        letter-spacing: 0.16em;
    }
}

/* Respeita a preferência de movimento reduzido do sistema */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .revelar {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .botao,
    .link {
        transition: none;
    }
}