/* ============================================================
   INMOBILIARIAS MAR DEL PLATA — Hoja de estilos compartida
   Usada por index.html y páginas internas (quienes-somos,
   terminos-condiciones, politica-privacidad, contacto).
   ============================================================ */

/* ============ RESET & BASE ============ */
*{ margin:0; padding:0; box-sizing:border-box; }

/* Asegura que el atributo [hidden] oculte el elemento incluso cuando una
   clase propia (p.ej. .action-toggle, .services-options) define su propio
   "display". Sin esto, [hidden] queda "empatado" en especificidad con esas
   reglas y el navegador puede mostrar el elemento igual. */
[hidden]{ display:none !important; }

:root{
  --primary:#1565C0;
  --primary-dark:#0D47A1;
  --primary-light:#E8F1FD;
  --accent:#FF7A45;
  --whatsapp:#25D366;
  --whatsapp-dark:#1EBE5A;
  --bg:#F7F9FC;
  --surface:#FFFFFF;
  --text:#1E2B3A;
  --text-light:#6B7785;
  --border:#E3E8EF;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(15,40,80,.08);
  --shadow-lg:0 20px 50px rgba(15,40,80,.16);
  --container:1140px;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

.container{
  width:92%;
  max-width:var(--container);
  margin:0 auto;
}

/* ============ BOTONES BASE ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:var(--radius);
  font-family:inherit;
  font-weight:600;
  font-size:16px;
  padding:14px 22px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 20px rgba(255,122,69,.35);
}
.btn-primary:hover{ background:#ff6a30; }

.btn-whatsapp{
  background:var(--whatsapp);
  color:#fff;
  box-shadow:0 8px 20px rgba(37,211,102,.35);
}
.btn-whatsapp:hover{ background:var(--whatsapp-dark); }

.btn-ghost{
  background:#fff;
  color:var(--primary);
  border:1px solid var(--border);
}
.btn-ghost:hover{ border-color:var(--primary); }

.btn-sm{
  font-size:13px;
  padding:9px 14px;
}

.btn-block{ width:100%; }

/* ============ TOPBAR ============ */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 0;
}
.logo{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.5px;
  text-decoration:none;
  white-space:nowrap;
}
.logo span{ color:var(--primary); }

.topbar__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.topbar__cta{
  font-size:14px;
  padding:10px 18px;
  white-space:nowrap;
}

/* Botón icono (identificarse) */
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:50%;
  font-size:17px;
  cursor:pointer;
  color:var(--primary);
}
.icon-btn:hover{ border-color:var(--primary); }

/* ============ SELECTOR DE IDIOMA (reutiliza patrón multiselect) ============ */
.lang-select{
  min-width:0;
}
.lang-select .multiselect__toggle{
  padding:9px 10px;
  font-size:13px;
  font-weight:600;
  gap:4px;
  min-width:78px;
}
.lang-select .multiselect__panel{
  min-width:170px;
  left:auto;
  right:0;
  max-height:none;
  padding:6px;
}
.lang-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:none;
  background:none;
  font-family:inherit;
  font-size:14px;
  padding:9px 8px;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
  color:var(--text);
}
.lang-option:hover{ background:var(--bg); }
.lang-option.active{
  background:var(--primary-light);
  color:var(--primary-dark);
  font-weight:700;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:36px 0 56px;
  background:
    linear-gradient(135deg, rgba(13,71,161,.82), rgba(21,101,192,.58)),
    url('../images/hero-area-image-background1.jpg') center/cover no-repeat;
}

.hero__content{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:28px;
}

/* La caja del formulario puede ocupar más ancho (hasta 95% en mobile,
   75% en desktop) para que el formulario sea menos alto/largo. */
.hero .container{
  width:95%;
}

.hero__card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:28px 22px;
  width:100%;
  max-width:680px;
  text-align:center;
}

.hero__card h1{
  font-size:26px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.5px;
  margin-bottom:10px;
}

.hero__subtitle{
  font-size:15px;
  color:var(--text-light);
  margin-bottom:20px;
}

/* Action toggle: vender / comprar / alquilar */
.action-toggle{
  display:flex;
  gap:8px;
  background:var(--bg);
  border-radius:var(--radius);
  padding:6px;
  margin-bottom:18px;
}
.action-btn{
  flex:1;
  border:none;
  background:transparent;
  color:var(--text-light);
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  padding:12px 6px;
  border-radius:8px;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.action-btn.active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(21,101,192,.35);
}

/* Botones principales (Quiero vender / comprar / alquilar): mismo naranja
   que el CTA "Ver opciones recomendadas" cuando están seleccionados. */
.action-toggle--main .action-btn.active{
  background:var(--accent);
  box-shadow:0 6px 16px rgba(255,122,69,.35);
}

/* Sub-toggle: busco alquilar / pongo en alquiler */
.action-toggle--sub{
  margin-top:-10px;
  padding:4px;
  background:transparent;
  border:1px solid var(--border);
}
.action-toggle--sub .action-btn{
  font-size:12px;
  padding:9px 6px;
  color:var(--text);
}
.action-toggle--sub .action-btn.active{
  box-shadow:none;
}

/* ============ FORM (search-box) ============ */
.search-box{
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
}

.field-group{ width:100%; }

.field-label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.field-label .optional{
  font-weight:400;
  color:var(--text-light);
  text-transform:none;
}

.text-input{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:14px;
  background:#fff;
}
.text-input:focus{
  outline:2px solid var(--primary-light);
  border-color:var(--primary);
}

input[type="file"].text-input{
  padding:10px 14px;
  font-size:13px;
  cursor:pointer;
}

/* Datos extra de la propiedad (vender / pongo en alquiler) */
.extra-fields{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:14px;
  border-top:1px dashed var(--border);
}
.extra-fields .field-group{ width:100%; }

/* Transición suave al cambiar de formulario (vender/comprar/alquilar) */
@keyframes im-fade-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.im-fade-in{
  animation:im-fade-in .28s ease;
}

/* ----- Multiselect / dropdown genérico (zona, tipo, idioma) ----- */
.multiselect{ position:relative; }

.multiselect__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  font-family:inherit;
  font-size:14px;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.multiselect__toggle .ms-arrow{
  color:var(--text-light);
  transition:transform .2s ease;
  flex:none;
}
.multiselect.open .multiselect__toggle{
  border-color:var(--primary);
  outline:2px solid var(--primary-light);
}
.multiselect.open .ms-arrow{ transform:rotate(180deg); }

.ms-toggle-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.multiselect__panel{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  max-height:280px;
  overflow-y:auto;
  z-index:40;
  padding:10px 12px;
}
.multiselect.open .multiselect__panel{ display:block; }

.ms-group{ margin-bottom:6px; }
.ms-group__title{
  font-size:11px;
  font-weight:800;
  color:var(--primary-dark);
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:10px 0 4px;
}
.ms-group:first-child .ms-group__title{ margin-top:0; }

.ms-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 4px;
  font-size:14px;
  cursor:pointer;
  border-radius:8px;
}
.ms-option:hover{ background:var(--bg); }
.ms-option input{
  width:17px;
  height:17px;
  accent-color:var(--primary);
  flex:none;
}

.ms-other-input{
  display:none;
  margin:6px 0 4px;
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
}
.ms-other-input.show{ display:block; }
.ms-other-input:focus{
  outline:2px solid var(--primary-light);
  border-color:var(--primary);
}

/* ----- Servicios esperados (chips dinámicos) ----- */
.services-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:500;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:9px 13px;
  cursor:pointer;
  transition:all .15s ease;
}
.chip input{
  accent-color:var(--primary);
  width:14px;
  height:14px;
}
.chip.active{
  background:var(--primary-light);
  border-color:var(--primary);
  color:var(--primary-dark);
  font-weight:700;
}

/* ----- Textarea + dictado ----- */
.textarea-wrap{ position:relative; }
.textarea-wrap textarea{
  width:100%;
  padding:14px 50px 14px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:14px;
  resize:vertical;
}
.textarea-wrap textarea:focus{
  outline:2px solid var(--primary-light);
  border-color:var(--primary);
}

.mic-btn{
  position:absolute;
  right:8px;
  top:8px;
  width:38px;
  height:38px;
  border:none;
  background:var(--primary-light);
  color:var(--primary);
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.mic-btn:hover{ background:#d7e8fb; }
.mic-btn.listening{
  background:var(--accent);
  color:#fff;
  animation:pulse 1s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,122,69,.5); }
  50%{ box-shadow:0 0 0 8px rgba(255,122,69,0); }
}

.hero__hint{
  margin-top:8px;
  font-size:12px;
  color:var(--text-light);
}

/* ============ SECTIONS GENERIC ============ */
.section{
  padding:48px 0;
  text-align:center;
}
.section--alt{ background:var(--surface); }

.section h2{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.4px;
  margin-bottom:10px;
  line-height:1.3;
}
.section .lead{
  font-size:15px;
  color:var(--text-light);
  max-width:560px;
  margin:0 auto;
}

/* ============ DIFERENCIAL ============ */
.diferencial{
  background:var(--primary-light);
}
.diferencial h2{ color:var(--primary-dark); }

/* ============ ÁREAS / BENEFICIOS ============ */
.cards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:28px;
  text-align:left;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;
}
.card__icon{
  font-size:26px;
  margin-bottom:10px;
}
.card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}
.card p{
  font-size:14px;
  color:var(--text-light);
}
.badge-soon{
  display:inline-block;
  margin-top:10px;
  font-size:11px;
  font-weight:700;
  color:var(--primary-dark);
  background:var(--primary-light);
  padding:4px 10px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* ============ VALOR / CONFIANZA ============ */
.value-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:28px;
  text-align:left;
}
.value-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--bg);
  border-radius:var(--radius-lg);
  padding:18px;
}
.value-item__icon{
  flex:none;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.value-item h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:4px;
}
.value-item p{
  font-size:13px;
  color:var(--text-light);
}

/* ============ HERO SIDE COLUMN (solo desktop) ============ */
/* Columna lateral al formulario: imágenes de contexto + bullets de confianza.
   Se oculta en mobile — solo el formulario es visible en pantallas chicas. */
.hero__side{
  display:none; /* oculto en mobile */
  flex-direction:column;
  gap:16px;
  flex:0 0 230px;
}

.hero__side-gallery{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero__side-gallery img{
  width:100%;
  height:108px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  display:block;
}

/* ============ MICRO CONFIANZA (dentro del hero__side) ============ */
.hero__trust{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
}
.hero__trust li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.hero__trust li::before{
  content:'✔';
  color:var(--accent);
  font-weight:800;
  flex:none;
}

/* ============ CTA SUAVE (link tipo texto) ============ */
.link-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:var(--primary-dark);
  text-decoration:none;
}
.link-cta:hover{ text-decoration:underline; }

/* ============ ¿CÓMO FUNCIONA? (3 pasos) ============ */
.steps-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:28px;
  text-align:left;
}
.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
}
.step__number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-weight:800;
  font-size:15px;
  margin-bottom:12px;
}
.step h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}
.step p{
  font-size:14px;
  color:var(--text-light);
}
@media (min-width:640px){
  .steps-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ============ IMAGEN BANNER ANCHA (arriba del título de sección) ============ */
.section-banner{
  display:block;
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:var(--radius-lg);
  margin-bottom:24px;
  box-shadow:var(--shadow);
}
@media (min-width:640px){
  .section-banner{ height:220px; }
}

/* ============ BLOQUES VENDER / COMPRAR / ALQUILAR (imagen + texto) ============ */
.split-block .container{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
}
/* Imagen en split-block: puede ser <img> directo o <div> con emoji */
.split-block__media{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  object-fit:cover;
  box-shadow:var(--shadow);
  display:block;
  flex:none;
}
.split-block__content{
  text-align:left;
  width:100%;
}
.split-block__content h2{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.4px;
  margin-bottom:12px;
  line-height:1.3;
}
.split-block__content p{
  font-size:14px;
  color:var(--text-light);
  margin-bottom:12px;
}
.split-block__content .btn{ margin-top:6px; }

/* Texto en bloque split sobre fondo de color (diferencial/highlight) */
.section--highlight .split-block__content h2{ color:#fff; }
.section--highlight .split-block__content p{ color:rgba(255,255,255,.85); }

@media (min-width:768px){
  .split-block .container{
    flex-direction:row;
    gap:48px;
    align-items:center;
  }
  .split-block--reverse .container{
    flex-direction:row-reverse;
  }
  .split-block__media,
  .split-block__content{
    flex:1;
    width:auto;
  }
}

/* ============ BLOQUE DIFERENCIAL (destacado) ============ */
.section--highlight{
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  color:#fff;
}
.section--highlight h2{
  color:#fff;
  font-size:24px;
  max-width:640px;
  margin:0 auto 14px;
}
.section--highlight .lead{
  color:rgba(255,255,255,.88);
  max-width:640px;
}
.section--highlight .lead + .lead{ margin-top:10px; }

/* ============ BLOQUE FUTURO ============ */
.section--futuro .lead{ max-width:640px; }
.futuro-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:420px;
  margin:20px auto 0;
  padding:0;
  text-align:left;
}
.futuro-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  color:var(--text);
  font-weight:600;
}
.futuro-list li::before{
  content:'✔';
  color:var(--primary);
  font-weight:800;
}

/* ============ CTA FINAL ============ */
.cta-final{
  background:linear-gradient(135deg, var(--accent), #FF9466);
  color:#fff;
}
.cta-final h2{ color:#fff; }
.cta-final .lead{ color:rgba(255,255,255,.9); }
.cta-final .split-block__content p{ color:rgba(255,255,255,.88); }
.btn-light{
  background:#fff;
  color:var(--accent);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.btn-light:hover{ background:#fff; opacity:.94; }

/* ============ WHATSAPP SECTION ============ */
.whatsapp-section{
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  color:#fff;
}
.whatsapp-section h2{ color:#fff; }
.whatsapp-section .lead{ color:rgba(255,255,255,.85); }
.whatsapp-section .btn{ margin-top:20px; }

/* ============ LISTADO / TARJETAS (para futuras páginas de resultados) ============ */
.listado-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:28px;
}
.listing-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  text-align:left;
  box-shadow:var(--shadow);
  transition:opacity .25s ease, transform .25s ease;
}
.listing-card.hidden{
  display:none;
}
.listing-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}
.listing-card h3{
  font-size:16px;
  font-weight:700;
}
.listing-card .tag{
  font-size:11px;
  font-weight:700;
  color:var(--primary-dark);
  background:var(--primary-light);
  padding:4px 10px;
  border-radius:20px;
  white-space:nowrap;
}
.listing-card p{
  font-size:13px;
  color:var(--text-light);
  margin-bottom:14px;
}
.listing-card .specialties{
  font-size:12px;
  color:var(--text-light);
  margin-bottom:14px;
}
.listado-empty{
  display:none;
  font-size:14px;
  color:var(--text-light);
  margin-top:16px;
}

/* ============ PÁGINAS DE CONTENIDO (Quiénes somos, Términos, Privacidad, Contacto) ============ */
.page-hero{
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  color:#fff;
  padding:40px 0;
  text-align:center;
}
.page-hero h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.5px;
}
.page-hero p{
  margin-top:8px;
  font-size:14px;
  color:rgba(255,255,255,.85);
}

.page-content{
  padding:36px 0 56px;
}
.page-content .container{
  max-width:760px;
}
.page-content h2{
  font-size:19px;
  font-weight:800;
  margin:28px 0 10px;
  letter-spacing:-.3px;
}
.page-content h2:first-child{ margin-top:0; }
.page-content p{
  font-size:14px;
  color:var(--text-light);
  margin-bottom:12px;
}
.page-content ul{
  margin:0 0 12px 20px;
  font-size:14px;
  color:var(--text-light);
}
.page-content li{ margin-bottom:6px; }
.page-content a{ color:var(--primary); }

.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:8px;
}
.contact-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
  text-align:left;
}
.contact-card h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}
.contact-card p{ margin-bottom:10px; }

/* ============ FOOTER ============ */
.footer{
  background:var(--text);
  color:#cdd6e0;
  padding:32px 0 100px;
  text-align:center;
  font-size:13px;
}
.footer strong{ color:#fff; }
.footer a{ color:#9fc1f0; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 16px;
  margin:14px 0;
  padding:0;
  list-style:none;
}
.footer-links a{
  font-weight:600;
}

/* ============ WHATSAPP FLOTANTE ============ */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:58px;
  height:58px;
  background:var(--whatsapp);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(37,211,102,.45);
  z-index:60;
  border:none;
  cursor:pointer;
}
.whatsapp-float svg{ width:28px; height:28px; }

/* ============ MODALES (chat / login) ============ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,30,50,.45);
  z-index:80;
  display:none;
  align-items:flex-end;
  justify-content:center;
}
.modal-overlay.open{ display:flex; }

.modal-box{
  background:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;
  max-width:420px;
  padding:22px;
  box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
  position:relative;
  max-height:90vh;
  overflow-y:auto;
}
@keyframes slideUp{
  from{ transform:translateY(30px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.modal-box h3{
  font-size:17px;
  font-weight:800;
  margin-bottom:4px;
}
.modal-box .modal-sub{
  font-size:13px;
  color:var(--text-light);
  margin-bottom:14px;
}
.modal-box textarea{
  width:100%;
  min-height:100px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  font-family:inherit;
  font-size:14px;
  resize:vertical;
  margin-bottom:12px;
}
.modal-box textarea:focus{
  outline:2px solid var(--primary-light);
  border-color:var(--primary);
}
.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  border:none;
  background:var(--bg);
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:16px;
  cursor:pointer;
  color:var(--text-light);
}

/* ----- Login / identificación ----- */
.social-login{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.social-btn{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:600;
}
.social-btn:hover{ border-color:var(--primary); }

.divider{
  display:flex;
  align-items:center;
  text-align:center;
  font-size:12px;
  color:var(--text-light);
  margin:14px 0;
}
.divider::before, .divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}
.divider span{ padding:0 10px; }

#claveResultado{
  background:var(--primary-light);
  color:var(--primary-dark);
  border-radius:var(--radius);
  padding:10px 12px;
  margin-top:10px;
  font-size:13px;
  font-weight:600;
}

/* ============ COOKIE BANNER ============ */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:90;
  background:#fff;
  border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(15,40,80,.12);
  padding:16px;
  display:none;
  flex-direction:column;
  gap:12px;
}
.cookie-banner.show{ display:flex; }

.cookie-banner__text{
  font-size:12.5px;
  color:var(--text-light);
  line-height:1.5;
}
.cookie-banner__text strong{ color:var(--text); }

.cookie-banner__actions{
  display:flex;
  gap:10px;
}
.cookie-banner__actions .btn{
  flex:1;
  font-size:13px;
  padding:11px 14px;
}

/* ============ DESKTOP / TABLET ============ */
@media (min-width:640px){
  .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .listado-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:960px){
  .hero{ padding:64px 0 90px; }
  /* Con la columna lateral visible, la card toma el espacio restante */
  .hero__side{ display:flex; }
  .hero__card{ flex:1; max-width:none; padding:40px; }
  .hero__card h1{ font-size:36px; }
  .hero__subtitle{ font-size:17px; }
  .action-btn{ font-size:15px; padding:14px 10px; }
  .section h2{ font-size:28px; }
  .cards-grid{ grid-template-columns:repeat(3,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .listado-grid{ grid-template-columns:repeat(3,1fr); }

  .cookie-banner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:18px 24px;
  }
  .cookie-banner__text{ flex:1; }
  .cookie-banner__actions{ flex:none; }
  .cookie-banner__actions .btn{ flex:none; }

  /* Resultados desktop */
  .im-cards{ grid-template-columns:repeat(3,1fr); }
}

/* ── EXPLORADOR POR ETIQUETAS ───────────────────────────────────── */

.explorador {
  background: #F0F4FF;
  border-top: 3px solid var(--primary, #1565C0);
}

.etiquetas-grupos {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 2rem 0;
}

.etiquetas-grupo__titulo {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #888;
  margin-bottom: .55rem;
}

.etiquetas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .42rem .9rem;
  border-radius: 2rem;
  border: 2px solid #C8D6F0;
  background: #fff;
  color: #555;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
  line-height: 1.3;
}

.etiqueta:hover {
  border-color: var(--primary, #1565C0);
  color: var(--primary, #1565C0);
}

.etiqueta--activa {
  border-color: #E65100;
  background: #E65100;
  color: #fff;
}

.etiqueta--activa:hover {
  border-color: #BF360C;
  background: #BF360C;
}

.explorador__acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border-radius: .75rem;
  border: 1px solid #D0DCF5;
  min-height: 3.5rem;
}

.explorador__seleccion {
  flex: 1;
  font-size: .88rem;
  color: #777;
  word-break: break-word;
}

.explorador__btn { flex-shrink: 0; white-space: nowrap; }

.explorador__resultado-header {
  margin: 2rem 0 .75rem;
  color: #555;
  font-size: .95rem;
}

.explorador__vacio {
  margin: 2rem 0;
  color: #999;
  text-align: center;
  font-style: italic;
}

#explorador-resultados .im-cards { margin-top: 0; }

/* ============ RESULTADOS: CARDS DE INMOBILIARIAS ============ */
.im-resultados{
  background:var(--primary-light);
  border-top:3px solid var(--primary);
}
.im-resultados h2{
  font-size:22px;
  color:var(--primary-dark);
  margin-bottom:6px;
}
.im-resultados h2 em{
  font-style:normal;
  color:var(--accent);
}
.im-resultados .lead{
  color:var(--text-light);
  margin-bottom:24px;
}

/* Grid responsive de cards */
.im-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:24px;
}
@media(min-width:600px){
  .im-cards{ grid-template-columns:repeat(2,1fr); }
}

/* Card individual */
.im-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:box-shadow .2s ease, transform .15s ease;
}
.im-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.im-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.im-card__nombre{
  font-size:16px;
  font-weight:700;
  color:var(--primary-dark);
  line-height:1.3;
}
.im-card__badge{
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  color:var(--primary-dark);
  background:var(--primary-light);
  border:1px solid var(--primary);
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}

.im-card__body{ display:flex; flex-direction:column; gap:4px; flex:1; }
.im-card__info{
  font-size:13px;
  color:var(--text-light);
}

.im-card__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.im-card__btn{
  flex:1;
  font-size:14px;
  padding:10px 14px;
  min-width:120px;
}

/* Nota al pie de resultados */
.im-resultados__nota{
  font-size:13px;
  color:var(--text-light);
  text-align:center;
  margin-top:8px;
}
.im-resultados__nota .link-cta{
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
  color:var(--primary);
  font-weight:600;
  text-decoration:underline;
  padding:0;
}