:root {
  /* Nomes de variável mantidos por compatibilidade — a paleta em si
     é vermelho-laranja (sampleada do print real), não roxo. */
  --purple: #e8402f;
  --purple-hover: #ff5a3d;
  --dark-purple: #2b1410;
  --dark-purple-hover: #3d1e17;
  --ink: #171717;
  --border: #d4d4d4;
  --off-white: #f6f7f9;

  --font-nav: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-tag: "Cabin", "Segoe UI", system-ui, sans-serif;
  --font-headline: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Container padrão: largura máxima do conteúdo das seções e o respiro
     lateral (gutter). Mude aqui para alterar o site inteiro. */
  --container: 1200px;
  --gutter: 24px;
}
@media (max-width: 640px) { :root { --gutter: 20px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* Visible keyboard focus everywhere — never remove without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* iOS: 100vh usa a altura sem a barra do Safari, o que sobra
                          como scroll vazio depois do rodapé quando ela reaparece */
  background: #000000;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

/* ===== Container =====
   A seção ocupa a largura toda (fundos, brilhos, estrelas) e cuida só do
   espaçamento vertical; o conteúdo vai dentro de um .container, que limita a
   largura a --container e aplica o --gutter nas laterais. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Variante estreita para blocos de texto centralizados (ex.: hero). */
.container--narrow { --container: 860px; }

/* ===== Background video (opaque, no overlay) ===== */
.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000000;
  z-index: 0;
}
/* Vídeos decorativos de fundo: sem controles, sem botão de play nativo
   (Safari/iOS mostra um botão de play central em <video> sem `controls`
   até o JS chamar .play(), já que .showcase__video/.cta-faq__video
   carregam sob demanda em vez de autoplay nativo — ver main.js) */
.bg-video, .showcase__video, .cta-faq__video { pointer-events: none; }
/* Blindagem extra: no iOS/Safari um toque pode pausar um <video> mesmo
   com pointer-events:none nele (bug conhecido do WebKit em vídeos
   inline). Um elemento comum por cima, sem handler nenhum, absorve o
   toque antes que ele chegue no vídeo. */
.video-shield { position: absolute; inset: 0; z-index: 0; }
.bg-video::-webkit-media-controls,
.bg-video::-webkit-media-controls-panel,
.bg-video::-webkit-media-controls-play-button,
.bg-video::-webkit-media-controls-start-playback-button,
.bg-video::-webkit-media-controls-overlay-play-button,
.bg-video::-webkit-media-controls-enclosure,
.bg-video::-webkit-media-controls-overlay-enclosure,
.bg-video::-webkit-media-controls-timeline,
.bg-video::-webkit-media-controls-current-time-display,
.showcase__video::-webkit-media-controls,
.showcase__video::-webkit-media-controls-panel,
.showcase__video::-webkit-media-controls-play-button,
.showcase__video::-webkit-media-controls-start-playback-button,
.showcase__video::-webkit-media-controls-overlay-play-button,
.showcase__video::-webkit-media-controls-enclosure,
.showcase__video::-webkit-media-controls-overlay-enclosure,
.showcase__video::-webkit-media-controls-timeline,
.showcase__video::-webkit-media-controls-current-time-display,
.cta-faq__video::-webkit-media-controls,
.cta-faq__video::-webkit-media-controls-panel,
.cta-faq__video::-webkit-media-controls-play-button,
.cta-faq__video::-webkit-media-controls-start-playback-button,
.cta-faq__video::-webkit-media-controls-overlay-play-button,
.cta-faq__video::-webkit-media-controls-enclosure,
.cta-faq__video::-webkit-media-controls-overlay-enclosure,
.cta-faq__video::-webkit-media-controls-timeline,
.cta-faq__video::-webkit-media-controls-current-time-display {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
video.bg-video {
  /* A gravação original é roxa — vira vermelho-laranja só com CSS,
     sem precisar de um novo asset de vídeo. Não se aplica quando o fundo
     é uma imagem estática (já sai na cor certa). */
  filter: hue-rotate(110deg) saturate(1.15) brightness(0.9);
}
img.bg-video {
  /* a imagem já vem em preto e branco; sépia + matiz dá um tom alaranjado
     leve, na cor da marca, em vez de cinza puro */
  filter: sepia(0.45) saturate(1.6) hue-rotate(-12deg);
  opacity: 0.8;
  transition: opacity 1.4s ease;
}
/* Se o mouse fica parado, a luz apaga sozinha: some o brilho da imagem
   inteira (o buraco do véu continua onde estava, só não revela mais nada). */
.bg.is-idle img.bg-video {
  opacity: 0;
}
.bg-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #030100;
  /* Esconde o vídeo, e uma luz que segue o mouse (--mx/--my, via JS) abre um
     furo nela, revelando o vídeo por baixo só perto do cursor — bem de leve,
     nunca mostrando o vídeo em cheio, nem perto do cursor. */
  -webkit-mask-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 28%), rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.7) 45%, black 85%);
  mask-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 28%), rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.7) 45%, black 85%);
}

/* ===== Navbar ===== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  /* Fundo ocupa a largura toda; o conteúdo alinha com o .container.
     O mega-menu (main.js) lê este padding para se posicionar. */
  padding-block: 16px;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  background: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
.navbar.is-scrolled {
  background: rgba(10, 8, 8, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.logo { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--purple), #ff8a3d);
  display: grid;
  place-items: center;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 800;
  color: #0a0a0f;
}
.logo-img { display: block; height: 26px; width: auto; }
.logo-word {
  font-family: 'Poppins', var(--font-nav);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
}
.logo-word b { font-weight: inherit; }

.nav-links {
  display: none;
  align-items: center;
  gap: 28px;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
}

.nav-search {
  display: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-nav);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
}
@media (min-width: 1280px) {
  .nav-search { display: inline-flex; }
}
.nav-search-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  transition: opacity 0.2s ease;
}
.nav-link:hover { opacity: 0.8; }
.nav-link--chevron svg { color: #fff; }

/* ===== Mega-menu (desktop) =====
   Um único painel que troca de tamanho/posição entre os itens (JS escreve
   --w/--h/--x/--cx); o conteúdo de cada item faz cross-fade dentro dele. */
.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-trigger,
.nav-list .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 5px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
.nav-list .nav-link:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }
.nav-chevron { transition: transform 0.25s ease; }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  transform: translate3d(var(--x, 0), 0, 0);
  border-radius: 5px;
  background: rgba(12, 12, 17, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.25s ease, opacity 0.2s ease, visibility 0.2s;
}
.mega.is-open {
  top: calc(100% + 6px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Primeira abertura: posiciona sem animar o tamanho, só o fade */
.mega.no-anim {
  transition: top 0.25s ease, opacity 0.2s ease, visibility 0.2s;
}
/* Ponte invisível: o mouse atravessa o vão entre o botão e o painel sem fechar */
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.mega-caret {
  position: absolute;
  top: -6px;
  left: var(--cx, 50%);
  width: 10px;
  height: 10px;
  background: #0c0c11;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-50%) rotate(45deg);
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega.no-anim .mega-caret { transition: none; }
.mega-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5px;
}
.mega-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 28px 32px 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s;
}
.mega-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mega-heading {
  margin: 0 8px 10px;
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a93;
}
.mega-heading--gap { margin-top: 22px; }
.mega-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 28px;
}
.mega-cols--int { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.mega-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 22px;
  border-radius: 5px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(232, 64, 47, 0.28), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mega-aside--media { justify-content: flex-start; padding: 0 0 22px; overflow: hidden; }
.mega-aside--media > *:not(.mega-aside__img) { margin-left: 22px; margin-right: 22px; }
.mega-aside__img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: 5px 5px 0 0;
}
.mega-aside--media .mega-cta { margin-top: auto; padding-top: 8px; }
.mega-aside__title {
  font-family: var(--font-nav);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.mega-aside__text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: #8a8a93;
}
.mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-nav);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.mega-cta::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.mega-cta:hover::after { transform: translateX(3px) rotate(45deg); }
@media (max-width: 1199px) {
  .mega-body { grid-template-columns: minmax(0, 1fr); }
  .mega-aside { display: none; }
}
.mega-list { list-style: none; }
.mega-list--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.mega-link--text { align-items: center; gap: 10px; padding: 6px 8px; }
.mega-brand {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: contain;
}
.mega-ico--brand {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
}
.mega-link--text .mega-txt b { font-weight: 500; }
.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 5px;
  transition: background 0.2s ease;
}
.mega-link:hover,
.mega-link:focus-visible { background: rgba(255, 255, 255, 0.07); }
.mega-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(232, 64, 47, 0.9), rgba(255, 138, 61, 0.9));
}
.mega-ico--fa {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
}
.mega-ico--fa::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.mega-txt { display: flex; flex-direction: column; gap: 2px; }
.mega-txt b {
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.mega-txt small {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.35;
  color: #8a8a93;
}
@media (max-width: 1023px) {
  .mega { display: none; }
}

.nav-actions { display: none; align-items: center; gap: 12px; }
.nav-tools { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.nav-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  opacity: 0.85;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.nav-icon:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }

/* Idioma */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lang__btn:hover,
.lang__btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.lang__btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.lang__flag { display: block; width: 20px; height: auto; border-radius: 2px; }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 170px;
  padding: 6px;
  list-style: none;
  border-radius: 5px;
  background: rgba(12, 12, 17, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.lang__menu.is-open { opacity: 1; visibility: visible; transform: none; }
.lang__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 5px;
  font-family: var(--font-nav);
  font-size: 14px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lang__opt:hover { background: rgba(255, 255, 255, 0.07); }
.lang__opt img { display: block; width: 20px; height: auto; border-radius: 2px; }
.lang__opt[aria-selected="true"]::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid #ff8a3d;
  border-bottom: 2px solid #ff8a3d;
  transform: rotate(45deg);
}
@media (max-width: 1179px) {
  .nav-icon--store { display: none; }
}
/* mobile: lojas + idiomas em uma linha, acima dos botões */
.mm-tools { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.mm-tools__sep { width: 1px; height: 22px; margin: 0 6px; background: rgba(255, 255, 255, 0.15); }
.lang__opt--flag { width: auto; padding: 8px; opacity: 0.55; }
.lang__opt--flag[aria-pressed="true"] { opacity: 1; background: rgba(255, 255, 255, 0.08); }
@media (min-width: 1024px) {
  .nav-actions { display: flex; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn--ghost:hover { background: #f2f2f2; }
.btn--primary {
  background: var(--purple);
  color: #fafafa;
  box-shadow: 0 6px 18px rgba(232, 64, 47, 0.35);
}
.btn--primary:hover { background: var(--purple-hover); }
.btn--block { width: 100%; }

.burger {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .burger { display: none; }
}
.burger .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger .bar:nth-child(1) { top: 0; }
.burger .bar:nth-child(2) { top: 9px; }
.burger .bar:nth-child(3) { top: 18px; }
.burger.open .bar:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open .bar:nth-child(2) { opacity: 0; }
.burger.open .bar:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-top: 64px;
  padding-bottom: 112px;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero { margin-top: 128px; padding-bottom: 140px; }
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  max-width: min(560px, 92%);
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(110, 70, 55, 0.4);
  border: 1px solid rgba(232, 130, 95, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-tag);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 32px;
  text-align: left;
}
.tagline-badge {
  background: var(--purple);
  border-radius: 6px;
  font-family: var(--font-tag);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 9px;
  color: #fff;
}

.headline {
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 46px);
  letter-spacing: -0.015em;
  line-height: 1.28;
  margin-bottom: 32px;
  text-wrap: balance;
}
.headline em {
  font-style: italic;
  padding: 0 0.08em;
}
@media (max-width: 480px) {
  .headline { font-size: 1.7rem; }
  .headline br { display: none; }
}

.subtext {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 662px;
  margin-bottom: 32px;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

.btn--cta-primary,
.btn--cta-secondary {
  border-radius: 10px;
  font-family: var(--font-tag);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 26px;
}
.btn--cta-primary { background: var(--purple); color: #fff; }
.btn--cta-primary:hover { background: #ff5a3d; }
.btn--cta-secondary { background: var(--dark-purple); color: var(--off-white); }
.btn--cta-secondary:hover { background: var(--dark-purple-hover); }

/* ===== Signup row (email + Google) ===== */
.signup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.signup-field {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 4px 4px 4px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.signup-field:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(232, 64, 47, 0.35);
}
.signup-field input {
  border: 0;
  background: transparent;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  width: 180px;
  max-width: 40vw;
}
.signup-field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.signup-field .btn--cta-primary {
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

.btn--google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-tag);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.btn--google:hover { background: #f2f2f2; }

/* ===== Hero mode tabs ===== */
.hero-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-tab {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 13.5px;
  color: #fff;
  padding: 9px 12px;
  border-radius: 7px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
@media (min-width: 480px) {
  .hero-tab { padding: 9px 16px; }
}
.hero-tab:hover { color: #fff; }
.hero-tab.active { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ===== Dashboard mockup ===== */
.dash {
  position: relative;
  z-index: 10;
  padding: 0 20px 90px;
}
.dash-panel-frame {
  position: relative;
  width: min(94vw, 1480px);
  margin: 0 auto;
}
.dash-panel {
  --gold: #c9973f;
  --red: #e2214f;
  --red2: #ff7a3d;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 640px;
  border-radius: 14px;
  background: rgba(8, 8, 8, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
@media (min-width: 720px) {
  .dash-panel { height: 700px; }
}

/* Selo "demonstração fiel" — reforça que a tela abaixo é o
   produto real, não um mockup genérico. Mesma borda-gradiente
   laranja dos botões (logo-mark, "Seu Lead"). Antes ficava 100%
   visível pra sempre; agora aparece com força na entrada e vai
   esmaecendo até quase sumir, igual ao resto dos acentos laranja
   da página. */
.dash-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--purple), #ff8a3d);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: dashPanelFade 3.5s ease-out 0.6s forwards;
}
@keyframes dashPanelFade {
  0% { opacity: 1; }
  100% { opacity: 0.14; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-panel::after { animation: none; opacity: 0.14; }
}

.dash-fidelity-badge {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 20px;
  transform: translateY(calc(-100% + 2px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 7px 14px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(135deg, var(--purple), #ff8a3d);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
@media (max-width: 560px) {
  .dash-fidelity-badge { left: 16px; font-size: 11px; padding: 6px 13px 6px 12px; }
}

.dash-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dash-frame[hidden] { display: none; }

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-logo-box {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.dash-brand-name {
  display: none;
  font-family: 'Poppins', var(--font-nav);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #fff;
}
@media (min-width: 560px) {
  .dash-brand-name { display: block; }
}

.dash-top-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.dash-search {
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 640px) {
  .dash-search { display: inline-flex; }
}
.dash-search--wide { flex: 1; max-width: 340px; margin: 0 auto; }
.dash-search--small { width: 140px; }
.dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.dash-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  flex-shrink: 0;
}
.dash-user { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: rgba(255, 255, 255, 0.8); }
.dash-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.dash-user-name {
  display: none;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 12.5px;
}
@media (min-width: 480px) {
  .dash-user-name { display: block; }
}

.dash-flexrow { display: flex; align-items: stretch; flex: 1; min-height: 0; }

.dash-sidebar {
  display: none;
  flex-direction: column;
  width: 176px;
  flex-shrink: 0;
  padding: 20px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 720px) {
  .dash-sidebar { display: flex; }
}

.dash-profile { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; }
.dash-profile-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.dash-profile-name {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin-bottom: 10px;
}
.dash-progress-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 5px;
}
.dash-progress-track {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.dash-progress-fill {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  padding: 9px 10px;
  border-left: 2px solid transparent;
}
.dash-nav-item svg { flex-shrink: 0; opacity: 0.8; }
.dash-nav-item.active {
  color: #fff;
  font-weight: 600;
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(201, 151, 63, 0.12), transparent);
}

.dash-sidebar-foot {
  margin-top: auto;
  padding-top: 18px;
  display: none;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 900px) {
  .dash-sidebar-foot { display: flex; }
}
.dash-sidebar-foot a {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.3);
}

.dash-main { flex: 1; min-width: 0; min-height: 0; padding: 20px 22px 26px; overflow-y: auto; }
.dash-main--academy { padding: 16px; overflow: hidden; }
.dash-main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 18px;
}
.dash-main-head h4 {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.dash-callout {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 12px;
  max-width: 260px;
}

.dash-view[hidden] { display: none; }

/* ---- Captação: banner + continue row + module carousel ---- */
.dash-banner {
  position: relative;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 1616 / 418;
  max-height: 200px;
  object-fit: cover;
}
.dash-callout--banner {
  position: absolute;
  right: 14px;
  bottom: 14px;
  max-width: 220px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.dash-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-row-head h5 {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.dash-arrows { display: flex; gap: 6px; }
.dash-arrows button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.module-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.module-row::-webkit-scrollbar { display: none; }
.module-card-wrap {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 260px;
  cursor: pointer;
}
@media (min-width: 720px) {
  .module-card-wrap { height: 315px; }
}
.module-card {
  height: 100%;
  width: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
}
/* só o primeiro módulo (grátis) mantém a cor — o resto fica em
   escala de cinza pra reforçar que está bloqueado até o upsell */
.module-card-wrap--locked .module-card { filter: grayscale(1) brightness(0.7); }
.module-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  color: #fff;
}
.module-badge--free { background: linear-gradient(135deg, #e8402f, #ff8a3d); }
.module-lock {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.dash-funnel-note {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0 14px;
}
.dash-row-head--label { margin-top: 22px; }
.dash-row-head--label h5 {
  font-family: var(--font-tag);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* "Continue assistindo" — cards de curso com thumb + tag de módulo
   sobreposta + legenda abaixo, réplica do carrossel real do Figma. */
.course-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.course-row::-webkit-scrollbar { display: none; }

.course-card {
  flex: 0 0 auto;
  width: 130px;
  scroll-snap-align: start;
}
.course-card__thumb {
  position: relative;
  height: 78px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
  gap: 5px;
}
.course-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}
.course-card--1 .course-card__thumb { background: linear-gradient(135deg, #3a1f14, #7a2e1c); }
.course-card--2 .course-card__thumb { background: linear-gradient(135deg, #1c2a3a, #2e5170); }
.course-card--3 .course-card__thumb { background: linear-gradient(135deg, #2a1c3a, #5b2e70); }
.course-card--4 .course-card__thumb { background: linear-gradient(135deg, #1c3a2a, #2e7050); }
.course-card--5 .course-card__thumb { background: linear-gradient(135deg, #3a1c2a, #7a1c45); }
.course-card--6 .course-card__thumb { background: linear-gradient(135deg, #2a2a1c, #706a2e); }

.course-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.course-card__tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: 7px;
  letter-spacing: 0.03em;
}
.course-card__sub {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-dots { display: flex; justify-content: center; gap: 5px; margin-top: 16px; }
.module-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.module-dots span.active { background: rgba(255, 255, 255, 0.8); }

/* ---- Retenção: video + checklist ---- */
.retencao-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px) {
  .retencao-grid { grid-template-columns: 1.3fr 1fr; }
}
.video-player {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: linear-gradient(155deg, #2b2344, #14101f);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.video-progress {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}
.video-progress-bar {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), #3e7bff);
}
.checklist { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.check-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.check-dot.done {
  background: #4cd48a;
  border-color: #4cd48a;
}
.checklist li:has(.check-dot.done) { color: rgba(255, 255, 255, 0.85); }

/* ---- Engajamento: community thread ---- */
.thread-list { display: flex; flex-direction: column; gap: 16px; }
.thread-msg { display: flex; align-items: flex-start; gap: 10px; }
.thread-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1, #7b39fc), var(--c2, #3e7bff));
}
.thread-body { min-width: 0; }
.thread-name {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.thread-name span {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11.5px;
  margin-left: 6px;
}
.thread-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-top: 2px;
}
.thread-text a { color: var(--purple); font-weight: 500; }
.thread-image {
  display: block;
  margin-top: 8px;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(155deg, #1a1030, #3e2b6e 60%, #7b39fc);
}

/* ---- Funil automático: pipeline board ---- */
.pipe-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}
.pipe-crumb span { color: rgba(255, 255, 255, 0.25); }
.pipe-crumb b { font-weight: 600; color: rgba(255, 255, 255, 0.65); }

.pipe-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  align-items: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pipe-board::-webkit-scrollbar { display: none; }

.pipe-column {
  flex: 0 0 auto;
  width: 240px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 2px solid var(--dot, rgba(255, 255, 255, 0.2));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pipe-column--ghost { opacity: 0.6; }

.pipe-column-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pipe-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, #fff);
  flex-shrink: 0;
}
.pipe-column-title {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-column-count {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.35);
}
.pipe-column-head--muted .pipe-column-title,
.pipe-column-head--muted .pipe-column-count { color: rgba(255, 255, 255, 0.4); }

.pipe-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.pipe-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pipe-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 10px;
  flex-shrink: 0;
}
.pipe-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pipe-name {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 11.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-email {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pipe-actions button {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.pipe-actions button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.pipe-add {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 11.5px;
  cursor: pointer;
}
.pipe-add:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }

.pipe-empty {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 24px 0;
}

/* ---- "Hot" behavioral columns — eye-catching, auto-triggered stages ---- */
.pipe-column--hot {
  border-top-width: 2px;
  box-shadow: 0 12px 30px -12px var(--glow, transparent);
}
.pipe-column--blue {
  --dot: #3aa9ff;
  --glow: rgba(58, 169, 255, 0.35);
  background: linear-gradient(165deg, rgba(58, 169, 255, 0.16), rgba(58, 169, 255, 0.02) 60%);
  border-color: rgba(58, 169, 255, 0.3);
}
.pipe-column--gold {
  --dot: #ffb23a;
  --glow: rgba(255, 122, 61, 0.35);
  background: linear-gradient(165deg, rgba(255, 122, 61, 0.18), rgba(232, 64, 47, 0.08) 65%);
  border-color: rgba(255, 155, 61, 0.35);
}

.pipe-card--hot {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.pipe-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 9.5px;
  white-space: nowrap;
}
.pipe-column--blue .pipe-badge { background: rgba(58, 169, 255, 0.16); color: #7cc4ff; }
.pipe-column--gold .pipe-badge { background: linear-gradient(90deg, rgba(255, 122, 61, 0.22), rgba(232, 64, 47, 0.22)); color: #ffc98a; }

.dash-table-scroll { overflow-x: auto; }
.dash-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.dash-table th {
  text-align: left;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.dash-table td {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table td:first-child, .dash-table th:first-child { padding-left: 2px; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 11.5px;
}
.pill--amber { background: rgba(245, 176, 65, 0.16); color: #f5b041; }
.pill--green { background: rgba(72, 199, 142, 0.16); color: #4cd48a; }

/* ===== Astron Academy frame (Retenção) ===== */
.dash-logo-box--academy { border-radius: 6px; }

.dash-brand-name--academy {
  display: block !important;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dash-icon-btn--badge { position: relative; }
.dash-icon-btn--badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
}

.dash-sidebar--academy { width: 62px; align-items: center; padding: 20px 8px; }
.dash-sidebar--academy .dash-profile-avatar--top { margin-bottom: 22px; }
.dash-nav--icons { align-items: center; gap: 6px; }
.dash-nav--icons .dash-nav-item {
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-left: none;
  border-radius: 8px;
}
.dash-nav--icons .dash-nav-item.active {
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff;
}

.academy-layout { display: flex; gap: 16px; height: 100%; min-height: 0; }
.academy-video-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.academy-video {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.academy-video img { width: 100%; height: 100%; object-fit: cover; display: block; }

.academy-hint {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(280px, 80%);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  animation: academyHintPulse 1.8s ease-in-out infinite;
}
.academy-hint-arrow {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--red2);
  animation: academyHintArrow 1.4s ease-in-out infinite;
}
@keyframes academyHintPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.035); }
}
@keyframes academyHintArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .academy-hint, .academy-hint-arrow { animation: none; }
}

.academy-lesson-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  flex-shrink: 0;
}
.academy-lesson-title {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.academy-lesson-actions { display: flex; gap: 8px; }
.academy-chip {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.academy-chip:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.academy-lesson-list {
  display: none;
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding-right: 2px;
}
@media (min-width: 640px) {
  .academy-lesson-list { display: block; }
}
.academy-list-title {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin-bottom: 8px;
}
.academy-lesson-list .dash-progress-label { margin-top: 0; }
.academy-lesson-list .dash-progress-track { margin-bottom: 16px; }

.academy-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  margin-bottom: 8px;
}
.academy-module-count {
  font-weight: 500;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
}

.academy-lessons { display: flex; flex-direction: column; gap: 2px; }
.academy-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.academy-lesson:hover { background: rgba(255, 255, 255, 0.05); }
.academy-lesson.active {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(226, 33, 79, 0.14), transparent);
}
.academy-lesson-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.academy-lesson-lock {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
  display: inline-flex;
}
.academy-lesson-name {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Login / signup modal ---- */
.academy-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: academyModalIn 0.3s ease both;
}
.academy-modal-overlay[hidden] { display: none; }
@keyframes academyModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.academy-modal {
  position: relative;
  width: min(340px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 22px 22px 20px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.academy-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  cursor: pointer;
}
.academy-modal h4 {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}
.academy-modal-rule {
  display: block;
  width: 100%;
  height: 2px;
  margin: 14px 0 18px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.academy-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}
.academy-modal-btn {
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--red), var(--red2));
  color: #fff;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 13px;
}
.academy-modal-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
}
.academy-modal-sep {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 18px 0;
}
.academy-modal-cta-title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}
.academy-modal-cta-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}

/* ===== Mobile fullscreen menu =====
   Abre por baixo do header (o hambúrguer continua clicável e vira X).
   Itens com sub-menu deslizam para um nível próprio com botão Voltar. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: #000;
  display: flex;
  flex-direction: column;
  padding-top: 68px;
  animation: menuIn 0.3s ease both;
}
.mobile-menu[hidden] { display: none; }
@keyframes menuIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mm-viewport { position: relative; flex: 1; overflow: hidden; }
.mm-level {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 8px 24px 24px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}
.mm-level.is-active { transform: none; visibility: visible; }
.mm-root { transform: none; visibility: visible; }
.mm-root.is-behind { transform: translateX(-30%); visibility: hidden; }
.mm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-nav);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
button.mm-item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.mm-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 500;
  color: #8a8a93;
  cursor: pointer;
}
.mm-back::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.mm-title {
  margin: 8px 0 12px;
  font-family: var(--font-nav);
  font-size: 26px;
  font-weight: 600;
  color: #fff;
}
.mm-level .mega-heading { margin: 22px 0 4px; }
.mm-level .mega-cta { margin: 22px 0 8px; font-size: 15px; }
.mm-level .mega-link { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; }
.mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .burger .bar { animation: none !important; transition: none !important; }
}

/* ===== Era da Captura Invisível — mecanismo em 3 passos =====
   Fica logo depois do painel de produto: o "porquê" já foi mostrado
   pelas tabs, aqui é o "como" (anúncio → Área de Membros), antes de
   qualquer prova social. */
.invisible { position: relative; z-index: 10; padding: 96px 24px; }
@media (min-width: 1024px) {
  .invisible { padding-left: 120px; padding-right: 120px; }
}

.invisible__inner { max-width: 1240px; margin: 0 auto; }

.invisible__intro { margin-bottom: 48px; }
@media (min-width: 1024px) { .invisible__intro { margin-bottom: 64px; } }

.invisible__kicker { font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }

.invisible__title { font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.2; }

.invisible__subtitle { max-width: min(365px, 100%); margin-top: 14px; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 1099px) { .invisible__subtitle { margin-left: auto; margin-right: auto; } }

/* ---- Fluxo: steps à esquerda (linha pontilhada conectando),
   card de anúncio pequeno, seta, mockup GRANDE — o mockup é o
   protagonista visual da seção, não um acessório encolhido. ---- */
.invisible__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 1180px) {
  .invisible__flow { flex-direction: row; align-items: center; gap: 22px; }
}

/* Linha que "sai" da coluna de passos e aponta pro anúncio — o
   elo que faltava entre os 3 passos e o diagrama, como no print. */
.invisible__bridge { display: none; }
@media (min-width: 1180px) {
  .invisible__bridge {
    display: block;
    flex: 0 0 34px;
    align-self: center;
    height: 0;
    border-top: 1.5px dashed rgba(255, 255, 255, 0.28);
  }
}

.invisible__steps {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 38px;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .invisible__steps { width: 250px; gap: 52px; padding: 4px 0; }
}
/* Linha pontilhada atravessando os 3 passos — o fio que faltava
   pra ligar "o que acontece" visualmente, como no print. */
.invisible__steps::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 12px;
  bottom: 12px;
  width: 0;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.22);
  z-index: 0;
}

.invisible__step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.invisible__num { flex-shrink: 0; width: 26px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 19px; color: #ff5a3d; background: #0a0706; }

.invisible__step p { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); text-align: left; }

.invisible__scene { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; flex: 1; min-width: 0; }
@media (min-width: 768px) {
  .invisible__scene { --frame-w: clamp(280px, calc(100cqw - 230px), 680px); }
}
@media (min-width: 1024px) { .invisible__scene { justify-content: flex-start; } }

/* Cartão do anúncio — label + device com gradiente + "Seu Lead",
   mesma composição de duas camadas do print original */
/* Proporção real do Figma (Group 202 = 174×227 vs mockup 636 de
   largura, ~27%): o anúncio é um coadjuvante pequeno ao lado do
   painel, não quase do mesmo tamanho. */
.invisible__ad {
  position: relative;
  flex-shrink: 0;
  width: 140px;
}
.invisible__ad-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-bottom: 6px; }
.invisible__ad-device {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px -16px rgba(232, 64, 47, 0.5);
}
.invisible__ad-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.invisible__ad-link { display: block; margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.6); text-decoration: underline; text-underline-offset: 2px; }
.invisible__ad-pill { position: absolute; right: -10px; bottom: -12px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #e8402f, #ff8a3d); color: #fff; font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 10.5px; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5); }

.invisible__arrow { flex-shrink: 0; width: 34px; height: 14px; color: rgba(255, 255, 255, 0.35); }
.invisible__arrow svg { width: 100%; height: 100%; }
@media (max-width: 1179px) { .invisible__scene { flex-direction: column; } .invisible__arrow { transform: rotate(90deg); } }

/* Área de Membros em miniatura — clone real do dash-panel (mesmas
   classes/CSS), só encolhido por transform. Garante fidelidade em
   vez de reinventar um mockup aproximado. */
.invisible__mockup-frame { position: relative; flex-shrink: 0; width: clamp(200px, 100%, 420px); aspect-ratio: 1200 / 675; border-radius: 10px; overflow: hidden; border: 1px solid rgba(232, 130, 95, 0.28); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }

.invisible__mockup-badge { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 10px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(100deg, #e2214f, #ff7a3d); color: #fff; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11.5px; text-align: center; box-shadow: 0 10px 24px -8px rgba(226, 33, 79, 0.55); }

/* ===== Liquid glass + noise (utility, generic — reused across the
   proof grid: buttons, gateway tiles, secondary card surfaces) ===== */
.liquid-glass {
  background: rgba(255, 255, 255, 0.03);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.noise-overlay { position: relative; }
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ===== Barra de transição — "É o Nosso Jeito Único de Fazer" =====
   Faixa full-bleed entre Era da Captura Invisível e Não fragmenta
   o Lead, gradiente escuro→laranja→vermelho→escuro do Figma. */
.transition-bar {
  position: relative;
  z-index: 10;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: linear-gradient(90deg, #0d0d0d 0%, #c34f24 39%, #ff2b2b 64%, #0d0d0d 100%);
  overflow: hidden;
}
.transition-bar__text { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(15px, 2.2vw, 24px); letter-spacing: -0.01em; color: #fff; text-align: center; white-space: nowrap; }

/* ===== Não fragmenta o Lead — árvore de fragmentação =====
   Diagrama org-chart puro CSS (sem imagem — só formas): um
   anúncio se espalha em 3 canais, que se espalham em 5 destinos,
   terminando num "muito tráfego disperso". Conectores pontilhados
   via pseudo-elementos, técnica clássica de árvore genealógica. */
.fragment { position: relative; padding: 96px 0; overflow: hidden; }
.fragment__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 6% 15%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 18% 60%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.5px 1.5px at 30% 85%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 46% 25%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 62% 70%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1.5px 1.5px at 75% 10%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1px 1px at 88% 45%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 95% 80%, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
}

.fragment__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
@media (max-width: 1099px) {
  .fragment__inner:not(.fragment__inner--stack) { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .fragment__inner:not(.fragment__inner--stack) .fragment__split { margin-left: auto; margin-right: auto; }
}

/* variante empilhada: diagrama full-width embaixo, usada pelo fluxo .leak.
   Fica alinhada à esquerda no desktop — centraliza junto com o funil
   de cards abaixo de 1099px (tablet e mobile). */
.fragment__inner--stack { display: block; }
.fragment__inner--stack .fragment__copy { max-width: 640px; }
@media (max-width: 1099px) {
  .fragment__inner--stack { text-align: center; }
  .fragment__inner--stack .fragment__copy { margin: 0 auto; }
  .fragment__inner--stack .fragment__split { margin-left: auto; margin-right: auto; }
}

/* ===== Leak — o "caminho quebrado": mostra o lead sumindo a cada etapa,
   em vez de só listar as ferramentas por onde ele passa ===== */
.leak { display: flex; align-items: stretch; justify-content: center; gap: 0; max-width: 1180px; margin: 44px auto 0; }
.leak__stage {
  flex: 1 1 0;
  min-width: 0;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.leak__stage--end { background: rgba(232, 64, 47, 0.08); border-color: rgba(232, 64, 47, 0.35); }
.leak__count { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; }
.leak__count small { font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-left: 3px; }
.leak__stage--end .leak__count { color: #ff8a3d; }
.leak__label { margin-top: 8px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.leak__chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.leak__chip { font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: rgba(232, 64, 47, 0.12); border: 1px solid rgba(232, 64, 47, 0.35); color: #fff; white-space: nowrap; }

.leak__gap { flex: 0 0 52px; position: relative; align-self: center; }
.leak__gap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px dashed rgba(232, 64, 47, 0.3);
}
.leak__gap-badge {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  width: max-content;
  background: #0b0b0b;
  border: 1px solid rgba(232, 64, 47, 0.55);
  color: #ff6a4d;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 1099px) {
  .leak { flex-direction: column; align-items: stretch; gap: 0; max-width: 420px; }
  .leak__stage { flex: none; min-height: 0; }
  .leak__gap { flex: none; height: 46px; align-self: stretch; }
  .leak__gap::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: none; border-left: 1.5px dashed rgba(232, 64, 47, 0.3); }
}

.fragment__kicker { font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }
.fragment__title { font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 18px; }

/* ---- ponte pro Hub, no lugar da antiga seção .pivot ---- */
.fragment__bridge {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
}
.fragment__bridge span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2em;
  background: linear-gradient(100deg, #e8402f, #ff8a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 0.35em;
}

/* ---- a árvore ---- */
/* haste vertical descendo até o nó */
/* barra horizontal ligando irmãos, na altura do topo de cada li —
   estende meio "gap" além da própria caixa pra encontrar o vizinho,
   já que o espaçamento agora vem do column-gap, não de padding. */

/* ===== Transição — "seu lead não é só um número" =====
   Respiro curto entre o mecanismo (Era da Captura Invisível) e a
   prova em números — mesma frase de efeito do print, itálico
   serifado só no trecho de impacto (reaproveita --font-headline,
   já usado no menu mobile). */
.pivot { position: relative; padding: 96px 24px; overflow: hidden; text-align: center; }
@media (min-width: 1024px) {
  .pivot { padding-left: 120px; padding-right: 120px; }
}
.pivot__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 20%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 22% 70%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 38% 35%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 55% 80%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 68% 15%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 82% 55%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 92% 25%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 14% 88%, rgba(255, 255, 255, 0.2), transparent);
  background-size: 100% 100%;
  pointer-events: none;
}
.pivot__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.pivot__kicker { font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.02em; color: #ff5a3d; margin-bottom: 22px; }

.pivot__headline { font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; font-size: clamp(1.7rem, 4.2vw, 2.75rem); line-height: 1.3; letter-spacing: -0.01em; }
.pivot__headline em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; background: linear-gradient(100deg, #e8402f, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.05em; }
.pivot__mark {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.04em;
  border-radius: 22%;
  object-fit: contain;
  vertical-align: -0.12em;
}

.pivot__sub { margin-top: 22px; font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.45); }

@media (max-width: 560px) {
  .pivot { padding: 72px 20px; }
}

/* ===== Ponte "Seu CAC pode reduzir até 60%" =====
   Frase isolada entre a cena orbital e a prova em números — mesmo
   papel de "mas como?": cria a pergunta que o bento seguinte
   responde. Fundo com listras verticais sutis + estrelas, igual
   ao frame do Figma. */
.cac { position: relative; padding: 96px 24px; overflow: hidden; text-align: center; }
@media (min-width: 1024px) {
  .cac { padding-left: 120px; padding-right: 120px; }
}
.cac__stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(232, 64, 47, 0.05) 0,
    rgba(232, 64, 47, 0.05) 1px,
    transparent 1px,
    transparent 60px
  );
  pointer-events: none;
}
.cac__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 25%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 20% 70%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.5px 1.5px at 34% 15%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 48% 60%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 63% 30%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1.5px 1.5px at 78% 75%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1px 1px at 92% 20%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 88% 88%, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}
.cac__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.cac__headline { font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.25; color: rgba(255, 255, 255, 0.9); }
.cac__headline strong { font-weight: 600; color: #fff; white-space: nowrap; }
.cac__sub { margin-top: -10px; font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.25; color: rgba(255, 255, 255, 0.4); }

@media (max-width: 560px) {
  .cac { padding: 72px 20px; }
}

/* ===== Flutes — fundo canelado, reaproveitado entre Paylead e o
   slider de preço pra ler como um único pano de fundo contínuo.
   Cada faixa de ~53px clareia e escurece no meio (curva suave),
   simulando a luz pegando um sulco arredondado. */
.flutes { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-repeat: repeat; background-size: auto 100%; opacity: 0.65; }

/* ===== Paylead — "só paga por usuário ativo" + gráfico de hover ===== */
.paylead {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
.paylead__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(760px 480px at 100% 30%, rgba(232, 64, 47, 0.22), transparent 70%);
}
.paylead__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.09;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
.paylead__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: center;
}

.paylead__headline { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; }
.paylead__sub { margin-top: 16px; max-width: 38ch; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.paylead__google { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 12px 22px; border-radius: 999px; background: #fff; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; color: #1f1f1f; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.paylead__google:hover { transform: translateY(-2px); }
.paylead__google svg { flex-shrink: 0; }

/* --- chart --- */
.paylead__months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-left: 74px;
  margin-bottom: 16px;
}
.paylead__months span { justify-self: center; padding: 4px 10px; border-radius: 6px; background: rgba(232, 64, 47, 0.16); border: 1px solid rgba(232, 64, 47, 0.45); font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 11px; color: #fff; white-space: nowrap; }

.paylead__plot {
  position: relative;
  height: 260px;
  padding-left: 74px;
  cursor: crosshair;
}
.paylead__yaxis-label { position: absolute; left: 0; transform: translateY(-50%); font-family: 'Inter', sans-serif; font-weight: 300; font-size: 11px; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.paylead__svg { position: absolute; inset: 0 0 0 74px; width: calc(100% - 74px); height: 100%; }
.paylead__grid-v, .paylead__grid-h {
  stroke: rgba(232, 64, 47, 0.28);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.paylead__line {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.paylead__line--leads { stroke: #5EC9FF; }
.paylead__line--invest { stroke: #FF6300; }
.paylead__cursor-line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.paylead__dot { stroke: #0a0a0a; stroke-width: 2; }
.paylead__dot--leads { fill: #5EC9FF; }
.paylead__dot--invest { fill: #FF6300; }

.paylead__legend {
  position: absolute;
  left: 74px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.paylead__legend-item { padding: 6px 14px; border-radius: 7px; font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 11px; color: #fff; white-space: nowrap; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6); }
.paylead__legend-item--leads { background: #2E8FD6; }
.paylead__legend-item--invest { background: linear-gradient(90deg, #FF6300, #FFB347); }

.paylead__tooltip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  margin-top: -12px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #0b0b0b;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(#0b0b0b, #0b0b0b), linear-gradient(135deg, #ff6e6e, #ff8000);
  box-shadow:
    0 14px 26px -10px rgba(0, 0, 0, 0.7),
    0 0 30px 6px rgba(255, 128, 0, 0.22);
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}
.paylead__tooltip-value { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; color: #fff; }
.paylead__tooltip-value--leads { color: #5EC9FF; }
.paylead__tooltip-divider {
  display: block;
  height: 1px;
  margin: 7px 0;
  background: rgba(255, 255, 255, 0.12);
}
.paylead__tooltip-label { display: block; margin-top: 1px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

@media (max-width: 1099px) {
  .paylead__inner { grid-template-columns: 1fr; gap: 40px; }
  .paylead__plot { margin-bottom: 52px; }
  .paylead__legend {
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    margin-top: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .paylead__legend-item { font-size: 10.5px; padding: 6px 12px; }
}
@media (max-width: 640px) {
  .paylead { padding: 64px 0; }
  .paylead__chart { margin-top: 4px; }
  .paylead__months { grid-template-columns: repeat(3, 1fr); row-gap: 6px; margin-left: 46px; margin-bottom: 58px; }
  .paylead__months span { font-size: 10px; padding: 3px 7px; }
  .paylead__plot { height: 210px; padding-left: 46px; }
  .paylead__svg { inset: 0 0 0 46px; width: calc(100% - 46px); }
  .paylead__yaxis-label { font-size: 9.5px; }
  .paylead__tooltip { transform: translate(-50%, -100%) scale(0.94); }
}

/* ===== Pricing slider — "paga apenas por usuário ativo" =====
   PREÇOS do Figma. Card com slider nativo (acessível, arrasta
   com mouse/touch/teclado) estilizado por cima com trilha,
   preenchimento em gradiente e os 5 pontos de referência. */
.pricing-slider {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
.pricing-slider__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(760px 480px at 90% 60%, rgba(232, 64, 47, 0.24), transparent 70%);
}
.pricing-slider__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* escurece o lado do texto (esquerda no PC) sobre o fundo listrado, pra
     facilitar a leitura sem esconder o card de preço do outro lado */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 68%);
}
@media (max-width: 1099px) {
  .pricing-slider__scrim {
    /* no celular o texto fica em cima, então o degradê vira vertical */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0) 62%);
  }
}
.pricing-slider__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center;
}

.pricing-slider__headline { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; }
.pricing-slider__sub { margin-top: 14px; max-width: 38ch; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.pricing-slider__google { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 12px 22px; border-radius: 999px; background: #fff; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; color: #1f1f1f; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.pricing-slider__google:hover { transform: translateY(-2px); }
.pricing-slider__google svg { flex-shrink: 0; }

/* --- card --- */
.pricing-slider__card { position: relative; width: 100%; padding: 32px; border-radius: 16px; background: rgba(20, 12, 10, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid transparent; background-clip: padding-box, border-box; background-image: linear-gradient(rgba(20, 12, 10, 0.55), rgba(20, 12, 10, 0.55)), linear-gradient(160deg, rgba(255, 138, 61, 0.5), rgba(232, 64, 47, 0.15) 40%, rgba(255, 255, 255, 0.08)); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.75); }
.pricing-slider__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-slider__card-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 20px; color: #fff; }
.pricing-slider__badge { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, #FF6300, #FFB347); font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 11px; color: #fff; white-space: nowrap; opacity: 1; transition: opacity 0.25s ease; }

.pricing-slider__price { margin-top: 20px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 38px; letter-spacing: -0.02em; color: #fff; transition: color 0.25s ease; }
.pricing-slider__price.is-free { color: #2ecc71; }
.pricing-slider__price small { margin-left: 4px; font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.6); }
.pricing-slider__leads-line { margin-top: 12px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; color: rgba(255, 255, 255, 0.65); }
.pricing-slider__leads-line strong { font-weight: 700; color: #ff5a3d; }

/* --- slider --- */
.pricing-slider__slider-wrap { position: relative; margin-top: 28px; height: 32px; }
.pricing-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: visible;
}
.pricing-slider__fill { position: absolute; inset: 0; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #2b1410, #e8402f 60%, #ff5a3d); transition: width 0.05s linear; }
.pricing-slider__dots {
  position: absolute;
  inset: 0;
}
/* bolinhas marcam onde o plano realmente troca (Grátis → Starter em 10
   leads, → Professional em 200, → Scale em 500), na escala do slider */
.pricing-slider__dots span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.pricing-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: grab;
}
.pricing-slider__input:active { cursor: grabbing; }
.pricing-slider__input::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 100%; }
.pricing-slider__input::-moz-range-track { background: transparent; height: 100%; border: none; }
.pricing-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px;
  height: 24px;
  margin-top: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6), inset 0 0 0 5px rgba(0, 0, 0, 0.1);
  cursor: grab;
}
.pricing-slider__input::-moz-range-thumb {
  width: 34px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6), inset 0 0 0 5px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

.pricing-slider__cta { display: block; margin-top: 28px; padding: 13px 24px; border-radius: 999px; border: 1px solid #ff5a3d; text-align: center; font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-decoration: none; transition: background 0.2s ease; }
.pricing-slider__cta:hover { background: rgba(255, 90, 61, 0.12); }
.pricing-slider__fineprint { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: 'Inter', sans-serif; font-weight: 300; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.35); }

@media (max-width: 1099px) {
  .pricing-slider__inner { grid-template-columns: 1fr; gap: 40px; }
  .pricing-slider__card { max-width: 100%; }
}
@media (max-width: 640px) {
  .pricing-slider { padding: 72px 0; }
  .pricing-slider__card { padding: 24px; }
}

/* ===== Prova em números — bento de credibilidade =====
   Cada card carrega um fato real já estabelecido (história, CAC,
   base de usuários, gateways, contato) — nada de depoimento ou
   logo inventado. */
.proofgrid {
  position: relative;
  z-index: 10;
  padding: 72px 0;
}

.proofgrid__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}
@media (min-width: 1100px) {
  .proofgrid__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
}
.proofgrid__head-copy h2 { font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 12px; }
.proofgrid__head-copy p { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 46ch; }
.proofgrid__head-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.proofgrid__cta { border-radius: 10px; padding: 14px 26px; font-family: var(--font-tag); font-weight: 500; font-size: 16px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; background: var(--purple); transition: background 0.2s ease; }
.proofgrid__cta:hover { background: #ff5a3d; }
.proofgrid__talk { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; font-family: var(--font-tag); font-weight: 500; font-size: 16px; color: #fff; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease; }
.proofgrid__talk:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.32); }
.proofgrid__talk svg { width: 15px; height: 15px; }
.proofgrid__talk:hover { color: #fff; }

.proofgrid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .proofgrid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .proofgrid__grid { grid-template-columns: 1.1fr 1fr; }
}

.proofgrid__col { display: grid; grid-template-rows: auto 1fr; gap: 12px; }

.proofgrid__card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.proofgrid__card--dark { background: #100b18; }
.proofgrid__card--surface { background: #2b1410; }
/* cards --icon (história e 1M+) — mesma linguagem de fundo chapado + brilho
   dos cards de "Ferramentas", sem vídeo de fundo */
.proofgrid__card--icon { background: linear-gradient(155deg, #2a1210 0%, #180a08 60%); }
.proofgrid__story-bg,
.proofgrid__stat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 15% 0%, rgba(255, 138, 61, 0.22), transparent 60%);
}
.proofgrid__stat { background: linear-gradient(155deg, #e8402f 0%, #7a1f12 100%); }
.proofgrid__stat::before { background: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, 0.16), transparent 60%); }

.proofgrid__label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.proofgrid__label--start { justify-content: flex-start; }
.proofgrid__sparkle { width: 12px; height: 12px; color: rgba(255, 255, 255, 0.65); flex-shrink: 0; }
.proofgrid__sparkle--sm { width: 10px; height: 10px; }

/* --- História (col 1) --- */
.proofgrid__story {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
}
.proofgrid__timeline { position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; }
.proofgrid__timeline-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.proofgrid__timeline-row:first-child { border-top: none; padding-top: 0; }
.proofgrid__timeline-row:last-child { padding-bottom: 0; }
.proofgrid__t-year { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,.88); white-space: nowrap; }
.proofgrid__t-role { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,.7); white-space: nowrap; }
.proofgrid__t-detail { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,.42); text-align: right; }
.proofgrid__t-ico { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.proofgrid__t-ico svg { width: 12px; height: 12px; }
.proofgrid__t-ico--rocket { background: rgba(255, 90, 61, 0.16); color: #ff8a3d; }
.proofgrid__t-ico--trophy { background: rgba(255, 199, 84, 0.16); color: #ffcf54; }
.proofgrid__t-ico--trend { background: rgba(76, 212, 138, 0.16); color: #4cd48a; }
.proofgrid__t-ico--support { background: rgba(93, 173, 255, 0.16); color: #5dadff; }

/* --- CAC (col 2 top) --- */
.proofgrid__cac { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.proofgrid__cac-figure { position: relative; z-index: 2; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 19px; line-height: 1.35; color: #fff; }
.proofgrid__cac-figure strong { color: #ff5a3d; font-weight: 600; }
.proofgrid__cac-sub { position: relative; z-index: 2; font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.55); }

/* --- 1M+ (col 2 bottom) --- */
.proofgrid__stat {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.proofgrid__stat-figure { position: relative; z-index: 2; font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: -0.02em; font-size: clamp(2.6rem, 6vw, 4.2rem); color: #fff; filter: drop-shadow(0 2px 14px rgba(0,0,0,.5)); }
.proofgrid__stat-caption { position: relative; z-index: 2; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,.85); }
.proofgrid__stat-ico { position: absolute; top: 50%; left: 50%; z-index: 1; width: 130px; height: 130px; transform: translate(-50%, -50%); color: #fff; opacity: 0.14; pointer-events: none; }
.proofgrid__stat-ico svg { width: 100%; height: 100%; }

/* ===== Showcase (hero card + client marquee) ===== */
.showcase { position: relative; z-index: 10; padding: 96px 0; }

.showcase__card {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
  background: #100b18;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .showcase__card { height: 600px; }
}

.showcase__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.showcase__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1s ease;
}
.showcase__card:hover .showcase__video { transform: scale(1.1); }
.showcase__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 11, 24, 0) 55%, rgba(16, 11, 24, 0.55) 100%);
  pointer-events: none;
}

.showcase__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px;
  max-width: 620px;
}
@media (min-width: 1024px) {
  .showcase__content { padding: 64px 56px; }
}
.showcase__content::before {
  content: '';
  position: absolute;
  top: -32px;
  left: -32px;
  right: 12%;
  bottom: 28%;
  z-index: -1;
  background: radial-gradient(ellipse at 28% 28%, rgba(255, 255, 255, 0.4), transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}

.showcase__kicker { font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 13px; color: #e8402f; margin-bottom: 12px; }

.showcase__devices { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: rgba(23, 23, 23, 0.45); }
.showcase__devices svg { width: 18px; height: 18px; }

.showcase__headline { font-family: 'Inter', sans-serif; font-weight: 400; color: #171717; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; line-height: 1.28; margin-bottom: 22px; }
.showcase__headline strong { font-weight: 700; }

.showcase__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.showcase__store { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; border: 1.5px solid transparent; background: #111; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 12px; color: #fff; transition: background 0.2s ease, border-color 0.2s ease; }
.showcase__store:hover { background: #000; }
.showcase__store--apple { border-color: #d0d0d5; }
.showcase__store--apple:hover { border-color: #fff; }
.showcase__store--play { border-color: #00c853; }
.showcase__store--play:hover { border-color: #3ddc84; }

.showcase__subtext { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(23, 23, 23, 0.7); max-width: 340px; margin-bottom: 20px; }

.showcase__link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; background: #fff; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 12px; color: #171717; text-decoration: none; transition: background 0.2s ease; }
.showcase__link:hover { background: #f2f2f2; }

/* Marquee — same translateX(0)→(-50%) mechanic as .proofgrid__marquee, paused on hover */
.showcase__marquee-mask {
  margin-top: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
@media (min-width: 1024px) {
  .showcase__marquee-mask { margin-top: 32px; }
}
.showcase__marquee {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: showcase-marquee 30s linear infinite;
}
.showcase__marquee-mask:hover .showcase__marquee { animation-play-state: paused; }
@keyframes showcase-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .showcase__marquee { animation: none; }
}

.showcase__logo-card {
  position: relative;
  flex-shrink: 0;
  height: 96px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0a0706;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.showcase__logo-blob { position: absolute; inset: 0; margin: auto; width: 72%; height: 72%; border-radius: 50%; background: linear-gradient(135deg, #e8402f, #ff8a3d); filter: blur(22px); opacity: 0; pointer-events: none; }

.showcase__logo-img {
  position: relative;
  z-index: 1;
  max-width: 68%;
  max-height: 42%;
  object-fit: contain;
}

@media (max-width: 640px) {
  .showcase__card { height: auto; min-height: 520px; }
  .showcase__content { padding: 32px 24px; }
  .showcase__logo-card { height: 76px; width: 130px; }
}

/* ===== "Mas e o meu pós venda?" — ponte de impacto =====
   Frase isolada, mesma técnica de itálico serifado com gradiente
   do .pivot__headline, com um traço pontilhado saindo por baixo
   pra puxar o olho pra seção seguinte. */
.postsale { position: relative; padding: 96px 0 16px; overflow: hidden; text-align: center; }
.postsale__glow {
  position: absolute;
  left: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(232, 64, 47, 0.4), rgba(232, 64, 47, 0.12) 55%, transparent 75%);
  filter: blur(30px);
  pointer-events: none;
}
.postsale__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 30%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 28% 75%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 44% 18%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 60% 55%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 76% 25%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 90% 65%, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}
.postsale__headline { position: relative; z-index: 1; font-family: 'Inter', sans-serif; font-weight: 500; color: #fff; font-size: clamp(2.1rem, 5.6vw, 3.9rem); letter-spacing: -0.01em; line-height: 1.2; }
.postsale__headline em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; background: linear-gradient(100deg, #e8402f, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.05em; }
.postsale__line {
  position: relative;
  z-index: 1;
  display: block;
  width: 0;
  height: 56px;
  margin: 28px auto 0;
  border-left: 1.5px dashed rgba(254, 93, 48, 0.32);
}
@media (max-width: 560px) {
  .postsale { padding: 72px 0 12px; }
  .postsale__line { height: 44px; }
}

/* ===== Upsell — "Aumente o seu LTV" =====
   Group 234 do Figma. O fundo NÃO é imagem — extraí o SVG do
   Rectangle 3988 isoladamente e descobri que é só um linear-
   gradient + um filtro de ruído (feTurbulence), então recriei os
   dois em CSS puro em vez de carregar um raster pesado. Os 3
   cards de módulo (foto + selo "Produto perfeito" + título +
   "Desbloquear" já embutidos) vieram do export limpo em SVG
   renderizado via Chrome headless — o export PNG nativo do Figma
   pra esse grupo também tinha o mesmo bug de ruído/blend que o
   Group 211 (Era da Captura Invisível). Textos, botão e balões
   de chat são HTML real por cima. */
.upsell { position: relative; padding: 16px 0 96px; }
.upsell__panel {
  position: relative;
  margin-top: -40px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(112deg, #cf2626 1.4%, #cf3f26 47%, #080808 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.upsell__noise {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

.upsell__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; padding: 40px clamp(20px, 4vw, 48px); }
@media (min-width: 1100px) {
  .upsell__body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
}

.upsell__copy { max-width: 420px; }
@media (max-width: 1099px) {
  .upsell__body { text-align: center; }
  .upsell__copy { margin: 0 auto; }
  .upsell__split { margin-left: auto; margin-right: auto; font-size: 14px; max-width: 44ch; }
  /* respiro pro selo de fogo, que sai pra fora do topo dos cards */
  .upsell__gallery { margin-top: 18px; }
}
.upsell__headline { font-family: 'Inter', sans-serif; font-weight: 700; color: #fff; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; }
.upsell__google { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 18px; border-radius: 999px; background: #fff; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; color: #1f1f1f; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6); }
.upsell__google svg { flex-shrink: 0; width: 15px; height: 15px; }

.upsell__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Os cards são mockups completos de "conteúdo bloqueado" (banner +
   foto + botão Desbloquear), não fotos soltas — a proporção precisa
   bater com a imagem original (408x900) pra não cortar o banner/botão. */
.upsell__card { position: relative; }
.upsell__card-frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7); aspect-ratio: 21 / 50; }
.upsell__card-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* selo flutuante no topo do card, sugerindo "conteúdo em alta" */
.upsell__card-fire { position: absolute; top: -14px; right: 10px; z-index: 3; font-size: 26px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }

/* Balões flutuam perto do card a que se referem — sugerindo que a
   plataforma identificou aquele aluno específico como pronto pra
   comprar aquele módulo, não um aviso genérico solto embaixo. */
.upsell__gallery { position: relative; }
.upsell__notices { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 2; }
.upsell__notice {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 190px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.35;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.75);
  pointer-events: auto;
}
.upsell__notice::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: #0b0b0b;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.upsell__notice strong { font-weight: 700; color: #fff; }
.upsell__notice-avatar { flex-shrink: 0; width: 22px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
.upsell__notice span { min-width: 0; }

.upsell__notice--1 { top: -20px; left: 2%; }
.upsell__notice--1::after { bottom: -5px; left: 22px; transform: rotate(45deg); }
.upsell__notice--2 { bottom: -20px; left: 4%; }
.upsell__notice--2::after { top: -5px; left: 22px; transform: rotate(225deg); }
.upsell__notice--3 {
  bottom: -16px;
  right: 0;
  border-color: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(#0b0b0b, #0b0b0b), linear-gradient(135deg, #ff6e6e, #ff8000);
}
.upsell__notice--3::after { top: -5px; right: 22px; left: auto; transform: rotate(225deg); background: #0b0b0b; border-color: transparent; }

.upsell__foot { grid-column: 1 / -1; }
.upsell__link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.75); text-decoration: none; white-space: nowrap; }
.upsell__link:hover { color: #fff; }
.upsell__link svg { flex-shrink: 0; }

@media (max-width: 640px) {
  .upsell { padding: 12px 0 56px; }
  .upsell__body { padding: 28px 18px; gap: 20px; text-align: center; }
  .upsell__copy { max-width: none; margin: 0 auto; }
  .upsell__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .upsell__card-fire { top: -13px; right: 4px; font-size: 18px; }
  /* Sem espaço pra flutuar perto de cada card numa coluna de 3 tão
     estreita — os balões voltam a ficar empilhados abaixo, em fluxo normal */
  .upsell__notices { position: static; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; pointer-events: auto; }
  .upsell__notice { position: static; width: auto; max-width: none; text-align: left; }
  .upsell__notice::after { display: none; }
  .upsell__foot { display: flex; justify-content: center; }
}

/* ===== Ferramentas — vitrine estilo editorial =====
   Destino do link "Veja todas as Ferramentas" do Upsell. Mesmo
   tema escuro + estrelas + tokens (fonte, padding, borda) do
   resto da página — só a estrutura (featured + grid, hover com
   zoom/overlay/cantos em L) veio da referência. */
.tools {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
.tools__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 9% 22%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 24% 68%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 40% 14%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 57% 58%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 73% 30%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 95% 18%, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
}
.tools__inner {
  position: relative;
  z-index: 1;
}

.tools__header { margin-bottom: 48px; }
.tools__header-top { display: flex; flex-direction: column; }
.tools__badge { display: inline-block; width: fit-content; padding: 6px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 18px; }
.tools__heading { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; }
.tools__header-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
}
.tools__subtitle { max-width: 480px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
.tools__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- card de mídia compartilhado (featured + grid) =====
   Cor + ícone real da Astron (não vídeo genérico): sampleei o
   background-color exato de cada blob do astronmembers.com.br
   direto no DOM. Os ícones ali são Font Awesome PRO (licença
   comercial) — não copiei o SVG deles, desenhei um equivalente
   simples e livre pra cada conceito. ---- */
.tools__media {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tools__icon {
  width: 56px;
  height: 56px;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.tools__icon--lg { width: 88px; height: 88px; }
.tools__media:hover .tools__icon { transform: scale(1.08); }

/* Print real da vitrine (astronmembers.com.br/academy) — mais larga
   que o card, balança devagar pra esquerda e direita em loop pra
   sugerir o carrossel horizontal real sem precisar de JS/scroll. */
.tools__showcase {
  position: relative;
  z-index: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  animation: tools-pan 16s ease-in-out infinite;
}
@keyframes tools-pan {
  0%, 100% { transform: scale(1.18) translateX(-6%); }
  50% { transform: scale(1.18) translateX(6%); }
}
@media (prefers-reduced-motion: reduce) {
  .tools__showcase { animation: none; }
}
.tools__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tools__media:hover .tools__overlay { opacity: 1; }
.tools__plus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.tools__media:hover .tools__plus { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tools__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tools__corner--tl { top: 15px; left: 15px; border-top: 1.5px solid; border-left: 1.5px solid; }
.tools__corner--tr { top: 15px; right: 15px; border-top: 1.5px solid; border-right: 1.5px solid; }
.tools__corner--bl { bottom: 15px; left: 15px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.tools__corner--br { bottom: 15px; right: 15px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
.tools__media:hover .tools__corner { opacity: 1; }

.tools__category { display: inline-block; flex-shrink: 0; padding: 4px 12px; border-radius: 999px; color: #fff; font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 11px; white-space: nowrap; }

.tools__pill { width: fit-content; padding: 6px 14px; border-radius: 20px; font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 12px; color: #fff; }
.tools__pill--dark { background: linear-gradient(135deg, #e8402f, #ff8a3d); }
/* pill em cima da imagem, no lugar do bloco de texto que o card featured
   tinha antes de virar um card igual aos outros do carrossel */
.tools__pill--onmedia { position: absolute; z-index: 1; top: 12px; left: 12px; }

/* ---- carrossel: um wrapper que NÃO rola (segura o degradê fixo nas
   bordas) por fora do trilho que rola de verdade — mesma técnica do
   carrossel de planos, ver .plans__carousel ---- */
.tools__carousel { position: relative; overflow: hidden; margin-top: 25px; }
.tools__carousel::after,
.tools__carousel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tools__carousel::after { right: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0), #000); opacity: 1; }
.tools__carousel::before { left: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0), #000); opacity: 0; }
.tools__carousel.at-end::after { opacity: 0; }
.tools__carousel.at-start::before { opacity: 0; }
.tools__carousel:not(.at-start)::before { opacity: 1; }

.tools__row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 4px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tools__row::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tools__card { flex: 0 0 300px; scroll-snap-align: start; }
.tools__card .tools__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tools__card-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tools__card-title { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.4; color: #fff; }

@media (max-width: 1439px) {
  .tools__header-top { align-items: center; text-align: center; }
  .tools__header-bottom { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
}
@media (max-width: 768px) {
  .tools { padding: 72px 0; }
  .tools__row { gap: 14px; }
  .tools__card { flex-basis: min(78%, 280px); }
  /* coluna estreita: o nome da ferramenta (badge colorido) sobe pra cima do
     texto, em vez de ficar do lado, competindo com a descrição que quebra
     em várias linhas */
  .tools__card-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tools__category { order: -1; }
}
@media (max-width: 480px) {
  .tools__row { gap: 10px; }
  .tools__card { flex-basis: 84%; }
  .tools__card-title { font-size: 13px; }
  .tools__category { font-size: 11px !important; padding: 3px 8px !important; }
}

/* --- barra com os ícones das ferramentas, depois do card em destaque --- */
.tools__allbar { margin-top: 20px; padding: 16px clamp(14px, 3vw, 28px); border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.tools__allbar-list {
  list-style: none; margin: 0; padding: 0 6px 0 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  /* os ícones vão sumindo perto da borda, sugerindo que tem mais pra rolar */
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.tools__allbar-list::-webkit-scrollbar { display: none; }
.tools__allbar-list a { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.tools__allbar-list a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); }
.tools__allbar-list svg { width: 17px; height: 17px; }
.tools__allbar-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-family: 'Cabin', sans-serif; font-weight: 500; font-size: 13px; color: #fff; text-decoration: none; white-space: nowrap; transition: border-color 0.2s ease, background 0.2s ease; }
.tools__allbar-cta:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
@media (max-width: 480px) {
  .tools__allbar { padding: 12px; gap: 10px; }
  .tools__allbar-list a { width: 40px; height: 40px; }
  .tools__allbar-cta { padding: 9px 14px; font-size: 12px; }
}

/* ===== Gateways — grid de integrações com scroll horizontal ===== */
.gateways {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
.gateways__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(600px 380px at 12% 0%, rgba(232, 64, 47, 0.28), transparent 70%),
    radial-gradient(520px 360px at 88% 15%, rgba(255, 138, 61, 0.2), transparent 70%),
    radial-gradient(560px 420px at 50% 100%, rgba(139, 92, 246, 0.14), transparent 70%);
}
.gateways__inner { position: relative; z-index: 1; }
.gateways__header { max-width: 560px; margin-bottom: 40px; }
@media (max-width: 1439px) { .gateways__header { text-align: center; margin-inline: auto; } }
.gateways__heading { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; text-wrap: balance; }
.gateways__subtitle { margin-top: 12px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }

.gateways__scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent); mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent); }
.gateways__scroll::-webkit-scrollbar { display: none; }

.gateways__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-columns: 300px;
  gap: 10px;
  width: max-content;
}

.gateways__card { display: flex; align-items: stretch; gap: 14px; height: 88px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; transition: border-color 0.2s ease, background 0.2s ease; scroll-snap-align: start; }
.gateways__card:hover { border-color: #ff5a3d; background: rgba(255, 255, 255, 0.05); }

.gateways__icon {
  flex-shrink: 0;
  align-self: stretch;
  width: 88px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.gateways__icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
}

.gateways__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding-right: 16px;
}
.gateways__meta strong { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: #fff; }
.gateways__meta small { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 11px; color: rgba(255, 255, 255, 0.5); }

.gateways__arrows { display: flex; gap: 10px; margin-top: 24px; }
.gateways__arrow-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gateways__arrow-btn:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.gateways__arrow-btn:active { transform: scale(0.92); }
.gateways__arrow-btn svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .gateways { padding: 72px 0; }
  .gateways__grid { grid-auto-columns: 260px; }
  .gateways__icon { width: 72px; }
  .gateways__icon img { width: 40px; height: 40px; }
  .gateways__card { height: 76px; }
}

/* ===== Planos (Compare em qual o Tier você se encaixa) ===== */
.plans {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}

.plans__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 6% 20%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 18% 65%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 32% 12%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1px 1px at 46% 55%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 61% 28%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 76% 70%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 90% 18%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 12% 88%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 85% 85%, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
}

.plans__inner { position: relative; z-index: 1; }

.plans__title { font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; margin-bottom: 32px; }
@media (max-width: 1439px) {
  .plans__title { text-align: center; }
}

.plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .plans__grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .plans__grid--four { grid-template-columns: repeat(4, 1fr); }
}

.plans__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 28px;
  border-radius: 16px;
  background: #120b0a;
  overflow: hidden;
}
@media (min-width: 1100px) {
  .plans__card--featured { padding-top: 44px; transform: scale(1.04); box-shadow: 0 30px 70px -20px rgba(232, 64, 47, 0.45); z-index: 1; border-top: 2px solid rgba(218, 26, 71, 0.65); }
}

.plans__card--featured { background: linear-gradient(165deg, #1a0805 0%, #7a1f12 42%, #e8402f 72%, #ff9a4d 100%); }

/* barra de destaque afinada e esmaecida nas pontas, em vez de um bloco
   sólido cortando o topo do card */
.plans__badge { position: absolute; top: 0; left: 0; right: 0; padding: 7px 8px; text-align: center; background: linear-gradient(90deg, rgba(20, 8, 5, 0) 0%, rgba(232, 64, 47, 0.85) 30%, rgba(232, 64, 47, 0.85) 70%, rgba(20, 8, 5, 0) 100%); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; }

.plans__name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px; color: #fff; text-align: center; margin-bottom: 12px; }

.plans__price { display: flex; justify-content: center; margin-bottom: 2px; }
.plans__price-value { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 28px; color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
.plans__price-unit { text-align: center; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; min-height: 14px; }

.plans__desc { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); text-align: center; margin-bottom: 20px; min-height: 59px; }

.plans__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px; border-radius: 10px; background: #fff; color: #171717; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; white-space: nowrap; margin-bottom: 10px; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s ease; }
@media (max-width: 420px) {
  .plans__cta { font-size: 12px; padding-left: 8px; padding-right: 8px; }
}
.plans__notice { margin: 0 0 22px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); text-align: center; }
.plans__notice strong { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.plans__cta:hover { background: #f2f2f2; }
.plans__cta--dark { background: #171717; color: #fff; }
.plans__cta--dark:hover { background: #262626; }

.plans__section-label { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; color: #fff; margin-bottom: 14px; }
.plans__card--featured .plans__section-label { border-top-color: rgba(255, 255, 255, 0.18); }

.plans__features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; }
.plans__features li { display: flex; align-items: center; gap: 9px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.plans__features li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: var(--purple);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plans__card--featured .plans__features li::before { background-color: #fff; }
.plans__features li.is-off { color: rgba(255, 255, 255, 0.3); text-decoration: line-through; }
.plans__features li.is-off::before {
  background-color: rgba(255, 255, 255, 0.25);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.plans__enterprise-cta { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 10px; background: #fff; color: #171717; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; white-space: nowrap; transition: background 0.2s ease; }

@media (max-width: 1099px) {
  /* cards em carrossel horizontal (celular e tablet, até o grid de 4 colunas
     do PC), com uma sugestão visual (degradê) de que dá pra arrastar pros
     lados, em vez de empilhar ou espremer os 4 planos numa grade */
  .plans__grid--four {
    position: relative;
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    gap: 14px;
    margin: 0 calc(var(--gutter) * -1) 20px;
    padding: 4px var(--gutter) 10px;
    -webkit-overflow-scrolling: touch;
    /* esconde a barra de rolagem em qualquer navegador — sem ela, o
       degradê não precisa "adivinhar" até onde ela vai */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .plans__grid--four::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .plans__grid--four .plans__card { flex: 0 0 min(78%, 280px); scroll-snap-align: start; }
  /* o degradê vive num wrapper que NÃO rola — só o grid de cards por dentro
     dele rola. Assim ele fica sempre preso na borda da tela (indicando que
     dá pra arrastar), em vez de rolar junto e "grudar" no último card.
     JS (main.js) liga/desliga .at-start/.at-end conforme o scroll, pra ele
     sumir quando não há mais nada pra rolar naquele lado. */
  /* margem negativa + padding igual: dá 16px de folga pro halo pulsante
     do card grátis (.plans__card--free) não ser cortado pelo overflow:hidden,
     sem mudar a posição visual dos cards (a caixa só fica maior, invisível). */
  .plans__carousel { position: relative; overflow: hidden; margin-inline: -16px; padding-inline: 16px; }
  .plans__carousel::after,
  .plans__carousel::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .plans__carousel::after {
    right: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #000);
    opacity: 1;
  }
  .plans__carousel::before {
    left: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), #000);
    opacity: 0;
  }
  .plans__carousel.at-end::after { opacity: 0; }
  .plans__carousel.at-start::before { opacity: 0; }
  .plans__carousel:not(.at-start)::before { opacity: 1; }
}
@media (max-width: 640px) {
  .plans { padding: 72px 0; }
  .plans__card--featured { transform: none; }
}
@media (max-width: 420px) {
  .plans__grid--four .plans__card { flex-basis: 84%; }
}

/* ===== CTA + FAQ ===== */
.cta-faq {
  position: relative;
  padding: 96px 0;
}
.cta-faq__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* --- CTA card --- */
.cta-faq__cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 56px;
  border-radius: 20px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.cta-faq__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Mesma gravação (roxa) e o mesmo truque do .bg-video / .proofgrid__video —
     vira vermelho-laranja só com CSS, sem precisar de um novo asset. */
  filter: hue-rotate(110deg) saturate(1.15);
}
.cta-faq__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 64, 47, 0.6) 0%, rgba(255, 138, 61, 0.28) 45%, rgba(43, 20, 16, 0.78) 100%);
}
.cta-faq__cta-title { position: relative; z-index: 1; font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.15; color: #fff; text-wrap: balance; }
.cta-faq__cta-sub { position: relative; z-index: 1; margin-top: 16px; max-width: 40ch; font-family: "Inter", sans-serif; font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.cta-faq__cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; margin-top: 28px; padding: 14px 28px; border-radius: 10px; background: #171717; color: #fff; font-family: "Cabin", sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.6); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; }
.cta-faq__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -8px rgba(0, 0, 0, 0.65);
}

/* --- FAQ column --- */
.cta-faq__faq-title { font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.01em; color: #fff; }
.cta-faq__faq-sub { margin-top: 8px; font-family: "Inter", sans-serif; font-weight: 300; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.faq-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-item:hover { border-color: rgba(255, 255, 255, 0.18); }
.faq-item.is-open { background: rgba(255, 255, 255, 0.05); }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; text-align: left; font-family: "Inter", sans-serif; font-weight: 500; font-size: 14.5px; color: #fff; background: none; border: none; }
.faq-item__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); color: #e8402f; }
.faq-item__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-item__a-wrap { grid-template-rows: 1fr; }
.faq-item__a-inner { overflow: hidden; }
.faq-item__a { padding: 0 18px 16px; font-family: "Inter", sans-serif; font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); }
@media (prefers-reduced-motion: reduce) {
  .faq-item__a-wrap, .faq-item__chevron { transition: none; }
}

@media (max-width: 900px) {
  .cta-faq__inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .cta-faq { padding: 72px 0; }
  .cta-faq__cta { padding: 40px; }
}
@media (max-width: 480px) {
  .cta-faq__cta { padding: 32px 24px; }
}

/* ===== Footer ===== */
.site-footer {
  position: relative;
  padding: 80px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__mail { margin-top: 14px; font-family: "Inter", sans-serif; font-weight: 400; font-size: 13.5px; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color 0.2s ease; }
.site-footer__mail:hover { color: #fff; }
.site-footer__tagline { margin-top: 14px; max-width: 32ch; font-family: "Inter", sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); }
.site-footer__col h4,
.site-footer__newsletter h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  margin-bottom: 18px;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.site-footer__col a { font-family: "Inter", sans-serif; font-weight: 300; font-size: 13.5px; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.2s ease; }
.site-footer__col a:hover { color: #fff; }
.site-footer__newsletter p { font-family: "Inter", sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; }
.site-footer__form { display: flex; gap: 10px; }
.site-footer__form input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); font-family: "Inter", sans-serif; font-size: 13.5px; color: #fff; }
.site-footer__form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.site-footer__form input:focus-visible { outline: 2px solid #e8402f; outline-offset: 2px; }
.site-footer__form .btn { flex-shrink: 0; padding: 12px 20px; font-size: 13.5px; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: "Inter", sans-serif; font-weight: 300; font-size: 12.5px; color: rgba(255, 255, 255, 0.4); }
.site-footer__social { display: flex; gap: 14px; }
.site-footer__social a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.2s ease; }
.site-footer__social a:hover { color: #fff; }
.site-footer__social svg { width: 20px; height: 20px; }
.site-footer__social a[href*="blog"] { font-family: "Inter", sans-serif; font-weight: 400; font-size: 13px; }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== Scroll reveal ===== *
   Same fadeUp/scaleIn vocabulary + expo-out easing as the entry
   choreography pattern — timed off IntersectionObserver instead
   of mount, since this page scrolls (that piece never applied).
   Elements are visible by default; ".reveal" (the hidden state)
   only gets added by JS after confirming it can also add
   ".is-visible" back — see main.js. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--scale { transform: scale(0.85); }
.reveal--scale.is-visible { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--scale { opacity: 1; transform: none; transition: none; }
}

/* ===== Hero — atualização vinda do componente "Hero + Mockup" (Astron Pages) =====
   Abas com barra de progresso e legenda, dicas animadas, aba Vendas com confirmação,
   campo de e-mail do modal e ajustes de rolagem/mobile. */
.bg::after { background: linear-gradient(to bottom, transparent 0%, transparent 45%, #000000 100%); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.hero-tabs-label { color: #fff; font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 10px; text-align: center; text-transform: uppercase; }
.hero-tab-bar { background: rgba(255, 255, 255, 0.14); border-radius: 2px; bottom: 3px; height: 2px; left: 8px; overflow: hidden; position: absolute; right: 8px; }
.hero-tab-bar-fill { background: rgba(255, 255, 255, 0.7); border-radius: 2px; display: block; height: 100%; width: 0%; }
.hero-tab[data-view="captacao"] .hero-tab-bar-fill { background: #ff8a3d; }
.hero-tab[data-view="retencao"] .hero-tab-bar-fill { background: #3aa9ff; }
.hero-tab[data-view="engajamento"] .hero-tab-bar-fill { background: #ffb23a; }
.hero-tab[data-view="vendas"] .hero-tab-bar-fill { background: #4cd48a; }
.hero-tab.active[data-view="captacao"] { background: rgba(255, 138, 61, 0.16); }
.hero-tab.active[data-view="retencao"] { background: rgba(58, 169, 255, 0.16); }
.hero-tab.active[data-view="engajamento"] { background: rgba(255, 178, 58, 0.16); }
.hero-tab.active[data-view="vendas"] { background: rgba(76, 212, 138, 0.16); }
.hero-tabs-caption { color: #fff; font-family: 'Manrope', sans-serif; font-size: 12.5px; margin: 16px 0 0; min-height: 1.4em; text-align: center; }
.dash-flexrow { align-items: stretch; display: flex; flex-basis: 0%; flex-grow: 1; flex-shrink: 1; min-height: 0; }
.dash-main::-webkit-scrollbar { display: none; }
.dash-view[data-view="vendas"]:not([hidden]) { align-items: center; display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: center; text-align: center; }
.vendas-success-icon { align-items: center; background: rgba(76, 212, 138, 0.16); border-radius: 50%; border: 1px solid rgba(76, 212, 138, 0.4); color: #4cd48a; display: inline-flex; height: 64px; justify-content: center; width: 64px; }
.vendas-success-text { color: #fff; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; }
.vendas-owned { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vendas-owned li { position: relative; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: none; }
.vendas-owned li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vendas-owned__check { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: #4cd48a; color: #06210f; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #0a0a0a; }
.vendas-owned__more { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); font-family: 'Cabin', sans-serif; font-size: 12px; font-weight: 600; }

/* ---- Retenção e LTV: quanto ele entrou pagando x quanto já comprou ---- */
.vendas-ltv-stat { display: flex; align-items: center; gap: 8px; margin: 0; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.vendas-ltv-stat svg { flex-shrink: 0; color: rgba(255, 255, 255, 0.35); }
.vendas-ltv-stat strong { color: #fff; font-weight: 700; }
.vendas-ltv-stat strong.is-acc { color: #ff8a3d; }
.vendas-cards { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vendas-cards li { position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none; border: 1px solid rgba(255, 255, 255, 0.1); }
.vendas-cards li img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Captação: cadastro (aba 1) — só o campo de cadastro, sem distrações ---- */
.dash-view[data-view="retencao"]:not([hidden]) { display: flex; align-items: center; justify-content: center; height: 100%; }

.module-row-wrap { position: relative; }
.dash-hint { -webkit-backdrop-filter: blur(6px); animation: dashHintPulse 1.8s ease-in-out infinite; backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.65); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 600; line-height: 1.3; padding: 6px 11px; pointer-events: none; position: absolute; white-space: nowrap; z-index: 2; }
.dash-hint--modules { left: 10px; top: 10px; }
@keyframes dashHintPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.pipe-board-wrap { position: relative; }
.dash-hint--pipe { left: 10px; top: -8px; }
.pipe-cards::-webkit-scrollbar { display: none; }
.pipe-card:hover { filter: brightness(1.15); }
.pipe-card--new { animation: pipeCardIn 0.4s ease both; background: rgba(255, 138, 61, 0.08); border-color: rgba(255, 138, 61, 0.5); }
.pipe-badge--new { background: rgba(255, 138, 61, 0.22); color: #ffb23a; }
@keyframes pipeCardIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.academy-lesson-list::-webkit-scrollbar { display: none; }
.academy-modal::-webkit-scrollbar { display: none; }
.academy-modal-hint { animation: dashHintPulse 1.8s ease-in-out infinite; background: rgba(255, 138, 61, 0.16); border-radius: 999px; border: 1px solid rgba(255, 155, 61, 0.4); color: #ffb23a; display: inline-block; font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 600; margin: 0 0 10px; padding: 6px 13px; }
.academy-input-label { color: rgba(255, 255, 255, 0.5); display: block; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; margin: 0 0 6px; text-align: left; }
.academy-input-field { background: transparent; border: 0; color: #fff; flex: 1; font-family: 'Inter', sans-serif; font-size: 12.5px; min-width: 0; outline: none; }
.academy-input-field:focus-visible { outline: none; } /* campos do mockup: sem destaque de foco (vence a regra global de input) */
.academy-input-field::placeholder { color: rgba(255, 255, 255, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .dash-hint { animation: none; }
  .academy-modal-hint { animation: none; }
  .pipe-card--new { animation: none; }
}
@media (max-width: 719px) {
  .tagline { text-align: center !important; }
  .hero-tab { padding-bottom: 11px !important; padding-top: 11px !important; }
  .dash-arrows button { font-size: 14px !important; height: 36px !important; width: 36px !important; }
  .academy-modal-close { font-size: 13px !important; height: 30px !important; width: 30px !important; }
  .pipe-actions button { height: 34px !important; width: 34px !important; }
  .dash-hint--modules { line-height: 1.25 !important; max-width: 96px !important; white-space: normal !important; }
}
@media (max-width: 480px) {
  .tagline { font-size: 12.5px !important; margin-bottom: 24px !important; }
  .subtext { font-size: 14px !important; margin-bottom: 22px !important; }
}

/* ajustes de comportamento das regras que já existiam */
.hero-tab { position: relative; overflow: hidden; }
.dash-main, .pipe-cards, .academy-lesson-list, .academy-modal { -ms-overflow-style: none; scrollbar-width: none; }
.pipe-card { cursor: pointer; transition: filter 0.2s ease; }
@media (max-width: 480px) {
  .headline { font-size: 1.75rem !important; margin-bottom: 24px !important; }
  .headline br { display: none !important; }
}

/* ===== Seções atualizadas a partir dos componentes da Astron Pages (Invisível … Footer) ===== */
.site-footer__col h4 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: #fff; margin-bottom: 18px; }
.site-footer__newsletter h4 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: #fff; margin-bottom: 18px; }
.invisible__mockup-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.fragment__split { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); max-width: 42ch; }
.fragment__diagram { width: 100%; display: flex; justify-content: center; }
.fragment__diagram-image { display: block; width: 100%; height: auto; }
.pricing-slider__badge.is-hidden { opacity: 0; pointer-events: none; }
.seam { position: relative; height: 48px; background: #000; overflow: hidden; }
.seam__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent 0%, #e85d6b 15%, #e8935a 45%, #c2493a 65%, #6b5a5a 85%, transparent 100%); filter: blur(6px); opacity: 0.85; }
.upsell__split { margin-top: 16px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: clamp(11px, 1vw, 14px); line-height: 1.5; color: rgba(255, 255, 255, 0.75); max-width: 34ch; }
.upsell__chat-split { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upsell__chat-split strong { display: flex; justify-content: space-between; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(8px, 0.85vw, 11px); color: #fff; }
.upsell__chat-split strong em { font-style: normal; font-weight: 400; color: rgba(255, 255, 255, 0.4); font-size: 0.85em; }
.upsell__chat-split > em { font-style: normal; font-family: 'Inter', sans-serif; font-size: clamp(7.5px, 0.8vw, 10px); color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plans__billing-info { display: flex; gap: 20px; align-items: center; padding: 24px 28px; border-radius: 16px; background: rgba(255, 55, 110, 0.08); border: 1px solid rgba(255, 55, 110, 0.2); margin-bottom: 32px; }
.plans__billing-icon { flex-shrink: 0; font-size: 28px; color: #ff376e; opacity: 0.9; }
.plans__billing-text h3 { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 16px; color: #fff; margin-bottom: 6px; }
.plans__billing-text > p { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.65); max-width: 70ch; }
.plans__billing-highlights { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.plans__billing-highlight { display: flex; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.plans__billing-highlight i { color: #90c421; }
.plans__icon { text-align: center; font-size: 26px; color: #e8402f; margin-bottom: 8px; }
.plans__card--featured .plans__icon { color: #fff; }
.plans__features li i { flex-shrink: 0; width: 14px; text-align: center; font-size: 13px; }
.plans__features li strong { font-weight: 600; color: #fff; }
.plans__card--featured .plans__features li strong { color: #fff; }
.spec-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(144, 196, 33, 0.16); color: #90c421; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 11px; }
.plans__card--featured .spec-badge { background: rgba(255, 255, 255, 0.2); color: #fff; }
.plans__enterprise-banner { display: flex; align-items: center; gap: 28px; padding: 32px 40px; border-radius: 18px; margin-bottom: 28px; background: linear-gradient(120deg, #100c02 0%, #4a3410 45%, #c9973f 100%); border: 1px solid rgba(201, 151, 63, 0.35); box-shadow: 0 30px 70px -30px rgba(201, 151, 63, 0.4); }
.plans__enterprise-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255, 255, 255, 0.12); font-size: 24px; color: #f3d9a4; }
.plans__enterprise-copy { flex: 1; min-width: 0; }
.plans__enterprise-copy h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: #fff; letter-spacing: -0.01em; margin-bottom: 6px; }
.plans__enterprise-copy h3 strong { color: #f3d9a4; font-weight: 700; }
.plans__enterprise-copy p { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); max-width: 56ch; }
.plans__enterprise-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.plans__enterprise-price { font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.plans__enterprise-price small { color: rgba(255, 255, 255, 0.5); }
.plans__enterprise-cta:hover { background: #f3d9a4; }
.plans__more-link { display: block; text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.plans__more-link:hover { color: #fff; }

/* ===== Depoimentos — usado na home (3 cards + link) e na página dedicada (grid completo) ===== */
.testi { position: relative; padding: 96px 0; }
@media (max-width: 640px) { .testi { padding: 64px 0; } }
.testi__head { margin-bottom: 44px; }
@media (max-width: 1439px) { .testi__head { text-align: center; } }
.testi__kicker { font-family: var(--font-tag); font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }
.testi__title { font-family: var(--font-body); font-weight: 600; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.2; }
.testi__sub { max-width: 58ch; margin: 14px 0 0; font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 1439px) { .testi__sub { margin-inline: auto; } }

/* Carrossel de verdade, igual ao de ferramentas/ecossistema: wrapper que
   NÃO rola (segura o degradê fixo nas bordas) por fora do trilho que
   rola de verdade — mesma técnica de .tools__carousel / .tsum__carousel. */
/* Esteira contínua em CSS puro — mesmo mecanismo da faixa de logos
   (.showcase__marquee): sem JS, sem setas, conteúdo duplicado uma vez
   no HTML pra fechar o loop em translateX(-50%), pausa no hover. */
.testi__marquee-mask {
  margin-top: 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.testi__marquee { list-style: none; margin: 0; display: flex; width: max-content; gap: 16px; padding: 4px 4px 10px; animation: testi-marquee 20s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.testi__marquee--long { animation-duration: 20s; }
.testi__marquee-mask:hover .testi__marquee { animation-play-state: paused; }
.testi__marquee > li { flex: 0 0 240px; }
@media (max-width: 640px) { .testi__marquee > li { flex: 0 0 min(70%, 210px); } }
@keyframes testi-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .testi__marquee { animation: none; } }

/* Cards tipo pôster, igual ao carrossel "Um ecossistema completo" (.tsum):
   a foto toma o card inteiro, texto entalhado por cima com degradê embaixo,
   sem caixinha com borda e padding ao redor. */
.testi-card { display: block; width: 100%; position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #0b0b0b; transform: translateZ(0); }
.testi-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.testi-card:hover .testi-card__photo { transform: scale(1.02); }
.testi-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0) 62%); pointer-events: none; }
.testi-card__play { position: absolute; z-index: 2; left: 50%; top: 42%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(255, 255, 255, 0.5); transition: background 0.2s ease, border-color 0.2s ease; }
.testi-card__play svg { width: 13px; height: 13px; margin-left: 2px; fill: #fff; }
.testi-card:hover .testi-card__play { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.8); }
.testi-card__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 16px 18px; }
.testi-card__who { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.testi-card__quote { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.testi-card__name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; color: #fff; }
.testi-card__role { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

.testi__more { display: block; text-align: center; margin-top: 32px; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.testi__more:hover { color: #fff; }
@media (min-width: 768px) {
  .invisible__mockup-frame { width: clamp(280px, calc(100% - 230px), 680px); }
}
@media (max-width: 768px) {
  .invisible { padding-top: 72px !important; padding-bottom: 72px !important; }
  .fragment { padding-top: 72px !important; padding-bottom: 72px !important; }
  .proofgrid { padding-top: 72px !important; padding-bottom: 72px !important; }
  .showcase { padding-top: 72px !important; padding-bottom: 72px !important; }
}
@media (max-width: 900px) {
  .fragment__split { max-width: none; margin: 0 auto; }
  .plans__enterprise-banner { flex-direction: column; align-items: flex-start; text-align: left; padding: 28px; }
  .plans__enterprise-action { align-items: stretch; width: 100%; }
}
@media (max-width: 640px) {
  .plans__billing-info { flex-direction: column; align-items: flex-start; }
}

/* logo do rodapé: agora é a imagem oficial (a regra .logo-mark do header não é mais usada) */
.site-footer .logo-mark { display: block; width: 25px; height: 25px; border-radius: 5px; object-fit: contain; background: none; }
.site-footer .logo-word { font-size: 18px; font-weight: 700; font-family: 'Poppins', var(--font-nav); }

/* ===== Hub — "O Lead consome desde o primeiro clique" =====
   A Astron é a bola no centro: à esquerda o lead entra (captação, aula, engajamento),
   à direita ele compra e fica (venda, upsell, retenção). No desktop feixes de SVG ligam
   cada etapa ao hub e um pulso percorre o funil na ordem; no celular vira uma linha do
   tempo vertical com o hub no topo. Sem JS (ou com "reduzir movimento") tudo fica visível. */
.hub { position: relative; padding: 96px 0; overflow: hidden; }
.hub__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 26% 65%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 42% 10%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 58% 80%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 74% 35%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 95% 15%, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
}
.hub__intro { position: relative; z-index: 1; max-width: 720px; margin: 0 0 48px; }
.hub__kicker { font-family: var(--font-tag); font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }
.hub__title { font-family: var(--font-body); font-weight: 600; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.2; }
.hub__subtitle { max-width: 58ch; margin: 16px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }
@media (max-width: 1099px) {
  .hub__intro { margin: 0 auto 48px; text-align: center; }
  .hub__title { max-width: 20ch; margin-left: auto; margin-right: auto; }
  .hub__subtitle { margin: 16px auto 0; }
}

.hub__scene { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; }
.hub__beams { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.hub-beam { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; transition: stroke 0.35s ease; }
.hub-beam.is-lit { stroke: #ff5a3d; }
.hub-node { fill: rgba(255, 255, 255, 0.35); transition: fill 0.35s ease; }
.hub-node.is-lit { fill: #ff5a3d; }
.hub-pulse { fill: none; stroke: #ff5a3d; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }

/* --- a bola --- */
.hub__core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hub__stage { --hs: 220px; position: relative; width: var(--hs); height: var(--hs); display: grid; place-items: center; }
.hub__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(232, 64, 47, 0.16) 0%, rgba(232, 64, 47, 0.05) 34%, transparent 62%); pointer-events: none; }
.hub__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.11); }
.hub__ring--1 { width: 64%; height: 64%; border-color: rgba(255, 90, 61, 0.28); }
.hub__ring--2 { width: 82%; height: 82%; }
.hub__ring--3 { width: 100%; height: 100%; border-color: rgba(255, 255, 255, 0.06); }
.hub__orbit { position: absolute; left: 50%; top: 50%; width: 82%; height: 82%; margin: -41% 0 0 -41%; animation: hubSpin 22s linear infinite; }
.hub__dot { position: absolute; left: 50%; top: 0; width: 13px; height: 13px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffb27a, #e8402f); }
.hub__ball {
  position: relative;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8402f;
  box-shadow: 0 0 60px rgba(232, 64, 47, 0.32);
  animation: hubBreath 4.5s ease-in-out infinite;
}
.hub__logo { display: grid; place-items: center; width: 46%; aspect-ratio: 1; }
.hub__logo img { width: 72%; height: 72%; object-fit: contain; }
.hub__burst { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; margin: -26% 0 0 -26%; border-radius: 50%; border: 1.5px solid rgba(255, 90, 61, 0.7); opacity: 0; pointer-events: none; }
.hub__stage.is-burst .hub__burst { animation: hubBurst 1.5s ease-out; }
.hub__label { margin-top: 6px; font-family: var(--font-nav); font-weight: 700; font-size: 15px; color: #fff; }
.hub__sale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 12.5px;
  color: #b8f5d0;
  background: rgba(76, 212, 138, 0.14);
  border: 1px solid rgba(76, 212, 138, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hub__core.is-sold .hub__sale { opacity: 1; transform: none; }
@keyframes hubSpin { to { transform: rotate(360deg); } }
@keyframes hubBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes hubBurst { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.1); opacity: 0; } }

/* --- etapas --- */
.hub__steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hub-step {
  position: relative;
  z-index: 1;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.hub-step:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.hub.is-live .hub-step:not(.is-active) { opacity: 0.8; }
.hub-step.is-active { border-color: #ff5a3d; background: rgba(255, 255, 255, 0.05); }
.hub-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hub-step__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hub-step.is-active .hub-step__num { background: var(--purple); border-color: transparent; }
.hub-step__tag { font-family: var(--font-nav); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #ff8a3d; }
.hub-step__title { margin-bottom: 12px; font-family: var(--font-nav); font-weight: 600; font-size: 16px; line-height: 1.3; color: #fff; }
.hub-step__text { margin-top: 12px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.hub-step__mock { min-height: 64px; }

/* --- miniaturas das etapas --- */
.hs-row { display: flex; align-items: center; gap: 10px; }
.hs-arrow { flex-shrink: 0; color: #ff8a3d; }
.hs-thumb { position: relative; flex: 0 0 auto; width: 96px; height: 64px; border-radius: 8px; overflow: hidden; }
.hs-thumb img, .hs-video img, .hs-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-chip { display: inline-block; padding: 4px 9px; border-radius: 6px; font-family: var(--font-nav); font-weight: 700; font-size: 10px; color: #fff; background: var(--purple); }
.hs-thumb .hs-chip { position: absolute; left: 6px; bottom: 6px; }
.hs-chip--float { position: absolute; left: 8px; bottom: 8px; }
.hs-chip--solid { align-self: flex-start; }
.hs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-family: var(--font-nav); font-weight: 700; font-size: 11.5px; color: #b8f5d0; background: rgba(76, 212, 138, 0.14); border: 1px solid rgba(76, 212, 138, 0.4); }
.hs-video { position: relative; height: 84px; border-radius: 8px; overflow: hidden; }
.hs-post { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.hs-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.hs-post__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hs-post__body b { font-family: var(--font-nav); font-weight: 600; font-size: 11.5px; color: #fff; }
.hs-post__body i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.hs-post__body i:last-child { width: 62%; }
.hs-heart { color: #ff5c71; }
.hs-buy { display: flex; align-items: center; gap: 12px; }
.hs-cover { flex: 0 0 auto; width: 52px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; }
.hs-buy__side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hs-buy__side small { font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.hs-btn { display: inline-block; padding: 8px 16px; border-radius: 8px; font-family: var(--font-nav); font-weight: 700; font-size: 12px; color: #fff; background: var(--purple); }
.hs-ret { display: flex; flex-direction: column; gap: 8px; }
.hs-ret__row { display: flex; justify-content: space-between; font-family: var(--font-nav); font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
.hs-ret__row b { color: #fff; }
.hs-progress { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.hs-progress span { display: block; width: 80%; height: 100%; border-radius: 999px; background: var(--purple); }
.hs-cert { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px 6px 8px; border-radius: 8px; font-family: var(--font-nav); font-weight: 600; font-size: 11.5px; color: #ffd9b8; background: rgba(255, 138, 61, 0.14); border: 1px solid rgba(255, 138, 61, 0.35); }

.hub__google { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 36px auto 0; padding: 12px 22px; border-radius: 999px; background: #fff; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: #1f1f1f; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); }
.hub__google svg { flex-shrink: 0; width: 17px; height: 17px; }

/* --- celular: hub no topo + linha do tempo vertical --- */
@media (max-width: 959px) {
  .hub__stage { --hs: 232px; }
  .hub__core { margin-bottom: 4px; }
  .hub__steps { --rail: 0px; position: relative; padding-left: 50px; gap: 16px; }
  .hub__steps::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
  .hub__steps::after { content: ""; position: absolute; left: 17px; top: 18px; width: 2px; height: var(--rail); border-radius: 2px; background: #ff5a3d; transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
  .hub-step__num { position: absolute; left: -50px; top: 13px; width: 34px; height: 34px; font-size: 13px; background: #15100f; z-index: 2; }
  .hub-step__head { padding-left: 0; }
  .hub-step__text { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .hub { padding: 72px 0; }
  .hub__title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}

/* --- desktop: hub no centro, etapas nos dois lados, feixes de SVG --- */
@media (min-width: 960px) {
  .hub__scene { display: grid; grid-template-columns: minmax(0, 1fr) 316px minmax(0, 1fr); column-gap: clamp(48px, 6vw, 84px); align-items: center; }
  .hub__beams { display: block; }
  .hub__stage { --hs: 316px; }
  .hub__core { grid-column: 2; grid-row: 1; }
  .hub__steps { display: contents; }
  .hub-step[data-step="1"], .hub-step[data-step="2"], .hub-step[data-step="3"] { grid-column: 1; }
  .hub-step[data-step="4"], .hub-step[data-step="5"], .hub-step[data-step="6"] { grid-column: 3; }
  .hub-step[data-step="1"], .hub-step[data-step="4"] { grid-row: 2; }
  .hub-step[data-step="2"], .hub-step[data-step="5"] { grid-row: 3; }
  .hub-step[data-step="3"], .hub-step[data-step="6"] { grid-row: 4; }
  .hub__core { grid-row: 2 / span 3; }
}
@media (prefers-reduced-motion: reduce) {
  .hub__orbit, .hub__ball { animation: none; }
  .hub__stage.is-burst .hub__burst { animation: none; }
  .hub-step { transition: none; }
}

/* ===== Ferramentas — clicar no card abre o detalhe na mesma página ===== */
.tools__featured[data-tool], .tools__card[data-tool] { cursor: pointer; }
.tools__featured[data-tool]:focus-visible, .tools__card[data-tool]:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 14px; }
.tools__card[data-tool]:hover .tools__card-title { color: #fff; }
.tools__card[data-tool]:hover .tools__media { border-color: rgba(255, 255, 255, 0.24); }

body.tools-dialog-open { overflow: hidden; }
.tools-dialog {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0d0d0f;
  color: #fff;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.tools-dialog::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tools-dialog[open] { animation: toolsDialogIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tools-dialog[open]::backdrop { animation: toolsBackdropIn 0.3s ease; }
.tools-dialog.is-closing { animation: toolsDialogOut 0.17s ease forwards; }
.tools-dialog.is-closing::backdrop { animation: toolsBackdropOut 0.17s ease forwards; }
@keyframes toolsDialogIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toolsDialogOut { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes toolsBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toolsBackdropOut { to { opacity: 0; } }

.tools-dialog__panel { position: relative; display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .tools-dialog__panel { grid-template-columns: 0.9fr 1.1fr; min-height: 460px; } }
.tools-dialog__media { position: relative; min-height: 220px; overflow: hidden; }
.tools-dialog__media .tools__media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; cursor: default; }
.tools-dialog__media .tools__icon { width: 96px; height: 96px; }
.tools-dialog__media .tools__icon, .tools-dialog__media .tools__showcase { animation: none; }
.tools-dialog__media .tools__showcase { transform: none; object-position: 18% center; }
.tools-dialog__media .tools__plus, .tools-dialog__media .tools__overlay, .tools-dialog__media .tools__corner { display: none; }
.tools-dialog__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 44px 36px 36px; }
.tools-dialog__title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -0.01em; line-height: 1.25; color: #fff; }
.tools-dialog__content { display: flex; flex-direction: column; align-items: flex-start; }
.tools-dialog__desc { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); }
.tools-dialog__list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 20px 0 26px; }
.tools-dialog__list li { position: relative; padding-left: 24px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.tools-dialog__list li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 11px; border-right: 2px solid #ff5a3d; border-bottom: 2px solid #ff5a3d; transform: rotate(45deg); }
.tools-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.tools-dialog__link { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.6); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.tools-dialog__link:hover { color: #fff; }
.tools-dialog__close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; cursor: pointer; transition: background 0.2s ease; }
.tools-dialog__close:hover { background: rgba(255, 255, 255, 0.16); }
@media (prefers-reduced-motion: reduce) {
  .tools-dialog[open], .tools-dialog.is-closing, .tools-dialog[open]::backdrop, .tools-dialog.is-closing::backdrop { animation: none; }
}

/* Botões "com o Google" agora são links para o cadastro oficial */
a.btn--google, a.hub__google, a.upsell__google { text-decoration: none; width: fit-content; }
a.btn--google { width: auto; }

/* ---------------------------------------------------
   Páginas de recurso (/recursos/*) — um recurso por página, no mesmo
   estilo dos cards do hub: borda fina, fundo translúcido, brilho suave.
--------------------------------------------------- */
.rec-page { background: #000; }
.rec-hero { position: relative; padding: 40px 0 64px; overflow: hidden; }
@media (min-width: 1024px) { .rec-hero { padding-top: 64px; padding-bottom: 96px; } }
.rec-hero__glow { position: absolute; left: 50%; top: -220px; width: min(1100px, 140%); height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #e8402f) 26%, transparent), transparent); opacity: 0.55; pointer-events: none; }
.e404__code { font-family: var(--font-body); font-weight: 700; font-size: clamp(64px, 11vw, 120px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 8px; background: linear-gradient(135deg, var(--purple) 0%, #ff9a4d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rec-hero__inner { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 1100px) { .rec-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; } .rec-hero__inner--center { grid-template-columns: 1fr; text-align: center; } .rec-hero__inner--center .rec-hero__lead { margin-inline: auto; } }
.rec-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: var(--font-tag); font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.rec-hero__inner--center .rec-crumb { justify-content: center; }
.rec-crumb a { transition: color 0.2s ease; }
.rec-crumb a:hover { color: #fff; }
.rec-crumb [aria-current] { color: rgba(255, 255, 255, 0.85); }
.rec-hero__title { font-family: var(--font-body); font-weight: 600; color: #fff; font-size: clamp(2rem, 4.8vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.1; max-width: 18ch; }
.rec-hero__inner--center .rec-hero__title { max-width: none; }
.rec-hero__lead { margin-top: 20px; max-width: 58ch; font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: rgba(255, 255, 255, 0.66); }
.rec-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.rec-hero__actions .btn { width: auto; }
.rec-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rec-store { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, 0.8); transition: border-color 0.2s ease, color 0.2s ease; }
.rec-store:hover { border-color: #ff5a3d; color: #fff; }

.rec-stage { position: relative; display: grid; place-items: center; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin-inline: auto; border-radius: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.rec-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(255, 255, 255, 0.05) 22.4% 22.8%, transparent 23.2% 36%, rgba(255, 255, 255, 0.04) 36.4% 36.8%, transparent 37.2% 50%, rgba(255, 255, 255, 0.03) 50.4% 50.8%, transparent 51.2%); }
.rec-stage__tile { position: relative; width: 36%; aspect-ratio: 1 / 1; border-radius: 28%; background: var(--g); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.8), 0 0 60px -14px color-mix(in srgb, var(--sh-c, #e8402f) 60%, transparent); }
.rec-stage__tile::after, .rec-chip__ico::after, .rec-card__ico::after { content: ""; position: absolute; inset: 26%; background: #fff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

.rec-points { padding: 24px 0 72px; }
.rec-h2 { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; margin-bottom: 28px; }
.rec-points__list { list-style: none; display: grid; gap: 16px; }
@media (min-width: 800px) { .rec-points__list { grid-template-columns: repeat(3, 1fr); } }
.rec-point { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.25s ease, background 0.25s ease; }
.rec-point:hover { border-color: rgba(255, 90, 61, 0.55); background: rgba(255, 255, 255, 0.05); }
.rec-point__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 90, 61, 0.55); font-family: var(--font-nav); font-weight: 700; font-size: 12px; color: #ff5a3d; }
.rec-point p { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }

.rec-more { padding: 8px 24px 72px; }
.rec-chips { list-style: none; display: grid; gap: 10px; }
@media (min-width: 620px) { .rec-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rec-chips { grid-template-columns: repeat(3, 1fr); } }
.rec-chip { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s ease, background 0.2s ease; }
.rec-chip:hover { border-color: rgba(255, 90, 61, 0.5); background: rgba(255, 255, 255, 0.05); }
.rec-chip__ico { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--g); box-shadow: var(--sh); }
.rec-chip__ico::after { inset: 24%; }
.rec-chip__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-chip__txt b { font-family: var(--font-nav); font-weight: 600; font-size: 14px; color: #fff; }
.rec-chip__txt small { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.rec-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #ff5a3d; transition: gap 0.2s ease; }
.rec-all:hover { gap: 12px; }

.rec-cards { list-style: none; display: grid; gap: 14px; }
@media (min-width: 620px) { .rec-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rec-cards { grid-template-columns: repeat(3, 1fr); } }
.rec-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.rec-card:hover { border-color: rgba(255, 90, 61, 0.55); background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.rec-card__ico { position: relative; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; background: var(--g); box-shadow: var(--sh); }
.rec-card__ico::after { inset: 24%; }
.rec-card b { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: #fff; }
.rec-card p { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.rec-card__more { margin-top: auto; padding-top: 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #ff5a3d; }

.rec-cta { padding: 0 0 96px; }
.rec-cta__inner { position: relative; padding: 48px 24px; border-radius: 20px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(232, 64, 47, 0.16), transparent 70%), rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); }
.rec-cta__title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; max-width: 22ch; margin: 0 auto; }
.rec-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.rec-cta__actions .btn { width: auto; }
@media (max-width: 520px) { .rec-hero__actions .btn, .rec-cta__actions .btn { width: 100%; justify-content: center; } }
.rec-hero__actions .btn, .rec-cta__actions .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------
   Páginas de recurso — versão rica: hero com mockup do recurso, números e
   logos, seção "o que é" com fluxo, cards com imagem, passos e faixa final.
   A cor de destaque vem de --acc (a mesma do ícone do recurso no menu).
--------------------------------------------------- */
.rec-hero__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--acc, #e8402f) 30%, transparent), transparent); }

/* -- mockups do hero -- */
.rv { position: relative; width: 100%; max-width: 540px; margin-inline: auto; padding: 22px 12px 32px; }
.rv-win { position: relative; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85); overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rv-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rv-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.rv-bar span { margin-left: 8px; font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.rv-body { display: grid; gap: 12px; padding: 16px; }
.rv-line { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.rv-line.is-dim { background: rgba(255, 255, 255, 0.08); }
.rv-line.is-title { height: 10px; background: rgba(255, 255, 255, 0.24); }
.rv-line.rv-grow { flex: 1; }
.rv-ava { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.16); }
.rv-flag { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.rv-logo { width: 32px; height: 32px; flex-shrink: 0; padding: 5px; border-radius: 8px; object-fit: contain; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.rv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rv-row b { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: #fff; }
.rv-row > .rv-tog, .rv-row > .rv-radio { margin-left: auto; }
.rv-row--plan b { min-width: 64px; }
.rv-tag { padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.rv-tag.is-ok { background: rgba(46, 204, 113, 0.14); color: #6ee7a1; }
.rv-tog { position: relative; flex-shrink: 0; width: 30px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); }
.rv-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.2s ease; }
.rv-tog.is-on { background: var(--acc, #e8402f); }
.rv-tog.is-on::after { left: 14px; }
.rv-radio { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); }
.rv-radio.is-on { border-color: var(--acc, #e8402f); background: radial-gradient(circle, var(--acc, #e8402f) 0 38%, transparent 42%); }
.rv-ic { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: color-mix(in srgb, var(--acc, #e8402f) 22%, transparent); color: var(--acc, #e8402f); font-size: 13px; }
.rv-banner { aspect-ratio: 16 / 6.5; border-radius: 12px; overflow: hidden; }
.rv-banner img, .rv-covers img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rv-covers img { aspect-ratio: 2 / 3; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); }
.rv-covers--sm { grid-template-columns: repeat(3, 1fr); }
.rv-covers--sm img { aspect-ratio: 16 / 10; }
.rv-post { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rv-post__c { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rv-post__c b { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; }
.rv-react { display: flex; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.rv-cert { position: relative; display: grid; justify-items: center; gap: 10px; padding: 28px 18px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.14); }
.rv-cert small { font-family: var(--font-tag); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.rv-cert em { font-family: var(--font-headline); font-size: 34px; font-style: italic; line-height: 1; color: #fff; }
.rv-cert .rv-line { margin-inline: auto; }
.rv-cert__seal { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--acc, #e8402f), #ffb347); color: #1a1208; font-size: 18px; }
.rv-field { display: grid; gap: 6px; }
.rv-field small { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.rv-field .rv-line { width: 100% !important; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.rv-btn { display: block; padding: 11px 18px; border-radius: 999px; text-align: center; background: var(--purple, #e8402f); font-family: var(--font-tag); font-weight: 600; font-size: 13px; color: #fff; }
.rv-float { position: absolute; }
.rv-float--a { right: -2%; bottom: 18%; }
.rv-lead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(20, 12, 10, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8); }
.rv-lead b { display: block; font-family: var(--font-body); font-size: 13px; color: #fff; }
.rv-lead small { font-family: var(--font-body); font-size: 11px; color: #6ee7a1; }
.rv-lead > i { color: #6ee7a1; }
.rv-file { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; color: #fff; }
.rv-file i { color: var(--acc, #e8402f); font-size: 18px; }
.rv-prog { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.rv-prog span { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc, #e8402f), #ffb347); }
.rv-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.rv-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.rv-wm { position: absolute; inset: -20%; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; transform: rotate(-18deg); pointer-events: none; }
.rv-wm span { font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 6px 12px; }
.rv-lock { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.rv-stack { display: flex; }
.rv-stack .rv-ava { margin-left: -8px; border: 2px solid #17110f; width: 28px; height: 28px; }
.rv-stack .rv-ava:first-child { margin-left: 0; }
.rv-doc { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.rv-check { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.rv-cbx { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: var(--acc, #e8402f); color: #fff; font-size: 11px; }
.rv-swatches { display: flex; align-items: center; gap: 8px; }
.rv-swatches small { margin-right: 6px; font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.rv-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22); }
.rv-brand { display: flex; align-items: center; gap: 10px; }
.rv-brand b { font-family: var(--font-body); font-size: 13px; color: #fff; }
.rv-logo-tile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--acc, #e8402f), #ffb347); color: #1a1208; font-size: 14px; }
.rv-solo { display: flex; justify-content: center; }
.rv-phone { position: relative; width: min(250px, 70%); padding: 12px 10px 10px; border-radius: 34px; background: #0b0908; border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.9); display: grid; gap: 10px; }
.rv-phone__notch { justify-self: center; width: 56px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.rv-phone__video { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }
.rv-phone__video img { width: 100%; height: 100%; object-fit: cover; }
.rv-phone__meta { display: grid; gap: 6px; padding: 0 4px; }
.rv-phone__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rv-phone__cards img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
.rv-phone__tabs { display: flex; justify-content: space-around; padding: 8px 0 2px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.rv-phone__tabs i:first-child { color: var(--acc, #e8402f); }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.18); }
.rv-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(20, 12, 10, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: #fff; white-space: nowrap; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.8); }
.rv-chip i { color: rgba(255, 255, 255, 0.75); }
.rv-chip.is-acc { border-color: color-mix(in srgb, var(--acc, #e8402f) 60%, transparent); }
.rv-chip.is-acc i { color: var(--acc, #e8402f); }
.rv-chip--a { top: 4px; right: 4%; }
.rv-chip--b { bottom: 6px; left: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .rv-chip--a { animation: rvFloat 6s ease-in-out infinite; }
  .rv-chip--b { animation: rvFloat 7s ease-in-out -2s infinite; }
}
@keyframes rvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* -- números e logos -- */
.rec-proof { padding: 0 0 56px; }
.rec-stats { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 800px) { .rec-stats { grid-template-columns: repeat(4, 1fr); } }
.rec-stats b { display: block; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; color: #fff; }
.rec-stats span { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 300; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.rec-proof__label { margin-top: 40px; text-align: center; font-family: var(--font-tag); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.rec-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; margin-top: 20px; }
.rec-logos img { display: block; height: 26px; width: auto; opacity: 0.7; }

/* -- "o que é": texto + fluxo -- */
.rec-about { padding: 24px 0 80px; }
.rec-about__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1100px) { .rec-about__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; } }
.rec-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); font-family: var(--font-tag); font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.rec-kicker__ico, .rec-band__ico, .rv-mark { position: relative; display: block; flex-shrink: 0; background: var(--g); }
.rec-kicker__ico { width: 26px; height: 26px; border-radius: 8px; }
.rec-kicker__ico::after, .rec-band__ico::after, .rv-mark::after { content: ""; position: absolute; inset: 24%; background: #fff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.rec-h2--lg { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 18ch; margin-bottom: 0; }
.rec-about__p { margin-top: 18px; max-width: 52ch; font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, 0.66); }
.rec-about .rec-all { margin-top: 26px; }
.rv-flow { position: relative; display: grid; grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto; align-items: center; padding: 32px 20px; border-radius: 22px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc, #e8402f) 14%, transparent), transparent 62%), rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
@media (min-width: 520px) { .rv-flow { padding: 40px 32px; } }
.rv-flow__l, .rv-flow__r { display: grid; gap: 14px; }
.rv-n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); font-size: 15px; }
.rv-flow__l .rv-n:nth-child(2) { margin-left: 18px; }
.rv-beam { position: relative; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc, #e8402f) 70%, transparent) 0 6px, transparent 6px 12px); opacity: 0.7; }
.rv-beam::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--acc, #e8402f); box-shadow: 0 0 12px var(--acc, #e8402f); }
@media (prefers-reduced-motion: no-preference) { .rv-beam::after { animation: rvBeam 2.6s linear infinite; } }
@keyframes rvBeam { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.rv-mark { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 24px 56px -20px rgba(0, 0, 0, 0.85), 0 0 60px -18px var(--acc, #e8402f); }
@media (min-width: 520px) { .rv-mark { width: 104px; height: 104px; border-radius: 28px; } }
.rv-res { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; min-width: 96px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 520px) { .rv-res { min-width: 130px; } }
.rv-res__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--acc, #e8402f) 22%, transparent); color: var(--acc, #e8402f); font-size: 12px; grid-row: span 2; }

/* -- cards com imagem -- */
.rv-cards { list-style: none; display: grid; gap: 16px; }
@media (min-width: 720px) { .rv-cards { grid-template-columns: repeat(3, 1fr); } }
.rv-card { overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.25s ease, transform 0.25s ease; }
.rv-card:hover { border-color: color-mix(in srgb, var(--acc, #e8402f) 60%, transparent); transform: translateY(-3px); }
.rv-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b0b; }
.rv-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.rv-card:hover .rv-card__media img { transform: scale(1.05); }
.rv-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%); pointer-events: none; }
.rv-card.is-logo .rv-card__media { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc, #e8402f) 18%, transparent), transparent 70%), #0b0b0b; }
.rv-card.is-logo .rv-card__media img { position: absolute; inset: 0; width: 104px; height: 104px; margin: auto; padding: 20px; object-fit: contain; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 26px; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.8); z-index: 1; }
.rv-card.is-logo:hover .rv-card__media img { transform: scale(1.06); }
.rv-card__body { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 22px; }
.rv-card__n { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--acc, #e8402f) 65%, transparent); font-family: var(--font-nav); font-weight: 700; font-size: 12px; color: var(--acc, #e8402f); }
.rv-card__body p { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }

/* -- como funciona -- */
.rec-how { padding: 0 0 80px; }
.rv-steps { list-style: none; display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 760px) { .rv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.rv-steps li { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); }
.rv-steps__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--acc, #e8402f) 20%, transparent); border: 1px solid color-mix(in srgb, var(--acc, #e8402f) 55%, transparent); font-family: var(--font-nav); font-weight: 700; font-size: 14px; color: #fff; }
.rv-steps p { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.4; color: #fff; }
.rv-steps small { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 400; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.rv-steps .il-card { margin-bottom: 2px; }
@media (min-width: 760px) { .rv-steps li:not(:last-child)::after { content: ""; position: absolute; top: 39px; left: calc(100% + 4px); width: 28px; border-top: 1px dashed color-mix(in srgb, var(--acc, #e8402f) 70%, transparent); } }

/* -- faixa "explore outras ferramentas" -- */
.rec-band { padding: 0 0 72px; }
.rec-band__inner { display: grid; gap: 28px; padding: 32px 24px; border-radius: 20px; background: linear-gradient(120deg, rgba(232, 64, 47, 0.28), rgba(255, 138, 61, 0.1) 55%, rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 90, 61, 0.3); }
@media (min-width: 900px) { .rec-band__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; padding: 40px 44px; gap: 48px; } }
.rec-band__title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff; max-width: 20ch; }
.rec-band__grid { list-style: none; display: grid; gap: 4px 12px; }
@media (min-width: 560px) { .rec-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rec-band__grid { grid-template-columns: repeat(3, 1fr); } }
.rec-band__grid a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-family: var(--font-nav); font-weight: 600; font-size: 13.5px; color: rgba(255, 255, 255, 0.9); transition: background 0.2s ease; }
.rec-band__grid a:hover { background: rgba(255, 255, 255, 0.09); }
.rec-band__ico { width: 26px; height: 26px; border-radius: 8px; }
.rec-band__ico::after { inset: 22%; }
.rec-points { padding-bottom: 72px; }
.rec-hero__actions .btn { flex-shrink: 0; }
.rv-card__media--cl { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc, #e8402f) 22%, transparent), transparent 70%), #0b0b0b; }
.rv-card__media--cl::after { display: none; }
.rv-cl { display: flex; align-items: center; }
.rv-card__media .rv-cl__a { width: 68px; height: 68px; margin-left: -16px; border-radius: 50%; object-fit: cover; border: 3px solid #0b0b0b; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8); }
.rv-card__media .rv-cl__a:first-child { margin-left: 0; }
.rv-card__media .rv-cl__a:nth-child(2) { width: 88px; height: 88px; z-index: 1; }
.rv-card:hover .rv-card__media--cl img { transform: none; }
.rv-card__media .rv-cl__a { object-position: center; }
.rv-cl__badge { position: absolute; right: 22px; bottom: 20px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--acc, #e8402f); color: #fff; font-size: 14px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8); }
.rv--form { padding-bottom: 60px; }
.rv-float--a { right: 0; bottom: 4px; }
.rv-row--plan b { min-width: 72px; }

/* >>> POLIMENTO RECURSOS v4 — início (para desfazer, apague daqui até o marcador "fim")
   Hierarquia de seções inspirada em páginas de produto: sub-navegação, logos logo após o hero,
   capacidades → prova numérica → como funciona → ferramentas relacionadas.
   Sistema visual da home: superfícies chapadas, bordas de 1px, raios 8/12/16, cor sólida por recurso,
   ícones de traço 1,5. Sem vidro, sem brilho forte, sem gradiente em cards. */
.rec-page { --r1: 8px; --r2: 12px; --r3: 16px; --line: rgba(255, 255, 255, 0.09); --line2: rgba(255, 255, 255, 0.16); --surf: rgba(255, 255, 255, 0.03); --mut: rgba(255, 255, 255, 0.62); --dim: rgba(255, 255, 255, 0.5); }
.rec-page .i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* sub-navegação fixa do recurso */
.rec-sub { position: sticky; top: 0; z-index: 15; padding-inline: 24px; background: rgba(0, 0, 0, 0.92); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1024px) { .rec-sub { padding-inline: 120px; } }
.rec-sub__in { display: flex; align-items: center; gap: 20px; max-width: 1240px; height: 56px; margin-inline: auto; }
.rec-sub__name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; }
.rec-sub__nav { display: none; gap: 2px; }
@media (min-width: 760px) { .rec-sub__nav { display: flex; } }
.rec-sub__nav a { padding: 8px 12px; border-radius: var(--r1); font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: var(--mut); transition: color 0.2s ease, background 0.2s ease; }
.rec-sub__nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.rec-sub .rec-sub__cta { width: auto; min-height: 36px; margin-left: auto; padding: 0 16px; font-size: 13px; }
.rec-about, .rec-how, .rec-band { scroll-margin-top: 72px; }

/* hero */
.rec-hero__glow { opacity: 0.5; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 20%, transparent), transparent); }
.rec-hero__title { font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; }
.rec-hero__mute { color: rgba(255, 255, 255, 0.5); }
.rec-crumb { color: var(--dim); }
.rec-hero__actions .btn { min-height: 50px; }

/* janela do mockup: superfície chapada, sem vidro */
.rv-win { border-radius: var(--r2); background: #0c0c0c; border: 1px solid var(--line); box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rv-bar { gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.rv-bar > span:last-child { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.rv-bar__t { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--acc); color: #fff; font-size: 12px; }
.rv-body { gap: 10px; }
.rv-line { background: rgba(255, 255, 255, 0.12); }
.rv-line.is-dim { background: rgba(255, 255, 255, 0.07); }
.rv-row, .rv-post { border-radius: var(--r1); background: rgba(255, 255, 255, 0.035); border: 0; }
.rv-tag { border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.rv-tog.is-on { background: var(--acc); }
.rv-radio.is-on { border-color: var(--acc); background: radial-gradient(circle, var(--acc) 0 38%, transparent 42%); }
.rv-ic { border-radius: 8px; background: var(--acc); color: #fff; }
.rv-ic .i { font-size: 15px; }
.rv-react { align-items: center; }
.rv-react .i { font-size: 14px; }
.rv-react .i:nth-of-type(2) { margin-left: 8px; }
.rv-cert__seal { background: var(--acc); color: #fff; }
.rv-cert__seal .i { font-size: 22px; }
.rv-btn { border-radius: var(--r1); }
.rv-lead { border-radius: var(--r2); background: #0f0f0f; border: 1px solid var(--line2); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.85); }
.rv-lead > .i { font-size: 18px; color: #6ee7a1; }
.rv-file .i { font-size: 20px; color: var(--acc); }
.rv-prog span { background: var(--acc); }
.rv-lock .i { font-size: 18px; }
.rv-cbx { background: var(--acc); }
.rv-cbx .i { font-size: 13px; }
.rv-logo-tile { background: var(--acc); color: #fff; }
.rv-logo-tile .i { font-size: 15px; }
.rv-phone { border-radius: 30px; }
.rv-phone__tabs .i { font-size: 18px; }
.rv-phone__tabs .i:first-child { color: var(--acc); }
.rv-chip { padding: 7px 12px; border-radius: var(--r1); background: #0f0f0f; border: 1px solid var(--line2); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12px; animation: none !important; }
.rv-chip .i { font-size: 14px; color: var(--dim); }
.rv-chip.is-acc { border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.rv-chip.is-acc .i { color: var(--acc); }

/* logos logo após o hero, numa faixa só */
.rec-strip-sec { padding: 0 24px 72px; }
@media (min-width: 1024px) { .rec-strip-sec { padding-inline: 120px; } }
.rec-strip { display: flex; flex-direction: column; gap: 18px; padding: 22px 0; border-block: 1px solid var(--line); }
@media (min-width: 900px) { .rec-strip { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
.rec-strip__label { max-width: 22ch; font-family: var(--font-tag); font-weight: 500; font-size: 12px; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.rec-strip .rec-logos { flex: 1; justify-content: flex-start; margin: 0; }
@media (min-width: 900px) { .rec-strip .rec-logos { justify-content: flex-end; } }
.rec-logos img { height: 26px; opacity: 0.75; }

/* títulos e prova numérica (agora depois das capacidades) */
.rec-h2 { font-weight: 500; letter-spacing: -0.02em; }
.rec-proof { padding: 0 0 88px; }
.rec-proof .rec-h2 { margin-bottom: 28px; }
.rec-stats { padding-top: 28px; border-top: 1px solid var(--line); }
.rec-stats b { font-weight: 500; letter-spacing: -0.035em; }
.rec-stats span { color: var(--dim); }

/* "o que é" */
.rec-kicker { border-radius: var(--r1); background: #141414; border: 1px solid var(--line); }
.rec-kicker__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--c, var(--acc)); color: #fff; font-size: 14px; }
.rec-kicker__ico::after, .rec-band__ico::after, .rec-card__ico::after { display: none; }
.rec-sub__name .rec-kicker__ico { width: 24px; height: 24px; font-size: 13px; }
.rec-all { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.rec-all .i { font-size: 16px; }
.rec-all:hover { border-color: var(--acc); }
.rv-flow { border-radius: var(--r3); background: var(--surf); border: 1px solid var(--line); }
.rv-n { border-radius: var(--r2); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: rgba(255, 255, 255, 0.75); }
.rv-n .i { font-size: 18px; }
.rv-beam { height: 1px; background: var(--line2); opacity: 1; }
.rv-beam::after { top: -3px; width: 7px; height: 7px; background: var(--acc); box-shadow: none; }
.rv-mark { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px; background: var(--acc); color: #fff; box-shadow: none; }
.rv-mark::after { display: none; }
.rv-mark .i { font-size: 44px; stroke-width: 1.35; }
.rv-res { border-radius: var(--r2); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.rv-res__i { border-radius: 8px; background: var(--acc); color: #fff; }
.rv-res__i .i { font-size: 15px; }

/* capacidades: cards com imagem + ícone */
.rv-card { border-radius: var(--r2); background: var(--surf); border: 1px solid var(--line); transition: border-color 0.2s ease; }
.rv-card:hover { border-color: var(--line2); transform: none; }
.rv-card__media::after { display: none; }
.rv-card__media--cl, .rv-card.is-logo .rv-card__media { background: #0b0b0b; }
.rv-card__body { align-items: center; gap: 14px; padding: 16px 18px; }
.rv-card__ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--acc); color: #fff; font-size: 16px; }
.rv-card__body p { font-weight: 500; font-size: 15px; }
.rv-cl__badge { background: var(--acc); }
.rv-cl__badge .i { font-size: 15px; }

/* como funciona: ícone + número, sem conectores */
.rv-steps li { gap: 22px; padding: 20px; border-radius: var(--r2); background: var(--surf); border: 1px solid var(--line); }
.rv-steps li:not(:last-child)::after { display: none; }
.rv-steps__top { display: flex; align-items: center; justify-content: space-between; }
.rv-steps__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--acc); color: #fff; font-size: 18px; }
.rec-page .rv-steps__n { display: block; width: auto; height: auto; border: 0; background: none; border-radius: 0; font-family: var(--font-tag); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: var(--dim); }

/* ferramentas relacionadas */
.rec-band__inner { border-radius: var(--r3); background: var(--surf); border: 1px solid var(--line); }
.rec-band__title { font-weight: 500; letter-spacing: -0.02em; }
.rec-band__grid a { gap: 12px; padding: 10px; border-radius: var(--r1); }
.rec-band__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--c); color: #fff; font-size: 16px; }
.rec-band__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-band__txt b { font-family: var(--font-nav); font-weight: 600; font-size: 13.5px; color: #fff; }
.rec-band__txt small { font-family: var(--font-body); font-size: 12px; line-height: 1.35; color: var(--dim); }
.rec-band__go { margin-left: auto; font-size: 16px; color: var(--dim); transition: transform 0.2s ease, color 0.2s ease; }
.rec-band__grid a:hover .rec-band__go { color: #fff; transform: translate(2px, -2px); }

/* CTA final */
.rec-cta__inner { border-radius: var(--r3); background: radial-gradient(ellipse at 50% 0%, rgba(232, 64, 47, 0.1), transparent 65%), var(--surf); border: 1px solid var(--line); }
.rec-cta__title { font-weight: 500; letter-spacing: -0.02em; }

/* índice */
.rec-card { border-radius: var(--r2); background: var(--surf); border: 1px solid var(--line); transition: border-color 0.2s ease; }
.rec-card:hover { border-color: var(--line2); transform: none; }
.rec-card__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; background: var(--c); color: #fff; font-size: 22px; box-shadow: none; position: relative; }
.rec-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); }
.rec-card__more .i { font-size: 14px; }
.rec-page .rec-band__inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
@media (min-width: 900px) { .rec-page .rec-band__inner { padding: 40px 44px; } }
.rec-band__title { max-width: 34ch; }
.rec-band__grid { gap: 4px 20px; }
.rec-sub__name { min-width: 0; }
.rec-sub__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* celulares pequenos (320px): nada pode empurrar a largura da página */
.rv-flow, .rv-win, .rv-body { min-width: 0; }
@media (max-width: 1099px) {
  .rec-page .rec-about__grid, .rec-page .rec-hero__inner { grid-template-columns: minmax(0, 1fr); }
  /* nas páginas de recurso, texto e imagem viravam empilhados aqui, mas só a
     imagem ficava centralizada — o texto ficava grudado na esquerda */
  .rec-hero__copy, .rec-about__copy { text-align: center; }
  .rec-hero__title { max-width: none; }
  .rec-about__p, .rec-h2--lg, .rec-hero__lead { margin-left: auto; margin-right: auto; }
  .rec-crumb, .rec-hero__actions, .rec-stores { justify-content: center; }
  .rec-all { margin-left: auto; margin-right: auto; width: fit-content; }
  .rec-band__title { margin-left: auto; margin-right: auto; text-align: center; }
}
@media (max-width: 400px) {
  .rv-flow { padding: 24px 14px; }
  .rv-mark { width: 68px; height: 68px; border-radius: 18px; }
  .rv-mark .i { font-size: 32px; }
  .rv-n { width: 36px; height: 36px; }
  .rv-res { min-width: 0; padding: 8px; }
  .rv-row--plan b { min-width: 0; }
  .rv-row > .rv-tag:not(.is-ok) { display: none; }
}
/* o "html, body { height: 100% }" do site limitaria a área da barra fixa; aqui o corpo cresce com o conteúdo */
body.rec-page, body.home-page { height: auto; }
/* números sem título: sem a linha extra e mais próximos da faixa de logos */
.rec-proof .rec-stats { padding-top: 0; border-top: 0; }
.rec-strip-sec { padding-bottom: 56px; }
/* <<< POLIMENTO RECURSOS v4 — fim */

/* >>> IMAGENS DOS CARDS v5 — início (para desfazer, apague daqui até o marcador "fim")
   Cada card mostra uma foto real do produto/design ou uma ilustração da própria frase. */
.rv-certimg img { display: block; width: 100%; border-radius: 6px; }
.rv-card__media .il { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--acc, #e8402f) 20%, transparent), transparent 68%); }
.rv-card__media .il--photo, .rv-card__media .il--flush { padding: 0; background: none; }
.rv-card__media .il--contain { padding: 12px; }
.rv-card__media .il__img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
.rv-card__media .il--contain .il__img { object-fit: contain; }
.rv-card:hover .rv-card__media .il img { transform: none; }
.rv-card__media .il--zoom .il__img, .rv-card:hover .rv-card__media .il--zoom .il__img { transform: scale(var(--z)); }
.rv-card__media .il--zoom { overflow: hidden; }
.il-chip { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r1); background: #0f0f0f; border: 1px solid var(--line2); font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: #fff; }
.il-chip .i { font-size: 14px; color: var(--acc); }

.il-card { display: grid; gap: 10px; width: 100%; padding: 16px; border-radius: var(--r2); background: #101010; border: 1px solid var(--line); }
.il-head { display: flex; align-items: center; gap: 8px; }
.il-head b { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: rgba(255, 255, 255, 0.88); }
.il-t { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--acc); color: #fff; font-size: 14px; }
.il-t.sm { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
.il-t.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
.il-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r1); background: rgba(255, 255, 255, 0.04); font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: #fff; }
.il-row.is-on { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.il-mid { display: flex; align-items: center; flex: 1; min-width: 0; }
.il-mid b { font-weight: 600; }
.il-bar { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.il-bar.is-dim { background: rgba(255, 255, 255, 0.09); }
.rv-card__media .il-ava { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.rv-card__media .il-poster { width: 26px; height: 36px; flex: none; border-radius: 5px; object-fit: cover; }
.rv-card__media .il-flag { width: 24px; height: 17px; flex: none; border-radius: 3px; object-fit: cover; }
.il-grip { display: grid; color: var(--dim); font-size: 16px; }
.il-ok { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--acc) 30%, transparent); color: var(--acc); font-size: 12px; }
.il-no { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; color: var(--dim); font-size: 12px; }
.il-no--x { background: rgba(255, 107, 107, 0.14); color: #ff8a8a; }
.il-pill { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11px; color: var(--mut); white-space: nowrap; }
.il-pill.is-ok { background: rgba(46, 204, 113, 0.14); color: #6ee7a1; }
.il-code { margin-left: auto; font-family: var(--font-tag); font-weight: 600; font-size: 11px; color: var(--dim); }
.il-code + .il-ok { margin-left: 4px; }
.il-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--r1); background: var(--purple); font-family: var(--font-tag); font-weight: 600; font-size: 12.5px; color: #fff; }
.il-btn .i { font-size: 15px; }

.il-stack { display: grid; gap: 10px; width: min(100%, 240px); }
.il-store { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r2); background: #101010; border: 1px solid var(--line2); color: #fff; }
.il-store .i { font-size: 24px; }
.il-store small { display: block; font-family: var(--font-body); font-size: 10.5px; color: var(--dim); }
.il-store b { font-family: var(--font-body); font-weight: 600; font-size: 15px; }

.il-net { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.il-net > .il-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.il-net line { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.il-node { position: absolute; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -50%); }
.il-node small { font-family: var(--font-body); font-size: 10.5px; color: var(--mut); white-space: nowrap; }
.rv-card__media .il-node .il-ava { width: 40px; height: 40px; border: 2px solid #0b0b0b; box-shadow: 0 0 0 1px var(--line2); }
.rv-card__media .il-logo { width: 40px; height: 40px; padding: 8px; border-radius: 12px; object-fit: contain; background: #171717; border: 1px solid var(--line2); }
.il-node .il-t { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
.il-node .il-t.lg { width: 58px; height: 58px; border-radius: 16px; font-size: 27px; }

.il-chat { display: grid; gap: 8px; width: 100%; }
.il-msg { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 88%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #141414; border: 1px solid var(--line); font-family: var(--font-body); font-size: 12.5px; color: #fff; }
.il-msg--r { margin-left: auto; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--acc) 22%, #0b0b0b); }

.il-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.il-plan { display: grid; justify-items: start; gap: 8px; padding: 12px 10px; border-radius: var(--r2); background: #101010; border: 1px solid var(--line); }
.il-plan b { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: #fff; }
.il-plan .il-bar { width: 100% !important; }
.il-plan.is-hot { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 12%, #101010); }
.il-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: var(--r1); background: rgba(255, 255, 255, 0.05); }
.il-seg { padding: 6px 4px; border-radius: 6px; text-align: center; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--mut); }
.il-seg.is-on { background: var(--acc); color: #fff; }
.il-mrow { display: grid; grid-template-columns: 1.3fr repeat(var(--n), 1fr); align-items: center; gap: 6px; padding: 9px 8px; border-radius: var(--r1); font-family: var(--font-body); font-size: 12.5px; color: #fff; }
.il-mrow > span { display: grid; place-items: center; }
.il-mrow b { font-weight: 600; }
.il-mrow:not(.il-mhead) { background: rgba(255, 255, 255, 0.04); }

.il-f { display: grid; gap: 4px; }
.il-f small { font-family: var(--font-body); font-size: 11px; color: var(--dim); }
.il-f > span { padding: 8px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); font-family: var(--font-body); font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.il-join { position: relative; width: 100%; height: 100%; }
.rv-card__media .il-join .il__img { filter: brightness(0.6); }
.il-join__btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; }
.il-drop { display: grid; justify-items: center; gap: 12px; width: 100%; padding: 22px 14px; border-radius: var(--r2); border: 1.5px dashed var(--line2); background: rgba(255, 255, 255, 0.02); }
.il-drop .il-drop__i { font-size: 30px; color: var(--acc); }
.il-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r1); background: #141414; border: 1px solid var(--line); font-family: var(--font-body); font-size: 12.5px; color: #fff; }
.il-file .i { font-size: 16px; color: var(--acc); }

.il-codeblock pre { margin: 0; padding: 10px 12px; border-radius: var(--r1); background: #0a0a0a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); overflow: hidden; }
.il-codeblock .k { color: var(--acc); }
.il-codeblock .s { color: #ffb347; }
.il-chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 8px 8px 0; border-radius: var(--r1); background: rgba(255, 255, 255, 0.03); }
.il-chart span { flex: 1; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--acc) 55%, #101010); }
.il-chart span:last-child { background: var(--acc); }
.il-legend { display: flex; align-items: center; gap: 8px; color: var(--acc); font-size: 16px; }
.il-legend .il-bar { flex: 1; width: auto !important; max-width: 60%; }
.il-vid { position: relative; width: 100%; height: 100%; }
.il-vid .il__img { filter: brightness(0.75); }
.il-lockbig { position: absolute; inset: 0; display: grid; place-items: center; width: 52px; height: 52px; margin: auto; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 22px; color: #fff; }
.il-wm { position: absolute; inset: -20%; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; transform: rotate(-16deg); pointer-events: none; }
.il-wm span { padding: 6px 12px; font-family: var(--font-body); font-size: 11.5px; color: rgba(255, 255, 255, 0.42); }
.il-vid .il-chip { top: auto; right: auto; left: 12px; bottom: 12px; }
.il-doc { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: var(--r1); background: rgba(255, 255, 255, 0.04); }
.il-caret { position: absolute; right: 10px; bottom: 8px; color: var(--acc); font-size: 16px; }
.il-scene { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.il-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px; filter: blur(2px) brightness(0.5); }
.rv-card__media .il-bgposter { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.il-modal { position: relative; display: grid; gap: 8px; width: min(78%, 250px); padding: 14px; border-radius: var(--r2); background: #101010; border: 1px solid var(--line2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
.il-modal b { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: #fff; }
.il-chk { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11.5px; color: rgba(255, 255, 255, 0.85); }
.il-num { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-family: var(--font-tag); font-weight: 600; font-size: 11px; color: var(--mut); }
.il-pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-body); font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.il-sws { display: flex; gap: 6px; }
.il-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22); }
.il-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rv-card__media .il-strip__i { width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; object-fit: cover; }
.il-add { display: grid; place-items: center; height: 30px; border-radius: var(--r1); border: 1.5px dashed var(--line2); color: var(--dim); font-size: 16px; }
/* cards de capacidade: 2 colunas em telas médias e 3 só em telas largas, para a imagem caber sem cortes */
@media (min-width: 720px) { .rec-page .rv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .rec-page .rv-cards { grid-template-columns: repeat(3, 1fr); } }
.il-card { gap: 6px; padding: 10px; }
.il-row { padding: 6px 9px; }
.il-mid { overflow: hidden; }
/* celulares muito pequenos (até 360px): ilustrações mais enxutas para caberem sem corte */
@media (max-width: 360px) { .rv-card__media .il { padding: 10px; } .il-head { display: none; } .il-row { padding: 5px 8px; } .il-card { padding: 8px; } }
/* <<< IMAGENS DOS CARDS v5 — fim */

/* >>> FRAGMENT EM CÓDIGO — início (substitui a imagem fragment.webp) */
.fragment__diagram { container-type: inline-size; }
.fg-stage { position: relative; width: 100%; aspect-ratio: 1316 / 872; }
.fg-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-lines path { fill: none; stroke: #ff6a3d; stroke-width: 1.1; stroke-dasharray: 5 5; opacity: .4; vector-effect: non-scaling-stroke; }
.fg-user { position: absolute; left: 50.5%; top: 18.3%; width: 3.7%; transform: translate(-50%, -50%); }
.fg-box, .fg-bar { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Inter', sans-serif; }
.fg-box {
  width: 8.9%; height: 13.4%; padding: 0 .4%; box-sizing: border-box; border-radius: .35cqw;
  background: linear-gradient(180deg, #1d1411, #0e0807); border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.9); font-size: clamp(6px, .95cqw, 13px); font-weight: 400; line-height: 1.25;
}
.fg-bar {
  left: 35.55%; top: 77.4%; width: 30%; height: 4.9%; border-radius: .5cqw;
  background: linear-gradient(90deg, #c8441f, #f0302c); color: #170805;
  font-size: clamp(6px, 1.2cqw, 16px); font-weight: 600;
}
/* <<< FRAGMENT EM CÓDIGO — fim */

/* >>> CARDS DE FERRAMENTAS — fundos em grafismo + logos das integrações — início */
.tools__media[class*="tools__media--g"] { isolation: isolate; }
.tools__media[class*="tools__media--g"]::before,
.tools__media[class*="tools__media--g"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* luz + escurecimento nas bordas: dá profundidade à cor lisa */
.tools__media[class*="tools__media--g"]::after {
  background: radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.28));
}
.tools__media[class*="tools__media--g"] > .tools__icon,
.tools__media[class*="tools__media--g"] > .tools__logos { position: relative; z-index: 1; }
.tools__media[class*="tools__media--g"] > .tools__overlay,
.tools__media[class*="tools__media--g"] > .tools__plus,
.tools__media[class*="tools__media--g"] > .tools__corner { z-index: 2; }
/* g1 · Comunidades — anéis concêntricos */
.tools__media--g1::before { background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0 22px, rgba(255,255,255,.16) 22px 23px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 75%); }
/* g2 · Tags e Pixels — malha de pontos */
.tools__media--g2::before { background: radial-gradient(rgba(255,255,255,.4) 1.2px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%); }
/* g3 · Aplicativo — diagonais */
.tools__media--g3::before { background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 16px, rgba(255,255,255,.13) 16px 17px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
/* g4 · Certificados — malha fina + guilhochê */
.tools__media--g4::before { background: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 26px 26px, repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0 12px, rgba(255,255,255,.1) 12px 13px); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 80%); }
/* g5 · Planos — arcos em leque */
.tools__media--g5::before { background: repeating-radial-gradient(circle at 50% 135%, rgba(255,255,255,0) 0 26px, rgba(255,255,255,.17) 26px 27px); }
/* g6 · Integrações — grade em losango */
.tools__media--g6::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 22px); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 78%); }
/* logos das integrações em pastilhas brancas */
.tools__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 78%; }
.tools__logos--6 { max-width: 210px; gap: 10px; }
.tools__logos--6 span { width: 46px; height: 46px; border-radius: 12px; }
.tools__logos--6 span:nth-child(even) { margin-top: 0; }
.tools__logos span { width: 56px; height: 56px; border-radius: 14px; background: rgba(12,10,12,.82); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.28); transition: transform .5s cubic-bezier(.33,1,.68,1); }
.tools__logos img { width: 68%; height: 68%; object-fit: contain; display: block; }
.tools__media:hover .tools__logos span { transform: translateY(-3px); }
.tools__logos span:nth-child(even) { margin-top: 10px; }
@media (max-width: 640px) { .tools__logos span { width: 46px; height: 46px; border-radius: 12px; } .tools__logos { gap: 9px; } }
/* <<< CARDS DE FERRAMENTAS — fim */

/* >>> ONBOARD DO MOCKUP (balões guiados) — início */
.dash-hint, .dash-callout, .academy-hint { display: none !important; }
.ob { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ob-bubble {
  --ax: 50%; --ay: 50%;
  position: absolute; left: 0; top: 0; width: min(264px, calc(100% - 16px)); box-sizing: border-box;
  padding: 14px 16px 12px; border-radius: 14px; text-align: left; cursor: pointer;
  background: #17110f; border: 1px solid rgba(255,138,61,.55);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4), 0 0 32px rgba(255,90,61,.18);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s;
}
.ob-bubble.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto; }
.ob-step { display: inline-flex; align-items: baseline; gap: 3px; font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .06em; color: rgba(255,255,255,.5); margin-bottom: 9px; }
.ob-step b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: linear-gradient(135deg, #ff5a3d, #ff8a3d); color: #fff; font-size: 11px; margin-right: 4px; }
.ob-title { margin: 0 0 5px; font: 600 15px/1.3 'Inter', sans-serif; color: #fff; }
.ob-desc { margin: 0 0 10px; font: 400 12.5px/1.45 'Inter', sans-serif; color: rgba(255,255,255,.62); }
.ob-next { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 'Inter', sans-serif; color: #ff8a3d; }
.ob-next i { font-style: normal; transition: transform .25s ease; }
.ob-bubble:hover .ob-next i { transform: translateX(3px); }
/* seta: losango que aponta para o alvo */
.ob-arrow { position: absolute; width: 12px; height: 12px; background: #17110f; border: 1px solid rgba(255,138,61,.55); transform: rotate(45deg); }
.ob-bubble[data-side="right"] .ob-arrow { left: -7px; top: var(--ay); margin-top: -6px; border-right: 0; border-top: 0; }
.ob-bubble[data-side="left"] .ob-arrow { right: -7px; top: var(--ay); margin-top: -6px; border-left: 0; border-bottom: 0; }
.ob-bubble[data-side="bottom"] .ob-arrow { top: -7px; left: var(--ax); margin-left: -6px; border-bottom: 0; border-right: 0; }
.ob-bubble[data-side="top"] .ob-arrow { bottom: -7px; left: var(--ax); margin-left: -6px; border-top: 0; border-left: 0; }
.module-card-wrap.ob-target { outline-offset: -2px; border-radius: 8px; }
/* chama a atenção pro elemento que o balão aponta com 2 pulsos suaves
   e depois vai sumindo — em vez de piscar forte pra sempre */
.ob-target { outline: 2px solid rgba(255,138,61,.55); outline-offset: 3px; animation: obRing 2.6s ease-out forwards; }
@keyframes obRing {
  0% { outline-color: rgba(255,138,61,.55); }
  18% { outline-color: rgba(255,138,61,.1); }
  36% { outline-color: rgba(255,138,61,.4); }
  65% { outline-color: rgba(255,138,61,.08); }
  100% { outline-color: rgba(255,138,61,0); }
}
@media (max-width: 640px) { .ob-bubble { padding: 11px 13px 10px; width: min(230px, calc(100% - 16px)); } .ob-title { font-size: 13.5px; } .ob-desc { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .ob-target { animation: none; } .ob-bubble { transition: none; } }
/* <<< ONBOARD DO MOCKUP — fim */

/* >>> PÁGINA DE PLANOS — início (planos.html; para desfazer, apague até o marcador "fim") */
.pl-hero .rec-hero__lead { max-width: 60ch; }
.pl-how { list-style: none; margin: 28px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pl-how li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: #101010; font: 500 13.5px/1 var(--font-body); color: rgba(255,255,255,.85); }
.pl-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: rgba(232,64,47,.14); border: 1px solid rgba(232,64,47,.35); color: #ff7a5c; }
.pl-ico .i { width: 17px; height: 17px; }

.pl-plans { padding: 0 24px 72px; }
.pl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-card:last-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .pl-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pl-card { grid-column: span 2; } .pl-card:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1280px) { .pl-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pl-card, .pl-card:nth-child(n+4) { grid-column: auto; } }
.pl-card { position: relative; display: flex; flex-direction: column; padding: 24px 20px 20px; border-radius: var(--r3); background: #0f0f10; border: 1px solid var(--line); overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.pl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); }
.pl-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), transparent); pointer-events: none; }
.pl-card:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-2px); }
.pl-card__name { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-body); color: #fff; letter-spacing: .01em; }
.pl-card__name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.pl-card__price { position: relative; z-index: 1; margin: 18px 0 20px; display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.pl-card__price strong { font: 600 clamp(1.55rem, 2.2vw, 1.85rem)/1.1 var(--font-body); letter-spacing: -.02em; color: #fff; }
.pl-card__price small { font: 400 12.5px/1.2 var(--font-body); color: var(--dim); }
.pl-card__list { position: relative; z-index: 1; list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; flex: 1; }
.pl-card__list li { display: flex; align-items: flex-start; gap: 9px; font: 400 13.5px/1.35 var(--font-body); color: rgba(255,255,255,.78); }
.pl-card__list .i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--c); }
.pl-card__cta { position: relative; z-index: 1; width: 100%; justify-content: center; text-align: center; }

.pl-compare, .pl-included, .pl-extra, .pl-faq { padding: 0 0 72px; }
.pl-scroll { position: relative; overflow-x: auto; border-radius: var(--r3); border: 1px solid var(--line); background: #0d0d0e; -webkit-overflow-scrolling: touch; }
.pl-scroll:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pl-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-family: var(--font-body); }
.pl-table th, .pl-table td { padding: 15px 16px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14px; color: rgba(255,255,255,.85); white-space: nowrap; }
.pl-table thead th { font-weight: 600; color: #fff; background: #111112; position: sticky; top: 0; }
.pl-table tbody th, .pl-table tfoot th { text-align: left; font-weight: 500; position: sticky; left: 0; background: #0d0d0e; z-index: 1; min-width: 220px; }
.pl-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.pl-table tbody tr:hover td, .pl-table tbody tr:hover th { background: rgba(255,255,255,.025); }
.pl-table tbody tr:last-child th, .pl-table tbody tr:last-child td { border-bottom: 1px solid var(--line2); }
.pl-table tfoot th, .pl-table tfoot td { border-bottom: 0; padding-top: 18px; }
.pl-rowh { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); }
.pl-rowh .i { width: 17px; height: 17px; color: rgba(255,255,255,.5); }
.pl-inf, .pl-yes { width: 18px; height: 18px; color: #ff7a5c; vertical-align: middle; }
.pl-no { width: 16px; height: 16px; color: rgba(255,255,255,.28); vertical-align: middle; }
.pl-tprice { font-weight: 600; color: #fff; font-size: 15px; }
.pl-tcta { padding: 9px 14px; font-size: 12.5px; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pl-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pl-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pl-inc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-inc li { padding: 22px 20px; border-radius: var(--r3); background: var(--surf); border: 1px solid var(--line); }
.pl-inc b { display: block; margin: 16px 0 8px; font: 600 15.5px/1.3 var(--font-body); color: #fff; }
.pl-inc p { margin: 0; font: 400 13.5px/1.55 var(--font-body); color: var(--mut); }

.pl-extra__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border-radius: var(--r3); background: var(--surf); border: 1px solid var(--line); }
.pl-extra__box .rec-h2 { margin-bottom: 8px; }
.pl-extra__box p { margin: 0; color: var(--mut); font: 400 14px/1.5 var(--font-body); }
.pl-extra__items { display: flex; flex-wrap: wrap; gap: 14px; }
.pl-extra__item { display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: var(--r2); background: #101010; border: 1px solid var(--line); }
.pl-extra__item b { display: block; font: 600 15px/1.2 var(--font-body); color: #fff; }
.pl-extra__item small { display: block; margin-top: 4px; font: 400 13px/1.2 var(--font-body); color: var(--mut); }

.pl-faq__wrap { display: grid; gap: 32px; }
@media (min-width: 900px) { .pl-faq__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 64px; } }
.pl-faq__sub { margin: 0; color: var(--mut); font: 400 14.5px/1.5 var(--font-body); }
.pl-faq__list { display: grid; gap: 10px; }
.pl-q { border-radius: var(--r2); background: var(--surf); border: 1px solid var(--line); transition: border-color .2s ease; }
.pl-q[open] { border-color: var(--line2); }
.pl-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font: 500 15px/1.4 var(--font-body); color: #fff; }
.pl-q summary::-webkit-details-marker { display: none; }
.pl-q__chev { width: 18px; height: 18px; flex: none; color: var(--dim); transition: transform .25s ease; }
.pl-q[open] .pl-q__chev { transform: rotate(180deg); }
.pl-q p { margin: 0; padding: 0 20px 20px; font: 400 14px/1.65 var(--font-body); color: var(--mut); }

@media (max-width: 640px) { .pl-plans, .pl-compare, .pl-included, .pl-extra, .pl-faq { padding-bottom: 56px; } .pl-extra__box { padding: 22px; } .pl-table tbody th, .pl-table tfoot th { min-width: 170px; } }
@media (prefers-reduced-motion: reduce) { .pl-card, .pl-q__chev { transition: none; } .pl-card:hover { transform: none; } }
/* <<< PÁGINA DE PLANOS — fim */

/* ícone-marca solto no canto dos cards de planos: cada item já tem o seu próprio ícone */
.plans__features li::before { display: none; }

/* >>> ABA "RETENÇÃO E LTV" DO MOCKUP — oferta de upsell abaixo do check de venda — início */
.vendas-upsell { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 18px; max-width: 260px; border-radius: 14px; background: rgba(255, 138, 61, 0.08); border: 1px solid rgba(255, 138, 61, 0.3); }
.vendas-upsell__chat { display: flex; align-items: center; gap: 9px; text-align: left; }
.vendas-upsell__chat img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.vendas-upsell__chat span { display: flex; flex-direction: column; font-family: 'Inter', sans-serif; color: rgba(255, 255, 255, 0.75); }
.vendas-upsell__chat strong { font-weight: 600; color: #fff; font-size: 12px; }
.vendas-upsell__chat em { font-style: normal; font-size: 11px; }
.vendas-upsell__stat { margin: 0; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.vendas-upsell__stat strong { color: #ff8a3d; font-weight: 600; }
.vendas-upsell__cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: linear-gradient(90deg, #ff5a3d, #ff8a3d); color: #fff; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 11px; }
/* <<< ABA "RETENÇÃO E LTV" DO MOCKUP — fim */

/* >>> ALINHAMENTO NO CELULAR E TABLET — centraliza a introdução de seções
   que hoje ficam à esquerda ao empilhar (eram texto+imagem lado a lado no
   desktop); o ponto de corte de cada uma casa com o breakpoint em que ela
   própria já empilha — início */
@media (max-width: 1099px) {
  .invisible__intro { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; }
}
@media (max-width: 1099px) {
  .pricing-slider__content { text-align: center; margin-left: auto; margin-right: auto; align-items: center; }
  .pricing-slider__sub { margin-left: auto; margin-right: auto; }
}
@media (max-width: 1099px) {
  .paylead__content { text-align: center; margin-left: auto; margin-right: auto; align-items: center; }
  .paylead__sub { margin-left: auto; margin-right: auto; }
}
@media (max-width: 1099px) {
  .showcase__content { text-align: center; margin-left: auto; margin-right: auto; align-items: center; }
  .showcase__stores { justify-content: center; }
}
@media (max-width: 1099px) {
  .proofgrid__head { align-items: center; text-align: center; }
  .proofgrid__head-copy { margin-left: auto; margin-right: auto; }
  .proofgrid__head-copy p { margin-left: auto; margin-right: auto; }
}
/* <<< ALINHAMENTO NO CELULAR E TABLET — fim */

/* >>> DIAGRAMA "NÃO FRAGMENTA O LEAD" MAIOR NO CELULAR — início */
@media (max-width: 900px) {
  /* a seção já tem overflow:hidden, então o diagrama pode "sangrar" além do
     miolo de texto sem criar rolagem horizontal na página. O item do grid
     (.fragment__diagram) mantém o tamanho normal — quem "sangra" pra fora é
     só o .fg-stage por dentro dele, via posição relativa, então o grid não
     estica pra acompanhar (senão o texto ao lado cortava) */
  .fg-stage { width: 124%; margin-left: -12%; }
  /* nesse tamanho o texto dos quadrados ainda ficaria pequeno demais só com
     o cqw (que segue a largura do palco) — trava um tamanho legível, que
     escala um pouco entre celular e tablet */
  .fg-box { font-size: clamp(9px, 2vw, 12px); line-height: 1.15; }
  .fg-bar { font-size: clamp(10px, 2.3vw, 13px); }
}
/* <<< DIAGRAMA "NÃO FRAGMENTA O LEAD" MAIOR NO CELULAR — fim */

/* >>> MOCKUP DO CRM (recursos/crm.html) — mini kanban no hero — início */
.rv-kanban { display: flex; gap: 8px; }
.rv-kcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-kcol__head { display: flex; align-items: center; gap: 5px; padding: 0 2px 2px; font-family: var(--font-body); font-weight: 600; font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.rv-kcol__head span:last-child { opacity: 0.6; font-weight: 400; }
.rv-kcard { display: flex; flex-direction: column; gap: 6px; padding: 8px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.rv-kcol.is-acc .rv-kcard { border-color: color-mix(in srgb, var(--acc, #e8402f) 45%, transparent); background: color-mix(in srgb, var(--acc, #e8402f) 10%, transparent); }
/* <<< MOCKUP DO CRM — fim */

/* >>> CRM — fluxo simples de 3 nós (lead > pipeline > venda) — início */
.rec-flow3 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 40px 24px; border-radius: 22px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc, #e8402f) 14%, transparent), transparent 62%), rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); }
.rec-flow3__node { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rec-flow3__label { font-family: var(--font-body); font-size: 12.5px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.rec-flow3__arrow { flex-shrink: 0; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.3); }
/* <<< CRM — fim */

/* ===== Tools summary (tsum) — logo abaixo do hero, resume as 14
   ferramentas em cards rápidos de escanear, pra passar "dá pra fazer
   de tudo" já na primeira dobra, antes de qualquer narrativa. ===== */
.tsum { position: relative; padding: 80px 0; overflow: hidden; }
.tsum__inner { position: relative; }
.tsum__kicker { font-family: var(--font-tag); font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }
.tsum__title { font-family: var(--font-body); font-weight: 600; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.2; }
.tsum__sub { max-width: 58ch; margin: 14px 0 0; font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 640px) {
  .tsum__inner { text-align: center; }
  .tsum__sub { margin: 14px auto 0; }
}

/* carrossel: mesmo wrapper-que-não-rola + degradê nas pontas usado em
   planos e ferramentas — ver .plans__carousel pra a técnica completa */
.tsum__carousel { position: relative; overflow: hidden; margin: 44px 0 0; }
.tsum__carousel::after,
.tsum__carousel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tsum__carousel::after { right: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0), #000); opacity: 1; }
.tsum__carousel::before { left: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0), #000); opacity: 0; }
.tsum__carousel.at-end::after { opacity: 0; }
.tsum__carousel.at-start::before { opacity: 0; }
.tsum__carousel:not(.at-start)::before { opacity: 1; }

.tsum__row {
  list-style: none;
  margin: 0;
  padding: 4px 4px 10px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  /* sem scroll-snap: o carrossel roda sozinho em velocidade contínua
     (JS), e snap brigaria com isso ao pausar no meio de um card */
  text-align: left;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tsum__row::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* cards tipo pôster/showcase: a imagem toma o card inteiro, texto fica
   entalhado por cima dela com um degradê embaixo, sem caixinha com borda
   e padding ao redor — igual a uma vitrine de sites (Framer, etc.) */
.tsum__row > li { flex: 0 0 260px; }
.tsum__card {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tsum__card:hover { transform: translateY(-4px); }
/* área "de imagem" do card: fundo escuro com brilho na cor da ferramenta
   (--c) + uma ilustração da interface (.ta) feita em HTML/CSS. Tudo em
   cqw pra escalar junto com o card (260px no desktop, menor no mobile). */
.tsum__media {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  background:
    radial-gradient(ellipse 90% 60% at 55% 28%, color-mix(in srgb, var(--c) 42%, transparent), transparent 70%),
    linear-gradient(180deg, #131313, #0a0a0a);
}
.tsum__ico { position: absolute; left: 5cqw; top: 5cqw; width: 10cqw; height: 10cqw; border-radius: 3cqw; background: var(--c); z-index: 2; }
.tsum__ico::after {
  content: "";
  position: absolute;
  inset: 2.2cqw;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ta { position: absolute; inset: 0; overflow: hidden; pointer-events: none; font-family: 'Inter', sans-serif; color: #ececec; }
.ta > * { position: absolute; }
.ta-p { display: flex; flex-direction: column; gap: 2cqw; padding: 3.2cqw; border-radius: 2.6cqw; background: #151515; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 4cqw 9cqw -4cqw rgba(0, 0, 0, 0.9); overflow: hidden; font-size: 3cqw; line-height: 1.25; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tsum__card:hover .ta-p { transform: translateY(-1.5cqw); }
.ta-p > *, .ta-p span { position: static; }
.ta-h { font-size: 2.6cqw; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.45); }
.ta-abs { position: absolute !important; }
.ta-t { font-size: 3.3cqw; font-weight: 600; color: #fff; }
.ta-s { font-size: 2.7cqw; color: rgba(255, 255, 255, 0.5); }
.ta-ini { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; flex: none; font-size: 2.6cqw; font-weight: 700; color: #fff; }
.ta-av { width: 8cqw; height: 8cqw; border-radius: 50%; object-fit: cover; flex: none; }
.ta-av.sm { width: 7cqw; height: 7cqw; }
.ta-r { display: flex; align-items: center; gap: 2.6cqw; padding: 2.2cqw 2.6cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.ta-r.ta-nb { background: none; border: 0; padding: 0; }
.ta-r.sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ta-r > .ta-t:first-child, .ta-r > .ta-kc__c { flex: 1; }
.ta-kc__c { display: flex; flex-direction: column; gap: 0.6cqw; min-width: 0; flex: 1; }
.ta-cols { display: flex !important; flex-direction: row; gap: 2.4cqw; }
.ta-col { display: flex !important; flex-direction: column; gap: 2cqw; flex: 1; min-width: 0; }
.ta-kc { display: flex; gap: 2cqw; align-items: center; padding: 2.2cqw; border-radius: 2cqw; background: #1d1d1d; border: 1px solid rgba(255, 255, 255, 0.08); }
.ta-kc em { align-self: flex-start; margin-top: 1cqw; padding: 0.6cqw 1.6cqw; border-radius: 99px; font-style: normal; font-size: 2.3cqw; font-weight: 600; color: #7fb8ff; background: rgba(93, 173, 255, 0.14); }
.ta-kc.hot { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.ta-posters { position: absolute; left: 7cqw; top: 25cqw; display: flex; gap: 3cqw; width: 130cqw; }
.ta-posters img { width: 34cqw; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2cqw; box-shadow: 0 3cqw 8cqw -3cqw rgba(0, 0, 0, 0.9); }
.ta-posters img:nth-child(2) { margin-top: 5cqw; }
.ta-posters img:nth-child(4) { margin-top: 5cqw; }
.ta-shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2.4cqw; }
.ta-shot.full { aspect-ratio: auto; height: 100%; border-radius: 0; }
.ta-prog { display: block; height: 1.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ta-prog i { display: block; height: 100%; background: var(--c); border-radius: 99px; }
.ta-body { font-size: 3.1cqw; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.ta-meta { display: flex !important; align-items: center; gap: 1.4cqw; font-size: 2.7cqw; color: rgba(255, 255, 255, 0.5); }
.ta-meta svg { width: 3.2cqw; height: 3.2cqw; color: #ff5c71; }
.ta-meta b { margin-left: 1.6cqw; font-weight: 500; }
.ta-div { display: block; height: 1px; background: rgba(255, 255, 255, 0.08); }
.ta-cert-h { font-size: 2.6cqw; letter-spacing: 0.32em; font-weight: 600; color: #8a7f5d; }
.ta-cert-n { font-family: 'Instrument Serif', serif; font-size: 8.5cqw; line-height: 1.05; }
.ta-cert-s { font-size: 2.8cqw; line-height: 1.45; color: #4a463c; }
.ta-cert-s b { color: #1b1a17; font-weight: 700; }
.ta-cert-f { display: flex !important; align-items: center; gap: 1.6cqw; margin-top: 1cqw; font-size: 2.5cqw; color: #6b6553; }
.ta-cert-f i { display: block; width: 6cqw; height: 6cqw; border-radius: 50%; border: 0.7cqw double #b8a76a; }
.ta-flag { width: 6.6cqw; height: 4.6cqw; object-fit: cover; border-radius: 0.8cqw; flex: none; }
.ta-ck { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--c); color: #0a0a0a; }
.ta-ck svg { width: 2.8cqw; height: 2.8cqw; }
.ta-plans { position: absolute; left: 7cqw; top: 22cqw; display: flex; gap: 2.4cqw; width: 126cqw; }
.ta-plan { display: flex; flex-direction: column; gap: 1.4cqw; width: 36cqw; padding: 3cqw; border-radius: 2.4cqw; background: #151515; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 4cqw 9cqw -4cqw rgba(0, 0, 0, 0.9); position: static; }
.ta-plan.hot { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, #151515); margin-top: -2cqw; }
.ta-plan b { font-size: 6.4cqw; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.ta-plan span, .ta-plan b { position: static; }
.ta-in { padding: 2.2cqw 2.6cqw; border-radius: 1.8cqw; background: #0f0f0f; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 3cqw; color: #fff; }
.ta-in.focus { border-color: var(--c); box-shadow: 0 0 0 0.8cqw color-mix(in srgb, var(--c) 25%, transparent); }
.ta-bt { display: block; margin-top: auto; padding: 2.6cqw; border-radius: 1.8cqw; background: var(--c); color: #0a0a0a; text-align: center; font-size: 3.1cqw; font-weight: 700; }
.ta-file { display: grid; place-items: center; width: 7cqw; height: 8cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--c) 30%, #151515); font-size: 2.2cqw; font-weight: 700; color: #fff; flex: none; }
.ta-tbl { display: grid !important; grid-template-columns: 1fr 1.3fr; gap: 1.6cqw 3cqw; font-size: 2.8cqw; color: rgba(255, 255, 255, 0.75); }
.ta-tbl > :nth-child(odd) { color: #fff; font-weight: 600; }
.ta-done { display: flex !important; align-items: center; gap: 1.6cqw; font-size: 3cqw; font-weight: 600; color: #fff; }
.ta-done svg { width: 3.6cqw; height: 3.6cqw; padding: 0.7cqw; border-radius: 50%; background: var(--c); color: #0a0a0a; }
.ta-p .ta-tog { position: relative; width: 8cqw; height: 4.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.16); flex: none; }
.ta-tog::after { content: ""; position: absolute; top: 0.5cqw; left: 0.5cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #fff; }
.ta-tog.on { background: var(--c); }
.ta-tog.on::after { left: 4.1cqw; }
.ta-wm { position: absolute !important; left: -6cqw; top: 14cqw; font-size: 3cqw; font-weight: 600; color: rgba(255, 255, 255, 0.28); transform: rotate(-18deg); white-space: nowrap; }
.ta-wm.b { left: 30cqw; top: 38cqw; }
.ta-drm { position: absolute !important; left: 2.6cqw; bottom: 2.6cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.6cqw; border-radius: 99px; background: rgba(0, 0, 0, 0.72); font-size: 2.7cqw; font-weight: 600; color: #fff; }
.ta-drm svg { width: 3cqw; height: 3cqw; }
.ta-role { font-style: normal; padding: 0.8cqw 2.2cqw; border-radius: 99px; font-size: 2.4cqw; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.09); }
.ta-doc { font-size: 2.7cqw; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.ta-ckrow { display: flex !important; align-items: center; gap: 2cqw; margin-top: auto; font-size: 3cqw; font-weight: 600; color: #fff; }
.ta-ckrow i { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: var(--c); color: #0a0a0a; }
.ta-ckrow svg { width: 3cqw; height: 3cqw; }
.ta-sw { display: block; width: 6cqw; height: 6cqw; border-radius: 1.4cqw; background: #e8402f; flex: none; }
.ta-prev { display: flex !important; flex-direction: column; margin-top: auto; border-radius: 1.8cqw; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #0e0e0e; }
.ta-prev__b { display: block; height: 7cqw; background: #e8402f; }
.ta-prev__t { padding: 3cqw 2.6cqw; font-size: 3cqw; font-weight: 600; color: #fff; }
.tsum__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 42%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}
.tsum__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px; }
.tsum__card-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: #fff; }
.tsum__card-desc { margin-top: 4px; font-family: var(--font-body); font-weight: 300; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }

.tsum__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 32px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; color: #ff8a3d; transition: gap 0.2s ease; }
.tsum__more:hover { gap: 10px; }

@media (max-width: 640px) {
  .tsum { padding: 60px 0; }
  .tsum__row { gap: 10px; }
  .tsum__row > li { flex-basis: min(60%, 210px); }
}

/* ---- Páginas de recurso: textos mais legíveis (menos cinza) e títulos
   h2 centralizados em tablet/celular (esquerda em notebook/desktop) ---- */
.rec-page { --mut: rgba(255, 255, 255, 0.82); --dim: rgba(255, 255, 255, 0.68); }
.rec-page .rec-hero__mute { color: rgba(255, 255, 255, 0.9); }
.rec-page .rec-hero__lead,
.rec-page .rec-about__p { color: rgba(255, 255, 255, 0.88); font-weight: 400; }
.rec-page .rec-card p { color: rgba(255, 255, 255, 0.82); font-weight: 400; }
.rec-page .rec-stats span,
.rec-page .rec-chip__txt small { color: rgba(255, 255, 255, 0.75); }
.rec-page .rec-steps p, .rec-page .rv-steps p { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 1099px) {
  .rec-page .rec-h2, .rec-page .rec-cta__title { text-align: center; }
}

#hero-signup { scroll-margin-top: 140px; }

/* A legenda das abas do mockup tem 1 ou 2 linhas no celular conforme o texto;
   sem reservar altura, o mockup pulava ~17px a cada troca de aba e a página
   parecia rolar sozinha (o navegador compensava o deslocamento). */
@media (max-width: 720px) {
  .hero-tabs-caption { min-height: 2.9em; }
}
.hero, .dash { overflow-anchor: none; }

/* setas de navegação dos carrosséis de ferramentas (mesmo botão do de integrações) */
.hscroll-arrows { display: flex; gap: 10px; margin-top: 18px; }
.plans__arrows { margin-bottom: 24px; }
@media (max-width: 1099px) { .hscroll-arrows { justify-content: center; } }

/* "Um ecossistema completo": mesmo respiro em cima e embaixo do rótulo */
.hero .signup-row { margin-bottom: 40px; }
.hero-tabs-label { margin-bottom: 40px; }

/* card com foto no lugar da ilustração em HTML (ex.: Vitrine estilo streaming) */
.tsum__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tsum__card:hover .tsum__photo { transform: scale(1.03); }

/* vídeo do YouTube no hero dos recursos */
.rec-video { margin: 0; width: 100%; max-width: 640px; justify-self: center; }
.rec-video__frame {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #0b0b0b; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer;
  box-shadow: 0 30px 80px -34px rgba(232, 64, 47, 0.45), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
.rec-video__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.rec-video__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 45%); }
.rec-video__frame:hover img { transform: scale(1.03); }
.rec-video__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  display: grid; place-items: center; border-radius: 50%; background: var(--purple);
  box-shadow: 0 10px 30px rgba(232, 64, 47, 0.5); transition: transform 0.2s ease, background 0.2s ease;
}
.rec-video__play svg { width: 26px; height: 26px; margin-left: 3px; fill: #fff; }
.rec-video__frame:hover .rec-video__play { transform: scale(1.08); background: var(--purple-hover); }
.rec-video__time {
  position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.72); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.02em;
}
.rec-video__frame:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1099px) { .rec-video { margin-inline: auto; } }
@media (max-width: 480px) { .rec-video__play { width: 58px; height: 58px; margin: -29px 0 0 -29px; } }

/* Popup do vídeo do YouTube nos heros dos recursos: mesmo padrão do
   .tools-dialog (dialog nativo, fundo escurecido, entra/sai animado), mas
   com o painel transparente — só a moldura do vídeo fica visível. */
body.rec-video-modal-open { overflow: hidden; }
.rec-video-modal {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}
.rec-video-modal::backdrop { background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rec-video-modal[open] { animation: recVideoModalIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rec-video-modal[open]::backdrop { animation: recVideoBackdropIn 0.3s ease; }
.rec-video-modal.is-closing { animation: recVideoModalOut 0.17s ease forwards; }
.rec-video-modal.is-closing::backdrop { animation: recVideoBackdropOut 0.17s ease forwards; }
@keyframes recVideoModalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes recVideoModalOut { to { opacity: 0; transform: scale(0.98); } }
@keyframes recVideoBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes recVideoBackdropOut { to { opacity: 0; } }
.rec-video-modal__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.85); }
.rec-video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rec-video-modal__close {
  position: absolute; top: -44px; right: 0; z-index: 5; width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 15px; cursor: pointer;
  transition: background 0.2s ease;
}
.rec-video-modal__close:hover { background: rgba(255, 255, 255, 0.2); }
@media (max-width: 640px) { .rec-video-modal__close { top: auto; bottom: calc(100% + 8px); width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .rec-video-modal[open], .rec-video-modal.is-closing, .rec-video-modal[open]::backdrop, .rec-video-modal.is-closing::backdrop { animation: none; }
}

/* Notificação push flutuando sobre o celular (recursos/notificacoes-push.html) */
.rv-push {
  position: absolute;
  z-index: 3;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 230px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(18, 16, 15, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8);
}
.rv-push__ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--acc, #e8402f); display: grid; place-items: center; }
.rv-push__ico svg { width: 14px; height: 14px; color: #fff; }
.rv-push__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-push__title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; color: #fff; }
.rv-push__text { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 10.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }


/* Card "Notificações" da vitrine de ferramentas: cena landscape com o toast de push, no lugar do ícone chapado */
.tools__push-scene { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(232, 64, 47, 0.22), transparent 60%), linear-gradient(160deg, #1c1c1e, #0a0a0b); }
.tools__push-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.7); max-width: 210px; }
.tools__push-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #e8402f; display: grid; place-items: center; }
.tools__push-ico svg { width: 15px; height: 15px; color: #fff; }
.tools__push-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 2px; }
.tools__push-line { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); }
.tools__push-line--dim { background: rgba(255, 255, 255, 0.35); }

/* ===== Administradores e permissões: quadro de acesso =====
   Substitui o diagrama genérico de fluxo (usado em toda subpágina) por
   um quadro só desta página: o grupo "dono" em destaque no topo, e uma
   matriz mostrando que cada grupo enxerga só a própria área. */
.perm-board { border-radius: var(--r3); background: var(--surf); border: 1px solid var(--line); overflow: hidden; }
.perm-board__owner { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc, #e38f56) 24%, transparent), transparent); border-bottom: 1px solid var(--line); }
.perm-board__ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid color-mix(in srgb, var(--acc, #e38f56) 65%, transparent); }
.perm-board__owner-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-board__owner-txt b { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; }
.perm-board__owner-txt small { font-family: var(--font-body); font-size: 12px; color: var(--dim); }
.perm-board__badge { margin-left: auto; flex: none; padding: 5px 12px; border-radius: 999px; background: var(--acc, #e38f56); color: #17130d; font-family: var(--font-tag); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.perm-board__grid { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.perm-board__head, .perm-board__row { display: grid; grid-template-columns: 1.6fr repeat(3, 0.7fr); align-items: center; gap: 8px; }
.perm-board__head { padding: 0 10px 2px; }
.perm-board__hcell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.perm-board__hcell svg { width: 14px; height: 14px; color: var(--dim); }
.perm-board__hcell span { font-family: var(--font-tag); font-size: 9.5px; color: var(--dim); text-align: center; }
.perm-board__row { padding: 9px 10px; border-radius: var(--r2); background: rgba(255, 255, 255, 0.03); }
.perm-board__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.perm-board__who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.perm-board__who-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perm-board__who-txt b { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-board__who-txt small { font-family: var(--font-body); font-size: 10.5px; color: var(--dim); }
.perm-board__cell { display: grid; place-items: center; width: 22px; height: 22px; margin-inline: auto; border-radius: 50%; color: var(--dim); }
.perm-board__cell svg { width: 12px; height: 12px; }
.perm-board__cell--on { background: color-mix(in srgb, var(--acc, #e38f56) 32%, transparent); color: var(--acc, #e38f56); }
@media (max-width: 460px) { .perm-board__who-txt small { display: none; } .perm-board__hcell span { display: none; } }

/* ===== Site todo: fundo cinza #191919 (em vez do preto puro) =====
   Tudo que antes "sumia" no preto (degradês de borda dos carrosséis, base do
   fundo do hero, emenda entre seções, menu mobile) agora tem que sumir no
   mesmo cinza. */
body, .rec-page { background: #191919; }
.bg { background: #191919; }
.bg-veil { background: #191919; }
.bg::after { background: linear-gradient(to bottom, transparent 0%, transparent 45%, #191919 100%); }
.seam { background: #191919; }
.mobile-menu { background: #191919; }
.tools__carousel::after,
.tsum__carousel::after { background: linear-gradient(to right, rgba(25, 25, 25, 0), #191919); }
.tools__carousel::before,
.tsum__carousel::before { background: linear-gradient(to left, rgba(25, 25, 25, 0), #191919); }
@media (max-width: 1099px) {
  .plans__carousel::after { background: linear-gradient(to right, rgba(25, 25, 25, 0), #191919); }
  .plans__carousel::before { background: linear-gradient(to left, rgba(25, 25, 25, 0), #191919); }
}

/* Card único e largo com vídeo em loop (CRM): vídeo em cima, pontos embaixo */
.rv-wide { overflow: hidden; border-radius: var(--r2); background: var(--surf); border: 1px solid var(--line); }
.rv-wide__media { background: #0b0b0b; }
.rv-wide__video { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 530; object-fit: cover; }
.rv-wide__points { list-style: none; display: grid; border-top: 1px solid var(--line); }
.rv-wide__points li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.rv-wide__points li + li { border-top: 1px solid var(--line); }
.rv-wide__points p { font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
@media (min-width: 900px) {
  .rv-wide__points { grid-template-columns: repeat(3, 1fr); }
  .rv-wide__points li + li { border-top: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 640px) { .rv-wide__video { aspect-ratio: 16 / 10; object-position: 40% 50%; } }

/* Automações ainda não foi lançada: aparece no menu e no hub como "Em breve",
   sem link. Pra lançar, trocar de volta pro <a href="…/automacoes.html">. */
.mega-link--soon { cursor: default; pointer-events: none; }
.mega-link--soon .mega-ico { opacity: 0.45; filter: grayscale(0.4); }
.mega-link--soon .mega-txt b { color: rgba(255, 255, 255, 0.6); }
.mega-link--soon .mega-txt small { opacity: 0.55; }
.mega-soon { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; text-transform: uppercase; vertical-align: middle; }
.rec-card.rec-card--soon { cursor: default; opacity: 0.6; }
.rec-card.rec-card--soon:hover { border-color: var(--line); background: var(--surf); transform: none; }
.rec-card.rec-card--soon .rec-card__more { color: rgba(255, 255, 255, 0.6); }

/* Esteira infinita de áreas de membros (página Vitrine estilo streaming), com
   cara de showroom: foco de luz no centro e laterais mergulhadas na sombra,
   uma sombra preta suave embaixo pra dar ênfase nas imagens, e um brilho de sol
   girando na borda fina de cada imagem. Loop em translateX(-50%) com a lista
   duplicada no HTML; margem no lugar de gap pra metade da esteira ser exata
   (sem "pulo"). Só transform, numa camada própria, pra não piscar. */
.rec-gallery { position: relative; isolation: isolate; padding: 24px 0 64px; }
.rec-gallery::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -20px; height: 320px; pointer-events: none; background: radial-gradient(ellipse 36% 62% at 30% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 22%, rgba(0, 0, 0, 0.21) 44%, rgba(0, 0, 0, 0.09) 66%, rgba(0, 0, 0, 0.025) 84%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse 36% 62% at 70% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 22%, rgba(0, 0, 0, 0.21) 44%, rgba(0, 0, 0, 0.09) 66%, rgba(0, 0, 0, 0.025) 84%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse 50% 58% at 50% 46%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); }
.rec-marquee { --h: clamp(260px, 40vw, 580px); position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); }
.rec-marquee::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(225, 238, 255, 0) 28%, rgba(225, 238, 255, 0.07) 50%, rgba(225, 238, 255, 0) 72%), radial-gradient(58% 95% at 50% 50%, rgba(8, 8, 8, 0) 34%, rgba(8, 8, 8, 0.62) 100%); }
/* "Light leak": faixa de luz inclinada, como a de uma janela, que cruza as
   imagens bem de leve e some; descansa uns segundos e volta. É um elemento só,
   que se move só com transform/opacity, por cima da esteira. */
.rec-marquee::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; z-index: 1; pointer-events: none; opacity: 0; transform: translate3d(-110%, 0, 0) skewX(-20deg); background: linear-gradient(90deg, rgba(220, 236, 255, 0) 0%, rgba(220, 236, 255, 0.187) 20%, rgba(220, 236, 255, 0.055) 38%, rgba(220, 236, 255, 0) 52%); will-change: transform, opacity; animation: rec-leak 20s linear 1.5s infinite; }
@keyframes rec-leak { 0% { opacity: 0; transform: translate3d(-110%, 0, 0) skewX(-20deg); } 8% { opacity: 1; } 72% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate3d(230%, 0, 0) skewX(-20deg); } }
.rec-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: rec-marquee 130s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.rec-marquee__item { position: relative; flex: 0 0 auto; height: var(--h); aspect-ratio: 16 / 9; margin-right: 20px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.16); transform: translateZ(0); }
/* Brilho de sol: uma faixa de luz branca gira em volta da borda fina da imagem.
   A luz é um gradiente cônico grande que só ROTACIONA (transform, vai pro GPU, não
   redesenha nada); a imagem fica por cima, menor 1,5px de cada lado, e deixa só o
   anel da borda aparecer. Cada card começa num ponto diferente da volta. */
.rec-marquee__item::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0turn); background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 296deg, rgba(255, 255, 255, 0.3) 322deg, rgba(255, 255, 255, 1) 338deg, rgba(255, 255, 255, 0.25) 350deg, rgba(255, 255, 255, 0) 360deg); will-change: transform; animation: rec-glint 9s linear infinite; }
.rec-marquee__item:nth-child(3n+2)::before { animation-delay: -3s; }
.rec-marquee__item:nth-child(3n)::before { animation-delay: -6s; }
@keyframes rec-glint { to { transform: translate(-50%, -50%) rotate(1turn); } }
.rec-marquee__item img { position: absolute; z-index: 1; left: 1.5px; top: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); display: block; object-fit: cover; border-radius: 14.5px; }
@media (max-width: 640px) { .rec-marquee__track { animation-duration: 75s; } .rec-marquee__item { margin-right: 14px; border-radius: 12px; } .rec-marquee__item img { border-radius: 10.5px; } }
@keyframes rec-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .rec-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rec-marquee__track { animation: none; }
  .rec-marquee__item[aria-hidden="true"] { display: none; }
  .rec-marquee::before { display: none; }
  .rec-marquee__item::before { display: none; }
}

/* Módulos bloqueados / upsell (página Vitrine estilo streaming): de um lado os
   módulos liberados, do outro o "conteúdo fechado" (capas em preto e branco com
   o botão Desbloquear), e embaixo a sequência do upsell: vê, conhece a oferta,
   compra, módulo liberado. */
.rec-lock { padding: 24px 0 88px; }
.rec-lock .rec-kicker { margin-bottom: 14px; }
.rec-lock__lead { max-width: 62ch; margin: 14px 0 0; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); }
.rec-lock__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 40px; }
.rec-lock__label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--font-tag); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.62); }
.rec-lock__label .i { width: 16px; height: 16px; }
.rec-lock__group.is-locked .rec-lock__label { color: #ffb27a; }
.rec-lock__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rec-lock__card { aspect-ratio: 41 / 100; border-radius: 12px; overflow: hidden; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, 0.1); }
.rec-lock__card.is-locked { border-color: rgba(255, 122, 26, 0.38); }
.rec-lock__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-lock__gate { position: absolute; left: 50%; top: calc(50% + 14px); z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: #191919; border: 1px solid rgba(255, 122, 26, 0.55); color: #ffb27a; }
.rec-lock__gate .i { width: 18px; height: 18px; }
.rec-lock__stage::after { content: ""; position: absolute; left: 50%; top: 30px; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0)); pointer-events: none; }
.rec-lock__flow { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.rec-lock__flow li { position: relative; }
.rec-lock__flow li:not(:last-child)::after { content: ""; position: absolute; top: 19px; right: -18px; width: 9px; height: 9px; border-top: 1.5px solid rgba(255, 255, 255, 0.35); border-right: 1.5px solid rgba(255, 255, 255, 0.35); transform: rotate(45deg); }
.rec-lock__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; background: rgba(214, 112, 123, 0.16); border: 1px solid rgba(214, 112, 123, 0.35); color: #e8909b; }
.rec-lock__ic .i { width: 20px; height: 20px; }
.rec-lock__flow b { display: block; margin-bottom: 6px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #fff; }
.rec-lock__flow p { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }
@media (max-width: 899px) {
  .rec-lock__stage { grid-template-columns: 1fr; gap: 28px; }
  .rec-lock__gate, .rec-lock__stage::after { display: none; }
  .rec-lock__cards { max-width: 520px; }
  .rec-lock__flow { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .rec-lock__flow li:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  .rec-lock { padding-bottom: 64px; }
  .rec-lock__flow { grid-template-columns: 1fr; }
  .rec-lock__flow li::after { display: none; }
  .rec-lock__cards { gap: 10px; }
}

/* Selos da App Store e do Google Play (página Aplicativo): fundo preto, borda
   fina cinza e o nome da loja em destaque, no formato dos selos oficiais. */
.store-badge { display: inline-flex; align-items: center; gap: 11px; height: 54px; padding: 0 20px 0 15px; border-radius: 11px; background: #000; border: 1px solid #a6a6a6; color: #fff; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; }
.store-badge:hover, .store-badge:focus-visible { border-color: #fff; transform: translateY(-2px); }
.store-badge i { font-size: 27px; line-height: 1; }
.store-badge span { display: grid; gap: 3px; text-align: left; }
.store-badge small { font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.03em; color: #fff; }
.store-badge--play small { text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; }
.store-badge b { font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: #fff; }
.store-badge--play i { background: linear-gradient(135deg, #00a0ff 0 38%, #00f076 38% 60%, #ffd800 60% 80%, #ff3a44 80%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.rec-stores .store-badge { margin: 0; }
.il-stack .store-badge { width: 100%; }

/* iPhone (mockup em código): moldura de titânio, bisel preto, Dynamic Island,
   botões laterais, vidro com reflexo e a tela com o print real do app. Todas as
   medidas saem de --sw (largura da tela), então ele escala inteiro. */
.rv--phone { display: grid; place-items: center; max-width: 560px; padding: 8px 12px 36px; isolation: isolate; }
.rv--phone::before { content: ""; position: absolute; z-index: -1; inset: 6% 8% 4%; pointer-events: none; background: radial-gradient(closest-side, rgba(163, 74, 163, 0.34), rgba(163, 74, 163, 0)); }
.iphone { --sw: clamp(230px, 22vw, 290px); position: relative; width: calc(var(--sw) * 1.086); margin-inline: auto; }
.iphone__frame { position: relative; padding: calc(var(--sw) * 0.012); border-radius: calc(var(--sw) * 0.186); background: linear-gradient(145deg, #6e6e74 0%, #2a2a2e 17%, #8c8c93 35%, #2d2d31 56%, #606066 78%, #26262a 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.2), 0 46px 80px -26px rgba(0, 0, 0, 0.9), 0 18px 34px -18px rgba(0, 0, 0, 0.75); }
.iphone__bezel { padding: calc(var(--sw) * 0.031); border-radius: calc(var(--sw) * 0.174); background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.iphone__screen { position: relative; overflow: hidden; border-radius: calc(var(--sw) * 0.14); aspect-ratio: 720 / 1670; background: #171717; }
.iphone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iphone__status { position: absolute; z-index: 2; top: calc(var(--sw) * 0.05); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: calc(var(--sw) * 0.052); padding: 0 calc(var(--sw) * 0.078) 0 calc(var(--sw) * 0.086); color: #fff; font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; font-size: calc(var(--sw) * 0.0433); font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.iphone__sys { display: flex; align-items: center; gap: calc(var(--sw) * 0.014); }
.iphone__sys svg { display: block; height: calc(var(--sw) * 0.032); width: auto; fill: currentColor; }
.iphone__sys svg:last-child { height: calc(var(--sw) * 0.034); }
.iphone__island { position: absolute; z-index: 3; top: calc(var(--sw) * 0.028); left: 50%; width: calc(var(--sw) * 0.32); height: calc(var(--sw) * 0.094); transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045); }
.iphone__island::after { content: ""; position: absolute; right: calc(var(--sw) * 0.034); top: 50%; width: calc(var(--sw) * 0.034); height: calc(var(--sw) * 0.034); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 34% 34%, #2b3556 0%, #0b0d18 55%, #000 100%); box-shadow: 0 0 0 calc(var(--sw) * 0.006) #0a0a0c; }
.iphone__home { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--sw) * 0.02); width: calc(var(--sw) * 0.34); height: calc(var(--sw) * 0.013); transform: translateX(-50%); border-radius: 999px; background: rgba(255, 255, 255, 0.92); }
.iphone__glass { position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.05) 100%); }
.iphone__btn { position: absolute; width: calc(var(--sw) * 0.013); border-radius: 2px; background: linear-gradient(90deg, #1d1d20, #6c6c72 55%, #3a3a3f); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
.iphone__btn--action, .iphone__btn--up, .iphone__btn--down { left: calc(var(--sw) * -0.008); }
.iphone__btn--action { top: 11.6%; height: 3.6%; }
.iphone__btn--up { top: 17.4%; height: 6.4%; }
.iphone__btn--down { top: 25.2%; height: 6.4%; }
.iphone__btn--power { right: calc(var(--sw) * -0.008); top: 20.5%; height: 10.4%; background: linear-gradient(270deg, #1d1d20, #6c6c72 55%, #3a3a3f); }
@media (max-width: 1099px) { .iphone { --sw: clamp(210px, 52vw, 250px); } }

/* iPad atrás do iPhone (página Aplicativo): um conjunto de dois aparelhos, o
   tablet de lado com um print do site e o celular na frente com o print do app.
   Tudo sai de --s (largura da tela do celular): celular 1,086 s de largura,
   tablet 1,9 s, conjunto 2,1 s (o celular fica na esquerda, na frente, saindo um pouco pra fora do tablet; o tamanho acompanha a largura da coluna). No celular pequeno o tablet some e o iPhone
   fica grande. */
.rv--phone { max-width: none; container-type: inline-size; }
.devices { --s: clamp(200px, 22vw, 300px); position: relative; width: calc(var(--s) * 2.1); height: calc(var(--s) * 2.405); margin-inline: auto; }
.devices .iphone { --sw: var(--s); position: absolute; left: 0; bottom: 0; margin: 0; z-index: 2; }
.ipad { --tw: calc(var(--s) * 1.9); position: absolute; left: calc(var(--s) * 0.2); top: calc(var(--s) * 0.5); width: var(--tw); z-index: 1; }
.ipad__frame { position: relative; padding: calc(var(--tw) * 0.008); border-radius: calc(var(--tw) * 0.052); background: linear-gradient(145deg, #66666c 0%, #2b2b2f 18%, #85858c 38%, #2e2e32 60%, #5c5c62 80%, #27272b 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.16), 0 40px 70px -28px rgba(0, 0, 0, 0.85); }
.ipad__bezel { position: relative; padding: calc(var(--tw) * 0.028); border-radius: calc(var(--tw) * 0.044); background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.ipad__screen { position: relative; overflow: hidden; border-radius: calc(var(--tw) * 0.02); aspect-ratio: 2388 / 1668; background: #101010; }
.ipad__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 0; }
.ipad__cam { position: absolute; top: calc(var(--tw) * 0.0115); left: 50%; width: calc(var(--tw) * 0.0075); height: calc(var(--tw) * 0.0075); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #26304f, #080a14 60%, #000); }
.ipad__home { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--tw) * 0.0075); width: calc(var(--tw) * 0.15); height: calc(var(--tw) * 0.0045); transform: translateX(-50%); border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
.ipad__glass { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(122deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.045) 100%); }
.ipad__btn { position: absolute; top: calc(var(--tw) * -0.0045); right: 14%; width: 7%; height: calc(var(--tw) * 0.0075); border-radius: 2px; background: linear-gradient(180deg, #6c6c72, #1d1d20); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
@media (min-width: 1100px) { .rec-page .rec-hero__inner.rec-hero__inner--app { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
@supports (width: 1cqw) { .devices { --s: min(calc((100cqw - 2px) / 2.1), 300px); } }
@media (max-width: 1099px) { .devices { --s: min(calc((100vw - 56px) / 2.1), 250px); } }
@supports (width: 1cqw) { @media (max-width: 1099px) { .devices { --s: min(calc((100cqw - 2px) / 2.1), 250px); } } }
@media (max-width: 560px) { .ipad { display: none; } .devices { --s: 215px; width: calc(var(--s) * 1.086); } .devices .iphone { position: relative; left: auto; } }

/* "O que você consegue fazer" da página Aplicativo, em bento: um bloco grande pro
   principal (o club no celular), blocos menores com fragmentos de celular cortados
   na borda e a legenda com a primeira frase em negrito. Gap de 14px e raio de 20px. */
.rec-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "a a a b b b" "a a a c c c" "d d d e e e"; gap: 14px; margin-top: 28px; }
.rec-bento__tile { position: relative; isolation: isolate; overflow: hidden; min-height: 300px; border-radius: 20px; background: #121212; border: 1px solid rgba(255, 255, 255, 0.08); }
.rec-bento__tile::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 85% 100%, rgba(163, 74, 163, 0.18), rgba(163, 74, 163, 0)); }
.rec-bento__tile--a { grid-area: a; min-height: 614px; }
.rec-bento__tile--a::before { background: radial-gradient(80% 60% at 50% 78%, rgba(163, 74, 163, 0.36), rgba(163, 74, 163, 0)), radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); }
.rec-bento__tile--b { grid-area: b; } .rec-bento__tile--c { grid-area: c; } .rec-bento__tile--d { grid-area: d; } .rec-bento__tile--e { grid-area: e; }
.rec-bento__txt { position: relative; z-index: 3; padding: 28px 28px 0; }
.rec-bento__txt h3 { margin: 0 0 8px; font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.rec-bento__txt p { margin: 0; font-family: var(--font-body); font-size: 14.5px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
.rec-bento__tile--a .rec-bento__txt { max-width: 36ch; }
.rec-bento__tile--a .rec-bento__txt h3 { font-size: 22px; }
/* nos cards menores o texto fica centralizado na altura, ao lado do visual */
.rec-bento__tile--b, .rec-bento__tile--c, .rec-bento__tile--d, .rec-bento__tile--e { display: flex; align-items: center; }
.rec-bento__tile--b .rec-bento__txt, .rec-bento__tile--c .rec-bento__txt { width: 48%; padding: 28px 0 28px 28px; }
.rec-bento__tile--d .rec-bento__txt, .rec-bento__tile--e .rec-bento__txt { width: 46%; padding: 28px 0 28px 28px; }
.rec-bento .pf { position: absolute; z-index: 1; }
.rec-bento .pf::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(to bottom, rgba(18, 18, 18, 0), #121212 88%); }
.rec-bento .pf .iphone { margin: 0; }
.rec-bento__tile--a .pf { left: 50%; top: 168px; transform: translateX(-50%); }
.rec-bento__tile--b .pf, .rec-bento__tile--c .pf { right: 6%; top: 22px; }
.rec-bento__tile--b .pf .iphone, .rec-bento__tile--c .pf .iphone { --sw: 200px !important; }
/* rótulos flutuantes, no mesmo estilo dos chips do site */
.rec-chip { z-index: 4; padding: 6px 10px; font-size: 11.5px; }
.rec-chip--l { left: 18px; top: 232px; } .rec-chip--r { right: 18px; top: 468px; }
/* avisos (push) */
.rec-notifs { position: absolute; z-index: 1; right: 24px; top: 24px; bottom: 24px; width: min(46%, 330px); display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.rec-notif { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 16px; background: rgba(44, 44, 48, 0.96); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 16px 28px -18px rgba(0, 0, 0, 0.85); }
.rec-notif img { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: #0b0b0b; object-fit: contain; }
.rec-notif__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rec-notif__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rec-notif b { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #fff; }
.rec-notif small { font-family: var(--font-body); font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.62); }
.rec-notif time { flex: none; font-family: var(--font-body); font-size: 10.5px; color: rgba(255, 255, 255, 0.45); }
.rec-notif:nth-child(2) { opacity: 0.8; margin-inline: 10px; }
.rec-notif:nth-child(3) { opacity: 0.5; margin-inline: 20px; }
/* continuar de onde parou */
.rec-resume { position: absolute; z-index: 1; right: 24px; top: 24px; bottom: 24px; width: min(46%, 330px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.rec-resume__thumb { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); aspect-ratio: 640 / 334; }
.rec-resume__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-resume__chip { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); font-family: var(--font-body); font-size: 11px; font-weight: 600; color: #fff; }
.rec-resume__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.22); }
.rec-resume__bar i { display: block; width: 62%; height: 100%; background: #c06ac0; }
.rec-resume__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rec-resume__dev { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.rec-resume__dev.is-on { border-color: rgba(192, 106, 192, 0.55); color: #fff; }
.rec-resume__dev .i, .rec-resume__ok .i { width: 14px; height: 14px; }
.rec-resume__arrow { display: inline-flex; color: rgba(255, 255, 255, 0.4); } .rec-resume__arrow .i { width: 14px; height: 14px; }
.rec-resume__ok { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #6ee7a1; }
@media (max-width: 999px) {
  .rec-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d" "e"; }
  .rec-bento__tile--a { min-height: 600px; }
  .rec-bento__tile--b, .rec-bento__tile--c { min-height: 340px; }
  .rec-bento__tile--b .pf, .rec-bento__tile--c .pf { right: 12%; }
}
@media (max-width: 640px) {
  .rec-bento__tile--a .rec-bento__txt { max-width: none; }
  .rec-bento__tile--b, .rec-bento__tile--c, .rec-bento__tile--d, .rec-bento__tile--e { display: block; }
  .rec-bento__tile--b .rec-bento__txt, .rec-bento__tile--c .rec-bento__txt, .rec-bento__tile--d .rec-bento__txt, .rec-bento__tile--e .rec-bento__txt { width: auto; padding: 26px 24px 0; }
  .rec-chip { display: none; }
  .rec-bento__tile--b, .rec-bento__tile--c { min-height: 520px; }
  .rec-bento__tile--b .pf, .rec-bento__tile--c .pf { left: 50%; right: auto; top: 190px; transform: translateX(-50%); }
  .rec-bento__tile--d, .rec-bento__tile--e { min-height: 0; padding-bottom: 22px; }
  .rec-notifs, .rec-resume { position: static; width: auto; margin: 18px 22px 0; }
}

/* TESTE: cards de "O que você consegue fazer" em branco, com texto preto (página
   Aplicativo). Pra voltar ao escuro, tirar a classe rec-points--light da seção. */
.rec-points--light .rec-bento__tile { background: #fff; border-color: #fff; box-shadow: 0 34px 70px -44px rgba(0, 0, 0, 0.85); }
.rec-points--light .rec-bento__tile::before { background: radial-gradient(70% 70% at 85% 100%, rgba(163, 74, 163, 0.13), rgba(163, 74, 163, 0)); }
.rec-points--light .rec-bento__tile--a::before { background: radial-gradient(80% 60% at 50% 78%, rgba(163, 74, 163, 0.26), rgba(163, 74, 163, 0)), radial-gradient(60% 40% at 50% 0%, rgba(163, 74, 163, 0.06), rgba(163, 74, 163, 0)); }
.rec-points--light .rec-bento__txt h3 { color: #15151a; }
.rec-points--light .rec-bento__txt p { color: #5f5f6b; }
.rec-points--light .rec-bento .pf::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%); }
.rec-points--light .iphone__frame { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.2), 0 30px 46px -28px rgba(0, 0, 0, 0.55); }
.rec-points--light .rec-chip { background: #fff; border: 1px solid #e3e3e8; color: #15151a; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.35); }
.rec-points--light .rec-chip .i { color: #7a7a86; }
.rec-points--light .rec-chip.is-acc { border-color: color-mix(in srgb, var(--acc, #a34aa3) 55%, #fff); }
.rec-points--light .rec-chip.is-acc .i { color: var(--acc, #a34aa3); }
.rec-points--light .rec-notif { background: #f2f2f6; border-color: #e4e4ea; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.35); }
.rec-points--light .rec-notif img { background: #15151a; }
.rec-points--light .rec-notif b { color: #15151a; }
.rec-points--light .rec-notif small { color: #666672; }
.rec-points--light .rec-notif time { color: #9a9aa5; }
.rec-points--light .rec-resume__thumb { border-color: #e4e4ea; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.5); }
.rec-points--light .rec-resume__dev { background: #f2f2f6; border-color: #e4e4ea; color: #4a4a55; }
.rec-points--light .rec-resume__dev.is-on { border-color: color-mix(in srgb, var(--acc, #a34aa3) 60%, #fff); color: #15151a; }
.rec-points--light .rec-resume__arrow { color: #9a9aa5; }
.rec-points--light .rec-resume__ok { color: #1c8f55; }
.rec-points--light .rec-resume__bar { background: rgba(255, 255, 255, 0.35); }

/* ===== Página Central de certificados toda em branco =====
   Tema claro só desta página (classe rec-page--light no body): fundo branco, texto
   escuro, cartões cinza bem claros e o cabeçalho, os menus e o rodapé também claros.
   As cores de acento (dourado da página, vermelho dos botões) continuam as mesmas. */
html:has(body.rec-page--light) { background: #fff; }
body.rec-page.rec-page--light { background: #fff; color: #15151a; color-scheme: light; --surf: #f6f6f8; --line: #e7e7ec; --line2: #d8d8e0; --mut: #5d5d69; --dim: #6f6f7b; }
/* cabeçalho */
.rec-page--light .navbar, .rec-page--light .navbar.is-scrolled { background: rgba(255, 255, 255, 0.88); border-bottom: 1px solid #e7e7ec; }
.rec-page--light .logo-word, .rec-page--light .nav-link, .rec-page--light .nav-trigger, .rec-page--light .nav-list .nav-link, .rec-page--light .nav-icon, .rec-page--light .lang__btn { color: #15151a; }
.rec-page--light .nav-trigger:hover, .rec-page--light .nav-trigger[aria-expanded="true"], .rec-page--light .nav-list .nav-link:hover, .rec-page--light .nav-icon:hover, .rec-page--light .lang__btn:hover, .rec-page--light .lang__btn[aria-expanded="true"] { background: rgba(21, 21, 26, 0.06); }
.rec-page--light .burger .bar { background: #15151a; }
.rec-page--light .btn--ghost, .rec-page--light .nav-actions .btn--ghost { border-color: #d8d8e0; }
/* menu Recursos e seletor de idioma */
.rec-page--light .mega, .rec-page--light .lang__menu { background: rgba(255, 255, 255, 0.98); border-color: #e7e7ec; box-shadow: 0 24px 60px -12px rgba(21, 21, 40, 0.18); }
.rec-page--light .mega-caret { background: #fff; border-top-color: #e7e7ec; border-left-color: #e7e7ec; }
.rec-page--light .mega-heading, .rec-page--light .mega-txt small, .rec-page--light .mega-aside__text, .rec-page--light .mm-back { color: #6f6f7b; }
.rec-page--light .mega-txt b, .rec-page--light .mega-aside__title, .rec-page--light .mega-aside p.mega-aside__title, .rec-page--light .lang__opt, .rec-page--light .lang__flag { color: #15151a; }
.rec-page--light .mega-link:hover, .rec-page--light .mega-link:focus-visible, .rec-page--light .lang__opt:hover { background: #f2f2f5; }
.rec-page--light .lang__opt--flag[aria-pressed="true"] { background: #ececf0; }
.rec-page--light .mega-aside { background: radial-gradient(120% 90% at 100% 0%, rgba(232, 64, 47, 0.1), transparent 60%), #f6f6f8; border-color: #e7e7ec; }
.rec-page--light .mega-soon { background: rgba(21, 21, 26, 0.08); color: #4a4a55; }
.rec-page--light .mega-link--soon .mega-txt b { color: #7a7a86; }
/* menu do celular */
.rec-page--light .mobile-menu { background: #fff; }
.rec-page--light .mm-item, .rec-page--light .mm-title { color: #15151a; border-bottom-color: #e7e7ec; }
.rec-page--light .mm-level .mega-link { border-bottom-color: #e7e7ec; }
.rec-page--light .mobile-actions { border-top-color: #e7e7ec; }
.rec-page--light .mm-tools__sep { background: #d8d8e0; }
/* abertura */
.rec-page--light .rec-hero__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--acc, #c9973f) 22%, transparent), transparent); }
.rec-page--light .rec-crumb { color: #6f6f7b; }
.rec-page--light .rec-crumb a:hover, .rec-page--light .rec-crumb [aria-current] { color: #15151a; }
.rec-page--light .rec-hero__title, .rec-page--light .rec-h2, .rec-page--light .rec-all, .rec-page--light .rec-cta__title, .rec-page--light .rec-band__title { color: #15151a; }
.rec-page.rec-page--light .rec-hero__mute { color: #7d7d89; }
.rec-page.rec-page--light .rec-hero__lead, .rec-page.rec-page--light .rec-about__p { color: #4a4a55; }
.rec-page--light .btn--google { border: 1px solid #d8d8e0; box-shadow: 0 1px 2px rgba(21, 21, 26, 0.06); }
.rec-page--light .rec-video__frame { border: 1px solid #e7e7ec; box-shadow: 0 30px 70px -38px rgba(21, 21, 26, 0.5); }
.rec-page--light .rec-video__frame:focus-visible { outline-color: #15151a; }
/* blocos */
.rec-page--light .rec-kicker { background: #f6f6f8; color: #15151a; border-color: #e7e7ec; }
.rec-page--light .rv-n { color: #4a4a55; background: #fff; }
.rec-page--light .rv-res { background: #fff; }
.rec-page--light .rv-line { background: #d9d9e0; }
.rec-page--light .rv-line.is-dim { background: #e9e9ee; }
.rec-page--light .rv-mark { box-shadow: 0 20px 44px -22px rgba(21, 21, 26, 0.35), 0 0 50px -20px var(--acc, #c9973f); }
.rec-page--light .rv-card, .rec-page--light .rv-steps li { background: #fff; box-shadow: 0 16px 34px -26px rgba(21, 21, 26, 0.28); }
.rec-page--light .rv-card__media { background: #f4f4f7; }
.rec-page--light .rv-card__media::after { display: none; }
.rec-page--light .rv-card__body p { color: #2a2a33; }
.rec-page--light .rv-steps p { color: #15151a; }
.rec-page.rec-page--light .rv-steps p { color: #15151a; }
.rec-page--light .rv-steps small { color: #5d5d69; }
.rec-page--light .il-card { background: #fff; box-shadow: 0 18px 34px -26px rgba(21, 21, 26, 0.3); }
.rec-page--light .il-head b, .rec-page--light .il-mid { color: #15151a; }
.rec-page--light .il-row { background: #f4f4f7; color: #15151a; }
.rec-page--light .il-pill { background: #ececf0; color: #4a4a55; }
.rec-page--light .il-pill.is-ok { background: rgba(28, 143, 85, 0.12); color: #1c8f55; }
.rec-page--light .il-chip { background: #fff; color: #15151a; border-color: #d8d8e0; }
.rec-page.rec-page--light .rec-stats b { color: #15151a; }
.rec-page.rec-page--light .rec-stats span { color: #6f6f7b; }
.rec-page--light .rec-band__txt b { color: #15151a; }
.rec-page--light .rec-band__grid a:hover { background: rgba(21, 21, 26, 0.06); }
.rec-page--light .rec-band__grid a:hover .rec-band__go { color: #15151a; }
.rec-page--light .rec-cta__inner { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--acc, #c9973f) 14%, transparent), transparent 65%), #f6f6f8; }
/* rodapé */
.rec-page--light .site-footer { border-top-color: #e7e7ec; }
.rec-page--light .site-footer__tagline { color: #6f6f7b; }
.rec-page--light .site-footer__mail { color: #4a4a55; }
.rec-page--light .site-footer__mail:hover, .rec-page--light .site-footer__col a:hover, .rec-page--light .site-footer__social a:hover { color: #15151a; }
.rec-page--light .site-footer__col h4 { color: #15151a; }
.rec-page--light .site-footer__col a, .rec-page--light .site-footer__social a { color: #6f6f7b; }
.rec-page--light .site-footer__bottom { color: #7a7a86; border-top-color: #e7e7ec; }

/* Página Central de certificados: o certificado de verdade como protagonista.
   Seção "Por que emitir": o certificado grande atrás e, na frente, o post do aluno
   compartilhando (alto e à esquerda, o certificado largo atrás à direita: a mesma
   silhueta em losango do celular com o tablet). "O que você consegue fazer": três
   blocos iguais, cada um com um visual centrado e, embaixo, título e uma frase.
   O padrão é o tema escuro do site; o tema claro (classe rec-page--light no body)
   fica nas regras do final. */
.cert-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 440; }
.cert-stage::before { content: ""; position: absolute; z-index: -1; inset: -6% -3%; pointer-events: none; background: radial-gradient(closest-side at 58% 46%, color-mix(in srgb, var(--acc, #c9973f) 22%, transparent), transparent); }
.cert-stage__paper { position: absolute; right: 0; top: 2%; width: 92%; height: auto; transform: rotate(2.2deg); }
.cert-post { position: absolute; left: 0; bottom: 0; width: 44%; padding: 3.6cqw; border-radius: 3cqw; background: #1b1b1e; border: 1px solid var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); transform: rotate(-2deg); }
.cert-post__head { display: flex; align-items: center; gap: 2cqw; }
.cert-post__ava { display: grid; place-items: center; flex: none; width: 6.6cqw; height: 6.6cqw; min-width: 24px; min-height: 24px; border-radius: 50%; background: var(--acc, #c9973f); color: #fff; font-family: var(--font-body); font-size: max(9px, 2.1cqw); font-weight: 600; line-height: 1; }
.cert-post__who { display: grid; gap: 0.3cqw; }
.cert-post__who b { font-family: var(--font-body); font-size: max(11px, 2.4cqw); font-weight: 600; color: #fff; line-height: 1.2; }
.cert-post__who small { font-family: var(--font-body); font-size: max(9px, 1.9cqw); color: rgba(255, 255, 255, 0.5); line-height: 1.2; }
.cert-post__txt { margin: 2.6cqw 0 2.2cqw; font-family: var(--font-body); font-size: max(11px, 2.4cqw); line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.cert-post__img { display: block; width: 100%; height: auto; border-radius: 1.4cqw; background: #0f0f0f; border: 1px solid var(--line); }
.cert-post__act { display: flex; gap: 3.6cqw; margin-top: 2.4cqw; font-family: var(--font-body); font-size: max(10px, 2cqw); font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.6); }
.cert-post__act span { display: inline-flex; align-items: center; gap: 1.1cqw; }
.cert-post__act .i { width: max(12px, 2.4cqw); height: max(12px, 2.4cqw); }
.cert-post__act span:first-child .i { color: #ff6b81; }
.cert-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.cert-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--surf); border: 1px solid var(--line); }
.cert-tile__media { position: relative; container-type: inline-size; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--acc, #c9973f) 24%, transparent), transparent 70%), #0b0b0b; }
.cert-tile__body { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 20px; border-top: 1px solid var(--line); }
.cert-tile__body h3 { margin: 0 0 4px; font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.35; color: #fff; }
.cert-tile__body p { margin: 0; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.cert-fan { position: relative; width: 100%; height: 100%; }
.cert-fan__c { position: absolute; height: auto; }
.cert-fan__c--m { z-index: 3; left: 18%; top: 15%; width: 64%; }
.cert-fan__c--l { z-index: 1; left: 2%; top: 27%; width: 56%; transform: rotate(-9deg); }
.cert-fan__c--r { z-index: 2; right: 2%; top: 27%; width: 56%; transform: rotate(9deg); }
.cert-card { width: min(84%, 290px); }
.cert-sum__n { margin: 8px 2px 0; font-family: var(--font-body); font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.cert-sum__l { margin: 3px 2px 10px; font-family: var(--font-body); font-size: 12px; color: var(--dim); }
.cert-ava { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--acc, #c9973f) 30%, #1a1a1a); color: color-mix(in srgb, var(--acc, #c9973f) 55%, #fff); font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1; }
@media (max-width: 999px) {
  .cert-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-tile:last-child { grid-column: 1 / -1; }
  .cert-tile:last-child .cert-tile__media { aspect-ratio: 16 / 7; }
}
@media (max-width: 599px) {
  .cert-trio { grid-template-columns: minmax(0, 1fr); }
  .cert-tile:last-child .cert-tile__media { aspect-ratio: 4 / 3; }
}
/* tema claro opcional (body com rec-page--light): os mesmos blocos em branco */
.rec-page--light .cert-post { background: #fff; border-color: var(--line); box-shadow: 0 26px 50px -26px rgba(21, 21, 26, 0.42); }
.rec-page--light .cert-post__who b { color: #15151a; }
.rec-page--light .cert-post__who small { color: #7a7a86; }
.rec-page--light .cert-post__txt { color: #2a2a33; }
.rec-page--light .cert-post__img { background: #f4f4f7; }
.rec-page--light .cert-post__act { color: #6f6f7b; }
.rec-page--light .cert-post__act span:first-child .i { color: #e0455d; }
.rec-page--light .cert-tile { background: #fff; box-shadow: 0 16px 34px -26px rgba(21, 21, 26, 0.28); }
.rec-page--light .cert-tile__media { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--acc, #c9973f) 22%, transparent), transparent 70%), #f4f4f7; }
.rec-page--light .cert-tile__body h3, .rec-page--light .cert-sum__n { color: #15151a; }
.rec-page--light .cert-tile__body p { color: #5f5f6b; }
.rec-page--light .cert-sum__l { color: #6f6f7b; }
.rec-page--light .cert-ava { background: color-mix(in srgb, var(--acc, #c9973f) 24%, #fff); color: #7a5a14; }

/* Página Multi idiomas: a área de membros trocando de idioma como protagonista.
   Seção "Conteúdo para alunos do mundo todo": a vitrine da área atrás (larga, à
   direita) e, na frente, o seletor de idioma (alto, à esquerda): a mesma silhueta em
   losango das páginas de aplicativo e certificados. Os textos da interface e a linha
   marcada do seletor trocam juntos a cada 3 s, só com opacity e transform.
   "O que você consegue fazer" reaproveita os blocos .cert-trio / .cert-tile. */
.lang-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 426; }
.lang-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 56% 44%, color-mix(in srgb, var(--acc, #24bbd6) 20%, transparent), transparent); }
.lang-x { display: inline-grid; }
.lang-x > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; animation: lang-on 12s infinite both; }
.lang-x > span:nth-child(2), .lang-pick .il-row:nth-child(3)::before, .lang-pick .il-row:nth-child(3) .il-ok { animation-delay: 3s; }
.lang-x > span:nth-child(3), .lang-pick .il-row:nth-child(4)::before, .lang-pick .il-row:nth-child(4) .il-ok { animation-delay: 6s; }
.lang-x > span:nth-child(4), .lang-pick .il-row:nth-child(5)::before, .lang-pick .il-row:nth-child(5) .il-ok { animation-delay: 9s; }
@keyframes lang-on {
  0% { opacity: 0; transform: translateY(0.45em); }
  3%, 25% { opacity: 1; transform: none; }
  28%, 100% { opacity: 0; transform: translateY(-0.45em); }
}
@keyframes lang-row {
  0% { opacity: 0; }
  3%, 25% { opacity: 1; }
  28%, 100% { opacity: 0; }
}
.lang-win { position: absolute; right: 0; top: 0; width: 91%; overflow: hidden; border-radius: 2.6cqw; background: #0c0c0c; border: 1px solid var(--line2); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9); font-family: var(--font-body); }
.lang-win__bar { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); }
.lang-win__logo { flex: none; width: max(16px, 3.6cqw); height: auto; }
.lang-win__name { flex: none; font-size: max(9px, 1.85cqw); font-weight: 600; letter-spacing: 0.05em; line-height: 1; color: #fff; }
.lang-win__search { display: flex; align-items: center; gap: 1.3cqw; flex: 1; min-width: 0; overflow: hidden; padding: 1.25cqw 2cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: max(9px, 1.85cqw); line-height: 1.2; color: var(--dim); }
.lang-win__search .i { flex: none; width: max(10px, 2cqw); height: max(10px, 2cqw); }
.lang-win__in { flex: none; justify-items: end; font-size: max(9px, 1.95cqw); font-weight: 600; line-height: 1.2; color: #fff; }
.lang-win__main { display: grid; justify-items: start; padding: 3.4cqw 3cqw 3cqw; }
.lang-win__h { font-size: max(13px, 3.5cqw); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.lang-win__go { display: flex; align-items: center; gap: 2.2cqw; width: 100%; margin-top: 2cqw; }
.lang-win__btn { flex: none; justify-items: center; padding: 1.5cqw 2.6cqw; border-radius: 1.4cqw; background: var(--acc, #24bbd6); font-size: max(10px, 2.05cqw); font-weight: 600; line-height: 1.2; color: #04222a; }
.lang-win__prog { flex: 1; max-width: 26%; height: max(3px, 0.7cqw); border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lang-win__prog i { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--acc, #24bbd6); }
.lang-win__n { font-size: max(9px, 1.95cqw); line-height: 1.2; color: var(--dim); }
.lang-win__lbl { margin-top: 3.6cqw; font-size: max(10px, 2.15cqw); font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, 0.88); }
.lang-win__covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6cqw; width: 100%; margin-top: 1.8cqw; }
.lang-win__covers img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: center bottom; border-radius: 1.3cqw; background: #151515; }
.lang-pick.il-card { position: absolute; left: 0; bottom: 0; width: 45%; gap: 1.3cqw; padding: 2.4cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); }
.lang-pick .il-head { gap: 1.6cqw; margin-bottom: 0.6cqw; }
.lang-pick .il-head b { font-size: max(11px, 2.3cqw); }
.lang-pick .il-row { position: relative; gap: 2cqw; padding: 1.7cqw 2cqw; font-size: max(11px, 2.35cqw); line-height: 1.3; }
.lang-pick .il-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--acc, #24bbd6) 24%, transparent); opacity: 0; animation: lang-row 12s infinite both; }
.lang-pick .il-row > * { position: relative; }
.lang-pick .il-ok { opacity: 0; animation: lang-row 12s infinite both; }
.lang-flag { flex: none; width: 24px; height: 17px; border-radius: 3px; object-fit: cover; }
.lang-pick .lang-flag { width: max(20px, 4.4cqw); height: auto; aspect-ratio: 10 / 7; }
/* blocos de "O que você consegue fazer" */
.lang-field.il-row { font-weight: 400; color: var(--dim); }
.lang-field .i { flex: none; font-size: 14px; color: var(--dim); }
.lang-btn { display: grid; place-items: center; padding: 9px 12px; border-radius: var(--r1); background: var(--acc, #24bbd6); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #04222a; }
.lang-globe { position: relative; height: 100%; max-width: 100%; aspect-ratio: 4 / 3; }
.lang-globe__img { position: absolute; left: 50%; top: 50%; width: auto; height: 60%; transform: translate(-50%, -50%); filter: hue-rotate(178deg) saturate(0.85); }
.lang-hi.il-msg { position: absolute; max-width: none; white-space: nowrap; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.9); }
.lang-hi--a { left: 7%; top: 13%; }
.lang-hi--b { right: 7%; top: 22%; }
.lang-hi--c { left: 9%; bottom: 20%; }
.lang-hi--d { right: 8%; bottom: 12%; }
.lang-hi--b, .lang-hi--d { border-radius: 12px 12px 4px 12px; }
/* telas estreitas: o palco fica mais alto para o seletor não cobrir o botão,
   e a busca vira só o ícone */
@media (max-width: 600px) {
  .lang-stage { aspect-ratio: 560 / 530; }
}
@container (max-width: 460px) {
  .lang-win__search { flex: none; padding: 1.6cqw; }
  .lang-win__search .lang-x { display: none; }
  .lang-win__name { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-x > span, .lang-pick .il-row::before, .lang-pick .il-ok { animation: none; }
  .lang-x > span:first-child, .lang-pick .il-row:nth-child(2)::before, .lang-pick .il-row:nth-child(2) .il-ok { opacity: 1; }
}
/* tema claro (rec-page--light) */
.rec-page--light .lang-win { background: #fff; border-color: var(--line); box-shadow: 0 30px 60px -36px rgba(21, 21, 26, 0.45); }
.rec-page--light .lang-win__bar { background: #f6f6f8; }
.rec-page--light .lang-win__name, .rec-page--light .lang-win__in, .rec-page--light .lang-win__h { color: #15151a; }
.rec-page--light .lang-win__search { background: #ececf0; color: #6f6f7b; }
.rec-page--light .lang-win__n { color: #6f6f7b; }
.rec-page--light .lang-win__lbl { color: #2a2a33; }
.rec-page--light .lang-win__prog { background: #e4e4ea; }
.rec-page--light .lang-pick.il-card { background: #fff; box-shadow: 0 26px 50px -26px rgba(21, 21, 26, 0.42); }
.rec-page--light .lang-field.il-row, .rec-page--light .lang-field .i { color: #6f6f7b; }
.rec-page--light .lang-hi.il-msg { background: #fff; color: #15151a; box-shadow: 0 14px 26px -16px rgba(21, 21, 26, 0.4); }

/* Página Hospedagem de vídeos: do envio à aula no ar.
   Seção "Seus vídeos, no ar em minutos": o player da aula na área de membros
   (largo, embaixo à direita) e, na frente, o cartão de envio do painel (em cima
   à esquerda): a diagonal espelhada das páginas de certificados e idiomas. O cartão
   repete o ciclo enviando, processando e pronto (só transform e opacity).
   O quadro do player reaproveita .lang-win; os blocos usam .cert-trio / .cert-tile. */
.vid-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 446; }
.vid-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 56% 58%, color-mix(in srgb, var(--acc, #7c5cff) 22%, transparent), transparent); }
.vid-win.lang-win { top: auto; bottom: 0; }
.vid-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.vid-player > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-player::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78)); }
.vid-play { position: absolute; z-index: 1; left: 50%; top: 46%; display: grid; place-items: center; width: max(40px, 11cqw); height: max(40px, 11cqw); border-radius: 50%; background: var(--acc, #7c5cff); color: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 max(5px, 1.5cqw) color-mix(in srgb, var(--acc, #7c5cff) 26%, transparent), 0 16px 30px -12px rgba(0, 0, 0, 0.8); }
.vid-play .i { width: 40%; height: 40%; margin-left: 8%; fill: currentColor; }
.vid-ctrl { position: absolute; z-index: 1; left: 2.8cqw; right: 2.8cqw; bottom: 2.4cqw; display: flex; align-items: center; gap: 2cqw; font-size: max(9px, 1.9cqw); line-height: 1; color: #fff; }
.vid-ctrl .i { flex: none; width: max(10px, 2.2cqw); height: max(10px, 2.2cqw); fill: currentColor; }
.vid-bar { flex: 1; height: max(3px, 0.7cqw); border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.vid-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--acc, #7c5cff); }
.vid-time { flex: none; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }
.vid-meta { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.6cqw 3cqw 2.8cqw; }
.vid-meta b { display: block; font-size: max(12px, 2.65cqw); font-weight: 600; line-height: 1.25; color: #fff; }
.vid-meta small { display: block; margin-top: 0.5cqw; font-size: max(9px, 1.9cqw); line-height: 1.3; color: var(--dim); }
.vid-next { flex: none; display: inline-flex; align-items: center; gap: 0.8cqw; padding: 1.4cqw 1.6cqw 1.4cqw 2.2cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.07); font-size: max(9px, 1.9cqw); font-weight: 600; line-height: 1.2; color: #fff; }
.vid-next .i { width: max(10px, 2cqw); height: max(10px, 2cqw); }
.vid-up.il-card { position: absolute; left: 0; top: 0; width: 46%; gap: 1.6cqw; padding: 2.6cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); }
.vid-up .il-head { gap: 1.6cqw; }
.vid-up .il-head b { font-size: max(11px, 2.3cqw); }
.vid-up .il-row { gap: 1.8cqw; padding: 1.7cqw 2cqw; font-size: max(11px, 2.3cqw); line-height: 1.3; }
.vid-up .il-mid { white-space: nowrap; }
.vid-up__bar { height: max(4px, 0.9cqw); margin-top: 0.4cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vid-up__bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--acc, #7c5cff); transform-origin: left center; animation: vid-fill 10s infinite both; }
.vid-up__st { display: grid; font-family: var(--font-body); font-size: max(10.5px, 2.15cqw); font-weight: 500; line-height: 1.3; color: var(--dim); }
.vid-up__st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 1.2cqw; white-space: nowrap; opacity: 0; animation: 10s infinite both; }
.vid-up__st > span:nth-child(1) { animation-name: vid-s1; }
.vid-up__st > span:nth-child(2) { animation-name: vid-s2; }
.vid-up__st > span:nth-child(3) { animation-name: vid-s3; color: #6ee7a1; }
.vid-up__st .i { width: max(11px, 2.3cqw); height: max(11px, 2.3cqw); }
@keyframes vid-fill {
  0% { opacity: 0; transform: scaleX(0.03); }
  3% { opacity: 1; transform: scaleX(0.03); }
  42%, 94% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes vid-s1 { 0% { opacity: 0; } 3%, 40% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes vid-s2 { 0%, 41% { opacity: 0; } 44%, 56% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes vid-s3 { 0%, 57% { opacity: 0; } 60%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* bloco "Acesso protegido": a aula bloqueada para quem não está matriculado */
.vid-lock { position: relative; width: min(80%, 300px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; border: 1px solid var(--line2); box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.9); }
.vid-lock img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(0.42); transform: scale(1.06); }
.vid-lock__ic { position: absolute; left: 50%; top: 40%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 20px; transform: translate(-50%, -50%); }
.vid-lock__tag { position: absolute; left: 50%; bottom: 11%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); border: 1px solid var(--line2); font-family: var(--font-body); font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: #fff; transform: translateX(-50%); }
@media (max-width: 600px) {
  .vid-stage { aspect-ratio: 560 / 500; }
  .vid-up.il-card { width: 54%; }
}
@media (prefers-reduced-motion: reduce) {
  .vid-up__bar i, .vid-up__st > span { animation: none; }
  .vid-up__st > span:nth-child(3) { opacity: 1; }
}
/* tema claro (rec-page--light) */
.rec-page--light .vid-meta b { color: #15151a; }
.rec-page--light .vid-meta small { color: #6f6f7b; }
.rec-page--light .vid-next { background: #ececf0; color: #15151a; }
.rec-page--light .vid-up.il-card { background: #fff; box-shadow: 0 26px 50px -26px rgba(21, 21, 26, 0.42); }
.rec-page--light .vid-up__bar { background: #e4e4ea; }
.rec-page--light .vid-up__st { color: #6f6f7b; }
.rec-page--light .vid-up__st > span:nth-child(3) { color: #1c8f55; }
.rec-page--light .vid-lock { border-color: var(--line); box-shadow: 0 18px 34px -24px rgba(21, 21, 26, 0.45); }

/* Página Campanhas e Mensagens: o e-mail que o aluno recebe como protagonista.
   Seção "Comunicação direta": o e-mail aberto (largo, em cima à direita) e, na
   frente, o cartão de nova campanha do painel (embaixo à esquerda), a mesma
   silhueta em losango das outras páginas. O quadro reaproveita .lang-win e os
   blocos usam .cert-trio / .cert-tile. */
.camp-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 410; }
.camp-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 44%, color-mix(in srgb, var(--acc, #f2a73b) 18%, transparent), transparent); }
.camp-mail__from { display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.8cqw; background: #141414; border-bottom: 1px solid var(--line); }
.camp-ava { display: grid; place-items: center; flex: none; width: max(24px, 5.6cqw); height: max(24px, 5.6cqw); border-radius: 50%; background: var(--acc, #f2a73b); font-size: max(9px, 1.9cqw); font-weight: 700; line-height: 1; color: #241503; }
.camp-mail__who { display: grid; gap: 0.3cqw; flex: 1; min-width: 0; }
.camp-mail__who b { font-size: max(11px, 2.3cqw); font-weight: 600; line-height: 1.2; color: #fff; }
.camp-mail__who small { font-size: max(9px, 1.8cqw); line-height: 1.2; color: var(--dim); }
.camp-mail__from > .i { flex: none; width: max(12px, 2.6cqw); height: max(12px, 2.6cqw); color: var(--dim); }
.camp-mail__body { display: grid; grid-template-columns: 21% minmax(0, 1fr); gap: 3.2cqw; align-items: center; padding: 3.2cqw 3.2cqw 3.6cqw; }
.camp-mail__cover { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: center bottom; border-radius: 1.4cqw; background: #151515; }
.camp-mail__txt { display: grid; justify-items: start; gap: 1.6cqw; padding-top: 0.6cqw; }
.camp-mail__h { margin: 0; font-size: max(13px, 3.3cqw); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.camp-mail__p { margin: 0; font-size: max(10.5px, 2.2cqw); line-height: 1.45; color: rgba(255, 255, 255, 0.66); }
.camp-mail__lines { display: grid; gap: 1.1cqw; width: 100%; }
.camp-mail__lines span { height: max(5px, 1.1cqw); border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.camp-mail__lines span:last-child { width: 62%; }
.camp-btn { display: inline-grid; place-items: center; padding: 1.5cqw 3cqw; border-radius: 1.4cqw; background: var(--acc, #f2a73b); font-family: var(--font-body); font-size: max(10px, 2.1cqw); font-weight: 600; line-height: 1.2; color: #241503; }
.camp-new.il-card { position: absolute; left: 0; bottom: 0; width: 44%; gap: 1.4cqw; padding: 2.4cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); }
.camp-new .il-head { gap: 1.6cqw; margin-bottom: 0.4cqw; }
.camp-new .il-head b { font-size: max(11px, 2.3cqw); }
.camp-new .il-row { gap: 1.8cqw; padding: 1.7cqw 2cqw; font-size: max(11px, 2.3cqw); line-height: 1.3; }
.camp-new .camp-btn { display: flex; justify-content: center; gap: 1.2cqw; margin-top: 0.6cqw; padding: 1.9cqw 2cqw; font-size: max(11px, 2.3cqw); }
.camp-btn .i { width: 1.05em; height: 1.05em; }
/* blocos de "O que você consegue fazer" */
.il-segs--2 { grid-template-columns: repeat(2, 1fr); }
.camp-box { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line2); }
@media (max-width: 600px) {
  .camp-stage { aspect-ratio: 560 / 548; }
  .camp-new.il-card { width: 50%; }
}
/* tema claro (rec-page--light) */
.rec-page--light .camp-mail__from { background: #f6f6f8; }
.rec-page--light .camp-mail__who b, .rec-page--light .camp-mail__h { color: #15151a; }
.rec-page--light .camp-mail__who small { color: #6f6f7b; }
.rec-page--light .camp-mail__p { color: #4a4a55; }
.rec-page--light .camp-mail__lines span { background: #ececf0; }
.rec-page--light .camp-new.il-card { background: #fff; box-shadow: 0 26px 50px -26px rgba(21, 21, 26, 0.42); }
.rec-page--light .camp-box { border-color: #d0d0d8; }

/* Página Criação de multiplanos: três seções com cara própria.
   1) "Planos e ofertas do seu jeito": três cartões de plano em leque, o do meio
      à frente, com o tempo de acesso em destaque e o código da oferta.
   2) "Veja o que cada plano libera": demonstração clicável. Três rádios (sem JS)
      trocam o plano e a área de membros mostra quais cursos e a comunidade ficam
      liberados ou bloqueados.
   3) Dois blocos (.cert-trio.mp-duo): alunos de cada plano e a ligação com a venda. */
.mp-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 400; }
.mp-stage::before { content: ""; position: absolute; z-index: -1; inset: -6% -4%; pointer-events: none; background: radial-gradient(closest-side at 50% 46%, color-mix(in srgb, var(--acc, #ff5c71) 22%, transparent), transparent); }
.mp-plan { position: absolute; top: 15%; width: 36%; display: grid; gap: 2.2cqw; padding: 3.2cqw; border-radius: 3cqw; background: #171719; border: 1px solid var(--line2); box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.9); font-family: var(--font-body); }
.mp-plan--l { left: 0; transform: rotate(-7deg) scale(0.94); }
.mp-plan--r { right: 0; transform: rotate(7deg) scale(0.94); }
.mp-plan--m { z-index: 2; top: 4%; left: 32%; border-color: color-mix(in srgb, var(--acc, #ff5c71) 55%, transparent); box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.95), 0 0 70px -24px var(--acc, #ff5c71); }
.mp-plan__top { display: flex; align-items: center; gap: 1.6cqw; }
.mp-plan__top b { font-size: max(12px, 2.7cqw); font-weight: 600; line-height: 1.2; color: #fff; }
.mp-plan__top .il-pill { margin-left: auto; }
.mp-plan__lbl { margin-top: 1cqw; font-size: max(9px, 1.9cqw); line-height: 1.2; color: var(--dim); }
.mp-plan__big { margin-top: -1cqw; font-size: max(19px, 5.6cqw); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.mp-plan--m .mp-plan__big { color: var(--acc, #ff5c71); }
.mp-plan__code { display: grid; gap: 0.6cqw; padding: 1.6cqw 2cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.04); font-size: max(9px, 1.8cqw); line-height: 1.25; color: var(--dim); }
.mp-plan__code b { font-family: var(--font-tag); font-weight: 600; color: rgba(255, 255, 255, 0.82); }
/* 2) demonstração clicável */
.mp-try { position: relative; padding: 24px 0 80px; }
.mp-try__head { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.mp-try__head p { margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.mp-demo { position: relative; max-width: 900px; margin-inline: auto; }
.mp-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 520px; margin: 0 auto 18px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.mp-tabs label { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 11px; cursor: pointer; font-family: var(--font-body); color: rgba(255, 255, 255, 0.78); transition: background-color 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.mp-tabs label:hover { background: rgba(255, 255, 255, 0.05); }
.mp-tabs b { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.mp-tabs small { font-size: 12px; line-height: 1.2; color: var(--dim); transition: color 0.2s ease; }
#mp-1:checked ~ .mp-tabs label[for="mp-1"], #mp-2:checked ~ .mp-tabs label[for="mp-2"], #mp-3:checked ~ .mp-tabs label[for="mp-3"] { background: var(--acc, #ff5c71); color: #2b0a10; }
#mp-1:checked ~ .mp-tabs label[for="mp-1"] small, #mp-2:checked ~ .mp-tabs label[for="mp-2"] small, #mp-3:checked ~ .mp-tabs label[for="mp-3"] small { color: rgba(43, 10, 16, 0.72); }
#mp-1:focus-visible ~ .mp-tabs label[for="mp-1"], #mp-2:focus-visible ~ .mp-tabs label[for="mp-2"], #mp-3:focus-visible ~ .mp-tabs label[for="mp-3"] { outline: 2px solid #fff; outline-offset: 2px; }
.mp-area { overflow: hidden; border-radius: 18px; background: #0c0c0c; border: 1px solid var(--line2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 90px -50px var(--acc, #ff5c71); font-family: var(--font-body); }
.mp-area__bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #141414; border-bottom: 1px solid var(--line); }
.mp-area__bar img { width: 20px; height: auto; }
.mp-area__bar > b { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: #fff; }
.mp-area__plan { display: grid; margin-left: auto; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--acc, #ff5c71) 18%, transparent); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--acc, #ff5c71); }
.mp-area__plan > span, .mp-sum > span { grid-area: 1 / 1; visibility: hidden; }
#mp-1:checked ~ .mp-area .mp-area__plan > span:nth-child(1), #mp-2:checked ~ .mp-area .mp-area__plan > span:nth-child(2), #mp-3:checked ~ .mp-area .mp-area__plan > span:nth-child(3),
#mp-1:checked ~ .mp-area .mp-sum > span:nth-child(2), #mp-2:checked ~ .mp-area .mp-sum > span:nth-child(3), #mp-3:checked ~ .mp-area .mp-sum > span:nth-child(4) { visibility: visible; }
.mp-area__body { display: grid; gap: 14px; padding: 20px 18px 18px; }
.mp-area__lbl { margin: 0; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.mp-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mp-c { position: relative; overflow: hidden; border-radius: 10px; background: #151515; }
.mp-c img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: center bottom; }
.mp-c__lock, .mp-comm__lock { display: grid; place-items: center; opacity: 0; transition: opacity 0.28s ease; }
.mp-c__lock { position: absolute; inset: 0; background: rgba(10, 10, 12, 0.74); color: #fff; font-size: 20px; }
.mp-c__lock .i { padding: 7px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); }
.mp-c:nth-child(2) .mp-c__lock { transition-delay: 0.04s; }
.mp-c:nth-child(3) .mp-c__lock { transition-delay: 0.08s; }
.mp-c:nth-child(4) .mp-c__lock { transition-delay: 0.12s; }
.mp-c:nth-child(5) .mp-c__lock { transition-delay: 0.16s; }
.mp-c:nth-child(6) .mp-c__lock { transition-delay: 0.2s; }
#mp-1:checked ~ .mp-area .mp-c:not(.in-1) .mp-c__lock, #mp-2:checked ~ .mp-area .mp-c:not(.in-2) .mp-c__lock { opacity: 1; }
.mp-comm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.mp-comm .il-t { flex: none; }
.mp-comm__txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mp-comm__txt b { font-size: 13.5px; font-weight: 600; color: #fff; }
.mp-comm__txt small { font-size: 12px; color: var(--dim); }
.mp-comm__state { display: grid; flex: none; }
.mp-comm__state > span { grid-area: 1 / 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; transition: opacity 0.28s ease; }
.mp-comm__ok { background: color-mix(in srgb, var(--acc, #ff5c71) 26%, transparent); color: var(--acc, #ff5c71); font-size: 15px; }
.mp-comm__lock { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); font-size: 14px; }
#mp-1:checked ~ .mp-area .mp-comm__lock, #mp-2:checked ~ .mp-area .mp-comm__lock { opacity: 1; }
#mp-1:checked ~ .mp-area .mp-comm__ok, #mp-2:checked ~ .mp-area .mp-comm__ok { opacity: 0; }
#mp-1:checked ~ .mp-area .mp-comm__txt, #mp-2:checked ~ .mp-area .mp-comm__txt { opacity: 0.55; }
.mp-comm__txt { transition: opacity 0.28s ease; }
.mp-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.mp-sum > .i { grid-area: auto; visibility: visible; color: var(--acc, #ff5c71); font-size: 16px; }
.mp-sum > span { grid-area: 1 / 2; }
/* 3) dois blocos */
.mp-duo.cert-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-duo .cert-tile__media { aspect-ratio: 16 / 8; }
.mp-sale { display: flex; align-items: center; justify-content: center; gap: 12px; width: 90%; }
.mp-sale > .i { flex: none; font-size: 18px; color: var(--dim); }
.mp-sale__gw { display: grid; gap: 8px; flex: none; width: 46%; max-width: 200px; padding: 13px; border-radius: var(--r2); background: #101010; border: 1px solid var(--line); }
.mp-sale__logos { display: flex; gap: 6px; }
.mp-sale__logos img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.mp-sale__gw b { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #fff; }
.mp-sale__gw small { font-family: var(--font-body); font-size: 11.5px; line-height: 1.35; color: var(--dim); }
.mp-sale .il-card { flex: 1; min-width: 0; max-width: 250px; }
@media (max-width: 999px) {
  .mp-duo .cert-tile:last-child { grid-column: auto; }
  .mp-duo .cert-tile:last-child .cert-tile__media, .mp-duo .cert-tile__media { aspect-ratio: 4 / 3; }
  .mp-sale { flex-direction: column; gap: 8px; }
  .mp-sale > .i { transform: rotate(90deg); }
  .mp-sale__gw, .mp-sale .il-card { width: 100%; max-width: 260px; flex: none; }
}
@media (max-width: 720px) {
  .mp-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-tabs b { font-size: 13.5px; }
}
@media (max-width: 599px) {
  .mp-duo.cert-trio { grid-template-columns: minmax(0, 1fr); }
  .mp-stage { aspect-ratio: 560 / 345; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-c__lock, .mp-comm__lock, .mp-comm__state > span, .mp-comm__txt, .mp-tabs label { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .mp-plan { background: #fff; box-shadow: 0 30px 50px -30px rgba(21, 21, 26, 0.4); }
.rec-page--light .mp-plan__top b, .rec-page--light .mp-plan__big { color: #15151a; }
.rec-page--light .mp-plan--m .mp-plan__big { color: var(--acc, #ff5c71); }
.rec-page--light .mp-plan__lbl, .rec-page--light .mp-plan__code { color: #6f6f7b; }
.rec-page--light .mp-plan__code { background: #f4f4f7; }
.rec-page--light .mp-plan__code b { color: #2a2a33; }
.rec-page--light .mp-tabs { background: #f1f1f4; border-color: #e4e4ea; }
.rec-page--light .mp-tabs label { color: #2a2a33; }
.rec-page--light .mp-area { background: #fff; border-color: var(--line); box-shadow: 0 40px 80px -46px rgba(21, 21, 26, 0.45); }
.rec-page--light .mp-area__bar { background: #f6f6f8; }
.rec-page--light .mp-area__bar > b, .rec-page--light .mp-area__lbl, .rec-page--light .mp-comm__txt b { color: #15151a; }
.rec-page--light .mp-comm { background: #f4f4f7; }
.rec-page--light .mp-sum { color: #2a2a33; }
.rec-page--light .mp-sale__gw { background: #fff; }
.rec-page--light .mp-sale__gw b { color: #15151a; }

/* Página Formulários de inscrição: três seções com cara própria.
   1) "O que é um formulário": a configuração do formulário no painel (larga, em
      cima à direita, com a capa à esquerda) e, na frente, o formulário como o aluno
      vê (embaixo à esquerda), a silhueta em losango das outras páginas.
   2) "Teste o formulário": demonstração de verdade. O visitante digita o nome e a
      inscrição aparece como lead no painel, com o acesso ao plano liberado. Não usa
      <form> (nada é enviado nem dispara evento de formulário); o script da página só
      troca a classe .is-done e escreve o nome digitado com textContent.
   3) "Abra e feche quando quiser": formulários em forma de ingresso, cada um num
      estado de prazo (aberto, agendado, encerrado). */
.fm-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 440; }
.fm-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 46%, color-mix(in srgb, var(--acc, #4db38a) 20%, transparent), transparent); }
.fm-set__bar { display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.8cqw; background: #141414; border-bottom: 1px solid var(--line); }
.fm-set__bar b { flex: 1; min-width: 0; font-size: max(11px, 2.4cqw); font-weight: 600; line-height: 1.2; color: #fff; }
.fm-set__body { display: grid; grid-template-columns: 33% minmax(0, 1fr); gap: 3cqw; align-items: center; padding: 3cqw; }
.fm-set__cover { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: center bottom; border-radius: 1.4cqw; background: #151515; }
.fm-set__rows { display: grid; gap: 1.3cqw; }
.fm-set__rows .il-row { gap: 1.6cqw; padding: 1.6cqw 2cqw; font-size: max(10.5px, 2.15cqw); line-height: 1.25; }
.fm-set__rows .il-mid { color: var(--dim); font-weight: 400; }
.fm-set__rows .il-code { font-size: max(10px, 2cqw); color: #fff; }
.fm-card.il-card { position: absolute; left: 0; bottom: 0; width: 41%; gap: 1.6cqw; padding: 2.8cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); font-family: var(--font-body); }
.fm-card__brand { display: flex; align-items: center; gap: 1.4cqw; font-size: max(8.5px, 1.6cqw); font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); }
.fm-card__brand img { width: max(14px, 3cqw); height: auto; }
.fm-card__h { margin: 0.6cqw 0 0.4cqw; font-size: max(13px, 3cqw); font-weight: 600; line-height: 1.2; color: #fff; }
.fm-card .il-f { gap: 0.6cqw; }
.fm-card .il-f small { font-size: max(9px, 1.8cqw); }
.fm-card .il-f > span { padding: 1.4cqw 1.8cqw; border-radius: 1.2cqw; font-size: max(10px, 2cqw); }
.fm-card .il-btn { margin-top: 0.8cqw; padding: 1.8cqw; border-radius: 1.2cqw; background: var(--acc, #4db38a); font-family: var(--font-body); font-size: max(10.5px, 2.15cqw); color: #062b1c; }
/* 2) demonstração */
.fm-try { padding: 24px 0 80px; }
.fm-demo { display: grid; grid-template-columns: minmax(0, 0.92fr) auto minmax(0, 1.08fr); align-items: center; gap: 22px; max-width: 980px; margin-inline: auto; font-family: var(--font-body); }
.fm-live { display: grid; gap: 14px; padding: 24px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9), 0 0 90px -54px var(--acc, #4db38a); }
.fm-live__brand { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); }
.fm-live__brand img { width: 18px; height: auto; }
.fm-live__h { margin: 2px 0 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.fm-live__p { margin: -6px 0 4px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.fm-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.fm-field input { width: 100%; height: 46px; padding: 0 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 15px/1.2 var(--font-body); color: #fff; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.fm-field input::placeholder { color: rgba(255, 255, 255, 0.38); }
.fm-field input:focus-visible { border-color: var(--acc, #4db38a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #4db38a) 28%, transparent); }
.fm-field input:disabled { opacity: 0.6; }
.fm-demo.is-empty .fm-field--nome input { border-color: #f08a8a; }
.fm-send { display: grid; place-items: center; height: 48px; margin-top: 4px; border: 0; border-radius: 11px; background: var(--acc, #4db38a); font: 600 15px/1.2 var(--font-body); color: #062b1c; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; }
.fm-send:hover { filter: brightness(1.08); }
.fm-send:active { transform: scale(0.98); }
.fm-send:focus-visible, .fm-again:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fm-send:disabled { cursor: default; filter: none; transform: none; }
.fm-send > span, .fm-x > span { grid-area: 1 / 1; transition: opacity 0.25s ease; }
.fm-swap-b, .fm-demo.is-done .fm-swap-a { opacity: 0; visibility: hidden; }
.fm-demo.is-done .fm-swap-b { opacity: 1; visibility: visible; }
.fm-live__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.fm-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); }
.fm-note .i { font-size: 14px; }
.fm-again { flex: none; padding: 4px 2px; border: 0; background: none; font: 600 13px/1.2 var(--font-body); color: var(--acc, #4db38a); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fm-demo:not(.is-done) .fm-again { display: none; }
.fm-flow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); color: var(--dim); font-size: 18px; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.fm-demo.is-done .fm-flow { background: color-mix(in srgb, var(--acc, #4db38a) 22%, transparent); border-color: color-mix(in srgb, var(--acc, #4db38a) 50%, transparent); color: var(--acc, #4db38a); }
.fm-out { display: grid; gap: 12px; }
.fm-out .il-card { gap: 9px; padding: 16px; border-radius: 16px; }
.fm-out .il-head b { font-size: 13.5px; }
.fm-out .il-head .il-code { margin-left: auto; }
.fm-out .il-row { gap: 10px; padding: 10px 12px; font-size: 13.5px; }
.fm-x { display: inline-grid; }
.fm-slot { display: grid; }
.fm-slot > * { grid-area: 1 / 1; transition: opacity 0.35s ease, transform 0.35s ease; }
.fm-wait { justify-content: center; background: none !important; border: 1px dashed var(--line2); color: var(--dim); font-weight: 400; }
.fm-new { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.fm-new.il-row { background: color-mix(in srgb, var(--acc, #4db38a) 18%, transparent); }
.fm-demo.is-done .fm-wait { opacity: 0; visibility: hidden; }
.fm-demo.is-done .fm-new { opacity: 1; visibility: visible; transform: none; }
.fm-new .il-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-when { flex: none; font-size: 12px; color: var(--dim); }
.fm-out .il-ava { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; }
.fm-out .cert-ava { width: 26px; height: 26px; background: var(--acc, #4db38a); color: #062b1c; font-size: 10.5px; }
.fm-hello { margin: 2px 2px 0; font-size: 14px; color: var(--mut); opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s; }
.fm-hello b { color: #fff; font-weight: 600; }
.fm-demo.is-done .fm-hello { opacity: 1; transform: none; }
/* 3) ingressos com prazo */
.fm-dates { padding: 8px 0 80px; }
.fm-dates__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.fm-tix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.fm-tix__card { position: relative; overflow: hidden; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); font-family: var(--font-body); }
.fm-tix__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: center 34%; }
.fm-tix__card.is-closed .fm-tix__img { filter: grayscale(0.85) brightness(0.55); }
.fm-tix__body { position: relative; display: grid; gap: 12px; padding: 18px 20px 20px; border-top: 1.5px dashed var(--line2); }
.fm-tix__body::before, .fm-tix__body::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #191919; border: 1px solid var(--line); }
.fm-tix__body::before { left: -12px; }
.fm-tix__body::after { right: -12px; }
.fm-tix__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fm-tix__top b { font-size: 16.5px; font-weight: 600; line-height: 1.25; color: #fff; }
.fm-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--mut); }
.fm-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fm-chip.is-open { background: color-mix(in srgb, var(--acc, #4db38a) 18%, transparent); color: var(--acc, #4db38a); }
.fm-chip.is-soon { background: rgba(242, 167, 59, 0.16); color: #f2a73b; }
.fm-tix__meta { display: grid; gap: 6px; font-size: 13.5px; line-height: 1.4; color: var(--dim); }
.fm-tix__meta span { display: flex; align-items: center; gap: 8px; }
.fm-tix__meta .i { flex: none; font-size: 15px; }
.fm-tix__meta b { font-weight: 600; color: rgba(255, 255, 255, 0.88); }
@media (max-width: 999px) {
  .fm-demo { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 14px; }
  .fm-flow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .fm-tix { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .fm-tix__img { aspect-ratio: 16 / 6.5; }
}
@media (max-width: 600px) {
  .fm-stage { aspect-ratio: 560 / 610; }
  .fm-card.il-card { width: 50%; }
  .fm-live { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-slot > *, .fm-hello, .fm-send > span, .fm-x > span, .fm-flow { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .fm-set__bar { background: #f6f6f8; }
.rec-page--light .fm-set__bar b, .rec-page--light .fm-set__rows .il-code, .rec-page--light .fm-card__h, .rec-page--light .fm-live__h, .rec-page--light .fm-hello b, .rec-page--light .fm-tix__top b, .rec-page--light .fm-tix__meta b { color: #15151a; }
.rec-page--light .fm-card.il-card, .rec-page--light .fm-live { background: #fff; box-shadow: 0 26px 50px -26px rgba(21, 21, 26, 0.42); }
.rec-page--light .fm-card__brand, .rec-page--light .fm-live__brand { color: #4a4a55; }
.rec-page--light .fm-field { color: #2a2a33; }
.rec-page--light .fm-field input { background: #f6f6f8; color: #15151a; }
.rec-page--light .fm-field input::placeholder { color: #9a9aa5; }
.rec-page--light .fm-flow { background: #f6f6f8; }
.rec-page--light .fm-tix__body::before, .rec-page--light .fm-tix__body::after { background: #fff; }

/* Página Importação de usuários: três seções com cara própria.
   1) "Migre para a Astron": a planilha (larga, em cima à direita) e, na frente, o
      cartão de importação do painel (embaixo à esquerda), o losango das outras páginas.
   2) "Da planilha para a área de membros": uma esteira. Cada linha da planilha manda
      um ponto pela faixa do meio e vira um aluno cadastrado do outro lado. O botão
      liga a classe .is-run; o script da página só conta o número e troca o estado.
   3) "O que vai na planilha": as colunas num grid de planilha, com a célula do
      cabeçalho selecionada como no programa de planilhas. */
.imp-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 350; }
.imp-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 44%, color-mix(in srgb, var(--acc, #6dbb4f) 20%, transparent), transparent); }
.imp-sheet__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 1.9cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); font-size: max(10.5px, 2.2cqw); line-height: 1.2; }
.imp-sheet__bar .i { flex: none; width: max(13px, 2.8cqw); height: max(13px, 2.8cqw); color: var(--acc, #6dbb4f); }
.imp-sheet__bar b { flex: 1; font-weight: 600; color: #fff; }
.imp-sheet__bar small { font-size: max(9px, 1.9cqw); color: var(--dim); }
.imp-grid { display: grid; grid-template-columns: 7% 29% minmax(0, 1fr) 25%; font-size: max(9px, 1.95cqw); line-height: 1.2; }
.imp-grid > span { overflow: hidden; padding: 1.5cqw 1.6cqw; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.78); }
.imp-grid > span:nth-child(4n) { border-right: 0; }
.imp-grid > .is-l, .imp-grid > .is-n { padding-block: 0.9cqw; background: rgba(255, 255, 255, 0.03); text-align: center; font-size: max(8px, 1.6cqw); color: var(--dim); }
.imp-grid > .is-h { font-weight: 600; color: #fff; }
.imp-card.il-card { position: absolute; left: 0; bottom: 0; width: 44%; gap: 1.5cqw; padding: 2.6cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); }
.imp-card .il-head b { font-size: max(11px, 2.3cqw); }
.imp-card .il-row { gap: 1.8cqw; padding: 1.7cqw 2cqw; font-size: max(10.5px, 2.2cqw); line-height: 1.3; }
.imp-card .rv-prog { height: max(4px, 0.9cqw); }
/* 2) esteira */
.imp-try { padding: 24px 0 80px; }
.imp-demo { max-width: 980px; margin-inline: auto; font-family: var(--font-body); }
.imp-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 22px; margin-bottom: 20px; padding: 16px 18px; border-radius: 16px; background: #101010; border: 1px solid var(--line2); }
.imp-run { display: inline-grid; place-items: center; min-height: 46px; padding: 0 20px; border: 0; border-radius: 11px; background: var(--acc, #6dbb4f); font: 600 15px/1.2 var(--font-body); color: #0d2a06; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; }
.imp-run:hover { filter: brightness(1.08); }
.imp-run:active { transform: scale(0.98); }
.imp-run:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.imp-run:disabled { cursor: default; filter: none; transform: none; opacity: 0.75; }
.imp-run > span { grid-area: 1 / 1; }
.imp-run .is-b, .imp-demo.is-done .imp-run .is-a { visibility: hidden; }
.imp-demo.is-done .imp-run .is-b { visibility: visible; }
.imp-count { display: grid; gap: 8px; }
.imp-count p { margin: 0; font-size: 14.5px; color: var(--mut); }
.imp-count b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.imp-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.imp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--acc, #6dbb4f); transform: scaleX(0); transform-origin: left center; }
.imp-demo.is-run .imp-bar i { transform: none; transition: transform 3s linear; }
.imp-heads { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 0 10px; margin-bottom: 8px; padding-inline: 4px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.imp-heads span { display: inline-flex; align-items: center; gap: 7px; }
.imp-heads span:last-child { grid-column: 3; }
.imp-heads .i { font-size: 15px; color: var(--acc, #6dbb4f); }
.imp-rows { display: grid; gap: 8px; }
.imp-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; gap: 10px; }
.imp-src, .imp-dst { display: flex; align-items: center; gap: 12px; min-width: 0; height: 52px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.imp-src { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: rgba(255, 255, 255, 0.85); transition: opacity 0.3s ease, background-color 0.3s ease; }
.imp-src__n { flex: none; width: 22px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.imp-src__name { flex: none; font-weight: 500; }
.imp-src__mail { overflow: hidden; min-width: 0; font-size: 13px; color: var(--dim); white-space: nowrap; text-overflow: ellipsis; }
.imp-src__ok { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: color-mix(in srgb, var(--acc, #6dbb4f) 26%, transparent); color: var(--acc, #6dbb4f); font-size: 12px; opacity: 0; transition: opacity 0.3s ease; }
.imp-lane { position: relative; container-type: inline-size; height: 10px; }
.imp-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--line2); }
.imp-lane i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--acc, #6dbb4f); box-shadow: 0 0 12px var(--acc, #6dbb4f); opacity: 0; }
.imp-dst { position: relative; border: 1px dashed var(--line2); }
.imp-dst > * { opacity: 0; transform: translateX(-10px); transition: opacity 0.35s ease, transform 0.35s ease; }
.imp-dst b { overflow: hidden; min-width: 0; font-weight: 600; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.imp-dst .il-pill { margin-left: auto; }
.imp-dst .il-ok { display: none; margin-left: auto; }
.imp-dst .cert-ava { width: 30px; height: 30px; background: var(--acc, #6dbb4f); color: #0d2a06; font-size: 11px; }
.imp-demo.is-run .imp-src { transition-delay: calc(var(--i) * 0.42s + 0.45s); opacity: 0.5; }
.imp-demo.is-run .imp-src__ok { transition-delay: calc(var(--i) * 0.42s + 0.45s); opacity: 1; }
.imp-demo.is-run .imp-lane i { animation: imp-dot 0.55s ease-in-out calc(var(--i) * 0.42s) both; }
.imp-demo.is-run .imp-dst { border-style: solid; border-color: color-mix(in srgb, var(--acc, #6dbb4f) 35%, transparent); background: color-mix(in srgb, var(--acc, #6dbb4f) 10%, transparent); transition: background-color 0.3s ease calc(var(--i) * 0.42s + 0.45s), border-color 0.3s ease calc(var(--i) * 0.42s + 0.45s); }
.imp-demo.is-run .imp-dst > * { opacity: 1; transform: none; transition-delay: calc(var(--i) * 0.42s + 0.45s); }
@keyframes imp-dot {
  0% { opacity: 0; transform: translateX(0); }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(100cqw - 10px)); }
}
.imp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-inline: 4px; font-size: 13px; color: var(--dim); }
.imp-done { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.88); opacity: 0; transition: opacity 0.35s ease; }
.imp-done .i { font-size: 17px; color: var(--acc, #6dbb4f); }
.imp-demo.is-done .imp-done { opacity: 1; }
.imp-demo.is-reset *, .imp-demo.is-reset *::before { transition: none !important; animation: none !important; }
/* 3) colunas da planilha */
.imp-cols { padding: 8px 0 80px; }
.imp-cols__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.imp-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; overflow: hidden; border-radius: 16px; background: #101010; border: 1px solid var(--line2); font-family: var(--font-body); }
.imp-col { display: grid; grid-template-rows: auto auto auto auto 1fr; border-right: 1px solid var(--line); }
.imp-col:last-child { border-right: 0; }
.imp-col > span { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.imp-col__l { padding-block: 7px !important; background: rgba(255, 255, 255, 0.04); text-align: center; font-size: 12px !important; font-weight: 600; color: var(--dim) !important; }
.imp-col__h { position: relative; font-family: var(--font-tag); font-weight: 600; color: #fff !important; }
.imp-col:first-child .imp-col__h { outline: 2px solid var(--acc, #6dbb4f); outline-offset: -2px; background: color-mix(in srgb, var(--acc, #6dbb4f) 8%, transparent); }
.imp-col:first-child .imp-col__h::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background: var(--acc, #6dbb4f); border: 1.5px solid #101010; }
.imp-col__txt { display: flex !important; align-items: flex-start; gap: 10px; padding: 16px 18px 20px !important; border-bottom: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--mut) !important; background: rgba(255, 255, 255, 0.02); }
.imp-col__txt .i { flex: none; margin-top: 2px; font-size: 16px; color: var(--acc, #6dbb4f); }
@media (max-width: 760px) {
  .imp-top { grid-template-columns: minmax(0, 1fr); }
  .imp-run { width: 100%; }
  .imp-heads, .imp-row { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 6px; }
  .imp-src, .imp-dst { gap: 8px; height: 46px; padding: 0 10px; font-size: 13px; }
  .imp-src__n, .imp-src__mail, .imp-dst .il-pill { display: none; }
  .imp-dst .cert-ava { width: 26px; height: 26px; font-size: 10px; }
  .imp-spec { grid-template-columns: minmax(0, 1fr); }
  .imp-col { border-right: 0; border-bottom: 1px solid var(--line2); }
  .imp-col:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .imp-stage { aspect-ratio: 560 / 440; }
  .imp-card.il-card { width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .imp-demo *, .imp-demo *::before { transition: none !important; animation: none !important; }
}
/* tema claro (rec-page--light) */
.rec-page--light .imp-sheet__bar { background: #f6f6f8; }
.rec-page--light .imp-sheet__bar b, .rec-page--light .imp-grid > .is-h, .rec-page--light .imp-count b, .rec-page--light .imp-dst b, .rec-page--light .imp-col__h, .rec-page--light .imp-done { color: #15151a !important; }
.rec-page--light .imp-grid > span, .rec-page--light .imp-src, .rec-page--light .imp-col > span { color: #2a2a33; }
.rec-page--light .imp-grid > .is-l, .rec-page--light .imp-grid > .is-n, .rec-page--light .imp-col__l { background: #f4f4f7; }
.rec-page--light .imp-card.il-card, .rec-page--light .imp-top, .rec-page--light .imp-spec { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .imp-col:first-child .imp-col__h::after { border-color: #fff; }

/* Página Tags e pixels: três seções com cara própria.
   1) "Marketing conectado": a lista de tags do painel (larga, em cima à direita,
      igual à tela real: nome e status ligado ou desligado) e, na frente, o cartão de
      nova tag com o código HTML (embaixo à esquerda), o losango das outras páginas.
   2) "Veja as tags funcionando": o visitante liga e desliga as tags e acompanha o
      que sai enquanto um aluno navega pela área. O script da página só roda com a
      seção na tela e escreve os eventos com textContent.
   3) "Funciona com as ferramentas que você já usa": mosaico de logos. */
.tag-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 500; }
.tag-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 42%, color-mix(in srgb, var(--acc, #3ec9a7) 20%, transparent), transparent); }
.tag-list__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); }
.tag-list__bar b { flex: 1; font-size: max(11px, 2.4cqw); font-weight: 600; color: #fff; }
.tag-add { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 1cqw 2cqw; border-radius: 999px; border: 1px solid var(--line2); font-size: max(9px, 1.9cqw); font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.tag-add .i { width: 1.1em; height: 1.1em; }
.tag-list__rows { display: grid; gap: 1.2cqw; padding: 2.4cqw 2.6cqw; }
.tag-list__rows .il-row { gap: 1.8cqw; padding: 1.5cqw 2cqw; font-size: max(10.5px, 2.2cqw); line-height: 1.25; }
.tag-list__rows .rv-tog { margin-left: auto; width: max(26px, 5.4cqw); height: max(15px, 3.2cqw); border-radius: 999px; }
.tag-list__rows .rv-tog::after { top: 12%; left: 8%; width: max(11px, 2.4cqw); height: max(11px, 2.4cqw); }
.tag-list__rows .rv-tog.is-on::after { left: auto; right: 8%; }
.tag-list__rows .rv-tog.is-on { background: var(--acc, #3ec9a7); }
.tag-list__rows .il-row.is-off .il-mid { color: var(--dim); }
.tag-logo { flex: none; width: max(20px, 4.4cqw); height: max(20px, 4.4cqw); border-radius: 22%; object-fit: contain; }
.tag-list__foot { display: flex; justify-content: flex-end; padding: 0 2.6cqw 2.4cqw; font-size: max(9px, 1.9cqw); color: var(--dim); }
.tag-new.il-card { position: absolute; left: 0; bottom: 0; width: 45%; gap: 1.5cqw; padding: 2.6cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); font-family: var(--font-body); }
.tag-new .il-head b { font-size: max(11px, 2.3cqw); }
.tag-new .il-f small { font-size: max(9px, 1.8cqw); }
.tag-new .il-f > span { padding: 1.4cqw 1.8cqw; border-radius: 1.2cqw; font-size: max(10px, 2cqw); color: rgba(255, 255, 255, 0.85); }
.tag-code { margin: 0; padding: 1.8cqw 2cqw; border-radius: 1.2cqw; background: #0a0a0a; border: 1px solid var(--line); font-family: var(--font-tag); font-size: max(8.5px, 1.75cqw); line-height: 1.7; white-space: pre; overflow: hidden; color: rgba(255, 255, 255, 0.72); }
.tag-code .k { color: var(--acc, #3ec9a7); }
.tag-code .s { color: #f2c46b; }
.tag-new__on { display: flex; align-items: center; justify-content: space-between; font-size: max(10px, 2.1cqw); font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.tag-new__on .rv-tog { width: max(26px, 5.4cqw); height: max(15px, 3.2cqw); border-radius: 999px; background: var(--acc, #3ec9a7); }
.tag-new__on .rv-tog::after { top: 12%; left: auto; right: 8%; width: max(11px, 2.4cqw); height: max(11px, 2.4cqw); }
/* 2) demonstração */
.tag-try { padding: 24px 0 80px; }
.tag-demo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; max-width: 1000px; margin-inline: auto; font-family: var(--font-body); }
.tag-sw { display: grid; gap: 10px; padding: 20px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); }
.tag-sw__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.tag-sw__row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: background-color 0.2s ease; }
.tag-sw__row:hover { background: rgba(255, 255, 255, 0.06); }
.tag-sw__row .tag-logo { width: 34px; height: 34px; border-radius: 9px; }
.tag-sw__txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tag-sw__txt b { font-size: 14.5px; font-weight: 600; color: #fff; }
.tag-sw__txt small { font-size: 12.5px; color: var(--dim); }
.tag-sw__row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tag-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: background-color 0.2s ease; }
.tag-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; }
.tag-sw__row input:checked + .tag-switch { background: var(--acc, #3ec9a7); }
.tag-sw__row input:checked + .tag-switch::after { transform: translateX(18px); }
.tag-sw__row input:focus-visible + .tag-switch { outline: 2px solid #fff; outline-offset: 2px; }
.tag-sw__note { margin: 4px 2px 0; font-size: 12.5px; color: var(--dim); }
.tag-live { overflow: hidden; border-radius: 20px; background: #0c0c0c; border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9), 0 0 90px -54px var(--acc, #3ec9a7); }
.tag-live__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #141414; border-bottom: 1px solid var(--line); }
.tag-live__bar img { width: 18px; height: auto; }
.tag-url { flex: 1; min-width: 0; overflow: hidden; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.75); }
.tag-url b { font-weight: 600; color: #fff; }
.tag-who { display: inline-flex; flex: none; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.tag-who .cert-ava { width: 24px; height: 24px; background: var(--acc, #3ec9a7); color: #05241d; font-size: 9.5px; }
.tag-live__page { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.tag-live__page img { width: 74px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: center bottom; border-radius: 8px; }
.tag-live__lines { display: grid; gap: 8px; }
.tag-live__lines span { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.tag-live__lines span:first-child { width: 60%; height: 12px; background: rgba(255, 255, 255, 0.16); }
.tag-live__lines span:nth-child(3) { width: 82%; }
.tag-live__lines span:last-child { width: 46%; }
.tag-log { display: grid; gap: 8px; min-height: 252px; align-content: start; padding: 14px 16px 18px; }
.tag-log__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.tag-log__live { display: inline-flex; align-items: center; gap: 6px; color: var(--acc, #3ec9a7); }
.tag-log__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tag-blink 1.6s ease-in-out infinite; }
@keyframes tag-blink { 50% { opacity: 0.3; } }
.tag-ev { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); font-size: 13px; animation: tag-in 0.35s ease both; }
.tag-ev .tag-logo { width: 24px; height: 24px; border-radius: 6px; }
.tag-ev b { flex: none; font-weight: 600; color: #fff; }
.tag-ev__e { flex: none; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--acc, #3ec9a7) 16%, transparent); font-family: var(--font-tag); font-size: 11.5px; font-weight: 600; color: var(--acc, #3ec9a7); }
.tag-ev__p { overflow: hidden; min-width: 0; margin-left: auto; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); }
@keyframes tag-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tag-empty { display: none; padding: 14px; border-radius: 11px; border: 1px dashed var(--line2); text-align: center; font-size: 13px; color: var(--dim); }
.tag-demo.is-empty .tag-empty { display: block; }
.tag-demo.is-empty .tag-log__live { color: var(--dim); }
.tag-demo.is-empty .tag-log__live::before { animation: none; }
/* 3) mosaico de logos */
.tag-logos { padding: 8px 0 80px; }
.tag-logos__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.tag-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.tag-tile { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: var(--surf); border: 1px solid var(--line); font-family: var(--font-body); }
.tag-tile .tag-logo { width: 44px; height: 44px; border-radius: 12px; }
.tag-tile__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--acc, #3ec9a7); color: #05241d; font-size: 22px; }
.tag-tile b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.tag-tile small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--dim); }
.tag-tile.is-any { border-color: color-mix(in srgb, var(--acc, #3ec9a7) 45%, transparent); background: color-mix(in srgb, var(--acc, #3ec9a7) 7%, transparent); }
@media (max-width: 899px) {
  .tag-demo { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .tag-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tag-stage { aspect-ratio: 560 / 640; }
  .tag-new.il-card { width: 54%; }
  .tag-mosaic { grid-template-columns: minmax(0, 1fr); }
  .tag-who span:last-child { display: none; }
  .tag-ev__p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tag-ev, .tag-log__live::before { animation: none; }
  .tag-switch, .tag-switch::after { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .tag-list__bar, .rec-page--light .tag-live__bar { background: #f6f6f8; }
.rec-page--light .tag-list__bar b, .rec-page--light .tag-sw__head, .rec-page--light .tag-sw__txt b, .rec-page--light .tag-ev b, .rec-page--light .tag-tile b, .rec-page--light .tag-url b { color: #15151a; }
.rec-page--light .tag-new.il-card, .rec-page--light .tag-sw, .rec-page--light .tag-live { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .tag-code { background: #f6f6f8; color: #2a2a33; }
.rec-page--light .tag-url { background: #ececf0; color: #4a4a55; }

/* Página Notificações push: três seções com cara própria.
   1) "O aviso certo, na hora certa": o iPhone da página do aplicativo com a tela
      de bloqueio recebendo o aviso (alto, à esquerda) e, atrás, o histórico de
      notificações enviadas (largo, à direita): o celular à esquerda do painel.
   2) "Escreva e veja chegar": o visitante escreve o título e o texto e o aviso cai
      na tela de bloqueio do iPhone. Sem <form>; o script escreve com textContent.
   3) "Um aviso para cada momento": uma linha do dia com três avisos. */
.push-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 470; }
.push-stage::before { content: ""; position: absolute; z-index: -1; inset: -6% -4%; pointer-events: none; background: radial-gradient(closest-side at 42% 50%, color-mix(in srgb, var(--acc, #e8402f) 20%, transparent), transparent); }
.push-stage .iphone { --sw: 33cqw; position: absolute; z-index: 2; left: 1%; top: 0; margin: 0; }
.push-hist.lang-win { top: 15%; width: 66%; }
.push-hist__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); font-size: max(11px, 2.35cqw); font-weight: 600; color: #fff; }
.push-hist__rows { display: grid; gap: 1.2cqw; padding: 2.4cqw 2.6cqw 2.8cqw 5.4cqw; }
.push-hist__rows .il-row { gap: 1.6cqw; padding: 1.6cqw 2cqw; font-size: max(10.5px, 2.15cqw); line-height: 1.25; }
.push-hist__rows .il-mid { display: grid; gap: 0.4cqw; }
.push-hist__rows .il-mid small { font-size: max(9px, 1.8cqw); font-weight: 400; color: var(--dim); }
.push-hist__rows .il-pill { font-size: max(9px, 1.75cqw); }
/* tela de bloqueio dentro do iPhone */
.push-lock { position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 108%, color-mix(in srgb, var(--acc, #e8402f) 55%, transparent), transparent 70%), radial-gradient(90% 50% at 10% 0%, rgba(120, 90, 255, 0.28), transparent 70%), linear-gradient(180deg, #121218, #0a0a0c); font-family: var(--font-body); }
.push-lock__time { position: absolute; left: 0; right: 0; top: 13%; text-align: center; font-size: calc(var(--sw) * 0.25); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.94); }
.push-notifs { position: absolute; left: 4.5%; right: 4.5%; top: 34%; display: grid; gap: calc(var(--sw) * 0.026); }
.push-n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--sw) * 0.034); padding: calc(var(--sw) * 0.036); border-radius: calc(var(--sw) * 0.07); background: rgba(38, 38, 44, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8); color: #fff; }
.push-n__ic { grid-row: 1 / span 2; width: calc(var(--sw) * 0.12); height: calc(var(--sw) * 0.12); border-radius: calc(var(--sw) * 0.028); background: #16161a; object-fit: contain; padding: calc(var(--sw) * 0.016); box-sizing: border-box; }
.push-n__top { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: calc(var(--sw) * 0.04); line-height: 1.25; }
.push-n__top b { overflow: hidden; flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.push-n__top small { flex: none; font-size: calc(var(--sw) * 0.034); color: rgba(255, 255, 255, 0.55); }
.push-n__txt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 1px; font-size: calc(var(--sw) * 0.038); line-height: 1.3; color: rgba(255, 255, 255, 0.82); }
.push-n.is-new { animation: push-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes push-in { from { opacity: 0; transform: translateY(-40%) scale(0.96); } to { opacity: 1; transform: none; } }
/* 2) demonstração */
.push-try { padding: 24px 0 80px; }
.push-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; max-width: 900px; margin-inline: auto; font-family: var(--font-body); }
.push-comp { display: grid; gap: 14px; padding: 24px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9); }
.push-comp__head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; }
.push-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.push-field input, .push-field textarea { width: 100%; padding: 12px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 15px/1.4 var(--font-body); color: #fff; outline: none; resize: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.push-field textarea { height: 88px; }
.push-field input:focus-visible, .push-field textarea:focus-visible { border-color: var(--acc, #e8402f); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #e8402f) 26%, transparent); }
.push-field small { justify-self: end; font-size: 12px; font-weight: 400; color: var(--dim); font-variant-numeric: tabular-nums; }
.push-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.push-who label { position: relative; display: grid; place-items: center; padding: 9px 8px; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75); transition: background-color 0.2s ease, color 0.2s ease; }
.push-who input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.push-who label:has(input:checked) { background: var(--acc, #e8402f); color: #fff; font-weight: 600; }
.push-who label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.push-send { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 0; border-radius: 11px; background: var(--acc, #e8402f); font: 600 15px/1.2 var(--font-body); color: #fff; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; }
.push-send:hover { filter: brightness(1.08); }
.push-send:active { transform: scale(0.98); }
.push-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.push-send .i { font-size: 17px; }
.push-comp__note { margin: 0; font-size: 12.5px; color: var(--dim); }
.push-demo .iphone { --sw: 252px; margin: 0; }
.push-demo .iphone.is-buzz { animation: push-buzz 0.4s ease; }
@keyframes push-buzz { 0%, 100% { transform: none; } 25% { transform: translateX(-3px) rotate(-0.6deg); } 50% { transform: translateX(3px) rotate(0.6deg); } 75% { transform: translateX(-2px); } }
/* 3) linha do dia */
.push-day { padding: 8px 0 80px; }
.push-day__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.push-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; font-family: var(--font-body); }
.push-line::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; border-top: 1.5px dashed var(--line2); }
.push-moment { position: relative; display: grid; gap: 14px; align-content: start; }
.push-moment__t { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #191919; border: 1px solid var(--line2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.push-moment__t::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc, #e8402f); box-shadow: 0 0 10px var(--acc, #e8402f); }
.push-moment .push-n { --sw: 300px; background: rgba(255, 255, 255, 0.06); }
.push-moment__who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dim); }
.push-moment__who .i { flex: none; font-size: 16px; color: var(--acc, #e8402f); }
.push-moment__who b { font-weight: 600; color: rgba(255, 255, 255, 0.88); }
/* tablet: formulário e iPhone continuam lado a lado, o iPhone um pouco menor */
@media (max-width: 899px) {
  .push-demo { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; max-width: 720px; }
  .push-demo .iphone { --sw: 214px; }
}
/* celular: um embaixo do outro, centralizados */
@media (max-width: 700px) {
  .push-demo { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; max-width: 520px; }
  .push-comp { width: 100%; }
  /* só a parte de cima do iPhone, onde os avisos chegam */
  .push-demo .iphone { --sw: 230px; height: 340px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
}
/* linha do dia: três colunas no tablet; no celular vira vertical e centralizada */
@media (max-width: 1099px) {
  .push-moment .push-n { --sw: 260px; }
}
@media (max-width: 760px) {
  .push-moment .push-n { --sw: 300px; }
  .push-line { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; gap: 22px; }
  .push-line::before { left: 15px; right: auto; top: 8px; bottom: 8px; border-top: 0; border-left: 1.5px dashed var(--line2); }
}
@media (max-width: 600px) {
  .push-stage { aspect-ratio: 560 / 520; }
  .push-stage .iphone { --sw: 36cqw; }
  .push-hist.lang-win { width: 62%; top: 12%; }
  .push-hist__rows { padding-left: 6cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .push-n.is-new, .push-demo .iphone.is-buzz { animation: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .push-hist__bar { background: #f6f6f8; color: #15151a; }
.rec-page--light .push-comp { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .push-comp__head, .rec-page--light .push-moment__who b, .rec-page--light .push-moment__t { color: #15151a; }
.rec-page--light .push-field { color: #2a2a33; }
.rec-page--light .push-field input, .rec-page--light .push-field textarea { background: #f6f6f8; color: #15151a; }
.rec-page--light .push-who { background: #f1f1f4; }
.rec-page--light .push-who label { color: #2a2a33; }
.rec-page--light .push-moment__t { background: #fff; }
.rec-page--light .push-moment .push-n { background: #fff; color: #15151a; border-color: var(--line); }
.rec-page--light .push-moment .push-n__txt { color: #4a4a55; }
.rec-page--light .push-moment .push-n__top small { color: #8a8a95; }
.push-n { grid-template-rows: auto auto auto; }
.push-n__ic { grid-row: 1 / span 3; }
.iphone__screen .push-n__ic, .push-n .push-n__ic { width: calc(var(--sw) * 0.12); height: calc(var(--sw) * 0.12); object-fit: contain; }
.push-n__top b { font-size: calc(var(--sw) * 0.033); font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); }
.push-n__h { overflow: hidden; margin-top: 1px; font-size: calc(var(--sw) * 0.042); font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.iphone--lock .iphone__time { visibility: hidden; }
.push-comp__sent { min-height: 18px; margin: -4px 0 0; font-size: 13px; font-weight: 500; color: #6ee7a1; }
.push-comp__sent span { display: none; }
.push-demo.is-all .push-comp__sent span:first-child, .push-demo.is-seg .push-comp__sent span:last-child { display: inline; }
.rec-page--light .push-moment .push-n__top b { color: #8a8a95; }

/* Página Proteção DRM: três seções com cara própria.
   1) "Seu conteúdo é o seu maior ativo": o PDF de apoio aberto com a marca d'água
      do aluno (largo, em cima à direita) e, na frente, o cartão de anexos da aula com
      a marca d'água ligada (embaixo à esquerda), o losango das outras páginas.
   2) "Coloque o seu nome no PDF": o visitante digita o nome e o e-mail e a marca
      d'água da página muda na hora (o script troca só o texto, com textContent).
   3) "E nos vídeos, uma camada extra de DRM": duas gravações de tela lado a lado,
      sem DRM (a aula aparece) e com DRM (tela protegida). */
.drm-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 440; }
.drm-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 44%, rgba(255, 255, 255, 0.1), transparent); }
.drm-view__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 1.9cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); font-size: max(10.5px, 2.2cqw); line-height: 1.2; }
.drm-view__bar .i { flex: none; width: max(13px, 2.8cqw); height: max(13px, 2.8cqw); color: #ff6b5b; }
.drm-view__bar b { flex: 1; font-weight: 600; color: #fff; }
.drm-view__bar small { font-size: max(9px, 1.9cqw); color: var(--dim); }
.drm-view__desk { position: relative; padding: 3cqw 4cqw 0; background: #2a2a2e; height: 46cqw; overflow: hidden; }
.drm-stage__chip { position: absolute; z-index: 3; right: 3cqw; top: 2.4cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2cqw; border-radius: 999px; background: #8f1e1e; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.7); font-family: var(--font-body); font-size: max(9px, 1.9cqw); font-weight: 600; color: #fff; }
.drm-stage__chip .i { width: 1.1em; height: 1.1em; }
.drm-stage .drm-wm { font-size: 1.15em; }
/* página de PDF com marca d'água (usada no palco e na demonstração) */
.drm-page { position: relative; overflow: hidden; background: #fbfbfa; color: #1b1b1f; font-family: var(--font-body); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.drm-page__in { position: relative; z-index: 1; display: grid; gap: 1.6em; }
.drm-page__kick { font-size: 0.72em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a93; }
.drm-page__h { margin: -1em 0 0; font-size: 1.5em; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.drm-page__lines { display: grid; gap: 0.75em; }
.drm-page__lines span { height: 0.5em; border-radius: 999px; background: #e3e3e6; }
.drm-page__lines span:nth-child(3n) { width: 78%; }
.drm-page__lines span:nth-child(4n) { width: 92%; }
.drm-wm { position: absolute; z-index: 2; inset: -40% -60%; display: grid; grid-template-columns: repeat(3, max-content); align-content: center; justify-content: center; gap: 2.6em 3.2em; transform: rotate(-24deg); pointer-events: none; font-size: 0.86em; font-weight: 600; white-space: nowrap; color: rgba(150, 30, 30, 0.24); }
.drm-att .il-mid { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.drm-page__foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.5em; margin-top: 1.4em; padding-top: 0.8em; border-top: 1px solid #e6e6e9; font-size: 0.7em; color: #6f6f78; }
.drm-page__foot b { font-weight: 600; color: #3a3a42; }
.drm-stage .drm-page { padding: 4.4cqw; font-size: max(8px, 1.9cqw); border-radius: 0.8cqw 0.8cqw 0 0; }
.drm-att.il-card { position: absolute; left: 0; bottom: 0; width: 45%; gap: 1.5cqw; padding: 2.6cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); }
.drm-att .il-head b { font-size: max(11px, 2.3cqw); }
.drm-att .il-row { gap: 1.8cqw; padding: 1.7cqw 2cqw; font-size: max(10.5px, 2.2cqw); line-height: 1.3; }
.drm-att .rv-tog { margin-left: auto; width: max(26px, 5.4cqw); height: max(15px, 3.2cqw); border-radius: 999px; background: #3fbf7f; }
.drm-att .rv-tog::after { top: 12%; left: auto; right: 8%; width: max(11px, 2.4cqw); height: max(11px, 2.4cqw); }
.drm-att__note { margin: 0 0.4cqw; font-size: max(9px, 1.85cqw); color: var(--dim); }
.drm-pdf-ic { color: #ff6b5b !important; background: rgba(255, 107, 91, 0.16) !important; }
/* 2) demonstração da marca d'água */
.drm-try { padding: 24px 0 80px; }
.drm-demo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; max-width: 960px; margin-inline: auto; font-family: var(--font-body); }
.drm-form { display: grid; gap: 14px; padding: 24px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); }
.drm-form__head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; }
.drm-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.drm-field input { width: 100%; height: 46px; padding: 0 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 15px/1.2 var(--font-body); color: #fff; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.drm-field input::placeholder { color: rgba(255, 255, 255, 0.38); }
.drm-field input:focus-visible { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14); }
.drm-form__note { margin: 0; font-size: 12.5px; color: var(--dim); }
.drm-form__rule { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 13.5px; line-height: 1.5; color: var(--mut); }
.drm-form__rule .i { flex: none; margin-top: 2px; font-size: 16px; color: #3fbf7f; }
.drm-sheet { position: relative; justify-self: center; width: min(100%, 420px); }
.drm-sheet .drm-wm { font-size: 1em; }
.drm-sheet .drm-page { aspect-ratio: 1 / 1.3; padding: 34px 32px 28px; border-radius: 6px; font-size: 15px; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.drm-sheet .drm-page__in { height: 100%; grid-template-rows: auto auto 1fr auto; }
.drm-sheet .drm-page__foot { margin-top: 0; }
.drm-sheet__tag { position: absolute; z-index: 3; top: -14px; right: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #171719; border: 1px solid var(--line2); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.8); font-size: 12.5px; font-weight: 600; color: #fff; }
.drm-sheet__tag .i { font-size: 14px; color: #ff6b5b; }
/* 3) gravações de tela */
.drm-rec { padding: 8px 0 80px; }
.drm-rec__head p { max-width: 600px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.drm-rec__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; font-family: var(--font-body); }
.drm-cap { display: grid; gap: 14px; }
.drm-cap__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; border: 1px solid var(--line2); }
.drm-cap__screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drm-cap__rec { position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); font-size: 12px; font-weight: 600; color: #fff; }
.drm-cap__rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: tag-blink 1.4s ease-in-out infinite; }
.drm-cap__rec span { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); }
.drm-cap__shield { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: radial-gradient(circle at 50% 50%, rgba(63, 191, 127, 0.14), transparent 60%), #050505; text-align: center; }
.drm-cap__shield .i { padding: 14px; box-sizing: content-box; border-radius: 50%; background: rgba(63, 191, 127, 0.14); border: 1px solid rgba(63, 191, 127, 0.4); font-size: 26px; color: #3fbf7f; }
.drm-cap__shield b { font-size: 15px; font-weight: 600; color: #fff; }
.drm-cap__txt { display: flex; align-items: flex-start; gap: 10px; }
.drm-cap__txt .il-pill { flex: none; margin-top: 1px; }
.drm-cap__txt p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mut); }
.drm-cap__txt .il-pill.is-bad { background: rgba(255, 99, 99, 0.14); color: #ff8a8a; }
.drm-panda { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--surf); border: 1px solid var(--line); font-family: var(--font-body); font-size: 13.5px; color: var(--mut); }
.drm-panda img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.drm-panda b { font-weight: 600; color: #fff; }
@media (max-width: 899px) {
  .drm-demo { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 34px; }
}
@media (max-width: 680px) {
  .drm-rec__pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .drm-stage { aspect-ratio: 560 / 530; }
  .drm-att.il-card { width: 54%; }
  .drm-sheet .drm-page { padding: 26px 22px 22px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .drm-cap__rec::before { animation: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .drm-view__bar { background: #f6f6f8; }
.rec-page--light .drm-view__bar b, .rec-page--light .drm-form__head, .rec-page--light .drm-cap__txt b, .rec-page--light .drm-panda b { color: #15151a; }
.rec-page--light .drm-view__desk { background: #e9e9ee; }
.rec-page--light .drm-att.il-card, .rec-page--light .drm-form { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .drm-field { color: #2a2a33; }
.rec-page--light .drm-field input { background: #f6f6f8; color: #15151a; }
.rec-page--light .drm-sheet__tag { background: #fff; color: #15151a; }
/* Proteção DRM, seção 3 (versão interativa): "Tente copiar a aula". O visitante
   liga ou desliga a trava e tenta assistir, baixar ou gravar a tela; o player mostra
   o resultado. O script só troca data-act e a classe .is-off; o resto é CSS. */
.drm-lab { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 20px; align-items: stretch; margin-top: 26px; font-family: var(--font-body); }
.drm-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; align-self: center; border-radius: 18px; background: #000; border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9); }
.drm-player > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drm-player__bar { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12.5px; }
.drm-player__bar .i { flex: none; font-size: 16px; fill: currentColor; }
.drm-player__track { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.drm-player__track i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0.32); transform-origin: left center; }
.drm-lab[data-act="play"] .drm-player__track i { animation: drm-prog 9s linear infinite; }
@keyframes drm-prog { from { transform: scaleX(0.32); } to { transform: scaleX(0.9); } }
.drm-player::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); }
.drm-badge { position: absolute; z-index: 3; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.66); font-size: 12.5px; font-weight: 600; color: #fff; opacity: 0; transition: opacity 0.25s ease; }
.drm-badge--play::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; }
.drm-badge--rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: tag-blink 1.4s ease-in-out infinite; }
.drm-lab[data-act="play"] .drm-badge--play, .drm-lab[data-act="rec"] .drm-badge--rec { opacity: 1; }
.drm-black { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: radial-gradient(circle at 50% 50%, rgba(63, 191, 127, 0.14), transparent 60%), #040404; text-align: center; opacity: 0; transition: opacity 0.3s ease; }
.drm-black .i { padding: 14px; box-sizing: content-box; border-radius: 50%; background: rgba(63, 191, 127, 0.14); border: 1px solid rgba(63, 191, 127, 0.4); font-size: 26px; color: #3fbf7f; }
.drm-black b { font-size: 16px; font-weight: 600; color: #fff; }
.drm-lab[data-act="rec"]:not(.is-off) .drm-black { opacity: 1; }
.drm-lab[data-act="rec"]:not(.is-off) .drm-player__bar { opacity: 0; }
.drm-player__bar { transition: opacity 0.25s ease; }
.drm-act[data-act="play"] .i { fill: currentColor; }
.drm-toast { position: absolute; z-index: 4; left: 50%; top: 50%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: rgba(20, 20, 22, 0.94); border: 1px solid var(--line2); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9); white-space: nowrap; opacity: 0; transform: translate(-50%, -40%); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
.drm-toast .i { flex: none; font-size: 22px; }
.drm-toast b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.drm-toast small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.drm-toast--no .i { color: #3fbf7f; }
.drm-toast--yes .i { color: #ff8a8a; }
.drm-lab[data-act="dl"]:not(.is-off) .drm-toast--no, .drm-lab.is-off[data-act="dl"] .drm-toast--yes { opacity: 1; transform: translate(-50%, -50%); }
.drm-ctrl { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 18px; background: #101010; border: 1px solid var(--line2); }
.drm-sw { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.drm-sw__txt { display: grid; gap: 2px; flex: 1; }
.drm-sw__txt b { font-size: 15px; font-weight: 600; color: #fff; }
.drm-sw__txt small { font-size: 12.5px; color: var(--dim); }
.drm-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drm-sw input:checked + .tag-switch { background: #3fbf7f; }
.drm-sw input:checked + .tag-switch::after { transform: translateX(18px); }
.drm-sw input:focus-visible + .tag-switch { outline: 2px solid #fff; outline-offset: 2px; }
.drm-ctrl__lbl { margin: 4px 2px 0; font-size: 13px; font-weight: 600; color: var(--dim); }
.drm-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: transparent; font: 500 14.5px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.85); text-align: left; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.drm-act:hover { background: rgba(255, 255, 255, 0.05); }
.drm-act .i { flex: none; font-size: 18px; color: var(--dim); }
.drm-act[aria-pressed="true"] { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.drm-act[aria-pressed="true"] .i { color: #fff; }
.drm-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.drm-res { min-height: 68px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.drm-res span { display: none; }
.drm-lab[data-msg="play-on"] .drm-res [data-k="play-on"], .drm-lab[data-msg="play-off"] .drm-res [data-k="play-off"], .drm-lab[data-msg="dl-on"] .drm-res [data-k="dl-on"], .drm-lab[data-msg="dl-off"] .drm-res [data-k="dl-off"], .drm-lab[data-msg="rec-on"] .drm-res [data-k="rec-on"], .drm-lab[data-msg="rec-off"] .drm-res [data-k="rec-off"] { display: inline; }
.drm-lab:not(.is-off) .drm-res { background: rgba(63, 191, 127, 0.1); color: #8fe3b7; }
.drm-lab.is-off .drm-res { background: rgba(255, 99, 99, 0.1); color: #ffb0b0; }
.drm-lab.is-off[data-act="play"] .drm-res { background: rgba(255, 255, 255, 0.05); color: var(--mut); }
@media (max-width: 899px) {
  .drm-lab { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 600px) {
  .drm-toast { white-space: normal; width: 82%; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .drm-lab[data-act="play"] .drm-player__track i, .drm-badge--rec::before { animation: none; }
  .drm-black, .drm-toast, .drm-badge { transition: none; }
}
.rec-page--light .drm-ctrl { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .drm-sw__txt b, .rec-page--light .drm-act { color: #15151a; }

/* Página Administradores e permissões: três seções com cara própria.
   1) "Grupos de administradores": o resumo de administradores do painel (largo, em
      cima à direita: pessoa, grupo e último login, como na tela real) e, na frente,
      o cartão de um grupo com as áreas liberadas (embaixo à esquerda).
   2) "Cada grupo vê só o que precisa": quatro rádios (sem JS) trocam o grupo e o
      painel mostra as áreas liberadas e as trancadas para aquela pessoa.
   3) "A equipe cresce com o seu plano": os assentos de administrador de cada plano
      em pontos, do Gratuito (2) ao Enterprise (100). */
.adm-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 470; }
.adm-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 42%, color-mix(in srgb, var(--acc, #ee7f68) 20%, transparent), transparent); }
.adm-sum__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); }
.adm-sum__bar b { flex: 1; font-size: max(11px, 2.35cqw); font-weight: 600; color: #fff; }
.adm-sum__rows { display: grid; gap: 1.2cqw; padding: 2.4cqw 2.6cqw; }
.adm-sum__rows .il-row { gap: 1.8cqw; padding: 1.5cqw 2cqw; font-size: max(10px, 2.1cqw); line-height: 1.25; }
.adm-sum__rows .il-ava { width: max(22px, 5cqw); height: max(22px, 5cqw); flex: none; border-radius: 50%; object-fit: cover; }
.adm-sum__rows .il-mid { display: grid; gap: 0.3cqw; }
.adm-sum__rows .il-mid small { font-size: max(8.5px, 1.75cqw); font-weight: 400; color: var(--dim); }
.adm-sum__rows .il-pill { font-size: max(9px, 1.8cqw); }
.adm-pill-acc.il-pill { background: color-mix(in srgb, var(--acc, #ee7f68) 22%, transparent); color: var(--acc, #ee7f68); }
.adm-sum__foot { display: flex; justify-content: flex-end; padding: 0 2.6cqw 2.4cqw; font-size: max(9px, 1.9cqw); color: var(--dim); }
.adm-group.il-card { position: absolute; left: 0; bottom: 0; width: 44%; gap: 1.4cqw; padding: 2.6cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); }
.adm-group .il-head b { font-size: max(11px, 2.3cqw); }
.adm-group .il-head small { margin-left: auto; font-size: max(9px, 1.8cqw); color: var(--dim); }
.adm-group .il-row { gap: 1.6cqw; padding: 1.5cqw 2cqw; font-size: max(10px, 2.1cqw); line-height: 1.25; }
.adm-group .il-row.is-off .il-mid { color: var(--dim); }
.adm-group .rv-tog { margin-left: auto; width: max(24px, 5cqw); height: max(14px, 3cqw); border-radius: 999px; }
.adm-group .rv-tog::after { top: 12%; left: 8%; width: max(10px, 2.2cqw); height: max(10px, 2.2cqw); }
.adm-group .rv-tog.is-on { background: var(--acc, #ee7f68); }
.adm-group .rv-tog.is-on::after { left: auto; right: 8%; }
/* 2) demonstração por grupo */
.adm-try { padding: 24px 0 80px; }
.adm-demo { position: relative; max-width: 980px; margin-inline: auto; font-family: var(--font-body); }
.adm-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.adm-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 640px; margin: 0 auto 18px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.adm-tabs label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 8px; border-radius: 11px; cursor: pointer; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.78); transition: background-color 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.adm-tabs label:hover { background: rgba(255, 255, 255, 0.05); }
.adm-tabs img { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; }
#adm-1:checked ~ .adm-tabs label[for="adm-1"], #adm-2:checked ~ .adm-tabs label[for="adm-2"], #adm-3:checked ~ .adm-tabs label[for="adm-3"], #adm-4:checked ~ .adm-tabs label[for="adm-4"] { background: var(--acc, #ee7f68); color: #2e0f08; }
#adm-1:focus-visible ~ .adm-tabs label[for="adm-1"], #adm-2:focus-visible ~ .adm-tabs label[for="adm-2"], #adm-3:focus-visible ~ .adm-tabs label[for="adm-3"], #adm-4:focus-visible ~ .adm-tabs label[for="adm-4"] { outline: 2px solid #fff; outline-offset: 2px; }
.adm-panel { overflow: hidden; border-radius: 18px; background: #0c0c0c; border: 1px solid var(--line2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 90px -50px var(--acc, #ee7f68); }
.adm-panel__bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #141414; border-bottom: 1px solid var(--line); }
.adm-panel__bar > b { font-size: 13.5px; font-weight: 600; color: #fff; }
.adm-who { display: grid; margin-left: auto; }
.adm-who > span, .adm-count > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; visibility: hidden; }
.adm-who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.adm-who b { font-size: 13px; font-weight: 600; color: #fff; }
.adm-who small { font-size: 12px; color: var(--dim); }
#adm-1:checked ~ .adm-panel .adm-who > span:nth-child(1), #adm-2:checked ~ .adm-panel .adm-who > span:nth-child(2), #adm-3:checked ~ .adm-panel .adm-who > span:nth-child(3), #adm-4:checked ~ .adm-panel .adm-who > span:nth-child(4),
#adm-1:checked ~ .adm-panel .adm-count > span:nth-child(2), #adm-2:checked ~ .adm-panel .adm-count > span:nth-child(3), #adm-3:checked ~ .adm-panel .adm-count > span:nth-child(4), #adm-4:checked ~ .adm-panel .adm-count > span:nth-child(5) { visibility: visible; }
.adm-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.adm-area { position: relative; display: grid; gap: 6px; align-content: start; min-height: 112px; padding: 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); transition: opacity 0.28s ease, background-color 0.28s ease; }
.adm-area > .i { font-size: 20px; color: var(--acc, #ee7f68); transition: color 0.28s ease; }
.adm-area b { font-size: 14px; font-weight: 600; line-height: 1.25; color: #fff; }
.adm-area small { font-size: 12px; line-height: 1.4; color: var(--dim); }
.adm-area__lock { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); font-size: 13px; opacity: 0; transition: opacity 0.28s ease; }
#adm-2:checked ~ .adm-panel .adm-area:not(.g-2), #adm-3:checked ~ .adm-panel .adm-area:not(.g-3), #adm-4:checked ~ .adm-panel .adm-area:not(.g-4) { opacity: 0.38; background: transparent; }
#adm-2:checked ~ .adm-panel .adm-area:not(.g-2) > .i, #adm-3:checked ~ .adm-panel .adm-area:not(.g-3) > .i, #adm-4:checked ~ .adm-panel .adm-area:not(.g-4) > .i { color: var(--dim); }
#adm-2:checked ~ .adm-panel .adm-area:not(.g-2) .adm-area__lock, #adm-3:checked ~ .adm-panel .adm-area:not(.g-3) .adm-area__lock, #adm-4:checked ~ .adm-panel .adm-area:not(.g-4) .adm-area__lock { opacity: 1; }
.adm-count { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.adm-count > .i { color: var(--acc, #ee7f68); font-size: 16px; }
.adm-count > span { grid-area: 1 / 2; justify-content: flex-start; }
/* 3) assentos por plano */
.adm-seats { padding: 8px 0 80px; }
.adm-seats__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.adm-seats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 28px; font-family: var(--font-body); }
.adm-plan { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surf); border: 1px solid var(--line); }
.adm-plan.is-top { border-color: color-mix(in srgb, var(--acc, #ee7f68) 45%, transparent); background: color-mix(in srgb, var(--acc, #ee7f68) 7%, transparent); }
.adm-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 12px)); gap: 4px; align-content: end; }
.adm-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--acc, #ee7f68); }
.adm-plan__n { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.adm-plan__n small { margin-left: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.adm-plan b { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.adm-seats__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) {
  .adm-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-seats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-plan.is-top { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .adm-stage { aspect-ratio: 560 / 650; }
  .adm-group.il-card { width: 54%; }
  .adm-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-who small { display: none; }
  .adm-area { min-height: 0; }
  .adm-area small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-area, .adm-area > .i, .adm-area__lock, .adm-tabs label { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .adm-sum__bar, .rec-page--light .adm-panel__bar { background: #f6f6f8; }
.rec-page--light .adm-sum__bar b, .rec-page--light .adm-panel__bar > b, .rec-page--light .adm-who b, .rec-page--light .adm-area b, .rec-page--light .adm-plan__n, .rec-page--light .adm-seats__more { color: #15151a; }
.rec-page--light .adm-group.il-card, .rec-page--light .adm-panel { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .adm-tabs { background: #f1f1f4; border-color: #e4e4ea; }
.rec-page--light .adm-tabs label, .rec-page--light .adm-plan b, .rec-page--light .adm-count { color: #2a2a33; }
/* Abaixo de 1100px o site centraliza os títulos das seções (.rec-h2); os textos
   logo abaixo deles nas seções novas acompanham. */
@media (max-width: 1099px) {
  .fm-dates__head p, .imp-cols__head p, .tag-logos__head p, .push-day__head p, .drm-rec__head p, .adm-seats__head p { margin-inline: auto; text-align: center; }
  .adm-seats__more { display: flex; width: fit-content; margin-inline: auto; }
}

/* Página Termos de uso personalizado: três seções com cara própria.
   1) "Seus termos, suas regras": o editor de termos do painel (largo, em cima à
      direita, com o botão ligado, a barra de formatação e a opção de atualizar a
      data) e, na frente, a janela de aceite que o aluno vê (embaixo à esquerda).
   2) "Veja pelo lado do aluno": o visitante liga os termos, aceita como aluno e
      depois publica uma nova versão para ver o aceite pedido de novo. O script só
      troca classes (.is-off, .is-ok, .is-new).
   3) "Ideias do que colocar nos seus termos": quatro cláusulas numeradas. */
.tos-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 345; }
.tos-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 42%, color-mix(in srgb, var(--acc, #2b879e) 24%, transparent), transparent); }
.tos-ed__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); font-size: max(10px, 2.1cqw); color: var(--dim); }
.tos-ed__bar b { flex: 1; font-size: max(11px, 2.35cqw); font-weight: 600; color: #fff; }
.tos-ed__bar .rv-tog { width: max(26px, 5.4cqw); height: max(15px, 3.2cqw); border-radius: 999px; background: var(--acc, #2b879e); }
.tos-ed__bar .rv-tog::after { top: 12%; left: auto; right: 8%; width: max(11px, 2.4cqw); height: max(11px, 2.4cqw); }
.tos-tools { display: flex; gap: 0.8cqw; padding: 1.6cqw 2.6cqw; border-bottom: 1px solid var(--line); }
.tos-tools span { display: grid; place-items: center; min-width: max(18px, 4cqw); height: max(18px, 4cqw); padding: 0 0.8cqw; border-radius: 0.8cqw; background: rgba(255, 255, 255, 0.05); font-size: max(9px, 1.9cqw); font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.tos-tools span:nth-child(2) { font-style: italic; font-weight: 600; }
.tos-tools .i { width: max(10px, 2.1cqw); height: max(10px, 2.1cqw); }
.tos-text { display: grid; gap: 1.4cqw; padding: 2.6cqw 2.8cqw; font-size: max(10px, 2.1cqw); line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.tos-text b { color: #fff; }
.tos-ed__foot { display: flex; align-items: center; justify-content: flex-end; gap: 1.2cqw; padding: 0 2.8cqw 2.6cqw; font-size: max(9px, 1.9cqw); color: rgba(255, 255, 255, 0.75); }
.tos-cbx { display: grid; place-items: center; flex: none; width: max(14px, 2.8cqw); height: max(14px, 2.8cqw); border-radius: 0.6cqw; background: var(--acc, #2b879e); color: #fff; }
.tos-cbx .i { width: 80%; height: 80%; }
.tos-modal.il-card { position: absolute; left: 0; bottom: 0; width: 44%; gap: 1.5cqw; padding: 2.8cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); font-family: var(--font-body); }
.tos-modal .il-head b { font-size: max(11px, 2.4cqw); }
.tos-modal__lines { display: grid; gap: 1cqw; margin: 0.4cqw 0; }
.tos-modal__lines span { height: max(4px, 0.9cqw); border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.tos-modal__lines span:nth-child(2) { width: 86%; }
.tos-modal__lines span:nth-child(3) { width: 64%; }
.tos-modal__chk { display: flex; align-items: center; gap: 1.4cqw; font-size: max(10px, 2.1cqw); font-weight: 500; color: #fff; }
.tos-modal .il-btn { padding: 1.8cqw; border-radius: 1.2cqw; background: var(--acc, #2b879e); font-family: var(--font-body); font-size: max(10.5px, 2.15cqw); }
/* 2) demonstração */
.tos-try { padding: 24px 0 80px; }
.tos-demo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; max-width: 1000px; margin-inline: auto; font-family: var(--font-body); }
.tos-ctrl { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); }
.tos-ctrl__head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.tos-sw { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.tos-sw__txt { display: grid; gap: 2px; flex: 1; }
.tos-sw__txt b { font-size: 14.5px; font-weight: 600; color: #fff; }
.tos-sw__txt small { font-size: 12.5px; color: var(--dim); }
.tos-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tos-sw input:checked + .tag-switch { background: var(--acc, #2b879e); }
.tos-sw input:checked + .tag-switch::after { transform: translateX(18px); }
.tos-sw input:focus-visible + .tag-switch { outline: 2px solid #fff; outline-offset: 2px; }
.tos-upd { display: grid; gap: 4px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line2); background: transparent; text-align: left; cursor: pointer; font-family: var(--font-body); transition: background-color 0.2s ease, border-color 0.2s ease; }
.tos-upd:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); }
.tos-upd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tos-upd:disabled { cursor: default; opacity: 0.45; }
.tos-upd b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #fff; }
.tos-upd b .i { font-size: 16px; color: var(--acc, #2b879e); }
.tos-upd small { font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.tos-log { min-height: 64px; margin: 2px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 14px; line-height: 1.45; color: var(--mut); }
.tos-log span { display: none; }
.tos-demo[data-s="gate"] .tos-log [data-k="gate"], .tos-demo[data-s="ok"] .tos-log [data-k="ok"], .tos-demo[data-s="new"] .tos-log [data-k="new"], .tos-demo[data-s="off"] .tos-log [data-k="off"] { display: inline; }
.tos-demo[data-s="ok"] .tos-log { background: rgba(63, 191, 127, 0.1); color: #8fe3b7; }
.tos-demo[data-s="new"] .tos-log { background: rgba(242, 167, 59, 0.12); color: #f5c27a; }
.tos-ctrl__note { margin: 0; font-size: 12.5px; color: var(--dim); }
.tos-area { position: relative; overflow: hidden; border-radius: 20px; background: #0c0c0c; border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9), 0 0 90px -54px var(--acc, #2b879e); }
.tos-area__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #141414; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: #fff; }
.tos-area__bar img { width: 18px; height: auto; }
.tos-area__bar .cert-ava { margin-left: auto; width: 26px; height: 26px; background: var(--acc, #2b879e); color: #fff; letter-spacing: 0; }
.tos-area__body { display: grid; gap: 14px; align-content: start; min-height: 320px; padding: 18px; transition: filter 0.35s ease, opacity 0.35s ease; }
.tos-area__hi { margin: 0; font-size: 18px; font-weight: 600; color: #fff; }
.tos-area__shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tos-area__shelf img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; object-position: center bottom; border-radius: 9px; }
.tos-demo[data-s="gate"] .tos-area__body, .tos-demo[data-s="new"] .tos-area__body { filter: blur(6px) brightness(0.5); }
.tos-gate { position: absolute; z-index: 2; left: 50%; top: calc(50% + 22px); display: grid; gap: 12px; width: min(86%, 360px); padding: 20px; border-radius: 16px; background: #18181b; border: 1px solid var(--line2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transform: translate(-50%, -46%); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.tos-demo[data-s="gate"] .tos-gate, .tos-demo[data-s="new"] .tos-gate { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.tos-gate__head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; }
.tos-gate__new { display: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: rgba(242, 167, 59, 0.16); font-size: 11.5px; font-weight: 600; color: #f2a73b; }
.tos-demo[data-s="new"] .tos-gate__new { display: inline-block; }
.tos-gate ol { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--mut); }
.tos-gate__chk { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; }
.tos-gate__chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--acc, #2b879e); cursor: pointer; }
.tos-gate__go { height: 44px; border: 0; border-radius: 11px; background: var(--acc, #2b879e); font: 600 14.5px/1.2 var(--font-body); color: #fff; cursor: pointer; transition: opacity 0.2s ease, filter 0.2s ease; }
.tos-gate__go:hover:not(:disabled) { filter: brightness(1.1); }
.tos-gate__go:focus-visible, .tos-gate__chk input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tos-gate__go:disabled { cursor: not-allowed; opacity: 0.4; }
/* 3) cláusulas */
.tos-ideas { padding: 8px 0 80px; }
.tos-ideas__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.tos-clauses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; font-family: var(--font-body); }
.tos-clause { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 16px; background: var(--surf); border: 1px solid var(--line); }
.tos-clause__n { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--acc, #2b879e); }
.tos-clause b { font-size: 15.5px; font-weight: 600; color: #fff; }
.tos-clause p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mut); }
@media (max-width: 1099px) {
  .tos-ideas__head p { margin-inline: auto; text-align: center; }
}
@media (max-width: 899px) {
  .tos-demo { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .tos-clauses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tos-stage { aspect-ratio: 560 / 470; }
  .tos-modal.il-card { width: 52%; }
  .tos-area__shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tos-area__shelf img:nth-child(n + 4) { display: none; }
  .tos-clauses { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tos-area__body, .tos-gate { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .tos-ed__bar, .rec-page--light .tos-area__bar { background: #f6f6f8; }
.rec-page--light .tos-ed__bar b, .rec-page--light .tos-ctrl__head, .rec-page--light .tos-sw__txt b, .rec-page--light .tos-upd b, .rec-page--light .tos-clause b, .rec-page--light .tos-area__hi { color: #15151a; }
.rec-page--light .tos-text { color: #2a2a33; }
.rec-page--light .tos-modal.il-card, .rec-page--light .tos-ctrl, .rec-page--light .tos-area { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }

/* Página Sistema de personalização: três seções com cara própria.
   1) "Aparência e informações do seu jeito": a tela de login do club com as cores
      escolhidas (larga, em cima à direita) e, na frente, o cartão "Cores e temas"
      do painel com os campos reais e os valores padrão (embaixo à esquerda).
   2) "Monte o visual da sua área": editor ao vivo. O visitante troca o título, as
      duas cores do degradê e o tema, e a prévia muda na hora (o script só ajusta
      variáveis CSS e escreve o título com textContent).
   3) "Muito além das cores": as outras opções reais em blocos (título e rodapé,
      vídeo de boas-vindas, tela de login, botões e páginas no menu). */
.cz-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 440; }
.cz-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 60% 42%, rgba(218, 24, 76, 0.22), transparent); }
.cz-login { --g1: #da184c; --g2: #cc7e39; }
.cz-login__body { position: relative; display: grid; place-items: center; height: 58cqw; overflow: hidden; background: radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, var(--g2) 30%, transparent), transparent 70%), radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--g1) 34%, transparent), transparent 70%), #050505; }
.cz-login__form { display: grid; gap: 1.6cqw; width: 50%; margin-left: 30%; padding: 3cqw; border-radius: 2cqw; background: #101010; border: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--font-body); }
.cz-login__brand { display: flex; align-items: center; gap: 1.4cqw; font-size: max(10px, 2.2cqw); font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.cz-logo { display: grid; place-items: center; flex: none; width: max(18px, 4cqw); height: max(18px, 4cqw); border-radius: 22%; background: linear-gradient(135deg, var(--g1), var(--g2)); font-size: max(10px, 2.2cqw); font-weight: 800; color: #fff; }
.cz-login__field { padding: 1.4cqw 1.8cqw; border-radius: 1.2cqw; background: rgba(255, 255, 255, 0.06); font-size: max(9px, 1.9cqw); color: rgba(255, 255, 255, 0.45); }
.cz-grad-btn { display: grid; place-items: center; padding: 1.7cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, var(--g1), var(--g2)); font-size: max(10px, 2.1cqw); font-weight: 600; color: #fff; }
.cz-colors.il-card { position: absolute; left: 0; bottom: 0; width: 44%; gap: 1.2cqw; padding: 2.6cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); font-family: var(--font-body); }
.cz-colors .il-head b { font-size: max(11px, 2.3cqw); }
.cz-field { display: grid; gap: 0.6cqw; }
.cz-field small { font-size: max(8.5px, 1.75cqw); color: var(--dim); }
.cz-hexrow { display: flex; align-items: center; overflow: hidden; border-radius: 1.2cqw; background: rgba(255, 255, 255, 0.05); font-family: var(--font-tag); font-size: max(9px, 1.9cqw); color: rgba(255, 255, 255, 0.85); }
.cz-hexrow i { flex: none; width: max(16px, 3.6cqw); align-self: stretch; }
.cz-hexrow span { padding: 1.1cqw 1.6cqw; }
.cz-themes { display: flex; gap: 1.6cqw; margin-top: 0.6cqw; font-size: max(9px, 1.9cqw); font-weight: 600; color: #fff; }
.cz-themes span { display: inline-flex; align-items: center; gap: 1cqw; }
.cz-themes i { width: max(12px, 2.6cqw); height: max(12px, 2.6cqw); border-radius: 0.6cqw; border: 1px solid rgba(255, 255, 255, 0.5); background: #111; }
.cz-themes span:last-child { color: var(--dim); }
.cz-themes span:last-child i { background: #e8e8ea; }
.cz-themes span:first-child i { box-shadow: 0 0 0 2px #fff; }
/* 2) editor ao vivo */
.cz-try { padding: 24px 0 80px; }
.cz-demo { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 22px; align-items: start; max-width: 1040px; margin-inline: auto; font-family: var(--font-body); }
.cz-ctrl { display: grid; gap: 16px; padding: 20px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); }
.cz-ctrl__head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.cz-lbl { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.cz-lbl > input[type="text"] { width: 100%; height: 44px; padding: 0 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 15px/1.2 var(--font-body); color: #fff; outline: none; }
.cz-lbl > input[type="text"]:focus-visible { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.cz-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-preset { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.cz-preset:hover { transform: scale(1.06); }
.cz-preset[aria-pressed="true"] { border-color: #fff; }
.cz-preset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cz-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cz-pick { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); cursor: pointer; font-family: var(--font-tag); font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.cz-pick input { width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.cz-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.cz-pick input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.cz-pick input::-moz-color-swatch { border: 0; border-radius: 8px; }
.cz-pick input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cz-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.cz-seg label { position: relative; display: grid; place-items: center; padding: 9px; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.cz-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cz-seg label:has(input:checked) { background: #fff; color: #15151a; font-weight: 600; }
.cz-seg label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.cz-ctrl__note { margin: 0; font-size: 12.5px; color: var(--dim); }
.cz-prev { --g1: #da184c; --g2: #cc7e39; --bg: #0d0d0d; --tx: #ffffff; --mu: rgba(255, 255, 255, 0.6); --cd: rgba(255, 255, 255, 0.06); --ln: rgba(255, 255, 255, 0.08); overflow: hidden; border-radius: 20px; background: var(--bg); color: var(--tx); border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9), 0 0 90px -50px var(--g1); transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.cz-prev.is-light { --bg: #f3f3f5; --tx: #15151a; --mu: rgba(21, 21, 26, 0.6); --cd: #ffffff; --ln: rgba(21, 21, 26, 0.08); }
.cz-prev__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ln); }
.cz-prev__bar .cz-logo { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.cz-prev__bar b { overflow: hidden; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; text-overflow: ellipsis; }
.cz-prev__search { flex: 1; max-width: 220px; height: 28px; margin-left: auto; border-radius: 999px; background: var(--cd); border: 1px solid var(--ln); }
.cz-prev__bar .cert-ava { width: 28px; height: 28px; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; }
.cz-prev__body { display: grid; gap: 16px; padding: 18px; }
.cz-prev__hero { position: relative; display: grid; gap: 10px; justify-items: start; padding: 22px; border-radius: 16px; overflow: hidden; background: linear-gradient(120deg, var(--g1), var(--g2)); color: #fff; }
.cz-prev__hero small { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.cz-prev__hero b { font-size: 21px; font-weight: 600; line-height: 1.2; }
.cz-prev__hero span { padding: 9px 16px; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; color: #15151a; }
.cz-prev__lbl { font-size: 14px; font-weight: 600; }
.cz-prev__shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cz-prev__c { display: grid; gap: 7px; }
.cz-prev__c img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: center bottom; border-radius: 10px; }
.cz-prev__c i { display: block; height: 4px; border-radius: 999px; background: var(--ln); overflow: hidden; }
.cz-prev__c i::after { content: ""; display: block; width: var(--p, 40%); height: 100%; background: linear-gradient(90deg, var(--g1), var(--g2)); }
/* 3) muito além das cores */
.cz-more { padding: 8px 0 80px; }
.cz-more__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.cz-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; font-family: var(--font-body); }
.cz-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); }
.cz-box h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.cz-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mut); }
.cz-vis { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #0c0c0c; border: 1px solid var(--line); font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.cz-tab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px 10px 0 0; background: #1c1c1f; font-size: 12.5px; }
.cz-tab .cz-logo { --g1: #da184c; --g2: #cc7e39; width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
.cz-tab span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cz-vis small { color: var(--dim); }
.cz-vis__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.cz-pop { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
.cz-pop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.cz-pop .i { position: relative; padding: 10px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #15151a; font-size: 16px; fill: currentColor; }
.cz-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-srcs span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; color: var(--mut); }
.cz-mini-login { --g1: #da184c; --g2: #cc7e39; display: grid; gap: 7px; padding: 14px; border-radius: 10px; background: radial-gradient(80% 80% at 100% 0%, rgba(204, 126, 57, 0.3), transparent 70%), #050505; }
.cz-mini-login span:not(.cz-grad-btn) { height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); }
.cz-mini-login .cz-grad-btn { padding: 7px; border-radius: 7px; font-size: 12px; }
.cz-menu { display: grid; gap: 6px; }
.cz-menu span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); }
.cz-menu .i { flex: none; font-size: 14px; color: var(--dim); }
.cz-menu span.is-new { background: color-mix(in srgb, var(--acc, #e03a8d) 18%, transparent); color: #fff; font-weight: 600; }
.cz-menu span.is-new .i { color: var(--acc, #e03a8d); }
.cz-menu span.is-add { justify-content: center; border: 1px dashed var(--line2); background: transparent; color: var(--dim); }
@media (max-width: 1099px) {
  .cz-more__head p { margin-inline: auto; text-align: center; }
}
@media (max-width: 899px) {
  .cz-demo { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .cz-bento { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .cz-stage { aspect-ratio: 560 / 540; }
  .cz-colors.il-card { width: 54%; }
  .cz-prev__shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-prev__shelf .cz-prev__c:nth-child(4) { display: none; }
  .cz-prev__search { display: none; }
  .cz-prev__bar .cert-ava { margin-left: auto; }
  .cz-box { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cz-prev, .cz-preset { transition: none; }
}
/* tema claro da página (rec-page--light) */
.rec-page--light .cz-colors.il-card, .rec-page--light .cz-ctrl { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .cz-ctrl__head, .rec-page--light .cz-box h3 { color: #15151a; }
.rec-page--light .cz-lbl > input[type="text"] { background: #f6f6f8; color: #15151a; }

/* Campanhas e Mensagens, versão 2: no lugar dos três blocos, duas seções novas.
   2) "Monte uma campanha": compositor ao vivo com as três partes da tela real
      (quem recebe, conteúdo, agendamento). O e-mail ao lado e o total de mensagens
      mudam enquanto o visitante escreve; "Enviar campanha" coloca a campanha no
      histórico da seção seguinte. Sem <form>; o script escreve com textContent.
   3) "Campanhas dos últimos 60 dias": o resumo de campanhas, como no painel. */
.cmp-try { padding: 24px 0 80px; }
.cmp-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; max-width: 1040px; margin-inline: auto; font-family: var(--font-body); }
.cmp-steps { display: grid; gap: 12px; }
.cmp-step { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: #101010; border: 1px solid var(--line2); }
.cmp-step__head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.cmp-step__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--acc, #f2a73b); font-size: 13px; font-weight: 700; color: #241503; }
.cmp-segs { display: grid; gap: 8px; }
.cmp-seg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line2); background: transparent; font: 500 14px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.85); text-align: left; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.cmp-seg:hover { background: rgba(255, 255, 255, 0.04); }
.cmp-seg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cmp-seg__box { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line2); color: transparent; font-size: 12px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.cmp-seg[aria-pressed="true"] { border-color: color-mix(in srgb, var(--acc, #f2a73b) 60%, transparent); background: color-mix(in srgb, var(--acc, #f2a73b) 10%, transparent); color: #fff; }
.cmp-seg[aria-pressed="true"] .cmp-seg__box { background: var(--acc, #f2a73b); border-color: var(--acc, #f2a73b); color: #241503; }
.cmp-seg__n { margin-left: auto; font-family: var(--font-tag); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--dim); }
.cmp-f { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.cmp-f small { font-weight: 400; color: var(--dim); }
.cmp-f input, .cmp-f textarea { width: 100%; padding: 11px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 15px/1.4 var(--font-body); color: #fff; outline: none; resize: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cmp-f textarea { height: 78px; }
.cmp-f input::placeholder, .cmp-f textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.cmp-f input:focus-visible, .cmp-f textarea:focus-visible { border-color: var(--acc, #f2a73b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #f2a73b) 24%, transparent); }
.cmp-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.cmp-when label { position: relative; display: grid; place-items: center; padding: 10px 8px; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.cmp-when input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp-when label:has(input:checked) { background: var(--acc, #f2a73b); color: #241503; font-weight: 600; }
.cmp-when label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.cmp-side { position: sticky; top: 96px; display: grid; gap: 12px; }
.cmp-mail { overflow: hidden; border-radius: 18px; background: #0c0c0c; border: 1px solid var(--line2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.9), 0 0 90px -54px var(--acc, #f2a73b); }
.cmp-mail__from { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #141414; border-bottom: 1px solid var(--line); }
.cmp-mail__from .camp-ava { width: 34px; height: 34px; font-size: 12px; }
.cmp-mail__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cmp-mail__who b { font-size: 14px; font-weight: 600; color: #fff; }
.cmp-mail__who small { font-size: 12px; color: var(--dim); }
.cmp-mail__from > .i { flex: none; font-size: 16px; color: var(--dim); }
.cmp-mail__body { display: grid; gap: 12px; justify-items: start; padding: 22px 22px 26px; }
.cmp-mail__h { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.cmp-mail__p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); white-space: pre-line; overflow-wrap: anywhere; }
.cmp-mail__btn { padding: 11px 20px; border-radius: 10px; background: var(--acc, #f2a73b); font-size: 14.5px; font-weight: 600; color: #241503; overflow-wrap: anywhere; }
.cmp-mail__btn[hidden] { display: none; }
.cmp-sum { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: #101010; border: 1px solid var(--line2); }
.cmp-sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mut); }
.cmp-sum__row b { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.cmp-send { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-top: 2px; border: 0; border-radius: 12px; background: var(--acc, #f2a73b); font: 600 15px/1.2 var(--font-body); color: #241503; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; }
.cmp-send:hover { filter: brightness(1.06); }
.cmp-send:active { transform: scale(0.98); }
.cmp-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cmp-send .i { font-size: 17px; }
.cmp-res { min-height: 20px; margin: 0; font-size: 13.5px; font-weight: 500; }
.cmp-res span { display: none; }
.cmp-demo[data-r="sent"] .cmp-res [data-k="sent"], .cmp-demo[data-r="sched"] .cmp-res [data-k="sched"], .cmp-demo[data-r="none"] .cmp-res [data-k="none"] { display: inline; }
.cmp-demo[data-r="sent"] .cmp-res, .cmp-demo[data-r="sched"] .cmp-res { color: #8fe3b7; }
.cmp-demo[data-r="none"] .cmp-res { color: #ffb0b0; }
.cmp-res a { color: inherit; text-underline-offset: 3px; }
.cmp-note { margin: 0; font-size: 12.5px; color: var(--dim); }
/* 3) histórico */
.cmp-hist { padding: 8px 0 80px; }
.cmp-hist__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.cmp-table { margin-top: 26px; overflow: hidden; border-radius: 18px; background: #101010; border: 1px solid var(--line2); font-family: var(--font-body); }
.cmp-tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 0.9fr); align-items: center; gap: 14px; padding: 15px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mut); }
.cmp-tr:first-child { border-top: 0; }
.cmp-tr.is-head { padding-block: 12px; background: rgba(255, 255, 255, 0.03); font-size: 12.5px; font-weight: 600; color: var(--dim); }
.cmp-tr b { overflow: hidden; display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.cmp-tr b .i { flex: none; font-size: 16px; color: var(--acc, #f2a73b); }
.cmp-tr b span { overflow: hidden; text-overflow: ellipsis; }
.cmp-tr .cmp-num { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }
.cmp-st { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cmp-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cmp-st.is-sent { background: rgba(63, 191, 127, 0.14); color: #6ee7a1; }
.cmp-st.is-sched { background: rgba(242, 167, 59, 0.16); color: #f2a73b; }
.cmp-st.is-going { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.cmp-tr.is-new { animation: cmp-flash 2.4s ease both; }
@keyframes cmp-flash { 0% { background: color-mix(in srgb, var(--acc, #f2a73b) 22%, transparent); } 100% { background: transparent; } }
@media (max-width: 1099px) {
  .cmp-hist__head p { margin-inline: auto; text-align: center; }
}
@media (max-width: 899px) {
  .cmp-demo { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .cmp-side { position: static; }
}
@media (max-width: 640px) {
  .cmp-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .cmp-tr.is-head { display: none; }
  .cmp-tr > :nth-child(2) { grid-column: 1; grid-row: 2; font-size: 13px; }
  .cmp-tr > :nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .cmp-tr > :nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-tr.is-new { animation: none; }
  .cmp-seg, .cmp-seg__box, .cmp-send { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .cmp-step, .rec-page--light .cmp-sum, .rec-page--light .cmp-mail, .rec-page--light .cmp-table { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .cmp-step__head, .rec-page--light .cmp-mail__h, .rec-page--light .cmp-mail__who b, .rec-page--light .cmp-sum__row b, .rec-page--light .cmp-tr b { color: #15151a; }
.rec-page--light .cmp-mail__from { background: #f6f6f8; }
.rec-page--light .cmp-mail__p { color: #4a4a55; }
.rec-page--light .cmp-f input, .rec-page--light .cmp-f textarea { background: #f6f6f8; color: #15151a; }

/* Página Comunidades: três seções com cara própria, a partir das telas reais.
   1) "Vá além da entrega de vídeos": a lista "Minhas comunidades" (larga, em cima à
      direita: capa, nome, contadores e Acessar) e, na frente, um post fixado do
      feed (embaixo à esquerda).
   2) "Entre na comunidade": feed ao vivo. Categorias filtram os posts, o visitante
      publica um post e curte os dos outros. O script cria o post com textContent.
   3) "Uma comunidade para cada turma": comunidades por plano e o limite de cada um. */
.cm-stage { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 500; }
.cm-stage::before { content: ""; position: absolute; z-index: -1; inset: -8% -4%; pointer-events: none; background: radial-gradient(closest-side at 58% 42%, color-mix(in srgb, var(--acc, #da1a47) 22%, transparent), transparent); }
.cm-list__bar { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; background: #141414; border-bottom: 1px solid var(--line); }
.cm-list__bar b { flex: 1; font-size: max(11px, 2.35cqw); font-weight: 600; color: #fff; }
.cm-list__rows { display: grid; gap: 1.2cqw; padding: 2.2cqw 2.6cqw 2.6cqw; }
.cm-crow { display: flex; align-items: center; gap: 2cqw; padding: 1.4cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, 0.035); font-family: var(--font-body); }
.cm-crow img { flex: none; width: 15cqw; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1cqw; }
.cm-crow__txt { display: grid; gap: 0.6cqw; flex: 1; min-width: 0; }
.cm-crow__txt b { font-size: max(10.5px, 2.2cqw); font-weight: 600; color: #fff; }
.cm-crow__meta { display: flex; gap: 1.4cqw; font-size: max(8.5px, 1.75cqw); color: var(--dim); }
.cm-crow__meta span { display: inline-flex; align-items: center; gap: 0.6cqw; }
.cm-crow__meta .i { width: 1.1em; height: 1.1em; }
.cm-go { flex: none; padding: 1.2cqw 2.2cqw; border-radius: 1cqw; background: var(--acc, #da1a47); font-size: max(9px, 1.85cqw); font-weight: 600; color: #fff; }
.cm-post.il-card { position: absolute; left: 0; bottom: 0; width: 44%; gap: 1.4cqw; padding: 2.4cqw; border-radius: 3cqw; background: #171719; border-color: var(--line2); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85); font-family: var(--font-body); }
.cm-who { display: flex; align-items: center; gap: 1.6cqw; }
.cm-who .cert-ava { width: max(22px, 5cqw); height: max(22px, 5cqw); background: var(--acc, #da1a47); color: #fff; font-size: max(8px, 1.7cqw); }
.cm-who__t { display: grid; gap: 0.3cqw; min-width: 0; }
.cm-who__t b { font-size: max(10px, 2.05cqw); font-weight: 600; color: #fff; }
.cm-who__t small { font-size: max(8.5px, 1.7cqw); color: var(--dim); }
.cm-pin { margin-left: auto; padding: 0.5cqw 1.4cqw; border-radius: 999px; background: var(--acc, #da1a47); font-size: max(8px, 1.6cqw); font-weight: 700; color: #fff; }
.cm-post__h { margin: 0; font-size: max(11px, 2.4cqw); font-weight: 600; line-height: 1.3; color: #fff; }
.cm-post__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.4cqw; }
.cm-acts { display: flex; gap: 2.4cqw; font-size: max(9px, 1.85cqw); color: var(--dim); }
.cm-acts span { display: inline-flex; align-items: center; gap: 0.8cqw; }
.cm-acts .i { width: 1.15em; height: 1.15em; }
.cm-acts span:first-child .i { color: #ff6b81; }
/* 2) feed ao vivo */
.cm-try { padding: 24px 0 80px; }
.cm-feed { display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px; gap: 16px; align-items: start; max-width: 1100px; margin-inline: auto; font-family: var(--font-body); }
.cm-box { padding: 16px; border-radius: 18px; background: #101010; border: 1px solid var(--line2); }
.cm-cats { display: grid; gap: 4px; }
.cm-cats__t { margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--dim); }
.cm-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; font: 500 14px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.78); text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.cm-cat .i { flex: none; font-size: 16px; color: var(--dim); }
.cm-cat:hover { background: rgba(255, 255, 255, 0.05); }
.cm-cat[aria-pressed="true"] { background: var(--acc, #da1a47); color: #fff; font-weight: 600; }
.cm-cat[aria-pressed="true"] .i { color: #fff; }
.cm-cat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-main { display: grid; gap: 12px; }
.cm-comp { display: grid; gap: 10px; }
.cm-comp__row { display: flex; gap: 12px; }
.cm-comp__row .cert-ava { flex: none; width: 34px; height: 34px; background: #3a3a40; color: #fff; font-size: 12px; }
.cm-comp textarea { flex: 1; min-width: 0; height: 64px; padding: 10px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 14.5px/1.45 var(--font-body); color: #fff; outline: none; resize: none; }
.cm-comp textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.cm-comp textarea:focus-visible { border-color: var(--acc, #da1a47); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #da1a47) 24%, transparent); }
.cm-comp__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 46px; }
.cm-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; font: 500 12.5px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.75); cursor: pointer; }
.cm-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--acc, #da1a47) 70%, transparent); background: color-mix(in srgb, var(--acc, #da1a47) 16%, transparent); color: #fff; }
.cm-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-pub { margin-left: auto; padding: 9px 18px; border: 0; border-radius: 10px; background: var(--acc, #da1a47); font: 600 14px/1.2 var(--font-body); color: #fff; cursor: pointer; transition: filter 0.2s ease, opacity 0.2s ease; }
.cm-pub:hover:not(:disabled) { filter: brightness(1.1); }
.cm-pub:disabled { opacity: 0.4; cursor: not-allowed; }
.cm-pub:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-posts { display: grid; gap: 12px; }
.cm-p { display: grid; gap: 10px; }
.cm-p .cm-who .cert-ava { width: 34px; height: 34px; font-size: 12px; }
.cm-p .cm-who__t b { font-size: 14px; }
.cm-p .cm-who__t small { font-size: 12px; }
.cm-p .cm-pin { padding: 3px 10px; font-size: 11px; }
.cm-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 12px; font-weight: 600; color: var(--mut); }
.cm-p__txt { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); white-space: pre-line; overflow-wrap: anywhere; }
.cm-p__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 12px; }
.cm-p__acts { display: flex; gap: 8px; }
.cm-like, .cm-com { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; font: 500 13px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.78); }
.cm-like { cursor: pointer; }
.cm-like .i, .cm-com .i { font-size: 15px; }
.cm-like[aria-pressed="true"] { border-color: rgba(255, 107, 129, 0.5); background: rgba(255, 107, 129, 0.12); color: #ff8fa0; }
.cm-like[aria-pressed="true"] .i { fill: currentColor; }
.cm-like:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-p.is-new { animation: cm-in 0.45s ease both; }
@keyframes cm-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.cm-feed[data-cat="avisos"] .cm-p:not([data-cat="avisos"]), .cm-feed[data-cat="duvidas"] .cm-p:not([data-cat="duvidas"]), .cm-feed[data-cat="conquistas"] .cm-p:not([data-cat="conquistas"]) { display: none; }
.cm-side { display: grid; gap: 12px; }
.cm-online { display: grid; gap: 10px; }
.cm-online__avas { display: flex; }
.cm-online__avas img { width: 32px; height: 32px; margin-right: -9px; border-radius: 50%; border: 2px solid #101010; object-fit: cover; }
.cm-online b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.cm-online b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; box-shadow: 0 0 8px #3fbf7f; }
.cm-side__t { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--dim); }
.cm-lesson { display: grid; gap: 8px; }
.cm-lesson img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; border-radius: 10px; }
.cm-lesson b { font-size: 14px; font-weight: 600; color: #fff; }
.cm-lesson small { font-size: 12.5px; color: var(--dim); }
.cm-note { margin: 4px 2px 0; font-size: 12.5px; color: var(--dim); }
/* 3) comunidades por plano */
.cm-plans { padding: 8px 0 80px; }
.cm-plans__head p { max-width: 560px; margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--mut); }
.cm-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; font-family: var(--font-body); }
.cm-room { overflow: hidden; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); }
.cm-room img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.cm-room__b { display: grid; gap: 8px; padding: 16px 18px 18px; }
.cm-room__b b { font-size: 16px; font-weight: 600; color: #fff; }
.cm-room__b p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mut); }
.cm-room__who { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.cm-room__who .i { font-size: 14px; color: var(--acc, #da1a47); }
.cm-limits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-family: var(--font-body); font-size: 14px; color: var(--mut); }
.cm-limits span { padding: 6px 12px; border-radius: 999px; background: var(--surf); border: 1px solid var(--line); }
.cm-limits b { color: #fff; font-weight: 600; }
.cm-limits a { margin-left: 4px; font-weight: 600; color: #fff; text-underline-offset: 4px; }
@media (max-width: 1099px) {
  .cm-feed { grid-template-columns: 180px minmax(0, 1fr); }
  .cm-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-plans__head p { margin-inline: auto; text-align: center; }
  .cm-limits { justify-content: center; }
}
@media (max-width: 760px) {
  .cm-feed { grid-template-columns: minmax(0, 1fr); }
  .cm-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  .cm-cats__t { display: none; }
  .cm-cat { flex: none; width: auto; }
  .cm-side { grid-template-columns: minmax(0, 1fr); }
  .cm-rooms { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
  .cm-comp__foot { padding-left: 0; }
}
@media (max-width: 600px) {
  .cm-stage { aspect-ratio: 560 / 640; }
  .cm-post.il-card { width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-p.is-new { animation: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .cm-list__bar { background: #f6f6f8; }
.rec-page--light .cm-list__bar b, .rec-page--light .cm-crow__txt b, .rec-page--light .cm-who__t b, .rec-page--light .cm-post__h, .rec-page--light .cm-p__txt, .rec-page--light .cm-online b, .rec-page--light .cm-lesson b, .rec-page--light .cm-room__b b { color: #15151a; }
.rec-page--light .cm-post.il-card, .rec-page--light .cm-box { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .cm-comp textarea { background: #f6f6f8; color: #15151a; }

/* Revisão mobile das páginas de recursos (alvos de toque e textos mínimos). */
/* área de clique maior nos links finos, sem mudar o visual */
.rec-crumb a, .rec-all, .adm-seats__more, .cm-limits a { position: relative; }
.rec-crumb a::after, .rec-all::after, .adm-seats__more::after, .cm-limits a::after { content: ""; position: absolute; inset: -12px -8px; }
/* controles das demonstrações com pelo menos 36px de altura */
.push-who label, .cz-seg label { padding-block: 11px; }
.tos-gate__chk { padding-block: 9px; }
.cm-chip { padding: 10px 14px; }
.cm-pub { padding: 11px 18px; }
.cm-like, .cm-com { padding: 10px 13px; }
/* textos que ficavam pequenos demais nos celulares */
.push-stage .push-n__top b, .push-stage .push-n__top small { font-size: max(6.5px, calc(var(--sw) * 0.034)); }
.push-stage .push-n__h { font-size: max(8px, calc(var(--sw) * 0.042)); }
.push-stage .push-n__txt { font-size: max(7.5px, calc(var(--sw) * 0.038)); }
.push-stage .push-n__ic { width: max(16px, calc(var(--sw) * 0.12)); height: max(16px, calc(var(--sw) * 0.12)); }
.drm-stage .drm-page__kick, .drm-stage .drm-page__foot { font-size: max(7px, 0.72em); }
@media (max-width: 600px) {
  /* a altura do palco vem do próprio iPhone (sem sobra embaixo) */
  .push-stage { max-width: 400px; aspect-ratio: auto; }
  .push-stage .iphone { --sw: 42cqw; position: relative; left: auto; top: auto; }
  .push-hist.lang-win { width: 57%; top: 14%; }
  .push-hist__rows { padding-left: 5cqw; }
}

/* Hospedagem de vídeos, versão 2: no lugar dos três blocos, uma biblioteca de
   vídeos que funciona. O visitante envia um vídeo (enviando, processando, pronto),
   busca pelo nome, ordena a lista e clica numa aula para ver no player ao lado.
   O script só reordena, filtra e troca classes; os textos entram com textContent. */
.vl-try { padding: 24px 0 80px; }
.vl-demo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; align-items: start; max-width: 1040px; margin-inline: auto; font-family: var(--font-body); }
.vl-box { padding: 18px; border-radius: 20px; background: #101010; border: 1px solid var(--line2); }
.vl-lib { display: grid; gap: 12px; }
.vl-lib__bar { display: flex; gap: 10px; }
.vl-search { position: relative; flex: 1; min-width: 0; }
.vl-search .i { position: absolute; left: 13px; top: 50%; font-size: 16px; color: var(--dim); transform: translateY(-50%); pointer-events: none; }
.vl-search input { width: 100%; height: 44px; padding: 0 14px 0 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line2); font: 400 15px/1.2 var(--font-body); color: #fff; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.vl-search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.vl-search input:focus-visible { border-color: var(--acc, #7c5cff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #7c5cff) 26%, transparent); }
.vl-up { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--acc, #7c5cff); font: 600 14.5px/1.2 var(--font-body); color: #fff; cursor: pointer; transition: filter 0.2s ease, opacity 0.2s ease, transform 0.15s ease; }
.vl-up:hover:not(:disabled) { filter: brightness(1.1); }
.vl-up:active:not(:disabled) { transform: scale(0.98); }
.vl-up:disabled { opacity: 0.5; cursor: default; }
.vl-up:focus-visible, .vl-sort button:focus-visible, .vl-row:focus-visible, .vl-pbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vl-up .i { font-size: 16px; }
.vl-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.vl-sort button { padding: 10px 6px; border: 0; border-radius: 9px; background: transparent; font: 500 13.5px/1.2 var(--font-body); color: rgba(255, 255, 255, 0.75); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.vl-sort button[aria-pressed="true"] { background: #fff; color: #15151a; font-weight: 600; }
.vl-list { display: grid; gap: 8px; }
.vl-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 13px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); font-family: var(--font-body); color: #fff; text-align: left; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.vl-row:hover { background: rgba(255, 255, 255, 0.07); }
.vl-row[aria-current="true"] { border-color: color-mix(in srgb, var(--acc, #7c5cff) 70%, transparent); background: color-mix(in srgb, var(--acc, #7c5cff) 14%, transparent); }
.vl-row[hidden] { display: none; }
.vl-row.is-busy { cursor: default; }
.vl-row img { display: block; width: 76px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; border-radius: 8px; background: #1b1b1f; }
.vl-row__t { display: grid; gap: 3px; min-width: 0; }
.vl-row__t b { overflow: hidden; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.vl-row__t small { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--dim); }
.vl-row__bar { display: none; height: 4px; margin-top: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vl-row__bar i { display: block; width: 100%; height: 100%; background: var(--acc, #7c5cff); transform: scaleX(0); transform-origin: left center; }
.vl-row.is-busy .vl-row__bar { display: block; }
.vl-row.is-new { animation: cm-in 0.4s ease both; }
.vl-st { display: grid; }
.vl-st > span { grid-area: 1 / 1; justify-self: end; visibility: hidden; }
.vl-row[data-st="up"] .vl-st > [data-k="up"], .vl-row[data-st="proc"] .vl-st > [data-k="proc"], .vl-row[data-st="ok"] .vl-st > [data-k="ok"] { visibility: visible; }
.vl-empty { display: none; padding: 16px; border-radius: 12px; border: 1px dashed var(--line2); text-align: center; font-size: 14px; color: var(--dim); }
.vl-demo.is-empty .vl-empty { display: block; }
.vl-side { position: sticky; top: 96px; display: grid; gap: 12px; }
.vl-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.vl-player > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vl-player::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); pointer-events: none; }
.vl-pbtn { position: absolute; z-index: 2; left: 50%; top: 46%; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: var(--acc, #7c5cff); color: #fff; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc, #7c5cff) 26%, transparent), 0 16px 30px -12px rgba(0, 0, 0, 0.8); transition: opacity 0.25s ease, transform 0.2s ease; }
.vl-pbtn .i { font-size: 24px; margin-left: 4px; fill: currentColor; }
.vl-demo.is-playing .vl-pbtn { opacity: 0; }
.vl-demo.is-playing .vl-player:hover .vl-pbtn, .vl-demo.is-playing .vl-pbtn:focus-visible { opacity: 1; }
.vl-ctrl { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; }
.vl-ctrl span:first-child { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.vl-ctrl i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0.04); transform-origin: left center; }
.vl-demo.is-playing .vl-ctrl i { animation: vl-prog 14s linear forwards; }
@keyframes vl-prog { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
.vl-now { display: grid; gap: 4px; }
.vl-now b { font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.vl-now small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--dim); }
.vl-now .il-pill { font-size: 12px; }
.vl-note { margin: 0; font-size: 12.5px; color: var(--dim); }
@media (max-width: 899px) {
  .vl-row__t b { white-space: normal; line-height: 1.25; }
}
/* tablet continua lado a lado; no celular o player sobe para cima da lista */
@media (max-width: 720px) {
  .vl-demo { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .vl-side { position: static; order: -1; }
}
@media (max-width: 480px) {
  .vl-lib__bar { flex-wrap: wrap; }
  .vl-up { width: 100%; justify-content: center; }
  .vl-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
  .vl-row img { width: 64px; }
  .vl-sort button { font-size: 13px; }
  .vl-row__t b { white-space: normal; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-row.is-new, .vl-demo.is-playing .vl-ctrl i { animation: none; }
  .vl-pbtn, .vl-row { transition: none; }
}
/* tema claro (rec-page--light) */
.rec-page--light .vl-box { background: #fff; box-shadow: 0 26px 50px -30px rgba(21, 21, 26, 0.35); }
.rec-page--light .vl-row { color: #15151a; }
.rec-page--light .vl-now b { color: #15151a; }
.rec-page--light .vl-search input { background: #f6f6f8; color: #15151a; }

/* Hospedagem de vídeos: "Visão geral" só com texto, centralizado
   (a ilustração do envio saiu; o vídeo do topo já mostra o painel) */
@media (min-width: 1100px) {
  .rec-page .rec-about__grid--solo { grid-template-columns: minmax(0, 1fr); }
  .rec-about__grid--solo .rec-about__copy { text-align: center; }
  .rec-about__grid--solo .rec-about__p, .rec-about__grid--solo .rec-h2--lg { margin-inline: auto; }
}