/* =====================================================================
   ui2 f-uau: landing da versao gratis (/auto-updater-gratis/).
   O grosso vem do components.css (uhero, sec-head, ustart, ufeat, shot,
   feats, tbl, cta-band) e do f-uau.css (fu-tile, fu-ok, fu-sr, fu-dl-alt);
   aqui fica so o que esta pagina tem de proprio. So tokens:
   nenhum hex novo. Transicao .2s ease; nada anima com movimento reduzido.
   ===================================================================== */

/* TOM VERDE (pedido do Marcus, 15/10/2026: "tom mais esverdeado pra o usuario
   diferenciar" do resto do site, que e vinho/coral). So o CONTEUDO da landing: o
   <body> ganha .ui2-uau-gratis pelo id da rota, e os tokens trocam dentro do
   .ui2-main, entao cabecalho e rodape seguem os do site. Tudo deriva do --green do
   tokens.css (branco sobre ele: 5,36:1); o tom escuro (7,72:1) e misturado com preto, sem hex novo. */
.ui2-uau-gratis .ui2-main {
  --fg-verde: var(--green);
  --fg-verde-ink: color-mix(in srgb, var(--green) 78%, black);
  --fg-verde-glow: color-mix(in srgb, var(--green) 16%, transparent);
  --accent: var(--fg-verde); --accent-ink: var(--fg-verde-ink); --accent-soft: var(--green-soft);
  --coral: color-mix(in srgb, var(--green) 70%, white);
  --btn-bg: var(--fg-verde); --btn-bg-h: var(--fg-verde-ink);
  --btn-sh: 0 14px 30px -12px color-mix(in srgb, var(--green) 55%, transparent);
  --eyebrow-fg: var(--fg-verde-ink); --eyebrow-bd: 1px solid color-mix(in srgb, var(--green) 22%, white);
  --band-bg: color-mix(in srgb, var(--green-soft) 55%, var(--surface-2));
  --grad-brand: linear-gradient(100deg, var(--fg-verde-ink) 0%, var(--fg-verde) 100%);
  --grad-warm: linear-gradient(100deg, var(--fg-verde) 0%, var(--fg-verde-ink) 100%);
}
/* os dois brilhos do hero sao rgba fixos no components.css (vinho e ardosia): aqui, verde */
.ui2-uau-gratis .fg-hero::before {
  background: radial-gradient(620px 320px at 16% 6%, var(--fg-verde-glow), transparent 70%),
              radial-gradient(720px 360px at 86% 0%, var(--fg-verde-glow), transparent 70%);
}
.ui2-uau-gratis .ui2-main .btn--primary:hover { box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--green) 70%, transparent); }
/* a faixa final ja e verde: o botao principal dela vira branco com texto verde */
.ui2-uau-gratis .fg-cta .btn--primary { background: var(--surface); color: var(--fg-verde-ink); }
.ui2-uau-gratis .fg-cta .btn--primary:hover { background: var(--green-soft); }
/* secoes alternadas com um fio de verde, para a pagina inteira ler diferente */
.ui2-uau-gratis .ui2-main .sec--alt { background: color-mix(in srgb, var(--green-soft) 40%, var(--surface-2)); }

/* o problema: texto a esquerda, "sem x com" a direita */
.fg-dor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fg-dor h2 { margin-top: 14px; }
.fg-dor p { margin-top: 14px; color: var(--text); }
.fg-vs { display: grid; gap: 0; padding: 8px 26px; }
.fg-vs li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; }
.fg-vs li + li { border-top: 1px dashed var(--line); }
.fg-vs h3 { font-size: 1rem; }
.fg-vs p { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }

/* como funciona: quatro cartoes numerados, o ultimo em verde */
.fg-how { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 32px; counter-reset: fg-how; }
.fg-how li { position: relative; padding: 24px 22px 22px; counter-increment: fg-how; }
.fg-how li::before { content: "0" counter(fg-how); position: absolute; top: 22px; right: 22px; font: 800 13px/1 var(--font-display); letter-spacing: .08em; color: var(--muted); }
.fg-how h3 { margin-top: 18px; font-size: 1.05rem; }
.fg-how p { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.fg-how--ok { background: linear-gradient(180deg, var(--green-soft), var(--surface) 70%); }
.fg-how--ok::before { color: var(--green); }

/* o que vem no gratis: a grade .feats em tres colunas */
.fg-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }

/* privacidade: faixa unica, sem secao alternada em volta */
.fg-priv-sec { padding-block: calc(var(--sec-y) * .6); }
.fg-priv { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-items: start; padding: 30px 32px; border-radius: var(--r-card); background: var(--green-soft); }
.fg-priv h3 { font-size: 1.2rem; }
.fg-priv p { margin-top: 6px; color: var(--text); max-width: 80ch; }
.fg-priv .fu-tile { background: var(--surface); }

/* gratis x planos: tres colunas, a do gratis em verde. SEM o .ulimits da landing:
   no celular ele empilha cada linha com rotulo por coluna, que aqui so tem duas */
.fg-cmp { overflow: hidden; }
.fg-cmp .tbl th:not(:first-child), .fg-cmp .tbl td { width: 140px; text-align: center; }
.fg-cmp .tbl tbody th { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); text-align: left; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.fg-cmp .tbl tbody tr:last-child th { border-bottom: 0; }
.fg-cmp .tbl tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.fg-cmp .hlc { background: var(--green-soft); }
.fg-cmp .fu-ok { display: inline-block; vertical-align: middle; }
.fg-no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--muted); opacity: .45; vertical-align: middle; }
.fg-cmp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 18px; font-size: var(--fs-sm); color: var(--text); }

/* instalacao: botao centralizado abaixo dos tres passos */
.fg-inst-cta { justify-content: center; margin-top: 28px; }

@media (max-width: 980px) {
  .fg-dor { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fg-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fg-how, .fg-feats { grid-template-columns: minmax(0, 1fr); }
  .fg-vs { padding: 4px 18px; }
  .fg-priv { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .fg-cmp .tbl th:not(:first-child), .fg-cmp .tbl td { width: 62px; padding-inline: 6px; }
  .fg-cmp .tbl tbody th { padding: 12px; }
  .fg-hero .hero-cta .btn { width: 100%; justify-content: center; }
}