/* AppLeads Tecnologia — site institucional
   Um único CSS: tokens, base, componentes e páginas. Mobile-first. */

/* ---------- Tokens ---------- */
:root {
  --brand: #0dcaaa;
  --brand-ink: #078f7a;
  --brand-soft: #e3faf5;
  --brand-deep: #0a9f86;
  --ink-900: #333333;
  --ink-800: #373435;
  --ink-600: #606062;
  --ink-400: #9a9a9c;
  --line: #e4e7ea;
  --bg: #ffffff;
  --bg-soft: #f5f7f8;
  --warn: #f4a261;
  --warn-soft: #fdeedd;
  --info-soft: #e8eefc;
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.375rem;
  --fs-4: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-5: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 14px;
  --radius-lg: 24px;
  --shadow: 0 10px 30px rgba(55, 52, 53, 0.08);
  --shadow-lg: 0 24px 60px rgba(55, 52, 53, 0.16);
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --produto-cor: var(--brand);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--bg);
  overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink-800);
  line-height: 1.15;
  margin: 0 0 var(--s2);
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--fs-5);
  font-weight: 700;
}
h2 {
  font-size: var(--fs-4);
  font-weight: 700;
}
h3 {
  font-size: var(--fs-3);
  font-weight: 600;
}
h4 {
  font-size: var(--fs-2);
  font-weight: 600;
}
p {
  margin: 0 0 var(--s2);
}
a {
  color: var(--brand-ink);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
ul,
ol {
  margin: 0 0 var(--s2);
  padding-left: 1.25rem;
}
strong {
  font-weight: 600;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.secao {
  padding-block: var(--s5);
}
.secao--suave {
  background: var(--bg-soft);
}
.secao--compacta {
  padding-block: var(--s4);
}
.titulo-secao {
  max-width: 40ch;
}
.subtitulo {
  font-size: var(--fs-2);
  color: var(--ink-600);
  max-width: 60ch;
}
.sobretitulo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--s1);
}
.centro {
  text-align: center;
}
.centro .titulo-secao,
.centro .subtitulo {
  margin-inline: auto;
}
.icone {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-1);
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.btn--primario {
  background: var(--brand);
  color: var(--ink-800);
}
.btn--primario:hover {
  background: #1fdcbb;
}
.btn--secundario {
  background: transparent;
  color: var(--ink-800);
  border-color: var(--ink-800);
}
.btn--secundario:hover {
  background: var(--ink-800);
  color: #fff;
}
.btn--claro {
  background: #fff;
  color: var(--ink-800);
}
.btn--contorno-claro {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--contorno-claro:hover {
  border-color: #fff;
}
.btn--whatsapp {
  background: #25d366;
  color: #0b3d22;
}
.btn--whatsapp:hover {
  background: #3ae07a;
}
.btn--pequeno {
  padding: 0.55rem 1rem;
  font-size: var(--fs-0);
}
.btn--bloco {
  width: 100%;
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

/* ---------- Selos ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background: var(--bg-soft);
  color: var(--ink-600);
  white-space: nowrap;
}
.selo::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.selo--web {
  background: var(--info-soft);
  color: #2d4e9f;
}
.selo--app {
  background: #f0e9fb;
  color: #6a3fa7;
}
.selo--marca {
  background: #fdeef0;
  color: #a1344b;
}
.selo--disponivel {
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.selo--beta {
  background: var(--warn-soft);
  color: #a3561a;
}
.selo--embreve {
  background: var(--bg-soft);
  color: var(--ink-600);
}
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s2);
}

/* ---------- Navegação ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 68px;
}
.nav__logo img {
  height: 34px;
  width: auto;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-800);
  cursor: pointer;
}
.nav__toggle .icone {
  width: 1.4rem;
  height: 1.4rem;
}
.nav__toggle .icone--fechar {
  display: none;
}
.nav__menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: var(--s2) var(--gutter) var(--s3);
}
.nav--aberta .nav__menu {
  display: block;
}
.nav--aberta .nav__toggle .icone--abrir {
  display: none;
}
.nav--aberta .nav__toggle .icone--fechar {
  display: block;
}
.nav__links {
  list-style: none;
  margin: 0 0 var(--s2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav__links a {
  display: block;
  padding: 0.65rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-800);
  border-bottom: 1px solid var(--line);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--brand-ink);
  text-decoration: none;
}
@media (min-width: 900px) {
  .nav__toggle {
    display: none;
  }
  .nav__menu {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--s3);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav__links {
    flex-direction: row;
    gap: var(--s3);
    margin: 0;
  }
  .nav__links a {
    padding: 0.25rem 0;
    border: 0;
    font-size: 0.95rem;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--s4) var(--s5);
  background:
    radial-gradient(900px 500px at 85% -10%, var(--brand-soft), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.hero__grid {
  display: grid;
  gap: var(--s4);
  align-items: center;
}
.hero h1 {
  max-width: 18ch;
}
.hero .subtitulo {
  margin-bottom: var(--s3);
}
.hero__nota {
  font-size: var(--fs-0);
  color: var(--ink-600);
  margin-top: var(--s2);
}
.hero__visual {
  position: relative;
}
.hero__visual .dispositivo--celular {
  position: absolute;
  right: -4px;
  bottom: -24px;
  width: 30%;
  min-width: 120px;
  max-width: 190px;
  box-shadow: var(--shadow-lg);
}
.hero--produto {
  background:
    radial-gradient(800px 420px at 90% -10%, color-mix(in srgb, var(--produto-cor) 14%, #fff), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.hero--produto .hero__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s2);
}
.hero--produto .hero__marca img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.hero--produto .hero__marca span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2);
  color: var(--ink-800);
}
.hero--escuro {
  background: var(--ink-800);
  color: #fff;
}
.hero--escuro h1,
.hero--escuro .subtitulo {
  color: #fff;
}
@media (min-width: 900px) {
  .hero {
    padding-block: var(--s5) var(--s6);
  }
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s5);
  }
  .hero__grid--app {
    grid-template-columns: 1.3fr 0.7fr;
  }
  .hero__visual .dispositivo--celular {
    right: -28px;
    bottom: -40px;
  }
}

/* ---------- Molduras de dispositivo ---------- */
.dispositivo {
  position: relative;
  margin: 0;
}
.dispositivo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.dispositivo--notebook {
  border-radius: 14px 14px 4px 4px;
  background: #1f1f21;
  padding: 10px 10px 0;
  box-shadow: var(--shadow-lg);
}
.dispositivo--notebook::before {
  content: "";
  display: block;
  height: 14px;
  margin: -4px -4px 6px;
  background: radial-gradient(circle at 12px 7px, #fe5f57 3px, transparent 4px),
    radial-gradient(circle at 26px 7px, #febc2e 3px, transparent 4px),
    radial-gradient(circle at 40px 7px, #28c840 3px, transparent 4px);
}
.dispositivo--notebook img {
  aspect-ratio: 16 / 9;
  border-radius: 4px 4px 0 0;
  background: #fff;
}
.dispositivo--notebook::after {
  content: "";
  display: block;
  height: 12px;
  margin: 0 -4% -12px;
  background: linear-gradient(#3a3a3d, #2a2a2c);
  border-radius: 0 0 12px 12px;
}
.dispositivo--celular {
  border-radius: 36px;
  background: #1f1f21;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  width: min(100%, 300px);
}
.dispositivo--celular img {
  aspect-ratio: 390 / 844;
  border-radius: 26px;
  background: #fff;
}
.dispositivo--simples {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--line);
}
.dispositivo__legenda {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-0);
  color: var(--ink-600);
  text-align: center;
}

/* ---------- Portas (home) ---------- */
.portas {
  display: grid;
  gap: var(--s2);
}
.porta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform 0.15s, border-color 0.15s;
}
.porta:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--brand);
}
.porta__icone {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.porta__icone .icone {
  width: 1.5rem;
  height: 1.5rem;
}
.porta h3 {
  margin: 0;
}
.porta p {
  margin: 0;
  color: var(--ink-600);
}
.porta__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@media (min-width: 768px) {
  .portas {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Vitrine de produtos ---------- */
.vitrine__grupo + .vitrine__grupo {
  margin-top: var(--s4);
}
.vitrine__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.vitrine__cabecalho h3 {
  margin: 0;
}
.vitrine__cabecalho p {
  margin: 0;
  color: var(--ink-600);
}
.cards {
  display: grid;
  gap: var(--s2);
}
.card-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  color: inherit;
}
.card-produto:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--produto-cor) 50%, var(--line));
}
.card-produto__topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-produto__logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--bg-soft);
  padding: 4px;
  flex: none;
}
.card-produto h4 {
  margin: 0;
  font-size: var(--fs-2);
}
.card-produto__frase {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.95rem;
}
.card-produto__tela {
  margin: 0.25rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.card-produto__tela img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.card-produto__tela--celular img {
  aspect-ratio: 16 / 10;
  object-position: center 15%;
}
.card-produto__rodape {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--fs-0);
  color: var(--ink-600);
}
.card-produto__rodape strong {
  color: var(--ink-800);
}
.card-produto__link {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Passos ---------- */
.passos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s2);
  counter-reset: passo;
}
.passo {
  counter-increment: passo;
  padding: var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3);
  color: var(--brand-ink);
  margin-bottom: 0.5rem;
}
.passo h4 {
  margin-bottom: 0.35rem;
}
.passo p {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .passos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .passos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Problema / recursos / público ---------- */
.bloco-ps {
  display: grid;
  gap: var(--s3);
}
.bloco-ps__col {
  padding: var(--s3);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}
.bloco-ps__col--destaque {
  background: var(--ink-800);
  color: #fff;
  border-color: var(--ink-800);
}
.bloco-ps__col--destaque h2,
.bloco-ps__col--destaque h3 {
  color: #fff;
}
.bloco-ps__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.bloco-ps__col li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.bloco-ps__col li .icone {
  margin-top: 0.3rem;
  color: var(--produto-cor);
}
.bloco-ps__col--destaque li .icone {
  color: var(--brand);
}
@media (min-width: 900px) {
  .bloco-ps {
    grid-template-columns: 1fr 1fr;
  }
}
.recursos {
  display: grid;
  gap: var(--s2);
}
.recurso {
  padding: var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.recurso__icone {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--produto-cor) 12%, #fff);
  color: var(--produto-cor);
  margin-bottom: 0.75rem;
}
.recurso__icone .icone {
  width: 1.4rem;
  height: 1.4rem;
}
.recurso h3 {
  font-size: var(--fs-2);
  margin-bottom: 0.35rem;
}
.recurso p {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.95rem;
}
@media (min-width: 640px) {
  .recursos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .recursos {
    grid-template-columns: repeat(3, 1fr);
  }
}
.publico {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.publico li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--s2) var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.publico .icone {
  color: var(--brand-ink);
  margin-top: 0.25rem;
}
.publico strong {
  display: block;
  font-family: var(--font-display);
}
@media (min-width: 768px) {
  .publico {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Galeria de telas ---------- */
.galeria {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0 var(--s2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.galeria__item {
  flex: 0 0 85%;
  scroll-snap-align: start;
  margin: 0;
  cursor: zoom-in;
}
.galeria--app .galeria__item {
  flex-basis: 60%;
  max-width: 260px;
}
.galeria__item figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-0);
  color: var(--ink-600);
}
.galeria__item .dispositivo--celular {
  width: 100%;
}
@media (min-width: 768px) {
  .galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
  }
  .galeria--app {
    grid-template-columns: repeat(3, 1fr);
  }
  .galeria__item,
  .galeria--app .galeria__item {
    flex: none;
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .galeria--app {
    grid-template-columns: repeat(4, 1fr);
  }
}
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1400px);
  max-height: 96vh;
}
.lightbox::backdrop {
  background: rgba(20, 20, 22, 0.88);
}
.lightbox img {
  max-width: 96vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  margin-inline: auto;
}
.lightbox__legenda {
  color: #fff;
  text-align: center;
  margin: 0.75rem 0 0;
  font-size: var(--fs-0);
}
.lightbox__fechar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink-800);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ---------- White-label ---------- */
.marca-propria {
  padding: var(--s4) var(--s3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ink-800), #4a4648);
  color: #fff;
}
.marca-propria h2,
.marca-propria h3 {
  color: #fff;
}
.marca-propria .sobretitulo {
  color: var(--brand);
}
.marca-propria__grid {
  display: grid;
  gap: var(--s2);
  margin: var(--s3) 0;
}
.marca-propria__item {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.marca-propria__item .icone {
  color: var(--brand);
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}
.marca-propria__item h3 {
  font-size: var(--fs-2);
  margin-bottom: 0.25rem;
}
.marca-propria__item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}
@media (min-width: 640px) {
  .marca-propria__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .marca-propria {
    padding: var(--s5);
  }
  .marca-propria__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Status ---------- */
.status-box {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 6px solid var(--produto-cor);
}
.status-box__preco {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--ink-800);
}
.status-box__preco small {
  font-size: var(--fs-0);
  font-weight: 500;
  color: var(--ink-600);
}
.status-box p {
  margin: 0;
  color: var(--ink-600);
}
@media (min-width: 900px) {
  .status-box {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ---------- Faixa sobre / números ---------- */
.numeros {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(2, 1fr);
}
.numero {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
}
.numero strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.1;
}
.numero span {
  color: var(--ink-600);
  font-size: var(--fs-0);
}
@media (min-width: 768px) {
  .numeros {
    grid-template-columns: repeat(4, 1fr);
  }
}
.faixa-sobre {
  display: grid;
  gap: var(--s3);
  align-items: center;
}
@media (min-width: 900px) {
  .faixa-sobre {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }
}

/* ---------- CTA ---------- */
.cta {
  background: var(--ink-800);
  color: #fff;
  padding-block: var(--s5);
}
.cta h2 {
  color: #fff;
  max-width: 24ch;
}
.cta p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 55ch;
}
.cta__grid {
  display: grid;
  gap: var(--s3);
  align-items: center;
}
@media (min-width: 900px) {
  .cta__grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .cta__acoes {
    justify-self: end;
  }
}

/* ---------- Footer ---------- */
.footer {
  background: #2b292a;
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--s4) var(--s3);
  font-size: var(--fs-0);
}
.footer a {
  color: #fff;
}
.footer__grid {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.footer__marca img {
  height: 36px;
  width: auto;
  margin-bottom: var(--s2);
}
.footer h4 {
  color: #fff;
  font-size: var(--fs-1);
  margin-bottom: 0.75rem;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.footer__contato li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.footer__contato .icone {
  margin-top: 0.2rem;
  color: var(--brand);
}
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}
.footer__legal a {
  color: rgba(255, 255, 255, 0.85);
}
.footer--curto {
  padding-block: var(--s2);
}
.footer--curto .footer__base {
  border-top: 0;
}
@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s;
}
.zap-flutuante:hover {
  transform: scale(1.06);
  text-decoration: none;
}
.zap-flutuante .icone {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
  stroke: none;
}

/* ---------- Formulário ---------- */
.form {
  display: grid;
  gap: var(--s2);
}
.form__campo {
  display: grid;
  gap: 0.35rem;
}
.form__campo label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-0);
  color: var(--ink-800);
}
.form__campo input,
.form__campo select,
.form__campo textarea {
  width: 100%;
  font: inherit;
  padding: 0.8rem 0.95rem;
  border: 1px solid #cfd4d9;
  border-radius: 10px;
  background: #fff;
  color: var(--ink-900);
}
.form__campo input:focus,
.form__campo select:focus,
.form__campo textarea:focus {
  outline: 3px solid var(--brand-soft);
  border-color: var(--brand);
}
.form__campo textarea {
  min-height: 130px;
  resize: vertical;
}
.form__linha {
  display: grid;
  gap: var(--s2);
}
.form__aceite {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-0);
  color: var(--ink-600);
}
.form__aceite input {
  margin-top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--brand-ink);
}
.form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.form__retorno {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  font-weight: 500;
}
.form__retorno--ok {
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.form__retorno--erro {
  background: #fdecea;
  color: #9b2c2c;
}
.form__retorno[hidden] {
  display: none;
}
@media (min-width: 640px) {
  .form__linha {
    grid-template-columns: 1fr 1fr;
  }
}
.contato-grid {
  display: grid;
  gap: var(--s4);
}
.contato-lateral {
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.contato-card {
  padding: var(--s3);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}
.contato-card h3 {
  font-size: var(--fs-2);
}
.contato-card p {
  color: var(--ink-600);
  margin-bottom: var(--s2);
}
@media (min-width: 900px) {
  .contato-grid {
    grid-template-columns: 1.3fr 0.9fr;
  }
}

/* ---------- Texto corrido (privacidade, sobre) ---------- */
.prose {
  max-width: 70ch;
}
.prose h2 {
  font-size: var(--fs-3);
  margin-top: var(--s4);
}
.prose h3 {
  font-size: var(--fs-2);
  margin-top: var(--s3);
}
.prose li + li {
  margin-top: 0.35rem;
}

/* ---------- Páginas legais (privacidade, termos, cookies) ---------- */
.legal-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s3);
}
.legal-abas a {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-0);
  font-weight: 500;
  color: var(--ink-800);
}
.legal-abas a:hover {
  text-decoration: none;
  border-color: var(--brand);
}
.legal-abas a[aria-current="page"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.legal-identificacao {
  display: grid;
  gap: 0.6rem;
  margin: var(--s3) 0;
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.legal-identificacao div {
  display: grid;
  gap: 0.1rem;
}
.legal-identificacao dt {
  font-size: var(--fs-0);
  color: var(--ink-600);
}
.legal-identificacao dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .legal-identificacao div {
    grid-template-columns: 14rem 1fr;
    gap: var(--s2);
  }
}
.legal-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s2) 0 var(--s3);
  font-size: var(--fs-0);
}
.legal-tabela th,
.legal-tabela td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.legal-tabela th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-800);
  background: var(--bg-soft);
}
.legal-tabela code {
  font-size: 0.85em;
}
@media (max-width: 639px) {
  .legal-tabela thead {
    display: none;
  }
  .legal-tabela tr {
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
  }
  .legal-tabela td {
    display: block;
    border: 0;
    padding: 0.2rem 0;
  }
  .legal-tabela td::before {
    content: attr(data-rotulo) ": ";
    font-weight: 600;
    color: var(--ink-800);
  }
}
.legal-duvidas {
  margin-top: var(--s4);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  color: var(--ink-600);
}

/* ---------- Página 404 ---------- */
.pagina-404 {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--s5);
}
.pagina-404 h1 {
  font-size: var(--fs-5);
}

/* ---------- Pequenos utilitários ---------- */
.mt-2 {
  margin-top: var(--s2);
}
.mt-3 {
  margin-top: var(--s3);
}
.mt-4 {
  margin-top: var(--s4);
}
.mb-0 {
  margin-bottom: 0;
}
.texto-suave {
  color: var(--ink-600);
}
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 600;
}

/* Listas dentro da faixa de duas colunas ficam em coluna única */
@media (min-width: 900px) {
  .faixa-sobre .publico {
    grid-template-columns: 1fr;
  }
  .faixa-sobre .passos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Sob medida: destaque de IA e história 3D ---------- */
.sm-destaque-ia {
  margin: var(--s2) 0 0;
  padding: var(--s2) var(--s3);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-soft);
  color: var(--ink-800);
  line-height: 1.6;
}
.sm-destaque-ia strong { display: block; font-family: var(--font-display); color: var(--brand-ink); }
.sm-historia { position: relative; margin-top: var(--s5); }
.sm-trilho { display: none; }
.sm-historia[data-palco="sim"] .sm-trilho { display: block; position: absolute; inset: 0; pointer-events: none; }
.sm-palco { position: sticky; top: 0; height: 100vh; height: 100svh; }
.sm-canvas { display: block; width: 100%; height: 100%; }
.sm-capitulos {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s2);
}
.sm-historia[data-palco="sim"] .sm-capitulos { display: block; position: relative; }
.sm-historia[data-palco="sim"] .sm-capitulo { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.sm-cartao {
  height: 100%;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}
.sm-historia[data-palco="sim"] .sm-cartao { width: 100%; max-width: 430px; height: auto; }
.sm-cartao--ia { border-color: var(--brand); box-shadow: 0 24px 60px rgba(13, 202, 170, 0.22); }
.sm-rotulo { margin: 0; color: var(--brand-ink); font-size: var(--fs-0); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sm-rotulo span { margin-right: 0.35rem; font-family: var(--font-display); font-weight: 700; color: var(--brand); }
.sm-cartao h3 { margin: 0.6rem 0 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); line-height: 1.2; color: var(--ink-900); }
.sm-cartao p:not(.sm-rotulo) { margin: 0.75rem 0 0; color: var(--ink-600); font-size: var(--fs-2); line-height: 1.65; }
@media (max-width: 899px) {
  .sm-historia[data-palco="sim"] .sm-capitulo { align-items: flex-end; padding-bottom: 5vh; }
  .sm-historia[data-palco="sim"] .sm-cartao { max-width: none; padding: var(--s2) var(--s3); }
  .sm-cartao p:not(.sm-rotulo) { font-size: var(--fs-1); }
}