/* ==========================================================
   BASE — Quest-Nexo
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.65;
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-hero); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
p  { margin: 0 0 var(--space-4); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-6); }

/* ------------- SECTIONS ------------- */
section { padding: clamp(var(--space-16), 7vw, var(--space-24)) 0; }
.section-surface { background: var(--color-surface); }

/* ------------- LABEL PILL ------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.pill-primary { color: var(--color-primary); }
.pill-accent  { color: var(--color-accent); }

.section-head { text-align: center; margin-bottom: var(--space-12); }
.section-head .pill { margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }
.section-head.start { text-align: left; }

/* ------------- BUTTONS ------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.btn-primary   { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-outline   { border: 1.5px solid var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: #fff; }
.btn-ghost     { color: var(--color-ink); }
.btn-ghost:hover { color: var(--color-primary); }
.btn-lg { padding: 16px 28px; font-size: var(--text-base); }
.btn-sm { padding: 8px 14px; font-size: var(--text-xs); }

/* ------------- TOPBAR ------------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--space-8); justify-content: space-between;
  padding-block: 10px;
}
.topbar-info { display: flex; gap: var(--space-8); color: var(--color-muted); flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-info svg { color: var(--color-primary); }
.topbar-cta { color: #fff; background: var(--color-primary); padding: 8px 16px; border-radius: var(--radius); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; }
.topbar-cta:hover { background: var(--color-primary-dark); }

/* ------------- HEADER ------------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; }
.logo svg { width: 34px; height: 34px; }

.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav > li { position: relative; list-style: none; }
.nav > li > a,
.nav > li > button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-sm);
}
.nav > li > a:hover, .nav > li > button:hover { color: var(--color-primary); }
.nav > li.has-dd > button::after {
  content: ''; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  display: inline-block;
}
.nav ul { list-style: none; margin: 0; padding: 10px; position: absolute; top: 100%; left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--t);
}
.nav > li:hover > ul, .nav > li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav ul a { display: block; padding: 10px 14px; font-size: var(--text-sm); border-radius: var(--radius-sm); color: var(--color-text); }
.nav ul a:hover { color: var(--color-primary); background: var(--color-surface); }
.nav ul a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

.header-icons { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink); border: 1px solid var(--color-border); position: relative; }
.icon-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.icon-btn .badge { position: absolute; top: -4px; right: -4px; background: var(--color-primary); color: #fff; font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

.menu-toggle { display: none; }
@media (max-width: 1024px) {
  .nav, .header-icons .icon-search, .header-icons .icon-user, .header-icons .icon-cart { display: none; }
  .menu-toggle { display: inline-flex; }
  .topbar-info { display: none; }
}

/* Mobile nav panel */
.mobile-nav { display: none; }
.mobile-nav.open { display: block; background: #fff; border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-6); }
.mobile-nav a { display: block; padding: 10px 0; color: var(--color-ink); border-bottom: 1px solid var(--color-surface); font-size: var(--text-sm); font-family: var(--font-heading); font-weight: 500; }
.mobile-nav details > summary { padding: 10px 0; list-style: none; cursor: pointer; font-family: var(--font-heading); font-weight: 500; color: var(--color-ink); }
.mobile-nav details[open] > summary { color: var(--color-primary); }
.mobile-nav details a { padding-left: var(--space-4); color: var(--color-text); }

/* ============ HERO (index) ============ */
.hero {
  background: linear-gradient(180deg, var(--color-surface) 0%, #fff 100%);
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  position: relative; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-12); align-items: center; }
.hero .pill { margin-bottom: var(--space-5); }
.hero h1 { margin-bottom: var(--space-5); }
.hero h1 em { font-style: normal; color: var(--color-primary); }
.hero-lede { font-size: var(--text-md); color: var(--color-text); max-width: 52ch; margin-bottom: var(--space-8); }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--space-8); margin-top: var(--space-10); flex-wrap: wrap; }
.hero-stats > div strong { display: block; font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-ink); font-weight: 700; line-height: 1; }
.hero-stats > div span { color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }

.hero-visual {
  position: relative; aspect-ratio: 4/3.2; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.55));
}
.hero-visual-caption { position: absolute; left: 24px; bottom: 24px; right: 24px; color: #fff; z-index: 1; }
.hero-visual-caption .pill { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero-visual-caption h3 { color: #fff; margin: 8px 0 4px; font-size: var(--text-lg); }
.hero-visual-caption small { color: rgba(255,255,255,0.8); }

@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* ============ HERO SEARCH (urbania-style) ============ */
.hero-search { padding: clamp(80px, 12vh, 160px) 0 clamp(100px, 10vh, 140px); min-height: 640px; display: flex; align-items: center; color: #fff; }
.hero-search .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 1.2s ease-out;
}
.hero-search .hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.75) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.1) 60%);
}
.hero-search-inner { position: relative; z-index: 2; width: 100%; max-width: 1040px; }
.hero-search .pill { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); backdrop-filter: blur(6px); margin-bottom: var(--space-5); }
.hero-search h1 { color: #fff; font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: var(--space-5); }
.hero-search h1 em { font-style: normal; color: var(--color-primary); }
.hero-search .hero-lede { color: rgba(255,255,255,0.92); font-size: var(--text-md); max-width: 58ch; margin: 0 auto var(--space-10); }
.hero-stats-center { justify-content: center; margin-top: var(--space-10); gap: var(--space-10); }
.hero-stats-center > div { text-align: center; }
.hero-stats-center > div strong { color: #fff; font-size: var(--text-3xl, 2rem); }
.hero-stats-center > div span { color: rgba(255,255,255,0.75); }

/* search box */
.search-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.35);
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
  color: var(--color-text);
}
.search-tabs { display: flex; gap: 0; padding: 6px 6px 0; background: #fff; }
.search-tab {
  padding: 14px 24px; font-weight: 600; font-size: 14px; color: var(--color-muted);
  border-radius: 10px 10px 0 0; position: relative; transition: all var(--t-fast);
}
.search-tab:hover { color: var(--color-ink); }
.search-tab.active { color: var(--color-primary); background: #fff; }
.search-tab.active::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px;
  background: var(--color-primary); border-radius: 3px 3px 0 0;
}
.search-row {
  display: grid;
  grid-template-columns: 1.1fr 1.8fr 0.9fr 1fr auto;
  gap: 0;
  border-top: 1px solid var(--color-border, #E5E7EB);
  align-items: stretch;
}
.search-field {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 18px;
  border-right: 1px solid var(--color-border, #E5E7EB);
  min-width: 0;
}
.search-field:last-of-type { border-right: 0; }
.search-field label {
  font-size: 11px; font-weight: 600; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.search-field input,
.search-field select {
  border: 0; background: transparent; padding: 4px 0; font-size: 15px; color: var(--color-ink);
  font-weight: 500; width: 100%; outline: none;
}
.search-field select { appearance: none; -webkit-appearance: none; padding-right: 16px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right center; }
.search-field input::placeholder { color: #9CA3AF; }
.search-field-grow { min-width: 0; }
.btn-search {
  padding: 0 28px; display: flex; align-items: center; gap: 8px;
  border-radius: 0; font-weight: 600; font-size: 15px;
}
.search-chips { display: flex; gap: 8px; padding: 10px 18px 14px; background: #fff; flex-wrap: wrap; border-top: 1px solid rgba(0,0,0,0.04); }
.search-chip {
  padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--color-muted);
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 999px;
  transition: all var(--t-fast); cursor: pointer;
}
.search-chip:hover { color: var(--color-primary); border-color: var(--color-primary); background: rgba(5,88,253,0.05); }

@media (max-width: 900px) {
  .search-row { grid-template-columns: 1fr 1fr; }
  .search-field { border-bottom: 1px solid var(--color-border, #E5E7EB); }
  .btn-search { grid-column: 1 / -1; padding: 16px; justify-content: center; }
  .hero-search h1 { font-size: 1.85rem; }
  .hero-stats-center { gap: var(--space-6); }
}
@media (max-width: 540px) {
  .search-row { grid-template-columns: 1fr; }
  .search-field { border-right: 0; }
}

/* ============ HOW IT WORKS ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.step { text-align: center; padding: var(--space-6); }
.step-icon { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: var(--space-5); }
.step-icon svg { width: 32px; height: 32px; }
.step h3 { margin-bottom: var(--space-3); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ============ SERVICES ============ */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.service-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-8); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.service-card h3 { margin-bottom: var(--space-3); }
.service-card p { color: var(--color-text); margin-bottom: var(--space-5); }
@media (max-width: 800px) { .services { grid-template-columns: 1fr; } }

/* ============ PROPERTY CARDS ============ */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
.cards-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards-grid.cols-3, .cards-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards-grid.cols-3, .cards-grid.cols-4 { grid-template-columns: 1fr; } }

.p-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.p-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-surface); }
.p-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.p-card:hover .p-card-media img { transform: scale(1.04); }
.p-card-media .badge-status {
  position: absolute; top: 14px; left: 14px;
  background: var(--color-accent); color: var(--color-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.p-card-media .badge-price {
  position: absolute; bottom: 14px; left: 14px;
  background: var(--color-primary); color: #fff;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
}
.p-card-media .fav {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.p-card-media .fav:hover { color: var(--color-primary); }
.p-card-body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.p-card-title { color: var(--color-ink); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.p-card-addr { color: var(--color-muted); font-size: var(--text-sm); display: flex; gap: 6px; align-items: center; }
.p-card-stats { display: flex; gap: var(--space-4); padding: 12px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: var(--text-xs); }
.p-card-stats span { display: inline-flex; align-items: center; gap: 5px; }
.p-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
.p-card-agent { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); }
.p-card-agent .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface); color: var(--color-ink); display:inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--color-border); }
.p-card-agent .avatar-logo { background: #fff; }
.p-card-agent .avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.p-card-agent > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.p-card-actions { display: flex; gap: 6px; }
.p-card-actions a {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-surface); color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.p-card-actions a:hover { background: var(--color-primary); color: #fff; }

/* Horizontal variant (for sell) */
.p-card.horizontal { grid-template-columns: 320px 1fr; display: grid; }
.p-card.horizontal .p-card-media { aspect-ratio: auto; height: 100%; }
@media (max-width: 700px) { .p-card.horizontal { grid-template-columns: 1fr; } }

/* ============ NEIGHBORHOODS ============ */
.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .places { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .places { grid-template-columns: 1fr; } }
.place {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.place img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.place:hover img { transform: scale(1.06); }
.place::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,0.85)); }
.place-cap { position: absolute; left: 18px; right: 18px; bottom: 18px; color: #fff; z-index: 1; }
.place-cap h4 { color: #fff; margin: 0 0 4px; font-size: var(--text-md); }
.place-cap span { font-size: var(--text-xs); opacity: 0.85; }

/* ============ VIDEO SECTION ============ */
.video-cta {
  position: relative; min-height: 440px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-ink);
  background-image: linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.55)), var(--bg-img, none);
  background-size: cover; background-position: center;
  color: #fff; text-align: center;
}
.video-cta .play {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(5,88,253,0.6);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(5,88,253,0.55);} 80% { box-shadow: 0 0 0 28px rgba(5,88,253,0);} 100% { box-shadow: 0 0 0 0 rgba(5,88,253,0);} }
.video-cta h2 { color: #fff; margin-top: var(--space-6); }

/* ============ AMENITIES ============ */
.amen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 800px) { .amen-grid { grid-template-columns: repeat(2, 1fr); } }
.amen { text-align: center; padding: var(--space-6); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border); }
.amen-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--color-primary-soft); color: var(--color-primary); margin: 0 auto var(--space-3); display: inline-flex; align-items: center; justify-content: center; }

/* ============ TESTIMONIALS ============ */
.testimonials { text-align: center; }
.testimonial {
  max-width: 780px; margin: 0 auto; padding: var(--space-10) var(--space-6);
  background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  position: relative;
}
.testimonial blockquote { font-family: var(--font-heading); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink); margin: 0 0 var(--space-6); font-weight: 500; }
.testimonial cite { display: block; font-style: normal; color: var(--color-muted); font-size: var(--text-sm); }
.testimonial cite strong { display: block; color: var(--color-ink); font-family: var(--font-heading); font-size: var(--text-md); margin-bottom: 2px; }
.quote-mark { color: var(--color-primary); font-family: serif; font-size: 64px; line-height: 1; margin-bottom: var(--space-3); }

/* ============ BLOG CARDS ============ */
.blog-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card .media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--color-surface); }
.blog-card .media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .date-badge { position: absolute; top: 14px; left: 14px; background: var(--color-primary); color: #fff; padding: 8px 12px; border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs); text-align: center; line-height: 1.2; }
.blog-card .date-badge strong { display: block; font-size: var(--text-md); }
.blog-card .body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card .meta { display: flex; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.blog-card .meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-card h3 { font-size: var(--text-md); margin: 0; }
.blog-card .read { margin-top: auto; color: var(--color-primary); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============ CTA BANNER ============ */
.cta-banner { background: var(--color-primary); color: #fff; padding: var(--space-16) 0; }
.cta-banner-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.cta-banner h2 { color: #fff; margin-bottom: 6px; }
.cta-banner p { color: rgba(255,255,255,0.9); margin: 0; }
.cta-banner .btn-outline { border-color: #fff; color: #fff; }
.cta-banner .btn-outline:hover { background: #fff; color: var(--color-primary); }

/* ============ FOOTER ============ */
.footer { background: var(--color-ink); color: rgba(255,255,255,0.75); padding-top: var(--space-20); padding-bottom: var(--space-6); font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-10); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 { color: #fff; font-size: var(--text-md); margin-bottom: var(--space-5); }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a:hover { color: var(--color-primary); }
.footer .logo { color: #fff; margin-bottom: var(--space-4); }
.footer .socials { display: flex; gap: 10px; margin-top: var(--space-4); }
.footer .socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.footer .socials a:hover { background: var(--color-primary); }
.footer .newsletter form { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,0.06); }
.footer .newsletter input { flex: 1; background: transparent; border: 0; color: #fff; padding: 12px 14px; outline: none; }
.footer .newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.footer .newsletter button { background: var(--color-primary); color: #fff; padding: 0 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-6); color: rgba(255,255,255,0.5); font-size: var(--text-xs); }
.footer-bottom ul { display: flex; gap: var(--space-5); }

/* ============ PAGE HEADER / BREADCRUMB ============ */
.page-header { background: var(--color-surface); padding: clamp(var(--space-12), 7vw, var(--space-20)) 0; text-align: center; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); }
.breadcrumb { color: var(--color-muted); font-size: var(--text-sm); }
.breadcrumb a { color: var(--color-primary); }
.breadcrumb span { margin: 0 8px; }

/* ============ FILTERS ============ */
.filters {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--space-3);
  box-shadow: var(--shadow-sm); margin-bottom: var(--space-10);
}
@media (max-width: 900px) { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .filters { grid-template-columns: 1fr; } }
.filters .field { display: flex; flex-direction: column; gap: 4px; }
.filters label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-family: var(--font-heading); font-weight: 600; }
.filters select, .filters input[type=text], .filters input[type=search] {
  padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg);
  font-size: var(--text-sm); color: var(--color-ink);
}
.filters select:focus, .filters input:focus { outline: none; border-color: var(--color-primary); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.toolbar-info { color: var(--color-muted); font-size: var(--text-sm); }
.toolbar select { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); }

/* ============ SIDEBAR LAYOUT ============ */
.with-sidebar { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-10); }
@media (max-width: 900px) { .with-sidebar { grid-template-columns: 1fr; } }
.sidebar { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: 100px; align-self: start; }
.sidebar h4 { margin-bottom: var(--space-4); font-size: var(--text-md); }
.sidebar .field { margin-bottom: var(--space-5); }
.sidebar label { display: block; font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-family: var(--font-heading); font-weight: 600; }
.sidebar select, .sidebar input { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); background: #fff; }
.chk-list label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text); font-family: var(--font-body); text-transform: none; letter-spacing: normal; margin-bottom: 6px; font-weight: normal; cursor: pointer; }

/* ============ PROPERTY DETAILS ============ */
.pd-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; border-radius: var(--radius-lg); overflow: hidden; max-height: 520px; }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform var(--t); }
.pd-gallery img:hover { transform: scale(1.02); }
.pd-gallery .gmain { grid-row: span 2; aspect-ratio: 4/3; }
.pd-gallery .gsmall { aspect-ratio: 4/3; }
@media (max-width: 700px) { .pd-gallery { grid-template-columns: 1fr; max-height: none; } .pd-gallery .gmain { grid-row: auto; } }

.pd-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-10); margin-top: var(--space-10); }
@media (max-width: 900px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-title { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.pd-title h1 { font-size: var(--text-2xl); margin-bottom: 8px; }
.pd-title .addr { color: var(--color-muted); }
.pd-price { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--text-xl); font-weight: 700; }
.pd-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); margin-block: var(--space-5); }
.pd-stats > div { display: flex; align-items: center; gap: 10px; }
.pd-stats strong { color: var(--color-ink); font-family: var(--font-heading); display: block; font-size: var(--text-md); }
.pd-stats small { color: var(--color-muted); font-size: var(--text-xs); }
.pd-section { margin-bottom: var(--space-10); }
.pd-section h3 { margin-bottom: var(--space-4); }
.amenities-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .amenities-list { grid-template-columns: repeat(2, 1fr); } }
.amenities-list li { list-style: none; padding: 10px 0; color: var(--color-text); font-size: var(--text-sm); display: flex; gap: 8px; align-items: center; }
.amenities-list li::before { content: ''; width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; }

.tipologies-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tipologies-table th, .tipologies-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-border); }
.tipologies-table th { background: var(--color-surface); font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 600; }
.tipologies-table td.price { color: var(--color-primary); font-family: var(--font-heading); font-weight: 600; }
.tipologies-table td a { color: var(--color-primary); }
.t-type { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.t-type-flat   { background: var(--color-accent-soft); color: #3E5C00; }
.t-type-duplex { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.t-type-triplex { background: #FEF3C7; color: #92400E; }

.contact-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: 100px; }
.contact-card h3 { margin-bottom: var(--space-4); }
.contact-card .agent { display: flex; gap: 12px; align-items: center; margin-bottom: var(--space-5); }
.contact-card .agent .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-heading); }
.contact-card input, .contact-card textarea { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); }
.contact-card textarea { min-height: 110px; resize: vertical; }
.contact-card .btn { width: 100%; }

/* ============ PROPERTY DETAILS (Nexo-style) ============ */
.pd-topbar { background: #fff; border-bottom: 1px solid var(--color-border); padding: 12px 0; }
.breadcrumb-thin { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--color-muted); }
.breadcrumb-thin a { color: var(--color-muted); transition: color var(--t-fast); }
.breadcrumb-thin a:hover { color: var(--color-primary); }
.breadcrumb-thin span { color: var(--color-border); }

.pd-hero-section { padding: var(--space-5) 0 0; background: #fff; }
.pd-gallery-mosaic {
  display: grid; grid-template-columns: 2fr 1fr; gap: 8px;
  border-radius: var(--radius-lg); overflow: hidden; max-height: 520px;
}
.pd-gallery-mosaic .gmain-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md); }
.pd-gallery-mosaic .gmain { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 0.4s ease; display: block; }
.pd-gallery-mosaic .gmain:hover { transform: scale(1.03); }
.pd-gallery-mosaic .gmain-logo {
  position: absolute; left: 16px; bottom: 16px; max-width: 120px; max-height: 60px; background: rgba(255,255,255,0.95);
  padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.gallery-badges { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.gallery-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.6); color: #fff; padding: 8px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 500;
  backdrop-filter: blur(6px); transition: all var(--t-fast);
}
.gallery-badge:hover { background: var(--color-primary); color: #fff; }
.pd-gallery-mosaic .gsmalls { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.pd-gallery-mosaic .gsmall { width: 100%; height: 100%; min-height: 120px; object-fit: cover; cursor: zoom-in; border-radius: var(--radius-md); transition: transform 0.4s ease; display: block; }
.pd-gallery-mosaic .gsmall:hover { transform: scale(1.04); }
@media (max-width: 800px) {
  .pd-gallery-mosaic { grid-template-columns: 1fr; max-height: none; }
  .pd-gallery-mosaic .gsmalls { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; }
}

.pd-title-block { margin-top: var(--space-8); }
.pd-status-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.pd-status-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--color-accent); color: var(--color-ink);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(10,10,10,0.1);
}
.pd-developer { color: var(--color-muted); font-size: 13px; font-weight: 500; }
.pd-title-block h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 10px; }
.pd-addr-row { display: flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: 14px; margin-bottom: var(--space-5); flex-wrap: wrap; }
.pd-link-map { color: var(--color-primary); font-weight: 500; margin-left: 6px; }
.pd-link-map:hover { text-decoration: underline; }
.pd-price-big {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: var(--space-5) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.pd-price-label { font-size: 14px; color: var(--color-muted); font-weight: 500; }
.pd-price-pen { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--color-primary); }
.pd-price-usd { font-size: 14px; color: var(--color-muted); }

.pd-quickstats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-5); margin: var(--space-6) 0 var(--space-8);
}
@media (max-width: 700px) { .pd-quickstats { grid-template-columns: repeat(2, 1fr); } }
.qs-item { display: flex; align-items: center; gap: 10px; }
.qs-icon { font-size: 22px; flex-shrink: 0; }
.qs-item strong { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--color-ink); line-height: 1.2; }
.qs-item small { color: var(--color-muted); font-size: 12px; }

.pd-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); font-weight: 700; }
.pd-desc { color: var(--color-text); line-height: 1.75; white-space: pre-line; }

.pd-tips-tabs { display: flex; gap: 6px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.tip-tab {
  padding: 8px 16px; border-radius: 999px; background: var(--color-surface);
  color: var(--color-text); font-size: 13px; font-weight: 600;
  border: 1px solid var(--color-border); transition: all var(--t-fast);
}
.tip-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tip-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.t-type { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.t-type-flat { background: var(--color-accent-soft); color: #3E5C00; }
.t-type-duplex { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.t-type-triplex { background: #FEF3C7; color: #92400E; }

.pd-video-embed {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000; box-shadow: var(--shadow);
}
.pd-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pd-amenities {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 700px) { .pd-amenities { grid-template-columns: repeat(2, 1fr); } }
.amen-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--color-surface);
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  font-size: 14px; color: var(--color-text); font-weight: 500;
}
.amen-emoji { font-size: 18px; }

/* Tour 360° embed */
.pd-tour-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-ink);
  margin-top: var(--space-4);
}
.pd-tour-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mapa interactivo Leaflet */
.pd-leaflet-map {
  width: 100%; height: 480px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); background: var(--color-surface);
  margin-top: var(--space-4);
}
.pd-leaflet-map .leaflet-popup-content-wrapper { border-radius: var(--radius-md); }
.pd-leaflet-map .leaflet-popup-content { margin: 10px 14px; font-family: inherit; font-size: 13px; line-height: 1.4; }

/* Marcadores personalizados grandes */
.pd-marker-project, .pd-marker-poi { background: transparent !important; border: 0 !important; }
.pd-marker-inner {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(10,10,10,0.35), 0 0 0 3px #fff;
  border: 2px solid #fff;
}
.pd-marker-inner > * { transform: rotate(45deg); }
.pd-marker-inner span { font-size: 20px; line-height: 1; }
.pd-marker-home {
  width: 48px; height: 48px;
  background: #99FF00;
  box-shadow: 0 6px 14px rgba(5,88,253,0.4), 0 0 0 4px #0558FD;
}

/* Leyenda del mapa */
.pd-map-legend {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3);
  min-height: 0;
}
.pd-map-legend:empty { margin-top: 0; }
.map-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: #fff;
  border: 1px solid var(--color-border); border-left: 3px solid var(--chip-color, var(--color-primary));
  border-radius: 999px;
  font-size: 12px; color: var(--color-ink); font-weight: 500;
}
.map-legend-dot { font-size: 14px; line-height: 1; }
.map-legend-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--chip-color, var(--color-primary)); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}

.pd-map-actions { display: flex; gap: 10px; margin-top: var(--space-4); flex-wrap: wrap; }

.pd-nearby-title { margin-top: var(--space-7); margin-bottom: 6px; font-size: var(--text-lg); }
.pd-nearby-lede { margin-bottom: var(--space-4); font-size: var(--text-sm); }
.pd-nearby {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: var(--space-4);
}
@media (max-width: 900px) { .pd-nearby { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pd-nearby { grid-template-columns: repeat(2, 1fr); } }

/* Chips como botones toggle */
.nearby-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--chip-color, var(--color-border));
  font-size: 13px; color: var(--color-ink); font-weight: 500;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.nearby-chip:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
  border-color: var(--chip-color, var(--color-primary));
}
.nearby-chip[aria-pressed="true"] {
  background: var(--chip-color, var(--color-primary));
  color: #fff;
  border-color: var(--chip-color, var(--color-primary));
  box-shadow: 0 2px 8px rgba(10,10,10,0.18);
}
.nearby-chip.loading {
  opacity: 0.75; pointer-events: none;
}
.nearby-chip.loading::after {
  content: ''; width: 12px; height: 12px; margin-left: auto;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: chipSpin 0.7s linear infinite;
}
@keyframes chipSpin { to { transform: rotate(360deg); } }
.nearby-chip.empty {
  background: #FEE2E2; color: #991B1B; border-color: #FCA5A5;
}
.nearby-emoji { font-size: 18px; line-height: 1; }

.pd-aside { position: relative; }
.pd-contact-sticky { position: sticky; top: 100px; }
.pd-contact-head { margin-bottom: var(--space-4); }
.pd-contact-label { font-size: 11px; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.pd-contact-head h3 { margin: 4px 0 0; font-size: var(--text-lg); }
.pd-legal { font-size: 11px; color: var(--color-muted); margin-top: var(--space-3); line-height: 1.5; }
.pd-views { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-muted); display: flex; align-items: center; gap: 6px; }

/* Tarjeta de inmobiliaria en sidebar (reemplaza datos de agente) */
.company-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin-bottom: var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.company-logo {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--color-primary); font-size: 14px;
  overflow: hidden; flex-shrink: 0;
}
.company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }

/* Thumbnail de plano en tabla de tipologías */
.tipologies-table td.plan-cell { width: 88px; padding: 8px; }
.plan-thumb {
  display: block; width: 72px; height: 72px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--color-border); background: #fff;
  cursor: zoom-in; transition: border-color var(--t), transform var(--t);
}
.plan-thumb:hover { border-color: var(--color-primary); transform: scale(1.05); }
.plan-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ============ TEAM ============ */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team-card .ph { aspect-ratio: 4/5; background: var(--color-surface); overflow: hidden; }
.team-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.team-card .ph-logo { aspect-ratio: 4/3; background: #fff; display: flex; align-items: center; justify-content: center; padding: var(--space-6); border-bottom: 1px solid var(--color-border); }
.team-card .ph-logo img { width: 100%; height: 100%; object-fit: contain; }
.team-card .body { padding: var(--space-5); }
.team-card h3 { margin-bottom: 4px; font-size: var(--text-md); }
.team-card span { color: var(--color-muted); font-size: var(--text-sm); }

/* ============ PRICING ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; }
.price-card.featured { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.price-card.featured h3, .price-card.featured .amount { color: #fff; }
.price-card.featured .btn-outline { border-color: #fff; color: #fff; }
.price-card.featured .btn-outline:hover { background: #fff; color: var(--color-ink); }
.price-card h3 { margin-bottom: 6px; font-size: var(--text-md); }
.price-card .amount { font-family: var(--font-heading); color: var(--color-ink); font-size: var(--text-3xl); font-weight: 700; line-height: 1; margin: var(--space-4) 0; }
.price-card .amount small { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; }
.price-card ul { list-style: none; padding: 0; margin: var(--space-6) 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.price-card ul li { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); }
.price-card ul li::before { content: '✓'; color: var(--color-accent); font-weight: 700; }
.price-card.featured ul li { color: rgba(255,255,255,0.85); }

/* ============ AUTH / FORMS ============ */
.auth-card { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-10); box-shadow: var(--shadow-sm); }
.auth-card h2 { text-align: center; margin-bottom: var(--space-6); }
.auth-card .field { margin-bottom: var(--space-4); }
.auth-card label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-family: var(--font-heading); font-weight: 600; margin-bottom: 6px; }
.auth-card input { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); }
.auth-card .btn { width: 100%; margin-top: var(--space-4); }
.auth-card .alt { text-align: center; color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-5); }

/* ============ 404 ============ */
.err-404 { text-align: center; padding: var(--space-24) 0; }
.err-404 h1 { font-size: clamp(5rem, 15vw, 10rem); color: var(--color-primary); line-height: 0.9; margin-bottom: var(--space-4); }

/* ============ CART ============ */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 14px; border-bottom: 1px solid var(--color-border); text-align: left; }
.cart-table th { background: var(--color-surface); font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; color: var(--color-muted); }
.cart-item { display: flex; gap: 12px; align-items: center; }
.cart-item img { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-summary { max-width: 380px; margin-left: auto; margin-top: var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); }
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.cart-summary .row.total { font-family: var(--font-heading); font-weight: 700; color: var(--color-ink); font-size: var(--text-md); border-bottom: 0; margin-top: 6px; }

/* ============ CHECKOUT ============ */
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }

/* ============ LIGHTBOX ============ */
.lightbox { position: fixed; inset: 0; background: rgba(10,10,10,0.95); display: none; z-index: 100; align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 95vw; max-height: 90vh; border-radius: var(--radius); }
.lightbox .close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--color-ink); }

/* ============ ANIMATIONS ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }
.reveal { opacity: 0; }
.reveal.visible { animation: fadeUp 700ms var(--ease) forwards; }

/* Utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-10 { margin-top: var(--space-10); }
.mb-0 { margin-bottom: 0; }
.divider { border-bottom: 1px solid var(--color-border); margin: var(--space-10) 0; }
.muted { color: var(--color-muted); }

/* =====================================================================
   EXPOINMOBILIARIA — PATCHES FINALES (v2026-04-19)
   ===================================================================== */

/* ============ BUSCADOR HERO PROFESIONAL ============ */
.search-pro {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 60px -20px rgba(10,10,10,0.35), 0 2px 8px rgba(10,10,10,0.08);
  max-width: 980px;
  margin: var(--space-6) auto 0;
  border: 1px solid rgba(10,10,10,0.06);
}
.search-pro-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 10px; gap: 12px; flex-wrap: wrap;
}
.search-segmented {
  position: relative;
  display: inline-flex;
  background: #F3F4F6;
  padding: 4px;
  border-radius: 999px;
  gap: 2px;
}
.search-segmented .seg-btn {
  position: relative; z-index: 2;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease;
}
.search-segmented .seg-btn.active {
  color: var(--color-ink);
  background: #fff;
  box-shadow: 0 2px 6px rgba(10,10,10,0.08);
}
.search-pro-count {
  font-size: 12px; color: var(--color-muted); font-weight: 500;
}
.search-pro-fields {
  display: grid;
  grid-template-columns: 2fr 1fr 0.8fr 1fr auto;
  gap: 2px;
  background: #F9FAFB;
  border-radius: 14px;
  padding: 4px;
  align-items: stretch;
}
.search-pro-fields .spf {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  min-height: 58px;
  display: flex; flex-direction: column; justify-content: center;
  transition: box-shadow 160ms ease;
}
.search-pro-fields .spf:hover { box-shadow: 0 2px 8px rgba(10,10,10,0.06); }
.search-pro-fields .spf label {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #6B7280; margin-bottom: 2px;
}
.search-pro-fields .spf label svg { color: var(--color-primary); }
.search-pro-fields .spf input,
.search-pro-fields .spf select {
  border: 0; background: transparent; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--color-ink);
  width: 100%; outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%230A0A0A' stroke-width='2'><polyline points='1 1 5 5 9 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 14px;
}
.search-pro-fields .spf input {
  background-image: none; padding-right: 0;
}
.btn-search-pro {
  border: 0;
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  padding: 0 22px;
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.btn-search-pro:hover { background: #0440C4; transform: translateY(-1px); }
.btn-search-pro:active { transform: translateY(0); }

.search-pro-quick {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px 4px; flex-wrap: wrap;
}
.spq-label { font-size: 12px; color: var(--color-muted); font-weight: 600; }
.spq-chip {
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 160ms ease;
}
.spq-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.spq-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.spq-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 160ms ease;
}
.spq-more:hover { background: #E5E7EB; }
.spq-more[aria-expanded="true"] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text-on-soft);
}

@media (max-width: 900px) {
  .search-pro-fields { grid-template-columns: 1fr 1fr; gap: 6px; }
  .btn-search-pro { grid-column: 1 / -1; padding: 14px; justify-content: center; }
}
@media (max-width: 560px) {
  .search-pro-fields { grid-template-columns: 1fr; }
  .search-segmented .seg-btn { padding: 7px 14px; font-size: 12px; }
  .spq-more { margin-left: 0; }
}

/* ============ SECTION SUBTITLE ============ */
.section-head .section-sub {
  color: var(--color-muted);
  margin-top: var(--space-2);
  font-size: 15px;
}

/* ============ CONTACTO REDISEÑADO ============ */
.pd-contact-label {
  display: block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 12px;
}
.ei-brand-card {
  display: flex; align-items: center; gap: 12px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.ei-logo { flex-shrink: 0; display: flex; }
.ei-brand-text strong { display: block; font-size: 15px; color: var(--color-ink); }
.ei-brand-text small { font-size: 12px; color: var(--color-muted); }

.btn-whatsapp {
  display: flex; align-items: center; gap: 10px;
  background: #25D366;
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
  margin-bottom: 12px;
}
.btn-whatsapp:hover { background: #1FB857; transform: translateY(-1px); color: #fff; }
.btn-whatsapp.disabled { background: #9CA3AF; pointer-events: none; }
.btn-whatsapp svg { flex-shrink: 0; }
.btn-whatsapp .wa-main { font-size: 14px; line-height: 1; }
.btn-whatsapp .wa-sub { margin-left: auto; font-size: 13px; font-weight: 600; opacity: 0.95; }

.form-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px;
  color: var(--color-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-divider::before, .form-divider::after {
  content: ''; flex: 1; height: 1px; background: #E5E7EB;
}

#pdForm .form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 8px;
}
#pdForm .form-row-doc {
  display: grid; grid-template-columns: 100px 1fr; gap: 8px;
  margin-bottom: 8px;
}

/* ============ MODELOS: filtros + tabla pisos ============ */
.pd-tips-tabs {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: var(--space-4);
}
.tip-filter-group {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tip-filter-label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); min-width: 92px;
}
.tip-filter-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tip-tab, .tip-bed {
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 150ms ease;
}
.tip-tab:hover, .tip-bed:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tip-tab.active, .tip-bed.active {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.tipologies-table td.floors-cell {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.tipologies-table td.floors-cell span[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ============ QUICK STATS / AMEN: íconos Lucide ============ */
.pd-quickstats .qs-item .qs-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pd-quickstats .qs-item .qs-icon svg {
  width: 22px; height: 22px;
}
.pd-amenities .amen-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
}
.pd-amenities .amen-chip .amen-ico {
  width: 18px; height: 18px; display: inline-flex;
  color: var(--color-primary);
}
.pd-amenities .amen-chip .amen-ico svg { width: 18px; height: 18px; }

/* ============ NEARBY FILTROS SIMPLIFICADOS ============ */
.pd-nearby .nearby-main {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 8px;
}
.pd-nearby .nearby-more {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px;
  background: #F9FAFB;
  border: 1px dashed #E5E7EB;
  border-radius: 12px;
  animation: fadeUp 240ms var(--ease);
}
.nearby-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 160ms ease;
}
.nearby-chip:hover { border-color: var(--chip-color, var(--color-primary)); }
.nearby-chip[aria-pressed="true"] {
  background: var(--chip-color, var(--color-primary));
  border-color: var(--chip-color, var(--color-primary));
  color: #fff;
}
.nearby-chip .nearby-ico { width: 16px; height: 16px; display: inline-flex; }
.nearby-chip .nearby-ico svg { width: 16px; height: 16px; }
.nearby-chip.loading { opacity: 0.6; }
.nearby-chip.empty { animation: shake 240ms; border-color: #DC2626; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.nearby-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed #9CA3AF;
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 160ms ease;
  margin-left: auto;
}
.nearby-more-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nearby-more-btn.active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text-on-soft);
  border-style: solid;
}
.nearby-more-btn .nm-badge {
  background: var(--color-ink); color: var(--color-accent);
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
}
.nearby-more-btn.active .nm-badge { background: var(--color-text-on-soft); color: #fff; }

.pd-map-legend .map-legend-item .map-legend-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-map-legend .map-legend-item .map-legend-dot svg {
  width: 14px; height: 14px;
}

/* ============ RESPONSIVE PATCHES ============ */
@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-aside { position: static; }
  .pd-contact-sticky { position: static; }
}
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 28px; line-height: 1.2; }
  h2 { font-size: 22px; }
  .hero-lede { font-size: 15px; }
  .hero-stats > div strong { font-size: 22px; }
  .steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .services { grid-template-columns: 1fr; }
  .cards-grid.cols-3 { grid-template-columns: 1fr; }
  .cta-banner-inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .pd-gallery-mosaic { grid-template-columns: 1fr; }
  .pd-gallery-mosaic .gsmalls { grid-template-columns: repeat(4, 1fr); }
  .tipologies-table { font-size: 13px; }
  .tipologies-table th, .tipologies-table td { padding: 8px 6px; }
  .plan-thumb img { max-width: 60px; }
}
@media (max-width: 600px) {
  .pd-leaflet-map { height: 280px; }
  .pd-tour-embed { aspect-ratio: 16/9; }
  .pd-video-embed { aspect-ratio: 16/9; }
  .tipologies-table { font-size: 12px; }
  .tipologies-table th:nth-child(1),
  .tipologies-table td:nth-child(1) { display: none; }
  .hero-stats { flex-wrap: wrap; gap: var(--space-3); }
  .hero-stats > div { flex: 0 0 calc(50% - var(--space-3)); }
}
@media (max-width: 480px) {
  .pd-quickstats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pd-amenities { display: flex; flex-wrap: wrap; gap: 8px; }
  .pd-amenities .amen-chip { font-size: 12px; padding: 6px 10px; }
  .pd-nearby .nearby-main { gap: 6px; }
  .nearby-chip { padding: 6px 10px; font-size: 11px; }
  .nearby-chip span:not(.nearby-ico) { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  .nearby-more-btn { margin-left: 0; width: 100%; justify-content: center; margin-top: 6px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .btn-search-pro { padding: 12px; }
}

/* Inputs táctiles mínimo 44px + font-size 16px para prevenir zoom iOS */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
  min-height: 44px;
  font-size: 16px;
}
@media (min-width: 901px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="password"],
  select, textarea {
    font-size: 14px;
  }
  .search-pro-fields .spf input,
  .search-pro-fields .spf select {
    min-height: unset;
  }
}

/* ============ p-card-stats: 4 chips con SVG (patch v2) ============ */
.p-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  padding: 10px 0;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
}
.p-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-card-stats span svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Botón Cotizar en tabla de tipologías */
.tipologies-table .cot-cell { padding: 8px 10px; }
.btn-cotizar {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; font-size: 12px; font-weight: 700;
  background: var(--color-accent); color: var(--color-ink);
  border: 1px solid var(--color-ink); border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.btn-cotizar:hover { background: #B8FF33; transform: translateY(-1px); }

/* Página cotizar.html */
.cot-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px; }
.cot-brand { display:flex; align-items:center; gap:10px; margin-bottom: 22px; }
.cot-brand-logo { width:44px; height:44px; border-radius:10px; background: var(--color-ink); display:flex; align-items:center; justify-content:center; color: var(--color-accent); font-weight:800; font-size:14px; letter-spacing:.5px; }
.cot-brand-text { font-weight:700; font-size:18px; color: var(--color-ink); }
.cot-brand-text span { color: var(--color-primary); }

.cot-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:start; }
@media (max-width: 900px) { .cot-grid { grid-template-columns: 1fr; } }

.cot-visual { background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding: 20px; }
.cot-title { font-size: 22px; font-weight: 800; color: var(--color-ink); margin: 0 0 6px; }
.cot-subtitle { font-size: 14px; color: #6B7280; margin: 0 0 14px; }
.cot-status { display:inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 14px; }
.cot-status.en-planos { background: var(--color-accent-soft); color: #3F6B00; border: 1px solid var(--color-accent); }
.cot-status.en-construccion { background: #FFF3CD; color: #7A5200; border: 1px solid #F5C542; }
.cot-status.entrega-inmediata { background: #D7E7FF; color: #0B3D91; border: 1px solid var(--color-primary); }
.cot-plan-img { width: 100%; height: auto; border-radius: 12px; background: #F3F4F6; display:block; }

.cot-form { background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding: 22px; }
.cot-form h2 { font-size: 18px; margin: 0 0 4px; color: var(--color-ink); }
.cot-form .cot-help { font-size: 13px; color: #6B7280; margin: 0 0 16px; }
.cot-field { margin-bottom: 12px; }
.cot-field label { display:block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.cot-field input, .cot-field select {
  width: 100%; padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 8px;
  font-size: 14px; background: #fff; color: var(--color-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cot-field input:focus, .cot-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(5,88,253,.15); }
.cot-row2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cot-submit { width: 100%; padding: 12px 16px; background: var(--color-primary); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: background .15s ease; }
.cot-submit:hover { background: #0447D0; }
.cot-terms { font-size: 11px; color: #9CA3AF; margin-top: 10px; text-align: center; }

.cot-plan-placeholder {
  width: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #F9FAFB, #F9FAFB 10px, #F3F4F6 10px, #F3F4F6 20px);
  border-radius: 12px; color: #9CA3AF; font-size: 14px; font-weight: 500;
  border: 1px dashed #E5E7EB;
}