:root {
  --gold: #C9A227;
  --gold-soft: #B9752C;
  /* Darker variant for gold-toned TEXT on light backgrounds — --gold-soft
     as text on white/--bg-soft only measures 3.7:1 (fails WCAG AA's 4.5:1).
     --gold-soft itself stays for borders/icons/large decorative use. */
  --gold-text: #8a5a20;
  --near-black: #141414;
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  --line: #e7e4d8;
  --bg: #ffffff;
  --bg-soft: #faf9f5;
  /* WhatsApp's brand green (#25D366) only gives ~2:1 contrast with white
     text — fails badly. Their own darker teal reads as "WhatsApp" just as
     clearly and passes comfortably (~7.7:1), and reads more professional. */
  --whatsapp: #075E54;
  --whatsapp-hover: #094f47;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: "Source Serif 4", Georgia, serif;
  text-wrap: balance;
}

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

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

/* Skip link — hidden until focused, essential for keyboard navigation */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--near-black);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* Visible focus ring on every interactive element, for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Shared hover/press motion for interactive elements */
.nav-cta,
.btn,
.service-card .service-cta,
.wa-float,
.mr-banner a {
  transition: filter 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover,
.btn:hover,
.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px rgba(20, 16, 8, 0.35);
}
.service-card .service-cta:hover {
  transform: translateX(3px);
}
.nav-cta:active,
.btn:active,
.wa-float:active {
  transform: translateY(-1px) scale(0.98);
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top bar */
.topbar {
  background: var(--near-black);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

/* Header */
header.site {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo .mark {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

/* Small inline icons used inline with text (topbar, footer) */
.icon-inline {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}

/* WhatsApp glyph inside CTA buttons */
.icon-wa {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.logo .name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.logo .name .small {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo .name .big {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--whatsapp);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav-cta:hover {
  filter: brightness(0.95);
}

/* Hero */
.hero {
  position: relative;
  background: var(--near-black);
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  /* Blurred on purpose: at full sharpness the photo's fine print (laptop
     screen, notebook pages) reads as illegible placeholder text up close,
     which looks worse than an intentionally soft, moody desk backdrop. */
  filter: blur(3px);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(15, 12, 5, 0.97) 0%,
    rgba(15, 12, 5, 0.92) 42%,
    rgba(15, 12, 5, 0.72) 68%,
    rgba(15, 12, 5, 0.5) 100%
  );
}
.hero .wrap {
  position: relative;
  z-index: 2;
  padding: 72px 20px 100px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
}
@media (max-width: 700px) {
  .hero-overlay {
    background: rgba(15, 12, 5, 0.82);
  }
}
.hero .eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero .eyebrow::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--gold);
}
.hero h1 {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero h1 .line {
  display: block;
}
.hero h1 .line-2 {
  color: var(--gold);
}
.hero p.lead {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  max-width: 560px;
}
.hero .cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 24px;
  border-radius: 4px;
}
.btn-whatsapp {
  background: var(--whatsapp);
  color: #fff;
}
.btn-whatsapp:hover {
  background: var(--whatsapp-hover);
}
.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Trust strip — overlaps the hero's bottom edge for a layered, less-flat
   look (same pattern as the Sitio de Propiedades' filter bar). */
.trust-strip {
  position: relative;
  z-index: 5;
  margin-top: -48px;
}
.trust-strip .wrap {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px -8px rgba(20, 16, 8, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 24px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 13px;
  color: var(--ink);
}
.trust-strip .stars {
  color: var(--gold);
  font-weight: 700;
}

/* Section shared */
section {
  padding: 64px 0;
}
.section-head {
  margin-bottom: 34px;
  max-width: 620px;
}
.section-head .eyebrow {
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-head h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--near-black);
}
.section-head p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 14px;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.service-card {
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 24px -12px rgba(20, 16, 8, 0.22);
}
.service-card .icon {
  width: 26px;
  height: 26px;
  color: var(--gold-soft);
}
.service-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--near-black);
}
.service-card p {
  font-size: 13.5px;
  color: var(--muted);
}
.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.service-list li {
  font-size: 12.5px;
  color: var(--ink);
  padding-left: 16px;
  position: relative;
}
.service-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold-text);
  font-weight: 700;
  font-size: 11px;
}
.service-card .service-cta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.service-card .service-cta:hover {
  color: var(--near-black);
}

/* Social proof */
.proof {
  background: var(--near-black);
  color: #fff;
}
.proof .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.proof .stat {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 30px 16px;
}
.proof .stat .n {
  font-size: 34px;
  font-weight: 800;
  color: var(--gold);
}
.proof .stat .l {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.proof .reviews-wrap {
  display: block;
  margin-top: 44px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.review-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-card .stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
}
.review-card .quote {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
}
.review-card .reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}
.review-card .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--near-black);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-card .who {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.review-card .meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.proof .copy h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  margin-bottom: 12px;
}
.proof .copy p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}

/* About / Nosotros */
.about .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.about p {
  color: var(--ink);
  font-size: 14.5px;
  margin-bottom: 14px;
  max-width: 560px;
}
.about .section-head {
  margin-bottom: 18px;
}
.about-card .divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}
.about-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  background: var(--bg-soft);
}
.about-card .avatar-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  margin-bottom: 16px;
  border: 3px solid var(--gold);
  box-shadow: 0 10px 24px -10px rgba(20, 16, 8, 0.4);
}
.about-card .role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  font-weight: 700;
  margin-bottom: 4px;
}
.about-card .who {
  font-size: 18px;
  font-weight: 800;
  color: var(--near-black);
  margin-bottom: 10px;
}
.about-card .years {
  font-size: 13px;
  color: var(--muted);
}

/* Cross-promo: Inmobiliaria */
.cross-promo {
  background: var(--near-black);
}
.cross-promo-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cross-promo-card .icon {
  width: 40px;
  height: 40px;
  color: var(--gold);
  flex-shrink: 0;
}
.cross-promo-card .copy {
  flex: 1;
  min-width: 240px;
}
.cross-promo-card h2 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.cross-promo-card p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
}
.btn-gold-outline {
  border: 1.5px solid var(--gold);
  color: var(--gold);
  white-space: nowrap;
}
.btn-gold-outline:hover {
  background: var(--gold);
  color: var(--near-black);
  border-color: var(--gold);
}

/* Visitanos */
.visit {
  background: #fff;
}
.visit-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.visit-photo {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.visit-copy .eyebrow {
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.visit-copy h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 12px;
}
.visit-copy p {
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 6px;
}
.visit-copy .hours {
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 760px) {
  .visit-wrap {
    grid-template-columns: 1fr;
  }
}

/* Contact form */
.contact {
  background: var(--bg-soft);
}
.contact-form {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 14px;
  transition: border-color 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold-soft);
}
.contact-form textarea {
  resize: vertical;
}
.contact-form button {
  align-self: flex-start;
}
@media (max-width: 600px) {
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* CTA banner */
.cta-banner {
  background: var(--gold);
  color: var(--near-black);
}
.cta-banner .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 34px 20px;
}
.cta-banner h2 {
  font-size: 20px;
  font-weight: 800;
}
.cta-banner p {
  font-size: 13px;
  color: rgba(20, 20, 20, 0.7);
  margin-top: 4px;
}
.cta-banner .btn-whatsapp {
  background: var(--near-black);
  color: #fff;
}

/* Footer */
footer.site {
  background: var(--near-black);
  color: rgba(255, 255, 255, 0.6);
}
footer.site .wrap {
  padding: 48px 20px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}
footer.site h3 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
footer.site p,
footer.site li {
  font-size: 13.5px;
  line-height: 1.9;
}
footer .bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 12px;
  padding: 16px 20px;
  /* 0.4 measured ~3.8:1 on --near-black, below WCAG AA (4.5:1) for this
     font-size. 0.55 keeps it visually secondary while staying legible. */
  color: rgba(255, 255, 255, 0.55);
}
.mr-banner {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
  padding: 8px 20px 64px;
  font-size: 11px;
  /* Non-intrusive per the Sistema MR banner clause, but still needs to meet
     WCAG AA contrast — 0.3 measured ~2.7:1, well under the minimum. */
  color: rgba(255, 255, 255, 0.55);
}
.mr-banner a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: rgba(255, 255, 255, 0.7);
}
.mr-banner a:hover {
  color: #fff;
}

/* Floating WhatsApp */
.wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* Tinted with the button's own hue instead of a generic black shadow */
  box-shadow: 0 8px 20px -4px rgba(10, 60, 30, 0.45);
}
.wa-float:hover {
  filter: brightness(0.95);
}

@media (max-width: 760px) {
  .proof .wrap,
  .about .wrap {
    grid-template-columns: 1fr;
  }
  .wa-float span.label {
    display: none;
  }
  header.site .wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav-cta {
    font-size: 11px;
    padding: 9px 14px;
    white-space: normal;
  }
}

/* ==========================================================================
   Motion
   One authored moment (the hero's entrance, cascading into the trust strip
   settling into place) plus quiet supporting reveals for card lists as they
   scroll into view. Nothing loops, nothing bounces. Gated two ways so a
   failed script or a reduced-motion preference always leaves content
   visible: the reveal styles only exist under html.js, and the whole block
   only exists under prefers-reduced-motion: no-preference.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroIn {
    from {
      opacity: 0;
      transform: translateY(32px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes heroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .hero-copy .eyebrow,
  .hero-copy h1 .line,
  .hero-copy p.lead,
  .hero-copy .cta-row {
    animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-bg {
    animation: heroFadeIn 1.4s ease-out both;
  }
  .hero-copy .eyebrow {
    animation-delay: 0ms;
  }
  .hero-copy h1 .line-1 {
    animation-delay: 120ms;
  }
  .hero-copy h1 .line-2 {
    animation-delay: 280ms;
  }
  .hero-copy p.lead {
    animation-delay: 440ms;
  }
  .hero-copy .cta-row {
    animation-delay: 560ms;
  }
  .trust-strip {
    animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
  }

  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  html.js .reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }
  html.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
  html.js .reveal-stagger.is-visible > *:nth-child(n + 6) { transition-delay: 340ms; }
}