/* =========================================================
   CONTACT — layout geral
========================================================= */

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    margin-top:28px;

}


/* Base compartilhada pelos dois cartões (info + formulário) */
.contact-card,
.form-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    border:1px solid rgba(69,172,171,.16);

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

/* Linha de destaque no topo de cada cartão */
.contact-card::before,
.form-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            #6e82ff,
            transparent
        );

    opacity:.5;

    transition:opacity .4s ease;

}

.contact-card:hover,
.form-card:hover{

    transform:translateY(-4px);

    border-color:rgba(69,172,171,.35);

    box-shadow:
        0 22px 48px rgba(0,0,0,.32),
        0 0 24px rgba(69,172,171,.14);

}

.contact-card:hover::before,
.form-card:hover::before{

    opacity:1;

}


/* =========================================================
   INFO CARD
========================================================= */

/* Rótulo superior (eyebrow) */
.contact-eyebrow{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    margin-bottom:16px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border:1px solid rgba(69,172,171,.28);

}

.contact-card h3{

    margin-bottom:14px;

    font-size:1.28rem;

    line-height:1.35;

    color:#fff;

}

.contact-card > p{

    color:var(--muted);

    line-height:1.7;

}


/* -------- Lista de canais / diferenciais -------- */

.contact-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin:24px 0;

    padding:0;

    list-style:none;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:14px;

}

/* Ícone em "chip" arredondado */
.contact-item__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:40px;

    height:40px;

    border-radius:12px;

    /* cor do ícone Lucide (stroke = currentColor) */
    color:var(--cyan);

    background:rgba(69,172,171,.10);

    border:1px solid rgba(69,172,171,.20);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}

.contact-item:hover .contact-item__icon{

    transform:translateY(-2px);

    background:rgba(69,172,171,.18);

    border-color:rgba(69,172,171,.38);

}

.contact-item__text{

    color:var(--text);

    font-size:.95rem;

    text-decoration:none;

    transition:color .3s ease;

}

/* Realce apenas quando o texto é um link (e-mail) */
a.contact-item__text:hover{

    color:var(--cyan);

}


/* -------- Selo de confiança "online" -------- */

.contact-trust{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    padding:9px 16px;

    border-radius:999px;

    font-size:.85rem;

    color:var(--text);

    background:rgba(91,255,138,.06);

    border:1px solid rgba(91,255,138,.20);

}

.contact-trust__pulse{

    position:relative;

    width:9px;

    height:9px;

    border-radius:50%;

    background:#5BFF8A;

    box-shadow:0 0 10px rgba(91,255,138,.6);

}

/* Anel pulsante ao redor do ponto verde */
.contact-trust__pulse::after{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:2px solid rgba(91,255,138,.5);

    animation:trustPulse 2s ease-out infinite;

}


/* -------- Redes sociais -------- */

.socials{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.socials a{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:9px 16px;

    border-radius:999px;

    text-decoration:none;

    font-size:.9rem;

    font-weight:500;

    color:var(--text);

    border:1px solid rgba(69,172,171,.25);

    background:rgba(255,255,255,.03);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.socials a svg{

    width:18px;

    height:18px;

    color:var(--cyan);

    transition:color .3s ease;

}

.socials a:hover{

    transform:translateY(-2px);

    background:rgba(69,172,171,.14);

    border-color:rgba(69,172,171,.45);

    box-shadow:0 8px 20px rgba(69,172,171,.20);

}

.socials a:hover svg{

    color:#fff;

}


/* =========================================================
   FORM CARD
========================================================= */

/* Cabeçalho do formulário (título + selo) */
.form-card__head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:8px;

}

.form-card h3{

    font-size:1.28rem;

    color:#fff;

}

/* Selo "resposta rápida" */
.form-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    white-space:nowrap;

    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border:1px solid rgba(69,172,171,.26);

}

.form-card > p{

    margin-bottom:24px;

    color:var(--muted);

}

.form-card form{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* -------- Campos com ícone -------- */

.field{

    position:relative;

}

/* Ícone posicionado à esquerda do campo */
.field__icon{

    position:absolute;

    top:15px;
    left:16px;

    display:flex;

    color:var(--muted);

    pointer-events:none;

    transition:color .3s ease;

}

.field__icon svg{

    width:18px;

    height:18px;

}

/* Ícone acompanha o foco do campo */
.field:focus-within .field__icon{

    color:var(--cyan);

}

.form-card input,
.form-card textarea{

    width:100%;

    /* espaço à esquerda para o ícone */
    padding:14px 18px 14px 46px;

    border-radius:var(--radius-sm);

    border:1px solid rgba(255,255,255,.14);

    background:rgba(255,255,255,.04);

    color:var(--text);

    font-family:inherit;

    font-size:.95rem;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.form-card textarea{

    min-height:150px;

    resize:vertical;

}

.form-card input::placeholder,
.form-card textarea::placeholder{

    color:var(--muted);

}

/* Estado de foco com anel suave em ciano */
.form-card input:focus,
.form-card textarea:focus{

    outline:none;

    border-color:rgba(69,172,171,.55);

    background:rgba(255,255,255,.06);

    box-shadow:0 0 0 3px rgba(69,172,171,.16);

}


/* -------- Botão de envio (CTA) -------- */

.form-submit{

    position:relative;

    align-self:stretch;

    width:100%;

    margin-top:4px;

    padding:15px 22px;

    overflow:hidden;

    font-size:1rem;

}

.form-submit svg{

    width:18px;

    height:18px;

    transition:transform .3s ease;

}

.form-submit:hover svg{

    transform:translateX(4px);

}

/* Brilho que desliza no hover */
.form-submit::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;

    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transform:skewX(-20deg);

    transition:left .6s ease;

}

.form-submit:hover::after{

    left:130%;

}


/* -------- Nota de privacidade -------- */

.form-note{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:2px;

    font-size:.82rem;

    color:var(--muted);

}

/* impede que o ícone de cadeado encolha ao lado do texto */
.form-note svg{

    flex-shrink:0;

}


/* =========================================================
   ANTI-SPAM
========================================================= */

.field-honeypot{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;

}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}


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

@media(max-width:600px){

    .contact-card,
    .form-card{

        padding:24px;

    }

    .form-card__head{

        flex-direction:column;

        align-items:flex-start;

    }

}


/* Respeita usuários que preferem menos animação */
@media(prefers-reduced-motion:reduce){

    .contact-trust__pulse::after{

        animation:none;

    }

}