/* ============================================
   CIUDADIA — Custom Styles for Dynamic Elements
   Minimalist Slate Blue & Wheat (Option 3)
   ============================================ */

/* --- Custom Variables matching Tailwind config --- */
:root {
  --primary: #2d3e50;            /* Azul Acero */
  --secondary: #6d5c3a;          /* Trigo / Oro Muted */
  --background: #fbf9f8;         /* Lino */
  --surface: #ffffff;
  --surface-container-low: #f6f3f2;
  --on-surface: #1b1c1c;
  --on-surface-variant: #43474c;
  --outline-variant: rgba(196, 199, 204, 0.4);
  --outline: #74777c;
  
  --font-heading: 'EB Garamond', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-label: 'Source Sans 3', sans-serif;
}

/* --- Reveal scroll animations --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ---------- Filters Bar (Index Page) ---------- */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.filters__tabs {
  display: flex;
  gap: 8px;
}

.filters__tab {
  padding: 10px 20px;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: 0px; /* Sharp edges */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.filters__tab:hover,
.filters__tab.active {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
}

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

.filters__select {
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--on-surface-variant);
  background: white;
  border: 1px solid var(--outline-variant);
  border-radius: 0px;
  cursor: pointer;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232d3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.filters__select option {
  background: #ffffff;
  color: var(--on-surface);
}

.filters__count {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--on-surface-variant);
}

/* ---------- Buy/Rent Page Filter Bar ---------- */
.filters-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 24px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 0px;
}

.filters-bar__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filters-bar__label {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.filters-bar__select,
.filters-bar__input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--on-surface);
  background: white;
  border: 1px solid var(--outline-variant);
  border-radius: 0px;
  outline: none;
  transition: border-color 0.2s;
}

.filters-bar__select:focus,
.filters-bar__input:focus {
  border-color: var(--primary);
}

.filters-bar__btn-reset {
  margin-top: auto;
  padding: 11px 16px;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: white;
  background: var(--primary);
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.filters-bar__btn-reset:hover {
  opacity: 0.9;
}

/* --- Properties Grid --- */
.properties__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

/* --- Property Card --- */
.property-card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 0px; /* Sharp edges */
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(78, 94, 109, 0.08);
}

/* Carousel Image Area */
.property-card__image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #eae8e7;
}

.property-card__slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.property-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.property-card__img.active {
  opacity: 1;
  position: relative;
}

/* Carousel Navigation */
.property-card__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--on-surface);
  z-index: 10;
  transition: background-color 0.2s, opacity 0.2s;
  border-radius: 0px;
  opacity: 0;
}

.property-card__image:hover .property-card__carousel-btn {
  opacity: 1;
}

.property-card__carousel-btn:hover {
  background: white;
  color: var(--primary);
}

.property-card__carousel-btn--prev {
  left: 8px;
}

.property-card__carousel-btn--next {
  right: 8px;
}

/* Carousel Dots */
.property-card__carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.property-card__carousel-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.property-card__carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

/* Badges and Favorites */
.property-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: white;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  font-weight: 600;
  z-index: 5;
}

.property-card__favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  color: var(--on-surface-variant);
  z-index: 5;
  transition: color 0.2s, background-color 0.2s;
}

.property-card__favorite:hover {
  background: white;
  color: #ba1a1a;
}

.property-card__favorite.liked {
  color: #ba1a1a;
}

/* Card Body */
.property-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.property-card__price {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 6px;
}

.property-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-surface);
  margin-bottom: 8px;
  min-height: 52px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-card__location {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--on-surface-variant);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.property-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--outline-variant);
  padding-top: 14px;
}

.property-card__feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--on-surface-variant);
}

.property-card__feature-icon {
  font-size: 15px;
}

/* --- Modal Overlay & Content --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 29, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 16px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--outline-variant);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  color: var(--on-surface);
  transition: background-color 0.2s, color 0.2s;
  z-index: 10;
}

.modal__close:hover {
  background: white;
  color: var(--primary);
}

.modal__body {
  padding: 32px;
}

.modal__price {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 8px;
}

.modal__title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-surface);
  margin-bottom: 12px;
}

.modal__location {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--on-surface-variant);
  margin-bottom: 24px;
}

.modal__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 24px;
}

.modal__feature {
  text-align: center;
}

.modal__feature-value {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
}

.modal__feature-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.modal__description h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 8px;
}

.modal__description p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.modal__contact {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.modal__contact-btn {
  flex: 1;
  padding: 16px;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal__contact-btn--primary {
  background: var(--primary);
  color: white;
}

.modal__contact-btn--primary:hover {
  opacity: 0.9;
}

.modal__contact-btn--secondary {
  background: var(--surface-container-low);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.modal__contact-btn--secondary:hover {
  background: rgba(78, 94, 109, 0.05);
}

/* --- Hero Button Gold Shadow --- */
.btn-hero-gold {
  box-shadow: 0 6px 18px 0 rgba(109, 92, 58, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-gold:hover {
  box-shadow: 0 10px 25px 0 rgba(109, 92, 58, 0.3);
}

/* --- Custom Header Blue Shadow --- */
header {
  box-shadow: 0 4px 16px 0 rgba(45, 62, 80, 0.04);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

header.shadow-sm,
header.shadow-scrolled {
  box-shadow: 0 6px 20px 0 rgba(45, 62, 80, 0.08) !important;
}

/* --- Service Card Styles --- */
.service-card {
  border: 1px solid rgba(109, 92, 58, 0.2) !important;
  background-color: #ffffff;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: start;
}

.service-card:hover {
  border-color: #6d5c3a !important;
  box-shadow: 0 12px 30px rgba(109, 92, 58, 0.08) !important;
  transform: translateY(-4px);
}

.line-accent {
  width: 24px;
  height: 2px;
  background-color: #6d5c3a;
  margin-top: 8px;
  margin-bottom: 16px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .line-accent {
  width: 100%;
}

/* --- Header Navigation Link Styles & Active Indicator --- */
.nav-item-link {
  position: relative;
  color: var(--on-surface-variant, #4e5e6d);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
}

.nav-item-link:hover,
.nav-item-link.active,
.nav-item-link.nav-link-active,
a.nav-link-active,
a.active.nav-item-link {
  color: #2d3e50 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #2d3e50 !important;
  padding-bottom: 4px !important;
}