/* Página inicial nova (v4, tela da TV) — gerado de redesign-2026-11-02 (base.css + eclipse.css + v4-tela/tela.css + producao/extra.css). Só a página inicial usa; conta/privacidade/admin seguem no app.css. */
/* tasteskill / base.css
   A neutral foundation: reset, token names, fluid type steps, a 12-column grid, states and the motion
   helpers from references/motion.md. It has no look of its own. Copy it into the project, replace the
   token values with the ones on the direction sheet, and build on top. Delete what you do not use. */

/* ---------- tokens (replace with the dealt palette and type system) ---------- */
:root {
  --bg: #ffffff;
  --surface: #f2f2f2;
  --ink: #111111;
  --muted: #5c5c5c;
  --accent: #111111;
  --accent-ink: #ffffff;

  --font-display: system-ui, sans-serif;
  --font-text: system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3rem, 1rem + 9vw, 9rem); /* set from the hero blueprint */

  --margin: clamp(1rem, 2.2vw, 2rem);    /* page side margin: tight, so content reaches the edges */
  --gutter: clamp(1rem, 2vw, 2rem);      /* column gap */
  --section: clamp(5rem, 12vw, 13rem);   /* space between sections */
  --radius: 0px;                          /* one radius for the whole page: 0, or large, decided once */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* entrances, moving hovers, UI under 600ms */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);        /* reveals of 800ms and longer, line rises, openings */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);     /* wipes, panels, things that travel while visible */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);       /* slow scale and drift on photographs */
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* something leaving for good, short */
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;                                  /* picture openings and clip wipes */
  --stagger-line: 90ms;
  --stagger-item: 70ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 6rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: inherit; text-wrap: balance; hyphens: none; }
.display { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.035em; }
.head { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.025em; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: tabular-nums; }
.only-wide { display: none; }
@media (min-width: 48em) { .only-wide { display: inline; } }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: calc(var(--section) / 2); }
.section + .section { margin-top: 0; }
.bleed { margin-inline: calc(var(--margin) * -1); }
.cover { width: 100%; height: 100%; object-fit: cover; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}
.field { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); }


/* Eclipse: tokens da marca (preto e luz) e o fragmento de ativação compartilhado pelas 3 versões. */
:root {
  --bg: #0B0B0F;
  --surface: #15151B;
  --surface-2: #1C1C22;
  --ink: #EDEDF0;
  --muted: #9BA0AE;
  --accent: #F4F6FF;
  --accent-ink: #0B0B0F;
  --font-display: "Sora", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --radius: 0px;
}

/* ---------- fragmento de ativação (interface real do produto) ---------- */
.ativ { --luz: 0; width: 100%; max-width: 26rem; background: var(--surface); color: var(--ink); padding: 1.5rem; border-radius: 10px; font-family: var(--font-text); font-size: 15px; line-height: 1.4; }
.ativ-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ativ-titulo { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.ativ-passo { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ativ-rotulo { display: block; color: var(--muted); font-size: 13px; margin: 0 0 0.4rem; }
.ativ-bloco + .ativ-bloco { margin-top: 1rem; }

/* eclipse: a lua sai da frente do sol a cada etapa */
.eclipse { position: relative; width: 44px; height: 44px; flex: none; }
.eclipse svg { width: 100%; height: 100%; overflow: visible; }
.eclipse .sol { fill: var(--accent); }
.eclipse .lua { fill: var(--surface); transform: translateX(calc((0.14 + var(--luz) * 0.86) * 32px)); transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }

/* seleção de app com busca */
.combo { position: relative; }
.combo-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 48px; padding: 0 14px; background: var(--bg); border: 1px solid var(--surface-2); border-radius: 8px; text-align: left; color: var(--muted); transition: border-color 180ms ease; } /* taste-skill-ignore: campo do formulário (data-ui) */
.combo-btn[data-escolhido] { color: var(--ink); }
.combo-btn:hover, .combo-btn[aria-expanded="true"] { border-color: var(--muted); }
.combo-btn svg { width: 16px; height: 16px; flex: none; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.combo-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.combo-pop { position: absolute; z-index: 8; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg); border: 1px solid var(--surface-2); border-radius: 8px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: menu aberto dentro do fragmento data-ui */ /* taste-skill-ignore: campo do formulário (data-ui) */
.combo-pop[hidden] { display: none; }
.combo-busca { width: 100%; min-height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--surface-2); border-radius: 6px; color: var(--ink); font-size: 15px; } /* taste-skill-ignore: campo do formulário (data-ui) */
.combo-busca::placeholder { color: var(--muted); }
.combo-lista { margin: 6px 0 0; padding: 0; list-style: none; }
.combo-op { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 0 12px; border-radius: 6px; cursor: pointer; }
.combo-op .preco { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.combo-op[aria-selected="true"], .combo-op.ativo { background: var(--surface-2); }
.combo-op[hidden] { display: none; }
.combo-vazio { padding: 10px 12px; color: var(--muted); }

/* MAC */
.mac { width: 100%; min-height: 48px; padding: 0 14px; background: var(--bg); border: 1px solid var(--surface-2); border-radius: 8px; color: var(--ink); font-size: 17px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* taste-skill-ignore: campo do formulário (data-ui) */
.mac::placeholder { color: #5D6170; }
.mac:focus { outline: none; border-color: var(--accent); }
.mac[aria-invalid="true"] { border-color: #C9787A; }
.ativ-dica { margin-top: 0.4rem; color: var(--muted); font-size: 13px; }
.ativ-dica[data-ok] { color: var(--ink); }

.ativ-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--surface-2); } /* taste-skill-ignore: divisor do formulário (data-ui) */
.ativ-total span { color: var(--muted); }
.ativ-total strong { font-family: var(--font-display); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; }
.ativ-pix { width: 100%; min-height: 50px; margin-top: 1rem; background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 8px; transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; }
.ativ-pix:active { transform: scale(0.98); }
.ativ-pix:disabled { opacity: 0.35; cursor: not-allowed; }
.ativ-status { min-height: 1.4em; margin-top: 0.75rem; color: var(--muted); font-size: 13px; }
.ativ-status[data-ok] { color: var(--ink); }

/* estados fixos (para mostrar etapas sem interação) */
.ativ[data-demo] { pointer-events: none; }

/* v4 "Tela": a página é a tela inicial da TV. Os ícones dos apps são a única cor; o resto é a marca Eclipse.
   Medidas: conteúdo até 1200px; a TV do topo cabe na altura da janela; tudo dentro da TV escala com ela (cqi). */
:root {
  --radius: 12px;
  --step-small: clamp(0.8125rem, 0.8rem + 0.05vw, 0.875rem);
  --step-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --step-head: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem);
  --step-display: clamp(2.375rem, 1.2rem + 2.6vw, 3.5rem);
  --margin: clamp(1rem, 3vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 1.75rem);
}
body { position: relative; isolation: isolate; }
.wrap { width: 100%; max-width: calc(75rem + var(--margin) * 2); margin-inline: auto; }

/* ---------- fundo do topo: catálogo de filmes, apagado para não roubar a cena ---------- */
.palco-fundo { position: absolute; top: 0; left: 0; right: 0; height: clamp(26rem, 44vw, 40rem); z-index: -1; overflow: hidden; pointer-events: none; }
.palco-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.2; filter: brightness(0.65) saturate(0.85) blur(1px); transform: scale(1.04); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); } /* taste-skill-ignore: esmaecer da foto de fundo */

/* ---------- fundo vivo: clipe do Higgsfield, fixo atrás de tudo, apagado ---------- */
.fundo-vivo { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.fundo-vivo video { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: brightness(0.85) saturate(0.9); }
.pausar-fundo { padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.marca { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; }
.marca svg { width: 24px; height: 24px; }
.menu { display: flex; align-items: center; gap: 1.5rem; font-size: 14px; }
.button { min-height: 2.75rem; padding: 0 1.2rem; font-size: 15px; font-weight: 500; border-radius: 10px; }
.button-fantasma { background: var(--surface-2); color: var(--ink); min-height: 2.4rem; padding: 0 1rem; font-size: 14px; }
.button-fantasma:hover { background: #2A2A33; }

/* ---------- hero: título + TV + formulário ---------- */
.hero {
  --form-w: 21.5rem;
  --tv-w: minmax(0, 1fr);
  padding-top: clamp(0.75rem, 1.6vw, 1.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem var(--gutter); margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.hero h1 { font-size: var(--step-display); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; }
.hero-lado { display: flex; align-items: center; gap: 1.25rem; }
.hero-lado .lead { max-width: 32ch; font-size: var(--step-body); line-height: 1.45; }

.hero-corpo { display: grid; grid-template-columns: var(--tv-w) var(--form-w); gap: var(--gutter); align-items: center; }

/* a TV: moldura preta, tela com a cor do app em foco, pé embaixo */
.tv { position: relative; background: #000; border-radius: 18px; padding: 8px; }
.tv::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 16%; height: 12px; transform: translateX(-50%); background: #000; border-radius: 0 0 6px 6px; }
.tela { --cor: #2B0B42; --tela-ink: #FFFFFF; container-type: inline-size; position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; overflow: hidden; border-radius: 11px; background: var(--cor); color: var(--tela-ink); transition: background-color 700ms var(--ease-out), color 400ms ease; }
.tela[data-claro] { --tela-ink: #141414; }
/* em tela baixa (notebook), a TV do topo fica mais "larga" em vez de passar da dobra */
.hero .tv { container-type: inline-size; }
.hero .tela { aspect-ratio: auto; height: min(56.25cqi, max(20rem, calc(100svh - 18.5rem))); }

.tv-barra { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqi 3cqi 0; font-size: max(11px, 1.6cqi); font-weight: 500; opacity: 0.82; }
.tv-marca { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 600; }
.tv-marca svg { width: 1.2em; height: 1.2em; }
.tv-marca svg circle + circle { transition: fill 700ms var(--ease-out); }

.vitrine { flex: 1; display: flex; align-items: center; gap: 3cqi; padding: 0 3cqi; min-height: 0; }
.vitrine img { width: 17cqi; height: auto; aspect-ratio: 1; border-radius: 22%; flex: none; }
.vitrine-nome { font-family: var(--font-display); font-weight: 700; font-size: 4.8cqi; line-height: 1; letter-spacing: -0.035em; }
.vitrine-info { margin-top: 0.55em; font-size: max(12px, 1.9cqi); font-variant-numeric: tabular-nums; }
.vitrine-acao { margin-top: 0.3em; font-size: max(11px, 1.6cqi); opacity: 0.7; }

.fileira { display: flex; gap: 1.4cqi; overflow-x: auto; padding: 2cqi 3cqi 2.6cqi; scroll-snap-type: none; scrollbar-width: none; }
.fileira::-webkit-scrollbar { display: none; }
.fileira { touch-action: pan-x pan-y; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.fileira-caixa { position: relative; }
/* setas da fileira (só com mouse); com o dedo é só deslizar */
.seta { position: absolute; top: 50%; z-index: 2; width: max(30px, 3.6cqi); aspect-ratio: 1; display: grid; place-items: center; padding: 0; transform: translateY(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.seta svg { width: 45%; height: 45%; }
.seta-esq { left: 1.2cqi; } .seta-dir { right: 1.2cqi; }
@media (hover: hover) and (pointer: fine) {
  .fileira-caixa:hover .seta:not([disabled]) { opacity: 1; pointer-events: auto; }
  .fileira { cursor: grab; }
  .fileira.arrastando { cursor: grabbing; scroll-snap-type: none; }
}
.tile { flex: 0 0 9.6cqi; aspect-ratio: 1; padding: 0; border-radius: 22%; overflow: hidden; background: #000; cursor: pointer; scroll-snap-align: center; filter: grayscale(1) brightness(0.55); transform: scale(0.92); transition: filter 450ms var(--ease-out), transform 300ms var(--ease-out); }
.tile img { width: 100%; height: 100%; display: block; }
.tile.previa, .tile[aria-checked="true"] { filter: none; transform: scale(1.04); }
.tile[aria-checked="true"] { outline: 2px solid var(--tela-ink); outline-offset: 3px; }
.tile:focus-visible { outline: 2px solid var(--tela-ink); outline-offset: 3px; }
@media (hover: hover) { .tile:not(.previa):hover { filter: grayscale(0.3) brightness(0.8); } }

/* formulário: mesmo fragmento, mais compacto, com os ícones */
.ativ-v4 { max-width: none; padding: 1.25rem; font-size: 14px; }
.ativ-v4 .ativ-topo { margin-bottom: 1rem; }
.ativ-v4 .ativ-titulo { margin: 0; font-size: 16px; }
.ativ-v4 .eclipse { width: 36px; height: 36px; }
.ativ-v4 .ativ-bloco + .ativ-bloco { margin-top: 0.85rem; }
.ativ-v4 .combo-btn, .ativ-v4 .mac { min-height: 44px; }
.ativ-v4 .mac { font-size: 16px; }
.ativ-v4 .ativ-total { margin-top: 1rem; padding-top: 0.85rem; }
.ativ-v4 .ativ-total strong { font-size: 19px; }
.ativ-v4 .ativ-pix { min-height: 46px; margin-top: 0.85rem; border-radius: 10px; }
.combo-val { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.combo-val img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.combo-val img[hidden] { display: none; }
/* lista de apps: logo | nome | preço, linhas compactas */
.ativ-v4 .combo-pop { padding: 6px; }
.combo-lista { max-height: min(17.5rem, 50svh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
.ativ-v4 .combo-op { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 0; padding: 7px 8px; }
.op-ico { width: 32px; height: 32px; border-radius: 8px; display: block; }
.op-nome { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-preco { padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-preco small { font-size: inherit; font-weight: 400; color: var(--muted); }
.combo-op.ativo .op-preco, .combo-op[aria-selected="true"] .op-preco { background: var(--bg); }

/* ---------- onde está o MAC ---------- */
.mac-secao { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.mac-texto .head { max-width: 12ch; }
.mac-texto p { margin-top: 1rem; max-width: 42ch; }
.mac-texto .head + p { margin-top: 1.5rem; }
.tv-abertura { margin-bottom: 12px; }
.abertura { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4cqi; }
.abertura img { width: 15cqi; height: auto; aspect-ratio: 1; border-radius: 22%; }
.abertura-nome { margin-top: 0.7em; font-family: var(--font-display); font-weight: 600; font-size: max(14px, 2.6cqi); }
.abertura-mac { margin-top: 4cqi; display: flex; align-items: baseline; gap: 0.7em; padding: 0.6em 1em; background: rgba(0, 0, 0, 0.32); border-radius: 10px; }
.tela[data-claro] .abertura-mac { background: rgba(0, 0, 0, 0.07); }
.abertura-mac span { font-size: max(11px, 1.8cqi); font-weight: 600; opacity: 0.75; }
.abertura-mac strong { font-family: var(--font-display); font-weight: 600; font-size: max(18px, 4.6cqi); letter-spacing: 0.02em; }
.abertura-mac strong[data-exemplo] { opacity: 0.6; }

/* ---------- luz total: preço + todos os apps acesos ---------- */
.preco { background: var(--accent); color: var(--accent-ink); padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.preco-texto { display: flex; flex-wrap: wrap; gap: 1.25rem clamp(2rem, 5vw, 4.5rem); align-items: flex-end; }
.preco-numero { font-size: clamp(3rem, 1rem + 5.5vw, 6.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; }
.preco-numero .por-ano { display: block; font-size: 0.4em; letter-spacing: -0.03em; margin-top: 0.2em; }
.preco .lead { max-width: 32ch; padding-bottom: 0.4rem; color: var(--accent-ink); }
.vitrine-luz { margin-top: clamp(2.5rem, 4.5vw, 4rem); display: grid; gap: clamp(12px, 1.4vw, 18px); }
.faixa { overflow: hidden; }
.faixa-trilho { display: flex; gap: clamp(12px, 1.4vw, 18px); width: max-content; animation: correr 60s linear infinite; }
.faixa-volta .faixa-trilho { animation-direction: reverse; animation-duration: 70s; }
.faixa-item { display: block; flex: none; }
.faixa-item img { display: block; width: clamp(96px, 9.8vw, 148px); height: auto; aspect-ratio: 1; border-radius: 22%; }
@keyframes correr { to { transform: translateX(calc(-50% - clamp(6px, 0.7vw, 9px))); } }
@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { animation: none; flex-wrap: wrap; width: auto; max-width: calc(75rem + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); }
  .faixa-trilho .faixa-item:nth-child(n + 13) { display: none; }
  .faixa-volta { display: none; }
  .tela, .tile { transition: none; }
}

/* ---------- dúvidas ---------- */
.duvidas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.duvidas .head { max-width: 8ch; }
.faq { display: grid; gap: 0.5rem; }
.faq details { background: var(--surface); border-radius: var(--radius); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.05rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 1.25rem 1.25rem; max-width: 56ch; }
.mais { position: relative; width: 14px; height: 14px; flex: none; }
.mais::before, .mais::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform 240ms var(--ease-out); }
.mais::after { transform: rotate(90deg); }
details[open] .mais::after { transform: rotate(0deg); }

/* ---------- rodapé ---------- */
.rodape { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem var(--gutter); align-items: end; padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; }
.rodape-marca { width: min(100%, 24rem); height: auto; color: var(--ink); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; padding-bottom: 0.6rem; font-size: 14px; }
.rodape-links .link { white-space: nowrap; }
.rodape-nota { grid-column: 1 / -1; }

/* ---------- tablet e celular ---------- */
@media (max-width: 960px) {
  .hero .tela { height: auto; aspect-ratio: 16 / 9; }
  .hero-corpo, .mac-secao, .preco-texto, .duvidas { grid-template-columns: minmax(0, 1fr); }
  .hero-corpo { gap: 2rem; }
  .ativ-v4 { max-width: 30rem; }
  .menu .link { display: none; }
  .mac-texto .head, .duvidas .head { max-width: none; }
}
@media (max-width: 640px) {
  .hero-lado { flex-direction: column; align-items: flex-start; }
  .tv { border-radius: 16px; padding: 6px; }
  .tela, .hero .tela { aspect-ratio: auto; border-radius: 11px; }
  .tv-barra { padding: 4cqi 5cqi 0; font-size: 12px; }
  .vitrine { padding: 5cqi 5cqi 1cqi; gap: 4.5cqi; }
  .vitrine img { width: 25cqi; }
  .vitrine-nome { font-size: 7.4cqi; }
  .vitrine-info { font-size: 13px; }
  .vitrine-acao { font-size: 12px; }
  .fileira { gap: 2.6cqi; padding: 4cqi 5cqi 5cqi; }
  .tile { flex-basis: 17cqi; }
  .tela#tela-abertura { aspect-ratio: 4 / 3; }
  .abertura img { width: 24cqi; }
  .abertura-mac strong { font-size: 6.4cqi; }
  .palco-fundo { height: 30rem; }
  .rodape { grid-template-columns: minmax(0, 1fr); }
}


/* ================= site no ar: fontes locais, regras da CSP e telas do pedido ================= */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fontes/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fontes/sora-latin.woff2") format("woff2"); }

/* A CSP do site não deixa o script escrever estilo: cor do app e etapa do eclipse vêm de atributos */
.tela[data-cor="magicplayer"] { --cor: #2B0B42; }
.tela[data-cor="playsim"] { --cor: #33110A; }
.tela[data-cor="assistplus"] { --cor: #24124F; }
.tela[data-cor="iborevenda"] { --cor: #2E0C0E; }
.tela[data-cor="ibonew"] { --cor: #071837; }
.tela[data-cor="gpcproroku"] { --cor: #2A0709; }
.tela[data-cor="gpcproandroid"] { --cor: #102107; }
.tela[data-cor="vurevenda"] { --cor: #0D2045; }
.tela[data-cor="gerenciamax"] { --cor: #0A1D3A; }
.tela[data-cor="facilita"] { --cor: #18181C; }
.tela[data-cor="unirevenda"] { --cor: #EEE8DC; --tela-ink: #141414; }
.tela[data-cor="zonex"] { --cor: #200707; }
.ativ[data-etapa="1"] { --luz: 0.3334; }
.ativ[data-etapa="2"] { --luz: 0.6667; }
.ativ[data-etapa="3"] { --luz: 1; }

/* ícone de um app que ainda não tem logo aqui: as iniciais */
.ico-letras { display: grid; place-items: center; width: 100%; height: 100%; background: #000; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.6em; letter-spacing: -0.03em; }

/* utilitários usados pelo app.js e pelo chat.js */
.escondido { display: none !important; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.espaco-cima { margin-top: 14px; }
.espaco-cima-pequeno { margin-top: 10px; }
.msg-erro { color: #E8898B; font-size: 13.5px; margin-top: 8px; min-height: 1.2em; }
.marca small { margin-left: 0.4rem; color: var(--muted); font-family: var(--font-text); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.faixa-canal { display: inline-block; margin-bottom: 0.9rem; padding: 4px 12px; border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.aviso-demo { margin: 0 auto 1rem; max-width: 75rem; padding: 12px 16px; border-radius: var(--radius); background: #3A3220; color: #F1D36B; font-size: 14px; }

/* campos do formulário (lista M3U opcional) */
.ativ-v4 .lista { width: 100%; min-height: 44px; padding: 0 14px; background: var(--bg); border: 1px solid var(--surface-2); border-radius: 8px; color: var(--ink); font-size: 14px; } /* taste-skill-ignore: campo do formulário (data-ui) */
.ativ-v4 .lista::placeholder, .bloco .lista::placeholder { color: #5D6170; }
.ativ-v4 .lista:focus { outline: none; border-color: var(--accent); }
.opcional { color: var(--muted); font-weight: 400; }
.ativ-v4 details.extra { margin-top: 0.85rem; }
.ativ-v4 details.extra summary { cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; }
.ativ-v4 details.extra summary::-webkit-details-marker { display: none; }
.ativ-v4 details.extra summary::before { content: "+ "; }
.ativ-v4 details.extra[open] summary::before { content: "− "; }
.ativ-v4 details.extra[open] summary { margin-bottom: 0.4rem; }

/* ---------- pedido: Pix, lista depois de ativar e histórico ---------- */
.pedido { display: grid; gap: var(--gutter); padding-bottom: clamp(2rem, 4vw, 3rem); }
.bloco { background: var(--surface); border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 2rem); }
.bloco h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.bloco .sub { margin-top: 0.5rem; color: var(--muted); }
.bloco label { display: block; margin: 1rem 0 0.4rem; color: var(--muted); font-size: 13px; }
.bloco .lista { width: 100%; min-height: 46px; padding: 0 14px; background: var(--bg); border: 1px solid var(--surface-2); border-radius: 8px; color: var(--ink); font-size: 14px; } /* taste-skill-ignore: campo do formulário */
.bloco .lista:focus { outline: none; border-color: var(--accent); }
.bloco .dica { margin-top: 0.4rem; color: var(--muted); font-size: 13px; }
.pix-area { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 2rem; align-items: center; margin-top: 1.25rem; }
.bloco-pix #status-texto { margin-top: 1rem; color: var(--ink); font-size: 16px; }
.qrcode img { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 10px; }
.qrcode .aviso-sem-qr { color: var(--muted); font-size: 14px; max-width: 32ch; }
.copia-cola { word-break: break-all; padding: 12px; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 12.5px; line-height: 1.45; max-height: 9rem; overflow-y: auto; }
.pix-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
@media (max-width: 640px) { .pix-area { grid-template-columns: minmax(0, 1fr); } .qrcode img { margin-inline: auto; } }

/* botões do app.js e do chat.js */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform 140ms var(--ease-out), opacity 180ms ease; }
.botao:active { transform: scale(0.97); }
.botao:disabled { opacity: 0.4; cursor: not-allowed; }
.botao.secundario { background: var(--surface-2); color: var(--ink); }
.botao.pequeno { min-height: 34px; padding: 0 0.8rem; font-size: 13px; }

/* histórico */
.historico { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.historico .bloco { overflow-x: auto; }
.historico table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 1rem; }
.historico th, .historico td { text-align: left; padding: 10px 8px; vertical-align: top; font-variant-numeric: tabular-nums; }
.historico th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.historico tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.025); }
.selo { display: inline-block; margin: 2px 8px 2px 0; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink); }
.selo.aguardando_pix { background: #3A3220; color: #F1D36B; }
.selo.pago, .selo.ativando { background: #1F3438; color: #8FD6D0; }
.selo.ativado { background: #1E3524; color: #8FD9A0; }
.selo.falhou { background: #3A2020; color: #E8898B; }
.botao-lista-linha { margin-top: 6px; }

/* ---------- chat (montado pelo chat.js) ---------- */
#chat-botao { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 24px; cursor: pointer; }
#chat-painel { position: fixed; right: 20px; bottom: 88px; z-index: 50; width: min(340px, calc(100vw - 40px)); max-height: 70vh; display: none; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--surface); color: var(--ink); }
#chat-painel.aberto { display: flex; }
#chat-cabecalho { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--surface-2); font-family: var(--font-display); font-weight: 600; }
#chat-mensagens { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; }
.chat-msg { padding: 8px 10px; border-radius: 10px; font-size: 13.5px; max-width: 85%; }
.chat-msg.bot, .chat-msg.atendente, .chat-msg.sistema { background: var(--surface-2); align-self: flex-start; }
.chat-msg.revenda { background: var(--accent); color: var(--accent-ink); align-self: flex-end; }
.chat-msg.sistema { color: #F1D36B; font-style: italic; }
#chat-rapidas { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
#chat-rapidas button { font-size: 12px; }
#chat-forma { display: flex; background: var(--bg); }
#chat-forma input { flex: 1; min-height: 44px; padding: 0 12px; background: transparent; border: 0; color: var(--ink); font-size: 14px; }
#chat-forma input:focus { outline: none; }
#chat-forma button { padding: 0 14px; color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { #chat-botao { right: 14px; bottom: 14px; } #chat-painel { right: 14px; bottom: 80px; } }

/* ícones dentro de caixas (logo ou iniciais) */
.vitrine-ico { display: block; width: 17cqi; aspect-ratio: 1; border-radius: 22%; overflow: hidden; flex: none; }
.vitrine-ico img, .abertura-ico img, .op-ico img, .combo-ico img { width: 100%; height: 100%; border-radius: 0; }
.abertura-ico { display: block; width: 15cqi; aspect-ratio: 1; border-radius: 22%; overflow: hidden; }
.op-ico { display: block; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; font-size: 11px; }
.combo-ico { display: block; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex: none; font-size: 9px; }
.combo-ico[hidden] { display: none; }
.faixa-item { width: clamp(96px, 9.8vw, 148px); aspect-ratio: 1; border-radius: 22%; overflow: hidden; font-size: 2rem; }
.faixa-item img { width: 100%; height: 100%; border-radius: 0; }
@media (max-width: 640px) { .vitrine-ico { width: 25cqi; } .abertura-ico { width: 24cqi; } }

.tv-marca .lua-tv { fill: var(--cor); transition: fill 700ms var(--ease-out); }

/* "A partir de" quando os apps têm preços diferentes */
.preco-numero .a-partir { display: block; font-size: 0.32em; letter-spacing: -0.02em; margin-bottom: 0.25em; }
.preco-numero .a-partir.escondido { display: none !important; }

/* escolha obrigatória do aparelho (apps com mais de uma versão) */
.variantes { margin-top: 0.85rem; }
.variantes .pix-acoes { margin-top: 0; }
.op-preco small:first-child { color: var(--muted); font-weight: 400; }