/* ===============================
   BASE
=============================== */
body{
    margin:0;
    font-family:'Poppins', Arial, sans-serif;
    background:#f3f4f6;
    color:#111827;
}

/* ===============================
   HEADER COMPACTO
=============================== */
.form-header{
    text-align:center;
    padding:25px 20px 10px;
}

.form-header h1{
    font-size:32px;
    font-weight:900;
    color:#003d1b;
    margin-bottom:5px;
}

.form-header p{
    margin:0;
    color:#6b7280;
    font-size:14px;
}

/* ===============================
   CONTENEDOR
=============================== */
.form-container{
    width:100%;
    max-width:550px;
    margin:auto;
    padding:10px 20px 30px;
}

/* ===============================
   CAJA FORM
=============================== */
.form-box{
    width:100%;
    background:#ffffff;

    padding:30px;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

/* ===============================
   GRID
=============================== */
.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
}

/* ===============================
   INPUTS
=============================== */
input,
select{
    width:100%;
    height:56px;
    padding:0 14px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    font-size:15px;
    outline:none;
    transition:0.25s;
    background:#fff;
}

input:focus,
select:focus{
    border-color:#16a34a;
    box-shadow:0 0 0 3px rgba(22,163,74,0.15);
}

/* ===============================
   TELEFONO
=============================== */
.telefono-wrapper{
    display:flex;
    align-items:center;
    border:1px solid #e5e7eb;
    border-radius:14px;
    overflow:hidden;
    height:56px;
}

.telefono-wrapper span{
    padding:0 12px;
    background:#f9fafb;
    font-size:14px;
}

.telefono-wrapper input{
    border:none;
    height:100%;
}

/* ===============================
   TITULO SECCION
=============================== */
h3{
    margin:15px 0 8px;
    font-size:16px;
    font-weight:700;
}

/* ===============================
   CHECKBOX CENTRADO PRO
=============================== */
.check-group{
    margin-top:15px;
}

.check-item{
    display:flex;
    align-items:center; /* 🔥 CENTRA VERTICAL */
    gap:10px;
    margin-bottom:10px;
    font-size:14px;
    color:#374151;
}

.check-item input{
    width:16px;
    height:16px;
    margin:0; /* 🔥 QUITA DESCUADRE */
}

.check-item span{
    line-height:1.4;
}

/* SUBRAYADO */
.check-item span u{
    color:#003d1b;
    text-decoration:underline;
    cursor:pointer;
}

/* ===============================
   BOTON
=============================== */
.btnEnviar{
    display:block;
    margin:20px auto 0;
    width:100%;
    max-width:320px;

    height:52px;

    background:linear-gradient(135deg,#f4a900,#ffc233);
    color:#003d1b;

    border:none;
    border-radius:14px;

    font-weight:700;
    font-size:15px;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(244,169,0,0.25);
    transition:0.25s;
}

.btnEnviar:hover{
    transform:translateY(-2px);
}

.btnEnviar:active{
    transform:scale(0.97);
}

/* ===============================
   ERRORES
=============================== */
.msg-error{
    color:#ef4444;
    font-size:12px;
    margin-top:4px;
}

/* ===============================
   MOBILE
=============================== */
@media(max-width:768px){

    .grid-2{
        grid-template-columns:1fr;
    }

    .form-box{
        padding:20px;
    }

    .form-header h1{
        font-size:22px;
    }

    input,
    select{
        height:58px;
        font-size:16px;
    }

}
/* ===============================
   REDUCIR ALTURA INTERNA
=============================== */

/* menos espacio entre filas */
.grid-2{
    gap:12px;
    margin-bottom:12px;
}

/* subtítulos más pegados */
h3{
    margin:30px 0 15px;
    font-size:15px;
}

/* inputs un poco más bajos */
input,
select{
    height:50px;
}

/* menos espacio checkbox */
.check-group{
    margin-top:20px;
}

.check-item{
    margin-bottom:10px;
}

/* botón más cerca */
.btnEnviar{
    margin-top:30px;
}

/* caja general más compacta */
.form-box{
    padding:25px 30px;
}
/* ===============================
   TITULO ULTRA PRO MAX
=============================== */
.form-header h1{
    display:inline-block;

    padding:14px 28px;

    font-size:21px;
    font-weight:900;

    color:#ffffff; /* 🔥 TEXTO BLANCO */

    background:#064e3b; /* 🔥 VERDE OSCURO */

    border-radius:15px; /* 🔥 RADIO 15 */

    box-shadow:0 10px 25px rgba(0,0,0,0.15);

    letter-spacing:0.5px;

    position:relative;

    transition:all .25s ease;
}
/* ===============================
   TITULO MOBILE
=============================== */
@media(max-width:768px){

    .form-header h1{
        font-size:20px;
        padding:10px 18px; /* 🔥 opcional: más compacto */
        border-radius:12px;
    }

}
/* ===============================
   TEXTO SUBTITULO PRO
=============================== */
.form-header p{
    font-size:16px;
    color:#122e0b;
    margin-top:5px;
}

/* 🔥 SOLO "asesor" en negrita */
.form-header p strong{
    font-weight:800;
    color:#064e3b; /* 🔥 VERDE OSCURO COHERENTE */
}
/* ===============================
   MÁS ALTURA INTERNA PRO
=============================== */
.form-box{
    padding-top:40px;   /* 🔥 MÁS ARRIBA */
    padding-bottom:65px; /* 🔥 MÁS ABAJO */

    padding-left:30px;
    padding-right:30px;
}
/* ===============================
   FORM MOBILE AJUSTE
=============================== */
@media(max-width:768px){

    .form-box{
        padding-top:20px; /* 🔥 SOLO ARRIBA MÁS PEQUEÑO */
        padding-bottom:30px; /* 🔥 MÁS ABAJO */
    }

}
/* ===============================
   FULL WIDTH MOBILE
=============================== */
@media(max-width:768px){

    .form-container{
        padding:0; /* 🔥 quita márgenes laterales */
    }

    .form-box{
        width:100%;
        max-width:100%;

        margin:0;
        border-radius:5; /* 🔥 opcional: estilo full pantalla */

        padding:20px 30px; /* 🔥 pequeño padding interno */
    }

}
/* ===============================
   ESPACIO INFERIOR BOTON MOBILE
=============================== */
@media(max-width:768px){

    .btnEnviar{
        margin-bottom:20px; /* 🔥 espacio abajo */
    }

}

/* ===============================
   HERO FINAL PERFECTO
=============================== */

.hero-form{
    position: relative;
    width: 100%;
    margin-top: 180px;
    margin-bottom: 120px; /* 🔥 espacio abajo */
}

/* FONDO */
.hero-bg{
    width: 100%;
    height: 750px;
    background-image: url('/activos/imagenes/fondogrande.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

/* CONTENIDO */
.hero-content{
    position: absolute;
    top: 0;
    left: -200;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 🔥 CLAVE (alinea arriba) */

    padding: 0px 600px;
}
.form-container{
    position: relative;
    top: -100px; /* 🔥 sube solo el form */
}

.form-container{
    position: absolute;

    top: -100px;  /* 🔥 altura */
    right: 00px;  /* 🔥 derecha exacta */
}
.hero-text{
    position: absolute;

    top: -85px;     
    left: 480px;    

    width: 1500px;

    color: #064e3b; /* 🔥 verde oscuro PRO */
}

.hero-text h2{
    font-size: 32px;     
    font-weight: 800;    

    color: #064e3b;

    line-height: 1.05;

    letter-spacing: -1px;
}
.form-container{
    position: absolute;

    top: -120px;
    right: 120px;

    padding: 6.5px; /* 🔥 espacio alrededor */

    background: linear-gradient(135deg, #064e3b, #065f46); /* 🔥 verde elegante */
    
    border-radius: 20px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.form-box{
    padding: 10px 20px 20px; /* 🔥 menos espacio arriba */
}
.form-container{
    width: 450px; /* 🔥 más pequeño */
}
/* FIX TOTAL */

.hero-content{
    position: absolute;
    top: 0;
    left: 0; /* 🔥 CORREGIDO */

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 0 -280px; /* 🔥 antes 600px */
}

/* TEXTO */
.hero-text{
    position: absolute;
    top: -60px;
    left: 80px;

    max-width: 650px; /* 🔥 antes 1500px */

    color: #064e3b;
}

/* FORM */
.form-container{
    position: absolute;
    top: -100px;
    right: 500px;

    width: 420px;

    padding: 6px;

    background: linear-gradient(135deg, #064e3b, #065f46);
    border-radius: 20px;
}
.hero-text{
    position: absolute;

    top: -100px;   /* 🔥 antes -85px → sube 20px */
    left: 280px;   /* 🔥 antes 480px → +200px derecha */
}
/* ===============================
   OCULTAR TODO MENOS FORM EN MOBILE
=============================== */

@media(max-width:1024px){

    /* ❌ ocultar fondo */
    .hero-bg{
        display: none;
    }

    /* ❌ ocultar texto */
    .hero-text{
        display: none;
    }

    /* ❌ quitar posicion absoluta */
    .hero-content{
        position: relative;
        padding: 00px;
    }

    /* ✅ formulario centrado */
    .form-container{
        position: relative;
        top: -120;
        right: 0;

        margin: auto;
        width: 100%;
        max-width: 480px;
    }

}
@media(max-width:1024px){

    .hero-form{
        margin-bottom: -80px; /* 🔥 elimina espacio abajo */
    }

}