/* =============================================================
   PHANTOM REAL ESTATE — Carlos García González
   Paleta "Biscayne Mineral" · Fraunces + Inter
   1. Tokens
   ============================================================= */
:root {
  --cream:      #E8E4DC;
  --cream-rgb:  232, 228, 220;
  --sage:       #4A5D53;
  --sage-rgb:   74, 93, 83;
  --ink:        #1F1D1B;
  --ink-rgb:    31, 29, 27;
  --gold:       #C9A876;
  --gold-rgb:   201, 168, 118;

  --serif: "Fraunces", "Georgia", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --container: 1200px;
  --gutter: 1.25rem;
  --radius: 3px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; font-family: var(--serif); font-weight: 500; }
ul { list-style: none; padding: 0; }
::selection { background: var(--sage); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1.1rem; background: var(--sage); color: var(--cream);
  z-index: 9999; border-radius: 6px; font-weight: 600; font-size: .9rem;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.section-dark { background: var(--ink); color: var(--cream); }
.section-sage { background: var(--sage); color: var(--cream); }
.section-light { background: var(--cream); color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Reveal (fade-up on scroll) */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal[data-split] { opacity: 1; transform: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 1rem 1.9rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.btn-primary {
  background: var(--sage);
  color: var(--cream);
}
.btn-inverse {
  background: var(--cream);
  color: var(--ink);
}
.btn-ghost {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(var(--cream-rgb), .4);
  padding: .95rem 1.8rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(var(--sage-rgb), .55); }
  .btn-inverse:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(var(--ink-rgb), .45); }
  .btn-ghost:hover { border-color: rgba(var(--cream-rgb), .8); transform: translateY(-3px); }
}

/* Press feedback wins over hover-lift when both apply */
.btn:active { transform: scale(.97); }

.link-underline {
  position: relative;
  display: inline-block;
  padding-block: .6rem;
  margin-block: -.6rem;
  padding-bottom: calc(.6rem + 2px);
  border-bottom: 1px solid currentColor;
  opacity: .85;
  transition: opacity .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-underline:hover { opacity: 1; }
}
.link-underline:active { opacity: 1; }

/* =============================================================
   4. Hero (dark)
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.hero-media {
  position: relative;
  width: 100%;
  height: 56vh;
  overflow: hidden;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb),.15) 0%, rgba(var(--ink-rgb),.05) 40%, rgba(var(--ink-rgb),.95) 96%);
}
.hero-photo {
  position: absolute;
  inset: -8% 0 -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 20%;
  will-change: transform;
}

/* =============================================================
   4b. Site nav — persistent, transparent over hero, solid once
   the hero scrolls out of view (see initHeaderState in main.js)
   ============================================================= */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  /* Scrim propio en vez de transparente puro: la foto del hero no es
     pareja (pared clara arriba a la derecha), así que un fondo
     transparente dejaba el texto crema ilegible ahí. El degradado
     garantiza contraste sin importar qué haya detrás. */
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .5) 0%, rgba(var(--ink-rgb), .5) 75%, rgba(var(--ink-rgb), 0) 100%);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.site-nav.is-scrolled {
  background: rgba(var(--ink-rgb), .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(var(--cream-rgb), .1);
}
.site-nav-logo { display: inline-flex; padding: .3rem; margin: -.3rem; }
.site-nav-logo img {
  width: 100px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(var(--ink-rgb), .8)) drop-shadow(0 1px 4px rgba(var(--ink-rgb), .6));
}
.site-nav-right { display: flex; align-items: center; gap: .6rem; }

/* --- Enlaces: panel desplegable en móvil, fila en escritorio ---
   En móvil vive fuera de la barra (absolute, debajo) porque seis
   enlaces no caben en una pantalla angosta. visibility (no sólo
   opacity) para que el menú cerrado tampoco sea navegable con
   teclado ni lo lea un lector de pantalla. */
.site-nav-links {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: grid;
  padding: .4rem var(--gutter) 1.1rem;
  background: rgba(var(--ink-rgb), .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(var(--cream-rgb), .12);
  box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s var(--ease-out);
}
.site-nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
.site-nav-links a {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .88);
  padding: .85rem .2rem;
  border-bottom: 1px solid rgba(var(--cream-rgb), .08);
}
.site-nav-links a:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .site-nav-links a:hover { color: var(--gold); }
}
.site-nav-links a:focus-visible { color: var(--gold); }

/* --- Botones redondos de la barra (sonido y menú) --- */
.site-nav-sound,
.site-nav-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(var(--cream-rgb), .28);
  border-radius: 50%;
  background: rgba(var(--ink-rgb), .55);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: pointer;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav-sound:hover,
  .site-nav-toggle:hover { background: rgba(var(--ink-rgb), .78); border-color: var(--gold); transform: scale(1.06); }
}
.site-nav-sound:focus-visible,
.site-nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.site-nav-sound:active,
.site-nav-toggle:active { transform: scale(.94); }

/* Hamburguesa: tres líneas que se cruzan al abrir. */
.site-nav-toggle span {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1.5px;
  margin-left: -8.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.site-nav-toggle span:nth-child(1) { transform: translateY(-5px); }
.site-nav-toggle span:nth-child(3) { transform: translateY(5px); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .site-nav-links,
  .site-nav-toggle span { transition: none; }
}

@media (min-width: 720px) {
  .site-nav { padding-inline: clamp(2rem, 5vw, 4.5rem); }
  .site-nav-right { gap: 1.4rem; }
  .site-nav-toggle { display: none; }
  /* En escritorio vuelve a ser una fila normal dentro de la barra. */
  .site-nav-links {
    position: static;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav-links a {
    font-size: .68rem;
    color: rgba(var(--cream-rgb), .82);
    padding: .6rem .3rem;
    border-bottom: 0;
  }
  .site-nav-sound { width: 38px; height: 38px; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-block: 2.4rem 3rem;
}
.hero-content { max-width: 34rem; }
.hero-kicker { color: var(--gold); margin-bottom: 1rem; }
.hero-title {
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  font-style: italic;
  color: var(--cream);
  max-width: 16ch;
}
.hero-title em { color: var(--gold); font-style: italic; }
.hero-title .line-mask { display: block; overflow: hidden; }
.hero-title .line-inner { display: block; }
.hero-sub {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(var(--cream-rgb), .82);
  max-width: 34ch;
  margin-block: 1.3rem 1.8rem;
}

.hero-plot-tag {
  display: none;
}

@media (min-width: 960px) {
  .hero { flex-direction: row; align-items: stretch; }
  .hero-media {
    order: 2;
    width: 58%;
    height: auto;
    flex-shrink: 0;
    position: relative;
  }
  .hero-media::after {
    background: linear-gradient(90deg, rgba(var(--ink-rgb),.98) 0%, rgba(var(--ink-rgb),.35) 16%, rgba(var(--ink-rgb),0) 40%);
  }
  .hero-photo { inset: -10% -6% -10% -6%; height: 120%; object-position: 62% 30%; }
  .hero-inner {
    order: 1;
    width: 42%;
    align-items: flex-end;
    padding-block: 0 3.4rem;
    padding-inline: clamp(2rem, 5vw, 4.5rem) 1rem;
  }
  .hero-bar { padding-inline: clamp(2rem, 5vw, 4.5rem); }
  .hero-content { max-width: none; }

  .hero-plot-tag {
    display: block;
    position: absolute;
    left: 1.1rem;
    bottom: 2.4rem;
    z-index: 2;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--cream-rgb), .55);
    transform-origin: left bottom;
    transform: rotate(-90deg) translateX(0);
    white-space: nowrap;
  }
}

/* =============================================================
   5. Boundary line — survey-line signature divider
   ============================================================= */
.survey-divider {
  position: relative;
  height: 1px;
  background: rgba(var(--ink-rgb), .14);
  overflow: visible;
}
.survey-divider svg {
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 2px;
  overflow: visible;
}
.survey-divider .survey-line-path {
  stroke: var(--gold);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1 1;
  vector-effect: non-scaling-stroke;
}
.survey-divider--dark { background: rgba(var(--cream-rgb), .16); }

/* =============================================================
   6. Trust bar (light)
   ============================================================= */
.trust-bar {
  padding-block: 1.1rem;
}
.trust-bar p {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(var(--ink-rgb), .68);
  font-weight: 500;
  line-height: 1.9;
}

/* =============================================================
   6b. Conoce a Carlos — about/bio (light)
   ============================================================= */
.about { padding-block: 5.5rem; position: relative; overflow: clip; }
.about-ghost-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 6rem);
  color: rgba(var(--ink-rgb), .06);
  line-height: 1;
  margin-bottom: -.6rem;
  user-select: none;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: center;
}
.about-body { max-width: 42rem; }
.about-body p { font-size: 1.02rem; line-height: 1.7; color: rgba(var(--ink-rgb), .78); margin-bottom: 1.2rem; }
.about-body p:first-of-type { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); }
.about-body .link-underline { margin-top: .4rem; }
.about-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 22rem;
}
/* Botón de sonido — el video autoreproduce en mute por política del
   navegador; esto es lo único que puede devolverle la música. */
.about-photo img,
.about-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 860px) {
  .about-grid { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
  .about-photo { max-width: none; justify-self: end; }
}

/* =============================================================
   6. Social proof grid (light)
   ============================================================= */
.proof { padding-block: 5rem 5.5rem; }
.proof-eyebrow-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight: 500;
  max-width: 22ch;
  margin-bottom: 2.6rem;
}

/* --- Órbita de fotos -----------------------------------------
   Base (móvil): tira deslizable con snap. Es la capa segura —
   si el 3D no aplica, esto es lo que queda y funciona.
   Desde 900px se convierte en un anillo 3D que gira. */
.orbit { --orbit-item-w: 260px; }

.orbit-ring {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.orbit-ring::-webkit-scrollbar { display: none; }

.orbit-item {
  flex: 0 0 76%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(var(--ink-rgb), .06);
}
.orbit-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 720px) {
  .orbit-item { flex-basis: 42%; }
}

/* --- Anillo 3D (desktop) --- */
@media (min-width: 900px) {
  .orbit-stage {
    position: relative;
    height: 420px;
    perspective: 900px;
    perspective-origin: 50% 50%;
  }
  .orbit-ring {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .orbit-item {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--orbit-item-w);
    height: 200px;
    margin-top: -100px;
    margin-left: calc(var(--orbit-item-w) / -2);
    backface-visibility: hidden;
    /* 8 fotos → 45° entre cada una; el radio las separa sin solaparse */
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(340px);
    box-shadow: 0 18px 40px -18px rgba(var(--ink-rgb), .5);
  }
  .orbit-item img { transition: filter .4s var(--ease-soft); }
}

/* Sin movimiento: el anillo vuelve a ser una tira legible.
   Va después del bloque 3D para poder anularlo. */
@media (prefers-reduced-motion: reduce) {
  .orbit-stage { height: auto; perspective: none; }
  .orbit-ring {
    position: static;
    display: flex;
    overflow-x: auto;
    transform: none !important;
    animation: none !important;
  }
  .orbit-item {
    position: static;
    margin: 0;
    height: auto;
    transform: none !important;
    flex: 0 0 42%;
  }
}

/* =============================================================
   7. Cómo trabajo (light) — blueprint steps
   ============================================================= */
.steps { padding-block: 5rem 5.5rem; }
.steps-head { max-width: 34rem; margin-bottom: 3rem; }
.steps-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-style: italic; }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.step {
  padding-block: 1.9rem;
  border-top: 1px solid rgba(var(--ink-rgb), .16);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: start;
}
.step:last-child { border-bottom: 1px solid rgba(var(--ink-rgb), .16); }
.step-num {
  position: relative;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  min-width: 2.4ch;
}
.step-title { font-size: 1.15rem; font-style: italic; margin-bottom: .4rem; }
.step-text { font-size: .95rem; color: rgba(var(--ink-rgb), .72); max-width: 42ch; }

.step-mark {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: rgba(var(--ink-rgb), .68);
  display: block;
  margin-top: .5rem;
}

@media (min-width: 960px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .step { grid-template-columns: 1fr; border-top: none; padding-block: 0; position: relative; }
  .step::before {
    content: ""; position: absolute; top: -1.1rem; left: 0; right: 0;
    height: 1px; background: rgba(var(--ink-rgb), .16);
  }
  .step::after {
    content: ""; position: absolute; top: -1.4rem; left: 0;
    width: 1px; height: .6rem; background: rgba(var(--ink-rgb), .3);
  }
  .step:last-child { border-bottom: none; }
}

/* =============================================================
   8. Dos caminos — dos parcelas divididas por un lindero
   ============================================================= */
.paths { padding-block: 5rem; }
.paths-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
}
.path-card {
  padding: 0;
  transition: transform 200ms var(--ease-out);
}
/* Specificity guard: wins over .reveal.is-visible's transition shorthand
   once revealed, so hover/press stay snappy instead of inheriting the
   900ms entrance transition. */
.path-card.reveal.is-visible {
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .path-card:hover { transform: translateY(-4px); }
}

.path-plot { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: rgba(var(--cream-rgb), .88); display: block; margin-bottom: .9rem; }
.path-eyebrow { color: var(--cream); margin-bottom: 1rem; }
.path-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-style: italic; margin-bottom: .9rem; }
.path-text { font-size: .95rem; color: rgba(var(--cream-rgb), .88); max-width: 34ch; margin-bottom: 1.7rem; }

.parcel-divider {
  display: none;
}

@media (min-width: 720px) {
  .paths-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .path-card { padding-inline: clamp(1.5rem, 4vw, 3.2rem); }
  .path-card.is-primary { padding-right: clamp(2.5rem, 5vw, 4.2rem); }
  .path-card.is-secondary { padding-left: clamp(2.5rem, 5vw, 4.2rem); }

  .parcel-divider {
    display: block;
    position: absolute;
    top: -1rem; bottom: -1rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(var(--cream-rgb), .4) 0, rgba(var(--cream-rgb), .4) 1px,
      transparent 1px, transparent 14px
    );
    transform-origin: top;
  }
  .parcel-divider span {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(var(--cream-rgb), .88);
    background: var(--sage);
    padding: .5rem 0;
  }
}

/* =============================================================
   9. Testimonios — formato expediente (light)
   ============================================================= */
.testimonials { padding-block: 5rem 5.5rem; }
.testimonials-head { max-width: 34rem; margin-bottom: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.testimonials-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-style: italic; }
.testimonials-head .eyebrow { white-space: nowrap; }

.testimonials-grid {
  display: flex;
  flex-direction: column;
}
.testimonial-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1.3rem;
  align-items: center;
  padding-block: 2rem;
  border-top: 1px solid rgba(var(--ink-rgb), .14);
}
.testimonial-card:last-child { border-bottom: 1px solid rgba(var(--ink-rgb), .14); }

.testimonial-photo {
  width: 84px; height: 84px;
  border-radius: var(--radius);
  overflow: hidden;
}
.testimonial-photo img { width: 100%; height: 100%; object-fit: cover; }

.testimonial-case {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: rgba(var(--ink-rgb), .68);
  margin-bottom: .6rem;
}
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), .78);
  margin-bottom: .6rem;
}
.testimonial-name {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .68);
  font-weight: 600;
}

@media (min-width: 720px) {
  .testimonial-card { grid-template-columns: 104px 1fr; gap: 1.8rem; padding-block: 2.4rem; }
  .testimonial-photo { width: 104px; height: 104px; }
  .testimonial-quote { font-size: 1.25rem; }
}

/* =============================================================
   9b. Calculadora de hipoteca (claro)
   ============================================================= */
.calc { padding-block: 5rem 5.5rem; }
.calc-head { max-width: 48ch; margin-bottom: 2.6rem; }
.calc-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  font-weight: 500;
  line-height: 1.08;
  margin-top: .7rem;
}
.calc-intro {
  font-family: var(--sans);
  color: rgba(var(--ink-rgb), .78);
  margin-top: 1rem;
  line-height: 1.65;
}

.calc-grid { display: grid; gap: 2rem; }
.calc-inputs { display: grid; gap: 1.1rem; align-content: start; }

.calc-field { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; }
.calc-field > label,
.calc-field > legend {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .68);
  padding: 0;
}
.calc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calc-split { display: grid; grid-template-columns: 1fr 88px; gap: .5rem; }

.calc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: var(--radius);
  background: rgba(var(--cream-rgb), .55);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.calc-input-wrap:focus-within {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(var(--sage-rgb), .18);
}
.calc-input-wrap::before {
  content: attr(data-prefix);
  font-family: var(--mono);
  font-size: .9rem;
  color: rgba(var(--ink-rgb), .5);
  padding-left: .7rem;
}
.calc-input-wrap::after {
  content: attr(data-suffix);
  font-family: var(--mono);
  font-size: .9rem;
  color: rgba(var(--ink-rgb), .5);
  padding-right: .7rem;
}
.calc-input-wrap:not([data-prefix])::before,
.calc-input-wrap:not([data-suffix])::after { content: none; }

.calc-input-wrap input,
.calc-input-wrap select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  border-radius: var(--radius);
}
.calc-input-wrap input:focus,
.calc-input-wrap select:focus { outline: none; }
.calc-input-wrap select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(31,29,27,.55) 50%),
                    linear-gradient(135deg, rgba(31,29,27,.55) 50%, transparent 50%);
  background-position: right 1rem center, right .72rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.calc-radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.calc-radios label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .88rem;
  color: rgba(var(--ink-rgb), .78);
  transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft), color .2s var(--ease-soft);
}
.calc-radios input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.calc-radios input:focus-visible + span {
  outline: 2px solid var(--sage);
  outline-offset: 4px;
}
.calc-radios label:has(input:checked) {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--cream);
}
.calc-radios label:active { transform: scale(.98); }

.calc-output { display: grid; gap: 1.2rem; align-content: start; }

.calc-result {
  border: 1px solid rgba(var(--ink-rgb), .2);
  border-top: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.4rem;
  background: rgba(var(--cream-rgb), .5);
}
.calc-result-label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .68);
}
.calc-total {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  margin: .5rem 0 1.3rem;
  font-variant-numeric: tabular-nums;
}

.calc-breakdown { list-style: none; display: grid; }
.calc-breakdown li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .6rem;
  border-top: 1px solid rgba(var(--ink-rgb), .12);
  font-family: var(--sans);
  font-size: .92rem;
  color: rgba(var(--ink-rgb), .8);
}
.calc-breakdown b {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calc-meta {
  display: grid;
  gap: .45rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--ink-rgb), .12);
}
.calc-meta > div { display: flex; justify-content: space-between; gap: 1rem; }
.calc-meta dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .68);
}
.calc-meta dd {
  font-family: var(--mono);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calc-note {
  margin-top: 1rem;
  padding: .7rem .8rem;
  border-left: 2px solid var(--gold);
  background: rgba(var(--gold-rgb), .12);
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), .84);
}

.calc-legal {
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), .68);
}
.calc-legal strong { color: rgba(var(--ink-rgb), .9); }

.calc-cta { justify-self: start; }

@media (min-width: 560px) {
  .calc-radios { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

@media (hover: hover) and (pointer: fine) {
  .calc-radios label:hover { border-color: rgba(var(--ink-rgb), .5); }
  .calc-radios label:has(input:checked):hover { border-color: var(--sage); }
}

/* =============================================================
   10. Recursos — mapa del territorio + expediente por condado
   ============================================================= */
.resources { padding-block: 5rem 5.5rem; }
.resources-head { max-width: 46ch; margin-bottom: 3rem; }
.resources-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  font-weight: 500;
  line-height: 1.08;
  margin-top: .7rem;
}
.resources-intro {
  font-family: var(--sans);
  color: rgba(var(--ink-rgb), .78);
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.65;
}

/* Móvil: el mapa arriba, las fichas apiladas debajo. El SVG de las
   líneas se oculta porque no habría nada horizontal que unir. */
.resources-layout { display: grid; gap: 2rem; position: relative; }
.resources-map {
  position: relative;
  max-width: 320px;
  margin-inline: auto;
}
.resources-map img { width: 100%; height: auto; display: block; }

/* Punto de anclaje sobre cada condado. Centrado en su coordenada
   con la traslación, para que el % apunte al centro y no a la
   esquina superior izquierda del punto. */
.map-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--cream);
  display: none;
}

/* Capa de líneas: cubre toda la maqueta y no intercepta el ratón. */
.resources-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  overflow: visible;
}
.map-lead {
  fill: none;
  stroke: rgba(var(--ink-rgb), .38);
  stroke-width: 1.2;
}

.resources-cards { display: grid; gap: 1rem; }

.res-card {
  position: relative;
  border: 1px solid rgba(var(--ink-rgb), .16);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.2rem;
  background: rgba(var(--cream-rgb), .5);
}
.res-card--pb { border-left-color: var(--sage); }
.res-card--br { border-left-color: var(--gold); }
.res-card--md { border-left-color: rgba(var(--ink-rgb), .78); }

.res-county {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .68);
}
.res-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: .35rem 0 .9rem;
}
.res-list { list-style: none; display: grid; gap: .1rem; }

.res-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  min-height: 44px;
  padding-block: .55rem;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(var(--ink-rgb), .8);
  border-top: 1px solid rgba(var(--ink-rgb), .1);
  text-decoration: none;
}
.res-list li:first-child .res-link { border-top: 0; }

.res-link em {
  flex: none;
  font-family: var(--mono);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .58);
  border: 1px solid rgba(var(--ink-rgb), .2);
  border-radius: 2px;
  padding: .18rem .4rem;
}
.res-link.is-pending { color: rgba(var(--ink-rgb), .62); cursor: default; }

/* Desktop: el mapa manda el alto y las tres fichas se reparten a lo
   largo de ese mismo alto, más estrechas, con una línea saliendo de
   cada condado. El mapa lleva la columna más ancha porque la
   silueta de Florida deja mucho aire a la izquierda. */
@media (min-width: 900px) {
  .resources-layout {
    /* Reparto calculado para que el alto de la imagen del mapa y el
       alto de las tres fichas queden casi iguales: la silueta manda. */
    grid-template-columns: minmax(320px, 1.22fr) minmax(0, .88fr);
    column-gap: 3.5rem;
    align-items: stretch;
  }
  .resources-map { max-width: none; margin: 0; align-self: center; }
  .map-dot { display: block; }
  .resources-lines { display: block; }

  /* space-between reparte las fichas de borde a borde del mapa: así
     la primera y la última marcan el alto total de Florida. */
  .resources-cards {
    align-content: space-between;
    gap: 1rem;
  }
  /* Las fichas se encogen a propósito por debajo del alto del mapa:
     así la fila la define Florida y el space-between de arriba las
     reparte justo entre su punta norte y su punta sur. */
  .res-card {
    padding: .85rem 1rem .75rem;
    background: rgba(var(--cream-rgb), .62);
  }
  .res-county { font-size: .64rem; }
  .res-title { font-size: .98rem; margin: .22rem 0 .45rem; }
  .res-link {
    min-height: 0;
    padding-block: .3rem;
    font-size: .78rem;
    line-height: 1.35;
    gap: .55rem;
  }
  .res-link em { font-size: .55rem; padding: .12rem .32rem; }
}

@media (hover: hover) and (pointer: fine) {
  .res-link:not(.is-pending):hover { color: var(--ink); }
}

/* =============================================================
   11. Cierre + Footer (dark)
   ============================================================= */
.closing { padding-block: 6rem 3rem; text-align: center; }
.closing-logo-mark { width: 116px; height: auto; margin: 0 auto 2.2rem; }
.closing-kicker { color: var(--gold); margin-bottom: 1.2rem; }
.closing-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-style: italic;
  color: var(--cream);
  max-width: 20ch;
  margin-inline: auto;
}
.closing-sub {
  font-family: var(--sans);
  color: rgba(var(--cream-rgb), .78);
  max-width: 40ch;
  margin: 1.4rem auto 2.2rem;
  font-size: 1rem;
}

.footer-logo { display: inline-flex; justify-content: center; margin-block: 3.2rem 1.6rem; }
.footer-logo img { width: 180px; height: auto; }

.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.6rem; margin-bottom: 2.4rem; font-size: .92rem; color: rgba(var(--cream-rgb), .85); }
.footer-contact a { display: inline-block; padding: .6rem .3rem; margin: -.6rem -.3rem; }
@media (hover: hover) and (pointer: fine) {
  .footer-contact a:hover { color: var(--cream); }
}

.footer-legal {
  max-width: 46rem;
  margin-inline: auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(var(--cream-rgb), .14);
  font-size: .72rem;
  line-height: 1.75;
  color: rgba(var(--cream-rgb), .58);
}
.footer-coords {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: rgba(var(--gold-rgb), .85);
  margin-bottom: .9rem;
}
.footer-year { margin-top: 1rem; font-size: .7rem; color: rgba(var(--cream-rgb), .58); }

/* =============================================================
   11. Contact anchor placeholder
   ============================================================= */
/* Vive dentro de .closing, que está centrada — aquí se vuelve a
   alinear a la izquierda, que es como se leen los formularios. */
.lead {
  text-align: left;
  max-width: 640px;
  margin: 3rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(var(--cream-rgb), .18);
}
.lead-intro {
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(var(--cream-rgb), .78);
  margin-bottom: 2rem;
}

.lead-form { display: grid; gap: 1.6rem; }
.lead-q { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.lead-q legend {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .78);
  padding: 0;
}
.lead-flow { display: grid; gap: 1.6rem; }
.lead-flow[hidden] { display: none; }

.lead-choices { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.lead-choices--3 { grid-template-columns: repeat(3, 1fr); }
.lead-choices label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: .4rem .5rem;
  border: 1px solid rgba(var(--cream-rgb), .28);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.25;
  color: rgba(var(--cream-rgb), .88);
  transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft), color .2s var(--ease-soft);
}
.lead-choices input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.lead-choices input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 6px; }
.lead-choices label:has(input:checked) {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  font-weight: 500;
}
.lead-choices label:active { transform: scale(.98); }

@media (min-width: 560px) {
  .lead-choices--4 { grid-template-columns: repeat(4, 1fr); }
}

.lead-contact { display: grid; gap: 1rem; }
.lead-contact[hidden] { display: none; }
.lead-row-2 { display: grid; gap: 1rem; }
@media (min-width: 560px) {
  .lead-row-2 { grid-template-columns: 1fr 1fr; }
}

.lead-field { display: grid; gap: .4rem; }
.lead-field label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .78);
}
.lead-optional { text-transform: none; letter-spacing: 0; opacity: .7; }
.lead-field input {
  min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid rgba(var(--cream-rgb), .28);
  border-radius: var(--radius);
  background: rgba(var(--cream-rgb), .06);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--cream);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.lead-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22);
}
.lead-field input[aria-invalid="true"] { border-color: #E0796B; }

.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .2rem 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(var(--cream-rgb), .78);
}
.lead-consent input {
  flex: none;
  width: 22px; height: 22px;
  margin-top: .1rem;
  accent-color: var(--gold);
  cursor: pointer;
}

.lead-error {
  font-family: var(--sans);
  font-size: .85rem;
  color: #E0796B;
}
.lead-error[hidden] { display: none; }

.lead-submit { justify-self: start; }
.lead-alt {
  font-family: var(--sans);
  font-size: .85rem;
  color: rgba(var(--cream-rgb), .68);
}

@media (hover: hover) and (pointer: fine) {
  .lead-choices label:hover { border-color: rgba(var(--cream-rgb), .6); }
  .lead-choices label:has(input:checked):hover { border-color: var(--cream); }
}

/* Agendar una llamada — alternativa directa al WhatsApp/email, debajo
   del formulario de calificación. */
.schedule {
  display: grid;
  gap: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(var(--cream-rgb), .16);
}
.schedule-intro {
  font-family: var(--sans);
  font-size: .9rem;
  color: rgba(var(--cream-rgb), .78);
}
.schedule-status {
  font-family: var(--mono);
  font-size: .8rem;
  color: rgba(var(--cream-rgb), .6);
}
.schedule-status[hidden] { display: none; }

.schedule-days { display: grid; gap: .9rem; }
.schedule-days[hidden] { display: none; }

.schedule-day-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .6);
  margin-bottom: .5rem;
}
.schedule-slots {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.schedule-slot {
  min-height: 40px;
  padding: .45rem .85rem;
  border: 1px solid rgba(var(--cream-rgb), .28);
  border-radius: var(--radius);
  background: transparent;
  color: rgba(var(--cream-rgb), .88);
  font-family: var(--sans);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft), color .2s var(--ease-soft);
}
.schedule-slot:hover { border-color: var(--cream); }
.schedule-slot[aria-pressed="true"] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  font-weight: 500;
}

.schedule-form { display: grid; gap: 1rem; }
.schedule-form[hidden] { display: none; }
.schedule-picked {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--cream);
}
.schedule-picked strong { color: var(--gold); }

.btn-ghost-link {
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: .82rem;
  color: rgba(var(--cream-rgb), .68);
  text-decoration: underline;
  cursor: pointer;
}
.btn-ghost-link:hover { color: var(--cream); }

.schedule-confirmed {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--gold);
}
.schedule-confirmed[hidden] { display: none; }

/* =============================================================
   11b. Sticky CTA — persistent while scrolling past the hero
   ============================================================= */
.sticky-cta {
  position: fixed;
  left: 50%; bottom: 1.4rem;
  z-index: 40;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: .85rem 1.6rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  box-shadow: 0 12px 32px -10px rgba(var(--ink-rgb), .5);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background-color .3s var(--ease-out);
}
.sticky-cta.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .sticky-cta:hover { background: var(--sage); }
}
.sticky-cta:active { transform: translate(-50%, 0) scale(.97); }
.sticky-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =============================================================
   12. Responsive — additional breakpoints
   ============================================================= */
@media (min-width: 540px) {
  .hero-title { max-width: 18ch; }
}
@media (min-width: 1280px) {
  .proof-eyebrow-line, .steps-head h2, .testimonials-head h2 { font-size: 2.1rem; }
}
@media (max-width: 719px) {
  .sticky-cta { bottom: 1rem; font-size: .8rem; padding: .75rem 1.3rem; }
}

/* =============================================================
   13. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transform: none !important; }
  .reveal { transition-duration: .3s; }
  .sticky-cta { transition-duration: .01s; }
}