/*=========================================
            HERO CONTACTO
==========================================*/

.contact-hero{

    position:relative;

    height:680px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

/*==========================
        IMAGEM
===========================*/

.contact-hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}

/*==========================
        OVERLAY
===========================*/

.contact-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(7,28,50,.92) 0%,
        rgba(7,28,50,.85) 35%,
        rgba(7,28,50,.55) 65%,
        rgba(7,28,50,.15) 100%
    );

    z-index:2;

}

/*==========================
        CONTAINER
===========================*/

.contact-hero .container{

    position:relative;

    z-index:3;

    max-width:1320px;

    width:100%;

    margin:auto;

    padding:0 35px;

}

/*==========================
        TEXTO
===========================*/

.contact-hero-content{

    max-width:620px;

    margin-top:80px;

}

.hero-tag{

    color:#caa14d;

    font-family:'Manrope',sans-serif;

    font-size:16px;

    font-weight:700;
    
    letter-spacing:3px;

    text-transform:uppercase;

}

.hero-line{

    width:80px;

    height:3px;

    background:#caa14d;

    margin:22px 0;

}
/*=========================================
            TÍTULO
==========================================*/

.contact-hero-content h1{

    margin:0 0 22px;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    line-height:1.1;

    font-weight:600;

    color:#ffffff;

}

/*=========================================
            TEXTO
==========================================*/

.contact-hero-content p{

    margin:0;

    max-width:560px;

    font-family:'Manrope',sans-serif;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

}

/*=========================================
        RESPOSTA 24 HORAS
==========================================*/

.hero-response{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-top:40px;

    padding:14px 28px;

    border:2px solid #caa14d;

    border-radius:50px;

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

    backdrop-filter:blur(6px);

}

.hero-response i{

    font-size:18px;

    color:#caa14d;

}

.hero-response span{

    font-family:'Manrope',sans-serif;

    font-size:16px;

    color:#ffffff;

}

.hero-response strong{

    color:#caa14d;

}

/*=========================================
            ANIMAÇÃO
==========================================*/

.contact-hero-content{

    animation:heroFade .9s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
            CONTACTOS
==========================================*/

.contact-options{

    padding:90px 0;

    background:#f8f6f2;

}

.contact-options .container{

    max-width:1320px;

    margin:auto;

    padding:0 30px;

}

/*=========================================
            GRID
==========================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

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

.contact-card{

    background:#ffffff;

    border-radius:18px;

    padding:45px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);

}

/*=========================================
            ÍCONE
==========================================*/

.contact-icon{

    width:50px;

    height:50px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#071c32;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.contact-icon i{

    font-size:34px;

    color:#caa14d;

}

.contact-card:hover .contact-icon{

    background:#caa14d;

}

.contact-card:hover .contact-icon i{

    color:#071c32;

}

/*=========================================
            TÍTULO
==========================================*/

.contact-card h3{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:24px;

    font-weight:600;

    color:#071c32;

}

/*=========================================
            LINHA
==========================================*/

.gold-divider{

    width:55px;

    height:2px;

    background:#caa14d;

    margin:18px auto 30px;

}

/*=========================================
            CONTACTOS
==========================================*/

.contact-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-bottom:22px;

    font-family:'Manrope',sans-serif;

    font-size:16px;

    color:#4b5563;

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-item i{

    color:#caa14d;

    font-size:18px;

    width:22px;

    text-align:center;

}

.contact-item a{

    color:#4b5563;

    text-decoration:none;

    transition:.3s;

}

.contact-item a:hover{

    color:#caa14d;

}

/*=========================================
            FORMULÁRIO
==========================================*/

.contact-form-section{

    padding:90px 0;

    background:#f8f6f2;

}

.contact-form-section .container{

    max-width:1320px;

    margin:auto;

    padding:0 30px;

}

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

.contact-form-card{

    background:#ffffff;

    border-radius:20px;

    padding:50px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

}

/*=========================================
            ESQUERDA
==========================================*/

.form-left h2{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:40px;

    font-weight:600;

    color:#071c32;

}

.gold-divider-left{

    width:60px;

    height:2px;

    background:#caa14d;

    margin:18px 0 35px;

}

/*=========================================
            LABEL
==========================================*/

.form-left label{

    display:block;

    margin-bottom:8px;

    margin-top:20px;

    font-family:'Manrope',sans-serif;

    font-size:15px;

    font-weight:600;

    color:#071c32;

}

/*=========================================
            INPUTS
==========================================*/

.form-left input,
.form-left select,
.form-left textarea{

    width:100%;

    padding:14px 18px;

    border:1px solid #d9dee5;

    border-radius:10px;

    background:#fff;

    font-family:'Manrope',sans-serif;

    font-size:15px;

    color:#4b5563;

    transition:.3s;

}

.form-left textarea{

    resize:none;

}

.form-left input:focus,
.form-left select:focus,
.form-left textarea:focus{

    outline:none;

    border-color:#caa14d;

    box-shadow:0 0 0 4px rgba(202,161,77,.12);

}

/*=========================================
            BOTÕES
==========================================*/

.form-buttons{

    display:flex;

    justify-content:space-between;

    margin-top:35px;

}

.btn-next,
.btn-prev,
.btn-send{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-family:'Manrope',sans-serif;

    font-size:14px;

    font-weight:700;

    transition:.3s;

}

.btn-next{

    background:#071c32;

    color:#fff;

}

.btn-next:hover{

    background:#0d2c4a;

    gap:16px;

}

.btn-prev{

    background:#6b7280;

    color:#fff;

}

.btn-prev:hover{

    background:#4b5563;

}

.btn-send{

    background:#caa14d;

    color:#fff;

}

.btn-send:hover{

    background:#b78d39;

}

/*=========================================
            DIREITA
==========================================*/

.form-right{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:10px;

}

/*=========================================
            PASSOS
==========================================*/

.steps{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    width:100%;

}

.step{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:80px;

}

.step span{

    width:42px;

    height:42px;

    border-radius:50%;

    border:2px solid #c8ccd2;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:'Manrope',sans-serif;

    font-size:16px;

    font-weight:700;

    color:#6b7280;

    background:#fff;

}

.step.active span{

    background:#caa14d;

    border-color:#caa14d;

    color:#fff;

}

.step small{

    margin-top:12px;

    text-align:center;

    font-family:'Manrope',sans-serif;

    font-size:13px;

    color:#6b7280;

    line-height:1.5;

}

.step.active small{

    color:#caa14d;

    font-weight:700;

}

.step-line{

    flex:1;

    height:2px;

    background:#d9dee5;

    margin:20px 8px 0;

}
.form-step{

    display:none;

    animation:fade .35s ease;

}

.form-step.active{

    display:block;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.alert-success{

    background:#e8f7ee;

    color:#166534;

    border:1px solid #b7e4c7;

    padding:18px 22px;

    border-radius:10px;

    margin-bottom:30px;

    font-family:'Manrope',sans-serif;

    font-weight:600;

}

/*==================================================
        HERO CONTACTO MOBILE (768px)
==================================================*/

@media (max-width:768px){

/*=========================================
                HERO
=========================================*/

.contact-hero{

    position:relative;

    height:380px;

    overflow:hidden;

    display:flex;

    align-items:flex-end;

}

/*=========================================
                IMAGEM
=========================================*/

.contact-hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:72% center;

    z-index:1;

}

/*=========================================
                OVERLAY
=========================================*/

.contact-hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:linear-gradient(
        90deg,
        rgba(7,28,50,.90) 0%,
        rgba(7,28,50,.80) 35%,
        rgba(7,28,50,.45) 70%,
        rgba(7,28,50,.15) 100%
    );

}

/*=========================================
                CONTAINER
=========================================*/

.contact-hero .container{

    position:relative;

    z-index:3;

    width:90%;

    margin:auto;

    padding:0 0 24px;

}

/*=========================================
                TEXTO
=========================================*/

.contact-hero-content{

    max-width:250px;

    margin:0;

}

/*=========================================
                TAG
=========================================*/

.hero-tag{

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
    margin-top:70px;

}

/*=========================================
                LINHA
=========================================*/

.hero-line{

    width:38px;

    height:2px;

    margin:10px 0 14px;

}

/*=========================================
                TÍTULO
=========================================*/

.contact-hero-content h1{

    margin:0 0 12px;

    font-size:21px;

    line-height:1.2;

    font-weight:600;

}

/*=========================================
                TEXTO
=========================================*/

.contact-hero-content p{

    margin:0;

    max-width:250px;

    font-size:12px;

    line-height:1.7;

}

/*=========================================
            RESPOSTA 24 HORAS
=========================================*/

.hero-response{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

    padding:10px 14px;

    border-radius:8px;

}

.hero-response i{

    font-size:14px;

}

.hero-response span{

    font-size:11px;

    line-height:1.5;

}

}

/*==================================================
        CONTACT OPTIONS MOBILE (768px)
==================================================*/

@media (max-width:768px){

.contact-options{

    padding:38px 0;

}

.contact-options .container{

    width:96%;

    margin:auto;

}

/*=========================================
            GRID
=========================================*/

.contact-grid{

    display:flex;

    flex-direction:column;

    gap:16px;

}

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

.contact-card{

    width:100%;

    padding:24px 20px;

    border-radius:12px;

    box-sizing:border-box;

    text-align:left;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

/*=========================================
            ÍCONE
=========================================*/

.contact-icon{

    width:46px;

    height:46px;

    margin:0 0 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

}

.contact-icon i{

    font-size:18px;

}

/*=========================================
            TÍTULO
=========================================*/

.contact-card h3{

    margin:0;

    font-size:19px;

    line-height:1.3;

}

.gold-divider{

    width:42px;

    margin:14px 0 18px;

}

/*=========================================
            ITEMS
=========================================*/

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-item i{

    width:18px;

    margin-top:3px;

    font-size:15px;

    flex-shrink:0;

}

/*=========================================
            LINKS
=========================================*/

.contact-item a,

.contact-item span{

    font-size:13px;

    line-height:1.75;

    word-break:break-word;

}

/*=========================================
        TELEFONES
=========================================*/

.contact-item span{

    display:block;

}

}

/*==================================================
        FORMULÁRIO CONTACTO MOBILE (768px)
==================================================*/

@media (max-width:768px){

/*=========================================
            SECÇÃO
=========================================*/

.contact-form-section{

    padding:40px 0 55px;

}

.contact-form-section .container{

    width:100%;

    max-width:none;

    padding:0 10px;

    margin:0 auto;

}

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

.contact-form-card{

    display:block;

    width:100%;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

}

/*=========================================
            FORMULÁRIO
=========================================*/

.form-left{

    width:100%;

    padding:24px 18px;

    box-sizing:border-box;

}

.form-left h2{

    font-size:22px;

    line-height:1.3;

    margin-bottom:12px;

}

.gold-divider-left{

    width:42px;

    margin-bottom:22px;

}

/*=========================================
            LABEL
=========================================*/

.form-left label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:700;

    color:#071c32;

}

/*=========================================
            INPUTS
=========================================*/

.form-left input,

.form-left select,

.form-left textarea{

    width:100%;

    box-sizing:border-box;

    border-radius:8px;

    border:1px solid #d8dde3;

    background:#fff;

    padding:14px 15px;

    font-family:'Manrope',sans-serif;

    font-size:16px;      /* evita zoom */

    line-height:1.4;

    color:#071c32;

    appearance:none;

    -webkit-appearance:none;

    margin-bottom:18px;

}

.form-left input{

    height:50px;

}

.form-left select{

    height:50px;

}

.form-left textarea{

    min-height:150px;

    resize:vertical;

}

/*=========================================
            PLACEHOLDER
=========================================*/

.form-left input::placeholder,

.form-left textarea::placeholder{

    font-size:15px;

    color:#8b95a1;

}

/*=========================================
            CHECKBOX
=========================================*/

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:16px 0 22px;

}

.checkbox input{

    width:20px;

    height:20px;

    margin:2px 0 0;

    flex-shrink:0;

}

.checkbox span{

    font-size:13px;

    line-height:1.7;

}

/*=========================================
            BOTÕES
=========================================*/

.form-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:8px;

}

.btn-next,

.btn-prev,

.btn-send{

    width:100%;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:700;

}

/*=========================================
            STEPS
=========================================*/

.form-right{

    width:100%;

    padding:22px 18px;

    border-top:1px solid rgba(0,0,0,.08);

}

.steps{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:6px;

}

.step{

    flex:1;

    text-align:center;

}

.step span{

    width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:13px;

}

.step small{

    display:block;

    margin-top:8px;

    font-size:10px;

    line-height:1.35;

}

.step-line{

    flex:1;

    margin-top:17px;

}

}
/* Remove o destaque azul ao tocar */

input,
textarea,
select{

    -webkit-tap-highlight-color:transparent;

}

/* Mantém o tamanho correto no iPhone */

html{

    -webkit-text-size-adjust:100%;

}