/* ============================================================
   CONTATO.CSS — Forte Isolantes Térmicos
   Supreme Glass DJW Ultra 2025 — Royal Blue Edition
   Desenvolvido por Djalma Junior
============================================================ */

/* ============================================================
   MARCA D'ÁGUA — Página Contato
   Corporate Supreme Glass Ultra 2025
============================================================ */

body.contato-page {
    position: relative;
    overflow-x: hidden;
}

body.contato-page::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Caminho ABSOLUTO FINAL */
    background: url('/assets/img/fort.png') no-repeat center center;
    background-size: 50%;

    opacity: 0.10;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* ============================================================
   HEADER PREMIUM SUPREME GLASS — CONTATO
============================================================ */
.contato-header-premium {
    padding: 90px 0 40px;
    background: linear-gradient(180deg, #013a7a, #275c9c);
    color: #fff;
    text-align: center;
    margin-bottom: 40px;

    box-shadow:
        inset 0 -18px 32px rgba(0,0,0,0.25),
        0 8px 22px rgba(0,0,0,0.22);
}

.contato-title {
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contato-subtitle {
    margin-top: 12px;
    font-size: 1.15rem;
    opacity: .90;
}

/* ============================================================
   CARD SUPREME GLASS — FORMULÁRIO
============================================================ */

.contato-card {
    background: rgba(255,255,255,0.60);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-radius: 26px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.45);

    box-shadow: 
        0 20px 60px rgba(0,0,0,0.18),
        inset 0 0 18px rgba(255,255,255,0.35);

    transition: .35s ease;
}

.contato-card:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 28px 65px rgba(0,0,0,0.22),
        inset 0 0 25px rgba(255,255,255,0.40);
}

/* ============================================================
   FORMULÁRIO — INPUT SUPREME
============================================================ */

.contato-input {
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);

    padding: 12px;
    font-size: 1.05rem;
    transition: .25s ease;
}

.contato-input:focus {
    background: rgba(255,255,255,1);
    border-color: #013a7a !important;

    box-shadow: 
        0 0 0 4px rgba(1,58,122,0.20),
        0 14px 24px rgba(0,0,0,0.12);
}

/* ============================================================
   BOTÃO ENVIAR — DJW ULTRA
============================================================ */

.btn-enviar {
    background: linear-gradient(90deg, #013a7a, #275c9c);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;

    padding: 14px;
    border-radius: 16px;
    border: none;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25);
    transition: .3s ease;
}

.btn-enviar:hover {
    background: linear-gradient(90deg, #01448d, #2f6db8);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}

/* ============================================================
   WHATSAPP SUPREME GLASS
============================================================ */

.btn-whats {
    background: rgba(37,211,102,0.90);
    color: #fff;
    border-radius: 16px;
    padding: 14px 30px;
    font-size: 1.15rem;
    font-weight: 700;

    backdrop-filter: blur(20px);
    box-shadow: 0 14px 35px rgba(0,0,0,0.20);

    transition: .3s ease;
}

.btn-whats:hover {
    background: rgba(37,211,102,1);
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.28);
}

.contato-card i, .btn-whats i {
    font-size: 1.25rem;
    margin-right: 8px;
}

/* ============================================================
   BLOCO DE CONTATO (TEXTOS)
============================================================ */

.contato-info p,
.contato-info a {
    font-size: 1.1rem;
    color: #013a7a;
}

.contato-info a:hover {
    color: #002a72;
}

/* ============================================================
   RESPONSIVIDADE
============================================================ */

@media (max-width: 768px) {
    .contato-card { padding: 28px; }

    .btn-whats {
        width: 100%;
        text-align: center;
    }
}