/* LexAberta · landing PT-BR (todo 27; overhaul conforme mockup aprovado do
 * site público, plano v4 linha 2, mkt/2).
 * Mobile-first, sem build step. Tokens em :root; contraste AA verificado
 * (tinta #1b2a33 sobre branco 14,7:1; verde #14532d sobre branco 9,1:1;
 * texto secundário #4a5560 sobre branco 7,6:1 e sobre #f4f6f4 6,9:1). */

:root {
  --tinta: #1b2a33;
  --tinta-suave: #4a5560;
  --verde: #14532d;
  --verde-escuro: #0e3d20;
  --verde-tinta: #14532d;
  --fundo: #ffffff;
  --fundo-suave: #f4f6f4;
  --fio: #d8ded8;
  --fio-forte: #5b6770;
  --raio: 10px;
  --recipiente: 1080px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  /* v7/3 (06-M08): linguagem de movimento em tokens; o kill-switch de
     reduced-motion abaixo segue sendo a autoridade que zera tudo. */
  --dur-curta: 150ms;   /* micro-feedback: cores, bordas, persona (M02/M05) */
  --dur-entrada: 180ms; /* entrada do modal de trial (M04) */
  --dur-media: 200ms;   /* linhas da demo MoA (M05) */
  --ease: ease-out;
  /* v7/3 (06-M01): folga das âncoras sob o header sticky (~75px). */
  --salto-ancora: 5.25rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* v7/3 (06-M01 + 29-A10): âncoras da nav, skip-link e foco em campos com id
   aterrissam abaixo do header sticky, nunca escondidos atrás dele (vale
   para as 8 páginas que compartilham esta folha). */
[id] { scroll-margin-top: var(--salto-ancora); }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
}

.recipiente {
  max-width: var(--recipiente);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- pular para o conteúdo ---------- */

.pular-conteudo {
  position: absolute;
  left: 0;
  top: -3rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: #ffffff;
  border-radius: 0 0 var(--raio) 0;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.pular-conteudo:focus { top: 0; }

/* ---------- foco visível ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--verde-tinta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- banner de consentimento (D5, LGPD; mockup marketing) ---------- */

.mkt-consent {
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--fio);
  padding: 0.85rem 0;
}
.mkt-consent[data-consent="aceito"],
.mkt-consent[data-consent="recusado"] { display: none; }
.mkt-consent-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.mkt-consent-texto {
  margin: 0;
  flex: 1 1 26rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.mkt-consent-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mkt-consent-painel {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--fio);
}
.mkt-consent-painel-titulo {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.mkt-consent-lista {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.mkt-consent-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.6rem;
  align-items: center;
}
.mkt-consent-item input[type="checkbox"] { accent-color: var(--verde-tinta); width: 1.25rem; height: 1.25rem; }
.mkt-consent-item label { font-weight: 600; }
.mkt-consent-item-nota {
  grid-column: 2;
  margin: 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
@media (max-width: 599px) {
  .mkt-consent-linha { flex-direction: column; align-items: stretch; }
  .mkt-consent-texto { flex: 0 0 auto; }
  .mkt-consent-acoes .btn { flex: 1 1 auto; }
}

/* ---------- topo ---------- */

.topo {
  background: var(--fundo);
  border-bottom: 1px solid var(--fio);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.marca {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.marca::before {
  content: "LA";
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 6px;
  background: var(--verde);
  color: #ffffff; /* glifo do selo sobre o verde da marca */
  font-family: Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.6rem;
  text-align: center;
  flex: 0 0 auto;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.35rem 0.15rem;
  transition: color var(--dur-curta) var(--ease); /* v7/3 06-M02 */
}
.menu a:hover { color: var(--verde-tinta); }
.menu a:active { color: var(--verde-escuro); } /* v7/3 06-M02: retorno de toque */
.topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.entrar {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.35rem 0.15rem;
  transition: color var(--dur-curta) var(--ease); /* v7/3 06-M02 */
}
.entrar:hover { color: var(--verde-tinta); }
.entrar:active { color: var(--verde-escuro); } /* v7/3 06-M02 */
.btn-comecar { min-height: 40px; padding: 0.35rem 0.95rem; }

/* v7/3 (00a-F02): no desktop o invólucro é transparente ao layout (os
   filhos participam do flex como antes); só existe para virar o painel
   dropdown do hamburger no mobile. */
.topo-painel { display: contents; }

/* v7/3 (00a-F02): hamburger <768px. Botão nasce [hidden] no HTML e só é
   exibido com JS ligado (sem JS o menu segue visível no fluxo, como hoje).
   Disclosure seco, sem animação (keyboard law: Esc fecha e devolve foco). */
.topo-menu-botao {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-weight: 600;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--fio-forte);
  border-radius: 8px;
  cursor: pointer;
}
.topo-menu-botao:hover { background: var(--fundo-suave); }
.topo-menu-botao:active { background: var(--fundo-suave); transform: translateY(1px); }
.topo-menu-botao svg { display: block; }

@media (max-width: 767px) {
  .topo-menu-botao:not([hidden]) { display: inline-flex; }
  .topo[data-menu] .topo-painel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    background: var(--fundo);
    border-bottom: 1px solid var(--fio);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
    padding: 0.35rem 1.25rem 0.85rem;
  }
  .topo[data-menu="fechado"] .topo-painel { display: none; }
  .topo[data-menu] .topo-painel .menu {
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--fio);
  }
  .topo[data-menu] .topo-painel .menu a {
    display: block;
    padding: 0.7rem 0.15rem;
  }
  .topo[data-menu] .topo-painel .topo-acoes {
    margin-left: 0;
    padding-top: 0.75rem;
  }
}

/* ---------- seções ---------- */

.secao { padding: clamp(3rem, 8vw, 4.5rem) 0; }
.secao-alternada { background: var(--fundo-suave); }

h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }

.sobrancelha {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--verde-tinta);
  margin: 0 0 0.5rem;
}
.lider { font-size: 1.075rem; color: var(--tinta); margin: 0 0 1rem; }
.secao-intro { color: var(--tinta-suave); max-width: 46rem; margin: 0 0 1.75rem; }

/* ---------- hero ---------- */

.hero-grade { display: grid; gap: 2.25rem; align-items: start; }
@media (min-width: 960px) {
  .hero-grade { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}
.hero-fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--tinta-suave);
}
.hero-fatos li { padding-left: 1.4rem; position: relative; }
.hero-fatos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--verde);
}

/* ---------- cartão do formulário ---------- */

.cartao-form {
  background: var(--fundo);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 1.5rem;
}
.secao-hero { background: var(--fundo-suave); }
.intro-form { color: var(--tinta-suave); margin: 0 0 1.25rem; }
.intro-form a, .nota-lgpd a, .dica a { color: var(--verde-tinta); }

.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.campo input[type="email"],
.campo input[type="tel"],
.campo select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--fio-forte);
  border-radius: 6px;
}

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 96px;
  padding: 1rem;
  text-align: center;
  background: var(--fundo);
  border: 2px dashed var(--fio-forte);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover { border-color: var(--verde-tinta); }
.dropzone:focus-within {
  outline: 3px solid var(--verde-tinta);
  outline-offset: 2px;
}
.dropzone-arrastando {
  border-color: var(--verde-tinta);
  background: var(--fundo-suave);
}
.dropzone-acao { margin: 0; font-weight: 600; color: var(--tinta); }
.dropzone-info { margin: 0; font-size: 0.85rem; color: var(--tinta-suave); }
.entrada-arquivo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.arquivo-nome {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--verde-tinta);
  overflow-wrap: anywhere;
}
.dica { color: var(--tinta-suave); font-size: 0.875rem; margin: 0.35rem 0 0; }
.erro {
  color: #8c2f24;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.35rem 0 0;
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #8c2f24;
  border-width: 2px;
}
.dropzone:has(.entrada-arquivo[aria-invalid="true"]) { border-color: #8c2f24; }

/* D8: aviso honesto de falha do envio da isca (mesma família visual dos
   estados de erro do modal de trial). */
.isca-erro-envio {
  border: 1px solid #8c2f24; /* vermelho de erro fixo da família */
  border-radius: 8px;
  color: #8c2f24;
  background: #fdf1ef; /* par claro do vermelho (tinta ~7:1 sobre ele) */
  padding: 0.75rem 0.8rem;
  margin-top: 0.85rem;
}
.isca-erro-envio p { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.9rem; }

.obrigado { border-top: 1px solid var(--fio); margin-top: 1rem; padding-top: 1rem; }
.obrigado h3 { color: var(--verde-tinta); }
.obrigado p { margin: 0; color: var(--tinta-suave); }

.nota-lgpd {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--fio-forte);
  border-radius: 8px;
  cursor: pointer;
  /* v7/3 (06-M02): transição de cor/opacidade nos tokens de movimento */
  transition: background-color var(--dur-curta) var(--ease),
    border-color var(--dur-curta) var(--ease),
    color var(--dur-curta) var(--ease),
    opacity var(--dur-curta) var(--ease);
}
.btn-primario {
  background: var(--verde);
  border-color: var(--verde);
  color: #ffffff;
}
.btn-primario:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn:hover:not(:disabled) { background: var(--fundo-suave); }
.btn-primario:hover:not(:disabled) { background: var(--verde-escuro); }
/* v7/3 (06-M02): retorno de pressão - deslocamento sutil, sem escala */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primario:active:not(:disabled) { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-largo { width: 100%; }
.btn-menor { min-height: 36px; padding: 0.3rem 0.85rem; font-size: 0.9rem; }

/* ---------- painel MoA ---------- */

.moa-painel {
  background: var(--fundo);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 1.25rem;
}
.moa-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.moa-status {
  margin: 0 0 0 auto;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.moa-personas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}
.persona {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--fio-forte);
  border-radius: 999px;
  color: var(--tinta-suave);
  background: var(--fundo);
  /* v7/3 (06-M05): a persona ativa troca com transição, não a seco */
  transition: background-color var(--dur-curta) var(--ease),
    border-color var(--dur-curta) var(--ease),
    color var(--dur-curta) var(--ease);
}
.persona-ativa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #ffffff;
}
.persona-mestre { border-style: double; border-width: 3px; }

.moa-fluxo {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--fundo-suave);
  border: 1px solid var(--fio);
  border-radius: 6px;
  font-family: var(--fonte-mono);
  font-size: 0.875rem;
  min-height: 3rem;
}
.moa-linha {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--fio);
  /* v7/3 (06-M05): cada linha entra com fade + subida curta; o kill-switch
     de reduced-motion zera a duração (revelação instantânea) */
  animation: entrada-linha var(--dur-media) var(--ease) both;
}
@keyframes entrada-linha {
  from { opacity: 0; transform: translateY(3px); }
}
.moa-linha:last-child { border-bottom: none; }
.moa-vazio {
  margin: 0;
  font-family: var(--fonte);
  color: var(--tinta-suave);
}
.moa-etiqueta {
  flex: 0 0 auto;
  min-width: 9.5rem;
  font-weight: 700;
  color: var(--verde-tinta);
}
.moa-texto { flex: 1 1 auto; }

.moa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--fio-forte);
  border-radius: 999px;
  background: var(--fundo);
  white-space: nowrap;
}
.chip-ok { border-color: var(--verde-tinta); color: var(--verde-tinta); }
.chip-pendente { color: var(--tinta); }

/* ---------- conformidade ---------- */

.lista-conformidade { margin: 0; display: grid; gap: 1.25rem; }
.item-conformidade { border-bottom: 1px solid var(--fio); padding-bottom: 1.25rem; }
.item-conformidade:last-child { border-bottom: none; padding-bottom: 0; }
.item-conformidade dt {
  font-weight: 700;
  color: var(--verde-tinta);
  margin-bottom: 0.3rem;
}
.item-conformidade dd { margin: 0; color: var(--tinta-suave); }
.item-conformidade dd a { color: var(--verde-tinta); }
@media (min-width: 860px) {
  .lista-conformidade { grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; }
  .item-conformidade { border-bottom: 1px solid var(--fio); }
}

/* ---------- planos ---------- */

.grade-planos { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .grade-planos { grid-template-columns: repeat(3, 1fr); }
}
.cartao-plano {
  position: relative; /* v7/3 (00a-F01): âncora do chip fora do fluxo */
  background: var(--fundo);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.preco { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.preco .valor { font-size: 2rem; font-weight: 700; }
.preco .periodo { color: var(--tinta-suave); }
.assentos { margin: 0; color: var(--tinta-suave); font-weight: 600; }
.recursos {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.2rem;
  color: var(--tinta-suave);
  display: grid;
  gap: 0.4rem;
  flex: 1 1 auto;
}
.cartao-plano .btn { margin-top: auto; }
/* v7/3 (00a-F01): chip fora do fluxo do cartão - o bloco de preço dos 3
   planos volta a alinhar na mesma linha (o chip não empurra mais nada). */
.plano-chip {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde-tinta);
  border: 1px solid var(--verde-tinta);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background: var(--fundo);
}
.plano-micro {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  text-align: center;
}
.plano-secundario {
  margin: 0;
  font-size: 0.875rem;
  color: var(--verde-tinta);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.25rem 0.5rem;
}
.nota-recomendacao { margin-top: -1rem; }

/* ---------- contato ---------- */

.contato-bloco { text-align: center; max-width: 44rem; }
.contato-bloco .btn { width: min(100%, 22rem); margin: 0 auto; }
.contato-bloco .nota-lgpd { text-align: center; }
.nota-chatwoot {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--tinta-suave);
  font-style: italic;
}

/* ---------- rodapé ---------- */

.rodape {
  border-top: 1px solid var(--fio);
  background: var(--fundo-suave);
  padding: 2rem 0;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}
.rodape-marca { margin: 0 0 0.75rem; font-weight: 600; color: var(--tinta); }
.rodape-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0;
}
.rodape-links a { color: var(--verde-tinta); text-decoration: underline; text-underline-offset: 3px; }
.rodape-nota { margin: 0.3rem 0 0; }
.mkt-link-preferencias {
  font: inherit;
  color: var(--verde-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- modal de trial (funil sem login, D3; grama do mockup marketing) ---------- */

.mkt-modal-veu {
  position: fixed;
  inset: 0;
  background: rgb(10 15 20 / 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  z-index: 50;
  overflow-y: auto;
}
.mkt-modal-veu[hidden] { display: none; }
.mkt-modal-caixa {
  position: relative;
  background: var(--fundo);
  color: var(--tinta);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio);
  padding: 1.5rem 1.75rem;
  width: min(30rem, 100%);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
.mkt-modal-fechar {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-suave);
  background: var(--fundo);
  border: 1px solid var(--fio);
  border-radius: 8px;
  cursor: pointer;
}
.mkt-modal-fechar:hover { background: var(--fundo-suave); }
.mkt-trial-plano-chip {
  align-self: flex-start;
  margin: 0 0 0.5rem;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde-tinta);
  border: 1px solid var(--verde-tinta);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.mkt-trial-plano-preco {
  margin: -0.25rem 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinta);
}
.mkt-modal-caixa h2 { margin-top: 0; }
.mkt-trial-ok-titulo { color: var(--verde-tinta); margin-top: 0; }
.mkt-trial-erro {
  border: 1px solid #8c2f24; /* vermelho de erro fixo da família */
  border-radius: 8px;
  color: #8c2f24;
  background: #fdf1ef; /* par claro do vermelho (tinta ~7:1 sobre ele) */
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}
.mkt-trial-offline {
  border: 1px solid #b45309; /* âmbar de aviso fixo da família (offline é aviso, não erro) */
  border-radius: 8px;
  color: #78350f;
  background: #fef3c7;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}
/* v7 linha 11 (X07): mensagem própria de contato inválido no modal (validação
   por canal no app.js); mesma família do vermelho de erro, escala de campo. */
.mkt-erro-contato {
  color: #8c2f24;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.3rem 0 0;
}

/* 375px: modal ocupa a folga da tela (mesma regra do mockup) */
@media (max-width: 480px) {
  .mkt-modal-veu { padding: 2vh 0.6rem; }
  .mkt-modal-caixa { padding: 1.25rem 1rem; }
}

/* ---------- páginas de confiança (plano v4, linha 5) ----------
   Grama do mockup aprovado (tests/uiux/fixtures/marketing @ 427bfde,
   marketing.css), portada com os tokens desta folha. */

.mkt-confianca { padding: 2.5rem 0 3.5rem; }
.mkt-confianca h1 { margin-bottom: 0.4rem; }
.mkt-confianca h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.6rem;
  color: var(--verde-tinta);
}
.mkt-confianca p { max-width: 46rem; }
/* Links de prosa: o azul default do UA quebra o contraste AA no tema escuro
   (linha 7 - o token deriva par seguro por tema, como .mkt-migalhas a). */
.mkt-confianca a { color: var(--verde-tinta); }
.mkt-migalhas {
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
  color: var(--tinta-suave);
}
.mkt-migalhas a { color: var(--verde-tinta); }
.mkt-confianca-meta {
  color: var(--tinta-suave);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}
.mkt-lista-simples {
  max-width: 46rem;
  padding-left: 1.3rem;
  margin: 0 0 1rem;
  color: var(--tinta-suave);
}
.mkt-lista-simples li { margin-bottom: 0.35rem; }
.mkt-stub {
  font-style: italic;
  color: var(--tinta-suave);
  border-bottom: 1px dashed var(--fio-forte);
}

.mkt-tabela-envolve { overflow-x: auto; margin: 0.75rem 0 1.5rem; max-width: 100%; }
.mkt-tabela {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92rem;
}
.mkt-tabela caption {
  text-align: left;
  color: var(--tinta-suave);
  font-size: 0.85rem;
  padding-bottom: 0.4rem;
}
.mkt-tabela th, .mkt-tabela td {
  border: 1px solid var(--fio);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.mkt-tabela thead th { background: var(--fundo-suave); color: var(--tinta); }
.mkt-tabela tbody th { color: var(--tinta); font-weight: 600; }
.mkt-tabela tbody td { color: var(--tinta-suave); }

/* ---------- estados de veredito (página relatorio-exemplo, plano v6 linha 8b)
   Pares claros fixos (padrão .mkt-trial-erro): não derivam de token para
   seguirem legíveis nos 3 temas do contrato uiux; espelham .pass/.fail/
   .bloqueada do relatório real (AuditorService.RenderHtml). */

.mkt-veredito {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid;
  padding: 0.1rem 0.55rem;
}
.mkt-veredito-ok {
  color: #14532d; /* verde-tinta da família sobre par claro próprio */
  border-color: #14532d;
  background: #e8f1ea;
}
.mkt-veredito-falha {
  color: #8c2f24; /* vermelho de erro fixo da família */
  border-color: #8c2f24;
  background: #fdf1ef;
}
.mkt-veredito-bloqueio {
  color: #78350f; /* âmbar de aviso fixo da família */
  border-color: #b45309;
  background: #fef3c7;
}

/* ---------- entradas animadas (v7/3) ----------
   06-M04: o modal de trial para de teleportar - véu faz fade e a caixa
   entra com fade + subida de 8px em 180ms. A saída permanece instantânea
   (padrão entrar devagar, sair rápido); o foco segue indo ao primeiro
   campo no mesmo instante, sem esperar a animação. O kill-switch de
   reduced-motion no topo da folha zera ambas. */

.mkt-modal-veu:not([hidden]) { animation: entrada-veu var(--dur-entrada) var(--ease); }
.mkt-modal-caixa { animation: entrada-modal var(--dur-entrada) var(--ease); }
@keyframes entrada-veu { from { opacity: 0; } }
@keyframes entrada-modal { from { opacity: 0; transform: translateY(8px); } }

/* ---------- degradação sem JavaScript (v7/5) ----------
   23-R06: aviso honesto quando o navegador não executa scripts - a
   leitura segue disponível; os funis e o chat não funcionam. O bloco só
   renderiza dentro de <noscript>: com JS ativo o navegador trata o
   conteúdo como texto bruto e nada aparece (capturas inalteradas). */
.mkt-noscript {
  margin: 0 auto 1rem;
  max-width: 60rem;
  padding: 0.75rem 1rem;
  border: 1px solid #14532d;
  border-left: 0.4rem solid #14532d;
  background: #e8f1ea;
  color: #1f2937;
  font-size: 0.95rem;
}
.mkt-noscript a { color: #14532d; }


/* ---------- seção O produto: capturas reais (v7/7) ---------- */

.mkt-produto-galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.mkt-produto-figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mkt-produto-imagem {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  box-shadow: 0 2px 10px rgb(27 42 51 / 0.08);
}

.mkt-produto-figura figcaption {
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

@media (min-width: 860px) {
  .mkt-produto-galeria { grid-template-columns: repeat(3, 1fr); }
}