/* ==========================================================================
   CONTATO - CSS exclusivo da página /contato/ (Contato.php)

   Carregado depois do css.css global (reset, topo, rodapé, .reveal, fontes).
   O cabeçalho azul da página (.cv-pg-topo e classes cv-pg-*) mora no css.css
   GLOBAL, porque é compartilhado com as outras páginas internas -- não
   redeclarar aqui.

   Estrutura desta página:
       .cv-fc-layout   grid de 2 colunas: aside (canais) + cartão do formulário
       .cv-fc-aside    coluna esquerda, canais diretos
       .cv-fc-card     cartão branco do formulário

   Os tokens abaixo concentram cores, raios e sombras: mexer no visual é
   mexer nos tokens, não em 40 regras espalhadas.
   ========================================================================== */

.cv-fc {
    --fc-azul: #062345;
    --fc-azul-claro: #0b294d;
    --fc-ouro: #d2aa4c;
    --fc-creme: #efe9d3;
    --fc-linha: #e3ddc8;
    --fc-linha-forte: #cfc7ab;
    --fc-texto: #37475c;
    --fc-suave: #7d8899;
    --fc-campo-bg: #fbfaf5;
    --fc-erro: #b00020;
    --fc-raio: 16px;
    --fc-raio-g: 22px;
    --fc-sombra: 0 24px 60px rgba(6, 35, 69, .09);

    padding: 74px 0 90px;
    background: #fff;
}

/* Aside mais estreito que o formulário: o cartão é o foco da página.

   align-items: stretch (padrão do grid, por isso não declarado) faz as duas
   colunas terem a MESMA altura -- com `start` o aside encolhia até o seu
   conteúdo e o rodapé dele parava no meio da página. É isso, somado ao
   `margin-top:auto` do .cv-fc-aside-rodape, que alinha o CRECI/redes com a
   base do cartão do formulário. */
.cv-fc-layout {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) 1.2fr;
    gap: clamp(32px, 4.4vw, 64px);
}

/* Coluna em flex para o rodapé poder ser empurrado para baixo. */
.cv-fc-aside {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Tipografia compartilhada (eyebrow + títulos das duas colunas)
   -------------------------------------------------------------------------- */

.cv-fc-eyebrow {
    margin: 0 0 10px;
    font: 400 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fc-ouro);
}

.cv-fc-aside-titulo,
.cv-fc-card-titulo {
    margin: 0 0 12px;
    font: 400 34px/40px 'Afterglow', Georgia, serif;
    color: var(--fc-azul-claro);
}

/* O <strong> do título não é negrito: é a palavra em dourado (padrão da casa). */
.cv-fc-aside-titulo strong,
.cv-fc-card-titulo strong {
    font-weight: 400;
    color: var(--fc-ouro);
}

.cv-fc-aside-lead,
.cv-fc-card-lead {
    margin: 0;
    font: 400 16px/26px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-suave);
}

/* ==========================================================================
   ASIDE - canais diretos
   ========================================================================== */

.cv-fc-aside-head {
    margin-bottom: 26px;
}

/* Sem margin-bottom: quem cria o espaco ate o rodape e o margin-top:auto do
   .cv-fc-aside-rodape. Somar os dois empurrava o rodape para baixo da base
   do cartao do formulario. */
.cv-fc-canais {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-fc-canal {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 19px;
    border: 1px solid var(--fc-linha);
    border-radius: var(--fc-raio);
    background: #fff;
    color: var(--fc-azul);
    transition: border-color .25s var(--cv-ease), transform .25s var(--cv-ease),
                box-shadow .25s var(--cv-ease);
}

/* Só os canais clicáveis reagem: os informativos são <div>. */
a.cv-fc-canal:hover {
    border-color: var(--fc-ouro);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(6, 35, 69, .10);
}

.cv-fc-canal--estatico {
    background: var(--fc-campo-bg);
}

/* --------------------------------------------------------------------------
   CARTAO DO WHATSAPP (ação principal da coluna)

   Não é um item da lista: é um cartão azul inteiro, para ter peso visual
   suficiente ao lado do cartão branco do formulário. O brilho dourado do
   ::before repete o tratamento do topo da página.
   -------------------------------------------------------------------------- */

.cv-fc-zap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 22px;
    border-radius: var(--fc-raio-g);
    background: linear-gradient(140deg, #0e3560 0%, #072a4f 48%, #051d3a 100%);
    color: #fff;
    overflow: hidden;
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease);
}

.cv-fc-zap::before {
    content: "";
    position: absolute;
    top: -110px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 170, 76, .30) 0%, rgba(210, 170, 76, 0) 70%);
    pointer-events: none;
}

.cv-fc-zap:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(6, 35, 69, .28);
}

/* O conteúdo precisa ficar acima do brilho do ::before. */
.cv-fc-zap > * {
    position: relative;
    z-index: 1;
}

/* Sobrou so o icone dentro dele (o selo foi removido), mas o wrapper fica:
   e ele que garante o respiro ate o titulo. */
.cv-fc-zap-topo {
    display: block;
    margin-bottom: 16px;
}

.cv-fc-zap-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--fc-ouro);
    color: var(--fc-azul);
}

.cv-fc-zap-ico svg.lucide {
    width: 20px;
    height: 20px;
}

.cv-fc-zap-titulo {
    font: 400 25px/30px 'Afterglow', Georgia, serif;
    color: #fff;
}

.cv-fc-zap-fone {
    margin-top: 3px;
    font: 400 16px/24px 'Aeonik', Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, .72);
}

.cv-fc-zap-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--fc-ouro);
    font: 400 14px/14px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-azul);
    transition: background .25s var(--cv-ease);
}

svg.cv-fc-zap-btn-ico {
    width: 16px;
    height: 16px;
    color: var(--fc-azul);
    transition: transform .25s var(--cv-ease);
}

.cv-fc-zap:hover .cv-fc-zap-btn-ico {
    transform: translateX(3px);
}

.cv-fc-canal-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--fc-azul);
    color: var(--fc-ouro);
}

.cv-fc-canal--estatico .cv-fc-canal-ico {
    background: #fff;
    border: 1px solid var(--fc-linha);
    color: var(--fc-azul);
}

/* ARMADILHA do css.css: a base "svg.lucide{fill:none;stroke:currentColor}"
   tem especificidade tipo+classe -- uma classe sozinha perderia o embate. */
.cv-fc-canal-ico svg.lucide {
    width: 19px;
    height: 19px;
}

.cv-fc-canal-corpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cv-fc-canal-label {
    font: 400 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fc-suave);
}

.cv-fc-canal-valor {
    font: 400 16px/22px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-azul-claro);
    word-break: break-word;
}

/* Seta indicando que o item leva para fora; desliza no hover do cartão. */
.cv-fc-canal-seta {
    margin-left: auto;
}

svg.cv-fc-canal-seta {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--fc-suave);
    transition: transform .25s var(--cv-ease), color .25s var(--cv-ease);
}

a.cv-fc-canal:hover svg.cv-fc-canal-seta {
    transform: translate(3px, -3px);
    color: var(--fc-ouro);
}

/* --------------------------------------------------------------------------
   Rodapé do aside: CRECI + redes
   -------------------------------------------------------------------------- */

/* margin-top:auto empurra o bloco para a BASE da coluna, alinhando o
   CRECI/redes com o limite inferior do cartao do formulario (ver a nota do
   .cv-fc-layout). */
.cv-fc-aside-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--fc-linha);
}

.cv-fc-social {
    display: flex;
    gap: 10px;
}

.cv-fc-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fc-linha);
    border-radius: 50%;
    color: var(--fc-azul);
    transition: background .25s var(--cv-ease), border-color .25s var(--cv-ease),
                color .25s var(--cv-ease), transform .25s var(--cv-ease);
}

.cv-fc-social a:hover {
    border-color: var(--fc-azul);
    background: var(--fc-azul);
    color: var(--fc-ouro);
    transform: translateY(-2px);
}

/* ==========================================================================
   CARTAO DO FORMULARIO
   ========================================================================== */

.cv-fc-card {
    position: relative;      /* ancora do .cv-fc-veu */
    padding: clamp(26px, 3.2vw, 44px);
    border: 1px solid var(--fc-linha);
    border-radius: var(--fc-raio-g);
    background: #fff;
    box-shadow: var(--fc-sombra);
}

/* ==========================================================================
   VEU DE ENVIO - cobre o cartao enquanto o fetch do PgContato acontece

   Por que sobre o CARTAO e nao a tela toda: o que ficou indisponivel foi o
   formulario, nao a pagina. Um veu de tela cheia impediria a pessoa de
   consultar os canais diretos (WhatsApp, e-mail) ao lado enquanto espera.

   O elemento nasce com o atributo `hidden` no HTML; o JS tira o hidden e,
   no quadro seguinte, poe .esta-enviando no cartao -- que e o que dispara a
   transicao de opacidade.
   ========================================================================== */

/* ARMADILHA: o `display: flex` abaixo VENCE o atributo `hidden` do HTML (que
   so vale `display: none` como estilo de user-agent, de especificidade zero).
   Sem a regra seguinte o veu ficaria visivel para sempre depois do primeiro
   envio. O css.css global NAO tem um `[hidden]{display:none}` -- por isso ela
   mora aqui. */
.cv-fc-veu[hidden] {
    display: none;
}

.cv-fc-veu {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fc-raio-g);
    background: rgba(255, 255, 255, .86);
    opacity: 0;
    transition: opacity .2s var(--cv-ease);

    /* -webkit- junto: sem ele o desfoque nao acontece no Safari. */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.cv-fc-card.esta-enviando .cv-fc-veu {
    opacity: 1;
}

/* Enquanto envia, o cartao inteiro para de responder ao mouse -- o veu ja
   cobre, mas isto impede tambem o clique que "atravessaria" pelas bordas. */
.cv-fc-card.esta-enviando .cv-fc-form {
    pointer-events: none;
}

.cv-fc-veu-caixa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px;
    border: 1px solid var(--fc-linha);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(6, 35, 69, .12);
}

.cv-fc-veu-txt {
    font: 700 15px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: #0b294d;
}

/* Anel girando: borda de 3px com um lado dourado. */
.cv-fc-veu-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(11, 41, 77, .14);
    border-top-color: #d2aa4c;
    border-radius: 50%;
    animation: cv-fc-girar .7s linear infinite;
}

@keyframes cv-fc-girar {
    to { transform: rotate(360deg); }
}

.cv-fc-card-head {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fc-linha);
}

/* Duas colunas: os campos curtos (e-mail e WhatsApp) dividem a linha e os
   campos --full ocupam a largura toda. */
.cv-fc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cv-fc-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cv-fc-campo--full {
    grid-column: 1 / -1;
}

.cv-fc-label {
    font: 400 14px/18px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-azul-claro);
}

/* O <i> marca o campo obrigatório -- dourado, sem itálico. */
.cv-fc-label i {
    font-style: normal;
    color: var(--fc-ouro);
}

.cv-fc-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--fc-linha);
    border-radius: 12px;
    background: var(--fc-campo-bg);
    font: 400 15px/22px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-azul);
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s var(--cv-ease), background .2s var(--cv-ease),
                box-shadow .2s var(--cv-ease);
}

.cv-fc-input::placeholder {
    color: #b3b3b3;
    opacity: 1;
}

.cv-fc-input:focus {
    border-color: var(--fc-ouro);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(210, 170, 76, .16);
}

.cv-fc-textarea {
    min-height: 132px;
    resize: vertical;
}

/* --------------------------------------------------------------------------
   Erro inline por campo
   Fica escondido até o JS marcar .has-erro no .cv-fc-campo -- assim a
   mensagem aparece junto do campo que falhou, e não só no toast.
   -------------------------------------------------------------------------- */

.cv-fc-erro {
    display: none;
    font: 400 13px/17px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-erro);
}

.cv-fc-campo.has-erro .cv-fc-input {
    border-color: var(--fc-erro);
    background: #fff7f7;
}

.cv-fc-campo.has-erro .cv-fc-erro {
    display: block;
}

.cv-fc-contador {
    align-self: flex-end;
    font: 400 12px/12px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--fc-suave);
}

/* --------------------------------------------------------------------------
   Rodapé do formulário: botão de envio
   -------------------------------------------------------------------------- */

.cv-fc-acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--fc-linha);
}

.cv-fc-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--fc-azul);
    font: 400 15px/15px 'Aeonik', Arial, Helvetica, sans-serif;
    letter-spacing: .02em;
    color: #fff;
    cursor: pointer;
    transition: background .25s var(--cv-ease), transform .25s var(--cv-ease),
                box-shadow .25s var(--cv-ease);
}

.cv-fc-btn:hover {
    background: var(--fc-azul-claro);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(6, 35, 69, .22);
}

svg.cv-fc-btn-ico {
    width: 17px;
    height: 17px;
    color: var(--fc-ouro);
    transition: transform .25s var(--cv-ease);
}

.cv-fc-btn:hover svg.cv-fc-btn-ico {
    transform: translateX(3px);
}

/* Estado de envio (o JS desabilita o botão enquanto posta). */
.cv-fc-btn:disabled {
    opacity: .55;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Honeypot

   Precisa existir no DOM e ser preenchível por bot, mas invisível para o
   humano. Por isso é tirado da tela, e NÃO display:none -- alguns bots
   ignoram campos com display:none justamente por saberem que são armadilha.
   -------------------------------------------------------------------------- */

.cv-fc-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

@media (max-width: 991px) {

    .cv-fc {
        padding: 56px 0 70px;
    }

    /* Uma coluna. No HTML o aside vem ANTES (para ficar à esquerda no
       desktop), mas no mobile o formulário é o conteúdo principal da
       página: o `order` inverte a pilha sem mexer na ordem do HTML --
       primeiro "Envie sua mensagem", depois "Canais diretos". */
    .cv-fc-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cv-fc-card {
        order: 1;
    }

    .cv-fc-aside {
        order: 2;
    }

    .cv-fc-aside-titulo,
    .cv-fc-card-titulo {
        font-size: 30px;
        line-height: 36px;
    }

}

@media (max-width: 767px) {

    .cv-fc {
        padding: 44px 0 56px;
    }

    /* Campos em uma coluna só. */
    .cv-fc-grid {
        grid-template-columns: 1fr;
    }

    /* 16px no input evita o zoom automático do iOS ao focar o campo. */
    .cv-fc-input {
        font-size: 16px;
    }

    .cv-fc-btn {
        justify-content: center;
        width: 100%;
    }

}

@media (max-width: 479px) {

    .cv-fc-aside-titulo,
    .cv-fc-card-titulo {
        font-size: 26px;
        line-height: 32px;
    }

    .cv-fc-canal {
        padding: 14px 15px;
        gap: 12px;
    }

    .cv-fc-aside-rodape {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

}