/* ==========================================================
   BIOSMARTEC FORM v2.1
   ========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:40px 20px;
    background:#f3f7fa;
    font-family:Arial,Helvetica,sans-serif;
    color:#2b3c4a;
    line-height:1.6;
}

.wrapper{

    max-width:1280px;

    margin:0 auto;

    display:grid;

    grid-template-columns:390px 1fr;

    gap:40px;

    align-items:start;

}

/* ==========================================================
   TARJETAS
   ========================================================== */

.left-panel,
.right-panel{

    background:#ffffff;

    border-radius:18px;

    padding:40px;

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

}

/* ==========================================================
   COLUMNA IZQUIERDA
   ========================================================== */

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:#e7f8fc;

    color:#00A3D8;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.left-panel h1{

    margin:0 0 20px;

    color:#12354B;

    font-size:36px;

    line-height:1.2;

}

.intro{

    color:#647786;

    font-size:16px;

    margin-bottom:35px;

}

.benefits{

    margin-bottom:35px;

}

.benefit{

    display:flex;

    gap:12px;

    align-items:flex-start;

    margin-bottom:18px;

    color:#405463;

}

.icon{

    color:#00A3D8;

    font-size:22px;

    font-weight:bold;

}

.contact-card{

    background:#f6fbfd;

    border-left:5px solid #00A3D8;

    border-radius:12px;

    padding:25px;

}

.contact-card h3{

    margin-top:0;

    color:#12354B;

}

.contact-card p{

    margin:12px 0;

}

.btn-whatsapp{

    display:inline-block;

    margin-top:20px;

    padding:14px 24px;

    border-radius:40px;

    background:#25D366;

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

}

.btn-whatsapp:hover{

    background:#1fa855;

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

.right-panel h2{

    margin:0 0 30px;

    color:#12354B;

    font-size:30px;

    font-weight:700;

}

.grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:25px;

}

.grid input,
.grid select{

    width:100%;

    height:56px;

    padding:0 18px;

    border:1px solid #d8e3eb;

    border-radius:10px;

    background:#ffffff;

    font-size:15px;

    color:#34495e;

    transition:.25s;

}

.grid input::placeholder,
textarea::placeholder{

    color:#97a5b2;

}

.grid input:focus,
.grid select:focus,
textarea:focus{

    outline:none;

    border-color:#00A3D8;

    box-shadow:0 0 0 4px rgba(0,163,216,.12);

}

textarea{

    width:100%;

    min-height:180px;

    padding:18px;

    border:1px solid #d8e3eb;

    border-radius:10px;

    background:#ffffff;

    font-size:15px;

    color:#34495e;

    resize:vertical;

    margin-bottom:25px;

    transition:.25s;

}

/* ==========================================================
   SUBIDA DE ARCHIVOS
   ========================================================== */

.upload-zone{

    border:2px dashed #b8d9e6;

    border-radius:12px;

    background:#f8fcfd;

    text-align:center;

    padding:28px;

    margin-bottom:30px;

}

.upload-zone strong{

    display:block;

    color:#12354B;

    margin-bottom:10px;

    font-size:17px;

}

.upload-zone p{

    margin:0 0 15px;

    color:#6c7d89;

    font-size:14px;

}

.upload-zone input[type=file]{

    width:100%;

    cursor:pointer;

}

/* ==========================================================
   POLÍTICA
   ========================================================== */

.privacy{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:30px;

    font-size:14px;

    color:#5f6d79;

}

.privacy input{

    width:18px;

    height:18px;

}

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

button[type=submit]{

    width:100%;

    height:60px;

    border:none;

    border-radius:12px;

    background:#00A3D8;

    color:#ffffff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.3px;

    cursor:pointer;

    transition:.30s;

}

button[type=submit]:hover{

    background:#008cb9;

    transform:translateY(-2px);

}
/* Política de privacidad */

.privacy a{
    color:#00A3D8;
    font-weight:600;
    text-decoration:none;
}

.privacy a:hover{
    text-decoration:underline;
}