/* =====================================================
   CASA GREEN – MODAL PORTAL PIXEL PERFECT
===================================================== */

/* ==============================
   OVERLAY (fondo oscuro blur)
============================== */

.modal-contacto-wrapper .modal-overlay{
position:fixed;                 /* ocupa toda la pantalla */
inset:0;                        /* top right bottom left = 0 */
background:rgba(6,38,22,.88);    /* fondo oscuro elegante */
backdrop-filter:blur(6px);       /* efecto vidrio */
display:none;                    /* oculto por defecto */
justify-content:center;          /* centra horizontal */
align-items:center;              /* centra vertical */
z-index:9999;
opacity:0;
transition:opacity .25s ease;    /* animación suave */
}

.modal-contacto-wrapper .modal-overlay.activo{
display:flex;
opacity:1;
}


/* ==============================
   CARD PRINCIPAL
============================== */

.modal-contacto-wrapper .modal-card{
background:#ffffff;
width:100%;
max-width:480px;                 /* ancho controlado tipo portal */
padding:34px 30px;               /* espacio interno equilibrado */
border-radius:16px;              /* esquinas suaves */
box-shadow:0 25px 70px rgba(0,0,0,.30);
position:relative;
border-top:4px solid #0f5132;    /* línea corporativa verde */
}


/* ==============================
   BOTÓN CERRAR PROFESIONAL
============================== */

.modal-contacto-wrapper .cerrarModal{
position:absolute;
top:12px;
right:12px;
width:32px;
height:32px;
border-radius:50%;
border:none;
background:#f2f2f2;
color:#333;
font-size:14px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.25s ease;
}

.modal-contacto-wrapper .cerrarModal:hover{
background:#0f5132;
color:#fff;
transform:rotate(90deg);         /* giro elegante */
}


/* ==============================
   TITULOS
============================== */

.modal-contacto-wrapper .modal-title{
font-size:22px;
font-weight:700;
color:#0f5132;
text-align:center;
margin-bottom:4px;
}

.modal-contacto-wrapper .modal-subtitle{
font-size:14px;
color:#666;
text-align:center;
margin-bottom:18px;
}


/* ==============================
   GRID DOBLE (2 columnas)
============================== */

.modal-contacto-wrapper .grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:8px;
}


/* ==============================
   INPUTS GENERALES (DNI BASE)
============================== */

.modal-contacto-wrapper .modal-card input,
.modal-contacto-wrapper .modal-card select{
width:100%;
height:46px;              /* ALTURA EXACTA BASE */
border-radius:10px;
border:1px solid #e3e3e3;
padding:0 14px;           /* padding horizontal uniforme */
margin-bottom:8px;
font-size:14px;
background:#f7f7f7;       /* MISMO fondo para todos */
box-sizing:border-box;
transition:.2s ease;
}

.modal-contacto-wrapper .modal-card input:focus,
.modal-contacto-wrapper .modal-card select:focus{
border-color:#0f5132;
background:#ffffff;
box-shadow:0 0 0 2px rgba(15,81,50,.15);
outline:none;
}


/* TELEFONO ALINEADO EXACTO AL DNI */

.modal-contacto-wrapper .telefono-wrapper{
position:relative;
height:44px;
border:1px solid #e3e3e3;
border-radius:10px;
background:#f7f7f7;
margin-bottom:8px;
}

/* Prefijo en posición absoluta */
.modal-contacto-wrapper .telefono-wrapper span{
position:absolute;
left:0;
top:0;
bottom:0;
width:48px;              /* ancho fijo */
display:flex;
align-items:center;
justify-content:center;
background:#0f5132;
color:#fff;
font-size:12px;
font-weight:600;
border-radius:10px 0 0 10px;
}

/* Input con compensación matemática */
.modal-contacto-wrapper .telefono-wrapper input{
width:100%;
height:100%;
border:none;
outline:none;
background:transparent;
padding-left:62px;       /* 48px + 14px (igual padding DNI) */
padding-right:14px;
font-size:13px;
line-height:44px;
box-sizing:border-box;
}


/* ==============================
   CHECKBOX COMPACTO
============================== */

.modal-contacto-wrapper .check-group{
margin:12px 0;
display:flex;
flex-direction:column;
gap:6px;                        /* menos separación */
}

.modal-contacto-wrapper .check-item{
display:flex;
align-items:flex-start;
gap:6px;
font-size:13px;
line-height:1.4;
color:#444;
}

.modal-contacto-wrapper .check-item input{
margin-top:2px;
width:16px;
height:16px;
accent-color:#0f5132;
}

.modal-contacto-wrapper .check-item a{
color:#0f5132;
text-decoration:none;
font-weight:500;
}

.modal-contacto-wrapper .check-item a:hover{
text-decoration:underline;
}


/* ==============================
   BOTÓN PRINCIPAL
============================== */

.modal-contacto-wrapper .btnEnviar{
width:100%;
height:50px;
border-radius:12px;
border:none;
background:linear-gradient(135deg,#0f5132,#198754);
color:#fff;
font-size:14px;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.25s ease;
margin-top:6px;
}

.modal-contacto-wrapper .btnEnviar:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,.25);
}
/* =====================================
   MINI MODALES PROFESIONALES
===================================== */

.mini-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
display:none;
justify-content:center;
align-items:center;
z-index:10000;
}

.mini-modal.activo{
display:flex;
}

.mini-card{
background:#fff;
width:90%;
max-width:420px;
padding:25px;
border-radius:14px;
position:relative;
box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.mini-card h3{
font-size:16px;
margin-bottom:10px;
color:#0f5132;
}

.mini-card p{
font-size:13px;
line-height:1.5;
color:#444;
}

.mini-close{
position:absolute;
right:10px;
top:10px;
border:none;
background:#f2f2f2;
width:30px;
height:30px;
border-radius:50%;
cursor:pointer;
font-size:14px;
}

.mini-close:hover{
background:#0f5132;
color:#fff;
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width:768px){

.modal-contacto-wrapper .modal-card{
padding:22px 16px;
}

.modal-contacto-wrapper .grid-2{
gap:8px;
}

.modal-contacto-wrapper .modal-card input,
.modal-contacto-wrapper .modal-card select{
height:42px;
}

.modal-contacto-wrapper .telefono-wrapper{
height:42px;
}

.modal-contacto-wrapper .telefono-wrapper input{
line-height:42px;  /* mantiene alineación */
}

}