/* ============================================================
   Seções abaixo do hero (1 a 9, faixa ondulada, rodapé).
   Arquivo separado do styles.css pra não mexer no hero (fechado).
   Spec: especificacao-da-pagina.md. Estados "escondidos" das
   animações são aplicados pelo JS (gsap.set), nunca aqui: sem JS,
   tudo aparece.
   ============================================================ */

:root {
  /* Paleta do manual de reposicionamento (spec, seção 2) */
  --brand-soft: #EAF5FC;
  --brand-deep: #061E59;
  --brand: #0D4BA1;
  --brand-dynamic: #0C69C8;
  --brand-light: #38A9EF;
  /* Texto: preto #212121 (Logan, 01/11), no lugar do azul profundo e dos
     cinzas. --brand-deep continua só como cor de FUNDO (seção 6, rodapé). */
  --ink: #212121;
  --ink-soft: #212121;
  --gutter: clamp(20px, 4vw, 48px);
  --panel-margin: clamp(16px, 4vw, 32px); /* igual à margem do .hero-card */
}

/* Lenis (receita #18) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Fundo da página sólido #F7F7F7 (Logan, 01/11); o <body> fica sem fundo
   pra não cobrir nada que esteja atrás dele */
html { background: #F7F7F7; }
body { background: transparent; }
main, .site-footer { color: var(--ink); }
main p, main h2, main h3, main ul, main ol, main figure { margin: 0; }
main ul, main ol { padding: 0; list-style: none; }

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

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(80px, 10vw, 140px);
}
/* Fundos alternados de largura toda: a troca de cor é feita pela onda
   (.wave-wrapper, logo abaixo). Até 01/11 eram painéis arredondados. */
.section.is-soft { background: var(--brand-soft); }
.section.is-deep { background: var(--brand-deep); color: #FFFFFF; }

/* Transição em onda entre seções (VOLDOG, js/section-waves.js): faixa só
   pra onda; a cor nova sobe (ou a anterior desce) desenhada no canvas.
   As seções vizinhas perdem parte do respiro desse lado, porque a própria
   onda já dá o espaço. -1px em cima e embaixo evita fresta entre as cores. */
.wave-wrapper {
  position: relative;
  height: clamp(140px, 26vw, 400px);
  margin-block: -1px;
  pointer-events: none;
}
.wave-wrapper.is-soft { background: var(--brand-soft); }
.wave-wrapper canvas { display: block; width: 100%; height: 100%; }
.wave-wrapper + .section { padding-top: clamp(24px, 4vw, 56px); }
.section:has(+ .wave-wrapper) { padding-bottom: clamp(24px, 4vw, 56px); }
.wave-wrapper + .wave-band { margin-top: 0; }

/* ---------- Componentes que se repetem (spec, seção 4) ---------- */

/* Rótulo em pílula de Liquid Glass (Logan, 01/11): fonte do texto (Resist
   Sans) em vez da Bacalar; tint quase transparente + borda polida com 3
   brilhos internos. A refração da borda vem do js/liquid-glass.js (só
   Chromium); no Safari fica o vidro fosco do backdrop-filter. */
.eyebrow {
  position: relative;
  display: inline-block;
  border: 1px solid rgba(11, 84, 191, .16);
  border-radius: 999px;
  padding: 9px 18px 8px;
  font-family: 'Resist Sans', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(234, 245, 252, .34));
  box-shadow:
    0 8px 22px rgba(11, 84, 191, .12),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}
.eyebrow.is-light {
  border-color: rgba(255, 255, 255, .28);
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.eyebrow.is-sm { font-size: 0.78rem; padding: 7px 14px 6px; }
.eyebrow.is-muted { color: var(--ink); opacity: .6; }

.section-title {
  margin-top: 22px !important;
  font-family: 'Resist Sans', sans-serif;
  font-weight: 700;
  /* escala da Ruska (Logan, 01/11): título grande, linhas juntas */
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.07em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.section-title.is-light,
.is-deep .section-title { color: #FFFFFF; }

.hl {
  /* Destaque: só a cor forte (Logan, 01/11; o neon saiu) */
  color: #006AFF;
  white-space: nowrap;
}
.is-deep .hl,
.section-title.is-light .hl { color: #7FD3FF; }

.section-head.is-center { text-align: center; }
.section-head.is-center .section-title { margin-inline: auto; }

.lead {
  margin-top: 22px !important;
  font-size: clamp(1.12rem, 1.65vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Destaque dentro da frase em negrito (como na Ruska): o texto corre normal
   e só o essencial fica em bold, em preto cheio */
.lead strong { font-weight: 700; color: var(--ink); }
.is-deep .lead strong, .is-photo .lead strong { color: #FFFFFF; }
.lead.is-wide { max-width: 54ch; }

.note {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}
.section-cta.is-left { justify-content: flex-start; }

/* Botão secundário: contorno; hover preenche com o círculo da receita #1 */
.btn-secondary {
  --fill: var(--accent);
  --fill-ink: #FFFFFF;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px 14px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: 'Resist Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s cubic-bezier(.16, 1, .3, 1), transform .2s ease;
  will-change: transform;
}
.btn-secondary.is-light {
  --fill: #FFFFFF;
  --fill-ink: var(--brand-deep);
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.btn-fill-circle {
  position: absolute;
  z-index: -1;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: var(--fsize, 220%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.btn-secondary:hover .btn-fill-circle,
.btn-secondary:focus-visible .btn-fill-circle { transform: translate(-50%, -50%) scale(1); }
.btn-secondary:hover,
.btn-secondary:focus-visible { color: var(--fill-ink); }
.btn-secondary:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 3px; }
.btn-secondary:active { transform: scale(.97); }
.btn-arrow {
  display: inline-block;
  font-size: 1.15em;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.btn-secondary:hover .btn-arrow { transform: translateX(5px); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px !important;
}
.chip {
  border: 1px solid var(--line, var(--brand-dynamic));
  border-radius: 999px;
  padding: 6px 12px 5px;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--line-ink, var(--brand-dynamic));
  line-height: 1.2;
  transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.chip:hover { background: var(--line); color: #FFFFFF; transform: translateY(-2px) rotate(-2deg); }

/* Ícones por máscara (recolore com background-color) */
.mask-icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-paw { --icon: url(../assets/icons/paw-print.svg); }
.icon-health { --icon: url(../assets/icons/heart.svg); }
.icon-heart { --icon: url(../assets/icons/heart-plain.svg); }

/* Bullet de coração */
.heart-list li,
.heart-bullet {
  position: relative;
  padding-left: 28px;
}
.heart-list li::before,
.heart-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 15px;
  height: 15px;
  background: var(--brand-dynamic);
  -webkit-mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
  mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
}
.heart-list.is-light li::before { background: #FFFFFF; }

/* Divisória coração-entre-linhas */
.heart-divider { width: 120px; margin: 26px 0 0; }
.heart-divider svg { display: block; width: 100%; overflow: visible; }
.hd-line { fill: none; stroke: var(--brand-dynamic); stroke-width: 2; stroke-linecap: round; }
.hd-heart { fill: var(--brand-dynamic); transform-box: fill-box; transform-origin: center; }

/* ---------- 1. Conheça a AMIZZE ---------- */

/* Seção 1 centralizada (Logan, 01/11): texto no centro, os 2 cards lado a
   lado embaixo e o botão no centro */
.intro-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
  text-align: center;
}
.intro-main { display: flex; flex-direction: column; align-items: center; }
.intro-main .section-title,
.intro-main .lead { margin-inline: auto; }
.intro-grid > .section-cta { margin-top: 0; }

.intro-lines { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 960px; }
.line-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; text-align: left; }
.lines-title {
  position: relative;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 6px !important;
}
.lines-title .is-dyn { color: var(--brand-dynamic); }

.line-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: clamp(20px, 2.4vw, 30px);
  background: #FFFFFF;
  border: 0; /* chapado, sem contorno (Logan, 01/11) */
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(6, 30, 89, .06);
  /* hover com translate (não transform): o GSAP anima o transform na entrada */
  transition: translate .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}
.line-card:hover { translate: 0 -4px; box-shadow: 0 20px 48px rgba(6, 30, 89, .1); }
.line-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--line);
  color: #FFFFFF;
}
.line-icon .mask-icon { width: 54%; height: 54%; }
.line-card:hover .line-icon { animation: wiggle .6s ease; }
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -10deg; }
  60% { rotate: 8deg; }
}
.line-body h3 { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.04em; }
.line-body p { margin-top: 4px !important; color: var(--ink-soft); }
.intro-lines .note { font-size: 1rem; }

/* ---------- 2. Por que esse modelo ---------- */

/* Seção 2 centralizada (Logan, 01/11): texto no centro, comparação embaixo */
.why-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}
.why-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.why-text .section-title,
.why-text .lead { margin-inline: auto; }
.compare-head .eyebrow { justify-self: center; }
.compare { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 820px; }
.compare-head,
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 16px;
  align-items: center;
}
.compare-head { margin-bottom: 4px; }
.compare-before {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  color: var(--ink);
  text-align: center;
}
/* Risco feito com fundo (não com elemento absoluto): com box-decoration-break
   slice ele atravessa a linha 1 e continua na linha 2 quando o texto quebra.
   O JS anima --strike de 0% a 100%. */
.strike-text {
  background: linear-gradient(#E53935, #E53935) no-repeat 0 56% / var(--strike, 100%) 2.5px; /* risco vermelho (Logan, 01/11) */
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
.compare-after {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 20px 22px 18px 50px;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  color: var(--brand);
  box-shadow: 0 12px 32px rgba(6, 30, 89, .07);
}
.compare-after.heart-bullet::before { left: 22px; top: 23px; }

/* ---------- 3. Como funciona ---------- */

.steps { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.steps-line {
  position: absolute;
  left: 0;
  top: 2.25rem;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
}
.steps-line-bg { fill: none; stroke: rgba(12, 105, 200, .15); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.steps-line-draw { fill: none; stroke: var(--brand-dynamic); stroke-width: 3; stroke-linecap: round; }
.steps-heart {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  background: var(--brand-dynamic);
  -webkit-mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
  mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
  visibility: hidden; /* o JS mostra quando o MotionPath estiver ligado */
  filter: drop-shadow(0 4px 8px rgba(12, 105, 200, .4));
}
.steps-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  text-align: center;
}
.step-num {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 .28em;
  /* pílula de vidro fosco: esconde a linha atrás do número sem tampar o
     fundo da página com um retângulo branco */
  border-radius: .3em;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: 'Bacalar Condensed', sans-serif;
  font-weight: 600;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--brand-dynamic);
}
.step h3 { margin-top: 18px !important; font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.85rem); }
.step p { margin: 10px auto 0 !important; max-width: 32ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink-soft); }

/* ---------- 4. 100% Home Office ---------- */

/* Seção 4: foto de fundo recortada em bolha (técnica do rodapé da VOLDOG).
   A foto ocupa a seção inteira; as duas ondas ficam DENTRO da seção, por cima
   da foto, pintando a cor da seção de cima (topo) e da de baixo (pé). Com o
   scroll a onda vira tigela e a foto aparece como uma cúpula. A camada azul
   mais forte à esquerda segura a leitura do texto. */
.s-home.is-photo {
  --wave-h: clamp(120px, 20vw, 320px);
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--wave-h) * .78 + 24px);
  background: var(--accent);
  color: #FFFFFF;
}
.s-home .wave-wrapper {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: var(--wave-h);
  margin: 0;
}
.s-home .wave-wrapper.is-top { top: -1px; }
.s-home .wave-wrapper.is-bottom { bottom: -1px; }
.s-home .home-grid { position: relative; z-index: 1; }
.home-bg {
  /* camada 35% mais larga que a seção, presa à esquerda: a foto (cover)
     fica ampliada e a pessoa e o cachorro caem à direita do texto */
  position: absolute;
  z-index: -1;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 135%;
  background:
    linear-gradient(90deg, rgba(11, 84, 191, .94) 0%, rgba(11, 84, 191, .86) 25%, rgba(11, 84, 191, .28) 40%, rgba(11, 84, 191, .05) 56%),
    url(../assets/images/home-office.webp) 0 45% / cover no-repeat, /* 2800px: a camada é 135% da largura */
    #0B54BF;
  will-change: transform;
}
.home-grid { display: block; }
.home-text { max-width: 600px; }
.s-home .lead { color: rgba(255, 255, 255, .9); }
.home-text .section-cta { margin-top: 36px; }

.kit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px !important;
}
.kit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.25;
  transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease;
}
.kit-card:hover { translate: 0 -3px; }
.draw-icon {
  flex: none;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 5. O que você recebe ---------- */

.get-grid {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.get-head { align-self: stretch; }
.get-sticky { position: sticky; top: 120px; }
.stack { display: flex; flex-direction: column; }
.stack-card {
  position: sticky;
  top: calc(120px + var(--stack-i) * 18px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 60vh;
  margin-bottom: 40px;
  padding: clamp(32px, 4vw, 56px);
  background: #FFFFFF;
  border: 1px solid rgba(11, 84, 191, .15);
  border-radius: 45px;
  box-shadow: 0 -12px 40px rgba(6, 30, 89, .06);
  transform-origin: center top;
}
.stack-card:last-child { margin-bottom: 0; }
.stack-num {
  position: absolute;
  top: clamp(26px, 3vw, 40px);
  right: clamp(30px, 3.6vw, 48px);
  font-family: 'Bacalar Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  line-height: 1;
  color: var(--brand-dynamic);
}
.stack-icon {
  position: absolute;
  top: clamp(30px, 3.4vw, 46px);
  left: clamp(32px, 4vw, 56px);
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stack-card h3 {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  max-width: 18ch;
}
.stack-card p { margin-top: 14px !important; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; }
.stack-card.is-filled { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.stack-card.is-filled p { color: rgba(255, 255, 255, .82); }
.stack-card.is-filled .stack-num { color: rgba(255, 255, 255, .7); }
.stack-card.is-filled .stack-icon { stroke: #FFFFFF; }

/* ---------- 6. Números ---------- */

.s-numbers .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.big-phrase {
  max-width: 22ch;
  margin: 0 auto !important;
  text-align: center;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.07em;
}
.big-phrase strong { color: var(--brand-light); font-weight: inherit; }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: clamp(56px, 7vw, 96px) !important;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: 'Bacalar Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--brand-light);
  font-variant-numeric: tabular-nums;
}
.stat-text { display: block; max-width: 24ch; margin: 12px auto 0; font-size: clamp(1rem, 1.35vw, 1.25rem); color: rgba(255, 255, 255, .78); line-height: 1.45; }

.chart {
  max-width: 900px;
  margin: clamp(56px, 7vw, 96px) auto 0 !important;
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 24px;
  background: rgba(255, 255, 255, .03);
}
.chart-title { font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.3; }
.chart-legend { margin-top: 6px !important; font-size: 1.05rem; color: rgba(255, 255, 255, .7); }
.chart-svg { display: block; width: 100%; height: auto; margin-top: 24px; overflow: visible; }
.chart-grid line { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.chart-area { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: var(--brand-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-point circle { fill: #FFFFFF; stroke: var(--brand-light); stroke-width: 3; }
.chart-point text { fill: #FFFFFF; font-family: 'Resist Sans', sans-serif; font-weight: 700; font-size: 15px; text-anchor: middle; }
.chart-axis text { fill: rgba(255, 255, 255, .5); font-family: 'Resist Sans', sans-serif; font-size: 13px; text-anchor: middle; }
.chart-axis text.is-key { fill: rgba(255, 255, 255, .9); font-weight: 700; }
.chart-disclaimer { margin-top: 16px; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* ---------- Faixa ondulada ---------- */

.wave-band {
  /* Faixa no formato da VOLDOG (Logan, 01/11): fita larga atravessando a
     tela em curva, texto branco correndo dentro dela */
  position: relative;
  z-index: 2; /* fica por cima da seção "Pra quem é": a fita não é cortada */
  height: clamp(260px, 43.75vw, 840px);
  background: var(--brand-soft);
  pointer-events: none;
}
.wave-band svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wave-ribbon { fill: none; stroke: #006AFF; stroke-width: 102.5; stroke-linecap: round; }
.wave-text {
  fill: #FFFFFF;
  font-family: 'Resist Sans', sans-serif;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -0.01em;
  dominant-baseline: middle;
}

/* ---------- 7. Pra quem é ---------- */

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: clamp(48px, 6vw, 80px);
  align-items: stretch;
}
.fit-card {
  padding: clamp(30px, 4vw, 56px);
  border-radius: 32px;
}
.fit-card h3 { font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.6rem); }
.fit-card ul { margin-top: 24px; }
.fit-card li { padding-block: 14px; border-top: 1px solid currentColor; border-color: rgba(255, 255, 255, .2); font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.4; }
.fit-card .heart-list li::before { top: calc(14px + .3em); }
.fit-card.is-yes { background: var(--accent); color: #FFFFFF; box-shadow: 0 24px 60px rgba(11, 84, 191, .25); }
.fit-card.is-no { background: #FFFFFF; border: 1px solid rgba(6, 30, 89, .2); color: var(--ink-soft); }
.fit-card.is-no h3 { color: var(--ink); }
.fit-card.is-no li { border-color: rgba(6, 30, 89, .1); }
.x-list li { position: relative; padding-left: 28px; }
.x-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(14px + .4em);
  width: 12px;
  height: 12px;
  background:
    linear-gradient(45deg, transparent 45%, rgba(6, 30, 89, .45) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(6, 30, 89, .45) 45% 55%, transparent 55%);
}

/* ---------- 8. Investimento ---------- */

.s-invest { padding-block: clamp(40px, 6vw, 80px); }
.invest-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin: 0 var(--panel-margin);
  padding: clamp(36px, 6.5vw, 96px);
  border-radius: 45px;
  background: var(--accent);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
/* coração gigante e bem claro no fundo, flutuando */
.invest-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -22%;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .06);
  -webkit-mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
  mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
  transform: rotate(-12deg);
  animation: heartFloat 9s ease-in-out infinite;
}
@keyframes heartFloat {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(-18px); }
}
.invest-includes-title {
  margin-top: 36px !important;
  font-family: 'Bacalar Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.invest-list { margin-top: 16px; display: grid; gap: 12px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.price-main { line-height: 1; }
.price-main strong {
  display: block;
  font-family: 'Bacalar Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.price-x { font-size: .55em; vertical-align: .32em; letter-spacing: -0.02em; }
.price-tail { display: block; margin-top: 10px; font-size: 1.2rem; color: rgba(255, 255, 255, .85); }
.price-alt { margin-top: 18px !important; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.invest-note { margin-top: 18px !important; max-width: 40ch; font-size: 1.1rem; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.invest-right .cta-pill { margin-top: 30px; }
.invest-sub { margin-top: 14px !important; font-size: 1rem; color: rgba(255, 255, 255, .72); }

/* ---------- 9. Perguntas rápidas ---------- */

/* FAQ centralizado (Logan, 01/11): título no centro, perguntas num card azul
   embaixo, fechamento no centro */
.faq-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 4vw, 56px);
}
.faq-head { text-align: center; }
.faq-sticky { display: flex; flex-direction: column; align-items: center; }
.faq-sticky .section-title { margin-inline: auto; }
.faq-close { display: flex; flex-direction: column; align-items: center; text-align: center; }
.faq-close p:first-child { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); max-width: 36ch; }
.signature {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px !important;
  font-weight: 700;
  color: var(--brand);
}
.signature .mask-icon { width: 16px; height: 16px; }
.faq-close .btn-secondary { margin-top: 28px; }

.faq-list {
  width: 100%;
  max-width: 880px;
  padding: clamp(8px, 1.2vw, 14px) clamp(22px, 3.4vw, 48px);
  border-radius: 32px;
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 26px 60px rgba(11, 84, 191, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #BFE6FF; }
.faq-item summary:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 4px; border-radius: 8px; }
.faq-icon {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform .35s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item summary:hover .faq-icon { transform: scale(1.08); }
.faq-item.is-open .faq-icon,
.faq-item[open]:not(.is-closing) .faq-icon { background: #BFE6FF; transform: rotate(180deg); }
.faq-item.is-open .faq-icon::after,
.faq-item[open]:not(.is-closing) .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 60px 26px 0; max-width: 62ch; font-size: clamp(1.02rem, 1.35vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .88); }
.faq-item.is-opening .faq-a,
.faq-item.is-closing .faq-a { grid-template-rows: 0fr; }

/* ---------- Rodapé ---------- */

.site-footer {
  position: relative;
  padding-top: clamp(56px, 7vw, 96px);
  background: var(--brand-deep);
  color: rgba(255, 255, 255, .7);
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.6;
}
.site-footer p { margin: 0; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: 32px;
}
.footer-cols > div { display: grid; gap: 10px; align-content: start; }
.footer-line { color: #FFFFFF; font-weight: 700; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.footer-links a { color: #FFFFFF; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s ease; }
.footer-links a:hover { background-size: 100% 1px; }
.footer-wordmark {
  margin: clamp(32px, 5vw, 64px) 0 -0.16em !important;
  font-family: 'Bacalar', sans-serif;
  font-weight: 600;
  font-size: 19.5vw;
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  color: #FFFFFF;
  transform: translateX(0.03em);
}

/* ---------- Partículas de coração (clique nos botões) ---------- */

.heart-particle {
  position: fixed;
  z-index: 9000;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: var(--p, var(--brand-light));
  -webkit-mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
  mask: url(../assets/icons/heart-plain.svg) center / contain no-repeat;
}

/* ============================================================
   Celular e tablet (empilha). Pin/sticky só acima de 900px.
   ============================================================ */
@media (max-width: 900px) {
  .intro-grid,
  .why-grid,
  .get-grid,
  .fit-grid,
  .invest-card,
  .footer-cols { grid-template-columns: 1fr; }

  .line-cards { grid-template-columns: 1fr; }
  /* celular (Logan, 02/11): parágrafo da seção 1 com mais respiro; sai a
     patinha flutuando do lado do card PET; cabeçalho da seção 5 centralizado */
  .lead.is-wide { margin-top: 28px !important; line-height: 1.6; max-width: 32ch; }
  .intro-lines .sticker { display: none; }
  .get-head { text-align: center; }
  .get-sticky { display: flex; flex-direction: column; align-items: center; }
  .get-sticky .section-title { margin-inline: auto; }
  .line-card { flex-direction: column; gap: 14px; }

  .compare-head { display: none; }
  .compare-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .5);
  }

  .steps-line,
  .steps-heart { display: none; }
  .steps-list { grid-template-columns: 1fr; gap: 36px; text-align: left; padding-left: 64px; }
  .steps-list::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-dynamic);
    transform-origin: top center;
    transform: scaleY(var(--draw, 1));
  }
  .step { position: relative; }
  .step-num { position: absolute; left: -64px; top: -4px; width: 46px; padding: 2px 0; text-align: center; font-size: 2.4rem; }
  .step h3 { margin-top: 0 !important; }
  .step p { margin-left: 0 !important; }

  .home-bg {
    width: 100%;
    background:
      linear-gradient(180deg, rgba(11, 84, 191, .45) 0%, rgba(11, 84, 191, .88) 42%, rgba(11, 84, 191, .94) 100%),
      url(../assets/images/home-office-sm.webp) 62% 0 / cover no-repeat, /* versão leve (1200px) no celular */
      #0B54BF;
  }
  .kit-grid { grid-template-columns: 1fr; }

  .get-sticky,
  .faq-sticky { position: static; }
  /* celular: a pilha também gruda e um card cobre o outro conforme desce (Logan, 02/11) */
  .stack-card { top: calc(24px + var(--stack-i) * 12px); min-height: 52vh; margin-bottom: 24px; padding-top: 104px; border-radius: 32px; }

  .stats { grid-template-columns: 1fr; gap: 40px; }


  .invest-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-inline: 16px; }
  .invest-left, .invest-right { display: contents; }
  .invest-left > .eyebrow { order: 1; align-self: flex-start; }
  .invest-left > .section-title { order: 2; }
  .price-main { order: 3; margin-top: 28px; }
  .price-alt { order: 4; }
  .invest-right .cta-pill { order: 5; }
  .invest-sub { order: 6; }
  .invest-includes-title { order: 7; }
  .invest-list { order: 8; }
  .invest-note { order: 9; }

  .faq-a p { padding-right: 0; }

  .footer-cols { gap: 24px; }
}

@media (max-width: 640px) {
  .section { padding-block: 72px; }
  /* Logan (31/10): texto mais longo ("Quero levar a AMIZZE pra minha cidade")
     cabe em 1 linha a partir de 360px com menos respiro lateral e fonte que
     acompanha a largura */
  .section-cta .btn-secondary {
    width: 100%; justify-content: center; text-align: center;
    gap: 8px; padding-inline: 16px;
    font-size: min(0.95rem, 3.6vw);
    white-space: nowrap;
  }
  .invest-card { border-radius: 28px; padding: 36px 24px; }
  .invest-right .cta-pill { align-self: stretch; }
  .faq-item summary { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-secondary, .btn-fill-circle, .btn-arrow, .chip, .line-card, .kit-card, .faq-icon,
  .faq-icon::before, .faq-icon::after, .faq-a { transition: none; }
  .invest-card::after, .line-card:hover .line-icon { animation: none; }
}

/* ============================================================
   Aprimoramentos (31/10/2026, 2ª rodada)
   ============================================================ */

/* ---------- Nav flutuante (js/float-nav.js) ---------- */
.float-nav {
  position: fixed;
  z-index: 2002; /* acima do menu tela-cheia (2000) e da .mobile-nav (2001) */
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 34px rgba(6, 30, 89, .16), inset 0 0 0 1px rgba(11, 84, 191, .08);
  transform: translate(-50%, -140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease;
}
.float-nav.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.fn-logo img { display: block; height: 26px; width: auto; margin-right: 8px; }
.fn-links { position: relative; display: flex; align-items: center; }
.fn-links a {
  position: relative;
  z-index: 1;
  padding: 10px 14px 8px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}
.fn-links a:hover { color: var(--brand-dynamic); }
.fn-links a.is-active { color: #FFFFFF; }
.fn-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent-light);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), width .45s cubic-bezier(.34, 1.3, .64, 1), opacity .3s ease;
}
.fn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 11px 18px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s ease, translate .3s cubic-bezier(.34, 1.56, .64, 1);
}
.fn-cta:hover { background: var(--brand-dynamic); translate: 0 -2px; }
.fn-cta .mask-icon { width: 14px; height: 14px; transition: scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.fn-cta:hover .mask-icon { scale: 1.25; animation: beat 1s ease infinite; }
@keyframes beat { 0%, 100% { scale: 1.15; } 30% { scale: 1.4; } 60% { scale: 1.1; } }
.fn-menu { display: none; }

@media (max-width: 1100px) {
  .fn-links { display: none; }
  .float-nav { padding-left: 16px; }
}

/* Celular: barra embaixo com menu + CTA */
@media (max-width: 640px) {
  .float-nav {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100% - 32px);
    padding: 6px;
    justify-content: space-between;
    transform: translate(-50%, 160%);
  }
  .fn-logo { display: none; }
  .fn-menu {
    position: relative;
    display: block;
    flex: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-soft);
    cursor: pointer;
  }
  .fn-menu span {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: top .35s cubic-bezier(.34, 1.56, .64, 1), transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  }
  .fn-menu span:nth-child(1) { top: 36%; }
  .fn-menu span:nth-child(2) { top: 50%; }
  .fn-menu span:nth-child(3) { top: 64%; }
  .fn-menu.is-open span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
  .fn-menu.is-open span:nth-child(2) { opacity: 0; }
  .fn-menu.is-open span:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
  .fn-cta { flex: 1; justify-content: center; margin-left: 8px; padding: 14px 18px 12px; font-size: 0.95rem; }
  /* espaço pra barra não cobrir o fim do rodapé */
  .site-footer { padding-bottom: 76px; }
}

/* ---------- Adesivos decorativos ---------- */
.intro-lines, .fit-card { position: relative; }
.sticker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 12px 26px rgba(11, 84, 191, .3);
  rotate: var(--rot, 0deg);
  pointer-events: none;
  animation: bob 4.5s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}
.sticker .mask-icon { width: 46%; height: 46%; }
.sticker.is-light { background: var(--brand-light); box-shadow: 0 12px 26px rgba(56, 169, 239, .35); }
.sticker.is-white { background: #FFFFFF; color: var(--accent); box-shadow: 0 14px 30px rgba(6, 30, 89, .25); }
.sticker.is-sm { width: 48px; height: 48px; }
.sticker.is-lg { width: 76px; height: 76px; }
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@media (max-width: 900px) {
  .sticker { width: 52px; height: 52px; }
  .sticker.is-sm { width: 40px; height: 40px; }
  .sticker.is-lg { width: 60px; height: 60px; }
  .intro-lines .sticker.is-sm { left: -6px; top: 30%; }
}

/* ---------- Luz seguindo o mouse no card do investimento ---------- */
.invest-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, .16), transparent 60%);
  opacity: var(--glow, .6);
  transition: opacity .4s ease;
  pointer-events: none;
}
.invest-card:hover { --glow: 1; }

/* ---------- Pergunta aberta ganha a cor de destaque ---------- */
.faq-item[open]:not(.is-closing) summary { color: #BFE6FF; }

@media (prefers-reduced-motion: reduce) {
  .float-nav, .fn-indicator, .fn-cta, .fn-menu span { transition: none; }
  .sticker, .fn-cta:hover .mask-icon { animation: none; }
}

/* ============================================================
   Liquid Glass na nav flutuante (teste, 01/11/2026)
   Camada CSS do LiquidGlassSkill (MIT): tint quase transparente + borda
   polida com 3 brilhos internos. A refração vem do js/liquid-glass.js, que
   troca o backdrop-filter por um filtro SVG (só Chromium). Sem o JS ou no
   Safari/iPhone, fica o blur abaixo (vidro fosco comum).
   Pra desligar: tirar `is-liquid` e `data-liquid-glass` da <nav>.
   ============================================================ */
.float-nav.is-liquid {
  border: 1px solid rgba(6, 30, 89, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(234, 245, 252, .22));
  box-shadow:
    0 10px 30px rgba(6, 30, 89, .14),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
/* Sobre fundo escuro (classe do js/float-nav.js): conteúdo branco */
.float-nav.is-liquid { transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease, border-color .3s ease, background-color .3s ease; }
.float-nav.on-dark { border-color: rgba(255, 255, 255, .22); }
.float-nav.on-dark .fn-links a:not(.is-active) { color: #FFFFFF; }
.float-nav.on-dark .fn-links a:not(.is-active):hover { color: var(--brand-light); }
.float-nav.on-dark .fn-logo img { filter: brightness(0) invert(1); }
.fn-logo img { transition: filter .3s ease; }


/* ============================================================
   Cursor da AMIZZE fora do hero (js/cursor.js), 02/11/2026:
   bolinha azul que persegue o mouse. O cursor normal continua.
   ============================================================ */
.amz-cursor-dot {
  position: fixed;
  z-index: 10000;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #006AFF;
  pointer-events: none;
  transition: opacity .25s ease, background-color .3s ease;
}
.amz-cursor-dot.is-light { background: #FFFFFF; }
.amz-cursor-dot.is-hidden { opacity: 0; }