/* Reset idêntico ao index.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Variáveis idênticas ao index.html */
:root {
  --lime:   #D2F159;
  --ink:    #090B02;
  --olive:  #5F6C26;
  --coal:   #222325;
  --white:  #FFFFFF;
  --grey:   #C6C6C6;
  --bg:     #F5F6F1;
  --border: 2px solid #090B02;
  --sh:     4px 4px 0px #090B02;
  --sh-sm:  3px 3px 0px #090B02;
  --sh-light: 4px 4px 0px #D2F159;
  --r:      2px;
  --content-width: 1180px;
  --page-gutter: 48px;
}

body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

/* ─────────────────────────────────────────
   HERO DA LANDING (específico do service landing)
   ───────────────────────────────────────── */

.landing-page {
  max-width: none;
  margin: 0;
  padding: 0 0 110px;
  overflow-x: hidden;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  width: min(1440px, 100%);
  min-height: 660px;
  margin: 0 auto;
  padding: 74px 48px 58px;
  display: grid;
  grid-template-columns: minmax(320px, 0.74fr) minmax(480px, 1fr);
  align-items: center;
  column-gap: 86px;
  background: var(--bg);
}

.landing-hero-copy {
  max-width: 540px;
  min-width: 0;
}

.landing-breadcrumb {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  background: var(--lime);
  border: var(--border);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.landing-hero h1 {
  max-width: 560px;
  margin-top: 22px;
  font-size: 4rem;
  line-height: 1.04;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 750;
  color: var(--ink);
}

.landing-lead {
  max-width: 540px;
  margin: 20px 0 0;
  color: var(--coal);
  font-size: 1.28rem;
  line-height: 1.45;
  font-weight: 500;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.landing-primary-button,
.landing-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease;
}

.landing-primary-button {
  background: var(--lime);
  color: var(--ink);
}

.landing-secondary-button {
  background: var(--lime);
  color: var(--ink);
  border: 0;
}

.landing-primary-button:hover,
.landing-secondary-button:hover { filter: brightness(0.94); }
.landing-primary-button:active,
.landing-secondary-button:active { transform: scale(0.985); }

/* Blob do hero */
.landing-hero-art {
  position: relative;
  justify-self: end;
  width: min(640px, 100%);
  height: 430px;
  overflow: visible;
}

.landing-hero-figure {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 677 / 363;
  overflow: visible;
}

.landing-hero-shape,
.landing-hero-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.landing-hero-mask {
  z-index: 1;
  pointer-events: none;
}

.landing-hero-image-in-blob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: landing-person-enter 0.85s cubic-bezier(.18,.9,.22,1) 0.08s both;
  filter: saturate(0.98) contrast(1.04);
}

.landing-hero-person {
  position: absolute;
  left: 27%;
  top: -45%;
  z-index: 2;
  width: 49%;
  height: auto;
  display: block;
  pointer-events: none;
  clip-path: inset(0 0 54% 0);
  transform-origin: 50% 100%;
  animation: landing-person-enter 0.85s cubic-bezier(.18,.9,.22,1) 0.08s both;
  will-change: transform;
}

@keyframes landing-person-enter {
  0%   { transform: translateY(52px); }
  100% { transform: translateY(0); }
}

/* ─────────────────────────────────────────
   SEÇÕES — CÓDIGO COLADO DO index.html
   ───────────────────────────────────────── */

/* Wrapper de seção */
.sec {
  width: min(1440px, 100%);
  padding: 96px 48px 88px;
  max-width: none;
  margin: 0 auto;
}

.tag {
  display: inline-block;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 0;
  border: var(--border);
  margin-bottom: 18px;
}

.sec-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.sec-sub {
  font-size: 1rem;
  color: var(--coal);
  opacity: 0.7;
  max-width: 620px;
  line-height: 1.7;
}

/* Como funciona — colado do index.html */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
  margin-top: 42px;
}

.step {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  transition: all 0.08s;
}

.step:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--sh);
}

.step-visual {
  min-height: 178px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.35), transparent 34%),
    repeating-radial-gradient(circle at center, rgba(255,255,255,0.24) 0 1px, transparent 1px 22px),
    var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step:nth-child(2) .step-visual { background-color: #F5F6F1; }
.step:nth-child(3) .step-visual { background-color: #E7F8A7; }

.step-n {
  width: 62px;
  height: 62px;
  background: var(--white);
  border: var(--border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}

.step-copy {
  background: var(--ink);
  color: var(--white);
  min-height: 128px;
  padding: 22px 20px;
}

.step h3 {
  font-size: 1.18rem;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: 0;
}

.step p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}

/* Avaliações — colado do index.html */
.reviews-section {
  background: var(--bg);
  padding: 96px max(48px, calc((100vw - 1440px) / 2));
  max-width: 1440px;
  margin: 0 auto;
}

.reviews-head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

.reviews-head h2 {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.15rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.3px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.review-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.08s;
}

.review-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--sh);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.review-stars {
  color: #F5A000;
  font-size: 0.88rem;
  letter-spacing: 1px;
  line-height: 1;
}

.review-card p {
  font-size: 0.9rem;
  color: var(--coal);
  line-height: 1.65;
  flex: 1;
}

/* Suporte Ágil — colado do index.html */
.support-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px max(48px, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 0.82fr);
  align-items: center;
  gap: clamp(48px, 6vw, 80px);
  background: var(--bg);
}

.support-copy {
  max-width: 560px;
}

.support-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.15rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.support-copy p {
  margin: 18px 0 0;
  color: var(--coal);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  font-weight: 500;
  max-width: 480px;
}

.support-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  min-width: 200px;
  min-height: 52px;
  border: none;
  border-radius: 8px;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease, background-color 160ms ease;
}

.support-cta:hover  { filter: brightness(0.94); }
.support-cta:active { transform: scale(0.985); }

.support-visual {
  position: relative;
  justify-self: end;
  width: min(420px, 100%);
}

.support-blob-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 520;
  overflow: visible;
}

.support-blob-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.support-person-in-blob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.support-blob-wrap.is-visible .support-person-in-blob {
  animation: support-person-rise 1.1s ease-out 0.15s both;
}

@keyframes support-person-rise {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* FAQ — colado do index.html */
.faq-bg {
  background:
    radial-gradient(circle at 86% 14%, rgba(210,241,89,0.36), transparent 18%),
    radial-gradient(circle at 12% 80%, rgba(9,11,2,0.06), transparent 18%),
    var(--bg);
  padding: 96px max(48px, calc((100vw - 1440px) / 2));
}

.faq-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  position: relative;
}

.faq-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.faq-head .sec-title {
  max-width: 760px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: var(--border);
  box-shadow: 3px 3px 0 rgba(9,11,2,0.18);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.faq-item[open] {
  transform: translate(-2px, -2px);
  box-shadow: var(--sh-sm);
}

.faq-item summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  flex: 0 0 auto;
}

.faq-item[open] summary::after {
  content: "-";
  background: var(--ink);
  color: var(--lime);
}

.faq-answer {
  padding: 0 18px 18px;
  color: var(--coal);
  font-size: 0.93rem;
  line-height: 1.65;
  max-width: 920px;
}

/* Download — colado do index.html */
.dl {
  background: var(--lime);
  border-top: var(--border);
  padding: 96px max(48px, calc((100vw - 1440px) / 2));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.dl h2 {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -1px;
  max-width: 1080px;
}

.dl p {
  color: var(--olive);
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 640px;
  line-height: 1.65;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.dl .store-btn {
  display: inline-block;
  border-radius: 8px;
  box-shadow: none;
  text-decoration: none;
  transition: opacity 0.12s ease;
  overflow: hidden;
  line-height: 0;
  background: #000;
}

.dl .store-btn:hover { opacity: 0.86; }

.dl .store-btn img {
  display: block;
  width: 190px;
  max-width: min(190px, calc(100vw - 48px));
  height: auto;
}

.dl-app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 800;
  text-decoration: none;
  background: var(--ink);
  color: var(--lime);
  transition: transform 140ms ease, filter 140ms ease;
}

.dl-app-btn:hover  { filter: brightness(0.94); }
.dl-app-btn:active { transform: scale(0.985); }

/* ─────────────────────────────────────────
   LINKS DE CIDADES (SEO)
   ───────────────────────────────────────── */

.landing-city-links {
  border-top: 1px solid rgba(9,11,2,0.12);
  padding: 36px max(48px, calc((100vw - 1440px) / 2));
  background: var(--bg);
}

.landing-city-links-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.landing-city-links-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(9,11,2,0.42);
  margin-bottom: 14px;
}

.landing-city-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.landing-city-links-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  background: var(--white);
  border: var(--border);
  color: var(--ink);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.1s ease;
}

.landing-city-links-list a:hover { background: var(--lime); }

/* ─────────────────────────────────────────
   STICKY CTA (específico do service landing)
   ───────────────────────────────────────── */

.landing-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 90;
  width: min(920px, calc(100% - 24px));
  min-height: 72px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255,255,255,0.96);
  border: var(--border);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(9,11,2,0.2);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.landing-sticky-visible .landing-sticky-cta {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.landing-sticky-cta div {
  min-width: 0;
  padding-left: 6px;
}

.landing-sticky-cta strong,
.landing-sticky-cta span {
  display: block;
  line-height: 1.2;
}

.landing-sticky-cta strong {
  font-size: 1rem;
  font-weight: 850;
}

.landing-sticky-cta span {
  margin-top: 4px;
  color: rgba(9,11,2,0.55);
  font-size: 0.88rem;
  font-weight: 650;
}

.landing-sticky-cta a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background: var(--lime);
  color: var(--ink);
  transition: filter 140ms ease, transform 140ms ease;
}

.landing-sticky-cta a:hover { filter: brightness(0.94); }
.landing-sticky-cta a:active { transform: scale(0.985); }

body:has(.landing-sticky-cta) .site-footer { padding-bottom: 126px; }

/* ─────────────────────────────────────────
   RESPONSIVO
   ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .landing-hero-image-in-blob,
  .landing-hero-person,
  .support-person-in-blob { animation: none; transform: none; }
}

@media (max-width: 1080px) {
  .landing-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 64px 28px 56px;
  }
  .landing-hero-copy { max-width: 680px; }
  .landing-hero h1   { font-size: 3.2rem; }
  .landing-hero-art  { justify-self: center; width: min(560px, 100%); height: 360px; }
}

@media (max-width: 1040px) {
  .support-section { grid-template-columns: 1fr; padding: 72px 20px; }
  .support-visual   { justify-self: center; width: min(360px, 100%); order: -1; }
  .reviews-section  { padding: 72px 20px; }
  .reviews-grid     { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .has-service-landing .site-header .nav-links li:not(:last-child) { display: none; }
  .has-service-landing .site-header .nav-links                     { width: auto; margin-left: auto; }
  .has-service-landing .site-header .nav-links .cta                { min-width: 112px; padding: 0 12px; white-space: nowrap; }

  .landing-page         { padding-bottom: 100px; }
  .landing-hero         { padding: 52px 16px 44px; }
  .landing-hero h1      { font-size: 2.2rem; line-height: 1.08; }
  .landing-lead         { font-size: 1.06rem; }
  .landing-actions      { display: grid; grid-template-columns: 1fr; }
  .landing-primary-button,
  .landing-secondary-button { width: 100%; }
  .landing-hero-art     { height: 260px; }

  .sec, .reviews-section, .support-section, .faq-bg, .dl, .landing-city-links {
    padding-left: 16px;
    padding-right: 16px;
  }

  .steps { grid-template-columns: 1fr; }
  .step-visual { min-height: 156px; }
  .step-copy   { min-height: 0; }
  .reviews-grid { grid-template-columns: 1fr; gap: 12px; }

  .faq-item summary { align-items: flex-start; }

  .dl { padding-top: 72px; padding-bottom: 72px; }
  .dl h2 { font-size: 2.45rem; }

  .landing-sticky-cta { min-height: 76px; align-items: stretch; gap: 10px; }
  .landing-sticky-cta span { display: none; }
  .landing-sticky-cta a { flex: 0 0 148px; min-width: 0; min-height: 50px; padding: 0 14px; white-space: normal; text-align: center; }
}

@media (max-width: 520px) {
  .support-section  { padding: 64px 16px; }
  .reviews-section  { padding: 64px 16px; }
}

@media (max-width: 430px) {
  .has-service-landing .site-header              { gap: 10px; }
  .has-service-landing .site-header .nav-logo    { min-width: 0; }
  .has-service-landing .site-header .nav-links .cta { min-width: 104px; padding: 0 10px; font-size: 0.78rem; }
  .landing-hero h1  { font-size: 1.98rem; }
  .landing-hero-art { height: 220px; }
  .landing-sticky-cta strong  { font-size: 0.9rem; }
  .landing-sticky-cta a       { flex-basis: 124px; font-size: 0.84rem; }
}