:root{

    --azul:#001CA1;

    --rojo:#FF0612;

    --gris:#f5f7fa;

    --texto:#1f1f1f;

}



*{

    box-sizing:border-box;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

}



body{

    margin:0;

    background:#f0f2f5;

    color:var(--texto);

}



.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background: #001CA1;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}


/* Logo clickeable */
.logo a {
    display: flex;
    align-items: center;
}


.logo img {
    width: 180px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}


.logo img:hover {
    transform: scale(1.05);
}


/* Titulo */
.header-title {
    font-size: 28px;
    font-weight: bold;
    color: #1f2937;
}

/* CONTENEDOR */


.contenedor{

    min-height:
    calc(100vh - 140px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}



/* CARD */

.card{

    width:100%;

    max-width:650px;

    background:white;

    border-radius:12px;

    padding:35px;

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

}



.card h1{

    margin:0;

    text-align:center;

    color:var(--azul);

}



.descripcion{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}



/* CAMPOS */


.campo{

    margin-bottom:18px;

}



label{

    display:block;

    font-weight:600;

    margin-bottom:7px;

}



input,
textarea,
select{


    width:100%;

    padding:12px 14px;

    border:

    1px solid #d9d9d9;


    border-radius:8px;


    font-size:15px;


    transition:.3s;


    background:white;

}



textarea{

    height:90px;

    resize:none;

}



input:hover,
textarea:hover,
select:hover{

    border-color:var(--azul);

}



input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--azul);

    box-shadow:

    0 0 0 3px rgba(0,28,161,.15);

}



/* BOTON */


button{


    width:100%;

    height:45px;

    margin-top:15px;


    background:var(--azul);

    color:white;


    border:none;

    border-radius:8px;


    font-size:16px;

    font-weight:600;


    cursor:pointer;


    transition:.3s;


}



button:hover{


    background:var(--rojo);

}



/* FOOTER */


.footer{


    height:60px;

    background:#001CA1;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;


    font-size:14px;

}



/* RESPONSIVE */


@media(max-width:700px){


.header{

    padding:0 20px;

    flex-direction:column;

    justify-content:center;

}


.logo{

    font-size:18px;

}


.header-title{

    display:none;

}


.card{

    padding:25px;

}


}