/* =========================================
   CASA HOME • PRO LUXURY CLEAN
========================================= */

.form-terrenos{

position:relative;

max-width:1050px;

margin:40px auto;

padding:40px;

border-radius:28px;

background:#ffffff;

border:1px solid #e5e7eb;

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

overflow:hidden;

}

/* LINEA TOP */

.form-terrenos::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:#1a2b61;

}

/* =========================================
   TITULO
========================================= */

.form-terrenos h1{

font-size:40px;

font-weight:800;

line-height:1.1;

letter-spacing:-1px;

text-align:center;

color:#0f172a;

margin-bottom:14px;

}

/* DESCRIPCION */

.form-terrenos p{

max-width:700px;

margin:0 auto 34px;

font-size:15px;

line-height:1.8;

text-align:center;

color:#64748b;

}

.form-terrenos p strong{

display:block;

margin-top:8px;

font-size:14px;

font-weight:700;

color:#1a2b61;

}

/* =========================================
   GRID
========================================= */

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:24px;

margin-bottom:26px;

}

/* COLUMNAS */

.grid > div{

padding:26px;

border-radius:24px;

background:#fafafa;

border:1px solid #edf2f7;

}

/* =========================================
   SUBTITULOS
========================================= */

h3{

font-size:13px;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

color:#1a2b61;

margin-bottom:16px;

}

/* =========================================
   INPUTS
========================================= */

input,
select,
textarea{

width:100%;

height:56px;

padding:0 18px;

margin-bottom:14px;

border-radius:16px;

border:1.5px solid #dbe2ea;

background:#fff;

font-size:15px;

color:#0f172a;

transition:.2s ease;

}

/* PLACEHOLDER */

input::placeholder,
textarea::placeholder{

color:#94a3b8;

}

/* HOVER */

input:hover,
select:hover,
textarea:hover{

border-color:#cbd5e1;

}

/* FOCUS */

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:#1a2b61;

background:#fff;

box-shadow:
0 0 0 4px rgba(26, 43, 97,.08);

}
/* =========================================
   TELEFONO MISMO NIVEL
========================================= */

.telefono-wrapper{

position:relative;

display:flex;
align-items:center;

}

.telefono-wrapper input{

height:58px;

padding-left:120px;

font-weight:700;

letter-spacing:2px;

font-size:20px;

line-height:58px;

}

/* TEXTO TELEFONO */

.telefono-wrapper span{

position:absolute;

left:18px;

top:0;

height:58px;

display:flex;
align-items:center;

font-size:12px;

font-weight:800;

letter-spacing:.6px;

color:#1a2b61;

}
/* =========================================
   FILE INPUT
========================================= */

input[type="file"]{

height:auto;

padding:18px;

background:#fff;

border:2px dashed #dbe2ea;

cursor:pointer;

}

input[type="file"]:hover{

border-color:#1a2b61;

background:#f8fafc;

}

/* =========================================
   PREVIEW
========================================= */

.preview{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-top:14px;

margin-bottom:28px;

}

.preview div{

position:relative;

overflow:hidden;

border-radius:20px;

border:1px solid #e5e7eb;

background:#fff;

box-shadow:
0 6px 18px rgba(15,23,42,.06);

}

.preview img,
.preview video{

width:170px;
height:125px;

object-fit:cover;

display:block;

transition:.25s;

}

.preview img:hover,
.preview video:hover{

transform:scale(1.03);

}

/* DELETE */

.preview button{

position:absolute;

top:8px;
right:8px;

width:26px;
height:26px;

border:none;

border-radius:50%;

background:#dc2626;

color:#fff;

font-size:12px;

cursor:pointer;

}

/* =========================================
   COMISION
========================================= */

.form-terrenos h4{

margin-top:12px;
margin-bottom:10px;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

color:#1a2b61;

}

/* =========================================
   TERMINOS
========================================= */

.terminos{

padding:18px;

border-radius:18px;

background:#fafafa;

border:1px solid #e5e7eb;

margin-top:6px;

}

.terminos label{

display:flex;

align-items:flex-start;

gap:12px;

cursor:pointer;

line-height:1.6;

}

.terminos input{

width:18px;
height:18px;

margin-top:2px;

accent-color:#1a2b61;

flex-shrink:0;

}

.terminos span{

font-size:14px;

color:#475569;

}

.terminos a{

font-weight:700;

color:#1a2b61;

text-decoration:none;

}

/* =========================================
   BOTON
========================================= */

button[type="submit"]{

display:flex;

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

margin:34px auto 0;

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

height:58px;

border:none;

border-radius:18px;

background:#1a2b61;

color:#fff;

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

letter-spacing:.4px;

cursor:pointer;

transition:.2s ease;

box-shadow:
0 12px 24px rgba(26, 43, 97,.16);

}

button[type="submit"]:hover{

background:#142353;

transform:translateY(-2px);

box-shadow:
0 18px 30px rgba(26, 43, 97,.22);

}

/* =========================================
   MOBILE PERFECT FULL WIDTH
========================================= */

@media(max-width:900px){

/* CONTENEDOR */

.form-terrenos{

width:100%;

margin:0;

padding:18px;

border-radius:0;

min-height:100vh;

}

/* TITULO */

.form-terrenos h1{

font-size:28px;

line-height:1.15;

margin-bottom:12px;

}

/* DESCRIPCION */

.form-terrenos p{

font-size:14px;

margin-bottom:22px;

line-height:1.6;

}

/* GRID */

.grid{

grid-template-columns:1fr;

gap:16px;

margin-bottom:20px;

}

/* COLUMNAS */

.grid > div{

width:100%;

padding:18px;

border-radius:18px;

}

/* INPUTS */

input,
select,
textarea{

width:100%;

height:58px;

padding:0 16px;

font-size:16px;

border-radius:15px;

margin-bottom:12px;

}

/* MOBILE */

@media(max-width:768px){

.telefono-wrapper input{

padding-left:130px; /* 🔥 MÁS ESPACIO */

font-size:18px;

letter-spacing:1px;

}

.telefono-wrapper span{

left:16px;

font-size:11px;

}

}

/* FILE */

input[type="file"]{

width:100%;

padding:16px;

}

/* PREVIEW */

.preview{

width:100%;

gap:14px;

}

.preview div{

width:100%;

}

.preview img,
.preview video{

width:100%;

height:220px;

border-radius:18px;

object-fit:cover;

}

/* TERMINOS */

.terminos{

width:100%;

padding:16px;

border-radius:16px;

}

.terminos span{

font-size:13px;

line-height:1.5;

}

/* BUTTON */

button[type="submit"]{

width:100%;

max-width:100%;

height:58px;

font-size:15px;

border-radius:16px;

margin-top:24px;

}

}

/* =========================================================
   ESCALA COMPACTA — LA MISMA DEL REGISTRO

   Cada campo iba dentro de una tarjeta gris de 26px de relleno y el
   campo medía 56px de alto, asi que un formulario de doce campos
   ocupaba tres pantallas. Aqui se ajusta a la escala de
   micuenta/registro.php: etiqueta encima, campo de 46px y sin caja.
========================================================= */

.form-terrenos{
    max-width:720px !important;
    margin:32px auto !important;
    padding:34px 32px 28px !important;
    border-radius:16px !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}

.form-terrenos h1{
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    margin-bottom:6px !important;
    letter-spacing:-.2px !important;
}

.form-terrenos > p{
    max-width:420px !important;
    margin:0 auto 24px !important;
    color:#6b7280 !important;
    font-size:14px !important;
    line-height:1.5 !important;
}

.form-terrenos p strong{
    display:inline !important;
    margin:0 !important;
    font-size:inherit !important;
    font-weight:600 !important;
    color:#374151 !important;
}

/* Dos por fila, sin caja alrededor. */
.grid{
    gap:0 14px !important;
    margin-bottom:0 !important;
}

.grid > div{
    padding:0 !important;
    margin-bottom:15px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.form-terrenos label{
    display:block !important;
    margin-bottom:6px !important;
    color:#374151 !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
}

.form-terrenos label small,
.form-terrenos label span{
    color:#9ca3af !important;
    font-size:12px !important;
    font-weight:400 !important;
}

.form-terrenos input,
.form-terrenos select,
.form-terrenos textarea{
    width:100% !important;
    height:46px !important;
    padding:0 14px !important;
    margin-bottom:0 !important;
    border:1px solid #d1d5db !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#111827 !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:400 !important;
}

.form-terrenos textarea{
    height:auto !important;
    min-height:92px !important;
    padding:12px 14px !important;
    line-height:1.5 !important;
}

.form-terrenos input:focus,
.form-terrenos select:focus,
.form-terrenos textarea:focus{
    border-color:#111827 !important;
    box-shadow:0 0 0 3px rgba(17,24,39,.07) !important;
    background:#fff !important;
}

/* El prefijo del telefono, a su tamaño. */
.telefono-wrapper{position:relative}

.telefono-wrapper span{
    position:absolute !important;
    left:1px !important;
    top:1px !important;
    bottom:1px !important;
    width:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:10px 0 0 10px !important;
    background:#f9fafb !important;
    color:#374151 !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    line-height:1 !important;
}

.telefono-wrapper input{
    height:46px !important;
    padding-left:64px !important;
    font-size:14px !important;
    line-height:normal !important;
}

/* La zona de archivos, mas contenida. */
.form-terrenos input[type="file"]{
    height:auto !important;
    padding:14px !important;
    border:1.5px dashed #d1d5db !important;
    border-radius:10px !important;
    font-size:13px !important;
}

.form-terrenos h4{
    margin:20px 0 10px !important;
    padding-top:16px !important;
    border-top:1px solid #f1f3f5 !important;
    color:#111827 !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
}

.form-terrenos button[type="submit"]{
    width:100% !important;
    height:48px !important;
    margin-top:8px !important;
    border-radius:10px !important;
    font-size:15px !important;
    font-weight:600 !important;
}

@media(max-width:640px){
    .form-terrenos{
        margin:18px 12px !important;
        padding:24px 18px 22px !important;
    }
    .grid{grid-template-columns:minmax(0,1fr) !important}
}

/* =========================================================
   REMATE PROFESIONAL
========================================================= */

/* Los titulos de seccion separan los bloques sin que haga falta
   encerrar cada campo en una caja. */
.form-terrenos h4{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    margin:24px 0 14px !important;
    padding-top:18px !important;
    border-top:1px solid #eef0f3 !important;
    color:#0f1a3d !important;
    font-size:14px !important;
    font-weight:600 !important;
}

.form-terrenos h4::before{
    content:"";
    width:3px;
    height:15px;
    border-radius:2px;
    background:#0f1a3d;
}

.form-terrenos h4:first-of-type{margin-top:20px !important}

/* Un campo que ocupa las dos columnas. */
.form-terrenos .ct-ancho{grid-column:1 / -1 !important}

/* Precio con su moneda delante. */
.ct-precio-fila{display:flex;gap:0;align-items:stretch}

.ct-precio-fila select{
    flex:0 0 auto !important;
    width:66px !important;
    padding:0 6px 0 12px !important;
    border-right:0 !important;
    border-radius:10px 0 0 10px !important;
    background:#f9fafb !important;
    font-weight:600 !important;
}

.ct-precio-fila input{
    flex:1 !important;
    min-width:0 !important;
    border-radius:0 10px 10px 0 !important;
}

/* Los desplegables, con su flecha propia. */
.form-terrenos select{
    padding-right:34px !important;
    background:#fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 12px center !important;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Servicios: casillas en fila, del tamaño de una casilla. */
.ct-marcas{display:flex;flex-wrap:wrap;gap:8px}

.ct-marca{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:9px 13px !important;
    border:1px solid #d1d5db !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#374151 !important;
    font-size:13.5px !important;
    font-weight:400 !important;
    cursor:pointer !important;
    transition:.15s ease;
}

.ct-marca:hover{border-color:#9ca3af;background:#f9fafb}

.ct-marca input[type="checkbox"]{
    width:17px !important;
    height:17px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 17px !important;
    accent-color:#0f1a3d;
    cursor:pointer;
}

.ct-marca:has(input:checked){
    border-color:#0f1a3d !important;
    background:#f6f8fc !important;
    color:#0f1a3d !important;
}

/* Adjuntar archivos: zona de arrastre, no un campo suelto. */
.form-terrenos input[type="file"]{
    width:100% !important;
    padding:22px 16px !important;
    border:1.5px dashed #cbd5e1 !important;
    border-radius:12px !important;
    background:#fafbfc !important;
    color:#6b7280 !important;
    font-size:13px !important;
    cursor:pointer !important;
}

.form-terrenos input[type="file"]:hover{
    border-color:#0f1a3d !important;
    background:#f6f8fc !important;
}

.form-terrenos input[type="file"]::file-selector-button{
    margin-right:12px;
    padding:9px 15px;
    border:0;
    border-radius:9px;
    background:#0f1a3d;
    color:#fff;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

/* La autorizacion: la casilla salia enorme porque heredaba el alto de
   los campos. Aqui va a su tamaño, con el texto al lado. */
.form-terrenos .terminos{
    margin:20px 0 4px !important;
    padding:14px 16px !important;
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    background:#fafbfc !important;
}

.form-terrenos .terminos label{
    display:flex !important;
    align-items:flex-start !important;
    gap:11px !important;
    margin:0 !important;
    color:#4b5563 !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:1.5 !important;
    cursor:pointer !important;
    text-align:left !important;
}

.form-terrenos .terminos input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    min-height:0 !important;
    flex:0 0 18px !important;
    margin:1px 0 0 !important;
    padding:0 !important;
    accent-color:#0f1a3d;
    cursor:pointer;
}

.form-terrenos .terminos a{
    color:#0f1a3d !important;
    font-weight:600 !important;
    text-decoration:underline;
}

/* Vista previa de lo adjuntado. */
.form-terrenos .preview{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:11px;
}

@media(max-width:640px){
    .ct-marcas{gap:7px}
    .ct-marca{padding:8px 11px !important;font-size:13px !important}
}