:root{
    --bg1:#071326;
    --bg2:#0d1b34;
    --blue:#2563eb;
    --text:#ffffff;
    --muted:#cbd5e1;
}

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{

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

    background:
    radial-gradient(circle at top right,
    rgba(37,99,235,.25),
    transparent 35%),

    linear-gradient(
    135deg,
    var(--bg1),
    var(--bg2)
    );

    color:white;
}

.page{

    height:100vh;

    width:100%;

    max-width:1600px;

    margin:auto;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:50px;

    padding:30px 60px;
}

.logo{

    width:520px;

    max-width:100%;

    display:block;

    margin-bottom:10px;
}

.badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:30px;

    background:rgba(37,99,235,.15);

    border:1px solid rgba(255,255,255,.10);

    margin-bottom:15px;
}

h1{

    font-size:68px;

    line-height:1;

    font-weight:800;

    margin-bottom:20px;
}

.subtitle{

    font-size:22px;

    color:var(--muted);

    line-height:1.5;

    margin-bottom:25px;
}

.features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:25px;
}

.feature{

    padding:15px;

    border-radius:12px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);
}

.contact-info{

    line-height:1.9;

    color:white;

    font-size:18px;
}

.form-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:30px;

    backdrop-filter:blur(20px);


}

.form-card h2{

    margin-bottom:20px;

    font-size:32px;
}

input,
textarea{

    width:100%;

    padding:14px;

    margin-bottom:12px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:15px;
}

input::placeholder,
textarea::placeholder{

    color:#bfc7d4;
}

button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:var(--blue);

    color:white;

    font-size:16px;

    font-weight:700;

    cursor:pointer;
}

button:hover{

    opacity:.9;
}

.whatsapp{

    position:fixed;

    right:20px;

    bottom:20px;

    width:70px;

    height:70px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:30px;
}

@media(max-width:1100px){

html,
body{
    overflow:auto;
}

.page{

    height:auto;

    grid-template-columns:1fr;

    padding:30px;
}

.logo{

    width:300px;
}

h1{

    font-size:46px;
}

.features{

    grid-template-columns:1fr;
}
}

/* CONTACTO SUPERIOR */

.contact-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:25px;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    color:white;
    transition:.3s;
}

.contact-card:hover{
    transform:translateY(-3px);
    border-color:#2563eb;
    box-shadow:0 0 25px rgba(37,99,235,.25);
}

.icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    font-size:22px;
    flex-shrink:0;
    color:white;
}

.phone{
    background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.email{
    background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}

.facebook{
    background:linear-gradient(135deg,#1877f2,#4f8ff7);
}

.instagram{
    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
}

.contact-card span{
    display:block;
    color:#94a3b8;
    font-size:12px;
}

.contact-card strong{
    display:block;
    color:white;
    font-size:14px;
    font-weight:600;
}


.feature{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border-radius:12px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    font-size:18px;
}

.feature i{

    color:#60a5fa;

    font-size:20px;

    width:24px;

    text-align:center;
}

.right-panel{

    transform:translateY(10px);

}
}