@charset "UTF-8";

/* --------------------------------------------------------------------------
   0. Fonte hospedada aqui, não no Google
   O arquivo vive em assets/fonts/. Se ele não estiver lá, o navegador
   simplesmente pula para a próxima fonte da pilha (a nativa do aparelho) e o
   site continua legível — ver assets/fonts/LEIA-ME.txt.
   `font-display: swap` garante que o texto apareça na fonte do sistema desde o
   primeiro quadro, sem período em branco.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  /* `optional`, e não `swap`: com swap o texto trocava de fonte depois de
     desenhado e isso movia o layout (CLS de 0,036 medido na Política de
     Privacidade em 14/09/2026). Com `optional` o navegador usa a Inter só se
     ela chegar a tempo; se não chegar, mantém a fonte do sistema naquela
     visita e usa a Inter da próxima, já em cache. Nunca desloca nada e nunca
     atrasa a renderização. */
  font-display: optional;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-variable-latin.woff2") format("woff2");
  /* Precisa bater com o recorte do arquivo: o .woff2 tem 347 glifos, latim
     básico + latim-1 + pontuação geral. Declarar faixa a mais faz o navegador
     baixar a fonte por causa de um caractere que não existe dentro dela. */
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2000-206F,
                 U+20AC, U+2122, U+2212;
}
/* --------------------------------------------------------------------------
   1. Tokens de marca — paleta oficial uSign
   Manual de aplicação do logotipo (2019): roxo #3E2367 e branco.
   O laranja vem da marca-mãe JBtec e é usado apenas como cor de ação.
   -------------------------------------------------------------------------- */
:root {
  /* Roxo uSign — #3e2367 é a cor oficial do logotipo */
  --brand-900: #180d2a;
  --brand-800: #291648;
  --brand-700: #3e2367;
  --brand-600: #4d2c80;
  --brand-500: #63399f;
  --brand-400: #8a63c6;
  --brand-300: #b79bde;
  --brand-100: #e7ddf6;
  --brand-50:  #f6f2fd;

  /* Laranja JBtec — cor de ação */
  --accent-600: #c2410c;
  --accent-500: #ea4e1c;
  --accent-100: #ffe6da;

  /* Lilás de apoio, para destaques sobre fundo escuro */
  --cyan-400: #c4a8f5;

  /* Neutros com leve viés de roxo, para casar com a marca */
  --ink-900: #17112b;
  --ink-800: #211a3a;
  --ink-700: #2c2749;
  --ink-600: #4a4566;
  --ink-500: #64607d;
  --ink-400: #8d89a3;
  --ink-300: #c2bfd1;
  --ink-200: #e0dde8;
  --ink-100: #eeecf4;
  --ink-50:  #f8f7fb;
  --white: #ffffff;

  --ok-500: #12a150;

  /* Tipografia */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  2.75rem;

  /* Espaçamento e forma */
  --space-section: 68px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --gutter: 20px;

  --shadow-sm: 0 1px 2px rgba(10, 16, 32, .06), 0 2px 8px rgba(10, 16, 32, .05);
  --shadow: 0 2px 6px rgba(10, 16, 32, .06), 0 12px 32px rgba(10, 16, 32, .09);
  --shadow-lg: 0 8px 20px rgba(10, 16, 32, .10), 0 32px 64px rgba(10, 16, 32, .14);

  --header-h: 66px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  color: var(--ink-900);
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { color: var(--ink-900); font-weight: 650; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -100px;
  z-index: 999;
  background: var(--ink-900); color: var(--white);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--fs-sm);
  transition: top .2s;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--space-section) 0; }
.section--tight { padding: calc(var(--space-section) * .7) 0; }
.section--alt { background: var(--ink-50); }
.section--brand { background: var(--brand-50); }

.section--dark {
  background: var(--ink-900);
  color: var(--ink-300);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--brand-300); }

.section-head {
  max-width: 720px;
  margin: 0 0 40px;
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 12px;
}
.section--dark .eyebrow { color: var(--cyan-400); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-600);
}
.section--dark .lead { color: var(--ink-300); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   4. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(194,65,12,.28);
}
.btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--white); }

.btn--brand {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(62,35,103,.32);
}
.btn--brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }

.btn--ghost {
  background: transparent;
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.btn--ghost:hover { border-color: var(--ink-900); background: var(--white); color: var(--ink-900); }

.btn--ghost-light {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: var(--white);
}
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.1); color: var(--white); }

.btn--sm { padding: 10px 18px; min-height: 42px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn .ico { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* --------------------------------------------------------------------------
   5. Cabeçalho
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--ink-200);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { height: 32px; width: auto; display: block; }
.brand__name {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink-900);
}
.brand__name em { font-style: normal; color: var(--brand-600); }
.brand__by {
  display: block;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400);
  margin-top: -2px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  cursor: pointer;
}
.nav-toggle .ico { width: 22px; height: 22px; fill: currentColor; }
.nav-toggle .ico--close { display: none; }
.nav-toggle[aria-expanded="true"] .ico--open { display: none; }
.nav-toggle[aria-expanded="true"] .ico--close { display: block; }

.site-nav {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--ink-200);
  box-shadow: var(--shadow);
  padding: 12px var(--gutter) 22px;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.site-nav[hidden] { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 12px 4px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-800);
  border-bottom: 1px solid var(--ink-100);
}
.site-nav a:hover { color: var(--brand-600); text-decoration: none; }
.site-nav .site-nav__cta { margin-top: 16px; display: grid; gap: 10px; }

.header-actions { display: none; align-items: center; gap: 12px; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(1000px 520px at 78% -8%, rgba(196,168,245,.24), transparent 62%),
    radial-gradient(760px 480px at 8% 108%, rgba(99,57,159,.44), transparent 60%),
    linear-gradient(168deg, var(--ink-900) 0%, var(--brand-900) 62%, #120b22 100%);
  color: var(--ink-300);
  padding: 56px 0 64px;
  overflow: hidden;
}
.hero__grid { display: grid; gap: 40px; align-items: center; }

.hero h1 { color: var(--white); font-size: var(--fs-3xl); letter-spacing: -.03em; }
.hero h1 .hl {
  background: linear-gradient(96deg, var(--cyan-400), var(--brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: #d8cdf0;
  max-width: 44ch;
}
/* --------------------------------------------------------------------------
   7. Faixa de contexto / logos
   -------------------------------------------------------------------------- */
.strip {
  background: var(--white);
  border-bottom: 1px solid var(--ink-200);
  padding: 26px 0;
}
.strip p {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: .02em;
}
.strip__logos {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px 26px;
  list-style: none; margin: 0; padding: 0;
}
.strip__logos li {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-400);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .4em; }
.card p { font-size: var(--fs-base); color: var(--ink-600); margin: 0; }
.card--flat { box-shadow: none; }

.section--dark .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.section--dark .card p { color: var(--ink-300); }

.card__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--brand-100);
  color: var(--brand-700);
  margin-bottom: 16px;
}
.card__icon svg { width: 22px; height: 22px; fill: currentColor; }
.section--dark .card__icon { background: rgba(196,168,245,.20); color: var(--cyan-400); }
.card__icon--warm { background: var(--accent-100); color: var(--accent-600); }

/* Problema */
.pain {
  border-left: 4px solid var(--accent-500);
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.pain h3 { font-size: var(--fs-base); margin-bottom: .35em; }
.pain p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; }

/* Lista de recursos */
.feature-grid { display: grid; gap: 1px; background: var(--ink-200); border: 1px solid var(--ink-200); border-radius: var(--radius); overflow: hidden; }
.feature {
  background: var(--white);
  padding: 22px 20px;
}
.feature h3 { font-size: var(--fs-base); margin-bottom: .3em; display: flex; align-items: center; gap: 9px; }
.feature h3 svg { width: 19px; height: 19px; fill: var(--brand-600); flex: none; }
.feature p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; }

/* Setores */
.sector {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.sector__top {
  height: 88px;
  background: linear-gradient(130deg, var(--brand-700), var(--brand-500) 58%, #8a63c6);
  display: grid; place-items: center;
  color: rgba(255,255,255,.95);
}
.sector__top svg { width: 34px; height: 34px; fill: currentColor; }
.sector--b .sector__top { background: linear-gradient(130deg, #6d2f9e, #3e2367); }
.sector--c .sector__top { background: linear-gradient(130deg, #b8390c, #e08a1c); }
.sector--d .sector__top { background: linear-gradient(130deg, #1f6f7a, #7b6bd0); }
.sector--e .sector__top { background: linear-gradient(130deg, #2f2a7a, #6f5fd0); }
.sector--f .sector__top { background: linear-gradient(130deg, #8a1b46, #c2410c); }
.sector__body { padding: 20px; }
.sector__body h3 { font-size: var(--fs-base); }
.sector__body p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; }

/* Lista com check */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li {
  position: relative;
  padding-left: 30px;
  margin: 0;
  font-size: var(--fs-base);
  color: var(--ink-600);
}
.checks li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-100) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234d2c80'%3E%3Cpath d='M9.55 17.6 4.4 12.45l1.6-1.6 3.55 3.55 8.45-8.45 1.6 1.6z'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
.section--dark .checks li { color: var(--ink-300); }
.section--dark .checks li::before {
  background-color: rgba(196,168,245,.22);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4a8f5'%3E%3Cpath d='M9.55 17.6 4.4 12.45l1.6-1.6 3.55 3.55 8.45-8.45 1.6 1.6z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   9. Comparativo / tabela
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
}
table.data {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.data caption {
  text-align: left;
  padding: 16px 18px 0;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
table.data th, table.data td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
table.data thead th {
  background: var(--ink-50);
  color: var(--ink-900);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--ink-200);
}
table.data tbody th { font-weight: 600; color: var(--ink-800); }
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.yes { color: var(--ok-500); font-weight: 700; }
table.data td.no { color: var(--ink-400); }

/* --------------------------------------------------------------------------
   10. Planos
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: 20px; align-items: stretch; }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px 26px;
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--brand-500);
  border-width: 2px;
  box-shadow: var(--shadow);
}
.plan__tag {
  position: absolute; top: -13px; left: 24px;
  background: var(--brand-600); color: var(--white);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.plan__name { font-size: var(--fs-lg); margin-bottom: .2em; }
.plan__for { font-size: var(--fs-sm); color: var(--ink-500); margin: 0 0 18px; min-height: 2.8em; }
.plan__price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 4px;
}
.plan__price b { font-size: var(--fs-3xl); font-weight: 800; color: var(--ink-900); letter-spacing: -.03em; }
.plan__price span { font-size: var(--fs-sm); color: var(--ink-500); }
.plan__unit { font-size: var(--fs-xs); color: var(--ink-500); margin: 0 0 20px; }
.plan .checks { margin-bottom: 24px; }
.plan .checks li { font-size: var(--fs-sm); }
.plan__cta { margin-top: auto; }

.plan-note {
  margin-top: 26px;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  background: var(--white);
  border: 1px dashed var(--ink-200);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.plan-note strong { color: var(--ink-800); }

/* --------------------------------------------------------------------------
   9.1 Cartoes das formas de conexao (secao Equipamentos)
   -------------------------------------------------------------------------- */
.card--via { position: relative; display: flex; flex-direction: column; }
.card--via-destaque {
  border-color: var(--brand-500);
  border-width: 2px;
  box-shadow: var(--shadow);
}
.card__tag {
  position: absolute; top: -13px; right: 20px;
  background: var(--brand-600); color: var(--white);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}

/* Sistemas em que o uSign Player roda */
.plataformas {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 18px 0 0; padding: 0;
}
.plataformas li {
  margin: 0; padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-700);
}
.card__etiqueta {
  display: inline-block;
  align-self: flex-start;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.card--via h3 { margin-bottom: .45em; }
@media (min-width: 760px) { .card--via h3 { min-height: 2.4em; } }

/* --------------------------------------------------------------------------
   10.1 Comparativo de planos
   -------------------------------------------------------------------------- */
.checks li.checks__intro {
  font-weight: 700;
  color: var(--ink-800);
  padding-left: 0;
  margin-bottom: 2px;
}
.checks li.checks__intro::before { content: none; }

/* O comparativo é leitura opcional: fica recolhido num <details> */
.plan-compare {
  margin-top: 72px;
  border: 2px solid var(--brand-300);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.plan-compare__toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 64px 22px 22px;
  position: relative;
  cursor: pointer;
  list-style: none;
  color: var(--brand-700);
  min-height: 44px;
}
.plan-compare__ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
}
.plan-compare__ico svg { width: 22px; height: 22px; fill: currentColor; }
.plan-compare__txt { display: grid; gap: 2px; }
.plan-compare__rotulo { font-weight: 700; font-size: var(--fs-md); }
.plan-compare__toggle::-webkit-details-marker { display: none; }
.plan-compare__toggle:hover { background: var(--brand-50); }
.plan-compare__toggle:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: -3px;
}
.plan-compare__contador {
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-600);
}
.plan-compare__toggle::after {
  content: "";
  position: absolute;
  right: 28px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.plan-compare[open] .plan-compare__toggle::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.plan-compare[open] .plan-compare__toggle {
  border-bottom: 1px solid var(--ink-100);
}
.plan-compare__conteudo { padding: 20px 20px 22px; }
.plan-compare .table-scroll:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }

table.data--planos { min-width: 660px; }
@media (min-width: 760px) {
  table.data--planos { table-layout: fixed; }
  table.data--planos tbody th, table.data--planos thead th:first-child { width: 43%; }
  table.data--planos thead th:not(:first-child) { width: 19%; }
}
table.data--planos caption { padding-bottom: 14px; }
table.data--planos thead th { text-align: center; }
table.data--planos thead th:first-child { text-align: left; }
table.data--planos th, table.data--planos td { vertical-align: middle; }
table.data--planos tbody th {
  font-weight: 500;
  color: var(--ink-800);
  padding-right: 22px;
}
table.data--planos td { text-align: center; }
table.data--planos td.yes { color: #0f7a37; font-size: 1.05rem; }   /* 5,44:1 no branco */
table.data--planos td.no  { color: var(--ink-400); }
table.data--planos td.val { font-weight: 600; color: var(--ink-900); white-space: nowrap; }

table.data--planos tr.grupo th {
  background: var(--brand-50);
  color: var(--brand-700, #4b2b7a);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
}

/* Coluna do plano em destaque */
table.data--planos .is-destaque { background: rgba(99, 57, 159, .05); }
table.data--planos thead th.is-destaque {
  background: var(--brand-500);
  color: var(--white);
  border-bottom-color: var(--brand-500);
}

.plan-compare__dica { display: none; }

/* No celular a tabela rola na horizontal, com a coluna de recursos fixa */
@media (max-width: 759px) {
  .plan-compare__dica {
    display: block;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-600);
    margin: 0 0 12px;
  }
  .plan-compare { margin-top: 44px; }
  .plan-compare__toggle { gap: 12px; padding: 16px 42px 16px 14px; }
  .plan-compare__ico { width: 38px; height: 38px; border-radius: 10px; }
  .plan-compare__ico svg { width: 19px; height: 19px; }
  .plan-compare__toggle::after { right: 18px; }
  .plan-compare__conteudo { padding: 14px 8px 16px; }
  table.data--planos { min-width: 480px; }
  table.data--planos caption { padding: 14px 14px 12px; }
  table.data--planos th, table.data--planos td { padding: 11px 8px; font-size: var(--fs-xs); }
  table.data--planos thead th { white-space: normal; }
  table.data--planos tbody th { width: 165px; min-width: 165px; padding-right: 8px; }
  table.data--planos tbody tr:not(.grupo) th,
  table.data--planos thead th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--white);
    box-shadow: 1px 0 0 var(--ink-100);
  }
  table.data--planos thead th:first-child { background: var(--ink-50); z-index: 2; }
  table.data--planos tr.grupo th { padding-left: 8px; }
}

@media (prefers-contrast: more) {
  table.data--planos td.no { color: var(--ink-600); }
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  position: relative;
  font-weight: 650;
  font-size: var(--fs-base);
  color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 20px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-right: 2.5px solid var(--brand-600);
  border-bottom: 2.5px solid var(--brand-600);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--brand-700); }
.faq__body { padding: 0 20px 20px; font-size: var(--fs-base); color: var(--ink-600); }
.faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. CTA final
   -------------------------------------------------------------------------- */
.cta-final {
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(196,168,245,.24), transparent 60%),
    linear-gradient(160deg, var(--brand-800), var(--ink-900));
  color: var(--ink-300);
}
.cta-final h2 { color: var(--white); }
.cta-cards { display: grid; gap: 16px; margin-top: 34px; }
.cta-card {
  display: block;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 22px 20px;
  color: var(--ink-300);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.cta-card:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-2px);
  text-decoration: none;
}
.cta-card b { display: block; color: var(--white); font-size: var(--fs-base); margin-bottom: 4px; }
.cta-card span { font-size: var(--fs-sm); color: #bdb3dd; }
.cta-card__num { display: block; margin-top: 10px; font-weight: 700; color: var(--cyan-400); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   13. Rodapé
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: var(--ink-400);
  font-size: var(--fs-sm);
  padding: 52px 0 28px;
}
.site-footer h2, .site-footer h3 { color: var(--white); }
.site-footer a { color: var(--ink-300); }
.site-footer a:hover { color: var(--white); }

.footer-grid { display: grid; gap: 34px; }
.footer-col h3 {
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 14px;
  font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }

.footer-brand .brand__name { color: var(--white); }
.footer-brand p { max-width: 34ch; margin-top: 12px; color: var(--ink-400); }

.powered {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-300);
  background: rgba(255,255,255,.04);
}
.powered:hover { border-color: rgba(255,255,255,.4); color: var(--white); text-decoration: none; }
.powered strong { color: var(--white); font-weight: 700; }

.footer-contact li { display: flex; gap: 9px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; fill: var(--ink-400); flex: none; margin-top: 4px; }

.social { display: flex; gap: 10px; margin-top: 16px; list-style: none; padding: 0; }
.social li { margin: 0; }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--ink-300);
}
.social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.footer-bottom {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; }
.footer-bottom li { margin: 0; }

/* --------------------------------------------------------------------------
   14. Botão flutuante de WhatsApp
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #1faf54;
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(10,16,32,.28);
}
.wa-float:hover { background: #17913f; color: var(--white); text-decoration: none; }
.wa-float svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.wa-float span { display: none; }

/* --------------------------------------------------------------------------
   15. Página de conteúdo (termos, privacidade)
   -------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(160deg, var(--ink-900), var(--brand-900));
  color: var(--ink-300);
  padding: 48px 0 44px;
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: #bdb3dd; margin: 0; }

.prose { max-width: 780px; }
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: 2em;
  padding-top: .6em;
  border-top: 1px solid var(--ink-200);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--fs-base); margin-top: 1.7em; }
.prose ul, .prose ol { color: var(--ink-600); }
.prose li { margin-bottom: .5em; }
.prose .toc {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 36px;
}
.prose .toc h2 { font-size: var(--fs-base); margin: 0 0 12px; border: 0; padding: 0; }
.prose .toc ol { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); }

.breadcrumb { font-size: var(--fs-sm); margin-bottom: 12px; color: #bdb3dd; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumb a { color: #d9cff2; }

.updated {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  background: var(--ink-50);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   16. Animação de entrada
   O estado da entrada mudou de lugar: vive agora na seção 35 (Movimento),
   escrito com `:where()` para não vencer os efeitos de ponteiro. Manter as
   duas versões fazia a antiga, mais específica, anular a nova.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   17. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .wa-float span { display: inline; }
  .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-bottom { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 760px) {
  :root { --space-section: 84px; --gutter: 28px; }
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  .hero { padding: 76px 0 84px; }
  .hero h1 { font-size: var(--fs-4xl); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cta-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1000px) {
  :root { --space-section: 96px; --header-h: 74px; }
  .hero h1 { font-size: 3.25rem; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .feature-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1.25fr 1fr 1.25fr; }

  .nav-toggle { display: none; }
  .header-actions { display: flex; }
  .site-nav {
    position: static;
    display: block !important;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  .site-nav[hidden] { display: block; }
  .site-nav ul { display: flex; align-items: center; gap: 4px; }
  .site-nav a {
    border-bottom: 0;
    padding: 8px 11px;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    color: var(--ink-700);
  }
  .site-nav a:hover { background: var(--ink-50); color: var(--brand-700); }
  .site-nav .site-nav__cta { display: none; }
}

/* --------------------------------------------------------------------------
   18. Impressão
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .wa-float, .cta-final, .btn-row, .site-nav { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .hero, .section--dark, .site-footer { background: none !important; color: #000 !important; }
  .hero h1, .section--dark h2, .site-footer h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* --------------------------------------------------------------------------
   19. Preferência de contraste / esquema escuro do sistema
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .card, .plan, .feature, .passo { border-color: var(--ink-500); }
  .lead, .card p, .feature p { color: var(--ink-800); }
}

/* --------------------------------------------------------------------------
   20. Ajustes finos do cabeçalho (evitar quebra de linha em itens curtos)
   -------------------------------------------------------------------------- */
.btn { white-space: nowrap; }
.brand__by { white-space: nowrap; }

@media (min-width: 1000px) {
  .site-nav a { white-space: nowrap; }
  .site-header__inner { gap: 12px; }
}

/* Nas larguras de desktop mais estreitas os itens ficam um pouco mais juntos. */
@media (min-width: 1000px) and (max-width: 1159px) {
  .site-nav a { padding: 8px 10px; }
}

/* --------------------------------------------------------------------------
   21. Correções de revisão (contraste, grade e mobile)
   -------------------------------------------------------------------------- */

/* 21.1 — Grade de recursos: 16 itens dividem exatamente por 2 e por 4,
   evitando células vazias cinzas na última linha. */
@media (min-width: 1000px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .feature { padding: 20px 17px; }
  .feature h3 { font-size: var(--fs-sm); }
  .feature p { font-size: var(--fs-xs); line-height: 1.55; }
}

/* 21.2 — Contraste do CTA final sobre o gradiente azul */
.cta-final { color: #e6dff7; }
.cta-final .lead { color: #e6dff7; }
.cta-final .eyebrow { color: #c9b3ff; }
.cta-final a:not(.cta-card) { color: #ffffff; text-decoration: underline; }
.cta-card { color: #e6dff7; }
.cta-card span { color: #cec5e8; }
.cta-card__num { color: #c9b3ff; }

/* 21.3 — Contraste do rodapé */
.site-footer { color: var(--ink-300); }
.footer-brand p, .footer-contact span { color: var(--ink-300); }
.footer-col h3 { color: var(--ink-300); }
.footer-bottom { color: var(--ink-300); }
.footer-contact svg { fill: var(--ink-300); }
.section--dark .lead { color: #d5cdea; }
.hero__sub { color: #ddd4f2; }
.page-hero p, .breadcrumb { color: #cec5e8; }

/* 21.5 — O botão flutuante não deve cobrir o rodapé em telas curtas */
@media (max-width: 559px) {
  .site-footer { padding-bottom: 84px; }
}

/* --------------------------------------------------------------------------
   22. Contraste WCAG 2.1 AA (verificado com medição automática)
   O laranja vivo continua como cor decorativa; os botões usam um tom mais
   fechado para que o texto branco atinja a relação mínima de 4,5:1.
   -------------------------------------------------------------------------- */
:root {
  --accent-cta: #c2410c;        /* branco sobre este tom = 5,18:1 */
  --accent-cta-hover: #a83607;
  --wa-green: #0f7a37;          /* branco sobre este tom = 5,44:1 */
  --wa-green-hover: #0b6a30;
}

.btn--primary {
  background: var(--accent-cta);
  border-color: var(--accent-cta);
  box-shadow: 0 6px 18px rgba(194, 65, 12, .28);
}
.btn--primary:hover {
  background: var(--accent-cta-hover);
  border-color: var(--accent-cta-hover);
}

.wa-float { background: var(--wa-green); }
.wa-float:hover { background: var(--wa-green-hover); }

.brand__by { color: var(--ink-500); }
.strip__logos li { color: var(--ink-500); }
.strip p { color: var(--ink-600); }

.plan__for, .plan__unit, .plan-note, table.data caption { color: var(--ink-600); }
.faq__body, .card p, .feature p, .passo p, .sector__body p, .pain p { color: var(--ink-600); }

/* --------------------------------------------------------------------------
   23. Tamanho de alvo de toque (WCAG 2.2 AA — mínimo de 24px)
   -------------------------------------------------------------------------- */
.footer-col li a,
.footer-bottom li a,
.site-nav a,
.social a {
  display: inline-block;
  min-height: 26px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.footer-contact li a { min-height: 26px; }
.social a { padding: 0; }

@media (max-width: 559px) {
  .footer-col li { margin-bottom: 4px; }
  .footer-bottom ul { gap: 4px 20px; }
}

/* --------------------------------------------------------------------------
   24. Logotipo oficial e capturas do produto
   -------------------------------------------------------------------------- */
.brand { align-items: center; gap: 11px; }
.brand__mark { height: 30px; width: auto; display: block; }
.brand__by {
  display: block;
  margin-top: 0;
  padding-left: 11px;
  border-left: 1px solid var(--ink-200);
  font-size: 10px;
  line-height: 1.25;
  max-width: 8.5em;
}
.site-footer .brand__by { border-left-color: rgba(255,255,255,.2); color: var(--ink-300); }

.so-largo { display: none; }
@media (min-width: 420px) { .so-largo { display: inline; } .brand__by { max-width: none; } }
@media (min-width: 760px) { .brand__mark { height: 34px; } }

/* Capturas em largura de seção */
.shot {
  margin: 42px 0 0;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--ink-100);
}
.shot figcaption {
  padding: 14px 8px 4px;
  font-size: var(--fs-sm);
  color: var(--ink-600);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
}
.section--alt .shot { background: var(--white); }

/* --------------------------------------------------------------------------
   25. Cabeçalho com o logotipo oficial — correções de layout
   -------------------------------------------------------------------------- */
.brand { flex: none; }
.brand__by {
  white-space: normal;      /* anula a regra 20: em duas linhas ocupa menos */
  max-width: 7.5em;
  font-size: 9.5px;
  letter-spacing: .07em;
}
.header-actions { flex: none; }
.site-header__inner { flex-wrap: nowrap; }

@media (min-width: 1000px) {
  .site-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
  .site-nav ul { flex-wrap: nowrap; }
  .site-nav a { padding: 8px 14px; }
}
/* Hero: um pouco mais de espaço para a captura do produto */
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr 1.02fr; gap: 48px; }
}

/* --------------------------------------------------------------------------
   26. Cabeçalho: espaçamento entre menu e ações, e telefone só quando cabe
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .header-actions { margin-left: 24px; gap: 14px; }
}

/* --------------------------------------------------------------------------
   27. Cabeçalho: o menu precisa medir o próprio conteúdo
   Sem isto o <ul> herda a largura do bloco e os itens transbordam por cima
   do telefone. Com flex + flex-basis automático, a largura acompanha o texto.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .site-nav {
    display: flex !important;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: 0;
  }
  .site-nav ul { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   28. Cabeçalho: o menu não pode encolher além do próprio texto
   (senão invade a marca à esquerda). Entre 1000px e 1160px os itens ficam
   mais compactos para tudo caber em uma linha.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .site-nav { flex: 0 0 auto; }
}
/* Com quatro itens no menu não é mais preciso comprimir nada entre
   1000px e 1160px — o cabeçalho cabe folgado. */

/* --------------------------------------------------------------------------
   29. Destaque do título do hero
   O tom mais escuro do gradiente ficava em 2,85:1 sobre o roxo da marca.
   Trocado por um lilás claro, que mantém 5:1 mesmo na parte mais clara do fundo.
   -------------------------------------------------------------------------- */
.hero h1 .hl {
  background: linear-gradient(96deg, var(--cyan-400), var(--brand-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Se o navegador não suportar recorte de fundo no texto, o destaque
   continua legível com uma cor sólida. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .hl { background: none; color: var(--cyan-400); }
}

/* --------------------------------------------------------------------------
   30. Seção de clientes
   Vive sobre o roxo claro da marca, com os logos dentro de um painel branco —
   o mesmo par fundo tingido + cartão branco usado nas seções de recursos,
   planos e capturas. É o que liga a faixa ao resto do site em vez de deixá-la
   como uma tarja solta entre o hero e o conteúdo.

   Os arquivos já saem em preto e branco, centralizados numa caixa de 140x80 e
   com o tamanho normalizado pela ÁREA ocupada — sem isso os logos empilhados
   (Yamaha, Accor) ficam minúsculos ao lado dos horizontais (Lightera, Pompéia).
   Como todas as imagens têm a mesma dimensão, não há salto de layout.
   -------------------------------------------------------------------------- */
.clientes__painel {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 14px;
}

/* Lista flexível, e não grade de colunas fixas: o número de logos muda com o
   tempo e 14 não divide em linhas cheias. Assim a última linha fica centrada
   em vez de encostar à esquerda com buracos à direita. */
.strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.strip__logos li {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 140px;
  min-height: 78px;
  /* aparência do texto alternativo, caso um arquivo de logo falte */
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: center;
}
.strip__logos img {
  display: block;
  width: 140px;
  height: 80px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);   /* garantia, caso um arquivo seja trocado por um colorido */
  opacity: .8;
  transition: opacity .18s ease, filter .18s ease;
}
.strip__logos li:hover img { opacity: 1; }

@media (max-width: 419px) {
  .strip__logos li { min-width: 128px; }
  .strip__logos img { width: 128px; height: 74px; }
}

@media (min-width: 760px) {
  .clientes__painel { padding: 26px 22px; }
  .strip__logos { gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .strip__logos img { transition: none; }
}

/* Entre 1000px e 1180px o painel encolhe e a última linha ficaria com dois
   logos órfãos. Reduzindo um pouco a peça, as duas linhas de sete se mantêm. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .strip__logos { gap: 8px 12px; }
  .strip__logos li { min-width: 120px; }
  .strip__logos img { width: 120px; height: 72px; }
}

/* --------------------------------------------------------------------------
   31. Hero enxuto
   Sem o selo, a nota e os indicadores, sobraram título, subtítulo e dois
   botões. O respiro vertical diminui e o subtítulo cresce um pouco, para o
   bloco de texto não ficar curto demais ao lado da captura de tela.
   -------------------------------------------------------------------------- */
.hero { padding: 48px 0 56px; }
.hero__sub { max-width: 46ch; margin-bottom: 0; }

@media (min-width: 760px) {
  .hero { padding: 68px 0 76px; }
  .hero__sub { font-size: var(--fs-xl); line-height: 1.5; }
}
@media (min-width: 1000px) {
  .hero { padding: 84px 0 92px; }
  .hero__grid { align-items: center; }
}

/* --------------------------------------------------------------------------
   32. Seção de teste grátis e formulário de conta
   -------------------------------------------------------------------------- */
.teste__grid { display: grid; gap: 32px; align-items: start; }

.teste__texto .checks { margin-top: 26px; }
.teste__texto .checks li { font-size: var(--fs-base); }
.teste__ajuda {
  margin-top: 24px;
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

.teste__cartao {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 20px;
}

.form__titulo {
  font-size: var(--fs-lg);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-100);
}

.form__linha { display: grid; gap: 0; }

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-800);
}
.campo input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: var(--ink-400); }
.campo input:hover { border-color: var(--ink-500); }
.campo input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(77, 44, 128, .18);
}
.campo input:focus-visible { outline: none; }   /* o anel acima já indica o foco */
.campo input[aria-invalid="true"] {
  border-color: var(--accent-cta);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .14);
}

.campo__ajuda {
  margin: 7px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-600);
}
.campo__url {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  font-weight: 650;
  color: var(--brand-700);
  word-break: break-all;
}

#leadEnviar { margin-top: 6px; }
#leadEnviar[disabled] { opacity: .6; cursor: progress; }

.form__retorno {
  margin: 14px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.form__retorno:empty { display: none; }
.form__retorno--info,
.form__retorno--erro,
.form__retorno--sucesso { padding: 11px 14px; }
.form__retorno--info    { background: var(--ink-100); color: var(--ink-800); }
.form__retorno--erro    { background: #fdecE4; color: #8a2c05; }
.form__retorno--sucesso { background: #e4f6ea; color: #0a6b34; }

.form__legal {
  margin: 16px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-500);
}

@media (min-width: 480px) {
  .form__linha { grid-template-columns: 1fr 1fr; gap: 0 14px; }
}
@media (min-width: 760px) {
  .teste__cartao { padding: 30px 28px; }
}
@media (min-width: 1000px) {
  .teste__grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
}

/* O botão flutuante sai de cena enquanto o formulário está na tela: fixo no
   canto, ele cobria o campo de e-mail no celular. */
.wa-float {
  transition: opacity .2s ease, transform .2s ease, background-color .18s ease;
}
.wa-float--oculto {
  opacity: 0;
  transform: translateY(90px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: opacity .2s ease; }
  .wa-float--oculto { transform: none; }
}

/* --------------------------------------------------------------------------
   33. Carrossel da hero
   Três fotos em retrato (4:5) com título e subtítulo sobrepostos. Os slides
   ficam empilhados em posição absoluta e trocam por opacidade; o primeiro já
   vem com .is-ativo no HTML, então sem JavaScript a hero mostra uma imagem
   fixa em vez de ficar vazia.
   -------------------------------------------------------------------------- */
.carrossel {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.carrossel__palco {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-900);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg);
}

/* Navegadores sem aspect-ratio (Safari < 15) usam a proporção do padding */
@supports not (aspect-ratio: 4 / 5) {
  .carrossel__palco { height: 0; padding-bottom: 125%; }
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.slide.is-ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 64px 22px 22px;
  background: linear-gradient(to top,
              rgba(18, 11, 34, .95) 0%,
              rgba(18, 11, 34, .82) 38%,
              rgba(18, 11, 34, .35) 70%,
              rgba(18, 11, 34, 0) 100%);
}
.slide__titulo {
  margin: 0 0 4px;
  font-size: var(--fs-lg);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--white);
}
.slide__sub {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.35;
  color: #ddd4f2;
}

/* Controles ------------------------------------------------------------- */
.carrossel__controles {
  /* só aparecem quando o JavaScript assume o carrossel; sem ele não haveria
     para onde navegar */
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.carrossel__pontos { display: flex; gap: 8px; }

/* O traço tem 5px de altura, mas a área clicável precisa ser bem maior.
   O preenchimento vertical cria os 41px de alvo e o background-clip mantém a
   pintura só na caixa de conteúdo — o pseudo-elemento absoluto não funciona
   aqui porque não recebe o clique de forma confiável. */
.ponto {
  box-sizing: content-box;
  width: 34px;
  height: 5px;
  padding: 18px 0;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255,255,255,.28);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .2s ease, width .25s ease;
}
.ponto:hover { background-color: rgba(255,255,255,.55); }
.ponto.is-ativo { background-color: var(--cyan-400); width: 48px; }

.carrossel--pronto .carrossel__controles { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity .001ms, visibility 0s; }
  .ponto { transition: none; }
}

@media (min-width: 620px) {
  .carrossel { max-width: 400px; }
  .slide__legenda { padding: 72px 26px 26px; }
  .slide__titulo { font-size: var(--fs-xl); }
}
@media (min-width: 1000px) {
  /* 440px de largura dão 550px de altura na proporção 4:5. Com este respiro,
     a hero inteira cabe acima da dobra também em notebooks de 800px. */
  .carrossel { max-width: 440px; }
  .hero { padding: 56px 0 64px; }
}

/* --------------------------------------------------------------------------
   34. Título de seção com duas frases
   No tamanho cheio de h2 um texto desta extensão vira um paredão. Reduz um
   pouco o corpo, abre a caixa e aperta a entrelinha para continuar lendo
   como título, e não como parágrafo em negrito.
   -------------------------------------------------------------------------- */
.titulo--longo {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;   /* ignorado por navegadores antigos, sem prejuízo */
}
@media (min-width: 760px) {
  .titulo--longo { font-size: var(--fs-2xl); line-height: 1.22; max-width: 26ch; }
}
@media (min-width: 1000px) {
  .titulo--longo { font-size: 2rem; max-width: 30ch; }
}

/* --------------------------------------------------------------------------
   35. Seção "Como funciona"
   A seção reúne o que antes eram duas ("O que é o uSign" e "Como funciona").
   A ordem é: os três passos em texto, o esquema visual do fluxo, e por fim
   o que o cliente precisa ter. O texto vem antes da imagem de propósito —
   no celular o infográfico fica pequeno demais para se ler, então quem
   carrega o sentido é a lista.
   -------------------------------------------------------------------------- */
.passos {
  counter-reset: passo;
  list-style: none;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.passo {
  position: relative;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  box-shadow: var(--shadow-sm);
}
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-600);
  color: var(--white);
  font-weight: 800;
  font-size: var(--fs-base);
  margin-bottom: 14px;
}
.passo h3 { font-size: var(--fs-lg); margin-bottom: .35em; }
.passo p  { font-size: var(--fs-base); color: var(--ink-600); margin: 0; }

/* Esquema do fluxo -------------------------------------------------------- */
.fluxo {
  margin: 40px auto 0;
  max-width: 780px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px 12px 4px;
}
.fluxo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.fluxo figcaption {
  padding: 14px 10px 12px;
  font-size: var(--fs-sm);
  color: var(--ink-600);
  text-align: center;
}

@media (min-width: 760px) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fluxo { padding: 16px 16px 6px; }
}

/* --------------------------------------------------------------------------
   36. Seção de widgets
   Duas colunas: à esquerda o argumento e os tipos disponíveis, à direita um
   carrossel com exemplos reais. As imagens de origem têm no máximo 586px de
   largura, então a coluna do carrossel é deliberadamente contida — ampliar
   além disso só deixaria tudo borrado.
   -------------------------------------------------------------------------- */
/* No celular a ordem é: título e lead, os exemplos, e só então os detalhes.
   Ver a prova antes de ler a lista de argumentos é o que faz sentido numa
   tela estreita. No desktop as áreas de grade recolocam tudo em duas colunas. */
.widgets__grid { display: flex; flex-direction: column; gap: 30px; }
.widgets__intro   { order: 1; }
.widgets__mostra  { order: 2; }
.widgets__detalhe { order: 3; }
.widgets__tipos { margin-top: 0; }

/* Etiquetas dos tipos de widget */
.widgets__tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.widgets__tipos li {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--brand-100);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-700);
}

.widgets__pontos { margin-top: 26px; }
.widgets__pontos li { font-size: var(--fs-base); }
.widgets__detalhe .btn-row { margin-top: 26px; }

/* Carrossel de exemplos ---------------------------------------------------- */
.wcarrossel { width: 100%; max-width: 560px; margin: 0 auto; }

.wcarrossel__palco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow);
}
@supports not (aspect-ratio: 16 / 9) {
  .wcarrossel__palco { height: 0; padding-bottom: 56.25%; }
}

.wslide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.wslide.is-ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s;
}
.wslide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wslide__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top,
              rgba(18, 11, 34, .94) 0%,
              rgba(18, 11, 34, .80) 45%,
              rgba(18, 11, 34, 0) 100%);
}
.wslide__titulo {
  margin: 0 0 2px;
  font-size: var(--fs-base);
  font-weight: 750;
  color: var(--white);
  line-height: 1.25;
}
.wslide__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: #ddd4f2;
}

/* Controles */
.wcarrossel__controles {
  display: none;   /* só aparecem quando o JavaScript assume */
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.wcarrossel--pronto .wcarrossel__controles { display: flex; }

.wcarrossel__pontos { display: flex; gap: 8px; }
.wcarrossel__pontos .ponto {
  background-color: var(--ink-300);
}
.wcarrossel__pontos .ponto:hover { background-color: var(--ink-500); }
.wcarrossel__pontos .ponto.is-ativo { background-color: var(--brand-600); }

.seta {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-200);
  background: var(--white);
  color: var(--brand-700);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.seta:hover { background: var(--brand-50); border-color: var(--brand-300); }
.seta svg { width: 17px; height: 17px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .wslide { transition: opacity .001ms, visibility 0s; }
  .seta { transition: none; }
}

@media (min-width: 1000px) {
  .widgets__grid {
    display: grid;
    grid-template-columns: 1fr 560px;
    grid-template-areas:
      "intro   mostra"
      "detalhe mostra";
    align-content: center;
    gap: 22px 52px;
  }
  .widgets__intro   { grid-area: intro; }
  .widgets__detalhe { grid-area: detalhe; }
  .widgets__mostra  { grid-area: mostra; align-self: center; }
  .wcarrossel { margin: 0; }
}

/* --------------------------------------------------------------------------
   24. Documentos legais (termos e politica) — layout de duas colunas
       Mesmo padrao usado em vxtbrasil.com/termos: hero escuro com
       identificacao e versao, indice lateral fixo com marcacao da secao
       ativa, corpo com clausulas numeradas e tituladas.
   -------------------------------------------------------------------------- */

/* Barra de progresso de leitura */
.leitura {
  position: fixed; top: 0; left: 0; z-index: 60;
  height: 3px; width: 0;
  background: var(--accent-cta);
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) { .leitura { transition: none; } }

/* Cabecalho do documento */
.doc-hero .eyebrow { color: var(--brand-300); }
.doc-hero h1 { color: var(--white); margin-bottom: .35em; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-300);
}
.doc-aviso {
  margin: 24px 0 0;
  padding: 15px 18px;
  border-left: 4px solid var(--brand-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255,255,255,.07);
  color: #ddd6ef;
  font-size: var(--fs-sm); line-height: 1.65;
  max-width: 78ch;
}
.doc-ident {
  margin: 22px 0 0;
  font-size: var(--fs-sm); line-height: 1.7;
  color: #bdb3dd;
  max-width: 78ch;
}
.doc-ident a { color: #bdb3dd; text-decoration: underline; }

/* Grade: indice + corpo */
.doc-grid {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

/* Indice lateral */
.doc-toc {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  min-width: 0;
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow: auto;
}
.doc-toc h2 {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500);          /* 5,29:1 no branco — o --ink-400 dava 3,36:1 e reprovava na AA */
  margin: 0 0 12px;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.doc-toc li { margin: 0 0 2px; }
.doc-toc a {
  display: flex; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  line-height: 1.35;
  transition: background .15s, color .15s;
}
.doc-toc a span { color: var(--brand-600); font-weight: 700; min-width: 1.5em; }
.doc-toc a:hover { background: var(--brand-50); color: var(--ink-900); }
.doc-toc a.is-atual { background: var(--brand-50); color: var(--ink-900); font-weight: 600; }

/* Corpo do documento */
.doc-body { max-width: 78ch; min-width: 0; color: var(--ink-700); }
.doc-body h2.art {
  font-size: var(--fs-xl);
  margin: 44px 0 14px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.doc-body h2.art:first-child { margin-top: 0; }
.doc-body h2.art span { color: var(--brand-600); }
.doc-body p.cl { margin: 0 0 14px; }
.doc-body p.cl b.n { color: var(--brand-600); margin-right: .25em; }
.doc-body p.cl b.lead { color: var(--ink-900); }
.doc-body a { color: var(--brand-600); }

/* Resumo em linguagem simples */
.doc-resumo {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 34px;
}
.doc-resumo h2 { font-size: var(--fs-md); margin: 0 0 10px; }
.doc-resumo p { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--ink-700); }
.doc-resumo ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.doc-resumo li { position: relative; padding-left: 20px; margin: 0 0 7px; color: var(--ink-700); }
.doc-resumo li:last-child { margin: 0; }
.doc-resumo li::before { content: "\25AA"; position: absolute; left: 2px; color: var(--brand-600); font-weight: 700; }

/* Caixa de destaque dentro do texto */
.doc-nota {
  background: var(--brand-50);
  border-left: 4px solid var(--brand-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 0 0 16px;
  color: var(--ink-800);
  font-size: var(--fs-sm);
}

/* Listas dentro das clausulas */
.doc-ul { list-style: none; margin: -2px 0 16px; padding: 0; }
.doc-ul li { position: relative; padding-left: 20px; margin: 0 0 7px; color: var(--ink-700); }
.doc-ul li::before { content: "\25AA"; position: absolute; left: 2px; color: var(--brand-600); font-weight: 700; }

/* Fecho */
.doc-outro { margin: 30px 0 0; font-size: var(--fs-sm); color: var(--ink-500); }
.doc-topo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; padding: 6px 0;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-600);
}

@media (max-width: 999px) {
  .doc-grid { grid-template-columns: 1fr; gap: 26px; }
  .doc-toc {
    position: static; max-height: none;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 16px 14px;
  }
  .doc-toc ol { columns: 2; column-gap: 18px; }
  .doc-toc li { break-inside: avoid; }
  .leitura { display: none; }
}
@media (max-width: 559px) {
  .doc-toc ol { columns: 1; }
  .doc-resumo { padding: 18px 16px; }
}

@media print {
  .leitura, .doc-toc, .doc-topo { display: none !important; }
  .doc-grid { display: block; }
  .doc-body { max-width: none; font-size: 10.5pt; }
  .doc-hero { background: none !important; }
  .doc-hero .eyebrow, .doc-meta, .doc-aviso, .doc-ident { color: #000 !important; }
  .doc-aviso { background: #f2f0f8 !important; }
  .doc-resumo, .doc-nota { break-inside: avoid; }
  .doc-body h2.art { break-after: avoid; }
}

/* Tabela de niveis de atendimento, dentro do documento legal */
.doc-body .table-scroll { margin: 4px 0 18px; }
table.data--atend { min-width: 560px; }
table.data--atend caption { padding: 14px 16px 12px; }
table.data--atend thead th {
  background: var(--brand-600); color: var(--white);
  font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase;
  border-bottom-color: var(--brand-600);
}
table.data--atend thead th:first-child { background: var(--ink-50); color: var(--ink-50); }
table.data--atend tbody th[scope="row"] {
  background: var(--ink-50); color: var(--ink-900); font-weight: 700;
  width: 32%;
}
table.data--atend td { color: var(--ink-700); }
@media (max-width: 559px) {
  table.data--atend { min-width: 460px; }
  table.data--atend th, table.data--atend td { padding: 11px 10px; font-size: var(--fs-xs); }
}

/* Tabelas dos documentos legais (politica de privacidade) */
table.data--doc { min-width: 620px; }
table.data--doc caption { padding: 14px 16px 12px; }
table.data--doc thead th {
  background: var(--brand-600); color: var(--white);
  font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase;
  border-bottom-color: var(--brand-600);
  white-space: normal;
}
table.data--doc tbody th[scope="row"] {
  background: var(--ink-50); color: var(--ink-900); font-weight: 700;
  width: 26%;
}
table.data--doc td { color: var(--ink-700); }
@media (max-width: 559px) {
  table.data--doc { min-width: 520px; }
  table.data--doc th, table.data--doc td { padding: 11px 10px; font-size: var(--fs-xs); }
  table.data--doc tbody th[scope="row"] { width: 34%; }
}

/* --------------------------------------------------------------------------
   35. Movimento
   O uSign vende imagem em movimento; o site não pode ser um cartaz parado.
   Regras que valem para tudo o que está aqui:
   · só `transform` e `opacity` — as duas propriedades que o navegador anima
     na GPU, sem recalcular layout. Nada de animar width, top, box-shadow
     sozinha ou filter em elemento grande;
   · nada que esconda conteúdo sem rede de segurança (ver main.js);
   · nada acima da dobra que atrase a maior pintura (LCP): o h1 e a foto do
     hero nunca começam com opacity 0;
   · tudo desligado em `prefers-reduced-motion`, no fim desta seção.
   -------------------------------------------------------------------------- */

/* 35.1 Entrada ao rolar — curva e escala --------------------------------- */
/* `:where()` não soma especificidade. Sem isso, o `transform: none` do estado
   final (0-3-0) venceria o `:hover` dos cartões (0-2-0) e o efeito de levantar
   simplesmente não aconteceria — foi o que ocorreu na primeira versão. */
.js-reveal :where(.reveal) {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.985);
  transition: opacity .45s cubic-bezier(.22,.7,.28,1),
              transform .45s cubic-bezier(.22,.7,.28,1);
}
.js-reveal :where(.reveal.is-visible) { opacity: 1; transform: none; }

/* Cascata: irmãos entram em sequência, não em bloco. O atraso é curto de
   propósito — acima de ~0,4s a página parece lenta, não fluida. */
.js-reveal :where(.reveal:nth-child(2))  { transition-delay: .06s; }
.js-reveal :where(.reveal:nth-child(3))  { transition-delay: .12s; }
.js-reveal :where(.reveal:nth-child(4))  { transition-delay: .18s; }
.js-reveal :where(.reveal:nth-child(5))  { transition-delay: .24s; }
.js-reveal :where(.reveal:nth-child(6))  { transition-delay: .30s; }
.js-reveal :where(.reveal:nth-child(7))  { transition-delay: .33s; }
.js-reveal :where(.reveal:nth-child(8))  { transition-delay: .36s; }
.js-reveal :where(.reveal:nth-child(n+9)) { transition-delay: .39s; }
/* O atraso não pode sobrar para o hover: assim que o elemento aparece, ele
   responde ao ponteiro na hora. */
.js-reveal :where(.reveal.is-visible):hover { transition-delay: 0s; }

/* O cabeçalho da seção entra antes dos cartões, sem cascata. */
.js-reveal :where(.section-head.reveal) { transition-delay: 0s; }

/* A lista dos passos só existe para disparar a linha do item 35.6: ela
   própria não some, senão os três cartões desapareceriam junto com ela. */
.js-reveal :where(.reveal--linha) { opacity: 1; transform: none; transition: none; }

/* 35.2 Hero: brilho que respira ------------------------------------------ */
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  pointer-events: none;
  background: radial-gradient(600px 300px at 72% 12%, rgba(196,168,245,.16), transparent 70%);
  animation: brilho 14s ease-in-out infinite alternate;
  z-index: 0;
}
/* O conteúdo do hero fica acima do brilho, nunca tingido por ele. */
.hero__grid { position: relative; z-index: 1; }
@keyframes brilho {
  from { opacity: .55; transform: translate3d(-2%, 0, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* O destaque do h1 ganha vida sem nunca ficar invisível: o gradiente desliza
   sob o texto, que continua pintado desde o primeiro frame. */
.hero h1 .hl {
  background-size: 220% 100%;
  animation: varredura 9s ease-in-out infinite;
}
@keyframes varredura {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 35.3 Ken Burns na foto do hero ----------------------------------------- */
/* A foto ativa faz um zoom lento — o gesto que diz "isto é sobre vídeo".
   O palco já tem overflow hidden, então nada vaza pela borda. */
.slide.is-ativo img { animation: kenburns 11s ease-out both; }
@keyframes kenburns {
  from { transform: scale(1);    }
  to   { transform: scale(1.075); }
}
/* Mesmo gesto, mais discreto, nas capturas de widget (16:9). */
.wslide.is-ativo img { animation: kenburns-w 12s ease-out both; }
@keyframes kenburns-w {
  from { transform: scale(1);    }
  to   { transform: scale(1.045); }
}

/* 35.4 Cabeçalho ao rolar ------------------------------------------------ */
.site-header {
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.is-rolado {
  box-shadow: 0 1px 0 var(--ink-200), 0 8px 28px rgba(23, 17, 43, .10);
  background: rgba(255,255,255,.97);
}

/* 35.5 Resposta ao ponteiro ---------------------------------------------- */
/* `hover: hover` evita que o efeito fique grudado depois do toque no celular. */
@media (hover: hover) and (pointer: fine) {
  /* Uma transição só, que vale para a entrada e para o ponteiro. Duas
     declarações concorrentes fariam uma anular a outra. */
  .card, .feature, .sector, .passo, .pain, .plan {
    transition: opacity .45s cubic-bezier(.22,.7,.28,1),
                transform .45s cubic-bezier(.22,.7,.28,1),
                box-shadow .28s ease, border-color .28s ease;
  }
  .card:hover, .feature:hover, .sector:hover, .passo:hover, .pain:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .plan--featured:hover { transform: translateY(-8px); }

  .feature h3 svg, .card__icon svg, .sector__top svg {
    transition: transform .28s cubic-bezier(.22,.7,.28,1);
  }
  .feature:hover h3 svg, .card:hover .card__icon svg { transform: scale(1.15) rotate(-4deg); }
  .sector:hover .sector__top svg { transform: scale(1.1); }

  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  .strip__logos img { transition: transform .28s ease, opacity .28s ease; }
  .strip__logos li:hover img { transform: scale(1.06); }

  .plataformas li, .widgets__tipos li {
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  }
  .plataformas li:hover, .widgets__tipos li:hover {
    transform: translateY(-2px);
    border-color: var(--brand-300);
  }

  .faq summary:hover { background: var(--brand-50); }
  .doc-topo:hover { transform: translateX(-3px); }
  .doc-topo { transition: transform .2s ease; }
}

/* O teclado merece o mesmo destaque do mouse. */
.card:focus-within, .plan:focus-within { box-shadow: var(--shadow); }

/* 35.6 A linha que liga os três passos ----------------------------------- */
/* No desktop os passos ficam lado a lado; a linha cresce da esquerda para a
   direita quando a seção entra na tela, sugerindo o fluxo do conteúdo. */
@media (min-width: 760px) {
  .passos { position: relative; }
  .passos::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 46px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-300), var(--brand-500), var(--brand-300));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.22,.7,.28,1) .15s;
    z-index: 0;
  }
  .passos.is-visible::before { transform: scaleX(1); }
  .passo { z-index: 1; }
}

/* 35.7 Pontos dos carrosséis: barra que preenche -------------------------- */
.ponto, .wcarrossel__pontos .ponto { position: relative; overflow: hidden; }

/* 35.8 Rolagem revela o conteúdo do documento legal ---------------------- */
.doc-toc a.is-atual { transition: background-color .2s ease, color .2s ease; }

/* 35.9 Impressão: a rede de segurança que não depende de JavaScript ------ */
/* O `beforeprint` do main.js resolve na maioria dos navegadores, mas não em
   todos, e não quando a página vira PDF por outro caminho. Esta regra é a
   garantia real de que nada sai em branco no papel. */
@media print {
  .js-reveal :where(.reveal),
  .js-reveal :where(.reveal:nth-child(n)) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero::after, .hero h1 .hl,
  .slide.is-ativo img, .wslide.is-ativo img { animation: none !important; }
  .passos::before { transform: scaleX(1) !important; }
}

/* 35.10 Desligar tudo quando o sistema pedir ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal :where(.reveal),
  .js-reveal :where(.reveal:nth-child(n)) { opacity: 1; transform: none; transition: none; }
  .hero::after { animation: none; opacity: .7; transform: none; }
  .hero h1 .hl { animation: none; background-size: 100% 100%; }
  .slide.is-ativo img, .wslide.is-ativo img { animation: none; transform: none; }
  .passos::before { transition: none; transform: scaleX(1); }
  .site-header { transition: none; }
  .card:hover, .feature:hover, .sector:hover, .passo:hover,
  .pain:hover, .plan:hover, .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   36. Links dentro de texto corrido — WCAG 1.4.1 (uso de cor)
   Um link que só se distingue pela cor reprova: o contraste entre o roxo do
   link e o cinza do texto ao redor é de 1,3:1, e o mínimo é 3:1. A correção
   é o sublinhado — e ele vale para QUALQUER link dentro de um parágrafo ou
   item de lista de conteúdo, não só para os que se lembrou de marcar.
   Fora daqui (menu, botões, cartões, rodapé, índice) o link continua sem
   sublinhado: ali ele é distinguível pela posição e pela forma.
   -------------------------------------------------------------------------- */
.faq__body p a,
.doc-body p a,
.doc-body li a,
.plan-note a,
.teste__ajuda a,
.form__legal a,
.lead a,
.section-head p a,
.sector__body p a,
.feature p a,
.problema__texto a,
.section--dark .wrap > p a,
.doc-outro a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
}
.faq__body p a:hover,
.doc-body p a:hover,
.doc-body li a:hover,
.plan-note a:hover,
.teste__ajuda a:hover,
.form__legal a:hover,
.lead a:hover,
.sector__body p a:hover,
.feature p a:hover,
.section--dark .wrap > p a:hover,
.doc-outro a:hover {
  text-decoration-thickness: .12em;
}
/* O rodapé escuro e o breadcrumb já distinguem o link pelo contexto. */
.site-footer p a { text-decoration: underline; text-underline-offset: .18em; }

/* O tabindex="-1" do <main> existe só para o skip-link entregar o foco ali.
   Sem isto, clicar em qualquer lugar do conteúdo desenharia um anel de foco
   em volta da página inteira. */
main[tabindex="-1"]:focus { outline: none; }
main[tabindex="-1"]:focus-visible { outline: 3px solid var(--brand-500); outline-offset: -3px; }