/* ===== Conteúdo de página institucional (Sobre) ===== */
.conteudo-pagina{
    max-width: 800px;
    margin: 0 auto;
}
.conteudo-pagina h2, .conteudo-pagina h3{
    margin-top: var(--espaco-lg);
}
.conteudo-pagina ul, .conteudo-pagina ol{
    margin: 0 0 var(--espaco-md) var(--espaco-lg);
    list-style: disc;
}

/* ===== Página Sobre: introdução texto + foto lado a lado =====
   Corrige o achado do Retalhador (bloco de parágrafos soltos, coluna
   estreita, vazio enorme dos lados no desktop, sem nenhuma imagem). */
.sobre-intro{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--espaco-2xl);
    align-items: center;
    margin-bottom: var(--espaco-2xl);
}
@media (max-width: 767px){
    .sobre-intro{
        grid-template-columns: 1fr;
        gap: var(--espaco-lg);
    }
}
.sobre-intro__foto img{
    width: 100%;
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    display: block;
}
/* Dentro do grid a introdução não precisa do teto de largura nem da
   centralização de .conteudo-pagina: a coluna já limita a largura. */
.sobre-intro__texto.conteudo-pagina{
    max-width: none;
    margin: 0;
}

/* ===== Carrossel de Missão / Visão / Valores (07/08/2026, 11a passada) =====
   Substitui de vez a grade de 3 cartões planos (Ricardo ao vivo: "está
   feio... vamos ter que colocar mais profundidade nisso aí"). Mecanismo
   real de carrossel (escolha explícita do Ricardo entre 3 opções: "um de
   cada vez", não só efeito de profundidade estático): 1 pilar em foco por
   vez, foto real de apoio, setas + pontos pra trocar. Usado tanto na
   página Sobre quanto na Home (inc/partials/pilares-carousel.php), sempre
   com o mesmo texto real (nunca duplicado/hardcoded). */
.pilares-carousel-secao{
    position: relative;
    overflow: hidden;
}
.pilares-carousel-secao::before{
    content: '';
    position: absolute;
    top: -10%;
    left: 15%;
    width: 60%;
    height: 120%;
    background:
        radial-gradient(circle at 30% 20%, rgba(156, 178, 154, 0.55), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(208, 138, 102, 0.4), transparent 55%);
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
}
.pilares-carousel{
    position: relative;
    z-index: 1;
}
.pilares-carousel__paineis{
    position: relative;
    min-height: 460px;
}
.pilares-carousel__painel{
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--espaco-2xl);
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.pilares-carousel__painel.is-ativo{
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.pilares-carousel__foto{
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-lg);
    border: 1px solid var(--vidro-borda-clara);
    aspect-ratio: 4 / 5;
}
.pilares-carousel__foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prioriza o topo (rosto/cabeça) se a caixa 4:5 precisar cortar altura
       de uma foto com proporção diferente — mais seguro que "center"
       (default) pra retrato, evita repetir o corte feio já corrigido uma
       vez (ver comentário no pilares-carousel.php). */
    object-position: top center;
    display: block;
}
.pilares-carousel__icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--raio-pill);
    background: var(--cor-mata);
    color: var(--cor-branco);
    margin-bottom: var(--espaco-md);
}
.pilares-carousel__icone svg{
    width: 24px;
    height: 24px;
}
.pilares-carousel__conteudo h3{
    font-family: var(--fonte-display);
    font-size: var(--texto-3xl);
    color: var(--cor-mata);
    line-height: 1.1;
    margin-bottom: var(--espaco-md);
}
.pilares-carousel__texto.conteudo-pagina{
    max-width: none;
    margin: 0;
}
.pilares-carousel__texto p{
    font-size: var(--texto-md);
    color: var(--cor-cacau-70);
    margin: 0;
}
.pilares-carousel__texto ul{
    margin: 0;
    padding-left: var(--espaco-lg);
}
.pilares-carousel__texto li{
    font-size: var(--texto-md);
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-xs);
}
.pilares-carousel__controles{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-lg);
    margin-top: var(--espaco-xl);
}
.pilares-carousel__seta{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--raio-pill);
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    color: var(--cor-mata);
    font-size: var(--texto-xl);
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pilares-carousel__seta:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
    transform: scale(1.06);
}
.pilares-carousel__pontos{
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);
}
.pilares-carousel__ponto{
    width: 10px;
    height: 10px;
    border-radius: var(--raio-pill);
    background: var(--vidro-borda-clara);
    border: 1px solid var(--cor-salvia);
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pilares-carousel__ponto.is-ativo{
    background: var(--cor-mata);
    border-color: var(--cor-mata);
    transform: scale(1.2);
}
@media (max-width: 767px){
    .pilares-carousel__painel{
        grid-template-columns: 1fr;
    }
    .pilares-carousel__paineis{
        min-height: 620px;
    }
    .pilares-carousel__foto{
        aspect-ratio: 16 / 10;
    }
    .pilares-carousel__conteudo h3{
        font-size: var(--texto-2xl);
    }
}

/* ===== Bloco "Dedicação total à sua saúde" (Terapias/Vídeos) ===== */
.dedicacao-total__grade{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--espaco-2xl);
    align-items: center;
}
@media (max-width: 767px){
    .dedicacao-total__grade{
        grid-template-columns: 1fr;
    }
}
.dedicacao-total__foto img{
    border-radius: var(--raio-md);
    width: 100%;
}
.dedicacao-total__conteudo h3{
    margin-bottom: var(--espaco-md);
}
.dedicacao-total__video{
    position: relative;
    padding-top: 56.25%;
    margin-top: var(--espaco-lg);
    border-radius: var(--raio-md);
    overflow: hidden;
}
.dedicacao-total__video iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Achado real (reunião com o Dr. Luiz, 07/08/2026, ao vivo: "tem um
   espaçamento entre o doutor Luiz e o rodapé de dúvidas"): em Terapias e
   Vídeos, ".dedicacao-total" é sempre seguido direto pelo CTA de WhatsApp
   (inc/partials/whatsapp-cta.php), duas ".secao" empilhadas sem nenhuma
   sobreposição de padding — o espaço visível vira a SOMA do padding-bottom
   de uma com o padding-top da outra (medido ao vivo: 256px em 1920px,
   110px em mobile, exatamente o dobro do token --espaco-secao). Mesmo
   padrão de bug já corrigido antes entre .secao--terapias/.secao--avaliacoes,
   nunca aplicado neste par. Seletor de irmão adjacente (nunca uma classe
   em .secao genérico) porque o mesmo whatsapp-cta.php também é usado
   sozinho na página Sobre, sem ".dedicacao-total" antes — não pode herdar
   esse ajuste lá. */
.dedicacao-total + .secao{
    padding-top: 0;
}

/* ===== Cards de Terapias/Avaliações (07/08/2026, 9a passada) =====
   Substitui de vez o accordion que existia antes (Ricardo ao vivo: "aquele
   accordion lá embaixo que fica abrindo, ele não existe. Eu quero
   transformar todos aqueles itens ali em cards"). Nada mais expande/recolhe:
   cada terapia e cada avaliação é um card sempre aberto, todos do MESMO
   TAMANHO (pedido explícito, repetido duas vezes), só a cor do selo do
   ícone varia entre 3 tons da paleta pra dar variedade sem quebrar a
   identidade. Quantidade de cards = quantidade real de itens (10 + 4),
   nunca um número fixo/curado como a vitrine bento anterior tinha (essa
   vitrine com card herói de foto grande + 6 tiles foi removida por completo
   a pedido do Ricardo: "não precisa ter a cara do doutor Luís ali" /
   "não precisa ter esse cardizão grandão").
   Mesma técnica de glow ambiente + vidro já validada no resto do redesign,
   cobrindo a altura toda de cada grade (não só um canto). */
.terapias-cards{
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--espaco-md);
}
.terapias-cards::before{
    content: '';
    position: absolute;
    top: 0;
    left: -6%;
    width: 60%;
    height: 100%;
    background:
        radial-gradient(circle at 25% 15%, rgba(156, 178, 154, 0.65), transparent 55%),
        radial-gradient(circle at 75% 85%, rgba(208, 138, 102, 0.45), transparent 55%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.terapias-card{
    position: relative;
    z-index: 1;
    height: 300px;
    padding: var(--espaco-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-md);
    -webkit-backdrop-filter: var(--vidro-blur-md);
    border: 1px solid var(--vidro-borda-clara);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.terapias-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--sombra-md);
}
.terapias-card__icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--raio-pill);
    margin-bottom: var(--espaco-md);
    background: var(--cor-mata);
    color: var(--cor-branco);
}
.terapias-card:nth-child(3n+2) .terapias-card__icone{
    background: var(--cor-musgo);
}
.terapias-card:nth-child(3n+3) .terapias-card__icone{
    background: var(--cor-salvia);
    color: var(--cor-cacau);
}
.terapias-card__icone svg{
    width: 20px;
    height: 20px;
}
.terapias-card__titulo{
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    color: var(--cor-mata);
    margin-bottom: var(--espaco-xs);
}
.terapias-card__texto{
    font-size: var(--texto-sm);
    color: var(--cor-cacau-70);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
}
.terapias-card--cta{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--cor-mata), var(--cor-cacau));
    color: var(--cor-branco);
    text-decoration: none;
}
.terapias-card--cta .terapias-card__icone{
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    margin-bottom: 0;
}
.terapias-card--cta__topo{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.terapias-card--cta__seta{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-pill);
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    font-size: var(--texto-md);
    transition: transform 0.25s ease, background 0.25s ease;
}
.terapias-card--cta:hover .terapias-card--cta__seta{
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.28);
}
.terapias-card--cta h4{
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    line-height: 1.2;
}
.terapias-card--cta p{
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--texto-sm);
    margin-top: var(--espaco-2xs);
}

@media (max-width: 600px){
    .terapias-cards{
        grid-template-columns: 1fr;
    }
}

/* ===== "Ver mais" nos cards de Terapias/Avaliações (07/08/2026, 10a
   passada) — Ricardo ao vivo, vendo o texto cortado: "a gente tinha que
   ter algo tipo... eu aperto um botão e dá pra ver o bloco inteiro".
   Botão só aparece (via JS, main.js) nos cards onde o texto realmente foi
   cortado pelo line-clamp — não é o accordion de volta, o card nunca muda
   de tamanho, só abre este modal por cima com o texto completo. */
.terapias-card__vermais{
    display: none;
    align-self: flex-start;
    margin-top: var(--espaco-xs);
    padding: 0;
    background: none;
    border: none;
    color: var(--cor-mata);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.terapias-card__vermais:hover{
    color: var(--cor-terracota);
}
.terapias-card__vermais--visivel{
    display: inline-block;
}
.terapias-modal{
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--espaco-lg);
}
.terapias-modal.is-aberto{
    display: flex;
}
.terapias-modal__veu{
    position: absolute;
    inset: 0;
    background: var(--vidro-bg-escuro);
    backdrop-filter: var(--vidro-blur-md);
    -webkit-backdrop-filter: var(--vidro-blur-md);
}
.terapias-modal__caixa{
    position: relative;
    z-index: 1;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    padding: var(--espaco-2xl) var(--espaco-xl) var(--espaco-xl);
}
.terapias-modal__fechar{
    position: absolute;
    top: var(--espaco-md);
    right: var(--espaco-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-pill);
    background: var(--cor-linho);
    border: none;
    color: var(--cor-cacau);
    font-size: var(--texto-lg);
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}
.terapias-modal__fechar:hover{
    background: var(--cor-linho-2);
}
.terapias-modal__icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--raio-pill);
    background: var(--cor-mata);
    color: var(--cor-branco);
    margin-bottom: var(--espaco-md);
}
.terapias-modal__icone svg{
    width: 20px;
    height: 20px;
}
.terapias-modal__titulo{
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    color: var(--cor-mata);
    margin-bottom: var(--espaco-sm);
}
.terapias-modal__texto{
    font-size: var(--texto-md);
    color: var(--cor-cacau-70);
}

/* ===== Página Terapias: redução do vão entre a lista de Terapias e a de
   Avaliações (achado do Retalhador: 400px+ de espaço morto). As classes
   .secao--terapias / .secao--avaliacoes sobrescrevem, só nestas duas seções
   desta página, o padding-block genérico de .secao (definido em
   03-layout.css e usado no resto do site, que não é alterado). */
.secao--terapias{
    padding-bottom: var(--espaco-lg);
}
.secao--avaliacoes{
    background: var(--cor-linho-2);
    padding-top: 0;
}
.secao--avaliacoes .secao-titulo{
    margin-bottom: var(--espaco-lg);
}

/* ===== Grid de vídeos ===== */
.grade-videos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--espaco-xl);
}
.video-card__embed{
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--raio-md);
    overflow: hidden;
    margin-bottom: var(--espaco-sm);
}
.video-card__embed iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ===== Página Vídeos: facade de lazy load do YouTube (item 3 do handoff) =====
   Substitui o iframe por uma miniatura clicável (page-videos.php monta o
   HTML e troca pelo iframe real no clique via JS). Preenche o mesmo
   container que o iframe preenchia (.video-card__embed com padding-top
   56.25%, ou .dedicacao-total__video), por isso usa position absolute +
   inset 0 igual a regra de ".video-card__embed iframe" acima, sem
   depender de estar dentro de um seletor específico. */
.video-lazy{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    display: block;
    cursor: pointer;
    background: var(--cor-cacau);
}
.video-lazy__thumb{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-lazy__play{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: var(--raio-pill);
    background: var(--vidro-bg-escuro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    color: var(--cor-branco);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.video-lazy:hover .video-lazy__play{
    /* Integracao do diretor (24/07/2026, ajustada apos achado do validador
       D): o territorio de vidro pontual trocou o preenchimento base pra
       vidro, mas o hover ainda usava cor solida --cor-mata, o que tirava o
       efeito de vidro justamente ao passar o mouse. Primeira correcao usou
       verde mata mais opaco, mas isso trocava a matiz (a base e um tom
       terroso escuro, --vidro-bg-escuro, nao verde). Ajuste final: mesma
       matiz da base (rgb 20,15,10), so com alpha maior, pra ficar "mais
       intenso" sem trocar de cor nem virar 100% solido. */
    background: rgba(20, 15, 10, 0.75);
    transform: scale(1.08);
}
.video-lazy:focus-visible{
    outline: 2px solid var(--cor-mata);
    outline-offset: 2px;
}

/* ===== Página Fale Conosco ===== */
.pagina-contato{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-2xl);
}
@media (max-width: 900px){
    .pagina-contato{
        grid-template-columns: 1fr;
    }
}
.pagina-contato__info h6{
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--texto-sm);
    color: var(--cor-mata);
    margin: var(--espaco-lg) 0 var(--espaco-sm);
}
.pagina-contato__info ul li{
    margin-bottom: var(--espaco-xs);
}
.pagina-contato__info .icone{ margin-right: var(--espaco-xs); }
.pagina-contato__redes{
    display: flex;
    gap: var(--espaco-sm);
}
.pagina-contato__redes a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cor-linho-2);
    color: var(--cor-mata);
}
.pagina-contato__redes a:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
}
.pagina-contato__form{
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    padding: var(--espaco-xl);
}
.pagina-contato__form .wpcf7-form-control-wrap{
    display: block;
    margin-bottom: var(--espaco-md);
}
.pagina-contato__form input.wpcf7-form-control,
.pagina-contato__form textarea.wpcf7-form-control{
    width: 100%;
}

/* ===== Página Fale Conosco: respiro mobile para o botão "Enviar" (item 1
   do handoff) ===== Achado do Retalhador (Fase 1): o WhatsApp flutuante
   (cta-whatsapp.css) cobre ~9x21px do canto do botão "Enviar" ao rolar até
   o fim do formulário em 390px. Correção só neste formulário, sem tocar em
   .whatsapp-flutuante (calibragem já ajustada com cuidado antes). Duas
   regras juntas, testadas ao vivo com rolagem real no ambiente de teste:

   1) padding-bottom no card do formulário: respiro visual na base, mesma
      matemática já usada em cta-whatsapp.css pro corpo da página inteira
      (botão 48px + 12px de respiro da borda + 40px de folga = 100px).

   2) scroll-margin-bottom no próprio botão "Enviar": é a regra que resolve
      de fato a sobreposição medida. O formulário tem bastante conteúdo
      depois dele na mesma página (informações de contato, redes sociais,
      rodapé), então o padding-bottom sozinho não empurra o botão pra cima
      quando o navegador rola até revelá-lo (testado e confirmado: o botão
      continuava na mesma posição, encostado no WhatsApp). scroll-margin-
      bottom reserva essa folga na hora de trazer o botão pra tela, seja
      por rolagem manual até revelá-lo, seja pelo comportamento nativo do
      navegador de rolar o campo focado pra cima do teclado (ex: ao tocar
      no campo Mensagem, o botão logo abaixo). Mesmo breakpoint de 900px
      usado em cta-whatsapp.css. */
@media (max-width: 900px){
    .pagina-contato__form{
        padding-bottom: 100px;
    }
    .pagina-contato__form .wpcf7-submit{
        scroll-margin-bottom: 100px;
    }
}

/* ===== Página Fale Conosco: formulário do Contact Form 7 (shortcode id 126)
   nunca tinha sido estilizado, renderizava com a aparência crua do
   navegador, destoando do resto do site. Estrutura real confirmada no
   template do formulário (post id 126, campo "_form" no banco de
   migração, sem editar nenhum arquivo de código pra isso): os campos
   "nome" e "email" usam [text*]/[email*] com class:form-control, o campo
   "telefone" também é [text*] (não [tel*]), "mensagem" é [textarea*], e
   só os rótulos de Nome e E-mail carregam a classe "label" no HTML,
   Telefone e Mensagem não. Por isso os seletores abaixo miram o elemento
   puro (label, input.wpcf7-form-control) em vez de depender de uma classe
   que nem sempre está presente. */

/* 1) Botão "Enviar": o CF7 renderiza [submit] como um <input type="submit">
   puro, que herda a aparência nativa do navegador/sistema operacional.
   Mesmo problema e mesma solução já documentados acima neste arquivo
   para os botões nativos do WooCommerce: appearance:none desliga o
   estilo nativo antes do fundo customizado poder aparecer. O tratamento
   visual copia .btn--primario de buttons.css (pílula, fundo --cor-mata,
   texto branco, hover --cor-musgo). width:auto sobrescreve de propósito
   a regra ".pagina-contato__form input.wpcf7-form-control{width:100%}"
   logo abaixo, porque o CF7 também aplica a classe wpcf7-form-control ao
   próprio botão de envio, não só aos campos de texto, e o padrão do site
   é botão do tamanho do texto, nunca esticado.

   Achado real de bug (validação ao vivo, 01/08/2026): o seletor original
   ".pagina-contato__form .wpcf7-submit" (2 classes) perdia em
   especificidade pra ".pagina-contato__form input.wpcf7-form-control"
   (1 classe + 1 elemento + 1 classe, mais específico), que vem DEPOIS no
   arquivo. Resultado: o botão saía branco com texto branco (invisível) em
   repouso, e só ficava visível no :hover (onde a especificidade da regra
   de hover, 3 classes, já vencia). Corrigido usando o seletor combinado
   "input.wpcf7-form-control.wpcf7-submit" (as duas classes que o próprio
   CF7 aplica ao botão), que fica mais específico que a regra genérica de
   campo sem precisar de !important. */
.pagina-contato__form input.wpcf7-form-control.wpcf7-submit{
    display: inline-block;
    width: auto;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--espaco-sm) var(--espaco-lg);
    border-radius: var(--raio-pill);
    border: 1.5px solid var(--cor-mata);
    background: var(--cor-mata);
    color: var(--cor-branco);
    transition: all 0.25s ease;
}
.pagina-contato__form input.wpcf7-form-control.wpcf7-submit:hover{
    background: var(--cor-musgo);
    border-color: var(--cor-musgo);
    color: var(--cor-branco);
}

/* 2) Rótulos: mira o elemento label puro, não a classe ".label", porque
   (ver nota acima) só Nome e E-mail carregam essa classe no HTML real.
   Token "Label" do DESIGN.md: uppercase, negrito (700), letter-spacing
   0.04em, cor --cor-cacau-70, tamanho --texto-xs. */
.pagina-contato__form label{
    display: block;
    font-family: var(--fonte-corpo);
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-2xs);
}

/* 3) Campos de texto e textarea: o padrão de borda/raio/fundo já existe
   globalmente em 02-base.css (input[type=text|email|tel...], textarea,
   select: borda --cor-cacau-70, --raio-sm, fundo branco, foco em
   --cor-mata), e os quatro campos deste formulário já herdam esse padrão
   automaticamente, já que nenhum CSS do próprio plugin CF7 (includes/css
   /styles.css) toca borda, raio ou fundo de campo algum. A regra abaixo
   só reforça o mesmo valor de forma escopada ao formulário, documentando
   o requisito aqui e protegendo contra qualquer CSS futuro do plugin ou
   de uma atualização do CF7 que ganhe mais especificidade sobre a classe
   wpcf7-form-control. */
.pagina-contato__form input.wpcf7-form-control,
.pagina-contato__form textarea.wpcf7-form-control{
    border: 1px solid var(--cor-cacau-70);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
}