/* landing.css */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter','Segoe UI',sans-serif;
}

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding:20px 15px;

    background:
        linear-gradient(rgba(245,248,246,.70),rgba(245,248,246,.70)),
        url("../img/fondo.jpg") center center/cover no-repeat;
}

/* ========================= */

.card{

    width:100%;
    max-width:460px;

    margin-top:10px;

    padding:26px 28px;

    border-radius:24px;

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.16),
        0 6px 16px rgba(0,0,0,.08);

    animation:fade .5s ease;
}

@keyframes fade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ========================= */

.header-section{

    text-align:center;
    margin-bottom:22px;
}

.logo-img{

    width:100px;
    margin-bottom:12px;
}

h1{

    color:#065f46;

    font-size:2.1rem;

    font-weight:800;

    margin-bottom:8px;
}

.subtitle{

    color:#6b7280;

    font-size:.95rem;

    line-height:1.5;
}

/* ========================= */

.form-group{

    margin-bottom:18px;

    text-align:left;
}

label{

    display:block;

    margin-bottom:7px;

    font-size:.92rem;

    font-weight:600;

    color:#374151;
}

input,
textarea{

    width:100%;

    padding:15px 16px;

    border:2px solid #e5e7eb;

    border-radius:12px;

    outline:none;

    background:#fff;

    font-size:16px;

    transition:.25s;
}

input:focus,
textarea:focus{

    border-color:#10b981;

    box-shadow:0 0 0 3px rgba(16,185,129,.15);
}

textarea{

    min-height:105px;

    resize:none;
}

/* ========================= */
/* Teléfono */
/* ========================= */

.iti{

    width:100%;
    display:block;
}

.iti__tel-input{

    width:100%!important;

    padding-top:15px!important;
    padding-bottom:15px!important;
    padding-right:16px!important;

    border-radius:12px!important;

    border:2px solid #e5e7eb!important;
}

/* ========================= */

button{

    width:100%;

    margin-top:10px;

    padding:15px;

    border:none;

    border-radius:12px;

    background:linear-gradient(90deg,#059669,#10b981);

    color:white;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 18px rgba(5,150,105,.25);
}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 22px rgba(5,150,105,.30);
}

/* ========================= */

.estado{

    display:none;

    margin-top:18px;

    padding:12px;

    border-radius:10px;

    font-weight:600;

    text-align:center;
}

.estado.ok{

    background:#dcfce7;

    color:#166534;
}

.estado.error{

    background:#fee2e2;

    color:#991b1b;
}

/* ========================= */
/* Celulares */
/* ========================= */

@media(max-width:480px){

    body{

        padding:12px 10px;
    }

    .card{

        max-width:100%;

        padding:20px;

        border-radius:20px;
    }

    .logo-img{

        width:85px;
    }

    h1{

        font-size:1.8rem;
    }

    .subtitle{

        font-size:.88rem;
    }

    .form-group{

        margin-bottom:14px;
    }

    input,
    textarea{

        padding:13px 14px;
    }

    textarea{

        min-height:90px;
    }

    button{

        padding:13px;

        font-size:15px;
    }

}