/* =========================================================
   Agenda Power — página de vendas
   Fundo branco, Geist (400/500), blocos no estilo do painel Cloudflare,
   estrutura inspirada em resend.com e meuassessor.com
   ========================================================= */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2?v=2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2?v=2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --ink: #171717;
  --muted: #6b6b6b;
  --subtle: #9a9a9a;
  --line: #e5e5e5;
  --line-2: #d4d4d4;
  --success: #2e9e5b;
  --success-bg: #e9f6ee;
  --warn: #c8871e;
  --warn-bg: #fdf3e3;
  --black: #0a0a0a;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.05), 0 1px 1px rgba(17, 17, 17, 0.03);
  --shadow-frame: 0 0 0 4px rgba(255, 255, 255, 0.6), 0 0 0 5px #e5e5e5, 0 1px 3px rgba(17, 17, 17, 0.06);
  --shadow-pop: 0 24px 60px -20px rgba(17, 17, 17, 0.22);

  --gutter: 1.45em;
  --sec-title: clamp(30px, 2.6vw, 42px); /* títulos da 3ª seção pra baixo: tamanho único */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) { :root { --gutter: 48px; } }
@media (min-width: 1024px) { :root { --gutter: 96px; } }
@media (min-width: 1280px) { :root { --gutter: 320px; } }
@media (max-width: 899px) { :root { --sec-title: clamp(24px, 6.8vw, 30px); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
strong, b { font-weight: 500; }
h1, h2, h3, h4, strong, b, .btn { font-weight: 500; }

.ic { width: 1em; height: 1em; flex: none; display: block; overflow: visible; }
.dim { color: var(--muted); }

/* ---------- Layout ---------- */
.wrap { padding-inline: var(--gutter); width: 100%; }
.section { padding-block: clamp(56px, 7vw, 112px); position: relative; }

/* Tipografia */

.h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.h2 { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.br-desktop { display: none; }
@media (min-width: 900px) {
  .br-desktop { display: inline; }

}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--black); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.btn--primary:hover { background: #262626; }

.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn .ic { width: 18px; height: 18px; }

/* Marca */
.brand { display: inline-flex; align-items: center; gap: 9px; }

.brand__logo { display: block; height: 19px; width: calc(19px * 391.3 / 563.3); flex: none; color: currentColor; }
/* abertura: o espaço da logo começa fechado (o nome fica no lugar dela); quando a logo chega, o nome desliza e ela se encaixa */
.nav .brand__logo { transition: color 0.25s, width 0.9s cubic-bezier(0.45, 0, 0.2, 1), margin 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
html:has(.intro.is-running) .brand__logo { opacity: 0; width: 0; margin-right: -9px; }
html:has(.intro.is-running.is-slot) .brand__logo { width: calc(19px * 391.3 / 563.3); margin-right: 0; }
.brand__name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- Navegação ---------- */
.nav { position: fixed; inset: 28px 0 auto 0; z-index: 80; padding-inline: var(--gutter); pointer-events: none; transition: top 0.35s var(--ease); }
.nav.is-scrolled { top: 12px; }
.nav__bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 10px 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: background 0.25s, box-shadow 0.25s;
}
.nav.is-scrolled .nav__bar { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 14px 40px -18px rgba(17, 17, 17, 0.28); }
.nav__links { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 2px; }
.nav__links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color 0.2s, background 0.2s; }
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__cta { display: none; }
.nav__burger { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; flex: none; }
.nav__burger .ic { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; }
.nav__burger .ic--close { display: none; }
.nav.is-open .nav__burger .ic--menu { display: none; }
.nav.is-open .nav__burger .ic--close { display: block; }
/* menu mobile em tela cheia: cobre tudo de branco, desce de cima; a barra fica por cima dele */
.nav__menu {
  pointer-events: auto; display: none; flex-direction: column; justify-content: flex-start;
  position: fixed; inset: 0; z-index: -1; padding: 100px var(--gutter) 32px;
  background: #fff;
}
.nav.is-open .nav__bar, .nav.is-closing .nav__bar { position: relative; z-index: 2; }
.nav__menu-links { display: flex; flex-direction: column; }
.nav__menu-links a { display: block; padding: 20px 4px; font-size: 30px; letter-spacing: -0.02em; line-height: 1.2; border-bottom: 1px solid var(--line); }
.nav__menu-links a:last-child { border-bottom: 0; }
.nav__menu-actions { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.nav__menu-actions .btn { width: 100%; }
/* botões das lojas */
.nav__menu-label { margin: 22px 0 10px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.stores { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* bloco de download no menu: mesmo visual do bloco de 'Conta criada' (anel metálico claro + interior branco) */
.menu-dl { margin-top: 22px; padding: 5px; border-radius: 20px; background: linear-gradient(135deg, #d9d9de 0%, #f4f4f6 22%, #c9c9cf 48%, #f1f1f4 74%, #d4d4d9 100%); box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.menu-dl__in { padding: 16px 14px 14px; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.menu-dl .nav__menu-label { margin: 0 0 12px; }
.store { width: 100%; gap: 9px; }
.store__ic { width: 18px; height: 18px; flex: none; color: #fff; }

/* abre descendo suavemente, cada item aparece um a um de cima para baixo; fecha subindo */
.nav.is-open .nav__menu, .nav.is-closing .nav__menu { display: flex; transform-origin: 50% 0; }
.nav__menu-actions { margin-top: 22px; padding-top: 22px; }
/* abrir: o painel desce e cada item entra um por um, de cima para baixo */
.nav.is-open .nav__menu { animation: menuIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4%); } to { opacity: 1; transform: none; } }
.nav__menu-links a, .nav__menu-actions { opacity: 0; }
.nav.is-open .nav__menu-links a, .nav.is-open .nav__menu-actions { animation: menuItem 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.nav.is-open .nav__menu-links a:nth-child(1) { animation-delay: 0.12s; }
.nav.is-open .nav__menu-links a:nth-child(2) { animation-delay: 0.22s; }
.nav.is-open .nav__menu-links a:nth-child(3) { animation-delay: 0.32s; }
.nav.is-open .nav__menu-actions { animation-delay: 0.42s; }
@keyframes menuItem { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* fechar: os itens saem um por um, de baixo para cima (o último primeiro), e no fim o painel sobe */
.nav.is-closing .nav__menu { display: flex; animation: menuOut 0.32s cubic-bezier(0.4, 0, 1, 1) both; animation-delay: 0.44s; }
@keyframes menuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4%); } }
.nav.is-closing .nav__menu-links a, .nav.is-closing .nav__menu-actions { opacity: 1; animation: menuItemOut 0.28s cubic-bezier(0.4, 0, 1, 1) both; }
.nav.is-closing .nav__menu-actions { animation-delay: 0s; }
.nav.is-closing .nav__menu-links a:nth-child(3) { animation-delay: 0.1s; }
.nav.is-closing .nav__menu-links a:nth-child(2) { animation-delay: 0.2s; }
.nav.is-closing .nav__menu-links a:nth-child(1) { animation-delay: 0.3s; }
@keyframes menuItemOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .nav__menu, .nav__menu-links a, .nav__menu-actions { animation: none !important; opacity: 1; } }
@media (min-width: 900px) {
  .nav__links { display: inline-flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  /* Sobre o hero (imagem escura): preto translúcido com blur e textos brancos.
     Quando a barra passa do hero e fica sobre o fundo claro, recebe .is-light e volta ao branco. */
  .nav:not(.is-light) .nav__bar { background: rgba(0, 0, 0, 0.12); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
  .nav:not(.is-light) .brand__name, .nav:not(.is-light) .brand__logo { color: #fff; }

  .nav:not(.is-light) .nav__links a { color: rgba(255, 255, 255, 0.72); }
  .nav:not(.is-light) .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
  .nav:not(.is-light) .nav__cta { background: #fff; color: #0a0a0a; border-color: #fff; }
  .nav:not(.is-light) .nav__cta:hover { background: #ededed; }
  .nav.is-light .nav__bar { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 14px 40px -18px rgba(17, 17, 17, 0.28); }
  .brand__name, .brand__logo, .nav__links a, .nav__cta { transition: color 0.25s, background 0.25s, border-color 0.25s; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(112px, 14vw, 170px); padding-bottom: clamp(48px, 7vw, 80px); position: relative; }
.hero__photo { display: none; }
.hero__bg {
  position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 0, 0, 0.045), transparent 70%),
    linear-gradient(to right, rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.hero__inner { text-align: center; max-width: 880px; margin-inline: auto; }

.hero .h1 { margin-top: 0; }
.hero .lead { margin: 22px auto 0; max-width: 680px; text-wrap: balance; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (min-width: 900px) {
  .hero { --hero-gutter: calc(var(--gutter) - 16px); background: #000; color: #fff; min-height: min(clamp(600px, 78vh, 800px), calc((100vw - 32px) / 1.6)); display: flex; align-items: center; padding-top: 88px; padding-bottom: 48px; overflow: hidden; margin: 16px 16px 0; border-radius: 24px; }
  .hero__bg { display: none; }
  .hero__photo { display: block; position: absolute; inset: 0; z-index: 0; background: #000 url('../assets/hero-desktop.webp?v=9') center 32% / cover no-repeat; }
  .hero__photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #000 0%, #000 8%, rgba(0, 0, 0, 0.85) 22%, rgba(0, 0, 0, 0.4) 34%, rgba(0, 0, 0, 0) 45%); }
  .hero__photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 140px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); }
  .hero__content { position: relative; z-index: 1; padding-inline: var(--hero-gutter); }
  /* A foto (1586×992) ocupa 100% da largura e é cortada em cima/embaixo (altura menor que a proporção); o celular começa em ~53% da largura.
     O texto só pode ir até antes desse ponto: 52vw − margem. */
  .hero__inner { text-align: left; margin: 0; max-width: min(620px, calc(0.52 * (100vw - 32px) - var(--hero-gutter) - 24px)); }
  .hero .h1 { font-size: clamp(38px, 3.4vw, 60px); }
  .hero .h1 { font-weight: 400; }
  .hero .h1 .dim { color: #fff; font-weight: 500; }
  .hero .lead { margin-left: 0; max-width: 540px; color: rgba(255, 255, 255, 0.72); }
  .hero__cta { justify-content: flex-start; }
  .hero .btn--primary { background: #fff; color: #0a0a0a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
  .hero .btn--primary:hover { background: #ececec; }

}

/* ---------- Botão do hero (clone do botão da huly.io) ---------- */
.hbtn { position: relative; display: inline-flex; align-items: center; z-index: 1; --lx: 47%; }
.hbtn__glow { position: absolute; left: 50%; top: 50%; width: calc(100% + 9px); height: calc(100% + 9px); transform: translate(-50%, -50%); border-radius: 999px; border: 3px solid transparent; box-sizing: border-box; pointer-events: none; will-change: transform; opacity: 0.94; transition: opacity 0.4s ease-out; }
.hbtn__glow--flip { transform: translate(-50%, -50%) scaleX(-1); opacity: 0; }
.hbtn__glow::before, .hbtn__glow::after, .hbtn__ring::before { content: ''; position: absolute; box-sizing: content-box; width: 100%; height: 100%; border-radius: 999px; border-style: solid; border-color: transparent; }
.hbtn__glow::before { left: -2px; top: -2px; border-width: 2px; z-index: 1; filter: blur(2px); background: linear-gradient(transparent, transparent) padding-box, linear-gradient(97.68deg, rgba(240, 210, 120, 0) 38.1%, rgba(240, 210, 120, 0.2) 82.47%, #e6b93a 93.3%) border-box; }
.hbtn__glow::after { left: -3px; top: -3px; border-width: 3px; z-index: 2; filter: blur(15px); background: linear-gradient(transparent, transparent) padding-box, linear-gradient(91.88deg, rgba(230, 185, 58, 0.2) 46.45%, #a8821f 98.59%) border-box; }
.hbtn__ring { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; border: 1px solid transparent; box-sizing: border-box; background: linear-gradient(transparent, transparent) padding-box, linear-gradient(103.7deg, rgba(200, 180, 130, 0.1) 38.66%, rgba(212, 175, 55, 0.1) 68.55%, #d4af37 85.01%, #fff 92.12%) border-box; }
.hbtn__ring::before { left: -2px; top: -2px; border-width: 2px; z-index: 3; filter: blur(7px); background: linear-gradient(transparent, transparent) padding-box, linear-gradient(91.96deg, rgba(240, 210, 120, 0) 6.11%, rgba(240, 210, 120, 0.2) 53.57%, #e6b93a 93.6%) border-box; }
.hbtn__btn {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 58px; padding: 0 80px 0 88px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6);
  background: #d1d1d1; color: #3a2a05; font: 500 14px/18px 'Geist', system-ui, sans-serif; text-transform: uppercase; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; cursor: pointer; transition: background 0.2s;
}
.hbtn__btn:hover { background: #d6d6d6; }
.hbtn__btn:active { transform: scale(0.98); }
/* Luz interna: segue o cursor na horizontal (--lx definido pelo JS); em repouso fica na ponta direita, como na Huly */
.hbtn__light { position: absolute; z-index: 0; top: 50%; left: calc(50% + var(--lx)); width: 204px; height: 0; transform: translateX(-50%) translateZ(0); transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hbtn__orb, .hbtn__haze { position: absolute; top: 50%; transform: translateY(-50%); }
.hbtn__orb { width: 121px; height: 121px; background: radial-gradient(50% 50% at 50% 50%, #fffff5 3.5%, #f1d27a 26.5%, #fbe7a8 37.5%, rgba(241, 210, 122, 0.5) 49%, rgba(168, 130, 31, 0) 92.5%); }
.hbtn__haze { width: 204px; height: 103px; background: radial-gradient(43.3% 44.23% at 50% 49.51%, #fffff7 29%, #fff6d6 48.5%, #f0dca0 60.71%, rgba(214, 211, 210, 0) 100%); filter: blur(5px); }
.hbtn__label, .hbtn__arrow { position: relative; z-index: 1; }
.hbtn__arrow { width: 17px; height: 9px; transition: transform 0.2s; }
.hbtn:hover .hbtn__arrow { transform: translateX(4px); }
/* variante com brilho branco (oferta): mesmo botão, halo e luz interna em branco/prata */
.hbtn--white .hbtn__btn { color: #2a2a2e; }
.hbtn--white .hbtn__glow::before { background: linear-gradient(transparent, transparent) padding-box, linear-gradient(97.68deg, rgba(255, 255, 255, 0) 38.1%, rgba(255, 255, 255, 0.3) 82.47%, #ffffff 93.3%) border-box; }
.hbtn--white .hbtn__glow::after { background: linear-gradient(transparent, transparent) padding-box, linear-gradient(91.88deg, rgba(255, 255, 255, 0.25) 46.45%, #ffffff 98.59%) border-box; }
.hbtn--white .hbtn__ring { background: linear-gradient(transparent, transparent) padding-box, linear-gradient(103.7deg, rgba(255, 255, 255, 0.1) 38.66%, rgba(255, 255, 255, 0.2) 68.55%, #e9e9ec 85.01%, #fff 92.12%) border-box; }
.hbtn--white .hbtn__ring::before { background: linear-gradient(transparent, transparent) padding-box, linear-gradient(91.96deg, rgba(255, 255, 255, 0) 6.11%, rgba(255, 255, 255, 0.25) 53.57%, #ffffff 93.6%) border-box; }
.hbtn--white .hbtn__orb { background: radial-gradient(50% 50% at 50% 50%, #ffffff 3.5%, #f4f4f6 26.5%, #ffffff 37.5%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 92.5%); }
.hbtn--white .hbtn__haze { background: radial-gradient(43.3% 44.23% at 50% 49.51%, #ffffff 29%, #ffffff 48.5%, #ececef 60.71%, rgba(255, 255, 255, 0) 100%); }
/* variante sem brilho (popup): mesmo botão, sem o halo da borda nem a luz interna */
.hbtn--flat .hbtn__glow, .hbtn--flat .hbtn__light { display: none; }
.hbtn--flat .hbtn__btn { background: #2a2a2e; border-color: #2a2a2e; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.hbtn--flat .hbtn__btn:hover { background: #38383d; }
.hbtn--flat .form__spinner { border-color: rgba(255, 255, 255, 0.3) !important; border-top-color: #fff !important; }

/* ---------- Vídeo + Dor ---------- */
.video { max-width: 980px; margin-inline: auto; }
/* Seção do vídeo no estilo "Trabalhem juntos" da Huly: fundo claro com ondas azuis
   desfocadas e painéis brancos em volta, moldura branca grossa em torno do player */
.video-sec { position: relative; overflow: hidden; background: #fff; }
.pain { position: relative; z-index: 1; }
/* fundo: o vídeo de ondas da Huly posicionado com os mesmos números do site deles
   (left -69.792%, top -69.136%, largura 222.222% do quadro), para a sala central do vídeo
   coincidir com o player; virado para dourado com sépia */
.video { position: relative; }
.video-sec__bg { position: absolute; left: -69.792%; top: -69.136%; width: 222.222%; aspect-ratio: 1.62025; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(64% 58% at 50% 50%, #000 52%, transparent 96%); mask-image: radial-gradient(64% 58% at 50% 50%, #000 52%, transparent 96%); }
.video-sec__waves { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* cinza e manchas suaves já gravados no vídeo (leve no celular) */
/* manchas de desfoque sobre os rótulos e avatares embutidos no vídeo da Huly */
.video__frame { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .video-sec__waves { display: none; } }
.video-sec .wrap { position: relative; }
/* o player entra na "sala" central do vídeo de fundo (a moldura branca é a do próprio fundo), como na Huly */
.video__frame { padding: 0; background: transparent; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.35); border-radius: 10px; }
.video__frame > * { border-radius: 10px; overflow: hidden; background: #000; }

.video__frame vturb-smartplayer { display: block; }
.video__poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer; }
.video__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.3s; }
.video__poster:hover img { transform: scale(1.02); }
.video__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.05) 60%); pointer-events: none; }
.video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: #fff; color: #0a0a0a; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(255, 255, 255, 0.18); transition: transform 0.3s var(--ease), box-shadow 0.3s; z-index: 1; }
.video__play .ic { width: 34px; height: 34px; margin-left: 4px; }
.video__poster:hover .video__play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 0 14px rgba(255, 255, 255, 0.22); }
.video__poster:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
@media (max-width: 560px) { .video__play { width: 64px; height: 64px; } .video__play .ic { width: 26px; height: 26px; } }
.pain { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pain { grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); } }
.pain__card { padding: 0; background: none; border: 0; }
.pain__n { display: block; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pain__card h2 { margin-top: 18px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; color: #303236; text-wrap: pretty; }

/* ---------- Faixa de benefícios ---------- */
.strip { position: relative; padding-block: 22px; border-bottom: 1px solid var(--line); overflow: hidden; background: #fff; }
.strip::before, .strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.strip::before { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.strip::after { right: 0; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }
.strip__track { display: flex; width: max-content; animation: strip 36s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }
.strip__group { display: flex; align-items: center; }
.strip__group > span { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; position: relative; }
.strip__group > span::after { content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); transform: translateY(-50%); }
.strip__group > span .ic { width: 20px; height: 20px; color: var(--ink); }
@keyframes strip { to { transform: translateX(calc(-100% / 3)); } }

/* ---------- Funcionalidades (clone do bento "Produtividade incomparável" da huly.io) ---------- */
#funcionalidades.section { padding-block: clamp(40px, 4.5vw, 64px); }
.hsec-head { margin-bottom: clamp(28px, 3vw, 40px); text-align: center; }
.hsec-title { font-size: var(--sec-title); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; color: #0b0d10; text-wrap: balance; }
.hsec-lead { margin: 12px auto 0; max-width: 705px; font-size: clamp(15px, 1.05vw, 16px); line-height: 1.3; color: #303236; }
@media (min-width: 900px) { .hsec-title { text-wrap: initial; } .hsec-lead { max-width: 640px; text-wrap: balance; } }
@media (min-width: 1100px) { .hsec-lead { max-width: none; white-space: nowrap; } }

/* Cards de funcionalidades: ver css/cards.css */

.closing { --ct: clamp(96px, 11vw, 150px); position: relative; margin-top: 0; padding-top: var(--ct); padding-bottom: 20px; text-align: center; max-width: 820px; margin-inline: auto; }
/* linhas verticais saindo dos cards (clone da seção "Conhecimento" da huly.io): fios finos com feixes de luz descendo */
.closing__lines { position: absolute; left: 50%; top: -20px; width: 260px; height: calc(var(--ct) + 4px); transform: translateX(-50%); pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 58%, transparent 96%); }
.closing__lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, var(--o, 0.1)); overflow: hidden; }
/* espessuras e opacidades variadas, como na Huly */
.closing__lines i:nth-child(1) { --o: 0.06; }
.closing__lines i:nth-child(2) { --o: 0.12; width: 1px; }
.closing__lines i:nth-child(3) { --o: 0.08; }
.closing__lines i:nth-child(4) { --o: 0.16; width: 2px; }
.closing__lines i:nth-child(5) { --o: 0.07; }
.closing__lines i:nth-child(6) { --o: 0.12; }
.closing__lines i:nth-child(7) { --o: 0.05; }
.closing__lines i::after { content: ''; position: absolute; left: 0; width: 100%; height: 160px; top: -160px; background: linear-gradient(to bottom, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.9) 50%, rgba(212, 175, 55, 0)); box-shadow: 0 0 6px rgba(212, 175, 55, 0.5); animation: streak 6s linear infinite; }
.closing__lines i:nth-child(1) { left: 6%; }  .closing__lines i:nth-child(1)::after { animation-duration: 7s; animation-delay: -1s; }
.closing__lines i:nth-child(2) { left: 20%; } .closing__lines i:nth-child(2)::after { animation-duration: 5.5s; animation-delay: -3s; }
.closing__lines i:nth-child(3) { left: 34%; } .closing__lines i:nth-child(3)::after { animation-duration: 8s; animation-delay: -5s; }
.closing__lines i:nth-child(4) { left: 50%; } .closing__lines i:nth-child(4)::after { animation-duration: 6s; animation-delay: -2s; }
.closing__lines i:nth-child(5) { left: 64%; } .closing__lines i:nth-child(5)::after { animation-duration: 7.5s; animation-delay: -4s; }
.closing__lines i:nth-child(6) { left: 80%; } .closing__lines i:nth-child(6)::after { animation-duration: 5s; animation-delay: -0.5s; }
.closing__lines i:nth-child(7) { left: 94%; } .closing__lines i:nth-child(7)::after { animation-duration: 9s; animation-delay: -6s; }
@keyframes streak { 0% { top: -160px; } 100% { top: 100%; } }
.closing__text, .closing__steps { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .closing__lines i::after { animation: none; } }
.closing__text { font-size: clamp(21px, 2.3vw, 30px); line-height: 1.28; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.closing__steps { margin-top: 22px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.closing__steps span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; color: var(--muted); }
.closing__steps .ic { width: 15px; height: 15px; color: var(--ink); }

/* ---------- Teste grátis: bloco único em fundo branco ---------- */
.offer-sec { position: relative; background: #fff; padding-block: clamp(40px, 3.6vw, 56px); }   /* computador: margens de cima e de baixo menores */
/* metal claro escovado atrás da oferta, mesclando com o branco: transparente no topo, nas laterais e no fim */
.offer-sec::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.02) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    linear-gradient(160deg, #ffffff 0%, #e9e9ed 22%, #f7f7f9 40%, #e2e2e7 62%, #f4f4f6 80%, #ffffff 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 35%, transparent 100%); }
.offer-sec > .wrap { position: relative; z-index: 1; }
/* ---------- Planos (anual e mensal) ---------- */
.plans-head { text-align: center; }
@media (min-width: 900px) { .plans-head .hsec-title { max-width: 860px; margin-inline: auto; text-wrap: balance; } }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); max-width: 1040px; margin: clamp(28px, 3vw, 44px) auto 0; align-items: stretch; }
.plans .offer { max-width: none; margin: 0; display: flex; }
.plans .offer__in { display: flex; flex-direction: column; width: 100%; }
.plans .offer__head { margin-bottom: 4px; }
.plans .offer .dark__title { font-size: clamp(22px, 2vw, 28px); white-space: nowrap; max-width: none; }
.plan__eq--empty { display: none; }
/* Mensal: altura do próprio conteúdo, sem espaço vazio entre o preço e a lista */
.plans { align-items: start; }
.plans .plan--mensal .offer__list { margin-top: 16px; }
.plans .plan--mensal .offer__cta { margin-top: 0; }
.plans .offer__price { margin-top: 14px; padding-top: 0; border-top: 0; }
.plan__eq { margin: 10px auto 0; max-width: 320px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); text-wrap: balance; }
.plan__eq b { color: #fff; font-weight: 500; }
.plans .offer__list { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.plans .offer__cta { margin-top: auto; padding-top: 26px; }
.plans .hbtn__btn { text-decoration: none; }
/* abas Mensal | Anual acima dos cartões: só no celular */
.plans-tabs { display: none; }
/* plano mensal em branco: mesmo visual do bloco "Conta criada" (aro prateado claro + fundo branco) */
.offer.plan--light { background: linear-gradient(135deg, #d9d9de 0%, #f4f4f6 22%, #c9c9cf 48%, #f1f1f4 74%, #d4d4d9 100%); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06); color: var(--ink); }
.plan--light .offer__in { background: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.plans .plan--light .dark__title, .plans .plan--light .offer__amount { color: var(--ink); }
.plans .plan--light .offer__per { color: var(--muted); }
.plans .plan--light .offer__list { border-top-color: var(--line); }
.plan--light .offer__list li { background: linear-gradient(135deg, #e6e6ea, #f6f6f8 50%, #e2e2e7); }
.plan--light .offer__item { background: linear-gradient(180deg, #ffffff, #fafafb); box-shadow: inset 0 1px 0 #fff; color: var(--ink); }
.dark__title { font-size: var(--sec-title); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.dark__lead { margin: 10px auto 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dark__note { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.dark__note .ic { width: 15px; height: 15px; color: var(--ink); }
.dark__label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; text-align: center; }
.offer {
  position: relative; max-width: 760px; margin-inline: auto; padding: 6px; border-radius: 22px; text-align: center; color: #fff;
  /* anel metálico: degradê prata em volta */
  background: linear-gradient(135deg, #8d8d93 0%, #2a2a2e 22%, #c9c9cf 48%, #3a3a40 74%, #9a9aa0 100%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.offer__in {
  position: relative; overflow: hidden; border-radius: 17px; padding: clamp(28px, 3.5vw, 46px) clamp(18px, 3.5vw, 44px) clamp(22px, 3vw, 34px);
  /* metal escuro escovado: base com reflexo diagonal + linhas finas */
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(180deg, #17171a 0%, #0b0b0d 55%, #131316 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.offer__head { max-width: 520px; margin-inline: auto; }
.offer .dark__title { color: #fff; }
.offer .dark__lead { color: rgba(255, 255, 255, 0.62); }
@media (min-width: 900px) { .offer__head { max-width: 680px; } .offer .dark__lead { max-width: 600px; font-size: 14.5px; line-height: 1.4; margin-top: 8px; text-wrap: balance; } }
.offer .dark__label { color: rgba(255, 255, 255, 0.5); }
.offer .dark__note { color: rgba(255, 255, 255, 0.6); }
.offer .dark__note .ic { color: #fff; }
.offer__list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 520px; }
/* cada entrega num bloco de vidro escuro */
.offer__list li { padding: 3px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.12)); }
.offer__item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 9px; background: linear-gradient(180deg, #1b1b1f, #121215); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-align: left; }
.offer__list .ic { flex: none; width: 20px; height: 20px; }
.offer__price { margin-top: 20px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px; }
.offer__amount, .offer__per { font-size: clamp(28px, 2.8vw, 40px); line-height: 1; }
.offer__amount { line-height: 1; letter-spacing: -0.04em; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.offer__per { color: rgba(255, 255, 255, 0.62); letter-spacing: -0.03em; white-space: nowrap; }
.offer__cta { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- Popup de cadastro ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__lines { display: none; }
.modal__form[hidden], .modal__success[hidden], .field__err[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: modalFade 0.6s ease-out both; }
.modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px 24px; box-shadow: var(--shadow-pop); animation: modalIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
/* saída suave: a classe is-closing roda a animação inversa e o JS esconde ao terminar */
.modal.is-closing .modal__backdrop { animation: modalFadeOut 0.4s ease-in both; }
.modal.is-closing .modal__card { animation: modalOut 0.4s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .modal__backdrop, .modal__card, .modal.is-closing .modal__backdrop, .modal.is-closing .modal__card { animation: none; } }
@media (min-width: 560px) { .modal__card { padding: 32px 30px 28px; } }
@media (min-width: 900px) { .modal__card { max-width: 580px; padding: 52px 52px 44px; } }
.modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--muted); transition: background 0.2s, color 0.2s; }
.modal__close:hover { background: var(--surface); color: var(--ink); }
.modal__close .ic { width: 16px; height: 16px; }
.modal__head { text-align: center; padding: 8px 24px 0; }

.modal__head h3 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
@media (min-width: 900px) { .modal__head h3 { font-size: 34px; } }
.modal__head p { margin: 8px auto 0; max-width: 380px; font-size: 15px; color: var(--muted); text-wrap: balance; }
@media (min-width: 900px) { .modal__head p { max-width: none; white-space: nowrap; text-wrap: initial; } }
.modal__head p b { font-weight: 500; color: var(--ink); }
#signupForm { margin-top: 28px; display: grid; gap: 16px; }
.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; }
.field label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.field label span { color: var(--subtle); font-weight: 400; }
.field input { width: 100%; height: 58px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; }
.field input::placeholder { color: var(--muted); }
.field input:hover, .field input:focus, .field input:focus-visible { border-color: var(--line-2); box-shadow: none; outline: none; }
/* notificação do popup: desce do topo, neutra (sem vermelho), com X para fechar */
.toast { position: fixed; top: 16px; left: 50%; z-index: 300; display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(440px, calc(100vw - 24px)); padding: 6px 6px 6px 14px; border-radius: 999px; background: #5a1418; color: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; transform: translate(-50%, -140%); opacity: 0; pointer-events: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.toast.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #ff8a8a; }
.toast__msg { margin: 0; font-size: 13px; line-height: 1.35; }
.toast__close { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); cursor: pointer; }
.toast__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.toast__close svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.2s; } }
.field__err { display: block; margin-top: 6px; font-size: 12.5px; color: #c23b2e; }
/* Telefone com seletor de país */
.phone { position: relative; display: flex; align-items: stretch; }
.phone > input { padding-left: 112px; }
.phone__cc { position: absolute; left: 1px; top: 1px; bottom: 1px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 12px; border: 0; border-right: 1px solid var(--line); border-radius: 9px 0 0 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background 0.2s; }
.phone__cc:hover { background: var(--surface-2); }
.phone__flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.phone__dial { font-weight: 500; letter-spacing: -0.01em; }
.phone__chev { width: 12px; height: 12px; color: var(--muted); }
.phone__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 8px; }
.phone__menu[hidden] { display: none; }
.modal__card:has(.phone__menu:not([hidden])) { overflow: visible; }
.phone__searchbox { position: relative; }
.phone__searchbox .ic { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.phone .phone__search { width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); text-align: left; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
.phone .phone__search:hover, .phone .phone__search:focus { border-color: var(--line-2); box-shadow: none; }
.phone__search::placeholder { color: var(--subtle); }
.phone__list { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); max-height: 240px; overflow: auto; overscroll-behavior: contain; }
.phone__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.phone__list li:hover { background: var(--surface); }
.phone__list li[aria-selected="true"] { background: var(--surface-2); }
.phone__list .phone__flag { flex: none; }
.phone__list .phone__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone__list .phone__code { color: var(--muted); font-size: 13px; }
.phone__empty { padding: 10px; font-size: 13.5px; color: var(--muted); }
.field__pw { position: relative; }
.field__pw input { padding-right: 84px; }
.field__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); background: #fff; }
.field__toggle:hover { color: var(--ink); background: var(--surface); }
.form__error[hidden] { display: none; }
.form__error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fdecea; border: 1px solid #f5c6c0; color: #a3301f; font-size: 13.5px; line-height: 1.4; }
.form__submit-wrap { justify-content: center; margin: 10px auto 0; }
.form__submit { position: relative; z-index: 2; }
.form__submit .form__spinner { position: relative; z-index: 1; margin-left: 2px; }
.form__submit .form__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(58, 42, 5, 0.25); border-top-color: #3a2a05; animation: spin 0.7s linear infinite; }
.form__submit.is-loading { pointer-events: none; opacity: 0.85; }
.form__submit.is-loading .form__spinner { display: block; }
.form__submit.is-loading .hbtn__arrow { display: none; }
.steps, .step { display: contents; }   /* computador: tudo numa tela só, na ordem normal */
.step__title { display: none; }   /* título da 2ª etapa: só no celular */
.form__back, .form__next-wrap { display: none; }   /* etapas só existem no celular */
@media (min-width: 900px) {
  .form__actions { display: flex; justify-content: center; }
  .form__actions .form__submit-wrap { width: 100%; margin: 10px 0 0; }
  .form__actions .form__submit-wrap .hbtn__btn { width: 100%; padding: 0 32px; }
}
.form__hint { text-align: center; font-size: 12.5px; color: var(--subtle); margin-top: 4px; }
.modal__success { position: relative; text-align: center; padding: 10px 4px 4px; }
/* a tela de sucesso: quadradinhos brancos preenchem a tela inteira (100%), depois o conteúdo aparece sobre o branco */
.tiles { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); grid-template-rows: repeat(var(--rows, 18), 1fr); gap: 0; pointer-events: none; }
.tiles[hidden] { display: none; }
.tiles.is-covering { z-index: 20; }   /* enquanto sobem, ficam por cima do popup aberto */
.tiles i { display: block; background: #fff; box-shadow: 0 0 0 1px #fff; opacity: 0; transform: scale(0.3); animation: tileIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); }
@keyframes tileIn { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
.modal.is-success .modal__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* o conteúdo fica num bloco branco com o mesmo anel metálico da oferta (versão clara) */
.modal.is-success .modal__card { position: relative; z-index: 2; max-width: 760px; padding: 6px; border-radius: 22px; border: 0; background: linear-gradient(135deg, #d9d9de 0%, #f4f4f6 22%, #c9c9cf 48%, #f1f1f4 74%, #d4d4d9 100%); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.modal.is-success .modal__success { padding: clamp(32px, 4vw, 52px) clamp(20px, 4vw, 48px) clamp(28px, 3.5vw, 44px); border-radius: 17px; background: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.modal__success-mail { white-space: nowrap; }
@media (max-width: 899px) { .modal__success-mail { white-space: normal; text-wrap: balance; } .modal__success .modal__success-lead { max-width: 15em; margin-left: auto; margin-right: auto; text-wrap: balance; } }
/* na tela de sucesso o X fica no canto da tela (o card é transparente) */
.modal.is-success .modal__card { animation: none; opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.modal.is-success.is-ready .modal__card { opacity: 1; transform: none; }
.modal.is-success .modal__close { position: absolute; top: 20px; right: 20px; z-index: 3; }
.modal__success-in { position: relative; z-index: 1; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.modal__success.is-done .modal__success-in { opacity: 1; transform: none; transition-delay: 0.25s; }
.modal__success-lead { font-size: 16px !important; color: var(--ink) !important; }
@media (prefers-reduced-motion: reduce) { .tiles i { animation: none; opacity: 1; transform: none; } .modal__success-in { opacity: 1; transform: none; transition: none; } }

.modal__success h3 { margin-top: 0; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.modal__success-lead { margin-top: 18px !important; }

.modal__success-mail { margin-top: 6px !important; }
.modal__success p { margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.modal__success p b { color: var(--ink); overflow-wrap: anywhere; }
.modal__success-lead b { white-space: nowrap; }
.modal__success .btn { margin-top: 22px; width: 100%; }
.modal__success .modal__success-label { margin: 36px 0 14px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stores--done { max-width: 400px; margin-inline: auto; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stores--done .store { min-width: 0; padding-inline: 12px; }
.stores--done .store { width: 100%; margin-top: 0; }
/* no celular mostra só a loja do aparelho (classe is-ios / is-android vem do JS); no computador, as duas lado a lado */
.stores--done.is-ios .store--android, .stores--done.is-android .store--ios { display: none; }
.stores--done.is-ios, .stores--done.is-android { grid-template-columns: 1fr; max-width: 260px; }

/* campo-isca contra robôs: fora da tela, invisível para pessoas */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
html.has-modal, body.has-modal { overflow: hidden; overscroll-behavior: none; }
/* o popup tem rolagem própria e não repassa o scroll para a página */
.modal { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal__backdrop { touch-action: none; }
/* deslocamento suave quando o teclado do celular abre (propriedade translate, separada da animação de entrada) */

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Rodapé ---------- */
/* marca final em metal líquido (WebGL em js/liquid.js) */
/* ---------- Rodapé (estilo site de app) ---------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 64px); background: #fff; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.footer__brand .brand__name { font-size: 18px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; }
.footer__title { margin-bottom: 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.footer__col a:not(.fstore) { color: var(--muted); transition: color 0.2s; }
.footer__col a:not(.fstore):hover { color: var(--ink); }
.footer__stores { display: flex; gap: 10px; }
.fstore { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 4px 12px -6px rgba(0, 0, 0, 0.18); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.fstore:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px -8px rgba(0, 0, 0, 0.22); }
.fstore__ic { width: 19px; height: 19px; }
.footer__bottom { position: relative; z-index: 1; margin-top: clamp(36px, 4.5vw, 56px); padding-block: 18px 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--subtle); }
.footer__up { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); transition: color 0.2s, border-color 0.2s, transform 0.2s; }
.footer__up:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-2px); }
.footer__up svg { width: 14px; height: 14px; }
@media (max-width: 899px) {
  .footer { padding-top: 40px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer .footer-mark { --mark-w: 175vw; margin-top: calc(var(--mark-w) * 520 / 2400 * -0.1); }
}
.footer-mark { --mark-w: 118vw; position: relative; margin: calc(var(--mark-w) * 520 / 2400 * -0.1) 0 0; height: calc(var(--mark-w) * 520 / 2400 * 0.6); overflow: hidden; background: transparent; }
.footer-mark__stage { z-index: 1; position: absolute; left: 50%; top: 50%; display: block; width: var(--mark-w); aspect-ratio: 2400 / 520; transform: translate(-50%, -46%); opacity: 0; transition: opacity 0.8s ease; }
.footer-mark__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.footer-mark.is-ready .footer-mark__stage { opacity: 1; }
/* nome estático: sempre por baixo do efeito, mesma posição/tamanho do texto do canvas (nunca fica vazio) */
.footer-mark__fallback { position: absolute; left: 50%; top: 50%; width: var(--mark-w); aspect-ratio: 2400 / 520; transform: translate(-50%, -46%); display: flex; align-items: center; justify-content: center; padding-top: 0; font-weight: 500; font-size: calc(var(--mark-w) * var(--fb-k, 0.1389)); line-height: 1; letter-spacing: 0; white-space: nowrap; color: #4a4c55; background: linear-gradient(180deg, #c9cbd2 0%, #6d707a 38%, #1f2128 62%, #8a8d97 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; pointer-events: none; transition: opacity 0.6s ease; }
.footer-mark.is-ready .footer-mark__fallback { opacity: 0; }


/* ---------- Revelar ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =====================================================================
   MOBILE (até 899px): hero preto com a foto em retrato crescendo de baixo,
   margens de 1,45em em toda a página, seções em coluna única.
   ===================================================================== */
@media (max-width: 899px) {
  .wrap { padding-inline: var(--gutter); }
  .nav { inset: 12px 0 auto 0; padding-inline: var(--gutter); }
  .nav.is-scrolled { top: 10px; }
  /* navbar escura sobre a foto do hero; branca depois que passa dela (igual ao desktop) */
  .nav__bar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }   /* mais leve para rolar no celular */
  .nav:not(.is-light) .nav__bar { background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
  .nav:not(.is-light) .brand__name, .nav:not(.is-light) .brand__logo { color: #fff; }
  .nav:not(.is-light) .nav__burger { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
  .nav.is-light .nav__bar { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 14px 40px -18px rgba(17, 17, 17, 0.28); }
  .nav.is-open .nav__bar, .nav.is-closing .nav__bar { background: #fff; transition: background 0.3s; }
  .nav.is-open .brand__name, .nav.is-closing .brand__name, .nav.is-open .brand__logo, .nav.is-closing .brand__logo { color: var(--ink); }
  .nav.is-open .nav__burger, .nav.is-closing .nav__burger { background: #fff; border-color: var(--line); color: var(--ink); }

  /* hero: mesmo preto do topo do desktop, texto em cima e a foto encostada embaixo */
  .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; background: #000; color: #fff; padding: 104px 0 0; margin: 0; border-radius: 0 0 22px 22px; overflow: hidden; }
  .hero__bg { display: none; }
  .hero__content { order: 1; position: relative; z-index: 1; padding-inline: var(--gutter); }
  .hero__inner { text-align: center; max-width: none; margin: 0; }
  .hero .h1 { font-size: clamp(24px, 7.6vw, 36px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 400; color: #fff; }
  .hero .h1 .dim { color: #fff; font-weight: 500; }
  .hero .lead { margin: clamp(12px, 3.8vw, 16px) auto 0; max-width: 100%; font-size: clamp(13px, 3.57vw, 16px); line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
  .hero__cta { margin-top: 22px; justify-content: center; }
  .hero .hbtn__btn { padding: 0 52px 0 60px; }
  /* a foto em retrato é o fundo do hero: moça encostada embaixo, degradê escuro em cima para o texto */
  /* a foto entra DEPOIS do texto/botão (no fluxo) e sobe por baixo dele só com a parte escura de cima:
     a cabeça (≈42% da altura da imagem) fica sempre abaixo do botão, em qualquer largura */
  .hero__photo { order: 2; display: block; position: relative; inset: auto; z-index: 0; width: 100%; max-width: 520px; margin: calc(69px - 0.9555 * min(100vw, 520px)) auto 0; aspect-ratio: 941 / 1672; background: #000 url('../assets/hero-mobile.webp?v=2') center top / 128% auto no-repeat; transform: none; }
  .hero__photo::before { content: ''; display: block; position: absolute; inset: 0; background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0.3) 32%, rgba(0, 0, 0, 0) 40%); }
  .hero__photo::after { display: none; }

  /* vídeo */
  .video-sec { padding-top: 40px; }
  .video { max-width: none; }
  .video-sec { overflow: hidden; }
  .video-sec__bg { -webkit-mask-image: radial-gradient(54% 54% at 50% 50%, #000 40%, transparent 92%); mask-image: radial-gradient(54% 54% at 50% 50%, #000 40%, transparent 92%); }
  .pain { margin-top: 32px; gap: 22px; }
  .pain__n { font-size: 22px; }

  /* faixa */
  .strip { padding-block: 16px; }
  .strip__group > span { padding: 0 18px; font-size: 14px; }

  /* funcionalidades */
  #funcionalidades.section { padding-block: 40px 32px; }
  .hsec-title { line-height: 1.12; text-wrap: pretty; }
  .closing__text { font-size: 20px; }
  .hsec-title, .closing__text { max-width: 92%; margin-left: auto; margin-right: auto; }
  .hsec-lead { margin-top: 10px; font-size: 15px; max-width: 84%; text-wrap: balance; }
  .closing { --ct: 120px; }
  .closing__lines { width: 200px; }

  /* oferta */
  .offer-sec { padding-block: 40px 56px; }
  .offer { max-width: none; }
  .plans { display: flex; grid-template-columns: none; gap: 12px; margin: 6px calc(-1 * var(--gutter)) -20px; padding: 12px 12px 52px; overflow-x: auto;   /* espaço embaixo para a sombra dos cartões não ser cortada */ overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .plans::-webkit-scrollbar { display: none; }
  .plans .offer { flex: 0 0 calc(100% - 30px); scroll-snap-align: start; }   /* cartão largo; o próximo aparece um pedacinho */
  /* abas Anual | Mensal: a pílula escura anda por dentro do bloco junto com o deslize dos cartões (--p de 0 a 1) */
  /* um buraco só, inteiro, cavado no bloco; a pílula escura anda lá dentro */
  .plans-tabs { --p: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 300px); margin: 26px auto 0; padding: 4px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; background: linear-gradient(180deg, #e2e2e5 0%, #ececee 50%, #f3f3f5 100%); box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.95); }
  .plans-tabs__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(180deg, #050607 0%, #121417 55%, #1d2024 100%); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.95); transform: translateX(calc(var(--p) * 100%)); will-change: transform; }
  .plans-tabs__tab { position: relative; z-index: 1; height: 38px; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.3s; }
  .plans-tabs__tab[aria-selected="true"] { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); }
  .plans-tabs__tab[aria-selected="false"] { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }   /* texto gravado no trilho */
  .plans-tabs__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .plans-head .hsec-title { max-width: none; margin-inline: -8px; font-size: min(var(--sec-title), 6.3vw); text-wrap: balance; }   /* título dos planos mais largo no celular */
  .plans .offer__in { padding: 24px 12px 20px; }
  .plans .offer { box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3); }
  .plans .offer.plan--light { box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06); }
  .plans .offer__item { padding: 9px 12px; gap: 9px; font-size: 14px; }
  .offer__in { padding: 26px 16px 22px; }
  .offer__list { max-width: none; }
  .offer__amount, .offer__per { font-size: clamp(24px, 7.4vw, 30px); }
  .offer .dark__title { max-width: 84%; margin-left: auto; margin-right: auto; }
  .offer .hbtn__btn { padding: 0 44px 0 52px; }

  /* cadastro no celular: tela inteira (página), abre com faixas horizontais subindo de baixo pra cima.
     cobre sempre a tela toda; com o teclado aberto ganha --kb de espaço embaixo (JS) e rola por dentro. */
  .modal { padding: 0 0 var(--kb, 0px); display: flex; flex-direction: column; inset: 0; height: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html:has(#signup:not([hidden])) { background: #fff; }
  .modal__backdrop { position: fixed; }
  /* depois de aberta, a tela é uma página de verdade: fundo branco sólido (rolando ou puxando além do fim, nada da página de baixo aparece) */
  .modal:not(.is-success):not(.is-closing) { animation: mPageBg 0s linear 1.25s forwards; overscroll-behavior: none; }
  @keyframes mPageBg { to { background: #fff; } }
  .modal__lines { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-rows: repeat(24, 1fr); gap: 1px; pointer-events: none; }
  /* cada faixa entra de um lado (alternando esquerda/direita), uma por uma, de baixo até em cima */
  /* faixas sobem de baixo da tela e vão se encaixando rápido uma em cima da outra (da de baixo até a do topo) */
  .modal__lines i { display: block; background: linear-gradient(180deg, #ffffff 0%, #f1f1f4 100%); transform: translateY(100vh); animation: mLineIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 32ms); }
  @keyframes mLineIn { from { transform: translateY(100vh); } to { transform: none; } }
  @keyframes mLineOut { from { transform: none; } to { transform: translateY(100vh); } }
  .modal__card { position: relative; z-index: 1; width: 100%; max-width: none; min-height: var(--page-h, 100dvh); display: flex; flex-direction: column; justify-content: center; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 60px) 22px calc(env(safe-area-inset-bottom, 0px) + 60px); border: 0; border-radius: 0; box-shadow: none; max-height: none; overflow: visible; flex-shrink: 0; animation: mPageIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.1s backwards; }   /* backwards: depois de entrar não fica transform (a janela do DDI se posiciona pela tela) */
  @keyframes mPageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .modal__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; }
  /* fechar: o formulário some e as faixas descem (de cima pra baixo) */
  .modal.is-closing .modal__card { animation: mPageOut 0.22s ease-in both; }
  @keyframes mPageOut { to { opacity: 0; transform: translateY(10px); } }
  .modal.is-closing .modal__lines i { animation: mLineOut 0.38s cubic-bezier(0.7, 0, 0.84, 0) both; animation-delay: calc(120ms + (23 - var(--i)) * 14ms); }
  /* conta criada: volta a ser um bloco centralizado (com os quadradinhos atrás) */
  .modal.is-success .modal__card { display: block; width: auto; min-width: 0; max-width: calc(100% - 24px); min-height: 0; margin: auto 12px; }
  @media (prefers-reduced-motion: reduce) { .modal:not(.is-success):not(.is-closing) { animation: none; background: #fff; } .modal__lines i, .modal.is-closing .modal__lines i { animation: none; transform: none; } .modal__card, .modal.is-closing .modal__card { animation: none; } }
  .field input, .field__toggle, .phone__cc { transition: none; }
  .modal__head { padding: 8px 0 0; }   /* texto pode usar a largura toda (o X fica bem acima) */
  .modal__head h3 { font-size: 31px; }
  .modal__head p { font-size: 14px; max-width: 320px; }
  .form__submit-wrap { width: 100%; }
  /* iOS dá zoom em campos com fonte menor que 16px: todos os campos do popup ficam com 16px no celular */
  .modal input, .modal select, .modal textarea, .phone .phone__search { font-size: 16px; }
  .form__submit-wrap .hbtn__btn { width: 100%; padding: 0 24px; }
  /* formulário em 2 etapas (estilo Typeform): as duas etapas ficam no mesmo lugar e se cruzam —
     a que sai sobe e some enquanto a outra já vem subindo de baixo (ao voltar, o contrário) */
  .steps { display: grid; }
  .step { grid-area: 1 / 1; display: grid; gap: 16px; align-content: start; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0s linear 0.55s; }
  .step.is-active { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease 0.08s, visibility 0s linear 0s; }
  .step:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--step-off, 36px)); }
  .step--2 .field--tel { order: -1; }   /* na etapa 2 o WhatsApp vem antes da senha */
  /* na 2ª etapa a frase dos 30 dias vira o título; a frase de baixo do formulário sai no celular */
  .step--2 .step__title { display: block; order: -2; margin: 0 auto 6px; max-width: none; text-align: center; font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }   /* mesmo estilo do "Crie sua conta" */
  #signupForm .form__hint { display: none; }
  /* na 2ª etapa o cabeçalho ("Crie sua conta" + texto) some suavemente; volta ao tocar em Voltar */
  .modal__head { max-height: 220px; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, padding 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  #signupForm { transition: margin-top 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .modal__card:has(#signupForm[data-step="2"]) .modal__head { max-height: 0; opacity: 0; padding-top: 0; }
  .modal__card:has(#signupForm[data-step="2"]) #signupForm { margin-top: 0; }
  .step--1 .form__next-wrap { display: flex; justify-content: center; margin-top: 10px; }
  .step--2 .form__back { display: inline-flex; }
  @media (prefers-reduced-motion: reduce) { .step { transition: none !important; } }
  .form__actions { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
  .form__actions .form__submit-wrap { margin: 0; flex: 0 1 auto; width: auto; min-width: 0; }
  .form__actions .form__submit-wrap .hbtn__btn { width: auto; padding: 0 18px; white-space: nowrap; }
  .form__next-wrap { width: 84%; margin-inline: auto; }
  .form__next-wrap .hbtn__btn { width: 100%; padding: 0 24px; }
  .form__back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 58px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; transition: background 0.2s; }
  .form__back:active { background: var(--surface); }
  .form__back-ic { width: 16px; height: 16px; flex: none; }
  /* formulário dentro do mesmo bloco da "Conta criada": aro metálico + fundo branco + sombra */
  .modal__card { padding-left: 12px; padding-right: 12px; }
  .modal__form { padding: 26px 18px 24px; border: 6px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #d9d9de 0%, #f4f4f6 22%, #c9c9cf 48%, #f1f1f4 74%, #d4d4d9 100%) border-box; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06); }
  @media (max-width: 360px) {
    .modal__card { padding-left: 10px; padding-right: 10px; }
    .modal__form { padding: 22px 14px 20px; }
    .form__back { padding: 0 12px 0 8px; gap: 4px; }
    .form__actions .form__submit-wrap .hbtn__btn { padding: 0 12px; font-size: 12.5px; gap: 5px; }
    .form__actions { gap: 8px; }
  }
  /* DDI no celular: janela que sobe de baixo, com o mesmo visual do bloco "Conta criada" (aro metálico + fundo branco) */
  .phone__menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: var(--sheet-bottom, 12px); z-index: 300; display: flex; flex-direction: column; max-height: var(--sheet-max, 72vh); padding: 12px 14px 14px; border: 6px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #d9d9de 0%, #f4f4f6 22%, #c9c9cf 48%, #f1f1f4 74%, #d4d4d9 100%) border-box; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.35), 0 0 0 100vmax rgba(10, 10, 10, 0.4); animation: sheetUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .phone__menu::before { content: ''; flex: none; align-self: center; width: 38px; height: 4px; margin: 0 0 12px; border-radius: 2px; background: #d6d6db; }
  @keyframes sheetUp { from { transform: translateY(calc(100% + 40px)); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0), 0 0 0 100vmax rgba(10, 10, 10, 0); } to { transform: none; } }
  .phone__menu.is-leaving { animation: sheetDown 0.3s cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
  @keyframes sheetDown { from { transform: none; } to { transform: translateY(calc(100% + 40px)); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0), 0 0 0 100vmax rgba(10, 10, 10, 0); } }
  .phone__searchbox { flex: none; }
  .phone .phone__search { height: 46px; border-radius: 12px; font-size: 16px; }
  .phone__list { flex: 1; min-height: 0; max-height: none; margin-top: 10px; padding-top: 6px; -webkit-overflow-scrolling: touch; }
  .phone__list li { padding: 12px 10px; font-size: 15px; border-radius: 10px; }
  @media (prefers-reduced-motion: reduce) { .phone__menu { animation: none; } }

  /* rodapé */
}
@media (max-width: 420px) {
  .hero .h1 { font-size: clamp(24px, 7.6vw, 32px); }
  .hbtn__btn { padding: 0 52px 0 60px; }
}

/* ---------- Abertura: logo no fundo branco → quadradinhos somem → logo vai para a navbar ---------- */
.intro { position: fixed; inset: 0; z-index: 1000; background: #fff; pointer-events: none; animation: introSafety 0s linear 8s forwards; }
.intro.is-tiled { background: transparent; }
.intro__tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); grid-template-rows: repeat(var(--rows, 18), 1fr); }
.intro__tiles i { display: block; background: #fff; box-shadow: 0 0 0 1px #fff; }
.intro.is-leaving .intro__tiles i { animation: introTileOut 0.55s cubic-bezier(0.55, 0, 0.75, 0.25) both; animation-delay: var(--d, 0s); }
@keyframes introTileOut { to { opacity: 0; transform: scale(0.2); } }
.intro__logo { position: fixed; left: 50%; top: 50%; z-index: 1001; width: clamp(84px, 12vw, 132px); aspect-ratio: 391.3 / 563.3; color: #fff; mix-blend-mode: difference; pointer-events: none; transform: translate(-50%, -50%); transform-origin: 0 0; animation: introLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both, introSafety 0s linear 8s forwards; }
/* a logo inverte a cor sozinha conforme o que está atrás: preta sobre o branco, branca sobre o escuro (sem sombra/borda) */
@keyframes introLogoIn { from { opacity: 0; transform: translate(-50%, -46%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes introSafety { to { visibility: hidden; } }   /* se algo falhar, a abertura some sozinha */
html:has(.intro.is-running:not(.is-flying)), html:has(.intro.is-running:not(.is-flying)) body { overflow: hidden; }   /* rolagem liberada quando a logo começa a ir para a navbar */
@media (prefers-reduced-motion: reduce) { .intro, .intro__logo { display: none; } }