/* ==========================================================================
   LAYOUT — CABEÇALHO, MENU, HERO, RODAPÉ E ESTRUTURAS DE SEÇÃO
   ========================================================================== */

/* --------------------------------------------------------------------------
   CABEÇALHO E NAVEGAÇÃO
   -------------------------------------------------------------------------- */

/* Mantém o cabeçalho fixo no topo da tela */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--areia);
}

/* Desenha a linha fina sob o cabeçalho */
.cabecalho::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--linha);
    pointer-events: none;
}

/* Organiza o conteúdo do cabeçalho em uma linha */
.cabecalho .envolucro {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--altura-cabecalho);
    gap: 28px;
}

/* Estilo da marca do site */
.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

/* Tamanho do símbolo da marca */
.marca-simbolo {
    display: block;
    width: 38px;
    height: 38px;
    color: var(--verde);
}

/* Mantém o símbolo SVG dimensionado dentro do bloco */
.marca-simbolo svg {
    width: 100%;
    height: 100%;
}

/* Agrupa o nome e a especialidade da marca */
.marca-texto {
    display: grid;
    line-height: 1.2;
}

/* Estilo do nome da profissional na marca */
.marca-texto strong {
    font-family: var(--fonte-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--verde);
}

/* Estilo da especialidade na marca */
.marca-texto small {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

/* Lista de links do menu */
.menu-lista {
    display: flex;
    gap: 30px;
}

/* Estilo de cada link do menu */
.menu-lista a {
    position: relative;
    display: block;
    padding: 6px 0;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tinta);
    white-space: nowrap;
}

/* Desenha a linha de destaque do link ao passar o mouse */
.menu-lista a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--terracota);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--curva);
}

/* Mostra a linha de destaque no estado de foco e na página atual */
.menu-lista a:hover::after,
.menu-lista a[aria-current='page']::after {
    transform: scaleX(1);
}

/* Botão do menu mobile, escondido no computador */
.botao-menu {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    color: var(--tinta);
}

/* Desenha as três linhas do botão do menu */
.botao-menu span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    margin: 6px 0;
    transition: transform 0.4s var(--curva), opacity 0.3s;
}

/* Transforma as linhas em um X quando o menu está aberto */
.botao-menu[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

/* Esconde a linha do meio quando o menu está aberto */
.botao-menu[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

/* Transforma a última linha no X quando o menu está aberto */
.botao-menu[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Folha do menu mobile */
.menu-folha {
    display: contents;
}

/* Bloco de ações extras do menu mobile */
.menu-extras {
    display: none;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* Espaçamento do bloco de abertura */
.heroi {
    padding: 48px 0 72px;
}

/* Organiza o hero em duas colunas */
.heroi-grade {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

/* Inverte a ordem das colunas do hero */
.heroi--reverso .heroi-grade {
    grid-template-columns: 0.95fr 1.05fr;
}

/* Hero sem imagem, com o texto centralizado */
.heroi--solo .heroi-conteudo {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Centraliza os elementos do hero sem imagem */
.heroi--solo .etiqueta,
.heroi--solo .heroi-texto {
    margin-left: auto;
    margin-right: auto;
}

/* Centraliza as ações do hero sem imagem */
.heroi--solo .heroi-acoes {
    justify-content: center;
}

/* Estilo da etiqueta do hero */
.heroi .etiqueta {
    margin-bottom: 22px;
}

/* Estilo do título principal do site */
.heroi h1 {
    font-size: clamp(2.7rem, 5.4vw, 4.6rem);
    max-width: 13ch;
}

/* Texto de apoio do hero */
.heroi-texto {
    margin: 26px 0 34px;
    max-width: 48ch;
    color: var(--tinta-2);
}

/* Destaca o nome dentro do texto do hero */
.heroi-texto strong {
    font-weight: 400;
    color: var(--tinta);
}

/* Agrupa os botões do hero */
.heroi-acoes {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

/* Lista de selos do hero */
.heroi-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 34px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--tinta-2);
}

/* Marcador visual dos selos do hero */
.heroi-marcas li {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Desenha o marcador circular antes de cada selo */
.heroi-marcas li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--terracota);
    flex-shrink: 0;
}

/* Assinatura abaixo do retrato */
.heroi-assinatura {
    margin-top: 18px;
    text-align: center;
    font-family: var(--fonte-display);
    font-size: 1.25rem;
    color: var(--verde);
}

/* --------------------------------------------------------------------------
   RETRATO COM ANEL ORBITAL
   -------------------------------------------------------------------------- */

/* Posiciona o retrato circular */
.orbita {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1;
}

/* Corta o retrato no formato circular */
.orbita-moldura {
    position: absolute;
    inset: 0;
    overflow: clip;
    border-radius: 50%;
    background: var(--verde-neblina);
}

/* Ajusta o retrato dentro do círculo */
.orbita-moldura img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--curva);
}

/* Amplia levemente o retrato no estado de foco do mouse */
.orbita:hover .orbita-moldura img {
    transform: scale(1.04);
}

/* Versão menor do retrato */
.orbita--pequena {
    max-width: 400px;
    margin: 0;
}

/* Anel decorativo ao redor do retrato */
.orbita-anel {
    position: absolute;
    left: -6%;
    top: -6%;
    width: 112%;
    height: 112%;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

/* Define a origem da transformação dos elementos do anel */
.orbita-anel * {
    transform-box: view-box;
    transform-origin: 112px 112px;
}

/* Circle fino do anel */
.anel-fino {
    fill: none;
    stroke: var(--terracota);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0.45;
}

/* Crescentes do anel */
.meia-lua {
    opacity: 0.95;
}

/* Estrela do anel */
.estrela {
    fill: var(--terracota);
    transform-box: fill-box;
    transform-origin: center;
}

/* Gira o conjunto de crescentes lentamente */
.anel-giro {
    animation: orbita-giro 90s linear infinite;
}

/* Gira a estrela em sentido contrário */
.anel-orbita {
    animation: orbita-giro 32s linear infinite;
}

/* Pisca a estrela suavemente */
.estrela {
    animation: orbita-brilho 3.4s ease-in-out infinite;
}

/* Animação de entrada do anel */
.orbita-anel {
    animation: orbita-entra 2.2s var(--curva) 0.3s both;
}

/* Animação de giro contínuo */
@keyframes orbita-giro {
    to {
        rotate: 360deg;
    }
}

/* Animação de brilho da estrela */
@keyframes orbita-brilho {
    0%,
    100% {
        scale: 0.72;
        opacity: 0.6;
    }
    50% {
        scale: 1.15;
        opacity: 1;
    }
}

/* Animação de entrada do anel */
@keyframes orbita-entra {
    from {
        opacity: 0;
        scale: 0.94;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

/* --------------------------------------------------------------------------
   ESTRUTURAS DE SEÇÃO
   -------------------------------------------------------------------------- */

/* Grade de duas colunas usada em várias seções */
.dupla {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 64px;
    align-items: start;
}

/* Inverte a ordem das colunas da dupla */
.dupla--invertida {
    grid-template-columns: 1.15fr 0.85fr;
}

/* Grade de três colunas */
.grade-tres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

/* Grade de quatro colunas */
.grade-quatro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

/* Cabeçalho de seção com título e ação à direita */
.cabecalho-secao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   FAIXA DE DESTAQUE COM FUNDO ESCURO
   -------------------------------------------------------------------------- */

/* Estilo da faixa de destaque */
.faixa {
    background: var(--verde);
    color: var(--areia);
    padding: 88px 0;
    position: relative;
    overflow: clip;
}

/* Título dentro da faixa */
.faixa h2 {
    color: var(--areia);
    max-width: 16ch;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
}

/* Texto dentro da faixa */
.faixa p {
    max-width: 54ch;
    margin: 22px 0 34px;
    color: #D5E2DB;
}

/* Link dentro da faixa */
.faixa .link {
    color: var(--areia);
}

/* --------------------------------------------------------------------------
   CHAMADA FINAL
   -------------------------------------------------------------------------- */

/* Bloco de chamada final antes do rodapé */
.chamada-final {
    padding: 96px 0 104px;
    text-align: center;
    position: relative;
    overflow: clip;
}

/* Anel decorativo da chamada final */
.chamada-anel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(560px, 90vw);
    aspect-ratio: 1;
    transform: translate(-50%, -58%);
    border-radius: 50%;
    border: 1px solid var(--linha);
    pointer-events: none;
}

/* Título da chamada final */
.chamada-final h2 {
    position: relative;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    max-width: 18ch;
    margin: 0 auto;
    text-wrap: balance;
}

/* Texto da chamada final */
.chamada-final p {
    position: relative;
    margin: 20px auto 34px;
    max-width: 44ch;
    color: var(--tinta-2);
}

/* Botão da chamada final */
.chamada-final .botao {
    position: relative;
}

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

/* Estilo do rodapé */
.rodape {
    background: var(--tinta);
    color: var(--areia);
    padding: 76px 0 36px;
    font-size: 0.98rem;
}

/* Organiza as colunas do rodapé */
.rodape-grade {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 1fr 1.1fr;
    gap: 48px;
}

/* Marca do rodapé */
.marca--rodape .marca-simbolo {
    color: var(--areia);
}

/* Nome da profissional no rodapé */
.marca--rodape .marca-texto strong {
    color: var(--areia);
}

/* Especialidade da profissional no rodapé */
.marca--rodape .marca-texto small {
    color: #A9BDB3;
}

/* Frase de apoio no rodapé */
.rodape-frase {
    margin-top: 20px;
    max-width: 32ch;
    line-height: 1.7;
    color: #C2D0C9;
}

/* Título das colunas do rodapé */
.rodape-titulo {
    font-family: var(--fonte-texto);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracota-claro);
    margin-bottom: 18px;
}

/* Lista de links do rodapé */
.rodape-lista {
    display: grid;
    gap: 10px;
}

/* Estilo dos links do rodapé */
.rodape-lista a {
    text-decoration: none;
    color: #D5E2DB;
    transition: color 0.3s var(--curva);
}

/* Destaca o link do rodapé no estado de foco do mouse */
.rodape-lista a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Caixa de orientação em caso de crise */
.caixa-crise {
    padding: 22px 24px;
    background: var(--verde-neblina);
    border: 1px solid var(--verde-medio);
    border-radius: var(--raio);
    color: var(--tinta);
}

/* Título da caixa de crise */
.caixa-crise .rodape-titulo {
    color: var(--verde);
}

/* Texto da caixa de crise */
.caixa-crise p {
    color: var(--tinta-2);
    line-height: 1.7;
}

/* Link da caixa de crise */
.caixa-crise a {
    color: var(--verde);
    text-underline-offset: 3px;
}

/* Rodapé legal */
.rodape-legal {
    margin-top: 60px;
    padding-top: 26px;
    border-top: 1px solid rgba(248, 244, 236, 0.16);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: #A9BDB3;
}

/* Link do rodapé legal */
.rodape-legal a {
    color: inherit;
    text-decoration: none;
}

/* Destaca o link do rodapé legal no estado de foco do mouse */
.rodape-legal a:hover {
    color: var(--areia);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   BARRA FLUTUANTE DE CONTATO (CELULAR)
   -------------------------------------------------------------------------- */

/* Esconde a barra flutuante no computador */
.barra-flutuante {
    display: none;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 50;
}

/* Sombra da barra flutuante */
.barra-flutuante .botao {
    width: 100%;
    padding: 18px;
    box-shadow: 0 0 0 2px var(--areia), 0 12px 30px rgba(34, 49, 43, 0.28);
}

/* --------------------------------------------------------------------------
   RESPONSIVO — LAYOUT
   -------------------------------------------------------------------------- */

/* Adapta o menu para telas médias */
@media (max-width: 1100px) {
    .cabecalho .botao-nav {
        display: none;
    }

    .botao-menu {
        display: block;
        position: relative;
        z-index: 2;
    }

    .marca {
        position: relative;
        z-index: 2;
    }

    .menu-folha {
        position: fixed;
        inset: var(--altura-cabecalho) 0 0;
        z-index: 1;
        padding: 26px 22px calc(28px + env(safe-area-inset-bottom));
        background: var(--areia);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.35s var(--curva), transform 0.45s var(--curva), visibility 0s linear 0.45s;
    }

    .menu-folha.aberto {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    .menu-lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-width: 460px;
        width: 100%;
        margin: 0 auto;
    }

    .menu-lista a {
        display: grid;
        place-items: center;
        min-height: 84px;
        padding: 14px 10px;
        border: 1px solid var(--linha);
        border-radius: var(--raio);
        background: rgba(255, 255, 255, 0.45);
        font-family: var(--fonte-display);
        font-size: 1.2rem;
        letter-spacing: 0;
        text-transform: none;
        text-align: center;
    }

    .menu-lista a::after {
        display: none;
    }

    .menu-lista a[aria-current='page'] {
        background: var(--verde-neblina);
        border-color: var(--verde-medio);
    }

    .menu-extras {
        display: grid;
        gap: 16px;
        margin: auto auto 0;
        padding-top: 26px;
        max-width: 460px;
        width: 100%;
        text-align: center;
    }

    .menu-redes {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .menu-redes a {
        padding: 10px 18px;
        border: 1px solid var(--linha);
        border-radius: var(--raio);
        text-decoration: none;
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    .menu-crisis {
        font-size: 0.86rem;
        line-height: 1.6;
        color: var(--tinta-2);
    }

    .menu-crisis a {
        color: var(--verde);
        text-underline-offset: 3px;
    }

    .menu-aberto {
        overflow: hidden;
    }
}

/* Adapta o hero e as grades para tablets */
@media (max-width: 960px) {
    .heroi {
        padding: 32px 0 56px;
    }

    .heroi-grade,
    .heroi--reverso .heroi-grade,
    .dupla,
    .dupla--invertida {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .orbita {
        max-width: 340px;
    }

    .grade-tres,
    .grade-quatro {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px;
    }

    .faixa {
        padding: 68px 0;
    }

    .chamada-final {
        padding: 72px 0 84px;
    }

    .rodape-grade {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* Centraliza oscontents e ajusta a barra flutuante no celular */
@media (max-width: 720px) {
    .heroi--solo .heroi-conteudo,
    .chamada-final .envolucro {
        text-align: center;
    }

    .heroi-acoes {
        justify-content: center;
    }

    .barra-flutuante {
        display: block;
    }

    .rodape-legal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .rodape-grade {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .rodape-lista {
        justify-items: center;
    }

    .rodape-marca {
        display: grid;
        justify-items: center;
    }

    .rodape-frase {
        margin-inline: auto;
    }

    .caixa-crise {
        text-align: center;
    }
}

/* Ajusta as grades para o celular */
@media (max-width: 520px) {
    .grade-tres,
    .grade-quatro {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* Pausa as animações contínuas quando o movimento é reduzido */
@media (prefers-reduced-motion: reduce) {
    .orbita-anel,
    .orbita-anel * {
        animation: none !important;
    }
}