@charset "UTF-8";
/* ==========================================================================
   Eventool — Design System
   Custom, dependency-free. Substitui o template Bootstrap.
   Sumário:
     01. Fontes
     02. Tokens
     03. Reset & base
     04. Tipografia
     05. Layout (container, section, grid)
     06. Utilitários
     07. Decoração (glow, pattern, app frame)
     08. Botões
     09. Pills, badges, chips
     10. Cards & bento
     11. Listas de benefícios
     12. Abas
     13. Acordeão
     14. Marquee
     15. Prova social (depoimentos, stats, avatares, rating)
     16. Passos / timeline
     17. Comparativo antes-depois
     18. Preços
     19. Formulários
     20. Header & navegação
     21. Footer
     22. Prose (conteúdo do blog)
     23. Movimento
   ========================================================================== */

/* 01. Fontes ============================================================== */

/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02. Tokens ============================================================== */

:root {
  /* Marca */
  --brand: #5f41fb;
  --brand-hi: #7358fc;
  --brand-lo: #4a2ee0;
  --brand-2: #893efb;
  --brand-ink: #2b1a80;
  --brand-soft: #efecff;
  --brand-softer: #f6f4ff;

  /* Neutros com leve viés violeta */
  --ink-950: #08070f;
  --ink-900: #0d0b17;
  --ink-800: #161329;
  --ink-700: #241f3d;
  --ink-600: #3f3961;
  --ink-500: #55507a;
  --ink-400: #6b6489;
  --ink-300: #b8b3cc;
  --ink-200: #dedbea;
  --ink-150: #e9e6f2;
  --ink-100: #f2f0f8;
  --ink-50: #f8f7fc;

  /* Semânticas */
  --ok: #0b7a4d;
  --ok-soft: #e6f6ef;
  --warn: #9a5b06;
  --warn-soft: #fdf3e3;
  --info: #0b6ea8;
  --info-soft: #e6f2fa;
  --danger: #b3243f;
  --danger-soft: #fdecef;
  --star: #dd9109;

  /* Superfícies (tema claro) */
  --bg: #fff;
  --bg-sub: var(--ink-50);
  --bg-elev: #fff;
  --bg-inset: var(--ink-100);
  --fg: var(--ink-900);
  --fg-body: var(--ink-500);
  --fg-mut: var(--ink-400);
  --line: rgb(36 31 61 / 10%);
  --line-strong: rgb(36 31 61 / 18%);
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --on-accent: #fff;

  /* Formas — espelham o Ant Design usado no app (controles 6px) */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-full: 999px;

  /* Controles: mesma altura e tipografia do sistema */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 46px;
  --control-fs: 0.875rem;
  --line-input: #d9d9d9;

  /* Sombras */
  --sh-1: 0 1px 2px rgb(13 11 23 / 5%), 0 1px 3px rgb(13 11 23 / 5%);
  --sh-2: 0 2px 4px rgb(13 11 23 / 4%), 0 10px 24px -10px rgb(13 11 23 / 12%);
  --sh-3: 0 4px 8px rgb(13 11 23 / 4%), 0 28px 64px -24px rgb(13 11 23 / 22%);
  --sh-brand: 0 24px 60px -24px rgb(95 65 251 / 45%);
  --sh-btn: 0 2px 0 rgb(88 5 255 / 6%);

  /* Tipografia */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  --t-d1: clamp(2.3rem, 1.45rem + 3.2vw, 3.6rem);
  --t-d2: clamp(1.9rem, 1.45rem + 1.8vw, 2.7rem);
  --t-d3: clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem);
  --t-h4: clamp(1.2rem, 1.12rem + 0.35vw, 1.4rem);
  --t-h5: 1.0625rem;
  --t-lead: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --t-body: 1rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;

  /* Espaço */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --maxw: 1200px;
  --maxw-wide: 1400px;
  --maxw-prose: 44rem;
  --pad-sec: clamp(4rem, 7.5vw, 7rem);
  --pad-sec-sm: clamp(2.75rem, 5vw, 4.25rem);
  --gap: clamp(1rem, 2vw, 1.75rem);

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.22s;

  /* Header */
  --header-h: 68px;
  color-scheme: light;
}

/* Escopo escuro — componentes leem apenas variáveis semânticas */
.surface-dark,
[data-surface='dark'] {
  --bg: var(--ink-900);
  --bg-sub: #12101f;
  --bg-elev: #191630;
  --bg-inset: #1d1936;
  --fg: #fff;
  --fg-body: #b9b4cf;
  --fg-mut: #948eb0;
  --line: rgb(255 255 255 / 10%);
  --line-strong: rgb(255 255 255 / 20%);
  --line-input: rgb(255 255 255 / 24%);
  --accent: #a08cff;
  --accent-soft: rgb(160 140 255 / 14%);
  --sh-1: none;
  --sh-2: 0 10px 30px -12px rgb(0 0 0 / 60%);
  --sh-3: 0 30px 70px -30px rgb(0 0 0 / 80%);
  --ok: #34d399;
  --ok-soft: rgb(52 211 153 / 14%);
  --danger: #fb7185;
  --danger-soft: rgb(251 113 133 / 14%);
  color-scheme: dark;
}

/* 03. Reset & base ======================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tamanho padrão dos ícones inline; componentes sobrescrevem quando precisam */
svg {
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

a:hover {
  color: var(--brand-lo);
}

[data-surface='dark'] a:hover,
.surface-dark a:hover {
  color: #c4b5ff;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

hr {
  height: 1px;
  border: 0;
  background: var(--line);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--brand);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.65rem 1rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: #fff;
  background: var(--ink-900);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  color: #fff;
  transform: translateY(0);
}

/* 04. Tipografia ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1,
.t-d1 {
  font-size: var(--t-d1);
  letter-spacing: -0.022em;
  line-height: 1.08;
}

h2,
.t-d2 {
  font-size: var(--t-d2);
  letter-spacing: -0.018em;
  line-height: 1.12;
}

h3,
.t-d3 {
  font-size: var(--t-d3);
  letter-spacing: -0.012em;
}

h4,
.t-h4 {
  font-size: var(--t-h4);
  letter-spacing: -0.008em;
}

h5,
.t-h5 {
  font-size: var(--t-h5);
  letter-spacing: -0.005em;
}

h6 {
  font-size: 1rem;
  letter-spacing: -0.005em;
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-body);
}

.fs-sm {
  font-size: var(--t-sm);
}

.fs-xs {
  font-size: var(--t-xs);
}

.muted {
  color: var(--fg-mut);
}

.strong {
  color: var(--fg);
  font-weight: 600;
}

.grad-text {
  background: linear-gradient(96deg, var(--brand) 8%, var(--brand-2) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-surface='dark'] .grad-text,
.surface-dark .grad-text {
  background: linear-gradient(96deg, #a996ff 0%, #d6b4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.accent-text {
  color: var(--accent);
}

.nowrap {
  white-space: nowrap;
}

/* Cabeçalho de seção */
.section-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.section-head--left {
  margin-inline: 0;
  text-align: left;
}

.section-head > * + * {
  margin-top: 1rem;
}

.section-head .lead {
  max-width: 40rem;
  margin-inline: auto;
}

.section-head--left .lead {
  margin-inline: 0;
}

/* 05. Layout ============================================================== */

.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: calc(var(--maxw-wide) + var(--gutter) * 2);
}

.container--prose {
  max-width: calc(var(--maxw-prose) + var(--gutter) * 2);
}

.section {
  position: relative;
  padding-block: var(--pad-sec);
}

.section--sm {
  padding-block: var(--pad-sec-sm);
}

.section--top-0 {
  padding-top: 0;
}

.section--bottom-0 {
  padding-bottom: 0;
}

.surface-sub {
  background: var(--bg-sub);
}

.surface-dark {
  background: var(--bg);
  color: var(--fg-body);
}

.surface-brand-soft {
  background: linear-gradient(180deg, var(--brand-softer), #fff);
}

.clip {
  overflow: clip;
}

/* Grid */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

.grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.grid--split-lead {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.grid--sidebar {
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (width < 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .grid--sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Inverte a ordem das colunas no desktop, mantendo a leitura natural no mobile */
.grid--reverse > :first-child {
  order: 2;
}

@media (width < 860px) {
  .grid--split,
  .grid--split-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--reverse > :first-child {
    order: 0;
  }
}

@media (width < 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--2-keep,
  .grid--4.grid--2-keep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.cluster--center {
  justify-content: center;
}

.cluster--between {
  justify-content: space-between;
}

.cluster--tight {
  gap: 0.5rem;
}

.cluster--lg {
  gap: 1rem 1.5rem;
}

/* 06. Utilitários ========================================================= */

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mt-7 { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 0.75rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mb-7 { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.relative { position: relative; }
.z-1 { position: relative; z-index: 1; }
.hide-sm { display: initial; }
.only-sm { display: none; }

@media (width < 860px) {
  .hide-sm { display: none !important; }
  .only-sm { display: initial; }
  .text-center-sm { text-align: center; }
  .cluster--center-sm { justify-content: center; }
}

.measure {
  max-width: 40rem;
}

.measure-sm {
  max-width: 32rem;
}

/* 07. Decoração =========================================================== */

.glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

.glow--hero {
  inset-inline: -10%;
  top: -9rem;
  height: 40rem;
  background:
    radial-gradient(40% 46% at 26% 46%, rgb(95 65 251 / 40%), transparent 68%),
    radial-gradient(36% 42% at 72% 40%, rgb(137 62 251 / 34%), transparent 68%),
    radial-gradient(64% 52% at 50% 8%, rgb(124 99 255 / 20%), transparent 72%);
  opacity: 0.82;
}

.glow--sm {
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgb(95 65 251 / 22%), transparent 68%);
}

.surface-dark .glow--sm,
[data-surface='dark'] .glow--sm {
  background: radial-gradient(circle, rgb(124 99 255 / 40%), transparent 68%);
  opacity: 0.75;
}

/* Malha de linhas para seções escuras */
.grid-lines::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 20%, transparent 100%);
}

/* Moldura de navegador para prints do produto */
.appframe {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}

.appframe__bar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--bg-sub);
  border-bottom: 1px solid var(--line);
}

.appframe__dot {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--ink-300);
  border-radius: 50%;
}

.appframe__url {
  flex: 1;
  max-width: 18rem;
  margin-inline: auto;
  padding: 0.2rem 0.75rem;
  overflow: hidden;
  font-size: var(--t-xs);
  color: var(--fg-mut);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.appframe > img {
  width: 100%;
}

/* Em telas pequenas mostra um recorte legível em vez da tela inteira reduzida */
@media (width < 700px) {
  .appframe > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: left top;
  }
}

.appframe--glow {
  box-shadow: var(--sh-3), 0 44px 90px -50px rgb(95 65 251 / 65%);
}

.media-round {
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

.media-round--flat {
  box-shadow: none;
  border: 1px solid var(--line);
}

.media-round img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 08. Botões ============================================================== */

.btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding-inline: 1.15rem;
  font-family: var(--font-body);
  font-size: var(--control-fs);
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  background: var(--bg-elev);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn:hover {
  color: var(--fg);
}

.btn svg,
.btn:hover svg {
  width: 1.05em;
  height: 1.05em;
  color: currentcolor;
}

.btn__arrow {
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* Primário: mesmo botão sólido do sistema, inclusive a sombra */
.btn--primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: var(--sh-btn);
}

.btn--primary:hover {
  color: #fff;
  background: var(--brand-hi);
  border-color: var(--brand-hi);
}

.btn--primary:active {
  background: var(--brand-lo);
  border-color: var(--brand-lo);
}

[data-surface='dark'] .btn--primary,
.surface-dark .btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}

[data-surface='dark'] .btn--primary:hover,
.surface-dark .btn--primary:hover {
  background: var(--brand-hi);
  border-color: var(--brand-hi);
}

.btn--dark {
  color: #fff;
  background: var(--ink-900);
  border-color: var(--ink-900);
}

.btn--dark:hover {
  color: #fff;
  background: var(--ink-800);
}

.btn--white {
  color: var(--ink-900);
  background: #fff;
  border-color: #fff;
}

.btn--white:hover {
  color: var(--brand);
  background: #fff;
}

.btn--outline {
  color: var(--fg);
  background: var(--bg-elev);
  border-color: var(--line-input);
}

[data-surface='dark'] .btn--outline,
.surface-dark .btn--outline {
  background: transparent;
}

.btn--outline:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn--ghost {
  color: var(--fg-body);
  background: transparent;
  border-color: transparent;
}

.btn--ghost:hover {
  color: var(--fg);
  background: var(--bg-inset);
}

.btn--wa {
  color: #fff;
  background: #128040;
  border-color: #128040;
  box-shadow: 0 2px 0 rgb(0 90 40 / 6%);
}

.btn--wa:hover {
  color: #fff;
  background: #0f7038;
}

.btn--lg {
  height: var(--control-h-lg);
  padding-inline: 1.5rem;
  font-size: 0.9375rem;
}

.btn--sm {
  height: var(--control-h-sm);
  padding-inline: 0.9rem;
  font-size: var(--t-xs);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: var(--control-h);
  padding-inline: 0;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.6;
}

/* Link com seta */
.arrow-link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
}

.arrow-link svg {
  width: 1em;
  height: 1em;
  transition: transform var(--dur) var(--ease);
}

.arrow-link:hover svg {
  transform: translateX(3px);
}

.underline-link {
  color: var(--fg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
}

.underline-link:hover {
  color: var(--accent);
  text-decoration-color: currentcolor;
}

/* 09. Pills, badges, chips ================================================ */

.eyebrow {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}

.eyebrow svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.eyebrow--accent {
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-color: rgb(95 65 251 / 18%);
  box-shadow: none;
}

[data-surface='dark'] .eyebrow--accent,
.surface-dark .eyebrow--accent {
  color: #d9d0ff;
  background: rgb(160 140 255 / 14%);
  border-color: rgb(160 140 255 / 26%);
}

.badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-inset);
  border-radius: var(--r-xs);
}

.badge--accent {
  color: var(--brand-ink);
  background: var(--brand-soft);
}

.badge--ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.badge--warn {
  color: var(--warn);
  background: var(--warn-soft);
}

.badge--dark {
  color: #fff;
  background: rgb(13 11 23 / 78%);
  backdrop-filter: blur(6px);
}

.chip {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.45rem 0.9rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  background: var(--bg-elev);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  box-shadow: none;
}

.chip svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

a.chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 10. Cards & bento ======================================================= */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

a.card {
  color: inherit;
}

.card--flat {
  background: var(--bg-sub);
  box-shadow: none;
}

.card--pad-lg {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card--hover:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.card--accent {
  border-color: rgb(95 65 251 / 28%);
  box-shadow: 0 20px 50px -30px rgb(95 65 251 / 60%);
}

.card__title {
  font-size: var(--t-h5);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.015em;
}

.card__text {
  margin-top: 0.5rem;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

.card__foot {
  margin-top: auto;
  padding-top: 1.25rem;
}

.card__media {
  overflow: hidden;
  background: var(--bg-sub);
  border-bottom: 1px solid var(--line);
}

.card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.card--hover:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

/* Card em destaque (post principal do blog) */
@media (width >= 860px) {
  .card--destaque {
    flex-direction: row;
  }

  .card--destaque .card__media {
    flex: 1 1 56%;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .card--destaque .card__media img {
    height: 100%;
    min-height: 21rem;
    aspect-ratio: auto;
  }

  .card--destaque .card__body {
    flex: 1 1 44%;
    justify-content: center;
    padding: clamp(1.75rem, 3vw, 2.75rem);
  }
}

/* Ícone quadrado */
.icon-box {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}

.icon-box svg {
  width: 1.35rem;
  height: 1.35rem;
}

.icon-box--lg {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-md);
}

.icon-box--lg svg {
  width: 1.6rem;
  height: 1.6rem;
}

.icon-box--plain {
  color: var(--fg);
  background: var(--bg-inset);
}

.icon-box--ok { color: var(--ok); background: var(--ok-soft); }
.icon-box--warn { color: var(--warn); background: var(--warn-soft); }
.icon-box--info { color: var(--info); background: var(--info-soft); }

/* Link cobrindo o card inteiro */
.stretch-link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  border-radius: inherit;
}

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}

.bento > .span-2 { grid-column: span 2; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-4 { grid-column: span 4; }
.bento > .span-6 { grid-column: span 6; }

@media (width < 900px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento > .span-2,
  .bento > .span-3,
  .bento > .span-4,
  .bento > .span-6 {
    grid-column: span 2;
  }
}

@media (width < 560px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento > * {
    grid-column: span 1 !important;
  }
}

/* 11. Listas de benefícios ================================================ */

.checklist {
  display: grid;
  gap: 0.7rem;
}

.checklist--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.5rem;
}

@media (width < 560px) {
  .checklist--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checklist li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

.checklist li > svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--ok);
}

.checklist--accent li > svg {
  color: var(--accent);
}

.checklist strong,
.checklist b {
  color: var(--fg);
  font-weight: 600;
}

.checklist--no li > svg {
  color: var(--fg-mut);
}

/* Lista de features com título+texto */
.feature-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feature-row__title {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.015em;
}

.feature-row__text {
  margin-top: 0.3rem;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

/* 12. Abas ================================================================ */

.tabs__list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs__list--center {
  justify-content: center;
  flex-wrap: wrap;
}

.tabs__btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 1rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-body);
  white-space: nowrap;
  scroll-snap-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}

.tabs__btn svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--fg-mut);
  transition: color var(--dur) var(--ease);
}

.tabs__btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.tabs__btn[aria-selected='true'] {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: var(--sh-btn);
}

.tabs__btn[aria-selected='true'] svg {
  color: #fff;
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel {
  animation: fade-up 0.4s var(--ease-out) both;
}

/* 13. Acordeão ============================================================ */

.accordion {
  display: grid;
  gap: 0.75rem;
}

.acc {
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.acc[data-open] {
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}

.acc__btn {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
  text-align: left;
  letter-spacing: -0.015em;
}

.acc__btn:hover {
  color: var(--accent);
}

.acc__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--fg-mut);
}

.acc__icon::before,
.acc__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  background: currentcolor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.acc__icon::before {
  width: 0.65rem;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.acc__icon::after {
  width: 1.5px;
  height: 0.65rem;
  transform: translate(-50%, -50%);
}

.acc[data-open] .acc__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}

.acc[data-open] .acc__panel {
  grid-template-rows: 1fr;
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

/* 14. Marquee ============================================================= */

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  align-items: center;
  min-width: 100%;
  padding-right: 0.75rem;
  animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

/* 15. Prova social ======================================================== */

.quote {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.quote__text {
  flex: 1;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg);
  letter-spacing: -0.011em;
}

.quote__foot {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.quote__name {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg);
}

.quote__role {
  font-size: var(--t-xs);
  color: var(--fg-mut);
}

.avatar {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-inset);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--sm { width: 2rem; height: 2rem; }
.avatar--md { width: 2.75rem; height: 2.75rem; }
.avatar--lg { width: 3.5rem; height: 3.5rem; }

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .avatar {
  box-shadow: 0 0 0 2px var(--bg);
}

.avatar-stack .avatar + .avatar {
  margin-left: -0.6rem;
}

.rating {
  display: inline-flex;
  gap: 0.1rem;
  align-items: center;
  color: var(--star);
}

.rating svg {
  width: 0.95rem;
  height: 0.95rem;
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.035em;
}

.stat__label {
  margin-top: 0.5rem;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

.stat--accent .stat__num {
  color: var(--accent);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.stat-strip > * {
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  background: var(--bg-elev);
}

@media (width < 860px) {
  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 16. Passos / timeline =================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 2.25rem;
}

/* A régua avança sobre o gap para as etapas ficarem ligadas */
.step::after {
  position: absolute;
  top: 0;
  right: calc(var(--gap) * -1);
  left: 0;
  height: 1px;
  content: '';
  background: var(--line);
}

.step:last-child::after {
  right: 0;
}

.step::before {
  position: absolute;
  top: -0.45rem;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  content: '';
  background: var(--accent);
  border: 3px solid var(--bg);
  border-radius: 50%;
}

.step__idx {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.step__text {
  margin-top: 0.5rem;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

@media (width < 900px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step:nth-child(2n)::after {
    right: 0;
  }
}

@media (width < 560px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .step::after {
    right: 0;
  }
}

/* 17. Comparativo ========================================================= */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

@media (width < 780px) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

.compare__col {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--r-lg);
}

.compare__col--bad {
  background: var(--bg-sub);
  border: 1px dashed var(--line-strong);
}

.compare__col--good {
  position: relative;
  color: var(--fg-body);
  background:
    linear-gradient(180deg, rgb(95 65 251 / 7%), transparent 45%),
    var(--bg-elev);
  border: 1px solid rgb(95 65 251 / 40%);
  box-shadow: 0 28px 64px -30px rgb(95 65 251 / 45%);
}

.compare__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mut);
}

.compare__col--good .compare__label {
  color: var(--accent);
}

.compare__list {
  display: grid;
  gap: 0.8rem;
}

.compare__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--t-sm);
}

.compare__list svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}

/* Restrito à lista: antes pintava também o ícone de qualquer botão da coluna */
.compare__col--bad .compare__list svg {
  color: var(--danger);
}

.compare__col--good .compare__list svg {
  color: var(--ok);
}

.compare__col--bad li {
  color: var(--fg-body);
}

.compare__col--good li {
  color: var(--fg);
}

/* 18. Preços ============================================================== */

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

@media (width < 940px) {
  .pricing {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
    margin-inline: auto;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}

.plan--featured {
  background: linear-gradient(180deg, rgb(95 65 251 / 7%), var(--bg-elev) 45%);
  border-color: rgb(95 65 251 / 45%);
  box-shadow: 0 0 0 1px rgb(95 65 251 / 12%), 0 36px 80px -36px rgb(95 65 251 / 50%);
}

@media (width >= 940px) {
  .plan--featured {
    transform: translateY(-0.75rem);
    padding-bottom: calc(clamp(1.5rem, 2.5vw, 2rem) + 0.75rem);
  }
}

.plan__tag {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.3rem 0.85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  background: var(--brand);
  border-radius: var(--r-xs);
  transform: translate(-50%, -50%);
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.plan__desc {
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  color: var(--fg-mut);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 1.25rem;
}

.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan__cur {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
}

.plan__per {
  font-size: var(--t-sm);
  color: var(--fg-mut);
}

.plan__note {
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  color: var(--fg-mut);
  min-height: 1.2rem;
}

.plan__cta {
  margin-top: 1.25rem;
}

.plan__features {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.plan__features li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--fg-body);
}

.plan__features svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--ok);
}

.plan__features li[data-off] {
  color: var(--fg-mut);
}

.plan__features li[data-off] svg {
  color: #8f89a8;
}

/* Alternador mensal/anual */
.switcher {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-input);
  border-radius: var(--r-md);
}

.switcher__btn {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-body);
  border-radius: var(--r-xs);
  transition: all var(--dur) var(--ease);
}

.switcher__btn[aria-selected='true'] {
  color: var(--fg);
  background: var(--bg-elev);
  box-shadow: var(--sh-1);
}

/* Tabela comparativa */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

table.matrix {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
  background: var(--bg-elev);
}

table.matrix th,
table.matrix td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

table.matrix thead th {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--bg-sub);
  white-space: nowrap;
}

table.matrix tbody th {
  font-weight: 500;
  color: var(--fg-body);
}

table.matrix td {
  text-align: center;
  color: var(--fg);
}

table.matrix tr:last-child th,
table.matrix tr:last-child td {
  border-bottom: 0;
}

table.matrix svg {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--ok);
  vertical-align: -0.2em;
}

table.matrix td[data-off] svg {
  color: #8f89a8;
}

/* 19. Formulários ========================================================= */

.field {
  display: grid;
  gap: 0.4rem;
}

.label {
  font-size: var(--control-fs);
  font-weight: 400;
  color: var(--fg);
}

/* Mesmos controles do sistema: 40px de altura, 6px de raio, borda #d9d9d9 */
.input,
.textarea,
select.input {
  width: 100%;
  height: var(--control-h);
  padding: 0 0.75rem;
  font-size: var(--control-fs);
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: rgb(0 0 0 / 45%);
}

.input:hover,
.textarea:hover {
  border-color: var(--brand-hi);
}

.input:focus,
.textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgb(95 65 251 / 12%);
}

.textarea {
  min-height: 7.5rem;
  height: auto;
  padding: 0.6rem 0.75rem;
  line-height: 1.6;
  resize: vertical;
}

/* Select com o mesmo chevron do sistema, sem a aparência nativa */
select.input {
  padding-right: 2rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6489' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  cursor: pointer;
}

/* Campo com ícone à esquerda, como nas telas de login e cadastro */
.input-affix {
  position: relative;
  display: block;
}

.input-affix > svg {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  color: var(--brand);
  pointer-events: none;
  transform: translateY(-50%);
}

.input-affix > .input {
  padding-left: 2.25rem;
}

/* Obrigatório: mesmo asterisco vermelho do formulário do sistema */
.label--req::before {
  margin-right: 0.25rem;
  color: #ff4d4f;
  content: '*';
  font-family: SimSun, sans-serif;
  line-height: 1;
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--danger);
}

.field__error {
  font-size: var(--t-xs);
  color: var(--danger);
}

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--fg-body);
  cursor: pointer;
}

.check input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.28rem;
  border-radius: var(--r-xs);
  accent-color: var(--brand);
}

.form-note {
  font-size: var(--t-xs);
  color: var(--fg-mut);
}

.alert {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  font-size: var(--control-fs);
  border-radius: var(--r-sm);
}

.alert svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}

.alert--ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.alert--err {
  color: var(--danger);
  background: var(--danger-soft);
}

.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
}

/* 20. Header & navegação ================================================== */

.topbar {
  position: relative;
  z-index: 60;
  padding-block: 0.45rem;
  font-size: var(--t-xs);
  color: rgb(255 255 255 / 82%);
  background: var(--ink-900);
}

/* No mobile o herói vale mais que o anúncio */
@media (width < 700px) {
  .topbar {
    display: none;
  }
}

.topbar a {
  color: #fff;
  font-weight: 600;
}

.topbar .cluster {
  gap: 0.4rem 1.25rem;
  justify-content: center;
}

.topbar svg {
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: -0.15em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 72%);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(180%) blur(14px);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.site-header[data-stuck] {
  background: rgb(255 255 255 / 88%);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgb(13 11 23 / 40%);
}

.site-header__inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.brand img {
  height: 26px;
  width: auto;
}

.menu {
  display: flex;
  gap: 0.15rem;
  align-items: center;
  margin-inline: auto;
}

.menu__link {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: var(--control-fs);
  font-weight: 500;
  color: var(--ink-600);
  border-radius: var(--r-xs);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.menu__link:hover,
.menu__item[data-open] > .menu__link {
  color: var(--ink-900);
  background: var(--ink-100);
}

.menu__link[aria-current='page'] {
  color: var(--ink-900);
  font-weight: 600;
}

.menu__link svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--fg-mut);
  transition: transform var(--dur) var(--ease);
}

.menu__item[data-open] > .menu__link svg {
  transform: rotate(180deg);
}

.menu__item {
  position: relative;
}

.mega {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 40;
  width: max-content;
  max-width: min(56rem, calc(100vw - 3rem));
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.menu__item[data-open] > .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(13rem, 1fr));
  gap: 0.15rem 0.5rem;
}

.mega__link {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease);
}

.mega__link:hover {
  background: var(--ink-100);
}

.mega__link svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12rem;
  color: var(--brand);
}

.mega__link-title {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}

.mega__link-text {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-xs);
  color: var(--ink-400);
  line-height: 1.4;
}

.mega__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding: 0.85rem 0.7rem 0.35rem;
  border-top: 1px solid var(--line);
}

/* margin-left:auto garante o alinhamento à direita mesmo quando o .menu está oculto */
.header-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.burger {
  display: none;
  width: var(--control-h);
  height: var(--control-h);
  place-items: center;
  color: var(--ink-900);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
}

.burger:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.burger svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (width < 1080px) {
  .menu,
  .header-actions .btn--desktop {
    display: none;
  }

  .burger {
    display: grid;
  }

  /* Alvos de toque confortáveis e alinhados com o botão do menu */
  .header-actions .btn {
    height: var(--control-h);
  }
}

/* Celulares estreitos: aperta o cabeçalho para nada encostar nas bordas */
@media (width < 420px) {
  .brand img {
    height: 22px;
  }

  .header-actions {
    gap: 0.4rem;
  }

  .header-actions .btn {
    padding-inline: 0.75rem;
  }
}

/* Drawer mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden; /* impede que o painel fechado gere scroll horizontal */
  visibility: hidden;
}

.drawer[data-open] {
  visibility: visible;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(13 11 23 / 45%);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  backdrop-filter: blur(2px);
}

.drawer[data-open] .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(23rem, 92vw);
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
}

.drawer[data-open] .drawer__panel {
  transform: none;
}

.drawer__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
}

.drawer__body {
  flex: 1;
  padding: 1rem var(--gutter) 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__foot {
  display: grid;
  gap: 0.6rem;
  padding: 1rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line);
}

.drawer__link {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--line);
}

.disclosure__btn {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.disclosure__btn svg {
  width: 1rem;
  height: 1rem;
  color: var(--ink-400);
  transition: transform var(--dur) var(--ease);
}

.disclosure[data-open] .disclosure__btn svg {
  transform: rotate(180deg);
}

.disclosure__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}

.disclosure[data-open] .disclosure__panel {
  grid-template-rows: 1fr;
}

.disclosure__panel > div {
  overflow: hidden;
}

.disclosure__panel a {
  display: block;
  padding: 0.55rem 0 0.55rem 0.85rem;
  font-size: var(--t-sm);
  color: var(--ink-600);
  border-left: 2px solid var(--line);
}

.disclosure__panel a:hover {
  color: var(--brand);
  border-left-color: var(--brand);
}

.disclosure__panel > div > div {
  padding-block: 0.5rem 0.9rem;
}

/* 21. Footer ============================================================== */

.site-footer {
  position: relative;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 2rem;
  overflow: clip;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (width < 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-title {
  margin-bottom: 1rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 0.6rem;
}

.footer-links a {
  font-size: var(--t-sm);
  color: var(--fg-body);
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  font-size: var(--t-xs);
  color: var(--fg-mut);
  border-top: 1px solid var(--line);
}

.social {
  display: flex;
  gap: 0.5rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--fg-body);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  transition: all var(--dur) var(--ease);
}

.social a:hover {
  color: #fff;
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Selo oficial da loja: só o link e o hover, sem recriar o logotipo */
.store-badge {
  display: inline-block;
  border-radius: 6px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.store-badge img {
  display: block;
  width: auto;
  height: 2.6rem;
}

.store-badge:hover {
  box-shadow: 0 10px 22px -12px rgb(13 11 23 / 55%);
  transform: translateY(-2px);
}

/* Em fundo escuro o selo preto se dilui: as diretrizes das lojas permitem contorno */
[data-surface='dark'] .store-badge,
.surface-dark .store-badge {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}

[data-surface='dark'] .store-badge:hover,
.surface-dark .store-badge:hover {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 32%);
  opacity: 0.92;
}

/* Barra de CTA */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgb(137 62 251 / 45%), transparent 60%),
    linear-gradient(160deg, #2a1b6b, #150f33 55%);
  border-radius: var(--r-2xl);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--fg-mut);
}

.breadcrumb a {
  color: var(--fg-mut);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb svg {
  width: 0.8rem;
  height: 0.8rem;
  opacity: 0.6;
}

/* Barra de cookies */
.cookiebar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem var(--gutter);
  font-size: var(--t-xs);
  color: rgb(255 255 255 / 82%);
  background: rgb(13 11 23 / 96%);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
}

.cookiebar[data-show] {
  transform: none;
}

/* 22. Prose =============================================================== */

.prose {
  color: var(--fg-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2 {
  margin-top: 2.25em;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.85rem);
}

.prose h3 {
  margin-top: 1.9em;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
}

.prose h4 {
  margin-top: 1.7em;
  font-size: 1.15rem;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.75em;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.prose strong {
  color: var(--fg);
  font-weight: 600;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.55em;
  padding-left: 1.2em;
}

.prose ul {
  list-style: none;
}

.prose ol {
  list-style: decimal;
}

.prose ul > li {
  position: relative;
}

.prose ul > li::before {
  position: absolute;
  top: 0.62em;
  left: -1.1em;
  width: 0.4em;
  height: 0.4em;
  content: '';
  background: var(--brand);
  border-radius: 50%;
}

.prose img {
  margin-block: 1.75em;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.prose blockquote {
  padding: 0.25em 0 0.25em 1.25em;
  font-size: 1.15rem;
  color: var(--fg);
  border-left: 3px solid var(--brand);
}

.prose figure figcaption,
.prose small {
  font-size: var(--t-sm);
  color: var(--fg-mut);
}

.prose hr {
  margin-block: 2.5em;
}

.prose table {
  width: 100%;
  font-size: var(--t-sm);
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.prose code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  background: var(--bg-inset);
  border-radius: 6px;
}

/* 23. Movimento =========================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.6s var(--ease-out) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal-in] {
  opacity: 1;
  transform: none;
}

.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: scaleX(var(--flip, 1));
  }

  50% {
    transform: scaleX(var(--flip, 1)) translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee {
    overflow-x: auto;
    mask-image: none;
  }
}

@media print {
  .site-header,
  .topbar,
  .site-footer,
  .cookiebar,
  .drawer {
    display: none !important;
  }
}

/* ==========================================================================
   24. Camada decorativa e composições ricas
   Formas 3D nos cantos, cartões flutuantes de UI, órbita de integrações e
   variações de cor nos ícones — o que dava leveza ao layout anterior.
   ========================================================================== */

/* Formas 3D nos cantos ---------------------------------------------------- */

.deco {
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(7rem, 13vw, 13rem);
  pointer-events: none;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
}

/* Offsets pequenos: a forma fica cortada só o suficiente para dar profundidade */
.deco--tl { top: -1.5rem; left: -2rem; }
.deco--tr { top: -1.5rem; right: -2rem; }
.deco--bl { bottom: -2rem; left: -2rem; }
.deco--br { bottom: -2rem; right: -2rem; }
.deco--r  { top: 22%; right: -2.5rem; }
.deco--l  { top: 22%; left: -2.5rem; }

/* Forma grande saindo pela lateral, como no herói da página Empresa anterior */
.deco--side {
  top: 3rem;
  right: -7rem;
  width: clamp(14rem, 30vw, 26rem);
  opacity: 0.95;
}

.deco--side.deco--left {
  right: auto;
  left: -7rem;
}

@media (width < 1200px) {
  .deco--side {
    right: -10rem;
    width: clamp(12rem, 26vw, 20rem);
  }
}

/* Totalmente dentro da seção, para ilustrações que não devem ser cortadas */
.deco--inside.deco--tl { top: 1.5rem; left: 1.5rem; }
.deco--inside.deco--tr { top: 1.5rem; right: 1.5rem; }
.deco--inside.deco--bl { bottom: 1.5rem; left: 1.5rem; }
.deco--inside.deco--br { bottom: 1.5rem; right: 1.5rem; }

.deco--sm { width: clamp(5rem, 8vw, 8rem); }
.deco--lg { width: clamp(9rem, 18vw, 18rem); }
.deco--soft { opacity: 0.5; }
.deco--in { inset-inline: auto; }
.deco--float { animation: float 7s ease-in-out infinite; }
.deco--float-slow { animation: float 11s ease-in-out infinite; }
.deco--spin { animation: tilt 14s ease-in-out infinite; }

/* Espelha a forma para o mesmo arquivo não parecer repetido lado a lado */
.deco--flip { --flip: -1; }

@keyframes tilt {
  0%, 100% { transform: scaleX(var(--flip, 1)); }
  33% { transform: scaleX(var(--flip, 1)) rotate(7deg) translateY(-8px); }
  66% { transform: scaleX(var(--flip, 1)) rotate(-5deg) translateY(4px); }
}

/* No mobile as formas roubariam espaço da leitura */
@media (width < 992px) {
  .deco {
    display: none;
  }

  .deco--keep {
    display: block;
    width: clamp(4.5rem, 22vw, 7rem);
    opacity: 0.7;
  }
}

/* Garantias com o check verde ---------------------------------------------- */

.trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: center;
}

/* Acompanha o alinhamento do bloco que a contém */
.cluster--center .trustline,
.text-center .trustline {
  justify-content: center;
}

.trustline li {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--fg);
}

.trustline svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ok);
}

/* Cartões de UI flutuantes ------------------------------------------------- */

/* Largura fixa: os cartões flutuantes se ancoram na imagem, não na coluna */
.showcase {
  position: relative;
  width: min(20rem, 100%);
  margin-inline: auto;
}

/* A mão encosta na base da seção em vez de flutuar no meio dela */
.section--art-bottom {
  padding-bottom: 0;
}

.section--art-bottom .showcase {
  align-self: end;
  margin-bottom: -1px;
}

.section--art-bottom .grid--split {
  align-items: end;
}

/* A seção perdeu o padding inferior por causa da arte: o texto recupera o dele */
.section--art-bottom .grid--split > :first-child {
  padding-bottom: var(--pad-sec);
}

@media (width < 860px) {
  .section--art-bottom .grid--split {
    align-items: stretch;
  }

  .section--art-bottom .grid--split > :first-child {
    padding-bottom: 0;
  }
}

.showcase > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

.float-card {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -18px rgb(13 11 23 / 35%);
  animation: float 6s ease-in-out infinite;
}

.float-card img {
  display: block;
  width: 100%;
}

.float-card--a {
  top: 10%;
  left: -4.5rem;
  width: 12.5rem;
}

.float-card--b {
  right: -4rem;
  bottom: 22%;
  width: 10.5rem;
  animation-delay: -3s;
}

@media (width < 992px) {
  .float-card--a { left: -2rem; width: 10rem; }
  .float-card--b { right: -1.5rem; width: 8.5rem; }
}

@media (width < 560px) {
  .float-card--a { top: 6%; left: -0.5rem; width: 8rem; }
  .float-card--b { right: -0.5rem; bottom: 24%; width: 7rem; }
}

/* Abaixo disso os cartões cobririam a tela do celular */
@media (width < 340px) {
  .float-card {
    display: none;
  }
}

/* Painel de recursos em três colunas -------------------------------------- */

.trio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.trio__media {
  display: flex;
  justify-content: center;
}

.trio__media img {
  width: 100%;
  max-width: 24rem;
}

.trio__list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.trio__list--right .feature-row {
  flex-direction: row-reverse;
  text-align: right;
}

@media (width < 992px) {
  .trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trio__media {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .trio__list--right .feature-row {
    flex-direction: row;
    text-align: left;
  }
}

@media (width < 640px) {
  .trio {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Órbita de integrações --------------------------------------------------- */

.orbit {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  justify-content: center;
}

.orbit__item {
  display: grid;
  place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 14px 30px -16px rgb(95 65 251 / 45%);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.orbit__item:hover {
  box-shadow: 0 18px 36px -14px rgb(95 65 251 / 60%);
  transform: translateY(-4px);
}

.orbit__item svg,
.orbit__item img {
  width: 48%;
  height: 48%;
}

/* Cada integração com o seu tom, para a faixa não ficar monocromática */
.orbit__item--violet { color: var(--brand); }
.orbit__item--purple { color: #7a29d6; }
.orbit__item--pink { color: #c2185b; }
.orbit__item--sky { color: #0b6ea8; }
.orbit__item--amber { color: #9a5b06; }
.orbit__item--emerald { color: #0b7a4d; }
.orbit__item--wa { color: #128040; }

.orbit__item--xs { width: 3rem; height: 3rem; margin-bottom: 3.5rem; }
.orbit__item--sm { width: 3.75rem; height: 3.75rem; margin-bottom: 2.25rem; }
.orbit__item--md { width: 4.5rem; height: 4.5rem; margin-bottom: 1.15rem; }
.orbit__item--lg { width: 5.5rem; height: 5.5rem; }
.orbit__item--xl {
  width: 7rem;
  height: 7rem;
  margin-bottom: -1rem;
  border-color: rgb(95 65 251 / 30%);
}

@media (width < 768px) {
  .orbit__item--xs,
  .orbit__item--sm,
  .orbit__item--md,
  .orbit__item--lg,
  .orbit__item--xl {
    margin-bottom: 0;
  }
}

/* Variações de cor nos ícones -------------------------------------------- */

.icon-box--violet { color: var(--brand); background: var(--brand-soft); }
.icon-box--purple { color: #7a29d6; background: #f4e9ff; }
.icon-box--pink   { color: #c2185b; background: #ffe9f1; }
.icon-box--sky    { color: #0b6ea8; background: #e4f2fb; }
.icon-box--amber  { color: #9a5b06; background: #fdf2e0; }
.icon-box--emerald { color: #0b7a4d; background: #e4f6ee; }
.icon-box--slate  { color: var(--ink-700); background: var(--ink-100); }

/* Círculo, como nos destaques do layout anterior */
.icon-box--round {
  border-radius: 50%;
}

[data-surface='dark'] .icon-box--purple,
[data-surface='dark'] .icon-box--pink,
[data-surface='dark'] .icon-box--sky,
[data-surface='dark'] .icon-box--amber,
[data-surface='dark'] .icon-box--emerald,
.surface-dark .icon-box--purple,
.surface-dark .icon-box--pink,
.surface-dark .icon-box--sky,
.surface-dark .icon-box--amber,
.surface-dark .icon-box--emerald {
  background: rgb(255 255 255 / 8%);
}

[data-surface='dark'] .icon-box--purple, .surface-dark .icon-box--purple { color: #c9a4ff; }
[data-surface='dark'] .icon-box--pink, .surface-dark .icon-box--pink { color: #ff9ec0; }
[data-surface='dark'] .icon-box--sky, .surface-dark .icon-box--sky { color: #7cc6f5; }
[data-surface='dark'] .icon-box--amber, .surface-dark .icon-box--amber { color: #f5c26b; }
[data-surface='dark'] .icon-box--emerald, .surface-dark .icon-box--emerald { color: #5fdba4; }

/* Faixa com robô/ilustração ---------------------------------------------- */

.spotlight {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 130% at 85% 10%, rgb(137 62 251 / 40%), transparent 55%),
    linear-gradient(150deg, #241a5c, #131029 60%);
}

.spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.spotlight__art {
  position: relative;
}

.spotlight__art img {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}

@media (width < 820px) {
  .spotlight__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .spotlight__art {
    order: -1;
  }

  .spotlight__art img {
    max-width: 13rem;
  }
}

/* Aviso de cookies com mais personalidade -------------------------------- */

.cookiebar {
  inset: auto 1rem 1rem;
  max-width: 30rem;
  margin-inline: auto;
  border-radius: var(--r-md);
}

@media (width < 560px) {
  .cookiebar {
    inset: auto 0.75rem 0.75rem;
  }
}

/* Print de tela do produto com moldura suave, para não sumir no fundo branco */
.shot {
  position: relative;
  padding: clamp(0.6rem, 1.5vw, 1rem);
  background: linear-gradient(150deg, var(--brand-soft), var(--ink-100) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

.shot::after {
  position: absolute;
  inset: 0;
  content: '';
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
  pointer-events: none;
}

.shot > img {
  display: block;
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px -14px rgb(13 11 23 / 28%);
}

[data-surface='dark'] .shot,
.surface-dark .shot {
  background: linear-gradient(150deg, rgb(160 140 255 / 16%), rgb(255 255 255 / 4%) 70%);
}

/* Faixa da marca do cliente: ocupa a largura inteira, conteúdo no container */
.brandshow {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(70% 120% at 5% 20%, #7c5cff 0%, transparent 55%),
    linear-gradient(125deg, #6448fc 0%, #5f41fb 45%, #4a2ee0 100%);
}

/* Curva clara à direita, como no material de apresentação */
.brandshow::before {
  position: absolute;
  inset: -25% -25% -25% 48%;
  content: '';
  /* --ink-50 e não --bg-sub: a seção usa escopo escuro e inverteria a cor */
  background: var(--ink-50);
  border-radius: 50% 0 0 50%;
}

.brandshow__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.brandshow__art img {
  width: 100%;
  filter: drop-shadow(0 30px 50px rgb(13 11 23 / 22%));
}

.brandshow .checklist li,
.brandshow p {
  color: rgb(255 255 255 / 88%);
}

.brandshow .checklist svg {
  color: #6ee7b7;
}

@media (width < 900px) {
  /* A curva não pode invadir o texto: vira o fundo do bloco da arte */
  .brandshow::before {
    display: none;
  }

  .brandshow__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brandshow {
    padding-bottom: 0;
  }

  .brandshow__art {
    position: relative;
    margin: 1.5rem calc(var(--gutter) * -1) 0;
    padding: clamp(1.5rem, 5vw, 2.5rem) 1.25rem 0;
  }

  .brandshow__art::before {
    position: absolute;
    inset: 0 -20% -10% -20%;
    content: '';
    background: var(--ink-50);
    border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  }

  .brandshow__art img {
    position: relative;
  }
}

/* Arte grande fora do fluxo: a altura da seção é ditada pelo texto e a imagem
   é cortada pelas bordas da própria seção (que tem overflow clip). */
.bleed-art {
  position: relative;
  align-self: stretch;
  margin-right: min(0px, calc((var(--maxw) - 100vw) / 2 - var(--gutter)));
}

.bleed-art img {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 118%;
  max-width: none;
  transform: translateY(-50%);
}

@media (width < 860px) {
  .bleed-art {
    margin-inline: calc(var(--gutter) * -1);
  }

  /* No empilhado a imagem volta ao fluxo, senão não sobra altura para ela */
  .bleed-art img {
    position: static;
    width: 100%;
    transform: none;
  }
}

/* Trilho horizontal com scroll-snap — substitui listas longas sem carregar
   biblioteca de carrossel. Rola com touch, roda do mouse, teclado e botões. */
.rail {
  position: relative;
}

.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap) * 3) / 4);
  gap: var(--gap);
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__track > * {
  scroll-snap-align: start;
}

@media (width < 1100px) {
  .rail__track {
    grid-auto-columns: calc((100% - var(--gap) * 2) / 3);
  }
}

@media (width < 820px) {
  .rail__track {
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
}

@media (width < 560px) {
  .rail__track {
    grid-auto-columns: 78%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
}

.rail__nav {
  display: flex;
  gap: 0.5rem;
}

.rail__nav button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rail__track {
    scroll-behavior: auto;
  }
}