/* ============================================================
   RODCO REAL ESTATE — Campaign Landing Pages
   Shared stylesheet (modular). Mobile-first.
   ------------------------------------------------------------
   Architecture notes for future growth:
   - All design tokens live in :root. Change brand here once.
   - Components are namespaced (.rd-*) to avoid collisions when
     embedding inside a larger CMS / hosting template.
   - Each page section uses a <section class="rd-section" data-module="...">
     wrapper so new modules can be added/removed without touching others.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette: warm sand + deep teal-green + gold accent (Coral Gables / Miami refined) */
  --rd-ink:        #14201d;   /* near-black green for text */
  --rd-ink-soft:   #3a4a45;
  --rd-bg:         #f6f2ea;   /* warm sand background */
  --rd-bg-alt:     #efe8db;
  --rd-surface:    #ffffff;
  --rd-deep:       #0f3b34;   /* deep teal-green (sections / hero) */
  --rd-deep-2:     #0a2a25;
  --rd-gold:       #b78a4a;   /* refined gold accent */
  --rd-gold-soft:  #d8b87f;
  --rd-line:       #e2d9c8;
  --rd-whatsapp:   #1faa55;
  --rd-whatsapp-d: #178a44;

  /* Typography */
  --rd-display: "Fraunces", Georgia, "Times New Roman", serif;
  --rd-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --rd-s1: 0.5rem;
  --rd-s2: 1rem;
  --rd-s3: 1.5rem;
  --rd-s4: 2.5rem;
  --rd-s5: 4rem;
  --rd-s6: 6rem;

  --rd-radius: 14px;
  --rd-radius-lg: 22px;
  --rd-maxw: 1140px;
  --rd-shadow: 0 18px 50px -22px rgba(15, 59, 52, 0.45);
  --rd-shadow-sm: 0 8px 24px -14px rgba(15, 59, 52, 0.4);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--rd-body);
  color: var(--rd-ink);
  background: var(--rd-bg);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--rd-display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }

/* ---------- Layout helpers ---------- */
.rd-wrap { width: 100%; max-width: var(--rd-maxw); margin: 0 auto; padding: 0 var(--rd-s3); }
.rd-section { padding: var(--rd-s5) 0; position: relative; }
.rd-section--tight { padding: var(--rd-s4) 0; }
.rd-eyebrow {
  font-family: var(--rd-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--rd-gold);
  margin: 0 0 var(--rd-s2);
}
.rd-lead { font-size: 1.08rem; color: var(--rd-ink-soft); max-width: 56ch; }

/* ---------- Top bar ---------- */
.rd-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,242,234,0.86);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rd-line);
}
.rd-topbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem var(--rd-s3); max-width: var(--rd-maxw); margin: 0 auto; }
.rd-brand { display: flex; align-items: baseline; gap: 0.5rem; }
.rd-brand__mark { font-family: var(--rd-display); font-size: 1.25rem; font-weight: 600; color: var(--rd-deep); letter-spacing: -0.02em; }
.rd-brand__mark span { color: var(--rd-gold); }
.rd-brand__sub { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rd-ink-soft); }
.rd-topbar__cta { display: none; }
.rd-lang { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--rd-ink-soft); display: flex; gap: 0.4rem; align-items: center; }
.rd-lang a { padding: 0.25rem 0.5rem; border-radius: 8px; font-weight: 700; }
.rd-lang a.is-active { background: var(--rd-deep); color: #fff; }

/* ---------- Hero ---------- */
.rd-hero {
  position: relative;
  background: linear-gradient(160deg, var(--rd-deep) 0%, var(--rd-deep-2) 100%);
  color: #f4efe6;
  overflow: hidden;
}
.rd-hero::after {
  /* subtle texture / glow */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(183,138,74,0.28), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(31,170,85,0.12), transparent 60%);
  pointer-events: none;
}
.rd-hero__inner { position: relative; z-index: 2; padding: var(--rd-s5) var(--rd-s3) var(--rd-s5); max-width: var(--rd-maxw); margin: 0 auto; }
.rd-hero__eyebrow { color: var(--rd-gold-soft); }
.rd-hero h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); color: #fdfaf3; max-width: 16ch; }
.rd-hero__sub { margin-top: var(--rd-s3); font-size: clamp(1rem, 3.4vw, 1.18rem); color: #d9d2c5; max-width: 48ch; }
.rd-hero__media {
  margin-top: var(--rd-s4);
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--rd-shadow);
  aspect-ratio: 16/10;
  background: rgba(255,255,255,0.04);
}
.rd-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.rd-trust { margin-top: var(--rd-s3); font-size: 0.85rem; color: #c7bfb0; display: flex; align-items: center; gap: 0.5rem; }
.rd-trust::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-whatsapp); box-shadow: 0 0 0 4px rgba(31,170,85,0.25); }

/* ---------- CTA button group ---------- */
.rd-cta-group { display: flex; flex-direction: column; gap: 0.7rem; margin-top: var(--rd-s4); }
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--rd-body); font-weight: 800; font-size: 1rem;
  padding: 1rem 1.4rem; border-radius: var(--rd-radius);
  border: 1px solid transparent; cursor: pointer; width: 100%;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.rd-btn:active { transform: scale(0.985); }
.rd-btn svg { width: 20px; height: 20px; flex: none; }
.rd-btn--wa { background: var(--rd-whatsapp); color: #fff; box-shadow: 0 12px 28px -12px rgba(31,170,85,0.7); }
.rd-btn--wa:hover { background: var(--rd-whatsapp-d); }
.rd-btn--solid { background: var(--rd-gold); color: #1c1408; }
.rd-btn--solid:hover { background: var(--rd-gold-soft); }
.rd-btn--ghost { background: transparent; color: #f4efe6; border-color: rgba(255,255,255,0.35); }
.rd-btn--ghost:hover { background: rgba(255,255,255,0.08); }
.rd-btn--row { display: flex; }
.rd-cta-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.7rem; }
.rd-cta-secondary .rd-btn { font-size: 0.92rem; padding: 0.85rem 1rem; }

/* On light sections, ghost buttons need dark text */
.rd-onlight .rd-btn--ghost { color: var(--rd-deep); border-color: var(--rd-line); }
.rd-onlight .rd-btn--ghost:hover { background: var(--rd-bg-alt); }

/* ---------- Section headings ---------- */
.rd-section h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--rd-deep); max-width: 20ch; }
.rd-section--dark { background: var(--rd-deep); color: #ece6da; }
.rd-section--dark h2 { color: #fdfaf3; }
.rd-section--dark .rd-lead { color: #c7bfb0; }
.rd-section--alt { background: var(--rd-bg-alt); }

/* ---------- Problem list ---------- */
.rd-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--rd-s3); }
.rd-chip {
  font-size: 0.82rem; font-weight: 700; padding: 0.5rem 0.85rem;
  background: var(--rd-surface); border: 1px solid var(--rd-line);
  border-radius: 999px; color: var(--rd-ink-soft);
}
.rd-section--dark .rd-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #d9d2c5; }

/* ---------- Benefits grid ---------- */
.rd-grid { display: grid; grid-template-columns: 1fr; gap: var(--rd-s2); margin-top: var(--rd-s4); }
.rd-card {
  background: var(--rd-surface); border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius); padding: var(--rd-s3);
  box-shadow: var(--rd-shadow-sm);
}
.rd-card__ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--rd-bg-alt); color: var(--rd-deep); margin-bottom: var(--rd-s2); }
.rd-card__ic svg { width: 22px; height: 22px; }
.rd-card h3 { font-size: 1.12rem; color: var(--rd-deep); margin-bottom: 0.35rem; }
.rd-card p { margin: 0; font-size: 0.95rem; color: var(--rd-ink-soft); }

/* ---------- Audience ---------- */
.rd-audience { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: var(--rd-s4); }
.rd-audience__item {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: var(--rd-s2) var(--rd-s3); background: var(--rd-surface);
  border: 1px solid var(--rd-line); border-radius: var(--rd-radius);
}
.rd-audience__item svg { width: 22px; height: 22px; color: var(--rd-gold); flex: none; margin-top: 2px; }
.rd-audience__item p { margin: 0; font-size: 0.98rem; }

/* ---------- Process steps ---------- */
.rd-steps { display: grid; grid-template-columns: 1fr; gap: var(--rd-s3); margin-top: var(--rd-s4); counter-reset: step; }
.rd-step { position: relative; padding-left: 3.6rem; }
.rd-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--rd-gold); color: #1c1408;
  font-family: var(--rd-display); font-weight: 600; font-size: 1.2rem;
  display: grid; place-items: center;
}
.rd-step h3 { font-size: 1.1rem; color: var(--rd-deep); margin-bottom: 0.2rem; }
.rd-section--dark .rd-step h3 { color: #fdfaf3; }
.rd-step p { margin: 0; color: var(--rd-ink-soft); font-size: 0.96rem; }
.rd-section--dark .rd-step p { color: #c7bfb0; }

/* ---------- Form ---------- */
.rd-formwrap { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-radius-lg); padding: var(--rd-s4) var(--rd-s3); box-shadow: var(--rd-shadow); margin-top: var(--rd-s4); }
.rd-field { margin-bottom: var(--rd-s2); }
.rd-field label { display: block; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; color: var(--rd-ink); margin-bottom: 0.35rem; }
.rd-field input, .rd-field select, .rd-field textarea {
  width: 100%; font-family: var(--rd-body); font-size: 1rem; color: var(--rd-ink);
  padding: 0.8rem 0.9rem; border: 1px solid var(--rd-line); border-radius: 11px;
  background: var(--rd-bg); transition: border-color .15s ease, box-shadow .15s ease;
}
.rd-field input:focus, .rd-field select:focus, .rd-field textarea:focus {
  outline: none; border-color: var(--rd-gold); box-shadow: 0 0 0 3px rgba(183,138,74,0.18); background: #fff;
}
.rd-field textarea { min-height: 92px; resize: vertical; }
.rd-microcopy { font-size: 0.82rem; color: var(--rd-ink-soft); margin-top: var(--rd-s2); text-align: center; }
.rd-form-ok { display: none; padding: var(--rd-s3); background: rgba(31,170,85,0.1); border: 1px solid rgba(31,170,85,0.4); border-radius: var(--rd-radius); color: var(--rd-whatsapp-d); font-weight: 700; text-align: center; }
.rd-form-ok.is-visible { display: block; }

/* ---------- Final CTA ---------- */
.rd-finalcta { text-align: center; }
.rd-finalcta .rd-cta-group { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ---------- Sticky mobile action bar ---------- */
.rd-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px; background: var(--rd-line);
  border-top: 1px solid var(--rd-line);
  box-shadow: 0 -10px 30px -20px rgba(0,0,0,0.4);
}
.rd-sticky a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0.6rem 0.4rem; background: var(--rd-surface);
  font-size: 0.7rem; font-weight: 800; color: var(--rd-deep);
}
.rd-sticky a svg { width: 20px; height: 20px; }
.rd-sticky a.is-wa { background: var(--rd-whatsapp); color: #fff; }

/* ---------- Footer / legal ---------- */
.rd-footer { background: var(--rd-deep-2); color: #b9c4bf; padding: var(--rd-s5) 0 calc(var(--rd-s6) + 1rem); }
.rd-footer h4 { font-family: var(--rd-display); color: #fff; font-size: 1.2rem; margin: 0 0 0.4rem; font-weight: 600; }
.rd-footer__office { font-size: 0.92rem; line-height: 1.7; }
.rd-footer__office strong { color: #e7e0d3; }
.rd-legal { margin-top: var(--rd-s3); padding-top: var(--rd-s3); border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.76rem; line-height: 1.65; color: #8d9994; }
.rd-realtor-logo { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7e8a85; margin-top: var(--rd-s2); }

/* ---------- Reveal on scroll ---------- */
.rd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rd-reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Responsive — tablet & up
   ============================================================ */
@media (min-width: 720px) {
  body { font-size: 18px; }
  .rd-hero__inner { padding: var(--rd-s6) var(--rd-s3); }
  .rd-cta-group { flex-direction: row; flex-wrap: wrap; }
  .rd-cta-group .rd-btn--wa { flex: 1 1 100%; }
  .rd-cta-secondary { display: contents; }
  .rd-cta-secondary .rd-btn { flex: 1; }
  .rd-grid { grid-template-columns: repeat(2, 1fr); }
  .rd-audience { grid-template-columns: repeat(2, 1fr); }
  .rd-steps { grid-template-columns: repeat(3, 1fr); }
  .rd-topbar__cta { display: inline-flex; width: auto; padding: 0.6rem 1.1rem; font-size: 0.85rem; }
  .rd-sticky { display: none; }
  .rd-footer { padding-bottom: var(--rd-s6); }
  .rd-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--rd-s4); }
}

@media (min-width: 1000px) {
  .rd-grid { grid-template-columns: repeat(3, 1fr); }
  .rd-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--rd-s5); align-items: center; }
  .rd-hero__media { margin-top: 0; aspect-ratio: 4/5; }
  .rd-hero h1 { font-size: clamp(2.6rem, 4vw, 3.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .rd-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Tropical (sobrio) accents + image utilities
   ============================================================ */
.rd-img { width:100%; height:100%; object-fit:cover; display:block; }
.rd-figure { border-radius: var(--rd-radius-lg); overflow:hidden; border:1px solid var(--rd-line); box-shadow: var(--rd-shadow-sm); background: var(--rd-bg-alt); }
.rd-figure--16x9 { aspect-ratio:16/9; }
.rd-figure--4x3  { aspect-ratio:4/3; }
.rd-figure--wide { aspect-ratio:21/9; }

/* Placeholder for images the client will upload later */
.rd-ph {
  position:relative; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, rgba(15,59,52,0.06), rgba(183,138,74,0.10)),
    repeating-linear-gradient(45deg, var(--rd-bg-alt) 0 14px, #e9e0d0 14px 28px);
  color: var(--rd-ink-soft); text-align:center; padding:1.2rem;
}
.rd-ph span { font-size:0.78rem; font-weight:700; letter-spacing:0.03em; max-width:30ch; }
.rd-ph small { display:block; font-weight:600; opacity:0.7; margin-top:0.3rem; font-size:0.7rem; }

/* Tropical horizon band behind dark sections (sober) */
.rd-tropic { position:relative; overflow:hidden; }
.rd-tropic::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background: linear-gradient(180deg, transparent, rgba(31,170,85,0.10));
  pointer-events:none;
}
/* Palm silhouette decoration (inline svg via mask not needed; use ::after emoji-free shape) */
.rd-palm { position:absolute; bottom:-2px; opacity:0.16; pointer-events:none; color: var(--rd-deep); }
.rd-palm svg { width:120px; height:auto; display:block; }
.rd-palm--l { left:-10px; }
.rd-palm--r { right:-10px; transform: scaleX(-1); }

/* Hero overline location tag */
.rd-loc { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--rd-gold-soft); }
.rd-loc svg { width:15px; height:15px; }

/* Agent card (Alvaro) */
.rd-agent { display:flex; gap:1rem; align-items:center; margin-top: var(--rd-s4); padding: var(--rd-s2); background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius: var(--rd-radius); }
.rd-agent__photo { width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--rd-gold-soft); }
.rd-agent__photo img { width:100%; height:100%; object-fit:cover; }
.rd-agent__name { font-weight:800; color:#fdfaf3; font-size:0.98rem; }
.rd-agent__role { font-size:0.8rem; color:#c7bfb0; }
.rd-agent__team { font-size:0.78rem; color: var(--rd-gold-soft); margin-top:2px; }

/* Strip of zone photos */
.rd-zones { display:grid; grid-template-columns: repeat(2,1fr); gap:0.75rem; margin-top: var(--rd-s4); }
.rd-zone { position:relative; border-radius: var(--rd-radius); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--rd-line); }
.rd-zone .rd-img { transition: transform .5s ease; }
.rd-zone:hover .rd-img { transform: scale(1.06); }
.rd-zone__label { position:absolute; left:0; right:0; bottom:0; padding:0.7rem 0.8rem; color:#fff; font-weight:800; font-size:0.92rem; background:linear-gradient(transparent, rgba(10,42,37,0.85)); }
@media (min-width:720px){ .rd-zones { grid-template-columns: repeat(4,1fr);} }

/* Disclaimer toggle (compact) */
.rd-disclaimer { font-size:0.74rem; line-height:1.6; color:#8d9994; }

/* ---------- Logo de imagen ---------- */
.rd-brand__img { height: 16px; width: auto; display: block; }
@media (min-width: 720px){ .rd-brand__img { height: 18px; } }
.rd-hub__logo { height: 20px; width:auto; display:block; }
@media (min-width:760px){ .rd-hub__logo { height: 24px; } }

/* ---------- Botón acceso realtors (footer hub) ---------- */
.rd-hub__realtor { display:inline-flex; align-items:center; gap:.45rem; margin-top:.2rem;
  font-size:.78rem; font-weight:800; letter-spacing:.04em; color:#cdbfa6;
  border:1px solid rgba(255,255,255,.22); padding:.45rem .85rem; border-radius:999px;
  transition:background .2s ease,border-color .2s ease,color .2s ease; }
.rd-hub__realtor:hover { background:rgba(255,255,255,.1); border-color:var(--rd-gold-soft); color:#fff; }
.rd-hub__realtor svg { width:14px; height:14px; }

/* ---------- Disclaimer de consentimiento SMS ---------- */
.rd-sms-consent { font-size: 0.72rem; line-height: 1.5; color: var(--rd-ink-soft); margin-top: var(--rd-s2); padding-top: var(--rd-s2); border-top: 1px solid var(--rd-line); }
.rd-sms-consent a { color: var(--rd-gold); text-decoration: underline; }