/* ============================================================================
   Anthares 44 — CONTACT (contact.html)
   Baseado NA LINGUAGEM VISUAL de Referencia.webp (mesmo layout do reference.html):
   painel claro sobre fundo cinza, 2 colunas — esquerda "hero" (badge + título
   extrabold com seta laranja + subtítulo + botões + estrelas/avatares) e direita
   um "feed" de cards com bordas arredondadas, sombra suave e topo/base esmaecidos.
   O conteúdo é de Contato (canais + formulário). Escopo exclusivo .cx*.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

.cx {
    --cx-panel:  #f7f7f7;
    --cx-card:   #ffffff;
    --cx-ink:    #0a0a0a;
    --cx-muted:  #7b7b7b;
    --cx-faint:  #9a9a9a;
    --cx-dur:    #b6b6b6;
    --cx-orange: #fb5333;
    --cx-gold:   #fbb900;
    --cx-green:  #7ed561;

    /* base inferior reduzida ~40% (56→34 / 104→62) p/ aproximar o rodapé — responsivo via clamp */
    padding: clamp(120px, 15vh, 178px) clamp(16px, 3.4vw, 46px) clamp(34px, 4.8vh, 62px);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    color: var(--cx-ink);
    background: var(--page-background);          /* mesmo fundo do Hero da Home */
    box-sizing: border-box;
}
.cx-wrap { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 3.2vw, 44px); }

/* Aproxima o rodapé APENAS nesta página (não altera o rodapé compartilhado nem
   outras páginas): reduz ~40% a margem superior do footer (70 → 42px). */
.cx + .a44f { margin-top: 42px; }

/* ============================ PAINEL (referência) ======================= */
/* Sem card externo: apenas o grid de 2 colunas direto no fundo da página
   (sem fundo/borda/raio/sombra/padding do container). */
.cx-panel {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(30px, 4.4vw, 72px);
    align-items: start;                         /* colunas ancoradas no topo → a esquerda não se move quando o FAQ expande */
}

/* --------------------------------- esquerda --------------------------- */
.cx-left { min-width: 0; align-self: start; }   /* painel esquerdo fixo (não recentraliza) */
/* (badge "CONTACT" — ponto + texto + pílula — removido) */

.cx-title {
    margin-top: clamp(16px,2.2vw,26px);
    font-size: clamp(1.8rem,4.5vw,3.4rem); font-weight: 800; line-height: 1.0; letter-spacing: -.022em;
    color: var(--cx-ink); white-space: nowrap;
}
/* Mark Anthares como acento inline no título: mesmo mark oficial
   (anthares-logo.png) — PNG transparente, sem caixa/fundo, proporção natural
   preservada via object-fit:contain (nunca cortado, esticado ou ampliado). */
.cx-title .cx-accent {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: 0.68em;               /* recorte justo (553×270): a altura define o peso, a largura segue a proporção */
    padding: 0;
    box-sizing: border-box;
    /* PNG transparente: sem tile, borda ou sombra por trás da marca */
    vertical-align: -0.19em;                    /* assenta na baseline, como um glifo (centrado nas maiúsculas) */
    /* margens verticais negativas neutralizam o crescimento na altura da linha →
       o espaçamento do título NÃO muda; só o ícone fica maior. */
    margin: -0.23em .1em;
    transform: translateY(-0.17em);             /* sobe ~9px p/ centrar opticamente com as maiúsculas (só visual) */
}
.cx-title .cx-accent img {
    display: block; width: auto; height: 100%;
    object-fit: contain;                        /* logo completo, proporção preservada, sem zoom */
    -webkit-user-select: none; user-select: none; pointer-events: none;
}

.cx-sub { margin-top: clamp(14px,1.7vw,22px); max-width: 40ch; font-size: clamp(12.5px,1.05vw,15px); line-height: 1.5; color: var(--cx-muted); }

.cx-actions { display: flex; align-items: flex-start; gap: clamp(26px,3vw,52px); margin-top: clamp(20px,2.6vw,32px); flex-wrap: wrap; }
/* Blocos de contato premium: rótulo (contexto) + e-mail (ação) + descrição (secundária).
   O bloco inteiro é clicável; o e-mail continua em negrito e sublinhado, com um
   sublinhado animado no hover. Mesmo ritmo de espaçamento do restante do hero. */
.cx-mail {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px;
    max-width: 15rem;
    text-decoration: none; cursor: pointer;
}
.cx-mail-label {                                /* rótulo curto em maiúsculas (mesmo estilo dos rótulos do feed) */
    font-size: clamp(9.5px,.85vw,11px); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: #7f7f7f;  /* cinza sutil */
    transition: color .25s ease;
}
.cx-mail-addr {                                 /* e-mail: negrito + sublinhado (sempre visível) */
    position: relative; align-self: flex-start;
    color: var(--cx-ink); font-size: clamp(14px,1.1vw,16px); font-weight: 700;
    letter-spacing: -.01em; line-height: 1.2;
    border-bottom: 1px solid rgba(10,10,10,.24); padding-bottom: 2px;
    transition: color .25s ease, border-color .25s ease;
}
.cx-mail-addr::after {                          /* sublinhado que "entra" da esquerda no hover */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.cx-mail-desc {                                 /* descrição secundária, sutil */
    max-width: 30ch; font-size: clamp(11px,.9vw,12.5px); line-height: 1.45;
    font-weight: 400; color: var(--cx-faint);
}
.cx-mail:hover .cx-mail-addr { color: #000; border-bottom-color: rgba(10,10,10,.5); }
.cx-mail:hover .cx-mail-addr::after { transform: scaleX(1); }
.cx-mail:hover .cx-mail-label { color: var(--cx-muted); }
.cx-mail:focus-visible { outline: 2px solid rgba(10,10,10,.35); outline-offset: 4px; border-radius: 6px; }

/* (bloco de testemunho — estrelas + avatares — removido) */
/* .cx-c1..c6 permanecem: usados pelos ícones dos cards do feed à direita. */
.cx-c1 { background: linear-gradient(145deg,#949daa,#626b78); }
.cx-c2 { background: linear-gradient(145deg,#dd8874,#bb5842); }
.cx-c3 { background: linear-gradient(145deg,#3d434b,#23272e); }
.cx-c4 { background: linear-gradient(145deg,#d59a80,#b06848); }
.cx-c5 { background: linear-gradient(145deg,#b8a081,#8c6f4e); }
.cx-c6 { background: linear-gradient(145deg,#808a9c,#545d6e); }

/* --------------------------------- direita (feed) --------------------- */
.cx-right { min-width: 0; align-self: start; display: flex; }
/* Feed estático (sem rolagem automática nem recorte) para funcionar como FAQ —
   os cards continuam idênticos; apenas a lista deixa de rolar/clipar. */
.cx-feed { position: relative; width: 100%; }
.cx-track { display: flex; flex-direction: column; gap: clamp(7px,.8vw,11px); }

.cx-day { display: flex; align-items: baseline; justify-content: space-between; padding: clamp(9px,1vw,15px) 4px clamp(3px,.5vw,7px); }
.cx-day-d { font-size: clamp(9.5px,.85vw,11px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7f7f7f; }
.cx-day-m { font-size: clamp(9.5px,.85vw,11px); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--cx-faint); }

.cx-card {
    position: relative;                         /* contexto para o buffer de hover (::after) */
    display: flex; align-items: center; gap: clamp(9px,1vw,13px);
    background: var(--cx-card); border-radius: clamp(12px,1.4vw,17px);
    padding: clamp(9px,1vw,14px) clamp(11px,1.2vw,16px);
    box-shadow: 0 10px 22px -14px rgba(16,20,40,.18), 0 2px 5px -3px rgba(16,20,40,.1);
    text-decoration: none; color: inherit;
    pointer-events: auto;                       /* o card inteiro é o alvo do hover/clique */
    transition: transform .3s ease, box-shadow .3s ease;   /* suave, 300ms */
}
/* Os filhos NÃO interceptam o ponteiro → o hover pertence SEMPRE ao card pai,
   e nunca se perde ao passar sobre ícone, título, subtítulo ou espaço vazio. */
.cx-card * { pointer-events: none; }
/* Buffer invisível cobrindo a faixa do "lift" (translateY -2px): impede que o
   cursor caia no vão ao levantar o card → o hover não pisca na borda inferior.
   É conteúdo gerado do próprio card, então continua sendo o mesmo alvo de hover. */
.cx-card::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; }
.cx-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(16,20,40,.26); }
.cx-card-ic { flex: 0 0 auto; width: clamp(30px,3.1vw,40px); height: clamp(30px,3.1vw,40px); border-radius: 50%; display: grid; place-items: center; color: #fff; }
.cx-card-ic svg { width: 46%; height: 46%; display: block; }
.cx-card-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.cx-card-title { font-size: clamp(12px,1.05vw,14.5px); font-weight: 600; letter-spacing: -.01em; color: #141414; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-card-sub { margin-top: 2px; font-size: clamp(10.5px,.95vw,13px); color: var(--cx-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-dur { flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding-left: 10px; font-size: clamp(9.5px,.85vw,11.5px); font-weight: 500; color: var(--cx-dur); }

/* ---- FAQ: mesmo card, agora clicável; resposta abre logo abaixo ---- */
.cx-card { cursor: pointer; }                       /* card clicável (sem navegação) */
.cx-faq-card .cx-card-title { white-space: normal; overflow: visible; }   /* pergunta não é cortada */
.cx-dur { transition: transform .28s ease, color .28s ease; }             /* o "+" gira para "×" ao abrir */
.cx-faq-card.is-open .cx-dur { transform: rotate(45deg); color: #141414; }
/* animação suave (~280ms) da resposta, sem mudar o card */
.cx-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.cx-faq-card.is-open .cx-answer { grid-template-rows: 1fr; }
.cx-answer > div { overflow: hidden; }
.cx-answer p {
    margin: 0;
    padding: clamp(10px,1.1vw,13px) clamp(12px,1.3vw,17px) clamp(4px,.5vw,7px);
    font-size: clamp(12.5px,1vw,14px); line-height: 1.6; color: var(--cx-muted);
}

/* ========================= PAINEL 2 — FORMULÁRIO ======================= */
.cx-form-panel {
    background: var(--cx-panel);
    border-radius: clamp(22px,3vw,36px);
    padding: clamp(24px,3.4vw,48px) clamp(26px,3.6vw,52px);
    box-shadow: 0 50px 90px -50px rgba(16,20,40,.22), 0 12px 30px -18px rgba(16,20,40,.10);
    display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px,4vw,60px); align-items: start;
}
.cx-form-intro .cx-badge { margin-bottom: clamp(14px,1.6vw,20px); }
.cx-form-h { font-size: clamp(1.4rem,2.6vw,2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--cx-ink); }
.cx-form-p { margin-top: 12px; max-width: 34ch; font-size: clamp(13px,1.05vw,15px); line-height: 1.55; color: var(--cx-muted); }

.cx-card-form { background: var(--cx-card); border-radius: clamp(16px,1.8vw,22px); padding: clamp(20px,2.4vw,32px); box-shadow: 0 14px 30px -18px rgba(16,20,40,.16); }
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-field { margin-bottom: 14px; }
.cx-field label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 500; color: #374151; }
.cx-field input, .cx-field textarea {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: 11px 13px;
    font: inherit; font-size: 14.5px; color: #111; background: #fafafa; box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cx-field textarea { min-height: 112px; resize: vertical; }
.cx-field input::placeholder, .cx-field textarea::placeholder { color: #9aa0a6; }
.cx-field input:focus, .cx-field textarea:focus { outline: none; border-color: #111; background: #fff; box-shadow: 0 0 0 3px rgba(17,17,17,.06); }
.cx-send {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 12px 22px; border: 0; border-radius: 999px;
    background: linear-gradient(180deg,#2a2a2a,#0d0d0d); color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer;
    box-shadow: 0 16px 28px -12px rgba(10,10,10,.5); transition: transform .2s ease, box-shadow .2s ease;
}
.cx-send:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -14px rgba(10,10,10,.55); }
.cx-send svg { width: 15px; height: 15px; display: block; }
.cx-ok { display: none; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: #f3fae6; border: 1px solid #e2f2c2; color: #3f5a12; font-size: 13.5px; font-weight: 500; }
.cx-ok.is-on { display: block; }

/* =============================== ENTRADA =============================== */
.cx-anim { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.cx-in .cx-anim { opacity: 1; transform: none; }
.cx-in .cx-title { transition-delay: .06s; }
.cx-in .cx-sub { transition-delay: .12s; }
.cx-in .cx-actions { transition-delay: .18s; }
.cx-in .cx-right { transition-delay: .12s; }

/* =============================== RESPONSIVO ============================= */
@media (max-width: 860px) {
    .cx-panel, .cx-hero.cx-panel { aspect-ratio: auto; grid-template-columns: 1fr; gap: 30px; padding: 30px 26px; }
    .cx-right { align-self: auto; }
    .cx-title { font-size: clamp(2.2rem, 9vw, 3.2rem); white-space: normal; }  /* deixa quebrar no mobile / traduções longas */
    .cx-sub { max-width: 46ch; }
    .cx-form-panel { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 520px) {
    .cx-panel, .cx-form-panel { padding: 22px 18px; border-radius: 22px; }
    .cx-row { grid-template-columns: 1fr; }
    .cx-actions { flex-direction: column; gap: 18px; }   /* blocos de contato empilhados no mobile */
    .cx-mail { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    .cx-feed.cx-loop .cx-track { animation: none !important; }
}