/* =====================================
   BARBERPRO LANDING
   PREMIUM MOBILE DESIGN
===================================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



body{

    font-family:
    "Inter",
    Arial,
    sans-serif;

    background:
    linear-gradient(
        180deg,
        #111111,
        #050505
    );

    color:#ffffff;

    overflow-x:hidden;

}



p{

    color:#b7b7b7;

    line-height:1.7;

}



/* =========================
   HEADER
========================= */


header{

    padding:25px 20px;

    text-align:center;

    border-bottom:1px solid #222;

}



.logo{

    font-size:2rem;

    font-weight:900;

    letter-spacing:3px;

    color:#c9a227;

}





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


.hero{

    padding:70px 20px 50px;

    text-align:center;

}



.badge{

    display:inline-block;

    padding:8px 15px;

    border-radius:30px;

    background:#1c1c1c;

    border:1px solid #333;

    color:#c9a227;

    font-size:.85rem;

    margin-bottom:25px;

}



.hero h1{

    font-size:2.5rem;

    line-height:1.15;

    margin-bottom:20px;

}



.hero h1 span{

    color:#c9a227;

}



.hero p{

    max-width:430px;

    margin:auto;

    font-size:1rem;

}





/* =========================
   BOTONES
========================= */


.buttons{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:15px;

}



.btn-primary,
.btn-secondary{


    display:flex;

    justify-content:center;

    align-items:center;


    height:55px;

    border-radius:12px;


    text-decoration:none;

    font-weight:800;


    transition:.2s;


}



.btn-primary{


    background:#c9a227;

    color:#111;


}



.btn-secondary{


    background:#171717;

    color:white;

    border:1px solid #444;


}



.btn-primary:hover,
.btn-secondary:hover{

    transform:translateY(-2px);

}



/* =========================
   SECCIONES
========================= */


section:not(.hero){

    padding:50px 20px;

}



h2{

    text-align:center;

    font-size:1.8rem;

    margin-bottom:30px;

}





/* =========================
   CARDS
========================= */


.cards{


    display:grid;

    grid-template-columns:1fr;

    gap:18px;


}



.card{


    background:#141414;


    border:1px solid #292929;


    border-radius:18px;


    padding:25px 20px;


}



.card h3{


    margin-bottom:12px;

    font-size:1.15rem;


}



.card p{

    font-size:.95rem;

}





/* =========================
   ACCESO DEMO
========================= */


.access{


    text-align:center;


    background:#0c0c0c;


}



.access p{


    max-width:400px;

    margin:auto;


}





/* =========================
   FOOTER
========================= */


footer{


    text-align:center;

    padding:40px 20px;


    border-top:1px solid #222;


}



footer h3{


    color:#c9a227;

    margin-bottom:10px;


}





/* =========================
   TABLET
========================= */


@media(min-width:700px){


.hero{


    max-width:900px;

    margin:auto;


}



.buttons{


    flex-direction:row;

    justify-content:center;


}



.btn-primary,
.btn-secondary{


    width:220px;


}



.cards{


    max-width:900px;

    margin:auto;

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


}



}
/* =========================
   FORMULARIO PRUEBA
========================= */


.trial-form{

    max-width:420px;

    margin:30px auto 0;

    display:flex;

    flex-direction:column;

    gap:15px;

}



.trial-form input{


    width:100%;

    height:52px;

    padding:0 15px;


    background:#161616;

    border:1px solid #333;

    border-radius:12px;


    color:white;

    font-size:1rem;


}



.trial-form input::placeholder{

    color:#777;

}



.trial-form input:focus{

    outline:none;

    border-color:#c9a227;

}



.trial-form button{

    border:none;

    cursor:pointer;

    font-size:1rem;

}