/* ==========================================================
   ASESOR DE COSTOS
   Alegre Cappa Arquitecto
   Hoja de estilos principal
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --color-principal:#222222;
    --color-secundario:#666666;
    --color-fondo:#F5F5F2;
    --color-blanco:#FFFFFF;

    --color-boton:#2F2F2F;
    --color-boton-hover:#000000;

    --sombra:0 10px 30px rgba(0,0,0,.10);

    --radio:12px;

}



/* ==========================================================
   GENERALES
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--color-fondo);

    font-family:Arial, Helvetica, sans-serif;

    color:var(--color-principal);

    line-height:1.6;

}



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

.hero{

    width:100%;

    padding:80px 20px;

    background:#FFFFFF;

    text-align:center;

    border-bottom:1px solid #E8E8E8;

}

.hero h1{

    font-family:'Italiana', serif;

    font-size:52px;

    font-weight:normal;

    margin-bottom:10px;

}

.hero h2{

    font-size:26px;

    font-weight:300;

    margin-bottom:25px;

}

.hero p{

    max-width:700px;

    margin:auto;

    color:var(--color-secundario);

}



/* ==========================================================
   CONTENEDOR
========================================================== */

.contenedor{

    width:100%;

    max-width:950px;

    margin:auto;

    padding:40px 20px;

}



/* ==========================================================
   TARJETA PRINCIPAL
========================================================== */

.card-calculadora{

    background:var(--color-blanco);

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    padding:40px;

}

.card-calculadora h3{

    text-align:center;

    margin-bottom:35px;

    font-weight:400;

}



/* ==========================================================
   CAMPOS
========================================================== */

.campo{

    margin-bottom:25px;

}

.campo label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

.campo input{

    width:100%;

    padding:14px;

    border:1px solid #D8D8D8;

    border-radius:8px;

    font-size:16px;

    transition:.25s;

}

.campo input:focus{

    outline:none;

    border-color:#777777;

}



/* ==========================================================
   BOTÓN
========================================================== */

button{

    width:100%;

    padding:16px;

    background:var(--color-boton);

    color:#FFFFFF;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:17px;

    transition:.25s;

}

button:hover{

    background:var(--color-boton-hover);

}



/* ==========================================================
   RESULTADOS
========================================================== */

.tarjeta{

    background:#FFFFFF;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    padding:30px;

    margin-bottom:25px;

}

.tarjeta h3{

    margin-bottom:15px;

    font-weight:400;

}

.valor{

    font-size:34px;

    font-weight:bold;

    margin-top:10px;

    margin-bottom:10px;

}



/* ==========================================================
   DISCLAIMER
========================================================== */

.disclaimer{

    background:#FFFFFF;

    padding:25px;

    border-left:5px solid #CCCCCC;

    border-radius:8px;

    color:#666666;

}



/* ==========================================================
   BOTÓN WHATSAPP
========================================================== */

.botonWhatsapp{

    display:block;

    width:100%;

    text-align:center;

    background:#25D366;

    color:#FFFFFF;

    text-decoration:none;

    padding:18px;

    border-radius:10px;

    font-size:18px;

    transition:.25s;

}

.botonWhatsapp:hover{

    background:#20BA5A;

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

.hero h1{

    font-size:40px;

}

.hero h2{

    font-size:22px;

}

.card-calculadora{

    padding:25px;

}

.valor{

    font-size:28px;

}

}