/* =====================================================================
   ui2 (remodelacao v2) - COMPONENTES
   ---------------------------------------------------------------------
   Estrutura do mockup gpltimes-uau (css/base.css, commit e47379fc) com a
   pele B fixada: reset, cromo (promo, barra utilitaria, cabecalho, barra
   de categorias), faixa de pagina, secoes, botoes, pilulas, abas, form,
   cartoes, listas, tabela, nota, passos, faixa CTA, blocos da home, planos,
   depoimentos, FAQ, rodape, moldura de print e entrada dos blocos.
   Pagina de familia so acrescenta em css/pages/<familia>.css.
   So entra no HTML do operador (ver includes/ui2/assets.php).
   ===================================================================== */
/* ------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--h-w);
  letter-spacing: var(--h-ls);
  line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ----------------------------------------------------------- utilidades */
.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* duas larguras (pedido do Marcus, 11/10/2026; medido a 1920: site de hoje 1400, gpltimes 1230-1260,
   gpldownloads 1400): 1240 nas paginas de venda, que e o padrao; 1400 nas de listagem e de conta.
   O cromo (faixa promo, barra utilitaria, topo, menu e rodape) fica SEMPRE em 1400, para o logo e o
   menu nao pularem de lugar entre paginas. O gutter nao muda. */
.up-promo-in, .up-util-in, .up-hdr-in, .up-nav-in, .up-ftr > .wrap { max-width: var(--wrap-wide); }
html[data-ui2^="catalogo-"], html[data-ui2^="landing-"], html[data-ui2="changelog"], html[data-ui2="atualizacoes"],
html[data-ui2="estatisticas"], html[data-ui2="mais-baixados"], html[data-ui2="novidades"], html[data-ui2="conta"], html[data-ui2="conta-historico"],
html[data-ui2="conta-afiliado"], html[data-ui2="conta-editar"], html[data-ui2="conta-favoritos"], html[data-ui2="conta-sites"] { --wrap: var(--wrap-wide); } /* toda a conta em 1400: a coluna nao pula ao trocar de secao sem recarregar */
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.mut { color: var(--muted); }
.ink { color: var(--ink); }
.sm { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.center { text-align: center; }
.flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.g2, .g3, .g4 { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.with-side { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.sticky { position: sticky; top: 20px; }

/* ================================================================ CROMO */
.up-top { position: relative; z-index: 40; }

/* 1. promo */
.up-promo { background: var(--promo-bg); color: var(--promo-fg); font-size: var(--fs-xs); }
.up-promo-in { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; position: relative; padding-right: 48px; }
.up-promo-tag {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill); background: rgba(0,0,0,.16); /* escurece em vez de clarear: 2,51:1 virou mais de 5:1 (A4) */
}
.up-promo-txt b { font-weight: 700; }
.up-promo-cta {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill); background: var(--btn-bg); color: #fff; /* texto branco: o coral de acao (A4) */
}
.up-promo-x {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.1);
}

/* 2. utilitaria */
.up-util { background: var(--util-bg); color: var(--util-fg); font-size: var(--fs-xs); }
.up-util-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; }
.up-util-proof { display: inline-flex; align-items: center; gap: 7px; }
.up-util-proof .i { color: var(--green); width: 15px; height: 15px; }
.up-util-proof b { font-weight: 700; }
.up-util-pills {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  border: 1px solid var(--util-line);
}
.up-util-pills a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: var(--r-pill); font-weight: 600; transition: background .2s ease;
}
.up-util-pills a:hover { background: rgba(255,255,255,.07); }
.up-util-pills a.is-on { background: var(--util-on-bg); color: var(--util-on-fg); }
.up-util-plans {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  padding: 5px 14px; border-radius: var(--r-pill); border: 1px solid var(--util-line);
}

/* 3. marca + busca + conta + cesta */
.up-hdr { background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line); }
.up-hdr-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 28px; min-height: 86px;
}
.up-burger { display: none; width: 42px; height: 42px; border: var(--bd); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; place-items: center; }
.up-burger .i { width: 20px; height: 20px; }
.up-logo { height: 48px; width: auto; } /* era 42px; 48px pedido do Marcus (11/10/2026) */
.up-search { position: relative; width: 100%; max-width: 640px; justify-self: center; }
.up-search-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; }
.up-search input {
  width: 100%; height: 52px; padding: 0 60px 0 48px; font: inherit; font-size: var(--fs-sm);
  color: var(--ink); background: var(--surface-2); border: var(--bd); border-radius: var(--r-ctl);
  transition: border-color .2s ease, background .2s ease;
}
.up-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.up-search button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; cursor: pointer; display: grid; place-items: center;
  border-radius: var(--r-ctl); background: var(--btn-bg); color: var(--btn-fg);
}
.up-search button .i { width: 18px; height: 18px; }
.up-hdr .up-acc, .up-hdr .up-cart { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink); }
.up-acc-ico, .up-acc-av, .up-cart-ico {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
}
.up-acc-ico { background: var(--accent-soft); color: var(--accent); }
.up-acc-ico .i, .up-cart-ico .i { width: 19px; height: 19px; }
.up-acc-av { background: var(--plum); color: var(--on-dark); font: 700 15px/1 var(--font-display); }
.up-acc-txt { display: flex; flex-direction: column; line-height: 1.2; }
.up-acc-txt b { font-weight: 600; }
.up-acc-txt small { font-size: 11.5px; color: var(--muted); }
.up-cart-ico { background: var(--btn-bg); color: var(--btn-fg); }
.up-cart-txt { font-weight: 600; }
.up-cart-n {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--btn-bg); color: #fff; font: 700 10.5px/18px var(--font-body); text-align: center; /* A4 */
  border: 2px solid var(--hdr-bg);
}

/* 4. barra de categorias */
.up-nav { background: var(--nav-bg); color: var(--nav-fg); border-bottom: 1px solid var(--nav-line); }
.up-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.up-nav-list { display: flex; align-items: center; gap: 4px; }
.up-nav-it { position: relative; }
.up-nav-a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm);
  transition: background .2s ease, color .2s ease;
}
.up-nav-a .i { width: 18px; height: 18px; }
.up-nav-a .up-nav-caret { width: 14px; height: 14px; opacity: .7; }
.up-nav-a:hover { background: var(--nav-hover); }
.up-nav-a.is-on { background: var(--nav-on-bg); color: var(--nav-on-fg); }
.up-drop {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 230px; padding: 8px;
  background: var(--surface); color: var(--text); border: var(--bd); border-radius: var(--r-card);
  box-shadow: var(--sh-pop); opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 50;
}
.up-drop a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.up-drop a:hover { background: var(--surface-2); color: var(--ink); }
.up-drop a:last-child { color: var(--accent); font-weight: 600; }
/* menu suspenso com icone (Web Templates, 12/10/2026): itens de mesmo peso, sem o "ver tudo" em destaque */
.up-drop--ico { min-width: 250px; }
.up-drop--ico a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; white-space: nowrap; }
.up-drop--ico a:last-child { color: inherit; font-weight: inherit; }
.up-drop-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.up-drop-ico .i { width: 15px; height: 15px; }
.up-nav-it.has-drop:hover .up-drop,
.up-nav-it.has-drop:focus-within .up-drop { opacity: 1; visibility: visible; transform: none; }
.up-nav-help {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-weight: 600;
  font-size: var(--fs-sm); border-radius: var(--r-pill); border: 1px solid var(--nav-line);
}
.up-nav-help .i { width: 18px; height: 18px; }
.up-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }

/* ======================================================= FAIXA DE PAGINA */
/* O "band" do gpltimes: migalha, titulo, uma linha e chips de prova. */
.band { background: var(--band-bg); border-bottom: 1px solid var(--line-soft); padding: 34px 0 40px; }
/* fundo dos heros no modelo do mockup "plataforma" (pedido do Marcus, 11/10/2026): dois brilhos
   suaves, vinho no alto a esquerda e ardosia no alto a direita, e uma grade de linhas de 56px que
   some pelas bordas. Vale para o hero da home, as faixas de pagina (.band), /auto-updater/ (.uhero),
   /planos/ (.ph) e a entrada da conta (.login); a pagina do plano tem o degrade proprio (.pv-hero).
   As camadas ficam atras do conteudo (z-index negativo dentro do proprio bloco) e cabem na caixa,
   entao nada precisa de overflow escondido (dropdown dentro da faixa continua saindo dela). */
.hero, .band, .uhero, .ph, .login { position: relative; isolation: isolate; }
:is(.hero, .band, .uhero, .ph, .login)::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(620px 320px at 16% 6%, rgba(138, 79, 102, .14), transparent 70%),
              radial-gradient(720px 360px at 86% 0%, rgba(79, 90, 117, .15), transparent 70%);
}
:is(.hero, .band, .uhero, .ph, .login)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000 25%, transparent 75%);
}
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 12px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span::before { content: "/"; margin-right: 6px; opacity: .6; }
.band h1 { font-size: var(--fs-h1); }
.band-lead { margin-top: 10px; font-size: var(--fs-lead); color: var(--text); max-width: 64ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* faixa compacta do catalogo (11/10/2026): metade do respiro, titulo um passo menor, lead
   numa linha (reticencias) e as pilulas na mesma linha quando cabem */
.band--compacta { padding: 30px 0; } /* era 18px 0 20px (pedido do Marcus, 12/10/2026) */
.band--compacta .crumbs { margin-bottom: 8px; }
.band--compacta h1 { font-size: var(--fs-h2); }
.band-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.band-title-row h1 { min-width: 0; }
.band--compacta .band-lead { max-width: none; margin: 6px 0 0; font-size: var(--fs-body, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band--compacta .chips { flex: 0 1 auto; min-width: 0; margin: 0; gap: 8px; }
.band--compacta .chip { padding: 5px 11px; font-size: 13px; }
.band--compacta .chip .i { width: 14px; height: 14px; }
/* a frase quebra linha ate 900 px: a 768 o en/es cortava com reticencias (revisao geral de 12/10/2026) */
@media (max-width: 900px) {
  .band--compacta .band-lead { white-space: normal; }
}
@media (max-width: 640px) {
  .band--compacta { padding: 14px 0 16px; }
  .band--compacta .chips { flex: 1 1 100%; min-width: 0; }
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: var(--fs-sm);
  background: var(--surface); border: var(--bd); border-radius: var(--r-pill); color: var(--ink);
}
.chip .i { color: var(--accent); width: 16px; height: 16px; }

/* ============================================================== SECOES */
.sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.sec--alt { background: var(--surface-2); }
.sec--tight { padding-block: calc(var(--sec-y) * .6); }
.sec-head { max-width: 720px; }
.sec-head p { margin-top: 12px; color: var(--text); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head--split > div { max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 5px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  text-transform: var(--eyebrow-tt); letter-spacing: var(--eyebrow-ls);
  background: var(--eyebrow-bg); color: var(--eyebrow-fg); border: var(--eyebrow-bd);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hl { color: var(--accent); }
.lead { font-size: var(--fs-lead); color: var(--text); }

/* ============================================================== BOTOES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r-ctl); border: 1px solid transparent;
  font: 600 var(--fs-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn .i { width: 18px; height: 18px; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-sh); }
.btn--primary:hover { background: var(--btn-bg-h); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn--soft:hover { background: var(--accent); color: #fff; }
.btn--dark { background: var(--ink); color: var(--surface); }
.btn--ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
.btn--sm { height: 36px; padding: 0 14px; font-size: var(--fs-xs); }
.btn--sm .i { width: 15px; height: 15px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* BOTOES: hover mais vivo e seta animada (pedido do Marcus, 11/10/2026)
   - todo botao sobe 2px no hover, com sombra, e afunda no clique;
   - o principal ganha um brilho que atravessa da esquerda para a direita (camada atras do
     texto: z-index negativo dentro do proprio botao isolado);
   - a seta (icone 'arrow', classe i--seta posta por up_ui2_icone) sai pela direita e volta
     pela esquerda; o icone de link externo da um passo para cima e para a direita;
   - com movimento reduzido nada se mexe: so a cor e a sombra mudam. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.btn--primary:hover { box-shadow: 0 18px 34px -14px rgba(242, 114, 106, .75); }
.btn--ghost:hover, .btn--soft:hover, .btn--dark:hover, .btn--ok:hover { box-shadow: 0 12px 26px -14px rgba(28, 32, 48, .35); }
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
  transform: skewX(-20deg);
}
.btn--primary:hover::after { animation: up-brilho .8s ease; }
@keyframes up-brilho { to { left: 130%; } }
.i--seta, .i--fora { transition: transform .25s ease; }
a:hover .i--seta, button:hover .i--seta, a:focus-visible .i--seta, button:focus-visible .i--seta { animation: up-seta .6s cubic-bezier(.55, 0, .3, 1); }
@keyframes up-seta {
  0% { transform: translateX(0); opacity: 1; }
  42% { transform: translateX(11px); opacity: 0; }
  43% { transform: translateX(-11px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
a:hover .i--fora, a:focus-visible .i--fora { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  .btn--primary:hover::after { animation: none; }
  a:hover .i--seta, button:hover .i--seta, a:focus-visible .i--seta, button:focus-visible .i--seta { animation: none; }
  a:hover .i--fora, a:focus-visible .i--fora { transform: none; }
}

/* ========================================================== PILULAS */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; white-space: nowrap;
  border-radius: var(--r-pill); font: 500 11px/1.45 var(--font-body);
  background: var(--surface-3); color: var(--text);
}
.pill .i { width: 12px; height: 12px; }
.pill--ver { font-family: var(--font-mono); font-weight: 600; background: var(--green-soft); color: var(--green); }
.pill--ok { background: var(--green-soft); color: var(--green); }
.pill--warn { background: var(--amber-soft); color: var(--amber); }
.pill--danger { background: var(--danger-soft); color: var(--danger); }
.pill--accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill--dark { background: var(--ink); color: var(--surface); }
.pill--line { background: transparent; border: var(--bd); }
.pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================ ABAS */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs > a, .tabs > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; cursor: pointer;
  border-radius: var(--r-pill); border: var(--bd); background: var(--surface);
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink); transition: all .2s ease;
}
.tabs > * small { font-size: 11px; font-weight: 600; color: var(--muted); }
.tabs > .is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tabs > .is-on small { color: inherit; opacity: .7; }
.seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface-3); border-radius: var(--r-pill); }
.seg > a, .seg > button {
  padding: 7px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm);
  border: 0; background: none; cursor: pointer; color: var(--text);
}
.seg > .is-on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-card); }

/* ============================================================ FORM */
.field { display: block; }
.field + .field { margin-top: 16px; }
.field > span { display: block; margin-bottom: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.input, .select {
  width: 100%; height: 50px; padding: 0 16px; font: inherit; font-size: var(--fs-sm); color: var(--ink);
  background: var(--surface); border: var(--bd); border-radius: var(--r-ctl);
  transition: border-color .2s ease;
}
.input:focus, .select:focus { outline: none; border-color: var(--accent); }
.select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727584' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.input-ico { position: relative; }
.input-ico > .i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; }
.input-ico > .input { padding-left: 44px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

/* ============================================================ CARTOES */
.card { background: var(--surface); border: var(--bd); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.card-pad { padding: 24px; }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.card-hd h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.card-ft { padding: 14px 22px; border-top: 1px solid var(--line-soft); }

/* capa tipografica: a maioria do acervo nao tem capa, entao a capa e o
   monograma do item sobre a cor da pele (cada pele desenha o seu ::after) */
.thumb {
  position: relative; overflow: hidden; display: grid; place-items: center; align-content: center; text-align: center;
  aspect-ratio: 16 / 10; border-radius: var(--r-thumb); background: var(--th, var(--th1)); color: var(--th-fg);
}
.thumb[data-c="2"] { --th: var(--th2); } .thumb[data-c="3"] { --th: var(--th3); }
.thumb[data-c="4"] { --th: var(--th4); } .thumb[data-c="5"] { --th: var(--th5); }
.thumb[data-c="6"] { --th: var(--th6); }
.thumb b { position: relative; z-index: 1; font: var(--h-w) 2.3rem/1 var(--font-display); letter-spacing: -.02em; }
.thumb small { position: relative; z-index: 1; display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(20,22,34,.5); }
/* a categoria da capa ganhou fundo solido: com opacity .78 direto no gradiente dava 1,94 a 3,8:1 */
.thumb--sq { aspect-ratio: 1; }
.thumb--sq b { font-size: 1.15rem; }
.thumb--sq small { display: none; }

/* capa real do item (as mesmas do site): substitui o monograma quando existe */
.thumb--img { background: var(--surface-2); aspect-ratio: 345 / 254; }
.thumb--img.thumb--sq { aspect-ratio: 1; }
/* capa v2 (12/10/2026): 590x300 no formato do ThemeForest/CodeCanyon, com UP_CAPAS_V2 */
.thumb--img.thumb--v2 { aspect-ratio: 590 / 300; }
.thumb--img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb.thumb--img::after { content: none; }

/* cartao de produto, no modelo dos cartoes da capa do gpltimes (11/10/2026): a
   capa de ponta a ponta no topo, o nome em negrito e a categoria embaixo. A versao
   e o primeiro selo sobre a capa (no lugar do UAU); a data fica na linha da categoria. */
.pcard { display: flex; flex-direction: column; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pcard:hover { transform: translateY(var(--lift)); box-shadow: var(--sh-hover); }
/* moldura branca de 6px nos cartoes de item (pedido do Marcus, 12/10/2026), menos na home e nas
   landings (/temas-wordpress-premium/, /plugins-wordpress-premium/, /auto-updater/), que seguem com o fio */
.pcard { border: 6px solid var(--surface); }
:is(.ui2-home, .ui2-landing-temas, .ui2-landing-plugins, .ui2-uau) .pcard { border: var(--bd); }
.pcard-media { position: relative; padding: 0; border-bottom: 1px solid var(--line-soft); }
.pcard-media .thumb { border-radius: 0; }
.pcard-flags { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 5px; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.pcard-title { margin: 0; font: 600 .94rem/1.32 var(--font-display); /* 600 (pedido do Marcus, 12/10/2026) */ letter-spacing: -.01em; color: var(--ink); } /* um pouco menor (pedido do Marcus, 11/10/2026) */
/* a versao ao lado do nome (11/10/2026), na mesma linha quando cabe */
.pcard-title .pcard-v { position: relative; top: -1px; margin-left: 2px; padding: 2px 6px; font-size: 10.5px; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.pcard-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 5px; }
.pcard-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.pcard-date { flex: none; font-size: 11.5px; color: var(--muted); }

@media (max-width: 640px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .pgrid .pcard-body { padding: 11px 12px 13px; }
  .pgrid .pcard-title { font-size: .9rem; }
  .pgrid .pcard-sub { flex-direction: column; gap: 2px; margin-top: 4px; }
  .pgrid .pcard-cat { font-size: var(--fs-xs); }

  .pgrid .thumb b { font-size: 1.7rem; }
}

/* ============================================================== LISTAS */
.checks li { position: relative; padding-left: 27px; font-size: var(--fs-sm); }
.checks li + li { margin-top: 9px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 17px; height: 17px;
  background: var(--ico-check) no-repeat center / contain;
}
.checks--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.checks--2 li + li { margin-top: 0; }

/* =========================================================== PAGINACAO */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center;
  border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm);
}
.pager a { border: var(--bd); background: var(--surface); color: var(--ink); }
.pager a.is-on { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.pager .i { width: 16px; height: 16px; }

/* ============================================================== TABELA */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 11px 18px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }

/* ============================================================== MEDIDOR */
.meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--v, 50%); background: var(--green); border-radius: inherit; }

/* =============================================================== NOTA */
.note { border: 1px solid var(--amber-soft); background: var(--amber-soft); border-radius: var(--r-card); padding: 14px 18px; font-size: var(--fs-sm); }
.note-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--amber); }
.note-hd .i { width: 16px; height: 16px; }

/* ===================================================== PASSOS (carrinho) */
.steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.step { display: inline-flex; align-items: center; gap: 8px; }
.step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-body); font-style: normal; border: var(--bd); background: var(--surface); }
.step.is-on { color: var(--ink); font-weight: 600; }
.step.is-on i { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.step.is-done i { background: var(--green-soft); color: var(--green); border-color: transparent; }
.step + .step::before { content: ""; width: 34px; height: 1px; background: var(--line); margin-right: 4px; }
/* faixa da compra (carrinho e checkout): so as etapas, centradas e em destaque (12/10/2026) */
.hck-band { padding: 26px 0 28px; }
.hck-band .wrap { display: flex; justify-content: center; }
.hck-band .steps { margin: 0; gap: 14px; flex-wrap: nowrap; padding: 10px 22px 10px 12px; border: var(--bd); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-card); font-size: var(--fs-body); font-weight: 600; }
.hck-band .step { gap: 10px; }
.hck-band .step i { width: 36px; height: 36px; font-size: 14px; }
.hck-band .step i .i { width: 16px; height: 16px; stroke-width: 2.4; }
.hck-band .step.is-on i { box-shadow: 0 0 0 5px var(--accent-soft); }
.hck-band .step.is-done { color: var(--ink); }
.hck-band .step + .step::before { width: 72px; height: 2px; border-radius: 2px; margin-right: 4px; }
.hck-band .step.is-done + .step::before { background: var(--green); }
@media (max-width: 640px) {
  .hck-band { padding: 18px 0 20px; }
  .hck-band .steps { gap: 6px; padding: 6px 12px 6px 6px; font-size: var(--fs-xs); }
  .hck-band .step { gap: 6px; }
  .hck-band .step i { width: 26px; height: 26px; font-size: 12px; }
  .hck-band .step.is-on i { box-shadow: 0 0 0 3px var(--accent-soft); }
  .hck-band .step + .step::before { width: 12px; margin-right: 0; }
}
/* tela estreita: so a etapa atual mostra o nome (as outras seguem para o leitor de tela) */
@media (max-width: 380px) {
  .hck-band .step:not(.is-on) { gap: 0; font-size: 0; }
}

/* ===================================================== FAIXA CTA ESCURA */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px 32px; border-radius: var(--r-card); background: var(--plum); color: var(--on-dark-mut);
}
.cta-band h3 { color: var(--on-dark); font-size: 1.3rem; }
.cta-band p { margin-top: 4px; font-size: var(--fs-sm); }
.cta-band .btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--plum-line); }

/* =========================================================== HOME: HERO */
.hero { background: var(--hero-bg); color: var(--hero-fg); padding: 60px 0 70px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 { font-size: var(--fs-display); color: var(--hero-fg); line-height: 1.04; }
.hero h1 .hl { display: block; }
.hero-lead { margin: 20px 0 28px; font-size: var(--fs-lead); color: var(--hero-mut); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: var(--fs-sm); color: var(--hero-mut); }
.hero-checks span { display: inline-flex; align-items: center; gap: 7px; }
.hero-checks .i { color: var(--green); width: 17px; height: 17px; }
.hero-art { position: relative; min-height: 380px; display: grid; align-items: center; }


/* arte B: colagem de cartoes que flutuam sobre o gradiente */
.art-stack { position: relative; height: 430px; }
.art-blob { position: absolute; inset: 20px 10px 10px 40px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--th1); opacity: .95; }
.art-card { position: absolute; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-pop); padding: 14px; width: 230px; }
.art-card .thumb { margin-bottom: 10px; }
.art-card > b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.art-card .flex { margin-top: 8px; gap: 6px; }
.art-card--1 { left: 0; top: 30px; transform: rotate(-5deg); }
.art-card--2 { right: 10px; top: 0; transform: rotate(4deg); }
.art-card--3 { left: 170px; bottom: 0; transform: rotate(-1deg); width: 250px; z-index: 2; }
.art-badge { position: absolute; z-index: 3; right: 0; bottom: 60px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--sh-pop); font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.art-badge .i { width: 22px; height: 22px; color: var(--green); }


/* ===================================================== HOME: POR QUE */
.why { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.why h2 .hl { display: block; }
.why-lead { margin-top: 14px; max-width: 46ch; }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0; background: var(--surface); border: var(--bd); border-radius: var(--r-card); overflow: hidden; }
.stat { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.stat:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat b { display: block; font: var(--h-w) 1.75rem/1.1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.stat b sup { font-size: .6em; color: var(--accent); }
.stat span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.feat { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.feat-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent); }
.feat-ico .i { width: 20px; height: 20px; }
.feat h3 { font-size: 1rem; }
.feat p { margin-top: 5px; font-size: var(--fs-sm); color: var(--muted); }

/* ============================================== ESPIAR O CATALOGO (home, planos) */
.peek-tabs { margin: 28px 0 22px; }
.peek-foot { margin-top: 18px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }

/* ============================================== BANNER DO ANUAL (home) */
.annual { display: grid; grid-template-columns: 190px minmax(0, 1fr) 360px; overflow: hidden; }
.annual-ico { display: grid; place-items: center; align-content: center; gap: 10px; background: var(--accent-soft); color: var(--accent); border-right: 1px solid var(--line-soft); }
.annual-ico .i { width: 54px; height: 54px; stroke-width: 1.4; }
.annual-ico small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.annual-main { padding: 28px 32px; align-self: center; }
.annual-main h3 { font-size: var(--fs-h2); }
.annual-main .hl { white-space: nowrap; }
.annual-main .checks { margin-top: 16px; }
.annual-price { padding: 26px 28px; background: var(--surface-2); border-left: 1px solid var(--line-soft); }
.annual-big { display: flex; align-items: baseline; gap: 10px; }
.annual-big b { font: var(--h-w) 2.6rem/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; }
.annual-big span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.bars { margin: 16px 0 18px; display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.bar i { height: 6px; border-radius: var(--r-pill); background: var(--line); display: block; }
.bar i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--muted); }
.bar.is-on i::after { background: var(--accent); }
.bar b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar s { color: var(--muted); }

/* ============================================================ PLANOS */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; }
.plan-name { font: 700 1.1rem/1.2 var(--font-display); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-sub { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.plan-quota { align-self: flex-start; margin-top: 14px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.plan-price s { font-size: var(--fs-sm); color: var(--muted); }
.plan-price b { font: var(--h-w) 2.5rem/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; }
.plan-price b small { font-size: .5em; letter-spacing: 0; margin-right: 2px; }
.plan-price > span { font-size: var(--fs-sm); color: var(--muted); }
.plan-equiv { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.plan .checks { margin: 20px 0 24px; }
.plan .btn { margin-top: auto; }
.plan-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }
.plan--feat { background: var(--plum); border-color: transparent; box-shadow: var(--sh-pop); }
.plan--feat .plan-name, .plan--feat .plan-price b { color: var(--on-dark); }
/* no destaque o texto todo fica branco (pedido do Marcus, 10/10) */
.plan--feat .plan-sub, .plan--feat .plan-equiv, .plan--feat .plan-price > span { color: var(--on-dark); }
.plan--feat .plan-price s { color: var(--on-dark); opacity: .85; }
.plan--feat .pill--line { color: var(--on-dark); border-color: rgba(255,255,255,.35); }
.plan--feat .checks li { color: var(--on-dark); }
/* planos em 3 (js/planos.js): limites em pilulas, seletores de prazo e moeda */
.plan-quotas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.plan-quotas .plan-quota { margin-top: 0; }
.plans-ctl { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg > a .pill { margin-left: 6px; }
.seg--cur > button { padding-inline: 12px; font-size: var(--fs-xs); }
.plans--3 .plan .btn { margin-top: 22px; }
.plans--3 .plan .checks { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.plans--3 .plan--feat .checks { border-top-color: var(--plum-line); }
.plans-foot { margin-top: 22px; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.plans-foot span { display: inline-flex; align-items: center; gap: 6px; }
.plans-foot .i { width: 15px; height: 15px; }
.plans-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }

/* linha "outras formas de pagar" (planos) */
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 16px 20px; }
.plan-row b { color: var(--ink); }
.plan-row .plan-row-price { text-align: right; }
.plan-row .plan-row-price b { font: var(--h-w) 1.5rem/1 var(--font-display); }
.plan-row .plan-row-price small { display: block; font-size: 11px; color: var(--muted); }

/* ======================================================== DEPOIMENTOS */
.reviews-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rating { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.rating > b { font: var(--h-w) 2.4rem/1 var(--font-display); color: var(--ink); }
.stars { display: inline-flex; gap: 2px; color: var(--amber); }
.stars .i { width: 15px; height: 15px; fill: currentColor; }
.stars .i.is-off { opacity: .25; }
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 18px; overflow-x: auto; padding: 6px 2px 14px; margin-top: 28px; scroll-snap-type: x mandatory; }
.review { scroll-snap-align: start; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.review q { font-size: var(--fs-sm); color: var(--ink); quotes: "\201C" "\201D"; }
.review-by { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--muted); }
.review-by i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-body); font-style: normal; background: var(--accent-soft); color: var(--accent-ink); }
.review-by b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.placeholder-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--amber); background: var(--amber-soft); padding: 4px 10px; border-radius: var(--r-pill); }

/* ================================================== FAQ EM DOIS PAINEIS */
.faq2 { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; }
.faq2-list { display: grid; gap: 6px; }
.faq2-q {
  display: grid; grid-template-columns: 34px 1fr 16px; gap: 12px; align-items: center; text-align: left;
  padding: 11px 14px; border-radius: var(--r-card); border: 1px solid transparent; background: none;
  cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); transition: all .2s ease;
}
.faq2-q > .i:first-child { width: 34px; height: 34px; padding: 8px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--muted); }
.faq2-q > .i:last-child { width: 16px; height: 16px; color: var(--muted); }
.faq2-q:hover { background: var(--surface); }
.faq2-q.is-on { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-card); }
.faq2-q.is-on > .i:first-child { background: var(--btn-bg); color: var(--btn-fg); }
.faq2-a { padding: 34px 36px; min-height: 340px; display: flex; flex-direction: column; }
.faq2-a h3 { font-size: var(--fs-h2); margin-top: 6px; }
.faq2-a p { margin-top: 14px; color: var(--text); max-width: 60ch; }
.faq2-a .faq2-more { margin-top: auto; padding-top: 26px; font-size: var(--fs-sm); color: var(--muted); }
.faq2-a .faq2-more a { color: var(--accent); font-weight: 600; }

/* =====================================================================
   FAQ POR TEMAS (11/10/2026; markup em ui2/components/faq.php)
   ---------------------------------------------------------------------
   Fichas de tema no topo filtram a lista; as perguntas sao uma lista
   numerada, sem caixa (so fios finos), com o selo do tema na cor dele, e a
   resposta abre logo abaixo da pergunta (acordeao, uma por vez, na altura
   do texto); a ajuda vem numa linha so, no fim. Substitui na /planos/ e no
   /auto-updater/ o FAQ em dois paineis (.faq2, acima: caixa cinza com o
   cartao de resposta de altura fixa), que lembrava o do gpltimes. Filtro,
   acordeao e transicoes: ui2.js, bloco "FAQ POR TEMAS". So tokens.
   ===================================================================== */
.faqt { margin-top: 34px; }
/* cor de cada tema, em duotom (ficha, selo): 1 vinho, 2 ardosia, 3 ambar, 4 verde */
.faqt-c1 { --faqt-bg: var(--accent-soft); --faqt-fg: var(--accent-ink); }
.faqt-c2 { --faqt-bg: var(--surface-3); --faqt-fg: var(--brand-slate); }
.faqt-c3 { --faqt-bg: var(--amber-soft); --faqt-fg: var(--amber); }
.faqt-c4 { --faqt-bg: var(--green-soft); --faqt-fg: var(--green); }

/* fichas de tema (largura do .wrap, numa linha so no desktop): a ativa ganha o
   gradiente da marca, numa camada que acende sem salto */
.faqt-temas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.faqt-tema {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 8px 5px 5px;
  border: var(--bd); border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  font: 600 var(--fs-sm)/1.2 var(--font-body); cursor: pointer; transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.faqt-tema::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--grad-brand); opacity: 0; transition: opacity .25s ease; }
.faqt-tema:hover { border-color: var(--faqt-fg, var(--accent)); }
.faqt-tema-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--faqt-bg, var(--surface-3)); color: var(--faqt-fg, var(--ink)); transition: background .25s ease, color .25s ease; }
.faqt-tema-ico .i { width: 16px; height: 16px; }
.faqt-tema b { min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font: 700 11.5px/1 var(--font-display); transition: background .25s ease, color .25s ease; }
.faqt-tema.is-on { color: var(--on-dark); border-color: transparent; box-shadow: var(--sh-card); }
.faqt-tema.is-on::before { opacity: 1; }
.faqt-tema.is-on .faqt-tema-ico { background: var(--nav-hover); color: var(--on-dark); }
.faqt-tema.is-on b { background: var(--nav-line); color: var(--on-dark); }

/* lista numerada, sem caixa: so um fio fino entre as perguntas e muito respiro.
   A aberta ganha o fio de cima no gradiente da marca (corre da esquerda), o numero
   no gradiente e o + coral que vira -. A resposta abre logo abaixo, na altura do
   texto (sem painel de altura fixa). */
.faqt-lista { display: grid; align-content: start; max-width: 880px; margin: 32px auto 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.faqt-it { position: relative; border-top: 1px solid var(--line); }
.faqt-it::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.faqt-it.is-open::before { transform: none; }
.faqt-h { font-size: inherit; line-height: inherit; }
.faqt-q {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 34px; align-items: center; gap: 14px; width: 100%;
  padding: 22px 2px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer;
  font: 700 1.04rem/1.4 var(--font-display); letter-spacing: -.005em; color: var(--ink);
}
.faqt-txt { transition: color .2s ease; }
.faqt-q:hover .faqt-txt { color: var(--accent-ink); }
.faqt-n { font: 800 .9rem/1 var(--font-display); letter-spacing: .02em; color: var(--muted); transition: color .3s ease; }
.faqt-it.is-open .faqt-n { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* selo do tema: so texto com o ponto na cor do tema */
.faqt-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.faqt-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faqt-fg, var(--muted)); }
/* o + vira - (a barra vertical deita enquanto o circulo gira) */
.faqt-x { position: relative; width: 34px; height: 34px; border-radius: 50%; border: var(--bd); transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.faqt-x::before, .faqt-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .3s ease; }
.faqt-x::after { transform: rotate(90deg); }
.faqt-q:hover .faqt-x { border-color: var(--accent); }
.faqt-it.is-open .faqt-x { background: var(--btn-bg); border-color: var(--btn-bg); transform: rotate(180deg); }
.faqt-it.is-open .faqt-x::before, .faqt-it.is-open .faqt-x::after { background: var(--btn-fg); }
.faqt-it.is-open .faqt-x::after { transform: rotate(0deg); }

/* resposta: alinhada com o texto da pergunta; a altura anima pelo ui2.js */
.faqt-r { overflow: hidden; }
.faqt-r-in { padding: 0 50px 28px 60px; }
.faqt-r-in p { max-width: 66ch; color: var(--text); }
.faqt-r-in p + p { margin-top: 10px; }
.faqt-r-in p a { color: var(--accent); font-weight: 600; }
.faqt-r-in p a:hover { text-decoration: underline; }
.faqt-r-in strong { color: var(--ink); }
.faqt-cta { margin-top: 16px; }

/* ajuda, uma vez so, numa linha leve */
.faqt-ajuda { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 880px; margin: 28px auto 0; font-size: var(--fs-sm); color: var(--muted); }
.faqt-ajuda-ico { flex: none; display: inline-flex; color: var(--accent); }
.faqt-ajuda-ico .i { width: 18px; height: 18px; }
.faqt-ajuda a { color: var(--accent); font-weight: 600; }
.faqt-ajuda a:hover { text-decoration: underline; }

/* entrada nas paginas com rv-on: fichas, perguntas e ajuda sobem em sequencia (ui2.js) */
.rv-on .faqt:not(.is-in) :is(.faqt-temas, .faqt-it, .faqt-ajuda) { opacity: 0; }

@media (max-width: 640px) {
  .faqt { margin-top: 26px; }
  /* no celular as fichas viram uma faixa que rola de lado, de ponta a ponta da tela */
  .faqt-temas {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  }
  .faqt-temas::-webkit-scrollbar { display: none; }
  .faqt-tema { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .faqt-tema { min-height: 40px; gap: 7px; padding-right: 7px; font-size: var(--fs-xs); }
  .faqt-tema-ico { width: 28px; height: 28px; }
  .faqt-tema-ico .i { width: 14px; height: 14px; }
  .faqt-lista { margin-top: 22px; }
  .faqt-q { grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 12px; padding: 18px 0; font-size: .97rem; }
  .faqt-n { font-size: .8rem; }
  .faqt-tag { display: none; }
  .faqt-x { width: 30px; height: 30px; }
  .faqt-r-in { padding: 0 0 22px 38px; }
  .faqt-ajuda { justify-content: flex-start; align-items: flex-start; }
}

/* ============================================================== RODAPE */
.up-ftr { background: var(--ftr-bg); color: var(--on-dark-mut); padding: 60px 0 28px; font-size: var(--fs-sm); } /* sem a borda coral no topo (pedido do Marcus, 11/10) */
.up-ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.up-ftr .up-logo { height: 38px; }
.up-ftr-brand p { margin: 16px 0 20px; max-width: 34ch; }
.up-ftr-social { display: flex; gap: 10px; }
.up-ftr-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--plum-line); color: var(--on-dark); transition: background .2s ease; }
.up-ftr-social a:hover { background: rgba(255,255,255,.08); }
.up-ftr-social .i { width: 18px; height: 18px; }
.up-ftr-col h4 { margin-bottom: 14px; font: 700 11.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }
.up-ftr-col a { display: block; padding: 5px 0; transition: color .2s ease; }
.up-ftr-col a:hover { color: var(--on-dark); }
.up-ftr-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--plum-line); font-size: var(--fs-xs); line-height: 1.7; }
.up-ftr-legal b { color: var(--on-dark); }
.up-ftr-bottom { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--plum-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs); }
.up-pay { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.up-pay i { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 4px; background: #fff; color: #1d1d24; font: 700 10.5px/1 var(--font-body); font-style: normal; }
.up-pay .i { width: 11px; height: 11px; color: #32bcad; }


/* ============================================================ RESPONSIVO */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annual { grid-template-columns: minmax(0, 1fr) 340px; }
  .annual-ico { display: none; }
  .up-ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .up-ftr-brand { grid-column: 1 / -1; }
  .faq2 { grid-template-columns: 340px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .up-burger { display: grid; }
  .up-hdr-in { grid-template-columns: auto auto 1fr auto; grid-template-areas: "burger brand acc cart" "search search search search"; gap: 12px 16px; padding-block: 12px; min-height: 0; }
  .up-burger { grid-area: burger; }
  .up-brand { grid-area: brand; }
  .up-hdr .up-acc { grid-area: acc; justify-self: end; }
  .up-cart { grid-area: cart; }
  .up-search { grid-area: search; max-width: none; }
  .up-search input { height: 46px; }
  .up-nav { display: none; }
  .nav-open .up-nav { display: block; }
  .nav-open .up-nav-in { flex-direction: column; align-items: stretch; padding-block: 10px; }
  .nav-open .up-nav-list { flex-direction: column; align-items: stretch; }
  .nav-open .up-drop { display: none; }
  .up-util-proof, .up-util-plans { display: none; }
  .up-util-in { justify-content: center; }
  .hero-grid, .why, .with-side, .with-aside, .faq2 { grid-template-columns: minmax(0, 1fr); }
  .hero-art { min-height: 0; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans--3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .annual { grid-template-columns: minmax(0, 1fr); }
  .annual-price { border-left: 0; border-top: 1px solid var(--line-soft); }
  .sticky { position: static; }
}
@media (max-width: 640px) {
  html:root { --gutter: 16px; } /* vence o :root das peles, que carregam depois */
  .up-promo-tag, .up-promo-cta { display: none; }
  .up-promo-in { justify-content: flex-start; padding-right: 40px; min-height: 36px; }
  .up-util-pills a:not(.is-on) { display: none; }
  .up-util-pills { border: 0; }
  .up-acc-txt, .up-cart-txt { display: none; }
  .up-logo { height: 34px; }
  .g2, .g3, .g4, .plans, .feats, .checks--2 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 40px 0 48px; }
  .art-stack { height: 330px; }
  .art-card { width: 180px; }
  .art-card--3 { left: 40px; width: 210px; }
  .art-ledger-hd b { font-size: 3rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .bar { grid-template-columns: 96px 1fr 62px; }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-row .btn { grid-column: 1 / -1; }
  .faq2-a { padding: 24px; min-height: 0; }
  .up-ftr-grid { grid-template-columns: 1fr 1fr; }
  .tbl th, .tbl td { padding: 11px 12px; }
}

/* =====================================================================
   VARIANTE "UAU" (11/10/2026): o layout da v2 fica como esta; entram so
   a secao do Auto Updater na home (prints reais do plugin), a pagina
   auto-updater.html e alguns detalhes do rodape atual do ultrapackv2.com.
   So tokens; as tres peles mudam o resto.
   ===================================================================== */

/* ------------------------------------------- moldura dos prints do plugin */
.shot-wrap { position: relative; }
.shot { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--surface); border: var(--bd); box-shadow: var(--sh-pop); }
.shot-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); font-size: 11.5px; color: var(--muted); }
.shot-bar > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.shot-bar > span { margin-left: 8px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-img { display: block; width: 100%; height: auto; }
.shot--crop .shot-img { aspect-ratio: 1404 / 820; object-fit: cover; object-position: top left; }
.shot .shot-img--dark { display: none; }
.shot.is-dark .shot-img--dark { display: block; }
.shot.is-dark .shot-img--light { display: none; }
.shot-mode {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; cursor: pointer;
  border-radius: var(--r-pill); border: var(--bd); background: var(--surface); color: var(--ink); font: 600 11px/1 var(--font-body);
}
.shot-mode .i { width: 13px; height: 13px; }
.shot-float {
  position: absolute; width: 34%; right: -22px; bottom: -26px; border-radius: var(--r-sm); overflow: hidden;
  border: var(--bd); background: var(--surface); box-shadow: var(--sh-pop);
}
.shot-float img { display: block; width: 100%; height: auto; }

/* --------------------------------------------- HOME: secao do Auto Updater */
.uau-tour { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 30px; }
.uau-tabs { display: grid; gap: 6px; }
.uau-tab {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 13px 14px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer; background: none;
  border: 1px solid transparent; border-radius: var(--r-sm); transition: background .2s ease, border-color .2s ease;
}
.uau-tab:hover { background: var(--surface-2); }
.uau-tab.is-on { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-card); }
.uau-tab-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--surface-3); color: var(--muted); transition: background .2s ease, color .2s ease; }
.uau-tab.is-on .uau-tab-ico { background: var(--btn-bg); color: var(--btn-fg); }
.uau-tab-ico .i { width: 19px; height: 19px; }
.uau-tab b { display: block; padding-top: 2px; font: 700 .98rem/1.3 var(--font-display); color: var(--ink); }
.uau-tab small { display: none; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.uau-tab.is-on small { display: block; }
.uau-more { margin: 14px 0 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.uau-more .i { width: 15px; height: 15px; }

/* TROCA ANIMADA DAS TELAS (11/10/2026): os paineis ficam empilhados na mesma
   celula do grid, entao a moldura guarda a altura durante a troca; quem anima
   e o ui2.js (bloco "TROCA ANIMADA DE PAINEL"), so sem movimento reduzido.
   A descricao da aba ativa abre deslizando, em vez de aparecer de uma vez. */
.uau-stage[data-troca] { display: grid; }
.uau-stage[data-troca] > [data-pane] { grid-area: 1 / 1; min-width: 0; }
.uau-stage[data-troca] > .is-entra { z-index: 1; }
.uau-stage .shot-img { transform-origin: 50% 0; backface-visibility: hidden; }
.uau-tab > span:last-child { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .34s cubic-bezier(.2, .7, .2, 1); }
.uau-tab.is-on > span:last-child { grid-template-rows: auto 1fr; }
.uau-tab small { display: block; min-height: 0; overflow: hidden; margin-top: 0; padding-top: 4px; opacity: 0; transition: opacity .25s ease; }
.uau-tab.is-on small { opacity: 1; transition-delay: .08s; }
@media (max-width: 980px) {
  .uau-tab small { display: none; }
}

/* ------------------------------------------------- PAGINA DO AUTO UPDATER */
.uhero { background: var(--band-bg); border-bottom: 1px solid var(--line-soft); padding: 42px 0 0; overflow: hidden; }
.uhero-head { max-width: 820px; margin-inline: auto; text-align: center; }
.uhero h1 { margin-top: 18px; font-size: var(--fs-display); line-height: 1.04; }
.uhero h1 .hl { display: block; }
.uhero-lead { margin: 18px auto 0; max-width: 62ch; font-size: var(--fs-lead); color: var(--text); }
.uhero .hero-cta { justify-content: center; margin-top: 26px; }
.uhero-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: var(--fs-sm); color: var(--muted); }
.uhero-chips span { display: inline-block; }
.uhero-chips b { color: var(--ink); }
.uhero-chips .i { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--green); }
.uhero-shot { max-width: 1080px; margin: 44px auto -1px; }
.uhero-shot .shot { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }

.ustart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; counter-reset: ust; }
.ustep { position: relative; padding: 24px 24px 22px; border-radius: var(--r-card); background: var(--surface); border: var(--bd); box-shadow: var(--sh-card); }
.ustep::before {
  counter-increment: ust; content: counter(ust); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font: 700 14px/1 var(--font-display);
}
.ustep h3 { font-size: 1.05rem; }
.ustep p { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.ustep code { font: 600 .82em/1 var(--font-mono); color: var(--ink); background: var(--surface-2); padding: 2px 6px; border-radius: 4px; }

.ufeat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.ufeat + .ufeat { margin-top: 96px; }
.ufeat--flip > :first-child { order: 2; }
.ufeat-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ufeat-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.ufeat h2 { margin-top: 12px; font-size: var(--fs-h2); }
.ufeat > div > p { margin-top: 14px; color: var(--text); }
.ufeat .checks { margin-top: 18px; }
.ufeat-note { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line); font-size: var(--fs-xs); color: var(--text); }

.umore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.umore-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--surface); border: var(--bd); box-shadow: var(--sh-card); }
.umore-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.umore-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.umore-card div { padding: 18px 20px 20px; }
.umore-card h3 { font-size: 1rem; }
.umore-card p { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }

.ulimits { overflow-x: auto; }
.ulimits table { min-width: 600px; }
.ulimits th:not(:first-child), .ulimits td { text-align: center; }
.ulimits tbody th { border-bottom: 1px solid var(--line-soft); padding: 13px 18px; text-align: left; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.ulimits tbody th small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.ulimits .hlc { background: var(--accent-soft); }

/* ------------------------------------- rodape: detalhes do rodape atual */
.up-ftr-col .ftr-sub { margin-top: 20px; }
.up-ftr-col .ftr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.up-ftr-col .ftr-pills a { display: inline-flex; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--plum-line); font-size: 12px; font-weight: 600; }
.up-ftr-col .ftr-pills a.is-on { background: var(--on-dark); color: var(--plum); border-color: transparent; }
.ftr-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--plum-line); }
.ftr-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ftr-logos small { font: 700 10.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mut); }
.ftr-logos img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .65; transition: opacity .2s ease; }
.ftr-logos a:hover img { opacity: 1; }
.ftr-pix { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--font-display); color: var(--on-dark); opacity: .65; }
.ftr-pix .i { width: 15px; height: 15px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* alvos de toque de pelo menos 24 px no celular: links legais, migalhas e sociais (revisao geral de 12/10/2026) */
@media (max-width: 640px) {
  .ftr-links a, .crumbs a, .ftr-soc { display: inline-flex; align-items: center; min-height: 24px; }
}
.ftr-links a:hover { color: var(--on-dark); }
.ftr-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(60,207,134,.14); color: #8fe0b5; font-weight: 600; }
.ftr-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ccf86; box-shadow: 0 0 0 3px rgba(60,207,134,.25); }

@media (max-width: 1100px) {
  .uau-tour { grid-template-columns: 270px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 980px) {
  .uau-tour { grid-template-columns: minmax(0, 1fr); }
  .uau-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  /* o trilho rola por dentro e nao alarga a pagina (vazava 29px a 320px): o pai em grade precisa min-width 0 */
  .uau-tabs { min-width: 0; max-width: 100%; }
  :has(> .uau-tabs) { min-width: 0; }
  .uau-tab { grid-template-columns: 34px minmax(0, 1fr); padding: 10px 12px; }
  .uau-tab b { white-space: nowrap; padding-right: 4px; }
  .uau-tab-ico { width: 34px; height: 34px; }
  .uau-tab.is-on small { display: none; }
  .ufeat, .ufeat--flip { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ufeat--flip > :first-child { order: 0; }
  .ufeat + .ufeat { margin-top: 64px; }
  .umore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ustart { grid-template-columns: minmax(0, 1fr); }
  .shot-float { right: 10px; bottom: -18px; width: 40%; }
}
@media (max-width: 640px) {
  .umore { grid-template-columns: minmax(0, 1fr); }
  .uhero-shot { margin-top: 30px; }
  .shot-bar > span { display: none; }
  .shot-float { display: none; }
  .ftr-trust { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   TOPO MENOS GPLTIMES (variante uau, 11/10): os atalhos da barra escura
   deixam de ser o grupo segmentado com a pilula branca; viram links
   soltos com icone em ladrilho colorido, contador e ponto de novidade.
   O item ativo do menu ganha um traco coral embaixo no lugar da pilula
   branca, conta e cesta viram ladrilhos, o CTA da faixa vira link.
   --------------------------------------------------------------------- */
.up-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ccf86; flex: none; }
.up-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3ccf86; opacity: .5; animation: up-pulse 2s ease-out infinite; }
@keyframes up-pulse { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }

.up-ul-nav { display: flex; align-items: center; gap: 4px; }
.up-ul { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: var(--r-sm); font-weight: 600; color: var(--util-fg); opacity: .82; transition: background .2s ease, opacity .2s ease; }
.up-ul + .up-ul::before { content: ""; position: absolute; left: -3px; top: 50%; width: 1px; height: 16px; transform: translateY(-50%); background: var(--util-line); }
.up-ul:hover { opacity: 1; background: rgba(255,255,255,.06); }
.up-ul.is-on { opacity: 1; color: #fff; }
.up-ul-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); }
.up-ul-ico .i { width: 15px; height: 15px; }
.up-ul--upd .up-ul-ico { color: #ff9a8f; }
.up-ul--uau .up-ul-ico { color: #5fd69a; }
.up-ul--news .up-ul-ico { color: #f6c26b; }
.up-ul.is-on .up-ul-ico { background: var(--coral); color: #fff; }
.up-ul-badge { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.12); color: #fff; }
.up-ul-dot { width: 7px; height: 7px; border-radius: 50%; background: #f6c26b; box-shadow: 0 0 0 3px rgba(246,194,107,.2); }
.up-util-plans { border: 0; padding: 5px 4px; color: #ff9a8f; }
.up-util-plans:hover { color: #fff; }

.up-promo-tag .i { width: 14px; height: 14px; }
.up-promo-cta { background: none; padding: 4px 2px; border-radius: 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.up-promo-cta:hover { text-decoration-thickness: 2.5px; }

.up-acc-ico, .up-cart-ico, .up-acc-av { border-radius: var(--r-sm); }

.up-nav-a { position: relative; }
.up-nav-a.is-on { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.up-nav-a.is-on::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -10px; height: 3px; border-radius: 3px 3px 0 0; background: var(--coral);
}
.up-nav-help { border: 0; background: rgba(255,255,255,.12); }
.up-dot--on { background: #3ccf86; box-shadow: 0 0 0 3px rgba(60,207,134,.25); }
/* item Atualizacoes do menu (leva ao changelog; pedido do Marcus, 11/10/2026): SO uma bolinha
   maior que pisca, sem icone e sem texto. O nome fica escondido (leitor de tela e dica do mouse)
   e volta a aparecer no menu do celular, onde uma bolinha sozinha nao diria nada.
   O miolo pisca e um anel coral se espalha; com movimento reduzido fica so a bolinha parada */
.up-nav-a--pulso { padding-inline: 16px; }
.up-nav-pulso-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.nav-open .up-nav-pulso-txt { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
/* hover no ponto que pisca: o nome "Atualizacoes" abre para a ESQUERDA, por cima, sem empurrar o menu
   (pedido do Marcus, 12/10/2026). So com mouse; o leitor de tela le o texto como antes. */
@media (hover: hover) and (pointer: fine) {
  .up-nav-a--pulso { position: relative; z-index: 4; } /* o rotulo passa por cima do item vizinho */
  .up-nav-it:has(> .up-nav-a--pulso) { position: relative; z-index: 4; }
  .up-nav-a--pulso .up-nav-pulso-txt {
    top: 50%; right: calc(100% - 6px); width: auto; height: auto; margin: 0; clip: auto;
    max-width: 0; padding: 7px 0; overflow: hidden; opacity: 0; transform: translateY(-50%);
    border-radius: var(--r-pill); background: var(--nav-on-bg); color: var(--nav-on-fg); box-shadow: var(--sh-card);
    font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; pointer-events: none; z-index: 5;
    transition: max-width .3s ease, padding .3s ease, opacity .2s ease;
  }
  .up-nav-a--pulso:is(:hover, :focus-visible) .up-nav-pulso-txt { max-width: 180px; padding: 7px 14px; opacity: 1; }
  .up-nav-a--pulso .up-nav-pulso-txt { display: inline-flex; align-items: center; gap: 6px; }
  .up-nav-a--pulso .up-nav-pulso-txt .i { flex: none; width: 14px; height: 14px; } /* seta a esquerda do nome */
  .nav-open .up-nav-a--pulso .up-nav-pulso-txt .i { display: none; }
  /* sem espaco a esquerda (janela estreita: o menu comeca rente a borda), abre para a direita (ui2.js) */
  .up-nav-a--pulso.abre-direita .up-nav-pulso-txt { right: auto; left: calc(100% - 6px); }
  .nav-open .up-nav-a--pulso .up-nav-pulso-txt { position: static; max-width: none; padding: 0; opacity: 1; transform: none; background: none; box-shadow: none; color: inherit; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .up-nav-a--pulso .up-nav-pulso-txt { transition: none; } }
.up-pulse { --pulso-miolo: #ff8f87; position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--coral); animation: up-pisca 1.4s ease-in-out infinite; }
/* miolo vermelho claro e menos saturado, dentro da bolinha (pedido do Marcus, 11/10/2026). Medidas
   de mesma paridade (13px e um ponto de 3px, inset inteiro de 5px) para o miolo cair no centro. Fica firme
   enquanto o coral em volta pisca */
.up-pulse::before { content: ""; position: absolute; inset: 5px; z-index: 1; border-radius: 50%; background: var(--pulso-miolo); }
/* sem a pilula do menu: nem fundo no hover, nem fundo e risco quando a pagina e a do changelog
   (pedido do Marcus, 11/10/2026); o foco do teclado continua com o contorno de sempre */
.up-nav-a.up-nav-a--pulso:hover, .up-nav-a.up-nav-a--pulso.is-on { background: transparent; box-shadow: none; color: inherit; }
.up-nav-a.up-nav-a--pulso.is-on::after { display: none; }
.up-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--coral); animation: up-pulso 1.6s ease-out infinite; }
@keyframes up-pisca { 50% { background-color: rgba(242,114,106,.4); } }
@keyframes up-pulso { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .up-pulse, .up-pulse::after { animation: none; } .up-pulse::after { display: none; } }


/* rodape: redes com o glifo cheio na cor da marca */
.up-ftr-social { gap: 8px; }
.up-ftr-social .ftr-soc {
  width: auto; height: 40px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 9px;
  padding: 0 14px 0 5px; border: 1px solid var(--plum-line); color: var(--on-dark); font-size: 13px; font-weight: 600;
}
.ftr-soc span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ftr-soc .i { width: 16px; height: 16px; }
.ftr-soc--tg span { background: #229ed9; }
.ftr-soc--fb span { background: #1877f2; }
.ftr-soc--fb .i { width: 17px; height: 17px; }
.up-ftr-social .ftr-soc:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.ftr-pix .i { color: #32bcad; }

@media (max-width: 1100px) {
  .up-ul-badge { display: none; }
}
@media (max-width: 640px) {
  .up-ul:not(.is-on) { display: none; }
  .up-ul { padding-block: 4px; }
}

/* ---------------------------------------------------------------------
   RODAPE E DEPOIMENTOS (variante uau, 11/10): Instagram, pagamento nas
   cores originais em fichas claras, e os depoimentos em duas fileiras que
   andam de lado (para no hover; parada com movimento reduzido).
   --------------------------------------------------------------------- */
.up-ftr-social { flex-wrap: wrap; }
.ftr-soc--ig span { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ftr-soc--ig .i { stroke-width: 2.2; }
.ftr-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ftr-pay a { display: inline-flex; align-items: center; transition: transform .2s ease; }
.ftr-pay a:hover { transform: translateY(-2px); }
.ftr-logos .ftr-pay img { height: 22px; width: auto; filter: none; opacity: 1; }
.ftr-logos .ftr-pay a[title="Mercado Pago"] img { height: 30px; }
.ftr-logos .ftr-pay a[title="Pix"] img { height: 26px; }
/* Telegram, Facebook e Instagram na mesma linha: a coluna da marca fica mais larga */
@media (min-width: 1101px) {
  .up-ftr-grid { grid-template-columns: 2.1fr repeat(4, minmax(0, 1fr)); gap: 28px; }
  .up-ftr-social { flex-wrap: nowrap; gap: 6px; }
  .up-ftr-social .ftr-soc { height: 36px; gap: 7px; padding: 0 11px 0 4px; font-size: 12.5px; }
  .ftr-soc span { width: 28px; height: 28px; }
}

.rev-mq { overflow: hidden; padding: 8px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rev-mq--1 { margin-top: 26px; }
.rev-track { display: flex; gap: 18px; width: max-content; animation: rev-esq 70s linear infinite; }
.rev-mq--2 .rev-track { animation-name: rev-dir; animation-duration: 80s; }
.rev-mq:hover .rev-track { animation-play-state: paused; }
.rev-track .review { width: 330px; flex: none; }
@keyframes rev-esq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rev-dir { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .rev-mq { overflow-x: auto; }
  .rev-track { animation: none; }
}
@media (max-width: 640px) {
  .rev-track .review { width: 280px; }
}

/* idioma e moeda do rodape: selects personalizados. Fechado, mostra a
   bandeira (ou o simbolo da moeda) e o nome; aberto, uma lista clara com o
   escolhido marcado. As bandeiras sao as SVG do seletor do site no ar. */
.ftr-sel { position: relative; }
.ftr-sel summary {
  list-style: none; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 11px 0 10px; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--plum-line); background: rgba(255,255,255,.05);
  color: var(--on-dark); font-size: 13px; font-weight: 600; transition: border-color .2s ease, background .2s ease;
}
.ftr-sel summary::-webkit-details-marker { display: none; }
.ftr-sel summary:hover, .ftr-sel[open] summary { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.09); }
.ftr-sel summary span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftr-sel-car { width: 15px; height: 15px; opacity: .75; transition: transform .2s ease; }
.ftr-sel[open] .ftr-sel-car { transform: rotate(180deg); }
.ftr-sel-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; min-width: 170px;
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 44px -14px rgba(0,0,0,.6);
}
.up-ftr-col .ftr-sel-list a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.up-ftr-col .ftr-sel-list a:hover { background: var(--surface-2); color: var(--ink); }
.up-ftr-col .ftr-sel-list a.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.ftr-sel-list span { flex: 1; white-space: nowrap; }
.ftr-sel-ok { width: 15px; height: 15px; color: var(--accent); opacity: 0; }
.ftr-sel-list a.is-on .ftr-sel-ok { opacity: 1; }
.ftr-flag { display: inline-flex; flex: none; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.ftr-flag svg { display: block; width: 100%; height: 100%; }
.ftr-cur { display: inline-grid; place-items: center; flex: none; min-width: 28px; height: 20px; padding: 0 5px; border-radius: 6px; font: 700 10.5px/1 var(--font-body); font-style: normal; color: #fff; }
.ftr-cur--brl { background: #007a2e; }
.ftr-cur--usd { background: #2f6fd6; }
.ftr-cur--eur { background: #3949ab; }

/* ---------------------------------------------------------------------
   ENTRADA DOS BLOCOS (home, planos e auto updater; variante uau, 11/10).
   O skin.js liga a classe rv-on no <html> antes da primeira pintura (so
   nessas tres paginas e nunca com movimento reduzido); o chrome.js marca
   "is-in" quando o bloco entra na tela. Nos blocos de grupo os itens
   entram em sequencia (--i); terminada a entrada, "rv-done" devolve o
   hover e as transformacoes normais dos cartoes.
   --------------------------------------------------------------------- */
@keyframes rv-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.rv-on :is(.hero-grid > div:first-child, .why > div:first-child, .feats, .sec-head, .ph-head, .uhero-head, .uau-tabs, .pgrid, .plans, .ways, .ustart, .ufeat, .umore, .ucompat, .rev2 > div:first-child) > * { opacity: 0; }
.rv-on :is(.hero-grid > div:first-child, .why > div:first-child, .feats, .sec-head, .ph-head, .uhero-head, .uau-tabs, .pgrid, .plans, .ways, .ustart, .ufeat, .umore, .ucompat, .rev2 > div:first-child).is-in > * { animation: rv-up .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 75ms); }
.rv-on :is(.hero-art, .uau-stage, .uau-more, .peek-tabs, .peek-foot, .annual, .plans-foot, .pick, .or, .rating, .rev-mq, .faq2-box, .cta-band, .uhero-shot, main .card.mt-8, .cmp-note) { opacity: 0; }
.rv-on :is(.hero-art, .uau-stage, .uau-more, .peek-tabs, .peek-foot, .annual, .plans-foot, .pick, .or, .rating, .rev-mq, .faq2-box, .cta-band, .uhero-shot, main .card.mt-8, .cmp-note).is-in { animation: rv-up .75s cubic-bezier(.2, .7, .2, 1) both; }
.rv-on .hero-art.is-in { animation-duration: .95s; animation-delay: .18s; }
.rv-on .rev-mq--2.is-in { animation-delay: .12s; }
.rv-on .rv-done, .rv-on .rv-done.rv-grp > * { opacity: 1 !important; animation: none !important; }

/* depoimentos de Planos: as duas fileiras ocupam a coluna da direita */
.rev2-rows { min-width: 0; display: grid; align-content: center; }
.rev2-rows .rev-mq--1 { margin-top: 0; }

/* select do rodape: a lista abre alinhada pela direita no celular */
@media (max-width: 640px) {
  .ftr-sel-list { left: auto; right: 0; }
}

/* ------------------------------------------------ assinaturas da pele B (Marca) */

/* a palavra-destaque: Fraunces italico com o gradiente quente */
.hl {
  font-family: var(--font-serif); font-style: italic; font-weight: 600; letter-spacing: -.01em;
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow::before { background: var(--coral); }

/* capa: circulo de luz no canto */
.thumb::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; top: -30%;
  border-radius: 50%; background: rgba(255,255,255,.14);
}

/* a barra de categorias e o gradiente; o ativo e a pilula branca */
.up-nav-a.is-on { box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); }
.up-search input { background: #fff; box-shadow: 0 6px 18px -12px rgba(28,32,48,.25); }

/* o gesto da marca: o painel branco sobe e cobre o fim do hero */
.sec--rise { padding-top: 0; }
.sec--rise .rise {
  position: relative; z-index: 2; margin-top: -54px; padding: 44px 44px;
  background: var(--surface); border-radius: 28px; box-shadow: var(--sh-pop);
}
.hero { padding-bottom: 120px; }

/* plano em destaque: o gradiente da marca */
.plan--feat { background: var(--grad-brand); }
.plan--feat .btn--primary { background: #fff; color: #8a4f66; box-shadow: none; }
.plan--feat .pill--accent { background: rgba(255,255,255,.16); color: #fff; }
.plan--feat .plan-flag { background: linear-gradient(180deg, #f0951f, #e2621f); color: var(--ink); }
.plan--feat { --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath d='M7.6 14.3 3.3 10l1.4-1.4 2.9 2.9 7.7-7.7L16.7 5z'/%3E%3C/svg%3E"); }
.cta-band { background: var(--grad-brand); color: rgba(255,255,255,.82); }

/* MARCA D'AGUA (11/10/2026): o simbolo do logo, translucido, saindo pela borda.
   O bloco leva .has-mark; o .up-mark-box recorta pela borda dele (raio herdado) e
   fica atras do conteudo (z-index -1 dentro do isolation do bloco), entao selo
   e faixa que saem do cartao (.plan-flag) continuam inteiros. */
.has-mark { position: relative; isolation: isolate; }
.up-mark-box { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.up-mark { position: absolute; right: -70px; top: 50%; width: 320px; height: auto; transform: translateY(-50%) rotate(-8deg); color: var(--on-dark); opacity: .08; }
.up-mark path { fill: currentColor; }
.up-mark-box--band .up-mark { width: clamp(420px, 38vw, 700px); right: -7vw; top: 58%; }
.up-mark-box--card .up-mark { width: 300px; right: -100px; top: auto; bottom: -90px; transform: rotate(-8deg); opacity: .07; }
.up-mark-box--claro .up-mark { width: clamp(560px, 52vw, 1000px); right: -14vw; top: 46%; color: var(--brand-wine); opacity: .045; }
@media (max-width: 640px) {
  .up-mark-box--band .up-mark { width: 360px; right: -140px; }
  .up-mark-box--claro .up-mark { width: 420px; right: -200px; top: 22%; }
}
.annual-ico { background: var(--grad-brand); color: #fff; border-right: 0; }

/* arte B: o blob e o gradiente */
.art-blob { background: var(--grad-brand); }

/* ------------------------------------------------ ui2: acrescimos do site */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 600; transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.ftr-pix { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--font-display); color: #32bcad; }
.ftr-pix .i { width: 18px; height: 18px; }
.up-acc-av { text-transform: uppercase; }
.ex-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber); font: 700 10px/1.6 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }

/* barra do operador: so existe no ui2 e diz que esta e a pre-visualizacao */
.ui2-op { position: fixed; left: 14px; bottom: 14px; z-index: 300; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: var(--r-pill); background: #121216; color: #f2f2f5; font: 600 12px/1.2 var(--font-body); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
.ui2-op b { color: #ff9a8f; }
.ui2-op a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: #fff; transition: background .2s ease; }
.ui2-op a:hover { background: rgba(255,255,255,.2); }
.ui2-op button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ui2-op.is-min > :not(button) { display: none; }
/* chave de variante que a familia poe na barra (gancho up_ui2_op_barra), ex.: Lateral Atual | No topo */
.ui2-op-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); }
.ui2-op-seg small { padding: 0 6px 0 8px; font: inherit; color: rgba(242,242,245,.6); }
.ui2-op .ui2-op-seg a { padding: 4px 10px; background: transparent; }
.ui2-op .ui2-op-seg a:hover { background: rgba(255,255,255,.12); }
.ui2-op .ui2-op-seg a[aria-current="true"] { background: #ff9a8f; color: #121216; }
@media (max-width: 640px) {
  .ui2-op { left: 8px; bottom: 8px; padding: 6px 8px 6px 12px; }
  .ui2-op > span { display: none; }
  .ui2-op { max-width: calc(100vw - 16px); flex-wrap: wrap; row-gap: 6px; border-radius: 18px; }
  .ui2-op-seg small { display: none; }
  .up-ul.up-ul--mob { display: inline-flex; }
}

/* pedidos da familia a-home (10/10) */
figure.review { margin: 0; }                       /* <figure> traz 40px de margem do navegador */
@media (max-width: 1100px) and (min-width: 981px) {
  .plans.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* a regra de .plans do 1100 derrubava para 2+1 */
}
@media (max-width: 640px) {
  .sec--rise .rise { margin-top: -40px; padding: 26px 16px; border-radius: var(--r-card); }
}

/* =====================================================================
   REVISAO DE 11/10 (visual e acesso + compatibilidade): o que muda
   ===================================================================== */
/* foco visivel em toda superficie: anel claro com halo escuro nas faixas escuras
   e no gradiente (o vinho do anel padrao sumia sobre o vinho do menu: 1,00:1) */
:focus { outline: 2px solid var(--accent); outline-offset: 2px; }          /* Safari < 15.4 */
:focus:not(:focus-visible) { outline: none; }
.up-promo :focus-visible, .up-util :focus-visible, .up-nav :focus-visible, .up-ftr :focus-visible,
.cta-band :focus-visible, .plan--feat :focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink);
}
/* pilula de limite no plano em destaque (4,34 -> 4,93) */
.plan--feat .pill--line { background: rgba(255,255,255,.10); }
/* meios de pagamento no MESMO estilo de Cloudflare e DigitalOcean (pedido do Marcus,
   11/10/2026): sem ficha clara, monocromaticos claros e esmaecidos, mesma altura e o
   mesmo hover de opacidade; SiteLock e Norton sairam do rodape */
.ftr-logos .ftr-pay a { background: none; padding: 0; border-radius: 0; }
.ftr-logos .ftr-pay a:hover { transform: none; }
.ftr-logos .ftr-pay img, .ftr-logos .ftr-pay a[title="Mercado Pago"] img { height: 22px; filter: brightness(0) invert(1); opacity: .65; transition: opacity .2s ease; }
.ftr-logos .ftr-pay a:hover img { opacity: 1; }
.ftr-logos .ftr-pay .ftr-pix { background: none; padding: 0; border-radius: 0; font-size: 15px; color: var(--on-dark); opacity: .65; transition: opacity .2s ease; }
.ftr-logos .ftr-pay .ftr-pix:hover { opacity: 1; }
.ftr-logos .ftr-pay .ftr-pix .i { color: inherit; }
/* capa sem aspect-ratio (Safari 14): altura pelo padding */
@supports not (aspect-ratio: 1) {
  .thumb { display: block; height: 0; padding-top: 62.5%; }
  .thumb--img { padding-top: 73.6%; }
  .thumb--img.thumb--v2 { padding-top: 50.85%; }
  .thumb--sq, .thumb--img.thumb--sq { padding-top: 100%; }
  .thumb b, .thumb small { position: absolute; left: 0; right: 0; }
  .thumb b { top: 36%; }
  .thumb small { top: 60%; width: max-content; margin: 0 auto; }
}
/* depoimentos: param no hover e no foco (sem botao de pausa desde 11/10/2026, pedido do
   Marcus); com movimento reduzido as copias somem e a faixa nao anda */
/* o .rev-wrap e o item do grid de .rev2-rows: sem min-width 0 a faixa max-content dos
   depoimentos alargava a pagina (rolagem lateral em /planos/) */
.rev-wrap { min-width: 0; }
.rev-mq:focus-within .rev-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rev-track > [aria-hidden="true"] { display: none; }
}
/* menu do celular: o dropdown nao abre ali, entao a setinha nao promete submenu */
.nav-open .up-nav-caret { display: none; }
/* dropdown fechado com Esc ate o mouse/foco sair */
.up-nav-it.is-fechado .up-drop { opacity: 0 !important; visibility: hidden !important; }
/* texto so para leitor de tela */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* =====================================================================
   MENU NOVO: MEGA MENU (pedido do Marcus, 11/10/2026)
   ---------------------------------------------------------------------
   Secoes WordPress, Elementor Kits, CMS e Extras: botao na barra de
   categorias + painel da largura do container, com colunas de links
   (contagem real), destaque da semana com capa e rodape "ver tudo".
   Desktop: abre no hover e no foco (ui2.js, bloco MEGA); sem JS abre
   pelo :hover/:focus-within. Celular (ate 980 px): sanfona no menu.
   Bloco proprio: nao mexe nas regras de .up-drop (dropdown de Planos).
   ===================================================================== */
.up-nav-in { position: relative; }
.up-nav-it.has-mega { position: static; }
.up-nav-btn { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-sm); color: inherit; line-height: inherit; }
.up-nav-btn .up-nav-caret { transition: transform .2s ease; }
.up-nav-it.is-open > .up-nav-btn { background: var(--nav-hover); }
.up-nav-it.is-open > .up-nav-btn .up-nav-caret { transform: rotate(180deg); }

.up-mega {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); z-index: 60;
  color: var(--text); background: var(--surface); border: var(--bd); border-radius: var(--r-card); box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
/* ponte do hover: cobre o vao entre o botao e o painel */
.up-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
/* fio da marca no topo do painel */
/* sem o risco em degrade no topo do painel (pedido do Marcus, 11/10/2026) */
.up-nav-it.is-open > .up-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
@media (min-width: 981px) {
  .up-nav:not(.is-js) .up-nav-it.has-mega:hover > .up-mega,
  .up-nav:not(.is-js) .up-nav-it.has-mega:focus-within > .up-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
}
.up-mega :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

/* painel compacto (pedido do Marcus, 11/10/2026): no maximo 3 colunas (2 de links
   + o destaque), da largura do conteudo e alinhado ao botao da secao (o ui2.js poe
   o `left`; sem JS fica na margem). Antes ocupava a barra inteira */
@media (min-width: 981px) {
  .up-mega { right: auto; width: max-content; max-width: calc(100% - 2 * var(--gutter)); }
}
.up-mega-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 16px 20px; }
.up-mega.has-dest .up-mega-in { grid-template-columns: auto 248px; }
.up-mega-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), 214px); gap: 12px 20px; align-content: start; }
.up-mega-col { min-width: 0; }
.up-mega-col--2 { grid-column: span 2; }
.up-mega-col--2 ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.up-mega-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 var(--fs-xs)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.up-mega-h-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.up-mega-h-ico .i { width: 14px; height: 14px; }
/* subtitulo que e link da categoria (12/10/2026): o mesmo visual, com hover no tom de acao */
.up-mega-h .up-mega-h-a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; transition: color .2s ease; }
.up-mega-h .up-mega-h-a:hover, .up-mega-h .up-mega-h-a:focus-visible { color: var(--accent); }
.up-mega-col:nth-child(2) .up-mega-h-ico { background: var(--surface-3); color: var(--brand-slate); }
.up-mega-col:nth-child(3) .up-mega-h-ico { background: var(--amber-soft); color: var(--amber); }
.up-mega-col li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 -10px; padding: 4px 10px;
  border-radius: var(--r-sm); font-size: .86rem; line-height: 1.3; color: var(--ink); transition: background .2s ease, color .2s ease;
}
.up-mega-col li a > span { min-width: 0; }
.up-mega-col li a small { flex: none; font-size: var(--fs-xs); color: var(--muted); }
.up-mega-col li a:hover { background: var(--surface-2); color: var(--accent); }
.up-mega-col li a.is-mais { color: var(--accent); font-weight: 600; }
.up-mega-col li a .i { flex: none; align-self: center; width: 14px; height: 14px; transition: transform .2s ease; }
.up-mega-col li a.is-mais:hover .i { transform: translateX(3px); }
.up-mega-nota { grid-column: span 2; align-self: start; padding: 14px 16px; border-radius: var(--r-thumb); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); }

/* destaque da semana: o primeiro com a capa grande, o segundo em linha */
.up-mega-dest { min-width: 0; padding: 12px 14px; border-radius: var(--r-thumb); background: var(--band-bg); border: 1px solid var(--line-soft); }
.up-mega-h--dest { margin-bottom: 2px; }
.up-mega-h--dest .up-mega-h-ico { background: var(--grad-warm); color: var(--on-dark); }
.up-mega-dest-sub { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--muted); }
.up-mega-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 -8px; padding: 6px 8px; border-radius: var(--r-thumb); transition: background .2s ease, box-shadow .2s ease; }
.up-mega-card + .up-mega-card { margin-top: 4px; }

.up-mega-card:hover { background: var(--surface); box-shadow: var(--sh-card); }
.up-mega-capa { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-3); }

.up-mega-capa img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .2s ease; }
.up-mega-capa img.is-falhou { visibility: hidden; } /* capa que nao carregou: fica o fundo, sem o icone quebrado */
.up-mega-card:hover .up-mega-capa img { transform: scale(1.03); }
.up-mega-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-mega-card-txt small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.up-mega-card-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 var(--fs-sm)/1.3 var(--font-display); color: var(--ink); }

.up-mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 22px; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-card) var(--r-card); background: var(--surface-2); }
.up-mega-tudo {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); transition: border-color .2s ease, box-shadow .2s ease;
}
.up-mega-tudo .i { width: 15px; height: 15px; transition: transform .2s ease; }
.up-mega-tudo:hover { border-color: var(--accent); }
.up-mega-tudo:hover .i { transform: translateX(3px); }
.up-mega-tudo.is-pri { border-color: transparent; background: var(--grad-brand); color: var(--on-dark); }
.up-mega-tudo.is-pri:hover { box-shadow: var(--sh-card); }

/* Extras tem uma coluna so: ela fica estreita e a nota ocupa o resto */
.up-mega--extras .up-mega-cols { grid-template-columns: 214px 214px; }
.up-mega--extras .up-mega-nota { grid-column: auto; }

/* a barra cabe de 981 a 1440 px nos tres idiomas: sem o icone das secoes e com
   menos respiro nas larguras menores (medido com o espanhol, o mais longo) */
@media (max-width: 1240px) and (min-width: 981px) {
  .up-nav-list > .up-nav-it > .up-nav-a > .i:first-child { display: none; }
  .up-nav-a { padding: 9px 12px; gap: 6px; }
  .up-nav-a--pulso { padding-inline: 12px; }
  .up-mega.has-dest .up-mega-in { grid-template-columns: auto 230px; }
  .up-mega-in { padding: 14px 18px; gap: 18px; }
  .up-mega-cols { column-gap: 20px; }
  .up-mega-col--2 ul { column-gap: 20px; }
  /* destaque: as duas capas em linha, para o texto caber */
  .up-mega-dest { padding: 14px; }
  .up-mega-dest-sub { margin-left: 0; }
  .up-mega-card { grid-template-columns: 60px minmax(0, 1fr); gap: 9px; }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .up-nav-a { padding: 9px 10px; }
  .up-nav-help { padding: 8px 12px; }
}

/* mega menu ESPACADO (chave do operador, 12/10/2026): o mesmo conteudo com mais
   respiro, como o prototipo; so no desktop */
@media (min-width: 981px) {
  .up-mega--esp .up-mega-in { padding: 30px 36px 32px; gap: 40px; }
  .up-mega--esp.has-dest .up-mega-in { grid-template-columns: auto 272px; }
  .up-mega--esp .up-mega-cols { grid-template-columns: repeat(var(--cols, 2), 214px); gap: 26px 44px; }
  .up-mega--esp.up-mega--extras .up-mega-cols { grid-template-columns: 214px 214px; }
  .up-mega--esp .up-mega-col--2 ul { column-gap: 40px; }
  .up-mega--esp .up-mega-h { margin-bottom: 16px; }
  .up-mega--esp .up-mega-col li + li { margin-top: 3px; }
  .up-mega--esp .up-mega-col li a { padding: 6px 10px; }
  .up-mega--esp .up-mega-nota { padding: 18px 20px; }
  .up-mega--esp .up-mega-dest { padding: 18px 18px 20px; }
  .up-mega--esp .up-mega-dest-sub { margin-bottom: 14px; }
  .up-mega--esp .up-mega-card + .up-mega-card { margin-top: 10px; }
  .up-mega--esp .up-mega-foot { padding: 14px 36px; }
}
@media (max-width: 1240px) and (min-width: 981px) {
  .up-mega--esp .up-mega-in { padding: 24px 26px 26px; gap: 26px; }
  .up-mega--esp.has-dest .up-mega-in { grid-template-columns: auto 240px; }
  .up-mega--esp .up-mega-cols { grid-template-columns: repeat(var(--cols, 2), 184px); column-gap: 28px; }
  .up-mega--esp.up-mega--extras .up-mega-cols { grid-template-columns: 184px 184px; }
  .up-mega--esp .up-mega-foot { padding: 12px 26px; }
}

/* celular: cada secao vira uma sanfona dentro do menu */
@media (max-width: 980px) {
  .nav-open .up-nav-btn { width: 100%; justify-content: flex-start; }
  .nav-open .up-nav-btn .up-nav-caret { display: inline-block; margin-left: auto; }
  .up-mega { position: static; display: none; margin: 6px 0 10px; opacity: 1; visibility: visible; transform: none; border: 0; border-radius: var(--r-thumb); box-shadow: none; transition: none; }
  .up-mega::before, .up-mega::after { display: none; }
  .up-nav-it.is-open > .up-mega { display: block; }
  .up-mega-in, .up-mega.has-dest .up-mega-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .up-mega-cols, .up-mega--extras .up-mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .up-mega-col--2, .up-mega-nota, .up-mega--extras .up-mega-nota { grid-column: 1 / -1; }
  .up-mega-dest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .up-mega-dest > p { grid-column: 1 / -1; }
  .up-mega-card, .up-mega-card:first-of-type { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; margin: 0; }
  .up-mega-card + .up-mega-card { margin-top: 0; }
  .up-mega-foot { justify-content: flex-start; padding: 12px 16px; }
}
@media (max-width: 640px) {
  .up-mega-cols, .up-mega--extras .up-mega-cols { grid-template-columns: minmax(0, 1fr); }
  .up-mega-dest { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .up-mega-tudo { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .up-mega, .up-nav-it.is-open > .up-mega, .up-nav-btn .up-nav-caret, .up-mega-capa img, .up-mega-tudo .i, .up-mega-col li a .i { transition: none; transform: none; }
}

/* =====================================================================
   CONTA: dropdown de acesso rapido (pedido do Marcus, 11/10/2026)
   ---------------------------------------------------------------------
   Os destinos e a cota do cabecalho de hoje, na pele do ui2. Abre no
   clique e no foco, Esc fecha (ui2.js, bloco CONTA); sem JS abre pelo
   :focus-within. Deslogado continua o link "Entrar".
   ===================================================================== */
.up-acc-wrap { position: relative; }
.up-hdr .up-acc-btn { margin: -5px -8px -5px -5px; padding: 5px 8px 5px 5px; border: 0; border-radius: var(--r-thumb); background: none; cursor: pointer; text-align: left; transition: background .2s ease; }
.up-hdr .up-acc-btn:hover, .up-acc-wrap.is-open .up-acc-btn { background: var(--surface-2); }
.up-acc-caret { width: 14px; height: 14px; color: var(--muted); transition: transform .2s ease; }
.up-acc-wrap.is-open .up-acc-caret { transform: rotate(180deg); }
.up-acc-pop {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 70; width: 340px; padding: 10px;
  color: var(--text); background: var(--surface); border: var(--bd); border-radius: var(--r-card); box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.up-acc-wrap.is-open .up-acc-pop,
.up-acc-wrap:not(.is-js):focus-within .up-acc-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.up-acc-hi { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-thumb); background: var(--grad-brand); color: var(--on-dark); }
.up-acc-hi .up-acc-av { width: 40px; height: 40px; background: rgba(255,255,255,.16); color: var(--on-dark); }
.up-acc-hi-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.up-acc-hi-txt b { font: 700 var(--fs-body)/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-acc-hi-txt small { font-size: var(--fs-xs); opacity: .85; }
.up-acc-go { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); transition: background .2s ease; }
.up-acc-go .i { width: 16px; height: 16px; }
.up-acc-hi:hover .up-acc-go { background: var(--coral); }
.up-acc-cota { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-thumb); background: var(--surface-2); }
/* pilula compacta da cota (12/10/2026): anel do que resta | relogio ate zerar */
/* clara (12/10/2026, o preto nao agradou): verde suave; ambar com menos de 20% e coral quando zera */
.up-acc-cota { --cota: #1f8a55; --cota-bg: #eaf7ef; --cota-bd: #bfe3cc; gap: 10px; padding: 9px 14px; border: 1px solid var(--cota-bd); border-radius: var(--r-pill); background: var(--cota-bg); color: var(--ink); font-size: var(--fs-sm); }
.up-acc-cota.is-baixa { --cota: #c46a0a; --cota-bg: #fff3e3; --cota-bd: #f6cf9f; }
.up-acc-cota.is-zero { --cota: #c4473f; --cota-bg: #fdebe9; --cota-bd: #f3c3be; }
.up-acc-ring { flex: none; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--cota) calc(var(--p, 100) * 1%), rgba(31, 34, 48, .12) 0); -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); }
.up-acc-cota-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a4f5c; }
.up-acc-cota-n b { color: var(--ink); font-weight: 700; }
.up-acc-zera { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid var(--cota-bd); font-weight: 600; color: #5b5047; }
.up-acc-zera .i { width: 15px; height: 15px; color: var(--cota); }
.up-acc-cota-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.up-acc-cota-ico .i { width: 17px; height: 17px; }
.up-acc-cota-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.up-acc-cota-txt b { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.up-acc-cota-txt small { font-size: var(--fs-xs); color: var(--muted); }
.up-acc-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.up-acc-bar > i { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: var(--green); }
.up-acc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.up-acc-tiles a { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: var(--bd); border-radius: var(--r-thumb); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
.up-acc-tiles a:hover { border-color: var(--accent); box-shadow: var(--sh-card); }
.up-acc-tile-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: var(--on-dark); }
.up-acc-tile-ico--uau { background: var(--blue); color: var(--on-dark); } /* Gerenciar sites em azul (pedido do Marcus, 12/10/2026): branco a 5,2:1 */
/* caixas com cor (pedido do Marcus, 12/10/2026): a de compras no tom da marca, a do Auto Updater no ardosia */
.up-acc-tiles a { background: var(--accent-soft); border-color: transparent; }
.up-acc-tiles a:has(.up-acc-tile-ico--uau) { background: var(--blue-soft); }
.up-acc-tiles a:has(.up-acc-tile-ico--uau):hover, .up-acc-tiles a:has(.up-acc-tile-ico--uau):focus-visible { border-color: var(--blue); }
.up-acc-tile-ico .i { width: 17px; height: 17px; }
.up-acc-list { margin-top: 6px; }
.up-acc-list > li > a, .up-acc-sub > summary { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink); cursor: pointer; transition: background .2s ease; }
.up-acc-list > li > a:hover, .up-acc-sub > summary:hover { background: var(--surface-2); }
.up-acc-list .i { width: 17px; height: 17px; color: var(--muted); }
.up-acc-sub > summary { list-style: none; }
.up-acc-sub > summary::-webkit-details-marker { display: none; }
.up-acc-sub > summary > span { flex: 1; }
.up-acc-sub-caret { transition: transform .2s ease; }
.up-acc-sub[open] .up-acc-sub-caret { transform: rotate(180deg); }
.up-acc-sub ul { margin: 2px 0 4px 40px; border-left: 2px solid var(--line-soft); }
.up-acc-sub ul a { display: block; padding: 6px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); transition: background .2s ease, color .2s ease; }
.up-acc-sub ul a:hover { background: var(--surface-2); color: var(--accent); }
.up-acc-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.up-acc-foot a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); background: var(--surface-2); transition: background .2s ease, color .2s ease; }
.up-acc-foot a:hover { background: var(--surface-3); }
.up-acc-foot .i { width: 16px; height: 16px; }
.up-acc-foot .up-acc-sair { color: var(--danger); }
.up-acc-foot .up-acc-sair:hover { background: var(--danger-soft); }
@media (max-width: 980px) {
  .up-hdr .up-acc-wrap { grid-area: acc; justify-self: end; }
  .up-acc-pop { top: calc(100% + 10px); }
}
@media (max-width: 640px) {
  /* o painel encosta na borda direita do conteudo (a cesta, 42 px + 16 px de vao, fica a direita da conta) */
  .up-acc-pop { right: -58px; width: calc(100vw - 2 * var(--gutter)); max-width: 340px; }
  .up-acc-caret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .up-acc-pop, .up-acc-caret, .up-acc-sub-caret { transition: none; transform: none; }
}

/* =====================================================================
   ICONES DO MENU COM MOVIMENTO (11/10/2026, pedido do Marcus).
   Cada icone dos botoes do cromo ganha um gesto proprio, uma vez a cada
   passagem do mouse ou foco do teclado: o Auto Updater gira, Atualizacoes
   volta o relogio, Planos ergue a coroa, Extras vira as pecas, Suporte
   balanca o fone, Novidades sacode o megafone, o carrinho quica. O gesto
   e escolhido pelo NOME do icone (use[href="#i-..."]), entao o cabecalho
   e o menu nao mudam; o caret do dropdown nao anima. Navegador sem :has()
   so fica sem o movimento. Movimento reduzido: nada.
   ===================================================================== */
@keyframes up-ic-gira   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes up-ic-volta  { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes up-ic-coroa  { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) rotate(-12deg); } 65% { transform: translateY(-1px) rotate(8deg); } }
@keyframes up-ic-vira   { 0% { transform: none; } 55% { transform: rotate(100deg) scale(1.12); } 100% { transform: rotate(90deg); } }
@keyframes up-ic-sobe   { 0%, 100% { transform: none; } 40% { transform: translateY(-3px) scale(1.08); } 70% { transform: translateY(0) scale(.97); } }
@keyframes up-ic-pilha  { 0%, 100% { transform: none; } 30% { transform: scale(1.18); } 60% { transform: scale(.92); } 80% { transform: scale(1.04); } }
@keyframes up-ic-balanca { 0%, 100% { transform: none; } 20% { transform: rotate(-16deg); } 45% { transform: rotate(13deg); } 70% { transform: rotate(-7deg); } 88% { transform: rotate(3deg); } }
@keyframes up-ic-sacode { 0%, 100% { transform: none; } 15% { transform: rotate(-14deg) scale(1.08); } 30% { transform: rotate(10deg) scale(1.08); } 45% { transform: rotate(-8deg) scale(1.04); } 60% { transform: rotate(5deg); } }
@keyframes up-ic-quica  { 0%, 100% { transform: none; } 30% { transform: translateY(-4px); } 50% { transform: translateY(0) scale(1.1, .9); } 70% { transform: translateY(-1px); } }
@keyframes up-ic-acena  { 0%, 100% { transform: none; } 40% { transform: translateY(-2px) scale(1.1); } }

/* so os icones do menu (#i-n-*): o caret do dropdown segue com o movimento dele */
:is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart) .i:has(> use[href^="#i-n-"]) { transform-origin: 50% 50%; transition: transform .35s ease; }
/* Extras termina virado: fica assim enquanto o mouse estiver em cima */
:is(.up-nav-a, .up-nav-help):is(:hover, :focus-visible) .i:has(> use[href="#i-n-extras"]) { transform: rotate(90deg); }

@media (prefers-reduced-motion: no-preference) {
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-uau"])     { animation: up-ic-gira .75s cubic-bezier(.45, 0, .25, 1); }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-updates"]) { animation: up-ic-volta .75s cubic-bezier(.45, 0, .25, 1); }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-plans"])   { animation: up-ic-coroa .6s ease-in-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-extras"])  { animation: up-ic-vira .5s cubic-bezier(.3, .7, .3, 1); }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-themes"])  { animation: up-ic-sobe .55s ease-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-wp"])      { animation: up-ic-gira .75s cubic-bezier(.45, 0, .25, 1); }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-kits"])    { animation: up-ic-pilha .6s ease-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-cms"])     { animation: up-ic-balanca .7s ease-in-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-support"]) { animation: up-ic-balanca .7s ease-in-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-news"])    { animation: up-ic-sacode .65s ease-in-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-cart"])    { animation: up-ic-quica .55s ease-out; }
  :is(.up-nav-a, .up-nav-help, .up-ul, .up-acc, .up-cart):is(:hover, :focus-visible) .i:has(> use[href="#i-n-user"])    { animation: up-ic-acena .45s ease-out; }
  :is(.up-nav-a, .up-nav-help):is(:hover, :focus-visible) .i:has(> use[href="#i-n-extras"]) { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.up-nav-a, .up-nav-help):is(:hover, :focus-visible) .i:has(> use[href="#i-n-extras"]) { transform: none; }
}

/* "Baixar gratis" pede o e-mail (12/10/2026): <dialog> do ui2/components/gratis.php */
.ggr { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-card); background: var(--surface); color: var(--text); box-shadow: 0 30px 70px -20px rgba(20, 22, 34, .45); }
.ggr::backdrop { background: rgba(20, 22, 34, .55); }
.ggr-box { position: relative; display: grid; gap: 10px; padding: 30px 28px 26px; text-align: center; }
.ggr-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.ggr-x:hover { color: var(--ink); }
.ggr-x .i { width: 16px; height: 16px; }
.ggr-ico { justify-self: center; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--green-soft); color: var(--green); }
.ggr-ico .i { width: 24px; height: 24px; }
.ggr-t { margin: 4px 0 0; font: 700 1.3rem/1.25 var(--font-display); color: var(--ink); }
.ggr-p { margin: 0; font-size: var(--fs-sm); }
.ggr-l { display: block; margin: 8px 0 6px; text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.ggr-in { width: 100%; height: 50px; padding: 0 16px; border: var(--bd); border-radius: var(--r-ctl); background: var(--surface); font: 500 var(--fs-body)/1 var(--font-body); color: var(--ink); }
.ggr-in:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
.ggr-isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ggr-erro { margin: 6px 0 0; text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--danger, #b42318); }
.ggr-btn { margin-top: 12px; }
.ggr-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.ggr-nota { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.ggr-ok { display: grid; gap: 14px; }
.ggr-ok p { margin: 0; font-size: var(--fs-sm); }
.ggr-ok b { display: block; margin-bottom: 4px; font: 700 1.05rem/1.3 var(--font-display); color: var(--green); }
@media (max-width: 480px) { .ggr-box { padding: 26px 18px 20px; } }

/* contraste nas superficies de plugin dentro do ui2 (revisao, 12/10/2026). O ultrapack-support (.up-sup) e o
   ultrapack-activations (.up-act) definem o proprio --muted (#8a8f9c, 3,24:1 no branco): aqui ele vira o
   cinza do ui2 (5,17:1). O minicarrinho usa #888 fixo (3,54:1); o hover dele continua o do plugin. */
.ui2 :is(.up-sup, .up-act) { --muted: #666d80; }
.ui2 :is(.up-ss-mc-empty-text, .up-ss-mc-continue:not(:hover)) { color: var(--muted); }