/* ============================================================
   HERO — chamada principal e mockup 'casa' animado
   ============================================================ */

.hero{ padding-top:76px; padding-bottom:64px; }
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
  padding-top:56px;
}
@media (max-width:960px){
  .hero{ padding-top:24px; }
  .hero .wrap{ grid-template-columns:1fr; padding-top:16px; gap:48px; }
}

.hero h1{
  font-size:clamp(34px, 4.6vw, 54px);
  color:var(--ink);
}
.hero h1 em{
  font-style:normal;
  color:var(--brand);
  position:relative;
}
.hero-sub{
  margin:22px 0 32px;
  font-size:18px;
  color:var(--ink-soft);
  max-width:46ch;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }

.trust-row{
  display:flex; flex-wrap:wrap; gap:22px 30px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.trust-item{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--ink-soft);
}
.trust-item svg{ flex-shrink:0; color:var(--brand); }

/* ---------- House frame (signature element) ---------- */
.house-frame{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  transform:rotate(-1deg);
}
@media (max-width:960px){ .house-frame{ transform:none; } }
.house-frame .roof{
  width:0; height:0;
  border-left:190px solid transparent;
  border-right:190px solid transparent;
  border-bottom:104px solid var(--brand-dark);
}
.house-frame .chimney{
  position:absolute;
  top:54px; right:calc(50% - 135px);
  width:26px; height:50px;
  background:var(--brand-dark);
  border-radius:2px 2px 0 0;
}
.house-frame .body{
  width:380px; max-width:100%;
  background:var(--paper);
  border:3px solid var(--brand-dark);
  border-top:none;
  border-radius:0 0 20px 20px;
  box-shadow:var(--shadow);
  padding:34px 34px 40px;
}
@media (max-width:480px){
  .house-frame .roof{
    border-left-width:140px; border-right-width:140px; border-bottom-width:78px;
  }
  .house-frame .chimney{
    top:40px; right:calc(50% - 100px);
    width:19px; height:37px;
  }
  .house-frame .body{ width:280px; padding:26px 26px 30px; }
}
.site-nav{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.site-logo{ width:17px; height:17px; border-radius:6px; background:var(--brand); flex-shrink:0; }
.site-navline{ height:6px; width:27px; border-radius:3px; background:var(--line-strong); }
.site-navline.short{ width:16px; }
.site-navcta{ margin-left:auto; width:54px; height:15px; border-radius:999px; background:var(--accent2); }
.site-heading{ display:block; height:13px; width:82%; border-radius:5px; background:var(--ink); opacity:.82; margin-bottom:11px; }
.site-heading.short{ width:56%; }
.site-sub{ display:block; height:7px; width:70%; border-radius:3px; background:var(--line-strong); margin-bottom:5px; }
.site-sub.shorter{ width:46%; margin-bottom:26px; }
.site-cta-wrap{ position:relative; display:inline-block; }
.site-cta{ display:block; width:140px; height:36px; border-radius:10px; background:var(--brand); }
.click-ripple{
  position:absolute; right:-14px; bottom:-14px;
  width:38px; height:38px;
  border:2.5px solid var(--accent);
  background:rgba(212,178,216,0.25);
  border-radius:50%;
  opacity:0;
  animation:ripple 1.8s ease-out infinite;
}
/* segunda onda, defasada, para o clique ficar mais visivel */
.site-cta-wrap::after{
  content:'';
  position:absolute; right:-14px; bottom:-14px;
  width:38px; height:38px;
  border:2px solid var(--accent);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:ripple 1.8s ease-out 0.35s infinite;
}
@keyframes ripple{
  0%{ opacity:1; transform:scale(.35); }
  75%,100%{ opacity:0; transform:scale(1.55); }
}
.cursor{
  position:absolute; right:-18px; bottom:-18px;
  width:30px; height:30px;
  background:var(--accent-dark);
  clip-path:polygon(15% 0%, 15% 78%, 34% 62%, 53% 100%, 67% 92%, 48% 57%, 84% 57%);
  filter:drop-shadow(0 3px 5px rgba(93,78,96,0.45));
  animation:tap 1.8s ease-out infinite;
}
/* pequeno movimento de "apertar", no mesmo ritmo da onda */
@keyframes tap{
  0%{ transform:translate(-4px,-4px); }
  9%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}