/* ==========================================================================
   Minha Casa Moz — Landing Page
   Design tokens: vermelho de marca sobre branco/cinza muito claro,
   serif "Bitter" (títulos, robusta, evoca construção/estrutura) +
   "Plus Jakarta Sans" (texto, limpa e legível em PT).
   ========================================================================== */

:root{
  /* Cor */
  --red: #C41E3A;
  --red-deep: #971731;
  --red-tint: #FBE9EC;
  --red-tint-2: #F6D9DD;
  --ink: #1C1B1F;
  --ink-soft: #2C2A30;
  --gray-700: #4C4A52;
  --gray-500: #79767E;
  --gray-300: #C9C6CB;
  --line: #E7E3E2;
  --off-white: #F6F3F2;
  --white: #FFFFFF;

  /* Tipografia */
  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(28,27,31,.08);
  --shadow-md: 0 10px 30px rgba(28,27,31,.10);
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,dl,dd,dt,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select{ font:inherit; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--font-display); color:var(--ink); line-height:1.15; font-weight:700; }
h1{ font-size:clamp(2.3rem,4.6vw + 1rem,3.7rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.7rem,2.6vw + 1rem,2.5rem); letter-spacing:-.005em; }
h3{ font-size:1.2rem; }

p{ color:var(--gray-700); }

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

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

.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.icon{ width:24px; height:24px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }

.section{ padding-block:clamp(3.6rem,7vw,6.4rem); }
.section--alt{ background:var(--off-white); }
.section--dark{ background:var(--ink); color:var(--white); }
.section--dark p{ color:#D8D6DA; }
.section--dark h2{ color:var(--white); }

.section-head{ max-width:660px; margin:0 auto 3rem; text-align:center; }
.section-head p{ font-size:1.05rem; margin-top:.9rem; }
.section-head.is-left{ margin-inline:0; text-align:left; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--red);
  margin-bottom:.85rem;
}
.section--dark .eyebrow{ color:#FF8FA0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm);
  font-weight:700; font-size:.96rem; border:2px solid transparent;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn .icon{ width:19px; height:19px; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--red); color:var(--white); }
.btn-primary:hover{ background:var(--red-deep); }
.btn-outline{ background:transparent; border-color:currentColor; color:inherit; }
.btn-outline:hover{ background:rgba(0,0,0,.05); }
.section--dark .btn-outline:hover{ background:rgba(255,255,255,.1); }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-white:hover{ background:var(--red-tint); color:var(--red-deep); }
.btn-ghost{ padding:.5rem .3rem; font-weight:600; color:var(--ink); }
.btn-ghost:hover{ color:var(--red); }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.02rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:var(--header-h); }

.logo{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; color:var(--ink); display:flex; align-items:center; gap:.4rem; flex:none; }
.logo .logo-mark{ color:var(--red); }

.main-nav{ display:none; align-items:center; gap:1.9rem; }
.main-nav a{ font-weight:600; font-size:.94rem; color:var(--ink-soft); padding:.4rem 0; position:relative; }
.main-nav a:hover{ color:var(--red); }

.header-ctas{ display:none; align-items:center; gap:.8rem; }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
}
.nav-toggle .icon{ width:20px; height:20px; }

.mobile-nav{
  display:none; flex-direction:column; gap:.2rem;
  border-top:1px solid var(--line); background:var(--white);
  padding:.6rem 0 1.1rem;
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ padding:.7rem 24px; font-weight:600; border-radius:var(--radius-sm); }
.mobile-nav a:hover{ background:var(--off-white); }
.mobile-nav .mobile-nav-ctas{ display:flex; gap:.7rem; padding:.7rem 24px 0; }

@media (min-width:960px){
  .main-nav{ display:flex; }
  .header-ctas{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5rem) clamp(3.6rem,7vw,6rem); }
.hero-glow{
  position:absolute; inset:-10% -10% auto auto; width:640px; height:640px;
  background:radial-gradient(circle, var(--red-tint) 0%, rgba(251,233,236,0) 68%);
  z-index:0; pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; display:grid; gap:2.8rem; align-items:center; }
.hero-copy{ max-width:560px; }
.hero-lead{ font-size:1.12rem; margin-top:1.15rem; max-width:52ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-art{ justify-self:center; width:100%; max-width:420px; }

@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.05fr .95fr; gap:3.5rem; }
  .hero-art{ justify-self:end; max-width:none; }
}

/* ---------- Paths (dois caminhos) ---------- */
.paths-grid{ display:grid; gap:1.4rem; }
.path-card{
  padding:2.4rem 2.1rem; border-radius:var(--radius); background:var(--white);
  border:1px solid var(--line);
}
.path-card--dark{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.path-card--dark p{ color:#D8D6DA; }
.path-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--red-tint); color:var(--red); margin-bottom:1.3rem;
}
.path-card--dark .path-icon{ background:rgba(255,255,255,.12); color:var(--white); }
.path-card h2{ font-size:1.5rem; margin-bottom:.7rem; }
.path-card p{ margin-bottom:1.6rem; }

@media (min-width:760px){ .paths-grid{ grid-template-columns:1fr 1fr; gap:1.6rem; } }

/* ---------- Sobre / fact sheet ---------- */
.about-grid{ display:grid; gap:2.6rem; }
.about-copy p + p{ margin-top:1rem; }
.fact-sheet{
  background:var(--off-white); border-radius:var(--radius); padding:1.9rem 2.1rem;
  display:grid; gap:1rem;
}
.fact-sheet div{ display:grid; grid-template-columns:150px 1fr; gap:1rem; padding-block:.55rem; border-bottom:1px solid var(--line); }
.fact-sheet div:last-child{ border-bottom:0; padding-bottom:0; }
.fact-sheet dt{ font-weight:700; font-size:.82rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }
.fact-sheet dd{ font-weight:600; font-size:.96rem; }

@media (min-width:900px){ .about-grid{ grid-template-columns:1.1fr .9fr; align-items:start; } }

/* ---------- Como funciona ---------- */
.steps-grid{ display:grid; gap:1.6rem; counter-reset:step; }
.step{ position:relative; padding:2rem 1.7rem 1.9rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.step-num{ font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--red); margin-bottom:1.1rem; display:block; }
.step-icon{ width:46px; height:46px; border-radius:var(--radius-sm); background:var(--red-tint); color:var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.step h3{ margin-bottom:.5rem; }
.steps-cta{ text-align:center; margin-top:2.6rem; }

@media (min-width:760px){ .steps-grid{ grid-template-columns:repeat(3,1fr); gap:1.4rem; } }

/* ---------- Tipos de imóveis ---------- */
.types-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(2,1fr); }
.type-card{
  padding:1.7rem 1.4rem; border-radius:var(--radius); border:1px solid var(--line);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.type-card:hover{ border-color:var(--red); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.type-icon{ width:44px; height:44px; border-radius:50%; background:var(--off-white); color:var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.type-card h3{ font-size:1.02rem; margin-bottom:.35rem; }
.type-card p{ font-size:.92rem; }

@media (min-width:760px){ .types-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .types-grid{ grid-template-columns:repeat(5,1fr); } }

/* ---------- Intent sections (comprar / arrendar) ---------- */
.intent-section .section-head{ margin-bottom:1.8rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.1rem; }
.chip{
  display:inline-flex; align-items:center; padding:.45rem 1rem; border-radius:100px;
  border:1px solid var(--line); background:var(--white); font-size:.86rem; font-weight:600; color:var(--gray-700);
}
.section--alt .chip{ background:var(--white); }
.chip--muted{ color:var(--gray-500); border-color:var(--line); background:transparent; font-weight:500; }
.intent-cta{ text-align:center; }

/* ---------- Local SEO (Maputo / Matola) ---------- */
.local-grid{ display:grid; gap:2.2rem; }
.local-copy p{ margin-bottom:1.6rem; }
.neighborhoods{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.7rem; }
@media (min-width:900px){ .local-grid{ grid-template-columns:1fr 1fr; align-items:center; } }

.regions-band .container{ text-align:center; }
.regions-band p.lead{ max-width:640px; margin:0 auto 1.6rem; }
.regions-list{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; }

/* ---------- Android ---------- */
.android-grid{ display:grid; gap:2.6rem; align-items:center; }
.android-copy .btn{ margin-top:.4rem; }
.android-features{ margin-top:1.6rem; display:grid; gap:.6rem; }
.android-features li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color:#D8D6DA; }
.android-features .icon{ color:#FF8FA0; margin-top:.15rem; }
.android-visual{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; justify-self:center; }
.qr-box{
  background:var(--white); padding:14px; border-radius:var(--radius-sm);
  width:150px; height:150px; display:flex; align-items:center; justify-content:center;
}
.qr-box img, .qr-box canvas{ width:100%; height:100%; }
.qr-caption{ font-size:.8rem; color:#B9B6BC; text-align:center; }

@media (min-width:900px){ .android-grid{ grid-template-columns:1.15fr .85fr; } }

/* ---------- Web app ---------- */
.webapp-section .container{ display:grid; gap:2rem; align-items:center; text-align:center; }
.webapp-section .section-head{ margin-bottom:1.6rem; }

/* ---------- Proprietários ---------- */
.owners-grid{ display:grid; gap:2.4rem; align-items:center; }
.owners-list{ display:grid; gap:.85rem; margin:1.7rem 0 2rem; }
.owners-list li{ display:flex; gap:.7rem; align-items:flex-start; font-weight:600; font-size:.96rem; }
.owners-list .icon{ color:var(--red); flex:none; margin-top:.1rem; width:20px; height:20px; }
.owners-visual{ background:var(--off-white); border-radius:var(--radius); padding:2.2rem; }
.owners-visual .path-icon{ margin-bottom:1.1rem; }

@media (min-width:900px){ .owners-grid{ grid-template-columns:1.1fr .9fr; } }

/* ---------- Pesquisa por características ---------- */
.features-grid{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
.feature-card{ padding:1.5rem 1.2rem; text-align:center; border-radius:var(--radius); background:var(--white); border:1px solid var(--line); }
.feature-card .type-icon{ margin:0 auto 1rem; }
.feature-card h3{ font-size:.98rem; }

@media (min-width:760px){ .features-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .features-grid{ grid-template-columns:repeat(6,1fr); } }
@media (min-width:1024px){ .feature-card{ padding:1.5rem .9rem; } }

/* ---------- FAQ ---------- */
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); padding-block:1.25rem; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  font-family:var(--font-display); font-weight:700; font-size:1.06rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; flex:none; width:10px; height:10px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .22s ease; margin-top:-6px;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:6px; }
.faq-item .faq-answer{ margin-top:.85rem; padding-right:1.8rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#C7C5CA; padding-block:3.6rem 2rem; }
.footer-top{ display:grid; gap:2.6rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .logo{ color:var(--white); }
.footer-brand p{ color:#B9B6BC; margin-top:.9rem; max-width:34ch; }
.footer-cols{ display:grid; gap:2rem; grid-template-columns:repeat(2,1fr); }
.footer-col h4{ color:var(--white); font-family:var(--font-body); font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
.footer-col ul{ display:grid; gap:.65rem; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.6rem; font-size:.85rem; color:#948F97; }

@media (min-width:760px){ .footer-top{ grid-template-columns:1.2fr 2fr; } }

/* ---------- Barra fixa mobile ---------- */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:.6rem; padding:.7rem .9rem; background:var(--white);
  border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(28,27,31,.08);
}
.mobile-cta-bar .btn{ flex:1; padding:.8rem 1rem; font-size:.9rem; }
body{ padding-bottom:78px; }

@media (min-width:960px){
  .mobile-cta-bar{ display:none; }
  body{ padding-bottom:0; }
}

/* ---------- Motion & imagens ---------- */
img{ height:auto; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
}