/* Rentareal — Mexican editorial × Apple polish */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Mexican palette — warm, editorial, institutional */
  --cream: #F5EFE3;          /* page background — papel manila */
  --cream-2: #EFE7D5;        /* card / elevated surface */
  --bone: #FBF7EE;
  --ink: #1A1410;            /* primary text — warm near-black */
  --ink-2: #4A3F35;          /* secondary text */
  --ink-3: #8A7B6B;          /* muted */
  --line: rgba(26, 20, 16, 0.14);
  --line-2: rgba(26, 20, 16, 0.08);

  /* Hero hues */
  --terracotta: #C8553D;     /* the signature warm — tile, accents */
  --terracotta-deep: #9E3E2B;
  --cobalt: #1B3A6B;         /* trust, institutional, talavera */
  --cobalt-deep: #0F2548;
  --gold: #C8923E;           /* notary seal, stamp */
  --moss: #4A6B3A;           /* verified, success */
  --rust: #A43B2A;           /* alert / scam */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

/* Talavera tile pattern as a CSS background */
.talavera {
  background-color: var(--cobalt);
  background-image:
    radial-gradient(circle at 25% 25%, rgba(245,239,227,0.18) 0 6px, transparent 7px),
    radial-gradient(circle at 75% 75%, rgba(245,239,227,0.18) 0 6px, transparent 7px),
    radial-gradient(circle at 75% 25%, rgba(200,85,61,0.5) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 75%, rgba(200,85,61,0.5) 0 4px, transparent 5px),
    linear-gradient(45deg, transparent 48%, rgba(245,239,227,0.08) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(245,239,227,0.08) 49% 51%, transparent 52%);
  background-size: 40px 40px;
}

/* Papel picado scallop edge */
.papel-edge {
  height: 18px;
  background:
    radial-gradient(circle at 10px 0, var(--cream) 8px, transparent 9px) 0 0/20px 18px,
    var(--terracotta);
}

/* Hairline borders — primary grouping */
.hair { border: 1px solid var(--line); }
.hair-b { border-bottom: 1px solid var(--line); }
.hair-t { border-top: 1px solid var(--line); }

/* Buttons — Apple polish */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { background: #000; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-cta { background: var(--terracotta); color: var(--bone); }
.btn-cta:hover { background: var(--terracotta-deep); }

/* Verified badge — the sello */
.sello {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--cobalt);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--cobalt);
}
.sello-inner {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--cobalt);
  text-align: center;
  line-height: 1;
}

/* Sello small (in-card) */
.sello-sm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1.5px solid var(--cobalt);
  border-radius: 999px;
  background: rgba(27,58,107,0.06);
  color: var(--cobalt);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.sello-sm-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cobalt); color: var(--bone);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 12px;
}

/* Stamp effect — angled, faded */
.stamp {
  display: inline-block;
  border: 3px solid currentColor;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  transform: rotate(-6deg);
  opacity: 0.85;
  border-radius: 4px;
}

/* Inputs */
.input {
  width: 100%;
  padding: 14px 18px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 15px;
  color: var(--ink);
  transition: border-color 160ms;
}
.input:focus { outline: none; border-color: var(--ink); }

/* Card */
.card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 16px;
}

/* Numbered eyebrow — operator-manual feel */
.numbered { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); }

/* Documentary photo placeholder — warm gradient with grain */
.photo {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(200,85,61,0.4), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(27,58,107,0.35), transparent 60%),
    linear-gradient(135deg, #6B4226, #2A1E14);
  position: relative;
  overflow: hidden;
}
.photo::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* Decorative tile motif */
.tile-divider {
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--terracotta) 0 16px,
      var(--cobalt) 16px 32px,
      var(--gold) 32px 40px,
      var(--cobalt) 40px 56px);
}

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pill-ok { background: rgba(74,107,58,0.12); color: var(--moss); }
.pill-warn { background: rgba(200,146,62,0.15); color: var(--gold); }
.pill-err { background: rgba(164,59,42,0.12); color: var(--rust); }
.pill-info { background: rgba(27,58,107,0.1); color: var(--cobalt); }

/* Highlight quote (founder) */
.highlight-yellow {
  background: linear-gradient(180deg, transparent 50%, #F4D661 50%);
  padding: 0 4px;
}

/* Small icons */
.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Step number circle */
.step-num {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px;
}

/* Phone bezel for renter screens */
.phone-bezel {
  width: 360px; height: 740px;
  background: #1A1410;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.phone-screen {
  width: 100%; height: 100%; background: var(--cream);
  border-radius: 32px; overflow: hidden;
  position: relative;
}

/* =============================================== */
/* MOBILE RESPONSIVENESS — overrides for inline JSX */
/* =============================================== */
@media (max-width: 880px) {
  /* Stack all multi-column grids — broad rule, applies to inline-styled grids */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Crush gigantic section padding */
  section,
  [style*="padding: 96px"],
  [style*="padding: 80px"],
  [style*="padding: 64px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section[style*="padding: 96px"],
  section[style*="padding: 80px"],
  section[style*="padding: 64px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Nav: stack, hide middle links, keep logo + CTA */
  nav {
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  nav > div {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  /* Hide the middle nav links group (the one with How it works / Para inquilinos / etc.) */
  nav > div:nth-child(2) {
    display: none !important;
  }

  /* Hero: tame the giant headline */
  h1 {
    font-size: clamp(36px, 9vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  h2 {
    font-size: clamp(30px, 7vw, 44px) !important;
    line-height: 1.1 !important;
  }
  h3 { font-size: clamp(20px, 5vw, 26px) !important; }

  /* Body text scale */
  body, p, li { font-size: 15px !important; }

  /* Hero illustrations: shrink + move below copy */
  [style*="height: 540"],
  [style*="height:540"],
  [style*="height: 460"],
  [style*="height:460"] {
    height: auto !important;
    min-height: 280px !important;
  }
  [style*="aspect-ratio"] { aspect-ratio: auto !important; }

  /* Floating cards in hero — stack inline, not absolute */
  [style*="position: absolute"][style*="bottom"],
  [style*="position:absolute"][style*="bottom"] {
    position: static !important;
    margin: 12px 0 !important;
  }

  /* Hero stats row — stack to single column */
  [style*="alignItems: 'center'"][style*="gap: 32"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Container padding cap */
  [style*="maxWidth"] { max-width: 100% !important; }

  /* Buttons full width on mobile */
  .btn { width: auto !important; }

  /* Phone bezel — scale down */
  .phone-bezel {
    width: 90vw !important;
    max-width: 360px !important;
    height: auto !important;
    aspect-ratio: 360/740 !important;
  }

  /* FAQ details: padding */
  details summary { gap: 12px !important; }

  /* Footer columns: stack */
  footer [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(32px, 11vw, 44px) !important; }
  section[style*="padding"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}