/* ===== FORM SUR CREDITOS ===== */


/* Contenedor */

.sc-form {
    width: 100%;
    padding: 120px 20px 20px;
    display:flex;
    justify-content:center;
}

/* Card */

.sc-card {
    width: 100%;
   max-width:620px;

    background: #fff;
    border-radius: 24px;

    padding: 40px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.08);

    border: 1px solid #eef2f7;
    margin-bottom: 60px;
}

/* Header */

.sc-header {
    margin-bottom: 30px;
}

.sc-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.sc-header p {
    color: #6b7280;
    line-height: 1.6;
}

/* Grupos */

.sc-group {
    margin-bottom: 22px;
}

.sc-group label {
    display: block;
    margin-bottom: 8px;

    font-weight: 600;
    color: #1f2937;
}



/* Inputs premium */

.sc-group input,
.sc-group select,
.sc-group textarea{

    width:100%;
    height:64px;
    padding:0 24px;

    border:2px solid #d9dde6;
    border-radius:999px;

    background:#fff;

    outline:none;
    transition:.3s ease;

    font-size:18px;
    color:#374151;
}

.sc-group textarea{
    height:180px;
    border-radius:32px;
    padding:20px 24px;
    resize:none;
}

.sc-group input:focus,
.sc-group select:focus,
.sc-group textarea:focus{

    border-color:#1e40af;
    box-shadow:0 0 0 4px rgba(59,130,246,.08);
}

/* SELECT PREMIUM */

.sc-group select{
    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 22px center;
    background-size:20px;

    padding-right:60px;
}


/* ==========================
TELÉFONO PREMIUM
========================== */

.sc-phone{
    display:flex;
    gap:12px;
    width:100%;
}

.phone-field{
    display:flex;
    align-items:center;
    border:2px solid #d9dde6;
    border-radius:999px;
    overflow:hidden;
    background:#fff;
    height:64px;
    min-width:0;
}

.phone-field.small{
    flex:0 0 38%;
}

.phone-field.big{
    flex:1;
}

.phone-prefix{
    padding:0 8px;
    color:#2563eb;
    font-weight:600;
    border-right:1px solid #d9dde6;
    min-width:34px;
    text-align:center;
}

.phone-field input{
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    width:100%;
    min-width:0;
    padding:0 8px;
    background:transparent;
    font-size:18px;
}

.conditions{
    color: #2563eb;
}

/* MOBILE */

@media(max-width:768px){

    .phone-field.small{
        flex:0 0 38%;
    }

    .phone-field.big{
        flex:1;
    }
}

/* Checkbox */

.sc-check {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 20px 0;
}

.sc-check input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.sc-check label {
    color: #374151;
    font-size: .95rem;
}

/* Captcha */

.sc-captcha {
    margin: 25px 0;
}

/* Botón */

.sc-btn {
    width: 100%;

    border: none;
    border-radius: 14px;

    padding: 16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #16a34a
        );

    color: #fff;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;
}

.sc-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 20px rgba(37,99,235,.20);
}



/* Responsive */

@media(max-width:640px){

    .sc-form{
        padding:100px 10px 10px;
    }

    .sc-card{
        width:100%;
        max-width:100%;
        padding:28px 22px;
        border-radius:20px;
    }

    .sc-header h2{
        font-size:1.6rem;
    }

    /* TELEFONO AL LADO */
    .sc-phone{
        flex-direction:row;
        gap:12px;
    }

    .phone-field.small{
        flex:0 0 35%;
    }

    .phone-field.big{
        flex:1;
    }

}

/* Fondo página contacto */

.sc-page {
    min-height: 100vh;

    background:
    linear-gradient(
        135deg,
        #f8fafc,
        #eef2ff
    );
}



  /* ===== MODAL EXITO ===== */

.sc-modal-overlay {

    position: fixed;
    inset: 0;

    background:
        rgba(0,0,0,.45);

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

    z-index: 99999;

    padding: 20px;
}

.sc-modal {

    background: #fff;
    width: 100%;
    max-width: 420px;

    border-radius: 24px;
    padding: 35px;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(0,0,0,.2);

    animation:
        modalShow .25s ease;
}

@keyframes modalShow {

    from{
        transform: scale(.95);
        opacity:0;
    }

    to{
        transform: scale(1);
        opacity:1;
    }
}

.sc-modal-icon {

    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #16a34a;
    color: #fff;

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

    font-size: 32px;
    font-weight: bold;
}

.sc-modal h3 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #111827;
}

.sc-modal p {
    color: #6b7280;
    line-height: 1.6;
}

.sc-modal button {

    margin-top: 24px;

    width: 100%;

    border: none;
    border-radius: 14px;

    padding: 14px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #16a34a
    );

    color: white;
    font-weight: 600;

    cursor: pointer;
}


/* Quitar autofill Chrome */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #374151 !important;
    border-radius:999px !important;

    transition: background-color 9999s ease-in-out 0s;
}

/* Focus premium teléfono */

.phone-field:focus-within{

    border-color:#1e40af;
    box-shadow:0 0 0 4px rgba(59,130,246,.08);

}

/* BOTON LOADING */

.sc-btn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.loader{
    width:22px;
    height:22px;
    border:3px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;

    animation:spin .8s linear infinite;
}

.loader-hidden{
    display:none;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}