/* ─────────────────────────── nav ─────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 20px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--c-navy);
  /* Red de seguridad: el header nunca debe crecer de alto por un salto de línea. Ya pasó una
     vez, cuando el logo cambió de proporción y empujó el nombre a dos líneas en mobile. */
  white-space: nowrap;
}
.nav__brand img { height: 34px; width: auto; }
@media (max-width: 767px) {
  /* Header compacto en mobile: el estándar ronda los 56-64px de alto (Material usa 56dp).
     Con el botón del menú (~38px) como elemento más alto, esto lo deja en ~58px. */
  .nav__inner { padding-block: 10px; }
  .nav__brand img { height: 30px; }
}
.nav__links {
  display: none;
  align-items: center;
  gap: 22px;
  font-weight: 600;
  font-size: 0.92rem;
}
.nav__links a { color: var(--c-navy); }
.nav__links a:hover { color: var(--c-gold-dark); }
.nav__cta { display: none; }
.nav__ig {
  display: none;
  color: var(--c-navy);
  flex: none;
}
.nav__ig:hover { color: var(--c-gold-dark); }

@media (min-width: 768px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__ig { display: inline-flex; }
  .nav__toggle { display: none; }
}
@media (min-width: 768px) and (max-width: 899px) {
  /* nav de escritorio compacto: a 768px justo, brand+links+ig+CTA con el
     espaciado normal desbordaban ~26px — achicar gaps/CTA solo en esta
     franja angosta, sin afectar el nav ancho (≥900px) que ya entraba bien. */
  .nav__inner { gap: 12px; }
  .nav__links { gap: 14px; font-size: 0.86rem; }
  .nav__cta { padding: 12px 18px; font-size: 0.86rem; }
}

.nav__toggle {
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--c-navy);
  /* line-height 1 explícito: heredaba el 1.55 del body y eso lo llevaba a 45px de alto, que
     era el elemento que definía la altura de todo el header (medido en navegador). */
  line-height: 1;
  font-size: 1.1rem;
}

/* Abre con transición en vez de aparecer de golpe. No se puede animar `display`, así que el
   panel está siempre en el flujo con altura 0 y se despliega con grid-template-rows — es la
   técnica que permite animar hacia "alto automático" sin hardcodear un max-height inventado.
   `visibility` acompaña para que los links no sean focuseables con el menú cerrado. */
.nav__mobile {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--dur-panel) var(--ease-out),
              visibility var(--dur-panel),
              border-color var(--dur-panel) var(--ease-out);
}
.nav__mobile > * { min-height: 0; }
.nav__mobile.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  border-top-color: var(--c-border);
}
/* Sin padding propio: con `grid-template-rows: 0fr` el contenido colapsa pero el PADDING del
   hijo no, y dejaba el menú cerrado ocupando 27px de alto (medido en navegador). El aire lo
   dan los links, que ya traen su propio padding vertical. */
.nav__mobile__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 0;
}
.nav__mobile.is-open .nav__mobile__inner { padding-block: 6px 14px; }
.nav__mobile a {
  padding: 10px 4px;
  font-weight: 600;
  color: var(--c-navy);
  border-bottom: 1px solid var(--c-border);
}
.nav__mobile a:last-child { border-bottom: none; }

/* ─────────────────────────── footer ─────────────────────────── */
.footer {
  background: var(--c-navy);
  color: var(--on-navy-text);
  padding-block: 56px 28px;
}
.footer h4 {
  color: var(--on-navy-text-subtle);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer a { color: var(--on-navy-text); opacity: 0.92; }
.footer a:hover { opacity: 1; text-decoration: underline; }
.footer__grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer__brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--on-navy-text); }
.footer__tagline { color: var(--on-navy-text-muted); max-width: 34ch; margin-top: 10px; }
.footer__bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--on-navy-text-muted);
}

/* ─────────────────────────── whatsapp flotante ─────────────────────────── */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-navy);
  color: var(--on-navy-text);
  border: 2px solid var(--c-gold);
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow-float);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: translateY(-2px) scale(1.02); }
.wa-float svg { flex: none; }
.wa-float__label { display: none; }
@media (min-width: 560px) {
  .wa-float__label { display: inline; }
}
@media (max-width: 559px) {
  /* Sin la etiqueta de texto, el padding pensado para el label deja un
     óvalo más grande de lo necesario, tapando más contenido del que
     scrollea detrás — un círculo ajustado al ícono tapa menos. */
  .wa-float { padding: 12px; right: 16px; bottom: 16px; }
}

/* ─────────────────────────── hero ─────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-light) 100%);
  color: var(--on-navy-text);
  padding-block: 76px 96px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 82% 18%, rgba(184,154,92,0.22), transparent 55%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 640px; }
.hero .badge { margin-bottom: 22px; }
.hero h1 { color: var(--on-navy-text); margin-block: 18px 16px; }
/* `--on-navy-text-subtle` (0.78) y no `-muted` (0.58): el muted pasaba AA igual (5,64:1) pero
   a este tamaño y sobre un hero grande se leía flojo. Con subtle son 8,93:1. No se usa blanco
   puro (13,69:1) porque competiría con el titular, que es lo que tiene que dominar. */
.hero__sub { color: var(--on-navy-text-subtle); font-size: 1.08rem; max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-navy-text-subtle);
}

.page-hero {
  background: var(--c-navy);
  color: var(--on-navy-text);
  padding-block: 56px 64px;
}
.page-hero h1 { color: var(--on-navy-text); margin-top: 14px; }
.page-hero p { color: var(--on-navy-text-muted); margin-top: 10px; }

/* ─────────────────────────── pill / badge de operacion ─────────────────────────── */
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-navy);
  color: var(--on-navy-text);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.op-pill--reservada, .op-pill--vendida, .op-pill--alquilada {
  background: var(--c-slate);
}
/* Apto crédito en gold: es un dato que cambia quién puede comprar (con crédito de
   primera vivienda el comprador deja de necesitar el total en efectivo), así que se
   destaca en vez de quedar enterrado en la lista de características. */
.op-pill--credito {
  background: var(--c-gold);
  color: var(--c-navy);
}
.price-tag {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-gold-dark);
  font-size: 1.5rem;
}

/* ─────────────────────────── property card ─────────────────────────── */
/* `.is-entering` la pone site.js al re-mostrar una tarjeta filtrada: entra desde acá y la
   clase se saca en el frame siguiente. Ojo: el translateY es de 6px, no más — el track del
   carrusel tiene el padding calibrado para el hover-lift y un desplazamiento mayor se
   recortaría contra el overflow. */
.p-card.is-entering { opacity: 0; transform: translateY(6px); }
.p-card {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out), opacity var(--dur-lift) var(--ease-out);
}
.p-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26,46,74,0.16); }
.p-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-border);
}
.p-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Los badges van en un contenedor flex, no absolutos cada uno: cuando la propiedad es
   apta crédito son DOS pills y, posicionados individualmente, el segundo tapaba al
   primero. `flex-wrap` los apila si no entran a lo ancho (tarjeta angosta en mobile). */
.p-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-card__media .op-pill { position: static; }
.p-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-card__zone { font-size: 0.82rem; color: var(--c-muted); }
.p-card__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--c-navy); }
.p-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; }

/* ─────────────────────────── historia card (estilo post IG) ─────────────────────────── */
/* La card ya no es un <a> — es un <div> con un link-overlay absoluto
   (`.historia-card__link`) que cubre toda la tarjeta y lleva a
   /historias/<slug>/, más el ícono de Instagram del header con SU PROPIO
   link (z-index por encima del overlay) hacia la publicación real. Dos <a>
   sin anidarlos, la card entera sigue pareciendo un solo elemento clickeable. */
.historia-card {
  position: relative;
  display: block;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out), opacity var(--dur-lift) var(--ease-out);
}
.historia-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26,46,74,0.16); }
.historia-card__link { position: absolute; inset: 0; z-index: 1; }
.historia-card__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}
.historia-card__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--c-white); }
.historia-card__handle { flex: 1; font-weight: 700; font-size: 0.88rem; color: var(--c-navy); }
.historia-card__ig-link { display: flex; color: var(--c-muted); border-radius: 50%; }
.historia-card__ig-link:hover { color: var(--c-gold-dark); }
.historia-card__media { aspect-ratio: 4 / 5; background: var(--c-border); }
.historia-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.historia-card__caption { padding: 12px 14px 16px; font-size: 0.9rem; color: var(--c-text); line-height: 1.5; }
.p-card__link { font-weight: 700; color: var(--c-gold-dark); font-size: 0.9rem; }

/* ─────────────────────────── carrusel de tarjetas ─────────────────────────── */
/* Mismo mecanismo que .gallery (pages.css): scroll-snap horizontal nativo,
   sin JS para el swipe en sí. Las flechas (a los costados, en mobile Y
   desktop) solo existen en el DOM si hay más de 3 historias — decisión
   tomada en el partial (`historia_carousel.html`), no acá. El centrado
   "cuando entran todas sin desbordar" vs. scroll "cuando no entran" depende
   de que site.js mida el overflow real y togglee `.is-scrollable` — no de
   justify-content:center solo, que en flexbox puede dejar contenido
   overflowing inalcanzable por scroll (gap conocido del spec en algunos
   navegadores) — esto aplica incluso con 2-3 tarjetas si en mobile no entran
   todas por el ancho "espiado" de .carousel__slide. Pensado para reusarse
   con otro tipo de tarjeta más adelante: .carousel__slide es un wrapper
   genérico, no vive dentro de historia_card.html. */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: center; /* default: centra si entran todas sin scrollear */
  padding: 10px 4px 18px; /* aire para el hover-lift + sombra de .historia-card */
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel.is-scrollable .carousel__track { justify-content: flex-start; }

.carousel__slide {
  flex: 0 0 82%;
  max-width: 320px;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  /* exactamente 3 por fila, sin espiar una 4ta — a diferencia de mobile,
     acá el ancho es un cálculo del track (no un tamaño fijo/spoiler). */
  .carousel__track { gap: 24px; }
  .carousel__slide { flex-basis: calc((100% - 2 * 24px) / 3); max-width: none; }
}

.carousel__arrow {
  display: flex; /* solo se renderiza en el DOM si hay >3 historias — ver partial */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--shadow-card);
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.carousel__arrow:hover { background: var(--c-navy); color: var(--on-navy-text); }
.carousel__arrow--prev { left: 4px; }
.carousel__arrow--next { right: 4px; }
.carousel__arrow:disabled { opacity: 0.35; pointer-events: none; }

@media (min-width: 768px) {
  .carousel__arrow { width: 44px; height: 44px; font-size: 1.5rem; }
  .carousel__arrow--prev { left: -8px; }
  .carousel__arrow--next { right: -8px; }
}

/* Viewer completo de una Historia (todas las slides del carrusel de IG, a
   diferencia de las tarjetas chicas de /historias/) — mismo componente
   .carousel, solo cambia el tamaño: 1 slide grande a la vez, snap más firme.
   El aspect-ratio del contenedor coincide con el real de la imagen
   (1080×1350) — object-fit:cover no recorta nada, solo evita que el navegador
   deje un salto de layout mientras carga. */
.carousel--viewer .carousel__track { scroll-snap-type: x mandatory; }
.carousel--viewer .carousel__slide {
  flex: 0 0 88%;
  max-width: 380px;
  scroll-snap-align: center;
}
.carousel--viewer .carousel__slide img {
  width: 100%;
  aspect-ratio: 1080 / 1350;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
  .carousel--viewer .carousel__slide { flex-basis: 420px; max-width: 420px; }
}

.empty-state {
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  background: var(--c-bg-alt);
}

/* ─────────────────────────── stats ─────────────────────────── */
.stat {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  color: var(--c-navy);
  font-weight: 600;
}
.stat__label { margin-top: 6px; font-size: 0.88rem; color: var(--c-muted); }

/* ─────────────────────────── funnel ─────────────────────────── */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .funnel { flex-direction: row; align-items: stretch; gap: 4px; }
}
.funnel__step {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
  font-weight: 700;
  color: var(--on-navy-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.funnel__step--final {
  background: var(--c-gold);
  color: var(--on-gold-text);
  border-color: transparent;
}
.funnel__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  .funnel__arrow { display: flex; }
}

/* ─────────────────────────── pilares de valor ─────────────────────────── */
.pillar-card {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--radius-md);
  padding: 28px 26px;
}
.pillar-card h3 { color: var(--c-navy); }

/* ─────────────────────────── servicios ─────────────────────────── */
/* auto-fit en vez de un número fijo de columnas: con 5 ítems (no múltiplo
   prolijo de 2/3/4), un grid de columnas fijas deja huérfanos — auto-fit
   reparte lo que entre por fila y baja a 1 columna sola en mobile, sin
   breakpoints a mano. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  /* align-items:stretch (default) — todas las cards de la fila quedan a la
     misma altura, y el margin-top:auto del tag empuja la línea dorada al
     mismo nivel en las 5. Depende de que el texto del tag entre siempre en
     1 línea (ver brand.yaml > services > tag) — si algún tag nuevo wrappea
     a 2 líneas, se desalinea: acortar el copy en vez de forzar una altura. */
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* piso, no altura fija: si el contenido de la card más alta pide más,
     crece igual — esto solo garantiza que ninguna quede sin aire arriba
     de la línea aunque su título/descripción sean cortos. */
  min-height: 380px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 34px 26px 30px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--c-gold);
}
.service-card__num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--c-border);
  line-height: 1;
}
.service-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-navy-text);
}
.service-card__tag {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-gold-dark);
  line-height: 1.4;
}
.service-card__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--c-navy);
  margin-bottom: 10px;
}
.service-card__desc {
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.55;
}

/* ─────────────────────────── team ─────────────────────────── */
.team-card { text-align: center; }
.team-card img {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  border: 4px solid var(--c-bg-alt);
  box-shadow: var(--shadow-card);
}
.team-card__name { margin-top: 16px; font-family: var(--font-display); font-size: 1.15rem; color: var(--c-navy); }
.team-card__role { color: var(--c-slate); font-weight: 600; font-size: 0.9rem; }
.team-card__extra { color: var(--c-muted); font-size: 0.85rem; margin-top: 2px; }

/* ─────────────────────────── cta band ─────────────────────────── */
.cta-band {
  background: linear-gradient(135deg, var(--c-navy), var(--c-navy-light));
  color: var(--on-navy-text);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  text-align: center;
}
.cta-band h2 { color: var(--on-navy-text); }
.cta-band p { color: var(--on-navy-text-muted); margin-inline: auto; margin-top: 10px; }
.cta-band__actions { margin-top: 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }