/* ==========================================================================
   Lofty Real Estate — design tokens
   ========================================================================== */
:root {
  --navy: #0f2338;
  --navy-deep: #0a1a2b;
  --blue: #1a6fa0;
  --blue-light: #1588bf;
  --teal: #2dc9a7;
  --teal-deep: #22b598;
  --teal-ink: #0f7a63; /* darkened teal for text on light backgrounds — teal-deep fails WCAG AA (~2.4:1) as text, this passes ~4.7-5.3:1 */
  --ink: #14212f;
  --paper: #f6f9fb;
  --paper-2: #eef3f6;
  --white: #ffffff;
  --line: #e2e8ee;
  --muted: #5b6b78;
  --muted-on-dark: #c3d2dd; /* secondary text on navy/dark backgrounds — replaces ~5 near-duplicate hardcoded greys */

  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow: 0 20px 50px -20px rgba(15, 35, 56, 0.35);
  --shadow-sm: 0 8px 24px -12px rgba(15, 35, 56, 0.25);
  --ease: cubic-bezier(.16,.84,.44,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { line-height: 1.65; margin: 0 0 1em; color: var(--muted); }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 1em;
}
.section-eyebrow--light { color: var(--teal); }

.section-sub {
  max-width: 620px;
  font-size: 1.05rem;
  margin-bottom: 36px;
}
.section-sub--light { color: var(--muted-on-dark); }
.section-sub a { color: var(--teal); font-weight: 600; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn-primary {
  background: linear-gradient(120deg, var(--teal) 0%, var(--blue) 100%);
  color: var(--white);
  box-shadow: 0 14px 30px -10px rgba(26, 111, 160, .55);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -10px rgba(26, 111, 160, .65); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  background: rgba(255,255,255,.08);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-3px); }
.btn-full { width: 100%; justify-content: center; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
/* Stagger delay is set inline by main.js (per-element index among its
   .reveal siblings), which scales correctly for groups of any size —
   a fixed nth-child(2/3/4) ladder here would silently stop staggering
   past the 4th item (it did, for the 6-card services grid). */

/* ==========================================================================
   Text reveal — per-word scroll animation (hero H1 + key section H2s)
   ========================================================================== */
.text-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.text-reveal .word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.text-reveal.in-view .word-inner { transform: translateY(0); }

/* ==========================================================================
   Progress bar
   ========================================================================== */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  z-index: 1000;
  transition: width .1s linear;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 18px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled {
  background: rgba(15, 35, 56, .78);
  backdrop-filter: blur(14px);
  padding: 12px 0;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.4);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.brand img { height: 44px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  color: var(--white);
  font-weight: 600;
  font-size: .92rem;
  position: relative;
  padding: 12px 0; /* keeps the tap target >=40px tall on touch (off-canvas mobile menu and the inline tablet nav both use this rule) */
}
.main-nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 6px;
  width: 0; height: 2px;
  background: var(--teal);
  transition: width .3s var(--ease);
}
.main-nav a:not(.nav-cta):hover::after { width: 100%; }
.main-nav a.nav-cta {
  display: inline-block;
  background: var(--white);
  color: var(--navy);
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  line-height: 1;
  white-space: nowrap;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.main-nav a.nav-cta:hover { transform: translateY(-2px); background: var(--teal); color: var(--white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 950;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 0 100px;
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,26,43,.75) 0%, rgba(10,26,43,.45) 45%, rgba(10,26,43,.85) 100%),
    linear-gradient(115deg, rgba(15,35,56,.55) 0%, rgba(45,201,167,.28) 100%);
}
.hero-inner { position: relative; z-index: 1; }
.hero .eyebrow {
  display: inline-block;
  color: var(--teal);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: 18px;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 800;
  max-width: 900px;
}
.hero-sub {
  color: var(--muted-on-dark);
  font-size: 1.15rem;
  max-width: 560px;
  margin-top: 20px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 20px;
  z-index: 2;
}
.scroll-cue::before {
  /* expands the tap target to ~44px without changing the visible pill size */
  content: '';
  position: absolute;
  inset: -9px -13px;
}
.scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  background: var(--teal);
  border-radius: 3px;
  transform: translateX(-50%);
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 20px; }
}

/* ==========================================================================
   Portales / marcas (marquee)
   ========================================================================== */
.partners { background: var(--paper); }
/* ID needed: the generic `section:not(.hero){padding:110px 0}` rule ties
   in specificity with a plain `.partners` class and was winning on source
   order, silently forcing 110px top padding back in. Top padding is
   deliberately small here: #numeros already carries a 48px bottom padding
   meant as "the gap to whatever comes next" (see comment above .stats), so
   stacking this section's own full padding on top of that doubled up into
   a noticeably empty gap. Bottom padding stays closer to the site's normal
   section rhythm since nothing else compensates there. */
#portales { padding: 12px 0 76px; }
.partners-accent {
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--blue-light));
}
.partners-label {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.partners-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.partners-marquee .marquee-track { gap: 64px; animation-duration: 60s; }
.partner-logo { flex: none; display: flex; align-items: center; }
.partner-logo img {
  height: 38px;
  width: auto;
  opacity: .55; /* source logos are already grayscale, hover just brightens them */
  transition: opacity .3s var(--ease);
}
.partner-logo img:hover { opacity: 1; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats {
  position: relative;
  z-index: 2;
  margin-top: -70px;
}
/* #id specificity needed: the generic `section:not(.hero){padding:110px 0}`
   rule outranks a plain .stats class and was silently forcing top/bottom
   padding to 110px each, which is why the box sat close to the hero above
   but had a much bigger gap below it. */
/* padding-top looks lopsided (118 vs 48) but margin-top:-70 above eats into
   it first — net result is an equal 48px visual gap above and below the box,
   between the hero photo and the section that follows (.partners, which
   keeps its own top padding minimal so this 48px isn't doubled up). */
#numeros {
  padding-top: 118px;
  padding-bottom: 48px;
}
.stats-grid {
  background: var(--navy);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 26px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
}
.stat-card:last-child { border-right: none; }
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.1;
  background: linear-gradient(120deg, var(--teal), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card p {
  color: var(--muted-on-dark);
  font-size: .9rem;
  line-height: 1.4;
  margin: 8px 0 0;
  max-width: 170px;
}

/* ==========================================================================
   Generic section spacing
   ========================================================================== */
section:not(.hero) { padding: 110px 0; }

/* ==========================================================================
   Reels
   ========================================================================== */
.reels { background: var(--navy-deep); text-align: center; }
.reels h2 { color: var(--white); }
.reels .section-sub { color: var(--muted-on-dark); margin: 0 auto 50px; }
.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
.reel-frame {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #16324a 0%, #0a1a2b 60%);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .4s var(--ease);
}
.reel-card:hover .reel-frame { box-shadow: 0 24px 55px -18px rgba(0,0,0,.55); }
.reel-card:hover .reel-video { transform: scale(1.05); }
.reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.reel-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.55);
  font-family: var(--font-head);
  font-weight: 700;
  background:
    radial-gradient(circle at 30% 20%, rgba(45,201,167,.25), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(26,111,160,.35), transparent 55%);
}
.reel-video:not([data-error="true"]) ~ .reel-fallback { opacity: 0; pointer-events: none; }
.reel-fallback { transition: opacity .3s var(--ease); }
.reel-link { position: absolute; inset: 0; z-index: 2; }

/* ==========================================================================
   Proceso / Timeline
   ========================================================================== */
.proceso { background: var(--paper); }
.proceso h2, .quote { text-align: center; }
.proceso .container > h2 { max-width: 700px; margin-left: auto; margin-right: auto; }
.proceso .section-eyebrow { display: block; text-align: center; }
.quote {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--blue);
  max-width: 560px;
  margin: 30px auto 70px;
  font-style: normal;
  border: none;
  position: relative;
}

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 27px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--teal), var(--blue));
  opacity: .35;
}
.timeline-item {
  display: flex;
  gap: 26px;
  margin-bottom: 44px;
  position: relative;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-num {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.timeline-item h3 { margin-bottom: 6px; }
.timeline-item p { margin: 0; max-width: 560px; }

/* ==========================================================================
   Tasa de éxito
   ========================================================================== */
.exito { background: var(--paper-2); }
/* #id needed: section:not(.hero) outranks a plain .exito class the same way
   it outranks .partners/.stats above (see #portales/#numeros) — bottom
   padding trimmed here since .servicios opens right after with its own full
   110px top padding, and stacked together that read as a ~220px dead gap
   before "Relevamiento premium". */
#exito { padding-bottom: 48px; }
.exito .section-sub { max-width: 620px; }

/* ---- The hero number: one huge figure, nothing competing with it ---- */
.exito-hero { margin-top: 56px; }
.exito-hero-num {
  display: block;
  font-size: clamp(4.5rem, 13vw, 8.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--teal-deep), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.exito-hero-caption {
  margin: 14px 0 0;
  max-width: 460px;
  font-size: 1.15rem;
  color: var(--muted);
}
.exito-hero-caption strong { color: var(--navy); font-weight: 700; }

/* ---- Reality-check panel: the market context, deliberately quieter and
   contained in its own box so it reads as supporting evidence, not a rival
   headline to the number above. ---- */
.exito-reality {
  margin-top: 40px;
  max-width: 680px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.exito-reality-heading {
  margin: 0 0 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--muted);
}
.exito-reality-body { display: flex; align-items: center; gap: 28px; }

/* Waffle grid: 100 cells, 3 lit — makes "3%" viscerally small in a way the
   number alone doesn't. Each cell is exactly one percentage point. */
.exito-waffle {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  width: 148px;
}
.exito-waffle-cell { aspect-ratio: 1; border-radius: 2px; background: var(--line); }
.exito-waffle-cell.is-filled { background: var(--teal); }

.exito-reality-copy p { margin: 0; font-size: .98rem; color: var(--navy); line-height: 1.55; }
.exito-reality-copy .stat-num {
  display: inline;
  font-size: 1.05em;
  background: linear-gradient(120deg, var(--teal-deep), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.exito-sources { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.exito-source-chip {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--paper-2);
}
.exito-source-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  white-space: nowrap;
}
.exito-source-label { font-size: .7rem; line-height: 1.35; color: var(--muted); }
.exito-source-label strong { color: var(--muted); font-weight: 700; }

/* ==========================================================================
   Servicios
   ========================================================================== */
.servicios { background: var(--paper-2); text-align: center; }
/* Top trimmed to pair with #exito's bottom trim above — halves the combined
   gap between the two sections instead of stacking a full 110px on each side. */
#servicios { padding-top: 48px; }
.servicios .container > h2, .servicios .section-sub { margin-left: auto; margin-right: auto; }
.servicios .section-eyebrow { display: block; }
.servicios .section-sub { margin-bottom: 60px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 26px;
  text-align: left;
}
.service-card {
  min-height: 300px;
  perspective: 1400px;
  border-radius: var(--radius);
  transition: transform .4s var(--ease);
  outline: none;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-8px);
}
.service-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform .7s var(--ease);
  transform-style: preserve-3d;
}
.service-card:hover .service-card-inner,
.service-card:focus-within .service-card-inner,
.service-card.is-flipped .service-card-inner {
  transform: rotateY(180deg);
}
.service-card-front, .service-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}
.service-card-front {
  background: var(--white);
  padding: 32px 28px;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-card:hover .service-card-front,
.service-card:focus-within .service-card-front,
.service-card.is-flipped .service-card-front {
  box-shadow: var(--shadow);
  border-color: transparent;
}
.service-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(45,201,167,.15), rgba(26,111,160,.15));
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card p { margin: 0; font-size: .95rem; }

.service-card-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-end;
}
.service-card-back::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(9, 22, 37, .88) 0%, rgba(9, 22, 37, .25) 55%, rgba(9, 22, 37, 0) 85%);
}
.service-card-back-label {
  position: relative;
  z-index: 2;
  padding: 22px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  line-height: 1.3;
}

.service-card-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Before/after dissolve loop: the "after" (furnished) image is stacked on
   top of the "before" one and fades in and out on a timer — same room, same
   camera angle, so the crossfade reads as the space getting furnished. */
.service-card-dissolve-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.service-card-dissolve-img--after {
  opacity: 0;
  animation: serviceDissolve 3s ease-in-out infinite;
}
@keyframes serviceDissolve {
  0%, 35% { opacity: 0; }
  50%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* 3D spin loop: the plano and 3D-mockup faces sit back-to-back on a card
   that keeps rotating on its Y axis, so each swap reads as a real 3D turn
   rather than a flat crossfade (same perspective/backface-visibility
   mechanism as the outer card flip, nested one level in). */
.service-card-back--spin3d { perspective: 1200px; }
.service-card-spin3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-style: preserve-3d;
  animation: servicePlanoSpin 4s ease-in-out infinite;
}
.service-card-spin3d-face {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.service-card-spin3d-face--back {
  transform: rotateY(180deg);
}
@keyframes servicePlanoSpin {
  0%, 37.5% { transform: rotateY(0deg); }
  50%, 87.5% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* Partner strip nested inside .servicios, below the 6 flip cards — a quieter
   sub-block, not a competing section, so it borrows the section's own
   centered text-align instead of redeclaring it. */
.services-partners {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.services-partners-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 8px;
}
.services-partners-sub {
  font-size: .98rem;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 36px;
}
.services-partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
}
.services-partners-logos img {
  height: 48px;
  width: auto;
}
/* InfoCasas' wordmark runs much wider per unit height than the other three
   (5.3:1 vs ~3.2-3.7:1) — matched by height alone it visually dominates the
   row, so it gets its own shorter height to land at a similar footprint. */
.services-partners-logos img.is-compact {
  height: 32px;
}

/* ==========================================================================
   Incluye
   ========================================================================== */
.incluye { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: var(--white); }
.incluye-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.incluye-copy h2 { color: var(--white); }
.checklist {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  gap: 14px 20px;
}
.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: .95rem;
  color: var(--muted-on-dark);
  font-weight: 500;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--teal), var(--teal-deep)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%, 60% 60%;
}
/* ==========================================================================
   Resultados
   ========================================================================== */
.resultados { background: var(--paper); text-align: center; overflow: hidden; }
.resultados h2 { margin-bottom: 50px; }
.resultados-marquee .marquee-track { gap: 22px; animation-direction: reverse; }
.result-card {
  flex: none;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: left;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.result-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.result-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--teal-ink);
  background: rgba(45,201,167,.12);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.result-card h3 { margin-bottom: 6px; }
.result-price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--blue);
  margin: 0;
}

/* ==========================================================================
   Youtube: suscribite + videos
   ========================================================================== */
.youtube-promo { background: var(--paper-2); }
.youtube-promo-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  padding: 64px 64px 56px;
}
/* ============ YouTube promo top — final synthesis ============ */

.youtube-promo-top {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .95fr;
  gap: 16px 24px;
  align-items: center;
  isolation: isolate; /* contain the ambient glow's z-index:0 to this block */
  overflow: visible;
  padding: 12px 0 28px;
}

/* Shared ambient glow spanning both columns — the visual "glue" tying
   copy and phone into one composition instead of two grid boxes */
.youtube-promo-ambient {
  position: absolute;
  top: 50%;
  left: 42%;
  width: 620px;
  height: 620px;
  max-width: 92vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(45,201,167,.22) 0%, rgba(26,111,160,.13) 45%, rgba(26,111,160,0) 72%);
  z-index: 0;
  pointer-events: none;
}

/* Low-opacity ghosted play-triangle straddling the column seam — a subtle,
   on-brand nod to the video theme without being a literal logo/kitsch */
.youtube-promo-ghost-shape {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: linear-gradient(135deg, rgba(45,201,167,.12), rgba(15,35,56,.06));
  clip-path: polygon(18% 8%, 18% 92%, 88% 50%);
  z-index: 0;
  pointer-events: none;
}

/* Thin gradient connector + dot: threads visually from the CTA area toward
   the phone, the most literal answer to "make it feel connected to the text" */
.youtube-promo-connector {
  position: absolute;
  top: 60%;
  left: 48%;
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal-deep) 60%, var(--teal-deep));
  transform: translateY(-50%) rotate(-6deg);
  z-index: 1;
  pointer-events: none;
}

.youtube-promo-connector::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal-deep);
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px rgba(45,201,167,.2);
}

.youtube-promo-copy { position: relative; z-index: 2; }

.subscribe-heading {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 800;
  color: var(--ink);
  margin: .1em 0 .3em;
  line-height: 1;
}
.subscribe-sub {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 420px;
  margin: 0 0 32px;
}
.subscribe-sub strong { color: var(--navy); }
.youtube-subscribe-btn { background: #FF0000; box-shadow: 0 14px 30px -10px rgba(255,0,0,.45); }
.youtube-subscribe-btn:hover { background: #e30000; transform: translateY(-3px); }
.youtube-subscribe-btn:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }
.youtube-subscribe-btn svg { width: 26px; height: 19px; }

/* Phone column bleeds left into the copy column's whitespace so it reads
   as part of the same scene, not an isolated flexbox child */
.youtube-promo-phone {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  margin-left: -56px;
}

/* Dashed/dotted orbit rings behind the phone — a deliberate decorative
   shape, never an opaque box, so the PNG's real alpha transparency shows */
.youtube-promo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(45,201,167,.38);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: youtubeOrbitSpin 48s linear infinite;
}
.youtube-promo-orbit::after {
  content: '';
  position: absolute;
  inset: 32px;
  border: 1px dotted rgba(26,111,160,.32);
  border-radius: 50%;
}

/* Float wrapper — the <img> keeps its own baked-in drop-shadow and real
   transparency untouched; only the wrapper is transformed */
.youtube-promo-float {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 100%;
  max-width: 290px; /* gives the img's width:100% a definite box to resolve
    against — without this, .youtube-promo-float shrink-to-fits around the
    img while the img's width:100% shrink-to-fits around it, a circular
    reference the engine resolved by collapsing both to 0x0 */
  animation: youtubePhoneFloat 6s ease-in-out infinite;
  will-change: transform;
}
.youtube-promo-phone img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5; /* matches the source PNG's real 576x720 px */
  filter: none; /* shadow already baked into the PNG art, avoid doubling it */
}

/* Accent chips overlapping the phone edges — echo the CTA's message and
   gradient, anchoring the image to the copy semantically */
.youtube-promo-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  box-shadow: var(--shadow-sm);
  animation: youtubeChipFloat 5s ease-in-out infinite;
  pointer-events: none;
}
.youtube-promo-chip-bell {
  top: 6%;
  left: -6%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--teal-ink);
  animation-delay: .4s;
}
.youtube-promo-chip-videos {
  bottom: 10%;
  right: -8%;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: var(--white);
  animation-delay: 1.1s;
}

/* ===== Motion ===== */
@keyframes youtubePhoneFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}
@keyframes youtubeChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes youtubeOrbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.youtube-videos-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 28px;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
}
.youtube-videos-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.youtube-videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.video-facade.youtube-video-card { border: 1px solid var(--line); }
.video-caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  pointer-events: none;
}
.youtube-video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,26,43,.7) 0%, transparent 40%);
  pointer-events: none;
}

/* Base facade shape. max-width/margin/box-shadow are deliberately left off
   here — the only current usage (.youtube-video-card) sits in a 2-up grid
   and overrides those three anyway; add them back if a bare, centered
   single .video-facade is ever used again. */
.video-facade {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform .5s var(--ease); }
.video-facade:hover img { transform: scale(1.04); }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play-btn {
  position: absolute; inset: 0;
  margin: auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(15,35,56,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.7);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.video-facade:hover .play-btn { transform: scale(1.08); background: var(--teal-deep); border-color: var(--teal-deep); }
.play-btn svg { width: 30px; height: 30px; margin-left: 4px; }

.matterport-video { background: var(--paper); text-align: center; }
.matterport-video .container > h2,
.matterport-video .section-sub { margin-left: auto; margin-right: auto; }
.matterport-video .section-eyebrow { display: block; }
.matterport-video .section-sub { margin-bottom: 44px; }
.matterport-frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.matterport-tour-cta { margin: 32px 0 0; }

/* ===== Matterport benefits — editorial ghost-numeral list ===== */
.matterport-benefits-lead {
  text-align: left;
  margin: 64px 0 8px;
  max-width: 620px;
}
.matterport-benefits-accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--teal), var(--blue-light));
}
.matterport-benefits-lead p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--navy);
}

.matterport-benefits {
  text-align: left;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 680px; /* without a cap the 1fr column stretches past the 46ch description, stranding the arrow far right of the copy */
}
.matterport-benefit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 28px;
  padding: 32px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.matterport-benefit:hover { padding-left: 20px; }

.matterport-benefit-num {
  min-width: 104px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  line-height: 1;
  color: rgba(15, 35, 56, .12);
  -webkit-text-stroke: 1.5px rgba(15, 35, 56, .22);
  transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}
.matterport-benefit:hover .matterport-benefit-num {
  color: rgba(45, 201, 167, .16);
  -webkit-text-stroke: 1.5px var(--teal);
}

.matterport-benefit-body h3 {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  line-height: 1.35;
}
.matterport-benefit-line {
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--blue-light));
  transition: width .5s var(--ease);
}
.matterport-benefit:hover .matterport-benefit-line { width: 96px; }

.matterport-benefit-desc {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}

.matterport-benefit-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.matterport-benefit-arrow svg { width: 20px; height: 20px; }
.matterport-benefit:hover .matterport-benefit-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--teal-deep);
  background: rgba(45, 201, 167, .12);
}


/* ==========================================================================
   Testimonios / marquee
   ========================================================================== */
.testimonios { background: var(--navy-deep); overflow: hidden; }
.testimonios > .section-eyebrow { display: block; text-align: center; }
.testimonios > h2 { text-align: center; }
.testimonios h2 { color: var(--white); margin-bottom: 50px; }
.marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.testimonial-card {
  flex: none;
  width: 340px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.testimonial-card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-4px);
}
.testimonial-card p {
  color: var(--muted-on-dark);
  font-size: .95rem;
  margin-bottom: 16px;
}
.testimonial-card span {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--teal);
  font-size: .9rem;
}
.testimonial-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.google-g { width: 18px; height: 18px; flex: none; }
.testimonial-badge .stars {
  color: #FBBC04;
  font-size: .85rem;
  letter-spacing: 2px;
}
.testimonials-cta {
  text-align: center;
  margin-top: 48px;
}

.reels-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}
.reels-cta .btn-ghost {
  background: none;
  border: none;
  backdrop-filter: none;
  padding: 6px 4px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted-on-dark);
  gap: 8px;
}
.reels-cta .btn-ghost:hover { background: none; color: var(--white); transform: none; }
.reels-cta .btn-ghost svg { width: 17px; height: 17px; }

/* ==========================================================================
   Contacto
   ========================================================================== */
.contacto { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--white); }
.contacto-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}
.contacto-copy h2 { color: var(--white); }
.broker-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 28px 0;
  max-width: 380px;
}
.broker-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.broker-card strong { display: block; font-family: var(--font-head); }
.broker-card span { color: var(--teal); font-size: .85rem; }

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-list li { display: flex; align-items: center; gap: 14px; }
.contact-list svg { width: 20px; height: 20px; color: var(--teal); flex: none; }
.contact-list a { font-weight: 600; }
.contact-list a:hover { color: var(--teal); }

.lead-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.form-row { margin-bottom: 18px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-form label { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--navy); }
.required-mark { color: var(--blue); font-weight: 700; }
.optional-mark { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.lead-form input, .lead-form textarea {
  font-family: var(--font-body);
  font-size: 16px; /* iOS Safari auto-zooms the page on focus if a field computes under 16px */
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lead-form input:focus, .lead-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(45,201,167,.14);
}
.form-note { text-align: center; font-size: .8rem; margin: 14px 0 0; color: var(--muted); }

/* ==========================================================================
   Ubicación / mapa
   ========================================================================== */
.ubicacion { background: var(--paper); }
.ubicacion-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.ubicacion-copy h2 { margin-bottom: 14px; }
.ubicacion-copy .section-sub { margin-bottom: 30px; }
.ubicacion-map {
  aspect-ratio: 4/3;
  max-height: 60vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.ubicacion-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: var(--muted-on-dark); padding: 70px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand img { height: 30px; margin-bottom: 16px; }
.footer-brand p { max-width: 320px; font-size: .9rem; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-links h3, .footer-contact h3 {
  color: var(--white);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.footer-links a, .footer-contact a { font-size: .92rem; }
.footer-links a:hover, .footer-contact a:hover { color: var(--teal); }
.footer-social { display: flex; gap: 12px; margin-top: 8px; }
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.footer-social a:hover { background: var(--teal); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  padding: 22px 24px;
  font-size: .8rem;
  color: var(--muted-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: max(26px, env(safe-area-inset-bottom) + 16px);
  right: max(26px, env(safe-area-inset-right) + 16px);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.6);
  z-index: 500;
  animation: floatpulse 2.6s ease-in-out infinite;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 16px 34px -8px rgba(37,211,102,.75);
  animation-play-state: paused;
}
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float.is-hidden { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
@keyframes floatpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  /* Tablet range (portrait ~768-834px through landscape ~1024px). Backfilled
     rules below cover sections the original 980px cutoff never reached at
     standard iPad landscape width (1024px). */
  section:not(.hero) { padding: 84px 0; }
  #numeros { padding-top: 92px; padding-bottom: 40px; } /* #numeros outranks the generic rule above (ID vs class) — must be set explicitly here too */
  #exito { padding-bottom: 40px; } /* same ID-vs-class override as #numeros, needed here too */
  #servicios { padding-top: 40px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .stat-card:nth-last-child(-n+2) { border-bottom: none; }
  .reel-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
  .reel-grid .reel-card:last-child { grid-column: 1 / -1; max-width: 220px; margin: 0 auto; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .incluye-grid { grid-template-columns: 1fr; gap: 40px; }
  .contacto-grid { grid-template-columns: 1fr; }
  .ubicacion-grid { grid-template-columns: 1fr; }
  .youtube-promo-card { padding: 48px 40px; }
  .youtube-promo-top { grid-template-columns: 1fr; text-align: center; gap: 44px; padding: 8px 0 16px; }
  .youtube-promo-copy { display: flex; flex-direction: column; align-items: center; order: 2; }
  .youtube-promo-ambient { left: 50%; width: 460px; height: 460px; }
  .youtube-promo-ghost-shape { left: 50%; top: 62%; width: 190px; height: 190px; }
  .youtube-promo-connector { display: none; }
  .youtube-promo-phone { order: 1; margin-left: 0; min-height: 380px; }
  .youtube-promo-orbit { width: 260px; height: 260px; }
  .youtube-promo-chip-bell { left: -2%; }
  .youtube-promo-chip-videos { right: 0; }
  .subscribe-sub { text-align: center; }
  .matterport-benefits-lead { margin-top: 48px; }
  .matterport-benefit { column-gap: 20px; padding: 28px 4px; }
  .matterport-benefit-num { min-width: 80px; font-size: clamp(2.5rem, 7vw, 3.5rem); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .services-partners { margin-top: 56px; padding-top: 40px; }
  .services-partners-logos { gap: 36px; }
}

@media (max-width: 760px) {
  .partners-marquee .marquee-track { gap: 40px; }
  .partner-logo img { height: 28px; }
  .services-partners-logos { gap: 28px; }
  .services-partners-logos img { height: 36px; }
  .services-partners-logos img.is-compact { height: 24px; }

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--navy-deep);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    z-index: 940;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { font-size: 1.2rem; }

  .exito-reality { padding: 24px; }
  .exito-reality-body { flex-direction: column; align-items: flex-start; gap: 20px; }
  .exito-waffle { width: 130px; }
  .nav-toggle { display: flex; }

  section:not(.hero) { padding: 76px 0; }
  /* #numeros (ID) outranks the rule above, so it needs its own mobile
     override or it keeps the desktop 118px top padding while every
     neighboring section compresses to 76px. */
  #numeros { padding-top: 76px; padding-bottom: 36px; }
  #exito { padding-bottom: 36px; } /* same ID-vs-class override as #numeros, needed here too */
  #servicios { padding-top: 36px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: 30px 14px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .stat-card:nth-child(2n) { border-right: none; }
  .stat-num { font-size: clamp(1.6rem, 7vw, 2.1rem); }

  .reel-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
  .reel-grid .reel-card:last-child { grid-column: 1 / -1; max-width: 220px; margin: 0 auto; }

  .services-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .youtube-promo-card { padding: 36px 24px; }
  .youtube-promo-ghost-shape { display: none; }
  .youtube-promo-phone { min-height: 320px; }
  .youtube-promo-float { max-width: 220px; }
  .youtube-promo-orbit { width: 210px; height: 210px; }
  .youtube-promo-orbit::after { inset: 20px; }
  .youtube-promo-chip { font-size: .72rem; padding: 7px 12px; }
  .youtube-promo-chip-bell { top: 2%; left: 0; }
  .youtube-promo-chip-videos { bottom: 4%; right: 0; }
  .youtube-videos-grid { grid-template-columns: 1fr; }
  .youtube-videos-label { margin: 40px 0 22px; }
  .matterport-benefits-lead { margin-top: 40px; }
  .matterport-benefit {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    padding: 24px 0;
  }
  .matterport-benefit:hover { padding-left: 0; }
  .matterport-benefit-num {
    min-width: 56px;
    font-size: 2.25rem;
    -webkit-text-stroke: 1.25px rgba(15,35,56,.22);
  }
  .matterport-benefit-body h3 { font-size: 1.05rem; }
  .matterport-benefit-arrow { display: none; }
  .checklist { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .form-row-2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .timeline::before { left: 23px; }
  .timeline-num { width: 46px; height: 46px; font-size: 1rem; }
}

@media (max-width: 480px) {
  .btn { padding: 14px 20px; font-size: .88rem; }
  .lead-form { padding: 26px; }
  .testimonials-cta .btn-ghost, .reels-cta .btn-ghost { white-space: normal; text-align: center; line-height: 1.3; }
  .reels-cta { flex-direction: column; align-items: stretch; }
  .exito-bar-label { flex-wrap: wrap; gap: 2px 12px; }
}

/* ===== Matterport tour modal ===== */
.matterport-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.matterport-modal[hidden] { display: none; }

.matterport-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 32, .78);
  backdrop-filter: blur(6px);
  animation: matterportFadeIn .35s var(--ease);
}

.matterport-modal-dialog {
  position: relative;
  width: min(1100px, 100%, calc((100dvh - 48px) * 16 / 9));
  max-height: calc(100dvh - 48px);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: matterportPopIn .4s var(--ease);
}

.matterport-modal-frame,
.matterport-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.matterport-modal-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top) + 8px);
  right: max(14px, env(safe-area-inset-right) + 8px);
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(15, 35, 56, .55);
  color: var(--white);
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.matterport-modal-close:hover { background: var(--teal-deep); transform: scale(1.06); }
.matterport-modal-close svg { width: 18px; height: 18px; }

@keyframes matterportFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes matterportPopIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1024px) and (orientation: portrait) {
  /* A squat 16:9 box wastes most of a tall tablet-portrait screen. */
  .matterport-modal { padding: 0; }
  .matterport-modal-dialog { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
}

@media (max-height: 500px) {
  /* Landscape phones: the 16:9 dialog can overflow a short viewport and
     push the close button off-screen. Go fullscreen instead. */
  .matterport-modal { padding: 0; }
  .matterport-modal-dialog { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 64px 0 28px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .hero-sub {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-actions { margin-top: 16px; }
  section:not(.hero) { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .whatsapp-float { animation: none; }
  .youtube-promo-float, .youtube-promo-chip, .youtube-promo-orbit { animation: none; }
  .scroll-cue span { animation: none; }
  .word-inner { transition: none; transform: none; }
  .matterport-modal-backdrop, .matterport-modal-dialog { animation: none; }
  .service-card-inner { transition: none; }
  .service-card-dissolve-img--after { animation: none; opacity: 1; }
  .service-card-spin3d { animation: none; }
}