/* ==========================================================================
   Comercio Inmobiliario — main.css
   1 Base · 2 Layout · 3 Botones/badges · 4 Topbar + Header · 5 Footer
   6 Modales · 7 Formularios · 8 Buscador · 9 Tarjeta inmueble · 10 Utilidades
   BEM con prefijo ci-. Colores y tamaños en tokens.css.
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ci-header-h) + 1rem); }
body {
  margin: 0; font-family: var(--ci-font-body); font-size: var(--ci-fs-base); line-height: var(--ci-lh-base);
  color: var(--ci-text); background: var(--ci-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--ci-sp-4); font-family: var(--ci-font-heading); font-weight: 700; line-height: var(--ci-lh-tight); color: var(--ci-heading); }
h1 { font-size: var(--ci-fs-3xl); }
h2 { font-size: var(--ci-fs-2xl); }
h3 { font-size: var(--ci-fs-xl); }
h4 { font-size: var(--ci-fs-lg); }
p { margin: 0 0 var(--ci-sp-4); }
a { color: var(--ci-primary); text-decoration: none; transition: color var(--ci-ease); }
a:hover { color: var(--ci-navy-600); }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--ci-sp-4); padding-left: 1.25rem; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ci-accent); outline-offset: 2px; }

/* Título de sección del Figma: Red Hat Display Regular, azul, muy grande */
.ci-title-xl { font-size: var(--ci-fs-2xl); font-weight: 400; line-height: 1.03; color: var(--ci-navy); margin-bottom: var(--ci-sp-5); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.ci-skip-link { position: absolute; top: -100px; left: var(--ci-sp-4); padding: var(--ci-sp-2) var(--ci-sp-4); background: var(--ci-accent); color: var(--ci-navy); border-radius: var(--ci-radius-sm); z-index: 1000; }
.ci-skip-link:focus { top: var(--ci-sp-4); }

/* 2. Layout ----------------------------------------------------------------- */
.ci-container { width: 100%; max-width: calc(var(--ci-container) + var(--ci-container-pad) * 2); margin-inline: auto; padding-inline: var(--ci-container-pad); }
.ci-section { padding-block: var(--ci-sp-8); }
.ci-section--alt { background: var(--ci-bg-alt); }
.ci-section--dark { background: var(--ci-navy); color: var(--ci-white); }
.ci-section--dark h1, .ci-section--dark h2, .ci-section--dark h3 { color: var(--ci-white); }
.ci-section__eyebrow { display: inline-block; margin-bottom: var(--ci-sp-2); font-size: var(--ci-fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ci-navy-600); }
.ci-grid { display: grid; gap: var(--ci-sp-5); }
@media (min-width: 640px)  { .ci-grid--2 { grid-template-columns: repeat(2, 1fr); } .ci-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ci-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ci-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.ci-main { min-height: 60vh; }
.ci-divider { height: 1px; background: var(--ci-gray-200); }

/* 3. Botones y badges ------------------------------------------------------- */
.ci-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ci-sp-2);
  min-height: 52px; padding: var(--ci-sp-3) var(--ci-sp-6);
  border: 2px solid transparent; border-radius: var(--ci-radius-pill);
  font-family: var(--ci-font-heading); font-weight: 700; font-size: var(--ci-fs-base); line-height: 1; white-space: nowrap;
  transition: background var(--ci-ease), color var(--ci-ease), border-color var(--ci-ease), transform var(--ci-ease), box-shadow var(--ci-ease);
}
.ci-btn:active { transform: translateY(1px); }
.ci-btn--primary { background: var(--ci-navy); color: var(--ci-white); }
.ci-btn--primary:hover { background: var(--ci-navy-600); color: var(--ci-white); }
.ci-btn--accent { background: var(--ci-accent); color: var(--ci-navy); }
.ci-btn--accent:hover { background: var(--ci-yellow-600); color: var(--ci-navy); box-shadow: var(--ci-shadow); }
.ci-btn--outline { border-color: var(--ci-navy); color: var(--ci-navy); background: transparent; }
.ci-btn--outline:hover { background: var(--ci-navy); color: var(--ci-white); }
.ci-btn--ghost { color: var(--ci-navy); background: transparent; padding-inline: var(--ci-sp-3); }
.ci-btn--whatsapp { background: var(--ci-whatsapp); color: var(--ci-white); }
.ci-btn--whatsapp:hover { background: #1fb457; color: var(--ci-white); }
.ci-btn--block { width: 100%; }
.ci-btn--sm { min-height: 44px; padding: var(--ci-sp-2) var(--ci-sp-5); font-size: var(--ci-fs-sm); }
.ci-btn[aria-disabled="true"], .ci-btn:disabled { opacity: .45; pointer-events: none; }

.ci-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ci-badge {
  display: inline-block; padding: .35em .9em; border-radius: var(--ci-radius-sm);
  font-size: var(--ci-fs-sm); font-weight: 700; letter-spacing: .02em;
  background: var(--ci-navy); color: var(--ci-white);
}
.ci-badge--venta { background: var(--ci-navy); }
.ci-badge--arriendo { background: var(--ci-navy-600); }

.ci-wa-float {
  position: fixed; right: var(--ci-sp-4); bottom: var(--ci-sp-4); z-index: 900;
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ci-whatsapp); color: var(--ci-white); box-shadow: var(--ci-shadow-lg); transition: transform var(--ci-ease);
}
.ci-wa-float:hover { color: var(--ci-white); transform: scale(1.06); }
.ci-wa-float .ci-icon { width: 30px; height: 30px; }

/* 4. Topbar + Header -------------------------------------------------------- */
.ci-topbar { background: var(--ci-gray-50); color: var(--ci-navy); font-size: var(--ci-fs-sm); }
.ci-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-sp-4); min-height: var(--ci-topbar-h); }
.ci-topbar__matricula { font-weight: 500; white-space: nowrap; }
.ci-topbar__contact { display: flex; align-items: center; gap: var(--ci-sp-5); }
.ci-topbar__contact > a { display: inline-flex; align-items: center; gap: var(--ci-sp-2); color: var(--ci-navy); font-weight: 500; }
.ci-topbar__contact > a .ci-icon { width: 1.1em; height: 1.1em; }
.ci-topbar__social { display: inline-flex; align-items: center; gap: var(--ci-sp-3); font-weight: 500; }
.ci-social { display: flex; gap: var(--ci-sp-2); margin: 0; padding: 0; list-style: none; }
.ci-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--ci-white); }
.ci-social a:hover { background: var(--ci-accent); color: var(--ci-navy); }
.ci-social--inline a { width: 30px; height: 30px; background: var(--ci-navy); color: var(--ci-white); }
.ci-social--inline a .ci-icon { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .ci-topbar__inner { justify-content: center; }
  .ci-topbar__matricula, .ci-topbar__contact > a span { display: none; }
  .ci-topbar__contact { gap: var(--ci-sp-3); }
}

.ci-header { position: sticky; top: 0; z-index: 800; background: var(--ci-navy); color: var(--ci-white); }
.ci-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-sp-5); min-height: var(--ci-header-h); }
.ci-logo, .custom-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.custom-logo, .ci-logo img { max-height: 72px; width: auto; }
.ci-logo--text { font-family: var(--ci-font-heading); font-weight: 800; font-size: var(--ci-fs-lg); color: var(--ci-white); letter-spacing: .02em; text-transform: uppercase; }
.ci-logo--text:hover { color: var(--ci-accent); }

.ci-nav__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ci-nav__item { position: relative; }
.ci-nav__item + .ci-nav__item::before { content: "|"; color: rgba(255,255,255,.55); margin-inline: var(--ci-sp-4); }
.ci-nav__item > a { display: inline-block; padding-block: var(--ci-sp-2); font-weight: 500; font-size: var(--ci-fs-md); color: var(--ci-white); border-bottom: 2px solid transparent; }
.ci-nav__item > a:hover, .ci-nav__item.current-menu-item > a, .ci-nav__item.current-menu-ancestor > a { border-bottom-color: var(--ci-accent); color: var(--ci-white); }
.ci-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 230px; margin: 0; padding: var(--ci-sp-2) 0; list-style: none;
  background: var(--ci-white); border-radius: var(--ci-radius-sm); box-shadow: var(--ci-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--ci-ease), transform var(--ci-ease), visibility var(--ci-ease);
}
.ci-nav__item:hover > .sub-menu, .ci-nav__item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ci-nav .sub-menu a { display: block; padding: var(--ci-sp-2) var(--ci-sp-4); font-size: var(--ci-fs-sm); color: var(--ci-text); }
.ci-nav .sub-menu a:hover { background: var(--ci-gray-50); color: var(--ci-navy); }

.ci-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ci-white); }
.ci-burger span { display: block; width: 26px; height: 2px; margin: 6px auto; background: currentColor; transition: transform var(--ci-ease), opacity var(--ci-ease); }
.ci-nav__mobile-actions { display: none; }

@media (max-width: 1023px) {
  .ci-burger { display: block; }
  .ci-nav {
    position: fixed; inset: calc(var(--ci-header-h)) 0 0 0; padding: var(--ci-sp-5) var(--ci-container-pad);
    background: var(--ci-navy); overflow-y: auto; transform: translateX(100%); transition: transform 240ms ease; z-index: 799;
  }
  .ci-nav.is-open { transform: none; }
  .ci-nav__list { flex-direction: column; align-items: stretch; }
  .ci-nav__item + .ci-nav__item::before { display: none; }
  .ci-nav__item > a { display: block; padding: var(--ci-sp-3) 0; font-size: var(--ci-fs-lg); border-bottom: 1px solid rgba(255,255,255,.15); }
  .ci-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding-left: var(--ci-sp-4); }
  .ci-nav .sub-menu a { color: rgba(255,255,255,.85); }
  .ci-nav__mobile-actions { display: grid; gap: var(--ci-sp-2); margin-top: var(--ci-sp-5); }
  body.ci-nav-open { overflow: hidden; }
  body.ci-nav-open .ci-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.ci-nav-open .ci-burger span:nth-child(2) { opacity: 0; }
  body.ci-nav-open .ci-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* 5. Footer ----------------------------------------------------------------- */
.ci-footer { background: var(--ci-navy); color: rgba(255,255,255,.88); padding-block: var(--ci-sp-8) var(--ci-sp-5); font-size: var(--ci-fs-base); }
.ci-footer a { color: rgba(255,255,255,.88); }
.ci-footer a:hover { color: var(--ci-accent); }
.ci-footer__top { padding-bottom: var(--ci-sp-6); margin-bottom: var(--ci-sp-6); border-bottom: 1px solid rgba(255,255,255,.2); }
.ci-footer__brand .custom-logo, .ci-footer__brand .ci-logo img { max-height: 64px; }
.ci-footer__grid { display: grid; gap: var(--ci-sp-6); }
@media (min-width: 640px)  { .ci-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ci-footer__grid { grid-template-columns: 1fr 1.3fr 1.6fr 1fr auto; } }
.ci-footer__title { margin-bottom: var(--ci-sp-3); font-size: var(--ci-fs-lg); font-weight: 700; color: var(--ci-white); }
.ci-footer__text { margin: 0; line-height: 1.7; }
.ci-footer__menu { margin: 0; padding: 0 0 0 var(--ci-sp-4); list-style: none; border-left: 2px solid var(--ci-accent); }
.ci-footer__menu li + li { margin-top: var(--ci-sp-1); }
.ci-footer__col--social .ci-social { justify-content: flex-start; }
@media (min-width: 1024px) { .ci-footer__col--social { align-self: start; } }
.ci-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--ci-sp-3) var(--ci-sp-6); justify-content: space-between; align-items: center;
  margin-top: var(--ci-sp-7); padding-top: var(--ci-sp-4); border-top: 1px solid rgba(255,255,255,.2); font-size: var(--ci-fs-sm);
}
.ci-footer__privacy { display: inline-flex; align-items: center; gap: var(--ci-sp-2); font-weight: 500; }

/* 6. Modales ---------------------------------------------------------------- */
.ci-modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); width: 100%; }
.ci-modal::backdrop { background: rgba(0, 52, 118, .65); backdrop-filter: blur(3px); }
.ci-modal__panel { position: relative; padding: var(--ci-sp-6); background: var(--ci-white); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-lg); }
.ci-modal__close { position: absolute; top: var(--ci-sp-3); right: var(--ci-sp-3); width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ci-gray-100); color: var(--ci-navy); font-size: 1.4rem; line-height: 1; z-index: 2; }
.ci-modal__close:hover { background: var(--ci-accent); }
.ci-modal__title { margin-bottom: var(--ci-sp-2); font-size: var(--ci-fs-xl); font-weight: 700; }
.ci-modal__lead { color: var(--ci-text); }
.ci-modal__links { display: grid; gap: var(--ci-sp-3); margin: var(--ci-sp-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .ci-modal__links { grid-template-columns: repeat(2, 1fr); } }
.ci-modal__link { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-sp-3); padding: var(--ci-sp-4); border: 1px solid var(--ci-border); border-radius: var(--ci-radius); font-weight: 700; color: var(--ci-navy); }
.ci-modal__link:hover { border-color: var(--ci-accent); background: var(--ci-gray-50); }
.ci-modal--video { max-width: min(94vw, 1000px); }
.ci-modal__panel--video { padding: 0; background: var(--ci-black); overflow: hidden; }
.ci-video { aspect-ratio: 16 / 9; }
.ci-video iframe, .ci-video video { width: 100%; height: 100%; border: 0; display: block; }

/* 7. Formularios ------------------------------------------------------------ */
.ci-form { display: grid; gap: var(--ci-sp-4); }
.ci-form__row { display: grid; gap: var(--ci-sp-4); }
@media (min-width: 640px) { .ci-form__row--2 { grid-template-columns: repeat(2, 1fr); } }
.ci-field { display: grid; gap: var(--ci-sp-1); }
.ci-field label { font-size: var(--ci-fs-sm); font-weight: 700; color: var(--ci-navy); }
.ci-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .ci-form select, .ci-form textarea {
  width: 100%; min-height: 50px; padding: var(--ci-sp-3) var(--ci-sp-4); border: 1px solid var(--ci-border); border-radius: var(--ci-radius-sm);
  font: inherit; color: var(--ci-text); background: var(--ci-white); transition: border-color var(--ci-ease), box-shadow var(--ci-ease);
}
.ci-form textarea { min-height: 140px; resize: vertical; }
.ci-form input:focus, .ci-form select:focus, .ci-form textarea:focus { outline: none; border-color: var(--ci-navy); box-shadow: 0 0 0 3px rgba(255, 236, 0, .5); }
.ci-field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--ci-sp-2); font-size: var(--ci-fs-sm); }
.ci-field--check label { font-weight: 400; color: var(--ci-text); }

/* 8. Buscador --------------------------------------------------------------- */
.ci-search { display: grid; gap: var(--ci-sp-4); }
.ci-search__field { display: grid; gap: var(--ci-sp-1); }
.ci-search__field label { font-size: var(--ci-fs-md); font-weight: 700; color: var(--ci-white); }
.ci-search__select { position: relative; }
.ci-search__select select {
  width: 100%; min-height: 54px; padding: var(--ci-sp-3) 3rem var(--ci-sp-3) var(--ci-sp-4);
  border: 0; border-radius: var(--ci-radius-sm); background: var(--ci-blue-50); color: var(--ci-navy);
  font: inherit; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.ci-search__select select:disabled { opacity: .6; cursor: not-allowed; }
.ci-search__select select:focus { outline: 3px solid var(--ci-accent); }
.ci-search__chevron { position: absolute; right: var(--ci-sp-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ci-navy); }
.ci-search__actions { display: flex; justify-content: flex-end; }
.ci-search__warning { margin: 0; padding: var(--ci-sp-2) var(--ci-sp-3); border-radius: var(--ci-radius-sm); background: var(--ci-accent); color: var(--ci-navy); font-size: var(--ci-fs-sm); font-weight: 600; }
/* Variante barra (catálogo): horizontal sobre fondo claro */
.ci-search--bar { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; padding: var(--ci-sp-5); background: var(--ci-navy); border-radius: var(--ci-radius); }
.ci-search--bar .ci-search__actions { justify-content: stretch; }
.ci-search--bar .ci-search__submit { width: 100%; }

/* 9. Tarjeta de inmueble ---------------------------------------------------- */
.ci-inmueble-card {
  display: flex; flex-direction: column; background: var(--ci-white); border-radius: var(--ci-radius-lg);
  box-shadow: var(--ci-shadow); overflow: hidden; transition: transform var(--ci-ease), box-shadow var(--ci-ease);
}
.ci-inmueble-card:hover { transform: translateY(-4px); box-shadow: var(--ci-shadow-lg); }
.ci-inmueble-card__media { display: block; position: relative; aspect-ratio: 16 / 11; background: var(--ci-gray-100); }
.ci-inmueble-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ci-inmueble-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ci-gray-400); }
.ci-inmueble-card__noimg .ci-icon { width: 48px; height: 48px; stroke-width: 1.5; }
.ci-inmueble-card__body { display: flex; flex-direction: column; gap: var(--ci-sp-2); padding: 0 var(--ci-sp-5) var(--ci-sp-5); }
.ci-inmueble-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-sp-3); margin-top: -18px; }
.ci-inmueble-card__top .ci-badge { padding: .5em 1.4em; font-size: var(--ci-fs-md); border-radius: var(--ci-radius-sm) var(--ci-radius-sm) var(--ci-radius-sm) 0; }
.ci-inmueble-card__price { margin-top: 20px; font-size: var(--ci-fs-xl); font-weight: 500; color: var(--ci-navy); letter-spacing: .01em; white-space: nowrap; }
.ci-inmueble-card__title { margin: 0; font-size: var(--ci-fs-lg); font-weight: 400; }
.ci-inmueble-card__title a { color: var(--ci-navy); }
.ci-inmueble-card__desc { margin: 0; font-weight: 300; color: var(--ci-text); }
.ci-inmueble-card__location { display: flex; align-items: center; gap: var(--ci-sp-1); margin: 0; font-size: var(--ci-fs-sm); color: var(--ci-text-muted); }
.ci-inmueble-card__meta { display: flex; flex-wrap: wrap; gap: var(--ci-sp-2); margin: var(--ci-sp-2) 0 0; padding: 0; list-style: none; }
.ci-inmueble-card__meta li { display: inline-flex; align-items: center; gap: var(--ci-sp-2); padding: .35rem .7rem; border: 1px solid var(--ci-border); border-radius: var(--ci-radius-sm); font-size: var(--ci-fs-sm); font-weight: 500; color: var(--ci-navy); }

/* 10. Utilidades ------------------------------------------------------------ */
.ci-text-center { text-align: center; }
.ci-muted { color: var(--ci-text-muted); }
.ci-mt-0 { margin-top: 0; } .ci-mb-0 { margin-bottom: 0; }
.ci-hide-mobile { display: none; }
@media (min-width: 768px) { .ci-hide-mobile { display: initial; } .ci-hide-desktop { display: none; } }
.ci-notice { padding: var(--ci-sp-4) var(--ci-sp-5); border-left: 4px solid var(--ci-accent); background: var(--ci-gray-50); border-radius: var(--ci-radius-sm); }
.ci-page { padding-block: var(--ci-sp-7); }
.ci-page .ci-container { max-width: 900px; }
.ci-404 { padding-block: var(--ci-sp-9); text-align: center; }
.ci-404__code { font-size: clamp(4rem, 15vw, 8rem); font-weight: 800; color: var(--ci-accent); line-height: 1; }