/* =====================================================
   PÁGINA REVendedores
===================================================== */


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

.revendedor-hero{

    background:#111;

    color:#fff;

    padding:120px 0 80px;

    text-align:center;

}


.revendedor-hero h1{

    font-size:52px;

    line-height:1.2;

    margin-bottom:20px;

}


.revendedor-hero h1 span{

    color:#ff6b00;

}


.revendedor-hero p{

    max-width:650px;

    margin:auto;

    font-size:18px;

    color:#d8d8d8;

    line-height:1.8;

}



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


.form-revendedor{

    max-width:850px;

    margin:60px auto;

    background:#fff;

    padding:45px;

    border-radius:18px;

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

}



.form-revendedor h2{

    text-align:center;

    font-size:32px;

    margin-bottom:40px;

}



/* GRID DOS CAMPOS */

.form-grid{

    display:grid;

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

    gap:25px;

}



.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.form-group.full{

    grid-column:1/-1;

}




.form-group label{

    font-size:15px;

    font-weight:600;

}




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

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    font-family:inherit;

    outline:none;

    transition:.25s;

}



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

    border-color:#ff6b00;

}




.form-group textarea{

    height:130px;

    resize:none;

}





/* =====================================================
   BOTÃO FORMULÁRIO
===================================================== */


.btn-form{

    width:100%;

    margin-top:30px;

    padding:16px;

    background:#ff6b00;

    border:none;

    border-radius:12px;

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}



.btn-form:hover{

    background:#e85f00;

    transform:translateY(-3px);

}



/* =====================================================
   BENEFÍCIOS REVENDEDOR
===================================================== */


.revendedor-beneficios{

    background:#f8f8f8;

}



.beneficios-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}



.beneficio{

    background:white;

    padding:35px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    transition:.3s;

}



.beneficio:hover{

    transform:translateY(-8px);

}



.beneficio i{

    font-size:42px;

    color:#ff6b00;

    margin-bottom:20px;

}



.beneficio h3{

    margin-bottom:12px;

}



.beneficio p{

    color:#666;

    line-height:1.7;

}



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


@media(max-width:768px){


.revendedor-hero{

    padding:100px 0 60px;

}



.revendedor-hero h1{

    font-size:36px;

}



.revendedor-hero p{

    font-size:16px;

}



.form-revendedor{

    padding:25px;

    margin:40px auto;

}



.form-grid{

    grid-template-columns:1fr;

}



.form-group.full{

    grid-column:auto;

}



.form-revendedor h2{

    font-size:26px;

}


}