/* ============================================================
   NUEVAHABITAT — Sistema de Diseño Principal
   Paleta: Negro #0d0d0d | Oro #b8936a | Blanco #ffffff | Crema #f9f5ef
   Tipografía: Playfair Display (serif) + Inter (sans-serif)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --negro:       #0d0d0d;
  --negro-soft:  #1a1a1a;
  --oro:         #b8936a;
  --oro-claro:   #d4b896;
  --oro-oscuro:  #9a7550;
  --blanco:      #ffffff;
  --crema:       #f9f5ef;
  --crema-dark:  #efe9e0;
  --gris-claro:  #f4f4f4;
  --gris-medio:  #888888;
  --gris-texto:  #555555;

  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  --shadow-sm:   0 2px 12px rgba(0,0,0,.06);
  --shadow-md:   0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:   0 24px 64px rgba(0,0,0,.14);

  --transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --max-w:       1280px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Previene zoom táctil en doble-tap y estabiliza layout */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--negro);
  background: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Tipografía ───────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; }

.overline {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .75rem;
  display: block;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--negro);
  margin-bottom: 1rem;
}

.section-title.light { color: var(--blanco); }

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--gris-texto);
  max-width: 600px;
  line-height: 1.7;
}

.section-subtitle.light { color: rgba(255,255,255,.75); }

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--negro);
  color: var(--blanco);
}
.btn-primary:hover { background: var(--negro-soft); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-gold {
  background: var(--oro);
  color: var(--blanco);
}
.btn-gold:hover { background: var(--oro-oscuro); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184,147,106,.35); }

.btn-outline {
  border: 1.5px solid var(--negro);
  color: var(--negro);
  background: transparent;
}
.btn-outline:hover { background: var(--negro); color: var(--blanco); }

.btn-outline-light {
  border: 1.5px solid rgba(255,255,255,.6);
  color: var(--blanco);
  background: transparent;
}
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: var(--blanco); }

.btn-lg { padding: 1.1rem 2.5rem; font-size: 1rem; }

/* ── Navegación ───────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(13,13,13,.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
  transition: padding var(--transition), box-shadow var(--transition);
  padding: 1.1rem 0;
}

#navbar.scrolled {
  background: rgba(13,13,13,.99);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 28px rgba(0,0,0,.45);
  padding: .75rem 0;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo { display: flex; align-items: center; gap: 1rem; }

.nav-logo img {
  height: 76px;
  width: auto;
  mix-blend-mode: screen;
  flex-shrink: 0;
  filter: brightness(1.15) contrast(1.05);
}

.nav-logo-divider {
  width: 1.5px;
  height: 40px;
  background: rgba(212,184,150,.55);
  flex-shrink: 0;
}

.nav-logo .logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-logo .logo-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #d4aa6e;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(212,170,110,.35);
}

.nav-logo .logo-sub {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .26em;
  color: rgba(212,170,110,.75);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-links a {
  font-size: .875rem;
  font-weight: 400;
  color: rgba(255,255,255,.85);
  letter-spacing: .03em;
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--oro);
  transition: width var(--transition);
}

.nav-links a:hover { color: var(--blanco); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }

.nav-tel {
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.nav-tel:hover { color: var(--oro); }

.nav-cta {
  background: var(--oro);
  color: var(--blanco);
  padding: .55rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--transition);
}
.nav-cta:hover { background: var(--oro-oscuro); transform: translateY(-1px); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--blanco); transition: var(--transition); }

/* ── Hero ─────────────────────────────────────────────────── */
#hero {
  position: relative;
  height: 100vh;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 8s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13,13,13,.88) 0%,
    rgba(13,13,13,.42) 45%,
    rgba(13,13,13,.18) 75%,
    rgba(13,13,13,.08) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 80px;
  padding: 0 2rem 80px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(184,147,106,.2);
  border: 1px solid var(--oro);
  color: var(--oro-claro);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--oro); border-radius: 50%; }

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--blanco);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  max-width: 780px;
}

.hero-title em { font-style: italic; color: var(--oro-claro); }

.hero-subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.78);
  max-width: 520px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* Search box hero */
.hero-search {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  padding: .5rem .5rem .5rem 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 680px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.hero-toggle {
  display: flex;
  flex-shrink: 0;
  background: var(--gris-claro);
  border-radius: var(--radius-sm);
  margin: .5rem .75rem .5rem .5rem;
  padding: 3px;
  gap: 2px;
}

.hero-toggle button {
  padding: .5rem 1.1rem;
  font-size: .8125rem;
  font-weight: 500;
  border-radius: 4px;
  color: var(--gris-medio);
  transition: var(--transition);
}
.hero-toggle button.active {
  background: var(--negro);
  color: var(--blanco);
}

.hero-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .9375rem;
  color: var(--negro);
  font-family: var(--font-sans);
  outline: none;
  padding: .5rem 0;
}
.hero-search-input::placeholder { color: var(--gris-medio); }

.hero-search-btn {
  background: var(--oro);
  color: var(--blanco);
  padding: .75rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--transition);
  flex-shrink: 0;
  margin: .25rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hero-search-btn:hover { background: var(--oro-oscuro); }

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.hero-stat-num {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blanco);
}
.hero-stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-dots {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  gap: .5rem;
  z-index: 3;
}
.hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: var(--transition);
  cursor: pointer;
}
.hero-dot.active { background: var(--oro); width: 24px; border-radius: 3px; }

/* ── Trust Bar ────────────────────────────────────────────── */
.trust-bar {
  background: var(--negro);
  padding: 2rem 0;
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255,255,255,.7);
  font-size: .8125rem;
  letter-spacing: .04em;
}
.trust-item svg { color: var(--oro); flex-shrink: 0; }
.trust-divider {
  width: 1px; height: 24px;
  background: rgba(255,255,255,.15);
}

/* ── Servicios ────────────────────────────────────────────── */
.servicios {
  padding: 100px 0;
  background: var(--crema);
}

.section-header { margin-bottom: 4rem; }

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.servicio-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  group: true;
}

.servicio-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(0.4,0,0.2,1);
}

.servicio-card:hover img { transform: scale(1.06); }

.servicio-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,.88) 0%, rgba(13,13,13,.15) 60%, transparent 100%);
  transition: background var(--transition);
}
.servicio-card:hover .servicio-card-overlay {
  background: linear-gradient(to top, rgba(13,13,13,.92) 0%, rgba(13,13,13,.3) 65%, rgba(13,13,13,.05) 100%);
}

.servicio-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem;
  transform: translateY(0);
  transition: transform var(--transition);
}

.servicio-tag {
  display: inline-block;
  background: var(--oro);
  color: var(--blanco);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 2px;
  margin-bottom: .75rem;
}

.servicio-card-body h3 {
  font-size: 1.625rem;
  color: var(--blanco);
  margin-bottom: .5rem;
}

.servicio-card-body p {
  font-size: .875rem;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.servicio-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--oro-claro);
  font-size: .875rem;
  font-weight: 500;
  transition: gap var(--transition);
}
.servicio-link:hover { gap: .9rem; }

/* ── Proceso ──────────────────────────────────────────────── */
.proceso {
  padding: 100px 0;
  background: var(--blanco);
}

.proceso-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.proceso-image {
  position: sticky;
  top: 120px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.proceso-image img { width: 100%; height: 100%; object-fit: cover; }
.proceso-image-badge {
  position: absolute;
  bottom: 1.75rem; left: 1.75rem;
  background: var(--blanco);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.5rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.proceso-image-badge .badge-icon {
  width: 44px; height: 44px;
  background: var(--crema);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oro);
}
.proceso-image-badge .badge-text {
  font-size: .8125rem;
  color: var(--gris-texto);
}
.proceso-image-badge .badge-text strong {
  display: block;
  font-size: 1.125rem;
  color: var(--negro);
  font-family: var(--font-serif);
}

.proceso-steps { padding-top: .5rem; }

.proceso-step {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--crema-dark);
  transition: var(--transition);
}
.proceso-step:first-child { padding-top: 0; }
.proceso-step:last-child { border-bottom: none; }
.proceso-step:hover { padding-left: .5rem; }

.paso-num {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--crema-dark);
  min-width: 2.25rem;
  line-height: 1;
  transition: color var(--transition);
}
.proceso-step:hover .paso-num { color: var(--oro); }

.paso-body h4 {
  font-size: 1.0625rem;
  margin-bottom: .35rem;
  color: var(--negro);
}
.paso-body p {
  font-size: .875rem;
  color: var(--gris-texto);
  line-height: 1.65;
}

/* ── Propiedades ──────────────────────────────────────────── */
.propiedades {
  padding: 100px 0;
  background: var(--crema);
}

.propiedades-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  gap: 2rem;
}

.prop-slider-controls {
  display: flex;
  gap: .75rem;
}
.prop-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.prop-arrow:hover { background: var(--negro); color: var(--blanco); }
.prop-arrow svg { width: 16px; }

.propiedades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.prop-card {
  background: var(--blanco);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.prop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.prop-card-image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.prop-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.prop-card:hover .prop-card-image img { transform: scale(1.06); }

.prop-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--negro);
  color: var(--blanco);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 2px;
}
.prop-badge.disponible { background: var(--oro); }
.prop-badge.reservada  { background: #555; }

.prop-favorite {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-medio);
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.prop-favorite:hover { color: #e84545; background: var(--blanco); }

.prop-card-body { padding: 1.25rem 1.5rem 1.5rem; }

.prop-price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--negro);
  margin-bottom: .35rem;
}

.prop-title {
  font-size: .9375rem;
  color: var(--gris-texto);
  margin-bottom: .85rem;
  font-weight: 400;
}

.prop-location {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  color: var(--gris-medio);
  margin-bottom: 1rem;
}
.prop-location svg { color: var(--oro); width: 14px; }

.prop-features {
  display: flex;
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--crema-dark);
}
.prop-feat {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  color: var(--gris-texto);
}
.prop-feat svg { width: 15px; color: var(--gris-medio); }

/* ── Precios ──────────────────────────────────────────────── */
.precios {
  padding: 100px 0;
  background: var(--negro);
}

.precios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}

.precio-card {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.precio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--oro);
}

.precio-card:hover {
  border-color: rgba(184,147,106,.4);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

.precio-card.featured {
  background: var(--oro);
  border-color: var(--oro);
}
.precio-card.featured::before { background: rgba(255,255,255,.4); }

.precio-tipo {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1rem;
}
.precio-card.featured .precio-tipo { color: rgba(255,255,255,.8); }

.precio-amount {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1;
  margin-bottom: .35rem;
}
.precio-card.featured .precio-amount { color: var(--blanco); }

.precio-iva {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  margin-bottom: .5rem;
}
.precio-card.featured .precio-iva { color: rgba(255,255,255,.75); }

.precio-desc {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 2rem;
  line-height: 1.65;
}
.precio-card.featured .precio-desc { color: rgba(255,255,255,.9); }

.precio-lista {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2.5rem;
}

.precio-lista li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .875rem;
  color: rgba(255,255,255,.8);
}
.precio-card.featured .precio-lista li { color: rgba(255,255,255,.95); }

.precio-lista li svg { color: var(--oro); flex-shrink: 0; }
.precio-card.featured .precio-lista li svg { color: rgba(255,255,255,.9); }

.precio-nota {
  margin-top: 2rem;
  padding: 1.25rem;
  background: rgba(184,147,106,.12);
  border-radius: var(--radius-md);
  border: 1px solid rgba(184,147,106,.2);
  text-align: center;
}
.precio-nota p {
  font-size: .8125rem;
  color: var(--oro-claro);
  line-height: 1.6;
}
.precio-nota strong { color: var(--blanco); font-weight: 600; }

/* ── Testimonios ──────────────────────────────────────────── */
.testimonios {
  padding: 100px 0;
  background: var(--crema);
}

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 4rem;
}

.testimonio-card {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.testimonio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.testimonio-stars {
  display: flex;
  gap: .2rem;
  margin-bottom: 1.25rem;
  color: var(--oro);
}

.testimonio-text {
  font-size: .9375rem;
  color: var(--gris-texto);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  font-style: italic;
}
.testimonio-text::before { content: '\201C'; font-family: var(--font-serif); font-size: 2rem; color: var(--oro); display: block; margin-bottom: .25rem; line-height: 1; }

.testimonio-autor {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonio-autor img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonio-nombre {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--negro);
}
.testimonio-rol {
  font-size: .8125rem;
  color: var(--gris-medio);
}

/* ── Quiénes Somos ────────────────────────────────────────── */
.nosotros {
  padding: 100px 0;
  background: var(--blanco);
}

.nosotros-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.nosotros-images {
  position: relative;
  height: 580px;
}

.nosotros-img-main {
  position: absolute;
  top: 0; left: 0;
  width: 75%;
  height: 82%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.nosotros-img-main img { width: 100%; height: 100%; object-fit: cover; }

.nosotros-img-secondary {
  position: absolute;
  bottom: 0; right: 0;
  width: 58%;
  height: 55%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 6px solid var(--blanco);
  box-shadow: var(--shadow-lg);
}
.nosotros-img-secondary img { width: 100%; height: 100%; object-fit: cover; }

.nosotros-badge-float {
  position: absolute;
  top: 50%; left: 68%;
  transform: translate(-50%, -50%);
  background: var(--oro);
  color: var(--blanco);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  z-index: 2;
  min-width: 120px;
}
.nosotros-badge-float .float-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  display: block;
  line-height: 1.1;
}
.nosotros-badge-float .float-label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.nosotros-content { padding: 2rem 0; }

.nosotros-content .section-subtitle { margin-bottom: 2rem; }

.nosotros-valores {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.valor-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.valor-icon {
  width: 42px; height: 42px;
  background: var(--crema);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oro);
  flex-shrink: 0;
}
.valor-body h4 { font-size: 1rem; margin-bottom: .25rem; }
.valor-body p  { font-size: .875rem; color: var(--gris-texto); }

/* ── Blog ─────────────────────────────────────────────────── */
.blog {
  padding: 100px 0;
  background: var(--crema);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}

.blog-card {
  background: var(--blanco);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.blog-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }

.blog-card-body { padding: 1.5rem; }

.blog-cat {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .5rem;
}
.blog-card-body h3 {
  font-size: 1.125rem;
  margin-bottom: .6rem;
  line-height: 1.35;
  color: var(--negro);
}
.blog-card-body p {
  font-size: .875rem;
  color: var(--gris-texto);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}
.blog-meta {
  font-size: .75rem;
  color: var(--gris-medio);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.blog-meta span::before { content: '·'; margin-right: .5rem; }
.blog-meta span:first-child::before { content: none; }

/* ── CTA Final ────────────────────────────────────────────── */
.cta-final {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,.82);
}
.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.cta-content .section-title { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.cta-content .section-subtitle { max-width: 100%; margin: 1.25rem auto 2.5rem; }
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-phones {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.cta-phone {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.75);
  font-size: .9375rem;
  transition: color var(--transition);
}
.cta-phone:hover { color: var(--oro-claro); }
.cta-phone svg { color: var(--oro); }

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: var(--negro-soft);
  color: rgba(255,255,255,.65);
}

.footer-top {
  padding: 5rem 0 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-brand img { height: 64px; mix-blend-mode: screen; margin-bottom: 1rem; }
.footer-brand p { font-size: .875rem; line-height: 1.75; max-width: 280px; }

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul a {
  font-size: .875rem;
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--oro-claro); }

.footer-bottom {
  padding: 1.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: .8125rem; }
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}
.footer-bottom-links a { font-size: .8125rem; transition: color var(--transition); }
.footer-bottom-links a:hover { color: var(--oro-claro); }

.footer-social {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}
.footer-social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.07);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  transition: var(--transition);
}
.footer-social a:hover { background: var(--oro); color: var(--blanco); }

/* ── WhatsApp flotante ────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.whatsapp-btn {
  width: 56px; height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.4);
  transition: var(--transition);
  color: var(--blanco);
}
.whatsapp-btn:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(37,211,102,.55); }

.whatsapp-tooltip {
  background: var(--negro);
  color: var(--blanco);
  font-size: .8125rem;
  padding: .5rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: var(--transition);
  pointer-events: none;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); }

/* ── Animations ───────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-up-delay-1 { transition-delay: .1s; }
.fade-up-delay-2 { transition-delay: .2s; }
.fade-up-delay-3 { transition-delay: .3s; }
.fade-up-delay-4 { transition-delay: .4s; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .servicios-grid        { grid-template-columns: repeat(2, 1fr); }
  .propiedades-grid      { grid-template-columns: repeat(2, 1fr); }
  .testimonios-grid      { grid-template-columns: repeat(2, 1fr); }
  .blog-grid             { grid-template-columns: repeat(2, 1fr); }
  .footer-top            { grid-template-columns: 1fr 1fr; }
  .proceso-inner         { gap: 3rem; }
  .nosotros-inner        { gap: 3rem; }
}

@media (max-width: 768px) {
  :root { --max-w: 100%; }
  .container { padding: 0 1.25rem; }

  /* Nav */
  .nav-links, .nav-tel, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  #navbar { padding: .8rem 0; }
  .nav-logo img { height: 54px; }
  .nav-logo .logo-name { font-size: 1rem; }
  .nav-logo .logo-sub  { font-size: .55rem; }

  /* Body space for bottom nav */
  body { padding-bottom: 66px; }

  /* Hero — app style */
  #hero { min-height: 68svh; min-height: 68vh; align-items: flex-end; }
  .hero-content { padding: 0 1.25rem 32px; }
  .hero-badge   { display: none; }
  .hero-title   { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-subtitle{ font-size: .875rem; max-width: 100%; margin-bottom: 1.25rem; }
  .hero-search  {
    flex-direction: column; gap: .6rem; padding: 1rem;
    border-radius: 16px; background: var(--blanco);
  }
  .hero-toggle  { width: 100%; justify-content: center; order: -1; background: var(--gris-claro); border-radius: 8px; padding: 3px; }
  .hero-toggle button { flex: 1; border-radius: 6px; }
  .hero-toggle button.active { background: var(--negro); color: var(--blanco); }
  .hero-search-input { border-radius: 8px; background: var(--gris-claro); border: none; width: 100%; }
  .hero-search-btn   { width: 100%; justify-content: center; border-radius: 8px; }
  .hero-stats { gap: 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: .75rem; }
  .hero-stat-num { font-size: 1.35rem; }
  .hero-dots  { bottom: 100px; }

  /* Trust bar */
  .trust-bar-inner { flex-direction: column; gap: .75rem; align-items: flex-start; }
  .trust-divider   { display: none; }

  /* Servicios — 2 columnas tipo app */
  .servicios-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .servicio-card  { min-height: 210px; border-radius: 14px; }
  .servicio-card img { height: 100%; }
  .servicio-card-body { padding: .85rem; gap: .4rem; }
  .servicio-card-body h3 { font-size: .95rem; }
  .servicio-card-body p  { display: none; }
  .servicio-tag  { font-size: .58rem; padding: .25rem .55rem; }
  .servicio-link { font-size: .75rem; gap: .25rem; }

  /* Proceso — simplificado */
  .proceso-inner  { grid-template-columns: 1fr; gap: 2rem; }
  .proceso-image  { display: none; }
  .proceso-steps .section-title { font-size: 1.75rem; }
  .proceso-step { gap: .75rem; }
  .paso-num { font-size: 1.5rem; min-width: 2rem; }
  .paso-body h4 { font-size: .9rem; }
  .paso-body p  { font-size: .8125rem; }

  /* Propiedades */
  .propiedades-grid { grid-template-columns: 1fr; }
  .propiedades-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .prop-slider-controls { display: none; }

  /* Precios */
  .precios-grid { grid-template-columns: 1fr; }

  /* Nosotros */
  .nosotros-inner  { grid-template-columns: 1fr; }
  .nosotros-images { height: 300px; }
  .nosotros-img-secondary { display: none; }

  /* Testimonios */
  .testimonios-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top    { grid-template-columns: 1fr; gap: 2rem; }
  .footer-col    { display: none; }
  .footer-brand  { text-align: center; }
  .footer-brand img { margin: 0 auto; }
  .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .75rem; }

  /* WhatsApp float — encima del bottom nav */
  .whatsapp-float { bottom: 78px; right: 1rem; }
  .whatsapp-btn { width: 50px; height: 50px; }
  .whatsapp-tooltip { display: none; }
}

/* ── Mobile nav overlay ───────────────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--negro);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 6rem 2rem 3rem;
  gap: 2.5rem;
  transform: translateX(100%);
  transition: transform var(--transition);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--blanco);
  display: block;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-nav-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  color: var(--blanco);
  font-size: 1.5rem;
  padding: .5rem;
}

/* ── Utility ──────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-center .section-subtitle { margin: 0 auto; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }

/* ============================================================
   ESTILOS ADICIONALES — Comprar, Ficha, Blog, Login, Hipotecas
   ============================================================ */

/* ── Shared page hero ─────────────────────────────────────── */
.page-hero{position:relative;min-height:72vh;display:flex;align-items:center;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(13,13,13,.86) 40%,rgba(13,13,13,.28) 100%)}
.page-hero-content{position:relative;z-index:2;max-width:660px;padding:140px 0 100px}
.page-hero-content h1{font-family:var(--font-serif);font-size:clamp(2.5rem,5vw,4rem);color:var(--blanco);line-height:1.1;margin-bottom:1.25rem}
.page-hero-content p{font-size:1.125rem;color:rgba(255,255,255,.8);line-height:1.7;max-width:540px}
.page-hero-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}

/* ── FAQ Accordion ────────────────────────────────────────── */
.faq-section{padding:100px 0;background:var(--blanco)}
.faq-list{max-width:760px;margin:3rem auto 0;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border:1.5px solid var(--crema-dark);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition)}
.faq-item.open{border-color:var(--oro)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.35rem 1.5rem;background:var(--blanco);font-size:1rem;font-weight:500;color:var(--negro);text-align:left;cursor:pointer;gap:1rem}
.faq-q svg{flex-shrink:0;transition:transform var(--transition);color:var(--oro)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{padding:0 1.5rem 1.35rem;font-size:.9375rem;color:var(--gris-texto);line-height:1.75}

/* ── Galería ficha inmueble ───────────────────────────────── */
.prop-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.5rem;height:520px;border-radius:var(--radius-lg);overflow:hidden}
.prop-gallery-main{grid-row:1/3;position:relative;cursor:pointer;overflow:hidden}
.prop-gallery-main img,.prop-gallery-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prop-gallery-main:hover img,.prop-gallery-thumb:hover img{transform:scale(1.04)}
.prop-gallery-thumb{position:relative;cursor:pointer;overflow:hidden}
.gallery-count{position:absolute;bottom:.75rem;right:.75rem;background:rgba(13,13,13,.75);color:var(--blanco);font-size:.8125rem;padding:.35rem .75rem;border-radius:100px;backdrop-filter:blur(6px)}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column}
.lightbox.open{display:flex}
.lightbox img{max-height:85vh;max-width:90vw;object-fit:contain;border-radius:var(--radius-sm)}
.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;color:rgba(255,255,255,.7);font-size:2rem;cursor:pointer;transition:color var(--transition)}
.lightbox-close:hover{color:var(--blanco)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;width:100%;justify-content:space-between;padding:0 1rem;pointer-events:none}
.lightbox-arrow{pointer-events:all;width:48px;height:48px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blanco);transition:background var(--transition)}
.lightbox-arrow:hover{background:rgba(255,255,255,.25)}
.lightbox-dots{display:flex;gap:.5rem;margin-top:1.25rem}
.lightbox-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background var(--transition)}
.lightbox-dot.active{background:var(--oro)}

/* ── Ficha inmueble header ────────────────────────────────── */
.prop-detail-header{position:sticky;top:70px;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--crema-dark);padding:.85rem 0}
.prop-detail-header-inner{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.prop-breadcrumb{font-size:.8125rem;color:var(--gris-medio);display:flex;align-items:center;gap:.4rem}
.prop-breadcrumb a{color:var(--gris-medio);transition:color var(--transition)}
.prop-breadcrumb a:hover{color:var(--negro)}
.prop-breadcrumb svg{width:12px}
.prop-header-price{font-family:var(--font-serif);font-size:1.75rem;font-weight:700;color:var(--negro);margin-left:auto}
.prop-header-actions{display:flex;gap:.75rem}
.prop-header-actions button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--crema-dark);display:flex;align-items:center;justify-content:center;color:var(--gris-medio);transition:var(--transition)}
.prop-header-actions button:hover{border-color:var(--negro);color:var(--negro)}

/* ── Ficha inmueble body ──────────────────────────────────── */
.prop-detail-body{padding:3rem 0 6rem;background:var(--crema)}
.prop-detail-grid{display:grid;grid-template-columns:1fr 380px;gap:2.5rem;align-items:start}
.prop-detail-main{}
.prop-detail-sidebar{}
.prop-section{background:var(--blanco);border-radius:var(--radius-lg);padding:2rem;margin-bottom:1.5rem}
.prop-section h2{font-size:1.25rem;margin-bottom:1.25rem;padding-bottom:.85rem;border-bottom:1px solid var(--crema-dark)}
.prop-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.prop-spec{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--crema-dark);font-size:.9rem}
.prop-spec:last-child{border-bottom:none}
.prop-spec-label{color:var(--gris-texto)}
.prop-spec-value{font-weight:500;color:var(--negro)}
.prop-features-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.prop-feat-tag{background:var(--crema);border-radius:100px;padding:.35rem .85rem;font-size:.8125rem;color:var(--negro)}
.prop-description{font-size:.9375rem;color:var(--gris-texto);line-height:1.8}
.prop-map{border-radius:var(--radius-md);overflow:hidden;height:260px;background:var(--crema-dark);display:flex;align-items:center;justify-content:center;margin-top:1rem}
.prop-map iframe{width:100%;height:100%;border:none}

/* Sidebar contacto ─────────────────────────────────────────── */
.prop-contact-card{background:var(--blanco);border-radius:var(--radius-lg);padding:2rem;position:sticky;top:130px;box-shadow:var(--shadow-md)}
.prop-contact-card h3{font-size:1.125rem;margin-bottom:1.25rem}
.prop-contact-agent{display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--crema-dark)}
.prop-contact-agent img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.prop-contact-agent-name{font-weight:600;font-size:.9375rem}
.prop-contact-agent-role{font-size:.8rem;color:var(--gris-medio)}
.prop-contact-form{display:flex;flex-direction:column;gap:.85rem}
.prop-contact-form input,.prop-contact-form textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--crema-dark);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.875rem;outline:none;transition:border-color var(--transition)}
.prop-contact-form input:focus,.prop-contact-form textarea:focus{border-color:var(--oro)}
.prop-contact-form textarea{resize:none;height:90px}
.prop-ref{font-size:.75rem;color:var(--gris-medio);margin-top:.75rem;text-align:center}

/* ── Banner servicio en ficha ─────────────────────────────── */
.prop-service-banner{border-radius:var(--radius-lg);overflow:hidden;position:relative;min-height:200px;display:flex;align-items:center;margin-bottom:1.5rem}
.prop-service-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prop-service-banner-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.4) 100%)}
.prop-service-banner-body{position:relative;z-index:2;padding:1.75rem}
.prop-service-banner-body p{font-size:.875rem;color:rgba(255,255,255,.8);margin:.35rem 0 1.1rem;line-height:1.55}
.prop-service-banner-body h4{color:var(--blanco);font-size:1.125rem}

/* ── Carrusel propiedades similares ───────────────────────── */
.similar-section{padding:60px 0;background:var(--blanco)}
.similar-track-wrap{overflow:hidden;position:relative}
.similar-track{display:flex;gap:1.5rem;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.similar-card{min-width:320px;background:var(--blanco);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);flex-shrink:0}
.similar-card img{width:100%;height:200px;object-fit:cover}
.similar-card-body{padding:1.1rem 1.25rem 1.35rem}
.similar-card-price{font-family:var(--font-serif);font-size:1.35rem;font-weight:700;color:var(--negro)}
.similar-card-title{font-size:.875rem;color:var(--gris-texto);margin:.2rem 0 .6rem}
.similar-nav{display:flex;gap:.75rem;margin-top:1.5rem}

/* ── Blog ─────────────────────────────────────────────────── */
.blog-hero{padding:140px 0 80px;background:var(--negro);text-align:center}
.blog-hero h1{font-family:var(--font-serif);font-size:clamp(2.5rem,5vw,3.75rem);color:var(--blanco);margin-bottom:1rem}
.blog-hero p{color:rgba(255,255,255,.65);font-size:1.0625rem;max-width:560px;margin:0 auto}
.blog-cats{display:flex;gap:.5rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.blog-cat-btn{padding:.45rem 1.25rem;border-radius:100px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);font-size:.8125rem;transition:var(--transition);cursor:pointer;background:none;font-family:var(--font-sans)}
.blog-cat-btn:hover,.blog-cat-btn.active{border-color:var(--oro);color:var(--oro)}
.blog-main{padding:80px 0;background:var(--crema)}
.blog-featured{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;margin-bottom:3rem}
.blog-feat-card{border-radius:var(--radius-lg);overflow:hidden;position:relative;min-height:420px;cursor:pointer}
.blog-feat-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.blog-feat-card:hover img{transform:scale(1.04)}
.blog-feat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,.9) 0%,rgba(13,13,13,.1) 60%,transparent 100%)}
.blog-feat-body{position:absolute;bottom:0;padding:2rem;z-index:2}
.blog-feat-body .blog-cat{color:var(--oro-claro)}
.blog-feat-body h2{font-family:var(--font-serif);color:var(--blanco);font-size:1.5rem;margin:.4rem 0 .5rem;line-height:1.25}
.blog-feat-body p{color:rgba(255,255,255,.75);font-size:.875rem}
.blog-side{display:flex;flex-direction:column;gap:1.5rem}
.blog-side-card{background:var(--blanco);border-radius:var(--radius-md);overflow:hidden;display:flex;gap:0;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.blog-side-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.blog-side-card img{width:120px;flex-shrink:0;object-fit:cover}
.blog-side-body{padding:1rem 1.25rem}
.blog-side-body .blog-cat{font-size:.7rem;color:var(--oro)}
.blog-side-body h3{font-size:.9375rem;margin:.3rem 0 .4rem;line-height:1.3;color:var(--negro)}
.blog-side-body p{font-size:.8125rem;color:var(--gris-medio)}
.blog-all-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}

/* ── Login / Registro ─────────────────────────────────────── */
.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-visual{position:relative;overflow:hidden}
.auth-visual img{width:100%;height:100%;object-fit:cover}
.auth-visual-overlay{position:absolute;inset:0;background:rgba(13,13,13,.55)}
.auth-visual-brand{position:absolute;top:2rem;left:2rem}
.auth-visual-brand img{height:60px;mix-blend-mode:screen}
.auth-visual-copy{position:absolute;bottom:3rem;left:2.5rem;right:2.5rem;color:var(--blanco)}
.auth-visual-copy h2{font-family:var(--font-serif);font-size:2.25rem;line-height:1.15;margin-bottom:.75rem}
.auth-visual-copy p{color:rgba(255,255,255,.7);font-size:.9375rem;line-height:1.65}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:3rem 2rem;background:var(--blanco)}
.auth-form-box{width:100%;max-width:420px}
.auth-form-box .overline{margin-bottom:.5rem}
.auth-form-box h1{font-size:2rem;margin-bottom:.4rem}
.auth-form-box>p{font-size:.9375rem;color:var(--gris-texto);margin-bottom:2rem}
.auth-social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem;border:1.5px solid var(--crema-dark);border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--negro);background:var(--blanco);transition:var(--transition);cursor:pointer;font-family:var(--font-sans);margin-bottom:1rem}
.auth-social-btn:hover{border-color:var(--negro);background:var(--crema)}
.auth-divider{display:flex;align-items:center;gap:.85rem;margin:1.25rem 0;color:var(--gris-medio);font-size:.8125rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--crema-dark)}
.auth-link{text-align:center;font-size:.875rem;color:var(--gris-texto);margin-top:1.5rem}
.auth-link a{color:var(--oro);font-weight:500}
.auth-forgot{font-size:.8125rem;color:var(--gris-medio);text-align:right;display:block;margin-top:-.5rem;margin-bottom:.75rem;transition:color var(--transition)}
.auth-forgot:hover{color:var(--negro)}

/* ── Hipotecas ────────────────────────────────────────────── */
.calc-section{padding:80px 0;background:var(--blanco)}
.calc-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.calc-form{background:var(--crema);border-radius:var(--radius-lg);padding:2.5rem}
.calc-form h3{font-size:1.35rem;margin-bottom:1.5rem}
.calc-field{margin-bottom:1.25rem}
.calc-field label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--negro)}
.calc-field input[type=range]{width:100%;accent-color:var(--oro);margin:.5rem 0}
.calc-field-val{display:flex;justify-content:space-between;font-size:.875rem;color:var(--gris-texto)}
.calc-field-val strong{color:var(--negro);font-size:1.0625rem}
.calc-result{background:var(--negro);border-radius:var(--radius-lg);padding:2.5rem;color:var(--blanco)}
.calc-result h4{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);margin-bottom:.5rem}
.calc-cuota{font-family:var(--font-serif);font-size:3rem;font-weight:700;margin-bottom:.35rem}
.calc-cuota span{font-size:1.25rem;font-weight:400;color:rgba(255,255,255,.6)}
.calc-breakdown{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.calc-row{display:flex;justify-content:space-between;font-size:.875rem;color:rgba(255,255,255,.7)}
.calc-row strong{color:var(--blanco)}
.calc-disclaimer{font-size:.75rem;color:rgba(255,255,255,.45);margin-top:1.25rem;line-height:1.6}
.hipo-bancos{padding:80px 0;background:var(--crema)}
.bancos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.banco-card{background:var(--blanco);border-radius:var(--radius-md);padding:1.75rem;text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition)}
.banco-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.banco-tae{font-family:var(--font-serif);font-size:1.75rem;font-weight:700;color:var(--negro);margin-bottom:.2rem}
.banco-tipo{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin-bottom:.5rem}
.banco-name{font-size:.9375rem;font-weight:500;color:var(--negro);margin-bottom:.25rem}
.banco-plazo{font-size:.8125rem;color:var(--gris-medio)}

/* ── Responsive nuevos ────────────────────────────────────── */
@media(max-width:1024px){
  .prop-detail-grid{grid-template-columns:1fr}
  .prop-contact-card{position:static}
  .prop-gallery{height:380px}
  .blog-featured{grid-template-columns:1fr}
  .blog-all-grid{grid-template-columns:1fr 1fr}
  .calc-inner{grid-template-columns:1fr}
  .bancos-grid{grid-template-columns:1fr 1fr}
  .auth-page{grid-template-columns:1fr}
}
@media(max-width:768px){
  .prop-gallery{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .prop-gallery-main{height:260px;grid-row:auto}
  .prop-gallery-thumb{height:160px}
  .blog-all-grid{grid-template-columns:1fr}
  .bancos-grid{grid-template-columns:1fr 1fr}
  .auth-visual{display:none}
  .similar-card{min-width:280px}
}

/* Blog-card como enlace */
a.blog-card{display:block;background:var(--blanco);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition)}
a.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-card-img{height:200px;overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-card-body{padding:1.25rem 1.5rem 1.5rem}
.blog-card-body .blog-cat{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin-bottom:.5rem;display:block}
.blog-card-body h3{font-size:1rem;line-height:1.4;margin-bottom:.5rem;color:var(--negro)}
.blog-card-body p{font-size:.875rem;color:var(--gris-texto);line-height:1.65;margin-bottom:.75rem}
.blog-meta{display:flex;gap:1rem;font-size:.75rem;color:var(--gris-medio)}

/* Panel tarjetas "pronto" hover */
.panel-soon:hover{opacity:.8}

/* ============================================================
   MOBILE APP EXPERIENCE — Bottom Nav + Mobile Search
   ============================================================ */

/* ── Mobile Bottom Navigation Bar ──────────────────────────── */
.mbn {
  display: none;
}

/* ── Mobile Search Bar (oculta en escritorio) ─────────────── */
.mobile-search-bar {
  display: none;
}

@media (max-width: 768px) {
  .mbn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9500;
    background: var(--negro);
    border-top: 1px solid rgba(212,184,150,.18);
    height: 62px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-tap-highlight-color: transparent;
  }

  .mbn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s ease;
    padding: 10px 2px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .mbn-tab svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform .2s ease;
  }

  .mbn-tab.active {
    color: #d4aa6e;
  }

  .mbn-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2.5px;
    background: #d4aa6e;
    border-radius: 0 0 3px 3px;
  }

  .mbn-tab.active svg {
    transform: translateY(-1px);
  }

  /* ── Mobile Sticky Search Bar (solo en index.html) ─────── */
  .mobile-search-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--negro);
    padding: .6rem 1.25rem .7rem;
    position: sticky;
    top: 0;
    z-index: 800;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .msb-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }

  .msb-wrap svg {
    position: absolute;
    left: .9rem;
    color: rgba(212,184,150,.65);
    width: 16px;
    height: 16px;
    pointer-events: none;
    flex-shrink: 0;
  }

  .msb-input {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(184,147,106,.22);
    border-radius: 100px;
    padding: .6rem 1rem .6rem 2.4rem;
    color: var(--blanco);
    font-family: var(--font-sans);
    font-size: .875rem;
    outline: none;
    transition: border-color .2s;
  }

  .msb-input::placeholder { color: rgba(255,255,255,.38); }
  .msb-input:focus { border-color: rgba(212,184,150,.5); }

  .msb-btn {
    background: #d4aa6e;
    color: var(--negro);
    border: none;
    border-radius: 100px;
    padding: .6rem 1.1rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    font-family: var(--font-sans);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Mobile Section Cards (servicios compactos) ─────────── */
  .m-services-row {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: 0 1.25rem 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
  }
  .m-services-row::-webkit-scrollbar { display: none; }

  .m-service-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(184,147,106,.1);
    border: 1.5px solid rgba(184,147,106,.28);
    border-radius: 100px;
    padding: .5rem 1rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--negro);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background .2s, border-color .2s;
  }

  .m-service-pill svg {
    width: 16px;
    height: 16px;
    color: var(--oro);
  }

  /* ── Highlight strip (solo mobile home) ─────────────────── */
  .m-highlight-strip {
    display: flex;
    gap: .65rem;
    padding: 0 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1.5rem;
    scroll-snap-type: x mandatory;
  }
  .m-highlight-strip::-webkit-scrollbar { display: none; }

  .m-highlight-card {
    flex-shrink: 0;
    width: 160px;
    background: var(--negro);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--blanco);
    scroll-snap-align: start;
    position: relative;
  }

  .m-highlight-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
  }

  .m-highlight-card-body {
    padding: .65rem .75rem .75rem;
  }

  .m-highlight-card-tag {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d4aa6e;
    display: block;
    margin-bottom: .25rem;
  }

  .m-highlight-card-title {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--blanco);
  }

  /* Ajuste auth en mobile (login/registro) */
  .auth-page { grid-template-columns: 1fr; min-height: calc(100vh - 66px); }
  .auth-visual { display: none; }
  .auth-form-side { padding: 6rem 1.5rem 2rem; align-items: flex-start; }
  .auth-form-box { max-width: 100%; }

  /* Vender y Comprar hero en mobile */
  .page-hero { min-height: 50vh; }
  .page-hero-content { padding: 100px 0 60px; }
  .page-hero-content h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .page-hero-content p  { font-size: .9rem; }
  .page-hero-btns { flex-direction: column; gap: .75rem; }
  .page-hero-btns .btn { text-align: center; justify-content: center; }

  /* Form inputs en mobile */
  .form-group input, .form-group textarea, .form-group select {
    font-size: 16px; /* evitar zoom en iOS */
  }
}

/* ── Estilos de formularios (global, no solo mobile) ────────── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--negro);
  margin-bottom: .4rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--crema-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--negro);
  background: var(--blanco);
  outline: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--oro); }
.form-group textarea { resize: vertical; min-height: 120px; }

/* ── Cookie Banner ──────────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99999;
  background: var(--negro);
  border-top: 1px solid rgba(212,184,150,.25);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  transform: translateY(0);
  transition: transform .4s ease;
}
#cookie-banner.hidden { transform: translateY(110%); }
#cookie-banner p {
  flex: 1;
  min-width: 220px;
  font-size: .875rem;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  margin: 0;
}
#cookie-banner p a { color: #d4aa6e; text-decoration: underline; }
.cookie-btns { display: flex; gap: .65rem; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn-accept {
  background: #d4aa6e; color: var(--negro);
  border: none; border-radius: 4px;
  padding: .6rem 1.4rem; font-size: .85rem; font-weight: 700;
  font-family: var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.cookie-btn-accept:hover { background: #c49a5e; }
.cookie-btn-reject {
  background: transparent; color: rgba(255,255,255,.55);
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 4px;
  padding: .6rem 1.2rem; font-size: .85rem; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.cookie-btn-reject:hover { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.85); }
@media (max-width: 768px) {
  #cookie-banner { padding: 1rem 1.25rem; bottom: 62px; gap: 1rem; }
  #cookie-banner p { font-size: .8125rem; }
  .cookie-btns { width: 100%; }
  .cookie-btn-accept, .cookie-btn-reject { flex: 1; text-align: center; justify-content: center; }
}

/* Safe area para dispositivos con notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mbn { padding-bottom: env(safe-area-inset-bottom); height: calc(62px + env(safe-area-inset-bottom)); }
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  }
}