/* Copia textual del CSS de rediseño/mockups/buscador-propiedades.html
   No modificar sin revisar antes con el mockup original. */
:root{
  --navy:#1F2A5C; --blue:#2F8FCC; --blue-soft:#A7B8E8; --gray-900:#2B2B2E;
  --gray-600:#65707A; --gray-100:#F1F3F7; --white:#fff;
  --display:'Sora', sans-serif; --body:'Inter', sans-serif;
}

/* ============ HERO + BUSCADOR ============ */
/* padding-bottom bajado de 90px a 20px (pedido explícito: apretar el espacio
   entre el buscador y el primer acordeón de destacados de abajo). Diverge
   del mockup original a propósito. */
.hero-search{position:relative; padding:0 0 20px;}
.hero-bg{height:300px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0;}
.hero-bg::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,27,61,0.75) 0%, rgba(31,42,92,0.55) 55%, rgba(31,42,92,0.92) 100%);}
/* hero-title ahora vive DENTRO de hero-bg y se centra con flexbox: no depende de
   un número mágico de píxeles, así que no se superpone con la tarjeta de abajo
   sea cual sea la cantidad de líneas que ocupe el título. */
/* margin-bottom en vez de mover con top/transform: .hero-bg lo centra con
   flexbox (align-items:center), así que un margen asimétrico lo empuja
   hacia arriba dentro del centrado sin volver a depender de un número
   mágico de píxeles fijo (ver comentario de arriba). */
.hero-title{position:relative; z-index:2; text-align:center; padding:0 24px; margin-bottom:48px;}
.hero-title .eyebrow{color:#BFD4F0; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; margin-bottom:8px;}
.hero-title h1{font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,34px); color:#fff; max-width:960px; margin:0 auto; line-height:1.25; white-space:normal;}

.search-card{position:relative; z-index:3; max-width:1080px; margin:-64px auto 0; background:var(--white);
  border-radius:20px; box-shadow:0 24px 60px -12px rgba(20,27,61,0.28); border:1px solid #ECEFF5; overflow:visible;}

.search-row{display:flex; align-items:stretch; padding:10px; gap:4px; flex-wrap:wrap;}
.field{position:relative; flex:1; min-width:140px;}
.field label{display:block; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--blue); padding:10px 14px 0;}
.field select, .field input{width:100%; border:none; background:none; font-family:var(--body); font-size:14.5px;
  font-weight:600; color:var(--navy); padding:2px 14px 10px; appearance:none; cursor:pointer;}
/* input[type=date] no lleva appearance:none: en Chrome eso anula el ícono/disparador
   nativo del calendario y el campo deja de abrir el selector al hacer clic. */
.field input[type="date"]{appearance:auto; -webkit-appearance:auto;}
.field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:1;}
.field input::placeholder{color:var(--gray-600); font-weight:500;}
.field:not(:last-child)::after{content:''; position:absolute; right:0; top:14px; bottom:14px; width:1px; background:#EEF0F4; pointer-events:none;}
.field:hover{background:var(--gray-100); border-radius:12px;}
.field .chev{position:absolute; right:12px; bottom:12px; width:9px; height:9px; border-right:2px solid var(--gray-600);
  border-bottom:2px solid var(--gray-600); transform:rotate(45deg); pointer-events:none;}

.search-actions{display:flex; align-items:center; gap:8px; padding-left:6px;}
.btn-more{display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--blue); font-weight:700;
  font-size:13.5px; padding:10px 14px; border-radius:10px; cursor:pointer; transition:background .2s ease; white-space:nowrap;}
.btn-more:hover{background:rgba(47,143,204,0.1);}
.btn-more svg{transition:transform .25s ease;}
.btn-more.open svg{transform:rotate(180deg);}
.btn-search{display:flex; align-items:center; gap:8px; background:linear-gradient(120deg, var(--navy), var(--blue));
  color:#fff; border:none; font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:12px; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; white-space:nowrap;}
.btn-search:hover{transform:translateY(-2px); box-shadow:0 12px 24px -6px rgba(47,143,204,0.45);}

/* ============ PANEL "MÁS FILTROS" ============ */
.more-panel{max-height:0; overflow:hidden; transition:max-height .35s ease; border-top:1px solid transparent;}
.more-panel.open{max-height:600px; border-top:1px solid #EEF0F4;}
.more-inner{padding:22px 24px 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.more-field label{display:block; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--gray-600); margin-bottom:6px;}
.more-field input, .more-field select{width:100%; border:1px solid #E2E7F2; background:var(--gray-100); border-radius:10px;
  padding:11px 14px; font-size:14px; font-family:var(--body); color:var(--navy); font-weight:600;}
.more-field input::placeholder{color:#9AA5B4; font-weight:500;}

.amenities{grid-column:1/-1; margin-top:4px;}
.amenities-label{font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:var(--gray-600); margin-bottom:10px; display:block;}
.chip-grid{display:flex; gap:8px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:100px; border:1.5px solid #E2E7F2;
  background:var(--white); font-size:13px; font-weight:600; color:var(--gray-600); cursor:pointer;
  transition:all .18s ease; user-select:none;}
.chip input{display:none;}
.chip:hover{border-color:var(--blue-soft);}
.chip.checked{background:linear-gradient(120deg, var(--navy), var(--blue)); border-color:transparent; color:#fff;}
.chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.5;}
.chip.checked .dot{opacity:1;}

.more-footer{grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.btn-clear{background:none; border:1.5px solid #E2E7F2; color:var(--gray-600); font-weight:700; font-size:13.5px;
  padding:10px 20px; border-radius:10px; cursor:pointer; transition:border-color .2s ease, color .2s ease;}
.btn-clear:hover{border-color:var(--navy); color:var(--navy);}

/* ============ RESULTADOS (contexto, referencial) ============ */
.results-strip{max-width:1080px; margin:36px auto 0; padding:0 24px; display:flex; justify-content:space-between;
  align-items:baseline; color:var(--gray-600); font-size:14px;}
.results-strip b{color:var(--navy); font-family:var(--display);}
.sort-label{display:flex; align-items:center; gap:8px; color:var(--gray-600); font-size:14px; cursor:pointer;}
.sort-select{border:1.5px solid #E2E7F2; background:var(--white); color:var(--navy); font-weight:700; font-size:13.5px;
  font-family:var(--body); padding:8px 12px; border-radius:9px; cursor:pointer;}

/* ============ MOBILE ============ */
@media(max-width:800px){
  .hero-bg{height:280px;}
  .hero-title h1{font-size:19px;}
  .search-card{margin:-50px 16px 0; border-radius:18px;}
  /* 2 campos por fila, mismo criterio que el resto de las secciones (antes
     1 por fila acá porque este archivo nunca se sincronizó con el fix que
     se hizo en theme.css). */
  .search-row{display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; padding:14px 16px 6px;}
  .field{min-width:0;}
  .field:not(:last-child)::after{display:none;}
  .field-link{grid-column:1/-1;}
  .search-actions{flex-direction:column; padding:10px 6px 6px; gap:8px; grid-column:1/-1;}
  .btn-more{width:100%; justify-content:center; background:var(--gray-100); border-radius:10px;}
  .btn-search{width:100%; justify-content:center;}
  .more-inner{grid-template-columns:1fr 1fr; padding:18px 16px 20px;}
  .more-footer{flex-direction:column-reverse;}
  .btn-clear, .more-footer .btn-search{width:100%; justify-content:center;}
  .results-strip{margin-top:24px; flex-direction:column; gap:4px;}
}