/* ============================================================
   CasaIdeal MX — main.css
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream:   #FAF8F3;
  --sand:    #E8E0D0;
  --dark:    #1A1510;
  --mid:     #6B6255;
  --light:   #F2EDE4;
  --accent:  #C4862A;
  --green:   #2A5C4E;
  --white:   #FFFFFF;
  --radius:  8px;
  --shadow:  0 4px 20px rgba(0,0,0,0.07);
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--dark); overflow-x: hidden; }
h1,h2,h3,.serif { font-family: 'Playfair Display', serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── NAV ── */
.navbar {
  background: var(--dark); padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; position: sticky; top: 0; z-index: 900;
}
.logo { font-family: 'Playfair Display',serif; font-size: 1.3rem; color: #fff; }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: rgba(255,255,255,.7); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; transition: color .2s; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { background: var(--accent); color: #fff; border: none; padding: .5rem 1.2rem; font-family: 'DM Sans',sans-serif; font-size: .82rem; border-radius: 3px; cursor: pointer; transition: opacity .2s; }
.nav-cta:hover { opacity: .85; }
.nav-hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ── HERO ── */
.hero { background: var(--dark); padding: 5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 65% 40%, rgba(196,134,42,.12) 0%, transparent 65%); pointer-events:none; }
.hero-badge { display:inline-block; border:1px solid rgba(196,134,42,.5); color:var(--accent); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; padding:.4rem 1rem; border-radius:20px; margin-bottom:1.5rem; }
.hero h1 { color:#fff; font-size:3rem; line-height:1.15; font-weight:700; max-width:680px; margin:0 auto .9rem; }
.hero h1 em { color:var(--accent); font-style:italic; }
.hero p { color:rgba(255,255,255,.55); font-size:1.05rem; max-width:460px; margin:0 auto 2rem; }
.hero-stats { display:flex; gap:3rem; justify-content:center; padding-top:2.5rem; border-top:1px solid rgba(255,255,255,.08); margin-top:2.5rem; }
.stat-n { font-family:'Playfair Display',serif; font-size:1.9rem; color:#fff; }
.stat-l { font-size:.72rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.1em; margin-top:.2rem; }

/* ── BUSCADOR ── */
.search-section { background:var(--white); border-bottom:1px solid var(--sand); padding:1.8rem 2rem; }
.search-label { text-align:center; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mid); margin-bottom:1rem; }
.search-box { max-width:960px; margin:0 auto; background:var(--cream); border:1px solid var(--sand); border-radius:var(--radius); padding:1.2rem 1.5rem; }
.search-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:1rem; align-items:end; }
.sf label { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mid); display:block; margin-bottom:.3rem; }
.sf select, .sf input[type=text] {
  width:100%; background:var(--white); border:1px solid var(--sand);
  border-radius:4px; padding:.6rem .8rem; font-family:'DM Sans',sans-serif;
  font-size:.9rem; color:var(--dark); outline:none; transition:border-color .2s;
}
.sf select:focus, .sf input:focus { border-color:var(--accent); }
.btn-search { background:var(--accent); color:#fff; border:none; padding:.65rem 1.4rem; border-radius:4px; font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:500; cursor:pointer; white-space:nowrap; transition:opacity .2s; }
.btn-search:hover { opacity:.88; }

.price-row { display:flex; align-items:center; gap:1rem; margin-top:.9rem; }
.price-row label { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mid); white-space:nowrap; }
.price-row input[type=range] { flex:1; accent-color:var(--accent); }
.price-val { font-size:.85rem; font-weight:500; min-width:100px; text-align:right; }

.tags-row { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--sand); align-items:center; }
.tag-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mid); }
.tag { background:var(--white); border:1px solid var(--sand); border-radius:20px; padding:.3rem .75rem; font-size:.78rem; cursor:pointer; color:var(--mid); transition:all .2s; user-select:none; }
.tag:hover, .tag.active { background:var(--dark); color:#fff; border-color:var(--dark); }

/* ── LAYOUT PRINCIPAL ── */
.main-layout { display:grid; grid-template-columns:1fr 420px; min-height:calc(100vh - 64px); }

/* ── LISTA ── */
.prop-list { padding:1.5rem; overflow-y:auto; max-height:calc(100vh - 64px - 140px); }
.list-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.list-header h2 { font-size:1.2rem; }
.res-count { font-size:.82rem; color:var(--mid); }
.sort-sel { background:var(--white); border:1px solid var(--sand); border-radius:4px; padding:.4rem .7rem; font-size:.82rem; font-family:'DM Sans',sans-serif; }

/* ── CARD PROPIEDAD ── */
.prop-card {
  background:var(--white); border:1px solid var(--sand); border-radius:10px;
  overflow:hidden; display:grid; grid-template-columns:145px 1fr;
  margin-bottom:1rem; cursor:pointer; transition:all .25s;
  animation:slideUp .3s ease both;
}
.prop-card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.prop-card.highlight { border-color:var(--accent); box-shadow:0 0 0 2px rgba(196,134,42,.25); }

@keyframes slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.card-img { background:var(--sand); position:relative; min-height:120px; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; }
.card-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; background:linear-gradient(135deg,#ddd5c2,#c8bfae); }
.card-badge { position:absolute; top:7px; left:7px; background:var(--green); color:#fff; font-size:.62rem; padding:.2rem .5rem; border-radius:3px; text-transform:uppercase; letter-spacing:.05em; }
.card-fav { position:absolute; top:6px; right:6px; background:rgba(255,255,255,.9); border:none; border-radius:50%; width:26px; height:26px; cursor:pointer; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.card-fav:hover { transform:scale(1.15); }

.card-info { padding:.85rem 1rem; }
.card-precio { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; }
.card-titulo { font-size:.88rem; font-weight:500; margin:.15rem 0; }
.card-loc { font-size:.73rem; color:var(--mid); display:flex; align-items:center; gap:.3rem; margin-bottom:.5rem; }
.card-specs { display:flex; gap:.7rem; font-size:.71rem; color:var(--mid); border-top:1px solid var(--sand); padding-top:.5rem; }

/* ── MAPA ── */
.map-panel { position:sticky; top:64px; height:calc(100vh - 64px); }
#mapa { width:100%; height:100%; }

/* ── MODAL PROPIEDAD ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--white); border-radius:14px; max-width:640px; width:100%; max-height:90vh; overflow-y:auto; position:relative; }
.modal-close { position:absolute; top:1rem; right:1rem; background:var(--white); border:1px solid var(--sand); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:1.1rem; z-index:5; display:flex; align-items:center; justify-content:center; }
.modal-img { background:var(--sand); height:230px; display:flex; align-items:center; justify-content:center; font-size:4.5rem; border-radius:14px 14px 0 0; overflow:hidden; }
.modal-img img { width:100%; height:100%; object-fit:cover; }
.modal-body { padding:1.5rem; }
.modal-precio { font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:700; }
.modal-titulo { font-size:1.1rem; font-weight:500; margin:.3rem 0; }
.modal-loc { font-size:.85rem; color:var(--mid); margin-bottom:1rem; }
.modal-specs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; background:var(--cream); border-radius:var(--radius); padding:1rem; margin-bottom:1.2rem; }
.ms { text-align:center; }
.ms-val { font-size:1.1rem; font-weight:600; }
.ms-lab { font-size:.68rem; color:var(--mid); text-transform:uppercase; letter-spacing:.08em; }
.modal-desc { font-size:.88rem; color:var(--mid); line-height:1.75; margin-bottom:1.3rem; }

.modal-contact-box { background:var(--dark); border-radius:10px; padding:1.2rem; }
.mc-label { color:#fff; font-size:.85rem; font-weight:500; margin-bottom:.8rem; }
.agent-row { display:flex; gap:.8rem; margin-bottom:1rem; }
.agent-chip { display:flex; align-items:center; gap:.5rem; flex:1; background:rgba(255,255,255,.08); border-radius:6px; padding:.5rem .7rem; }
.agent-av { width:32px; height:32px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.73rem; color:#fff; font-weight:600; flex-shrink:0; }
.agent-chip b { font-size:.78rem; color:#fff; display:block; }
.agent-chip span { font-size:.68rem; color:rgba(255,255,255,.45); }
.mc-btns { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.mc-btn { padding:.65rem; border-radius:5px; font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:500; cursor:pointer; border:none; display:flex; align-items:center; justify-content:center; gap:.4rem; transition:opacity .2s; }
.mc-btn:hover { opacity:.85; }
.mc-btn-wa  { background:#25D366; color:#fff; }
.mc-btn-tel { background:rgba(255,255,255,.12); color:#fff; }

/* ── FORMULARIO CONTACTO ── */
.modal-title-h { font-size:1.4rem; margin-bottom:.3rem; }
.modal-subtitle { font-size:.88rem; color:var(--mid); margin-bottom:1.2rem; }
.form-group { margin-bottom:.9rem; }
.form-group label { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mid); display:block; margin-bottom:.3rem; }
.form-group input, .form-group textarea {
  width:100%; border:1px solid var(--sand); border-radius:4px;
  padding:.65rem .8rem; font-family:'DM Sans',sans-serif; font-size:.9rem;
  color:var(--dark); outline:none; background:var(--cream); transition:border-color .2s;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-btns { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1rem; }
.btn-primary { background:var(--dark); color:#fff; border:none; padding:.7rem; border-radius:4px; font-family:'DM Sans',sans-serif; font-size:.88rem; cursor:pointer; font-weight:500; transition:opacity .2s; }
.btn-primary:hover { opacity:.85; }
.btn-wa { background:#25D366; color:#fff; border:none; padding:.7rem; border-radius:4px; font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500; cursor:pointer; text-align:center; display:block; transition:opacity .2s; }
.btn-wa:hover { opacity:.88; }
.form-msg { font-size:.82rem; margin-top:.7rem; }
.form-msg.ok { color:var(--green); }
.form-msg.err { color:#c0392b; }

/* ── CTA SECTION ── */
.cta-section { background:var(--dark); padding:4rem 2rem; text-align:center; }
.cta-section h2 { color:#fff; font-size:2rem; margin-bottom:.7rem; }
.cta-section p { color:rgba(255,255,255,.5); margin-bottom:2rem; }
.cta-cards { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.cta-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:1.2rem 1.6rem; min-width:170px; cursor:pointer; transition:all .2s; }
.cta-card:hover { background:rgba(196,134,42,.15); border-color:rgba(196,134,42,.4); }
.cta-card-icon { font-size:1.5rem; margin-bottom:.5rem; }
.cta-card-title { color:#fff; font-size:.88rem; font-weight:500; }
.cta-card-sub { color:rgba(255,255,255,.4); font-size:.74rem; margin-top:.2rem; }
.btn-cta { background:var(--accent); color:#fff; border:none; padding:.9rem 2.5rem; border-radius:4px; font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:500; cursor:pointer; transition:opacity .2s; }
.btn-cta:hover { opacity:.88; }

/* ── FLOAT BUTTONS ── */
.float-btns { position:fixed; bottom:1.5rem; right:1.5rem; z-index:850; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }
.fbtn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:30px; border:none; font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:500; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.2); transition:transform .2s; }
.fbtn:hover { transform:scale(1.04); }
.fbtn-wa  { background:#25D366; color:#fff; }
.fbtn-tel { background:var(--dark); color:#fff; }

/* ── SKELETON ── */
.skeleton { background:linear-gradient(90deg,var(--sand) 25%,var(--light) 50%,var(--sand) 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:4px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .main-layout { grid-template-columns:1fr; }
  .map-panel { height:320px; position:relative; top:0; }
  .prop-list { max-height:none; }
  .search-grid { grid-template-columns:1fr 1fr; }
  .search-grid .btn-search { grid-column:1/-1; }
  .hero h1 { font-size:2.2rem; }
  .hero-stats { gap:1.5rem; }
  .nav-links { display:none; }
  .nav-hamburger { display:block; }
}
@media (max-width: 560px) {
  .search-grid { grid-template-columns:1fr; }
  .prop-card { grid-template-columns:120px 1fr; }
  .modal-specs-grid { grid-template-columns:repeat(2,1fr); }
  .form-btns { grid-template-columns:1fr; }
  .mc-btns { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════
   FOTOS EN CARDS
   ══════════════════════════════════════════ */
.card-badge-360 {
  position:absolute; bottom:7px; left:7px;
  background:rgba(42,92,78,.9); color:#fff;
  font-size:.62rem; padding:.2rem .5rem; border-radius:3px;
}
.card-foto-cnt {
  position:absolute; bottom:7px; right:7px;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:.65rem; padding:.2rem .5rem; border-radius:3px;
  display:none;
}
.prop-card:hover .card-foto-cnt { display:block; }

/* ══════════════════════════════════════════
   MODAL PROPIEDAD v2 — CARRUSEL AIRBNB
   ══════════════════════════════════════════ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }

.modal-prop-box {
  background:var(--white); border-radius:14px;
  max-width:760px; width:100%; max-height:93vh;
  overflow:hidden; display:flex; flex-direction:column;
  position:relative;
}

/* ── Carrusel ── */
.carrusel-wrap {
  position:relative; background:#111;
  height:380px; flex-shrink:0; overflow:hidden;
}
.modal-carrusel-inner { width:100%; height:100%; }

.carrusel-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.92); border:none; border-radius:50%;
  width:40px; height:40px; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:10; box-shadow:0 2px 12px rgba(0,0,0,.25);
  transition:all .2s;
}
.carrusel-arrow:hover { background:#fff; transform:translateY(-50%) scale(1.08); }
.carrusel-arrow.prev { left:12px; }
.carrusel-arrow.next { right:12px; }

.carrusel-counter {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; font-size:.75rem;
  padding:.25rem .7rem; border-radius:20px; z-index:10;
}
.carrusel-dots {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:10;
}
.carrusel-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.5); border:none; cursor:pointer; padding:0; transition:all .2s;
}
.carrusel-dot.active { background:#fff; width:18px; border-radius:3px; }

/* Miniaturas scrollables */
.carrusel-thumbs-wrap {
  background:#000; padding:6px 8px;
  display:flex; gap:6px; overflow-x:auto;
  flex-shrink:0; scrollbar-width:thin;
}
.carrusel-thumbs-wrap::-webkit-scrollbar { height:3px; }
.carrusel-thumbs-wrap::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:2px; }
.carrusel-thumb {
  width:64px; height:44px; border-radius:4px; flex-shrink:0;
  background-size:cover; background-position:center;
  border:2px solid transparent; cursor:pointer; transition:border-color .2s;
}
.carrusel-thumb.active { border-color:var(--accent); }
.carrusel-thumb:hover { border-color:rgba(255,255,255,.5); }

/* Botón 360 sobre carrusel */
.btn-360-overlay {
  position:absolute; top:12px; right:12px; z-index:10;
  background:rgba(0,0,0,.65); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:20px; padding:.35rem .9rem; font-family:'DM Sans',sans-serif;
  font-size:.78rem; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:.4rem; transition:all .2s;
  backdrop-filter:blur(4px);
}
.btn-360-overlay:hover { background:var(--green); border-color:var(--green); }

/* ── Cuerpo del modal ── */
.modal-prop-body {
  overflow-y:auto; flex:1; padding:1.4rem 1.5rem;
}

/* ══════════════════════════════════════════
   MODAL 360° — PANNELLUM
   ══════════════════════════════════════════ */
.modal-360-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.95); z-index:2000;
  flex-direction:column;
}
.modal-360-overlay.open { display:flex; }

.modal-360-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1.2rem; background:rgba(0,0,0,.8);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0; z-index:10;
}
.modal-360-header h3 { color:#fff; font-size:1rem; font-weight:500; display:flex; align-items:center; gap:.5rem; }
.close-360 {
  background:rgba(255,255,255,.1); border:none; border-radius:50%;
  width:34px; height:34px; color:#fff; font-size:1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.close-360:hover { background:rgba(255,255,255,.2); }

#pannellum-container { flex:1; min-height:0; }

.sel-360-row {
  display:flex; gap:.5rem; padding:.7rem 1rem;
  background:rgba(0,0,0,.7); flex-shrink:0; overflow-x:auto;
  border-top:1px solid rgba(255,255,255,.08);
}
.sel-360-btn {
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.15);
  border-radius:20px; padding:.35rem .9rem; font-size:.78rem; cursor:pointer;
  font-family:'DM Sans',sans-serif; white-space:nowrap; transition:all .2s;
}
.sel-360-btn.active, .sel-360-btn:hover { background:var(--green); border-color:var(--green); }

.hint-360 {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.65); color:rgba(255,255,255,.7);
  font-size:.75rem; padding:.4rem 1rem; border-radius:20px;
  pointer-events:none; animation:fadeOut360 3s forwards 2s;
}
@keyframes fadeOut360 { to { opacity:0; } }

/* ══════════════════════════════════════════
   CP DROPDOWN
   ══════════════════════════════════════════ */
.cp-item {
  padding:.5rem .8rem; cursor:pointer; font-size:.83rem;
  border-bottom:1px solid var(--sand); transition:background .15s;
}
.cp-item:hover { background:var(--cream); }

/* ══════════════════════════════════════════
   PANNELLUM overrides
   ══════════════════════════════════════════ */
.pnlm-container { background:#0a0a0a !important; }
.pnlm-load-box { background:rgba(0,0,0,.7) !important; color:#fff !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:8px !important; }
.pnlm-lbar { background:var(--accent) !important; }

/* ── Modal box genérico ── */
.modal-box { background:var(--white); border-radius:14px; max-width:500px; width:100%; max-height:90vh; overflow-y:auto; position:relative; padding:1.8rem; }
.modal-close { position:absolute; top:1rem; right:1rem; background:var(--white); border:1px solid var(--sand); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; z-index:5; }
.modal-precio { font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:700; }
.modal-titulo { font-size:1.1rem; font-weight:500; margin:.3rem 0; }
.modal-loc { font-size:.85rem; color:var(--mid); margin-bottom:1rem; }
.modal-specs-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; background:var(--cream); border-radius:var(--radius); padding:.9rem; margin-bottom:1.2rem; }
.ms { text-align:center; }
.ms-val { font-size:1rem; font-weight:600; }
.ms-lab { font-size:.62rem; color:var(--mid); text-transform:uppercase; letter-spacing:.07em; }
.modal-desc { font-size:.88rem; color:var(--mid); line-height:1.75; margin-bottom:1.3rem; }
.modal-title-h { font-size:1.4rem; margin-bottom:.3rem; font-family:'Playfair Display',serif; }
.modal-subtitle { font-size:.88rem; color:var(--mid); margin-bottom:1.2rem; }