/* ============================================================
   ORVIAN — main.css
   Componentes y secciones. Mobile-first.
   Breakpoints: 480 · 768 · 1024 · 1280
   Sin valores de color literales: todo viene de tokens.css.
   ============================================================ */

/* ============================================================
   0. NAVBAR
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background-color: transparent;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-2), 2vw, var(--sp-5));
  min-height: var(--nav-h);
}
.nav__brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  flex: none;
}
.nav__logo { height: 2.1rem; width: auto; }
.nav__logo--inverso { display: block; }
.nav__logo--primario { display: none; }

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
}
.nav__link {
  position: relative;
  padding-block: var(--sp-2);
  color: var(--on-violet);
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: var(--coquelicot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--seashell); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* El WhatsApp vive en la barra en todos los anchos: siempre a la vista,
   sin taparle nada al contenido. En móvil se queda sólo el ícono. */
.nav__cta { display: inline-flex; flex: none; }
.nav__cta .btn__icon { width: 1.35em; height: 1.35em; }
.nav__cta-txt { display: none; }
@media (min-width: 560px) { .nav__cta-txt { display: inline; } }
@media (max-width: 559px) { .nav__cta { padding: 0.5rem 0.7rem; } }

/* Tras 80px de scroll */
.nav.is-scrolled {
  background-color: var(--seashell);
  box-shadow: var(--shadow-sm);
}
.nav.is-scrolled .nav__logo--inverso { display: none; }
.nav.is-scrolled .nav__logo--primario { display: block; }
.nav.is-scrolled .nav__link { color: var(--ink); }
.nav.is-scrolled .nav__link:hover { color: var(--chrysler-blue); }

/* Páginas sin hero oscuro arrancan ya en modo claro. */
.nav--solid { background-color: var(--seashell); box-shadow: var(--shadow-sm); }
.nav--solid .nav__logo--inverso { display: none; }
.nav--solid .nav__logo--primario { display: block; }
.nav--solid .nav__link { color: var(--ink); }

/* Hamburguesa */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background-color: var(--seashell);
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.nav.is-scrolled .nav__toggle span,
.nav--solid .nav__toggle span { background-color: var(--ink); }
.nav__toggle[aria-expanded="true"] span { background-color: var(--seashell); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Panel móvil full-screen en Russian Violet ----------
   Logo arriba a la izquierda, botón de cierre visible a la derecha,
   menú numerado y bloque de contacto al pie. */
.nav__panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--gutter) var(--sp-5);
  background-color: var(--russian-violet);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) step-end;
}
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s;
}
.nav__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--nav-h);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw) solid var(--violet-line);
}
.nav__panel-logo { height: 2.1rem; width: auto; }
/* Cierre explícito: ícono + palabra, con área de toque amplia. */
.nav__close {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: var(--bw) solid var(--violet-line);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--on-violet);
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__close svg { width: 1.1rem; height: 1.1rem; }
.nav__close:hover { background-color: var(--coquelicot); border-color: var(--coquelicot); }

.nav__panel-links { display: grid; align-content: start; }
.nav__panel-links li { border-bottom: var(--bw) solid var(--violet-line); }
.nav__panel-link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: clamp(0.6rem, 1.9vh, 1rem);
  color: var(--on-violet);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 5.8vw, 2rem);
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.nav__panel-num {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--coquelicot);
}
.nav__panel-link:hover,
.nav__panel-link:focus-visible { color: var(--tropical-indigo); padding-left: var(--sp-2); }

.nav__panel-foot { display: grid; gap: var(--sp-5); }
.nav__panel-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--violet-line);
  font-size: 0.9375rem;
}
.nav__panel-datos dt {
  font-family: var(--font-alt);
  font-size: var(--fs-detail);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-violet-soft);
}
.nav__panel-datos dd { margin: 0; color: var(--on-violet); }
.nav__panel-datos a { color: var(--tropical-indigo); text-decoration: none; }
.nav__panel-redes { display: flex; gap: var(--sp-3); }
.nav__panel-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--bw) solid var(--violet-line);
  border-radius: 50%;
  color: var(--on-violet);
}
.nav__panel-redes a:hover { background-color: var(--coquelicot); border-color: var(--coquelicot); }
.nav__panel-redes svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(92svh, 46rem);
  padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-8);
  background-color: var(--russian-violet);
  color: var(--on-violet);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
.hero__kicker {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tropical-indigo);
}
.hero h1 { color: var(--on-violet); max-width: 18ch; }
.hero__sub {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--on-violet-soft);
}
.hero__actions { margin-top: var(--sp-6); }
/* Foto arquitectónica enmascarada */
.hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Máscara orgánica que dialoga con la curva de marca. */
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  box-shadow: var(--shadow-lg);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-veil);
}
/* Cinta de marca: acento anclado al borde derecho, en la franja que los
   títulos dejan libre. Queda por debajo del contenido y nunca cruza un
   texto ni un CTA. */
.hero .ribbon {
  top: 5.5rem;
  right: 0;
  width: 4.5rem;
}
@media (min-width: 480px) { .hero .ribbon { top: 5rem; width: 5.5rem; } }
@media (min-width: 768px) { .hero .ribbon { top: 4.5rem; width: 7rem; } }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
  /* En el margen exterior, a la derecha de la foto. */
  .hero .ribbon { top: 24%; right: 0; width: 7.5rem; }
}

/* ============================================================
   2. BARRA DE PILARES
   ============================================================ */
.pillars {
  background-color: var(--coquelicot);
  color: var(--on-coquelicot);
  padding-block: var(--sp-6);
}
.pillars__list {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
.pillars__item {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding-top: var(--sp-4);
  border-top: var(--rule) solid var(--on-coquelicot-sm);
}
.pillars__item .icon-key { width: 2.4rem; color: var(--on-coquelicot-sm); }
.pillars__word {
  font-family: var(--font-alt);
  /* Negrita y nunca por debajo de 19px: así el Seashell sobre Coquelicot
     cumple AA como texto grande. */
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-coquelicot);
}
.pillars__desc {
  /* Texto chico sobre naranja: tinta violeta (5.24:1). */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--on-coquelicot-sm);
  max-width: 22ch;
}
@media (min-width: 768px) {
  .pillars { padding-block: var(--sp-7); }
  .pillars__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

/* ============================================================
   3. NOSOTROS
   ============================================================ */
.about__grid { display: grid; gap: var(--sp-7); }
.about__text p { color: var(--ink); }
.about__body { margin-top: var(--sp-5); }
/* Misma apertura editorial que el resto de las secciones. */
.about__text > .eyebrow { padding-top: var(--sp-4); border-top: var(--bw) solid var(--line); }
.about__media { position: relative; }
.about__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
}
/* Esquina superior de la foto. Se queda dentro del ancho de la columna
   para que el body nunca haga scroll horizontal. */
.about__media .ribbon {
  top: -2.25rem;
  right: 0.5rem;
  width: 6rem;
}
@media (min-width: 768px) { .about__media .ribbon { top: -2.75rem; width: 7.5rem; } }
/* Tres datos con regla editorial arriba. El valor no usa tamaño display:
   son cadenas largas ("7:00 – 22:00 h", "Chihuahua, Chih.") y a tamaño
   grande se cortaban dentro de su columna. */
.facts {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.fact {
  padding-top: var(--sp-4);
  border-top: var(--rule) solid var(--russian-violet);
}
.fact__num {
  display: block;
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--coquelicot);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.fact__label {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink-soft);
}
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-8); }
}

/* ============================================================
   4. SERVICIOS
   ============================================================ */
.cards { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card-svc {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-top: var(--bw-accent) solid var(--coquelicot);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-svc__icon {
  width: 2.5rem; height: 2.5rem;
  color: var(--coquelicot);
  margin-bottom: var(--sp-2);
}
.card-svc p { color: var(--ink-soft); }
.card-svc__promise {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--bw) solid var(--line);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-semi);
  color: var(--russian-violet);
}
.svc__cta { margin-top: var(--sp-7); display: flex; justify-content: center; }

/* ============================================================
   5. PROPIEDADES — grid, tarjeta y estados
   ============================================================ */
.props__conteo {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw) solid var(--line);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.grid-props {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid-props { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-props { grid-template-columns: repeat(3, 1fr); } }

.card-prop {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card-prop:hover,
.card-prop:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--coquelicot);
}
.card-prop__media { position: relative; background-color: var(--surface-alt); }
.card-prop__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card-prop__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.card-prop__body {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5);
}
.card-prop__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
}
/* Card completa clickeable: el enlace del título cubre la tarjeta. */
.card-prop__link { color: var(--ink); text-decoration: none; }
.card-prop__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-prop:hover .card-prop__link { color: var(--russian-violet); }
.card-prop__zona {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.card-prop__zona svg { width: 1rem; height: 1rem; flex: none; color: var(--tropical-indigo); }
.card-prop__precio {
  margin-top: var(--sp-1);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  /* ≥24px bold: uso permitido de Coquelicot sobre lienzo claro. */
  color: var(--coquelicot);
}
.card-prop__precio .moneda {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-left: 0.25rem;
}
.card-prop__precio-nota {
  font-family: var(--font-body);
  font-size: var(--fs-detail);
  font-weight: var(--fw-regular);
  color: var(--ink-soft);
}
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--bw) solid var(--line);
}
.spec {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--russian-violet);
}
.spec svg { width: 1.125rem; height: 1.125rem; color: var(--ink-soft); flex: none; }
.card-prop__foot { margin-top: var(--sp-4); }
/* Afordancia visual, no un segundo enlace: el clic atraviesa hasta el
   enlace del título, que cubre la tarjeta completa. Un solo tab stop. */
.card-prop__cta { pointer-events: none; }
.card-prop:hover .card-prop__cta,
.card-prop:focus-within .card-prop__cta {
  background-color: var(--chrysler-blue);
  border-color: var(--chrysler-blue);
}

/* Skeleton loader */
.skeleton {
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.skeleton__media { aspect-ratio: 3 / 2; }
.skeleton--sep { margin-top: var(--sp-5); }
.skeleton__line { height: 0.85rem; border-radius: var(--r-sm); margin: var(--sp-3) var(--sp-5) 0; }
.skeleton__line:last-child { margin-bottom: var(--sp-5); width: 45%; }
.skeleton__media, .skeleton__line {
  background-image: linear-gradient(90deg,
    var(--surface-alt) 0%, var(--seashell) 50%, var(--surface-alt) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Estado vacío / error */
.state {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) dashed var(--line);
  border-radius: var(--r-md);
}
.state svg { width: 3rem; height: 3rem; color: var(--tropical-indigo); }
.state p { color: var(--ink-soft); max-width: 42ch; }
.props__more { margin-top: var(--sp-7); display: flex; justify-content: center; }

/* ============================================================
   6. CÓMO TRABAJAMOS — línea de tiempo
   ============================================================ */
.process { position: relative; }
.process__timeline { position: relative; }
.steps {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  z-index: var(--z-content);
}
.step { display: grid; gap: var(--sp-3); align-content: start; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background-color: var(--russian-violet);
  color: var(--seashell);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  line-height: 1;
}
.step h3 { font-size: 1.25rem; }
.step p { color: var(--ink-soft); }
/* Los pasos se unen con una regla, no con un gráfico animado. */
@media (max-width: 767px) {
  /* Vertical en móvil: numeral fuera del flujo, línea guía a la izquierda. */
  .steps { padding-left: 4.5rem; }
  .steps::before {
    content: "";
    position: absolute;
    top: 1.5rem; bottom: 1.5rem; left: 1.5rem;
    width: 2px;
    background-color: var(--line);
  }
  .step { position: relative; }
  .step__num { position: absolute; left: -4.5rem; top: 0; }
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  /* Línea horizontal que enlaza los cuatro numerales. */
  .steps::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    height: var(--rule);
    background-color: var(--line);
  }
  .step__num { position: relative; }
}

/* ============================================================
   7. TESTIMONIOS (sección comentada en el HTML hasta tener
      testimonios reales autorizados — estilos listos)
   ============================================================ */
.card-quote {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6) var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
}
.card-quote__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 3rem;
  line-height: 0.7;
  color: var(--coquelicot);
}
.card-quote blockquote { margin: 0; color: var(--ink); }
.card-quote figcaption {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   8. CONTACTO
   ============================================================ */
.contact__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: start; }
}

.form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 480px) { .form { padding: var(--sp-6); } }
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field .req { color: var(--coquelicot); font-weight: var(--fw-bold); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--seashell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; padding-right: 2.5rem; background-repeat: no-repeat; }
.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  right: 1rem; bottom: 1.35rem;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--tropical-indigo); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--chrysler-blue);
  background-color: var(--surface);
}
.field__error {
  display: none;
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-detail);
  letter-spacing: 0.03em;
  color: var(--coquelicot-ink);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--coquelicot); }
.field.has-error .field__error { display: block; }

/* Honeypot antispam: fuera de la vista y del tabulador. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}
.form__legal { font-size: var(--fs-detail); color: var(--ink-soft); }
.form__status {
  display: none;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semi);
}
.form__status.is-visible { display: flex; }
.form__status--ok {
  background-color: var(--chrysler-soft);
  border-left: var(--bw-accent) solid var(--chrysler-blue);
  color: var(--ink);
}
.form__status--error {
  background-color: var(--surface-alt);
  border-left: var(--bw-accent) solid var(--coquelicot);
  color: var(--ink);
}

/* Datos de contacto */
.info { display: grid; gap: var(--sp-5); }
.info__block {
  display: grid;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--line);
}
.info__block:last-of-type { border-bottom: 0; padding-bottom: 0; }
.info__label {
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.info__value {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--russian-violet);
}
.info a.info__value { color: var(--chrysler-blue); text-decoration: none; }
.info a.info__value:hover { text-decoration: underline; }
.info__note { font-size: 0.9375rem; color: var(--ink-soft); }
/* ---------- Asesores destacados ----------
   El contacto directo con la persona es lo que convierte: va primero en
   la columna y con peso de tarjeta, no como una línea más de datos. */
.asesores-destacados { display: grid; gap: var(--sp-4); }
.asesor-destacado {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-left: var(--bw-accent) solid var(--coquelicot);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.asesor-destacado:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.asesor-destacado__rol {
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.asesor-destacado__nombre {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--russian-violet);
}
.asesor-destacado__tel {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  color: var(--chrysler-blue);
  text-decoration: none;
}
.asesor-destacado__tel:hover { text-decoration: underline; }
.asesor-destacado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
@media (min-width: 480px) and (max-width: 1023px) {
  .asesores-destacados { grid-template-columns: repeat(2, 1fr); }
}
.map {
  position: relative;
  margin-top: var(--sp-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--surface-alt);
}
/* Queda debajo del iframe: sólo se ve si el mapa no carga. */
.map__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-decoration: none;
}
.map__fallback svg { width: 2rem; height: 2rem; color: var(--tropical-indigo); }
.map__fallback:hover { color: var(--chrysler-blue); }
.map iframe { position: relative; z-index: 1; }
/* Tira baja: da referencia de dónde está la oficina sin comerse media
   pantalla. La ruta se abre con el botón montado en la esquina. */
.map iframe {
  width: 100%;
  height: 11rem;
  border: 0;
  display: block;
  /* Saturación reducida para que el mapa no compita con la marca. */
  filter: saturate(0.35) contrast(1.05);
}
@media (min-width: 1024px) { .map iframe { height: 12.5rem; } }
.map__cta {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  box-shadow: var(--shadow-md);
}
.info__direccion { max-width: 34ch; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.footer {
  position: relative;
  background-color: var(--russian-violet);
  color: var(--on-violet-soft);
  /* El padding superior deja aire suficiente para la cinta de esquina. */
  padding-block: var(--sp-9) var(--sp-6);
  overflow: hidden;
}
.footer__inner { position: relative; z-index: var(--z-content); display: grid; gap: var(--sp-7); }
.footer__logo { height: 2.25rem; width: auto; }
.footer__brand p { margin-top: var(--sp-4); max-width: 34ch; }
.footer__col-title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--seashell);
}
.footer__list { display: grid; gap: var(--sp-2); }
.footer__list a, .footer a { color: var(--on-violet-soft); text-decoration: none; }
.footer__list a:hover, .footer a:hover { color: var(--tropical-indigo); text-decoration: underline; }
.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--bw) solid var(--violet-line);
  border-radius: 50%;
  color: var(--seashell);
}
.footer__social a:hover { background-color: var(--coquelicot); border-color: var(--coquelicot); }
.footer__social svg { width: 1.25rem; height: 1.25rem; }
/* Misma pieza sobre el lienzo claro de la sección de contacto. */
.footer__social--light { margin-top: var(--sp-2); }
.footer__social--light a { border-color: var(--line); color: var(--russian-violet); }
.footer__social--light a:hover { color: var(--seashell); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--violet-line);
  font-size: var(--fs-detail);
}
/* Cinta en la franja de padding superior, a la derecha: fuera del logo y
   de las columnas de enlaces. */
.footer .ribbon { top: 1rem; right: var(--gutter); width: 5rem; }
@media (min-width: 768px) { .footer .ribbon { top: 1.25rem; width: 7rem; } }
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); }
}

/* ============================================================
   PÁGINA DE DETALLE — propiedad.html
   ============================================================ */
.detail { padding-top: calc(var(--nav-h) + var(--sp-6)); padding-bottom: var(--section-y); }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-5);
  font-family: var(--font-alt);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--chrysler-blue); text-decoration: underline; }

/* Galería */
.gallery { display: grid; gap: var(--sp-3); }
.gallery__main {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--surface-alt);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.gallery__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__hint {
  position: absolute;
  right: var(--sp-3); bottom: var(--sp-3);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  background-color: var(--russian-violet);
  color: var(--seashell);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Miniaturas con scroll-snap: cero librerías. */
.gallery__thumbs {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}
.gallery__thumb {
  flex: 0 0 auto;
  width: clamp(5rem, 22vw, 7.5rem);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  opacity: 0.72;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gallery__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; border-color: var(--chrysler-blue); }
.gallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--coquelicot); }

/* Lightbox propio */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background-color: var(--scrim);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.lightbox__count {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  color: var(--seashell);
}
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lightbox__nav { display: flex; justify-content: center; gap: var(--sp-3); }
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 var(--sp-4);
  border: 2px solid var(--seashell);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--seashell);
  font-family: var(--font-alt);
  font-weight: var(--fw-semi);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lb-btn:hover { background-color: var(--coquelicot); border-color: var(--coquelicot); }
.lb-btn svg { width: 1.25rem; height: 1.25rem; }

/* Encabezado del detalle */
.detail__grid { display: grid; gap: var(--sp-7); margin-top: var(--sp-6); }
@media (min-width: 1024px) {
  .detail__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: var(--sp-8); align-items: start; }
}
.detail__head { display: grid; gap: var(--sp-3); }
.detail__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.detail__title { font-size: var(--fs-h2); }
.detail__zona { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-soft); }
.detail__zona svg { width: 1.125rem; height: 1.125rem; color: var(--tropical-indigo); flex: none; }
.detail__precio {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--coquelicot);
}
.detail__precio .moneda { font-size: 0.875rem; letter-spacing: 0.12em; color: var(--ink-soft); margin-left: 0.4rem; }
.detail__precio-nota { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink-soft); }

.specs--detail {
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-top: 0;
  border-radius: var(--r-md);
}
.specs--detail .spec { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.specs--detail .spec__val { font-size: 1.25rem; }
.specs--detail .spec__key {
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.specs--detail .spec__top { display: flex; align-items: center; gap: var(--sp-2); }

.detail__block { margin-top: var(--sp-7); }
.detail__block h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.detail__desc p { color: var(--ink); }
.features { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }

.ubicacion {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-left: var(--bw-accent) solid var(--tropical-indigo);
  border-radius: var(--r-md);
}
.ubicacion__nota { font-size: 0.9375rem; color: var(--ink-soft); }

/* Panel sticky de contacto */
.aside-contact {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--surface);
  border: var(--bw) solid var(--line);
  border-top: var(--bw-accent) solid var(--coquelicot);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
  .aside-contact { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
}
.aside-contact__title { font-size: 1.25rem; }
.asesor-card { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-4); border-bottom: var(--bw) solid var(--line); }
.asesor-card__rol {
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.asesor-card__nombre {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--russian-violet);
}
.asesor-card__tel {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  color: var(--chrysler-blue);
  text-decoration: none;
}
.asesor-card__tel:hover { text-decoration: underline; }
.aside-contact__actions { display: grid; gap: var(--sp-3); }
.aside-contact__note { font-size: var(--fs-detail); color: var(--ink-soft); }
.copied {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-detail);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chrysler-blue);
}

/* Similares */
.similar { border-top: var(--bw) solid var(--line); padding-top: var(--section-y); margin-top: var(--section-y); }

/* Propiedad no disponible */
.notfound {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
}
.notfound__code {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 0.9;
  color: var(--coquelicot);
}
.notfound p { color: var(--ink-soft); max-width: 44ch; }

/* ============================================================
   PÁGINAS DE TEXTO (aviso de privacidad)
   ============================================================ */
.legal { padding-top: calc(var(--nav-h) + var(--sp-7)); padding-bottom: var(--section-y); }
.legal__body { max-width: var(--wrap-text); }
.legal__body h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal__body h3 { font-size: 1.125rem; margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.legal__body p, .legal__body li { color: var(--ink); }
.legal__body ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-left: var(--sp-5); list-style: disc; }
.legal__meta {
  margin-top: var(--sp-4);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-detail);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}