/* Criar Minha TV, uma marca POP HOSTING.
   Identidade: tinta #15131A, off-white #FAF7F5, magenta #E5266F (marca e CTA) / #B5154F (texto sobre claro), neutros quentes.
   Fontes: Archivo 800 (títulos, expandida com font-stretch) + Instrument Sans (texto).
   Contraste do botão: branco sobre #E5266F = 4,34:1, aprovado em AA como TEXTO GRANDE (o botão usa 19px/700).
   Selos e textos pequenos em fundo magenta usam #B5154F (6,59:1). Texto magenta sobre escuro usa #FF7AA8 (7,55:1). */

:root {
  --tinta: #15131A; --tinta-2: #1D1A23; --tinta-3: #2A2631; --tinta-4: #3A3540; --preto: #0D0C10;
  --papel: #FAF7F5; --papel-2: #F2EDE9; --papel-3: #E8E1DB; --linha: #E2D9D2;
  --texto: #15131A; --texto-2: #5E5660;
  --claro: #FAF7F5; --claro-2: #A39BA5;
  --mag: #E5266F; --mag-esc: #B5154F; --mag-claro: #FF7AA8;
  --f-tit: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f-txt: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --linhas-tv: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
}

/* ============================================================ TROCA DE CANAL (transição entre páginas)
   View Transitions entre documentos: Chrome/Edge 126+ e Safari 18.2+. Os outros trocam de página normalmente.
   A página antiga "desliga" como TV de tubo: achata até uma linha clara em 150 ms. A nova "liga" a partir da linha em 220 ms.
   Total 370 ms. O cabeçalho, a barra de compra e o botão do WhatsApp têm nome próprio e ficam parados. */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition { background: #15131A; }                       /* a "tela desligada" atrás da linha: nunca pisca branco */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; transform-origin: 50% 50%; }
::view-transition-old(root) { animation: tv-desliga 150ms cubic-bezier(.6, 0, .9, .4) both; }
::view-transition-new(root) { animation: tv-liga 370ms linear both; }
@keyframes tv-desliga {
  from { transform: scaleY(1); filter: brightness(1); }
  to   { transform: scaleY(.02); filter: brightness(2.4) saturate(.2); }
}
/* 0 a 150 ms: invisível (a antiga ainda está desligando). 150 a 370 ms: abre a partir da linha. */
@keyframes tv-liga {
  0%, 40.5% { opacity: 0; transform: scaleY(.02); filter: brightness(2.4) saturate(.2); }
  40.6% { opacity: 1; transform: scaleY(.02); filter: brightness(2.4) saturate(.2); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
  100% { opacity: 1; transform: scaleY(1); filter: brightness(1) saturate(1); }
}
::view-transition-group(topo), ::view-transition-group(barra-compra), ::view-transition-group(whats) { animation: none; }
::view-transition-old(topo), ::view-transition-new(topo),
::view-transition-old(barra-compra), ::view-transition-new(barra-compra),
::view-transition-old(whats), ::view-transition-new(whats) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition { background: none; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-aparece 140ms ease both; }
  @keyframes vt-aparece { from { opacity: 0; } }
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
/* O fundo-base é a tinta do estúdio (o topo de todas as páginas é escuro): é o que aparece embaixo do cabeçalho
   quando a página "desliga" na troca de canal. Cada seção pinta o próprio fundo (papel, faixa ou estúdio). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--tinta); color: var(--texto); font: 400 1.0625rem/1.6 var(--f-txt); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-tit); font-weight: 800; font-stretch: 110%; line-height: 1.08; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-stretch: 115%; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.45rem); }
h3 { font-size: 1.2rem; font-stretch: 104%; }
h4 { margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--mag-esc); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--mag); outline-offset: 3px; border-radius: 4px; }
.estudio :focus-visible, .topo :focus-visible, .rodape :focus-visible, .cta-final :focus-visible, .barra-compra :focus-visible { outline-color: var(--mag-claro); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nobr { white-space: nowrap; }
.quebra { overflow-wrap: anywhere; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 100; background: #fff; color: var(--tinta); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.pular:focus { top: 12px; }
/* Foco e âncoras nunca embaixo do que fica fixo na tela (WCAG 2.4.11): o cabeçalho grudado no computador e a barra de compra no celular. */
[id] { scroll-margin-top: 16px; }
@media (min-width: 920px) { html { scroll-padding-top: 84px; } }
@media (max-width: 919px) { html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

.caixa { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.secao { padding: clamp(56px, 8vw, 104px) 0; }
.papel { background: var(--papel); }
.faixa { background: var(--papel-2); }
.estudio { background-color: var(--tinta); background-image: var(--linhas-tv); color: var(--claro); }
.estudio a:not(.btn) { color: var(--mag-claro); }
.estudio a:not(.btn):hover { color: #fff; }
.sec-cab { max-width: 700px; margin-bottom: clamp(28px, 4vw, 48px); }
/* :not(.osd-tag): a etiqueta "CH 0X" mantém o próprio tamanho, cor e margem dentro dos cabeçalhos */
.sec-cab p:not(.osd-tag) { color: var(--texto-2); font-size: 1.1rem; margin: 0; }
.estudio .sec-cab p:not(.osd-tag) { color: var(--claro-2); }

/* etiqueta de canal ("CH 03 · Planos") */
.osd-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 800 .78rem/1.35 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--mag-esc); }
.estudio .osd-tag { color: var(--mag-claro); }
.osd-num { padding: 5px 7px 4px; border: 1.5px solid currentColor; border-radius: 4px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.tally { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mag); box-shadow: 0 0 0 4px rgba(229, 38, 111, .25); animation: rec 1.2s ease-in-out 4; }
@keyframes rec { 50% { opacity: .25; } }

/* ============================================================ botões e selo */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 12px; border: 2px solid transparent;
  font: 700 1.1875rem/1.15 var(--f-txt); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .1s; }
.btn .ic { width: 20px; height: 20px; flex: none; }
.btn-acao { background: var(--mag); color: #fff; }
.btn-acao:hover { background: var(--mag-esc); color: #fff; }
.btn-acao:active { transform: translateY(1px); }
.btn-sec { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-sec:hover { background: var(--tinta); color: var(--claro); }
.btn-claro { background: transparent; color: var(--claro); border-color: #4A4453; }
.btn-claro:hover { border-color: var(--claro); color: var(--claro); }
.btn-largo { width: 100%; }
.link-seta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--mag-esc); }
.link-seta .ic { width: 18px; height: 18px; flex: none; transition: transform .15s; }
.link-seta:hover .ic { transform: translateX(3px); }
.estudio .link-claro, .link-claro { color: var(--claro); }
.estudio .link-claro:hover, .link-claro:hover { color: var(--mag-claro); }
.selo { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: .9rem; line-height: 1.4; color: var(--texto-2); }
.selo .ic { width: 18px; height: 18px; flex: none; color: var(--mag-esc); margin-top: 1px; }
.selo i { font-style: normal; padding: 0 .2em; color: var(--mag-esc); }
.selo-claro, .estudio .selo, .tela-solta .selo { color: var(--claro-2); }
.selo-claro .ic, .selo-claro i, .estudio .selo .ic, .estudio .selo i, .tela-solta .selo .ic, .tela-solta .selo i { color: var(--mag-claro); }
.selo-mini { font-size: .8rem; margin-top: 8px; }
.selo-mini .ic { width: 16px; height: 16px; }

/* ============================================================ cabeçalho */
.topo { position: relative; z-index: 30; background: var(--tinta); color: var(--claro); border-bottom: 1px solid var(--tinta-3); }
.topo-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 64px; padding-top: 10px; padding-bottom: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-simbolo { width: 34px; height: 34px; flex: none; border-radius: 8.5px; box-shadow: 0 0 0 1px var(--tinta-4); }
.logo-texto { font: 800 1.05rem/1 var(--f-tit); font-stretch: 110%; letter-spacing: -.01em; white-space: nowrap; color: var(--claro); }
.logo-texto span { color: var(--mag); }
.topo-cliente { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--claro); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 0; }
.topo-cliente .ic { width: 18px; height: 18px; color: var(--mag-claro); }
.topo-cliente:hover { color: var(--mag-claro); }
.menu { order: 3; width: calc(100% + 40px); margin: 0 -20px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.menu::-webkit-scrollbar { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0 20px 8px; display: flex; gap: 2px; width: max-content; }
.menu a { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 8px; color: var(--claro); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.menu-ch { font: 800 .68rem/1 var(--f-tit); font-stretch: 118%; color: var(--claro-2); border: 1.5px solid var(--tinta-4); border-radius: 4px; padding: 3px 5px; }
.menu a:hover { background: #221F28; }
.menu a[aria-current="page"] { background: #221F28; box-shadow: inset 0 -2px 0 var(--mag); }
.menu a[aria-current="page"] .menu-ch { color: #fff; background: var(--mag-esc); border-color: var(--mag-esc); }
@media (min-width: 920px) {
  .topo { position: sticky; top: 0; }
  .topo-in { flex-wrap: nowrap; padding-top: 0; gap: 24px; min-height: 68px; }
  .logo-texto { font-size: 1.2rem; }
  .logo-simbolo { width: 36px; height: 36px; border-radius: 9px; }
  .menu { order: 0; width: auto; margin: 0 0 0 12px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .menu ul { padding: 0; gap: 4px; }
  .menu a { padding: 10px 12px; font-size: 1rem; }
  .topo-cliente { padding: 9px 16px; border: 1.5px solid var(--tinta-4); border-radius: 999px; font-size: .95rem; }
  .topo-cliente:hover { border-color: var(--claro); color: var(--claro); }
}

/* ============================================================ herói */
.heroi { padding: clamp(36px, 6vw, 88px) 0 clamp(48px, 7vw, 96px); }
.heroi-in { display: grid; gap: 36px; align-items: center; }
.heroi h1 { font-size: clamp(2.05rem, 4.5vw, 3.45rem); max-width: 17ch; margin-bottom: 20px; }
.heroi-sub { font-size: 1.15rem; color: var(--claro-2); max-width: 54ch; }
.heroi-preco { font-size: 1.05rem; margin-bottom: 0; }
.heroi-preco b { font-family: var(--f-tit); font-size: 1.4rem; font-stretch: 108%; color: #fff; white-space: nowrap; }
.heroi-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }
.heroi-arte svg { width: 100%; height: auto; }
.svg-osd { font-family: var(--f-tit); font-weight: 800; font-stretch: 115%; fill: #FAF7F5; letter-spacing: .06em; }
.svg-texto { font-family: var(--f-tit); font-weight: 800; font-stretch: 100%; }
.rec { animation: rec 1.2s ease-in-out 4; }
@media (min-width: 960px) {
  .heroi-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; }
}

/* ============================================================ o que dá para transmitir */
.usos { list-style: none; margin: 0; padding: 0; display: grid; }
.usos li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--linha); }
.usos-ic { position: relative; flex: none; width: 54px; height: 40px; margin-bottom: 6px; border-radius: 8px; background: var(--tinta); color: var(--claro); display: grid; place-items: center; }
.usos-ic::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 18px; height: 3px; border-radius: 2px; background: var(--tinta); transform: translateX(-50%); }
.usos-ic .ic { width: 22px; height: 22px; }
.usos h3 { font-size: 1.15rem; margin: 0 0 4px; }
.usos p { margin: 0; color: var(--texto-2); }
.usos-radio .usos-ic, .usos-radio .usos-ic::after { background: var(--mag-esc); }
@media (min-width: 760px) { .usos { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* ============================================================ o CONTROLE REMOTO e a TV */
.tvc { display: grid; gap: 24px; align-items: start; }
.tv-tela, .tela-solta { position: relative; overflow: hidden; background-color: #1B1821; background-image: var(--linhas-tv); color: var(--claro);
  border: 12px solid var(--preto); border-radius: 22px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 0 0 1px var(--tinta-3); }
.tv-pe { width: 140px; height: 16px; margin: 0 auto; background: var(--preto); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.tv-chiado { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tvc.trocando .tv-chiado { animation: chiado 180ms steps(3) both; }
.tvc.trocando .canal:not([hidden]) { animation: canal-entra 240ms cubic-bezier(.2, .8, .3, 1) both; }
@keyframes chiado { 0% { opacity: .45; } 100% { opacity: 0; } }
@keyframes canal-entra { from { opacity: 0; transform: scaleY(.94); filter: brightness(1.7); } }
.canal + .canal { margin-top: 30px; padding-top: 30px; border-top: 1px dashed var(--tinta-4); }   /* sem JS: um embaixo do outro */
.tvc.ativo .canal + .canal { margin-top: 0; padding-top: 0; border-top: 0; }

.tela-osd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; font: 800 .74rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--claro-2); }
.osd-ch b { font-size: 2.1rem; color: #fff; margin-left: 6px; vertical-align: -.16em; letter-spacing: 0; }
.osd-ga { padding: 4px 7px 3px; border: 1.5px solid var(--mag-claro); color: var(--mag-claro); border-radius: 4px; }
.osd-rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.osd-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--mag); }
.tela-nome { font-size: clamp(1.75rem, 4.2vw, 3rem); font-stretch: 118%; margin: 0 0 6px; color: #fff; overflow-wrap: anywhere; }
.tela-serve { color: var(--claro-2); margin: 0 0 22px; }
.medidores { margin: 0 0 22px; display: grid; gap: 14px; }
.med { display: grid; gap: 5px; }
.med dt { font-size: .86rem; color: var(--claro-2); }
.med dd { margin: 0; display: flex; align-items: center; gap: 14px; }
.med dd b { font: 800 1.35rem/1 var(--f-tit); font-stretch: 110%; color: #fff; min-width: 6.2ch; font-variant-numeric: tabular-nums; }
.med-destaque dd b { font-size: 1.85rem; }
.barra { position: relative; flex: 1; max-width: 220px; height: 9px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--tinta-4) 0 9px, transparent 9px 12px); }
.barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); background: repeating-linear-gradient(90deg, var(--mag-claro) 0 9px, transparent 9px 12px); }
.med-sn dd { gap: 8px; font-weight: 600; color: var(--claro-2); }
.med-sn.sim dd { color: #fff; }
.med-sn .ic { width: 20px; height: 20px; }
.med-sn.sim .ic { color: var(--mag-claro); }
.tela-conta { border-top: 1px solid #2E2A35; padding-top: 20px; }
.preco { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.preco .valor { font: 800 clamp(1.9rem, 4vw, 2.5rem)/1 var(--f-tit); font-stretch: 106%; color: #fff; white-space: nowrap; }
.preco .per { color: var(--claro-2); }
.preco-nota { margin: 6px 0 0; color: var(--claro-2); font-size: .95rem; }
.tela-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tela-botoes .btn-sec { color: var(--claro); border-color: #5A5463; }
.tela-botoes .btn-sec:hover { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
.js [data-ciclo="mensal"] .so-anual, .js [data-ciclo="anual"] .so-mensal, .js .so-sem-js { display: none; }

.controle { order: -1; position: relative; padding: 18px 16px 20px; border-radius: 26px; background: #211E26; border: 1px solid #34303B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 50px -30px rgba(0, 0, 0, .9); }
.ctl-topo { display: none; justify-content: center; align-items: center; gap: 10px; margin-bottom: 18px; }
.ctl-ir { width: 46px; height: 8px; border-radius: 4px; background: var(--preto); }
.ctl-led { width: 9px; height: 9px; border-radius: 50%; background: #4A2131; transition: background-color .1s, box-shadow .1s; }
.controle.piscando .ctl-led { background: var(--mag); box-shadow: 0 0 10px var(--mag); }
.ctl-ciclo { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 11px 14px; border-radius: 14px;
  background: #2C2833; border: 1.5px solid var(--tinta-4); color: var(--claro); font: 700 1rem/1.2 var(--f-txt); text-align: left; cursor: pointer; }
.ctl-ciclo small { grid-column: 1; font-weight: 500; font-size: .82rem; color: var(--claro-2); }
.ctl-chave { grid-row: 1 / 3; grid-column: 2; position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--tinta); border: 1.5px solid #4A4453; transition: background-color .15s; }
.ctl-chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--claro-2); transition: transform .18s, background-color .15s; }
.ctl-ciclo[aria-pressed="true"] .ctl-chave { background: var(--mag-esc); border-color: var(--mag-esc); }
.ctl-ciclo[aria-pressed="true"] .ctl-chave::after { transform: translateX(19px); background: #fff; }
.ctl-rotulo { margin: 16px 2px 8px; font: 800 .7rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-2); }
.ctl-rotulo-ga { color: var(--mag-claro); }
.ctl-teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tecla { display: grid; place-items: center; gap: 3px; min-height: 58px; padding: 9px 2px 8px; border-radius: 14px; background: #2C2833; border: 1.5px solid var(--tinta-4);
  color: var(--claro); cursor: pointer; box-shadow: 0 3px 0 #0F0E12; transition: transform .08s, box-shadow .08s, background-color .15s; font-family: var(--f-txt); }
.tecla b { font: 800 1.45rem/1 var(--f-tit); font-stretch: 112%; }
.tecla small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; letter-spacing: -.01em; font-weight: 600; color: var(--claro-2); }
.tecla:hover { background: #35303D; }
.tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 #0F0E12; }
.tecla[aria-pressed="true"] { background: var(--claro); border-color: var(--claro); color: var(--tinta); }
.tecla[aria-pressed="true"] small { color: var(--texto-2); }
.ctl-ga .tecla { border-color: #6B2A45; }
.ctl-ga .tecla b { color: var(--mag-claro); }
.ctl-ga .tecla[aria-pressed="true"] { background: var(--mag-esc); border-color: var(--mag-esc); color: #fff; }
.ctl-ga .tecla[aria-pressed="true"] b, .ctl-ga .tecla[aria-pressed="true"] small { color: #fff; }
.ctl-ch { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.tecla-ch { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 999px; background: #2C2833; border: 1.5px solid var(--tinta-4);
  color: var(--claro); font: 800 .82rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .1em; cursor: pointer; box-shadow: 0 3px 0 #0F0E12; }
.tecla-ch .ic { width: 18px; height: 18px; }
.tecla-ch:hover { background: #35303D; }
.tecla-ch:active { transform: translateY(2px); box-shadow: 0 1px 0 #0F0E12; }
.ctl-dica { display: none; margin: 16px 0 0; font-size: .8rem; line-height: 1.45; color: var(--claro-2); }
@media (min-width: 960px) {
  .tvc { grid-template-columns: minmax(0, 1fr) 288px; gap: 40px; }
  .controle { order: 0; position: sticky; top: 92px; padding: 22px 18px 24px; border-radius: 32px 32px 46px 46px; }
  .ctl-topo { display: flex; }
  .ctl-ch { display: grid; }
  .ctl-dica { display: block; }
  .medidores { grid-template-columns: 1fr 1fr; gap: 16px 30px; }
}
.em-todos { margin-top: 44px; padding-top: 28px; border-top: 1px solid #2E2A35; }
.em-todos h3 { font-size: .82rem; font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-2); margin-bottom: 14px; }
.em-todos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.em-todos li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--tinta-4); border-radius: 999px; font-size: .95rem; }
.em-todos .ic { width: 16px; height: 16px; color: var(--mag-claro); }
.controle-mais { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 28px 0 0; }

/* ============================================================ como funciona (3 passos) */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.passos li { border-top: 3px solid var(--tinta); padding-top: 22px; }
.passo-arte { width: 100%; max-width: 250px; height: auto; margin-bottom: 18px; padding: 10px; border-radius: 10px; background: var(--papel-2); }
.passo-n { margin: 0 0 8px; font: 800 .76rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--mag-esc); }
.passos h3 { font-size: 1.35rem; }
.passos p:last-child { color: var(--texto-2); margin: 0; }
.passos-mais { margin: 36px 0 0; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* ============================================================ garantia */
.garantia-in { display: grid; gap: 32px; align-items: center; }
.selo-30 { width: 160px; height: 160px; border-radius: 22px; background: var(--tinta); color: #fff; display: grid; place-content: center; text-align: center; outline: 3px solid var(--mag); outline-offset: -14px; }
.selo-30 b { font: 800 4.2rem/.9 var(--f-tit); font-stretch: 120%; }
.selo-30 span { margin-top: 6px; font: 800 .74rem/1.15 var(--f-tit); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--claro-2); }
.garantia-texto p { font-size: 1.1rem; max-width: 60ch; }
.fatos { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.fatos li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.fatos .ic { width: 20px; height: 20px; flex: none; color: var(--mag-esc); margin-top: 2px; }
@media (min-width: 800px) { .garantia-in { grid-template-columns: auto minmax(0, 1fr); gap: 56px; } .selo-30 { width: 190px; height: 190px; } .selo-30 b { font-size: 5rem; } }

/* ============================================================ perguntas em "legenda" (sem acordeão) */
.legendas { display: grid; gap: 30px 56px; }
.legenda-p { margin: 0 0 10px; font: 600 1.06rem/1.5 var(--f-txt); letter-spacing: 0; }
.legenda-p span { background: var(--tinta); color: #fff; padding: .2em .5em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legenda-r { margin: 0; color: var(--texto-2); }
@media (min-width: 860px) { .legendas { grid-template-columns: 1fr 1fr; } .legendas-uma { grid-template-columns: 1fr; } }

/* ============================================================ CTA final: o "sinal de teste" */
.cta-final { background: var(--tinta); color: var(--claro); }
.barras-cor { display: flex; height: 10px; }
.barras-cor i { flex: 1; }
.barras-cor i:nth-child(1) { background: #D9D3CC; }
.barras-cor i:nth-child(2) { background: #D8B83A; }
.barras-cor i:nth-child(3) { background: #3FA9B5; }
.barras-cor i:nth-child(4) { background: #4C9A5E; }
.barras-cor i:nth-child(5) { background: #B2457F; }
.barras-cor i:nth-child(6) { background: #C9433C; }
.barras-cor i:nth-child(7) { background: #3C4FA8; }
.cta-in { display: grid; gap: 28px; align-items: center; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); }
.cta-final h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); font-stretch: 115%; }
.cta-texto p { color: var(--claro-2); font-size: 1.1rem; margin: 0; max-width: 56ch; }
.cta-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-botoes .btn-claro .ic { color: #25D366; }
@media (min-width: 900px) { .cta-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }   /* metade: os 2 botões ficam lado a lado a partir de ~1.200px */

/* ============================================================ topo das páginas internas */
.pagina-cab { padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px); }
.pagina-cab h1 { max-width: 22ch; }
.pagina-cab p:not(.osd-tag) { color: var(--claro-2); font-size: 1.12rem; max-width: 62ch; margin: 0; }
.pagina-cab p b { color: #fff; font-family: var(--f-tit); font-stretch: 106%; }
.ciclos { display: inline-flex; margin-top: 26px; padding: 4px; border-radius: 999px; background: #221F28; border: 1px solid var(--tinta-4); }
.ciclos button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--claro); font: 700 1rem/1 var(--f-txt); cursor: pointer; }
.ciclos button small { font-weight: 600; font-size: .78rem; color: var(--mag-claro); }
.ciclos button[aria-pressed="true"] { background: var(--claro); color: var(--tinta); }
.ciclos button[aria-pressed="true"] small { color: var(--mag-esc); }

/* ============================================================ grade de canais (/planos) */
.grade-sec { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.grade-cab { margin-bottom: 24px; max-width: 720px; }
.grade-cab h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.grade-cab p:not(.osd-tag) { margin: 0; color: var(--texto-2); }
.grade-ga .grade-cab p:not(.osd-tag) { color: var(--claro-2); }
.grade { display: grid; gap: 12px; }
.gl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--linha); }
.gl-ch { display: grid; place-content: center; text-align: center; min-height: 62px; border-radius: 10px; background: var(--tinta); color: #fff; }
.gl-ch span { font: 800 .62rem/1 var(--f-tit); letter-spacing: .14em; color: var(--claro-2); }
.gl-ch b { font: 800 1.85rem/1 var(--f-tit); font-stretch: 115%; }
.gl-nome h3 { font-size: 1.45rem; margin: 0 0 2px; }
.gl-nome p { margin: 0; color: var(--texto-2); font-size: .95rem; line-height: 1.4; }
.gl-spec { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.gl-spec dt { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.gl-spec dd { margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; font-size: .95rem; }
.gl-spec dd b { font: 800 1.2rem/1 var(--f-tit); font-stretch: 106%; }
.gl-spec .barra { flex-basis: 100%; max-width: 150px; margin-top: 7px; height: 7px; background: repeating-linear-gradient(90deg, var(--papel-3) 0 9px, transparent 9px 12px); }
.gl-spec .barra::before { background: repeating-linear-gradient(90deg, var(--mag) 0 9px, transparent 9px 12px); }
.gl-redes dd { color: var(--texto-2); align-items: center; }
.gl-redes.sim dd { color: var(--tinta); font-weight: 700; }
.gl-redes .ic { width: 18px; height: 18px; }
.gl-redes.sim .ic { color: var(--mag-esc); }
.gl-conta { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 14px; border-top: 1px dashed var(--linha); }
.gl .preco .valor { color: var(--tinta); font-size: 1.75rem; }
.gl .preco .per, .gl .preco-nota { color: var(--texto-2); }
.gl .preco-nota { margin: 0 0 4px; font-size: .9rem; }
.gl .btn { min-height: 48px; padding: 10px 16px; margin-top: 8px; }
.grade-ga .gl { background: var(--tinta-2); border-color: #2E2A35; }
.grade-ga .gl-ch { background: var(--mag-esc); }
.grade-ga .gl-ch span { color: #FFD6E4; }
.grade-ga .gl-nome p, .grade-ga .gl-spec dt, .grade-ga .gl .preco .per, .grade-ga .gl .preco-nota, .grade-ga .gl-redes dd { color: var(--claro-2); }
.grade-ga .gl .preco .valor, .grade-ga .gl-redes.sim dd { color: #fff; }
.grade-ga .gl-redes.sim .ic { color: var(--mag-claro); }
.grade-ga .gl-conta { border-color: #2E2A35; }
.grade-ga .gl-spec .barra { background: repeating-linear-gradient(90deg, var(--tinta-4) 0 9px, transparent 9px 12px); }
.grade-ga .gl-spec .barra::before { background: repeating-linear-gradient(90deg, var(--mag-claro) 0 9px, transparent 9px 12px); }
@media (min-width: 640px) { .gl-spec { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 1040px) {
  /* 256px + preço em 1.6rem: "R$ 128,90 por mês" e "R$ 5.749,44 por ano" cabem numa linha (com 236px o "por mês" caía em 6 dos 9 planos) */
  .gl { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 2fr) 256px; padding: 16px 20px; gap: 20px; }
  .gl-spec { grid-column: auto; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 14px; }
  .gl .preco .valor { font-size: 1.6rem; }
  .gl-conta { grid-column: auto; padding: 0 0 0 20px; border-top: 0; border-left: 1px dashed var(--linha); }
  .grade-ga .gl-conta { border-color: #2E2A35; }
}

/* ============================================================ blocos de apoio */
.duas-col { display: grid; gap: 36px; }
@media (min-width: 900px) { .duas-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } .duas-col-topo { align-items: start; } }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { position: relative; padding-left: 30px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .28em; width: 19px; height: 19px; border-radius: 50%;
  background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.lista-grande li { font-size: 1.08rem; font-weight: 600; }
.nota-fina { margin-top: 16px; font-size: .92rem; color: var(--texto-2); }
.caixa-avisos { display: grid; gap: 14px; }
.aviso-bloco { padding: 20px 22px; border-left: 4px solid var(--mag); background: var(--papel); border-radius: 0 12px 12px 0; }
.aviso-bloco h3 { font-size: 1.12rem; margin-bottom: 6px; }
.aviso-bloco p { margin: 0; }
.aviso-escuro { background: var(--tinta); color: var(--claro); }
.aviso-escuro p { color: var(--claro-2); }
.aviso-escuro p + p { margin-top: 18px; }

/* ============================================================ assistente */
.secao-quiz { padding-top: clamp(32px, 5vw, 56px); }
.caixa-quiz { max-width: 900px; }
.quiz { background: #fff; border: 1px solid var(--linha); border-radius: 20px; padding: clamp(20px, 4vw, 40px); }
.quiz-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.quiz-voltar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--papel); color: var(--tinta); cursor: pointer; }
.quiz-voltar .ic { width: 20px; height: 20px; }
.quiz-voltar:disabled { opacity: .35; cursor: default; }
.sintonia { flex: 1; display: flex; gap: 6px; max-width: 320px; }
.sintonia span { flex: 1; height: 8px; border-radius: 2px; background: var(--papel-3); }
.sintonia span.feito { background: var(--tinta); }
.sintonia span.agora { background: var(--mag); }
.sintonia-txt { margin: 0 0 0 auto; font: 800 .74rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.q { border: 0; margin: 0 0 34px; padding: 0; min-width: 0; }
.q-titulo { padding: 0; margin-bottom: 8px; font: 800 clamp(1.4rem, 3vw, 1.95rem)/1.15 var(--f-tit); font-stretch: 110%; }
.q-num { display: block; margin-bottom: 10px; font: 800 .74rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--mag-esc); }
.q-ajuda { color: var(--texto-2); margin-bottom: 20px; max-width: 64ch; }
.opcoes { display: grid; gap: 10px; }
.q-publico .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op { position: relative; display: block; cursor: pointer; }
.op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.op-caixa { display: flex; align-items: center; gap: 14px; height: 100%; padding: 15px 16px; border: 2px solid var(--linha); border-radius: 14px; background: var(--papel); transition: border-color .15s, background-color .15s; }
.op:hover .op-caixa { border-color: #BDB2AA; }
.op input:checked + .op-caixa { border-color: var(--tinta); background: #fff; box-shadow: inset 0 0 0 1px var(--tinta); }
.op input:focus-visible + .op-caixa { outline: 3px solid var(--mag); outline-offset: 3px; }
.op-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: var(--tinta); color: #fff; }
.op-ic .ic { width: 22px; height: 22px; }
.op input:checked + .op-caixa .op-ic { background: var(--mag-esc); }
.op-txt strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.op-txt small { display: block; color: var(--texto-2); font-size: .9rem; line-height: 1.35; }
.op-nivel { flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 14px 12px; }
.op-nivel strong { font: 800 1.3rem/1.05 var(--f-tit); font-stretch: 110%; }
.op-nivel small { color: var(--texto-2); font-size: .86rem; }
.op-medidor { display: block; width: 100%; height: 8px; margin-bottom: 8px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, var(--papel-3) 0 8px, transparent 8px 11px); }
.op-medidor::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); background: repeating-linear-gradient(90deg, var(--tinta) 0 8px, transparent 8px 11px); }
.op input:checked + .op-caixa .op-medidor::before { background: repeating-linear-gradient(90deg, var(--mag) 0 8px, transparent 8px 11px); }
.quiz-form.em-passos .q { display: none; }
.quiz-form.em-passos .q.atual { display: block; animation: q-entra .22s ease both; }
@keyframes q-entra { from { opacity: 0; transform: translateY(6px); } }
.quiz-nav { display: flex; gap: 10px; }
.q-erro { margin: 12px 0 0; color: var(--mag-esc); font-weight: 700; }
.alerta { margin-bottom: 24px; padding: 14px 18px; border-left: 4px solid var(--mag); background: #FDECF2; border-radius: 0 10px 10px 0; }
.alerta ul { margin: 0; padding-left: 20px; }
.quiz-saida { margin: 18px 0 0; color: var(--texto-2); font-size: .95rem; }
@media (min-width: 640px) {
  .q-publico .opcoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .q-redes .opcoes, .q-imagem .opcoes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .q-redes .op-caixa, .q-imagem .op-caixa { flex-direction: column; align-items: flex-start; }
}

.resultado { outline: none; }
.res-cab { margin-bottom: 24px; }
.res-cab h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-stretch: 115%; }
.res-respostas-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.res-respostas-caixa p { margin: 0; color: var(--texto-2); font-weight: 600; }
.res-respostas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.res-respostas li { padding: 6px 12px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: .9rem; font-weight: 600; }
.res-aviso { padding: 14px 18px; border-left: 4px solid var(--mag); background: #FDECF2; }
.res-grade { display: grid; gap: 28px; grid-template-areas: "principal" "porque" "alt"; }
.res-principal { grid-area: principal; }
.res-porque { grid-area: porque; }
.res-alt { grid-area: alt; }
.tela-solta .med dd { flex-wrap: wrap; gap: 8px 14px; }
.tela-solta .tela-botoes .btn { flex: 1 1 auto; }   /* quando quebram, mensal e anual ocupam a linha toda (antes: dois botões de larguras diferentes) */
.tela-solta .barra { flex-basis: 100%; max-width: 240px; }
.res-selo { display: inline-block; margin: 0 0 16px; padding: 7px 10px 6px; border-radius: 6px; background: var(--mag-esc); color: #fff; font: 800 .76rem/1.3 var(--f-tit); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; }
.res-selo-alt { background: transparent; border: 1.5px solid var(--claro-2); color: var(--claro); }
.res-porque h3 { font-size: 1.3rem; }
.res-dica { margin-top: 18px; padding: 14px 16px; background: var(--papel-2); border-radius: 10px; }
.res-alt { border-color: #24212A; }
.res-alt .tela-nome { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.res-mais { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }
@media (min-width: 900px) {
  .res-grade { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "principal porque" "alt porque"; align-items: start; column-gap: 40px; }
  .res-porque { position: sticky; top: 96px; }
}
.quiz-form.em-passos .q-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ============================================================ passo a passo (storyboard) */
.kit { list-style: none; margin: 0; padding: 0; }
.kit li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linha); }
.kit .ic { flex: none; width: 26px; height: 26px; margin-top: 2px; color: var(--mag-esc); }
.kit b { display: block; font-size: 1.05rem; }
.kit span { color: var(--texto-2); }
.storyboard { list-style: none; margin: 0; padding: 0; }
.quadro { display: grid; gap: 18px; padding: 30px 0; border-top: 1px solid var(--papel-3); }
.quadro-arte { position: relative; max-width: 300px; padding: 30px 14px 12px; background: #fff; border: 2px solid var(--tinta); border-radius: 6px; }
.quadro-n { position: absolute; top: 9px; left: 12px; font: 800 .68rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.quadro-arte svg { width: 100%; height: auto; }
.quadro-texto h3 { font-size: 1.45rem; }
.quadro-texto > p { color: var(--texto-2); max-width: 64ch; }
.quadro-texto .lista-check { color: var(--texto); }
.dois-caminhos { display: grid; gap: 14px; margin-bottom: 10px; }
.dois-caminhos > div { padding: 16px 18px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.dois-caminhos h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 1.05rem/1.2 var(--f-txt); }
.dois-caminhos .ic { width: 20px; height: 20px; color: var(--mag-esc); }
.dois-caminhos p { margin: 0; color: var(--texto-2); }
.pp-cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linha); }
.pp-cta-preco { margin: 0 0 16px; max-width: 44ch; }
.pp-cta-preco b { font-family: var(--f-tit); font-size: 1.25rem; font-stretch: 106%; }
@media (min-width: 760px) { .quadro { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; } }
@media (min-width: 1000px) { .dois-caminhos { grid-template-columns: 1fr 1fr; } }

/* ============================================================ /perguntas */
.faq-pagina { display: grid; gap: 32px; }
.faq-indice-t { margin: 0 0 12px; font: 800 .74rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.faq-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-indice a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--linha); color: var(--tinta); text-decoration: none; font-weight: 600; }
.faq-indice a:hover { border-color: var(--tinta); }
.faq-indice a span { font: 800 .78rem/1 var(--f-tit); color: var(--mag-esc); }
.faq-grupo { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--linha); }
.faq-grupo:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.faq-grupo h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 22px; }
/* atalho de compra ao lado das perguntas (e o do /passo-a-passo): só onde não existe a barra de compra fixa do celular (< 920px) */
.faq-cta { margin-top: 28px; padding: 18px 18px 20px; }
.faq-cta p + p { margin-top: 12px; }
.aviso-escuro .faq-cta-t { color: #fff; font: 800 1.1rem/1.2 var(--f-tit); font-stretch: 108%; }
.faq-cta b { color: #fff; }
@media (max-width: 919px) { .faq-cta, .pp-cta { display: none; } }
@media (min-width: 900px) {
  .faq-pagina { grid-template-columns: 230px minmax(0, 1fr); gap: 64px; align-items: start; }
  .faq-lado { position: sticky; top: 96px; }
  .faq-indice ol { display: grid; gap: 4px; }
  .faq-indice a { border-radius: 8px; border-color: transparent; }
  .faq-indice a:hover { background: var(--papel-2); border-color: transparent; }
}

/* ============================================================ 404 "sem sinal" */
.sem-sinal { padding: clamp(48px, 7vw, 96px) 0; }
.sem-sinal-in { display: grid; gap: 36px; align-items: center; }
.sem-sinal-tela { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 12px solid var(--preto); border-radius: 18px; background: var(--preto); }
.barras-grandes { height: 100%; }
.sem-sinal-osd { position: absolute; left: 50%; top: 50%; margin: 0; padding: 10px 16px 9px; transform: translate(-50%, -50%); background: var(--preto); color: #fff; white-space: nowrap; font: 800 .95rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .12em; }
.sem-sinal h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-stretch: 118%; }
.sem-sinal p { color: var(--claro-2); }
.atalhos { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.estudio .atalhos a { display: inline-block; padding: 10px 16px; border: 1.5px solid #4A4453; border-radius: 999px; color: var(--claro); text-decoration: none; font-weight: 600; }
.estudio .atalhos a:hover { border-color: var(--claro); }
@media (min-width: 860px) { .sem-sinal-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

/* ============================================================ rodapé "ficha técnica" */
.rodape { background: #0F0E12; color: var(--claro); padding: 56px 0 44px; }
.rodape-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 24px; margin-bottom: 6px; border-bottom: 1px solid var(--tinta-3); }
.rodape-fim { margin: 0; font: 800 .74rem/1 var(--f-tit); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--claro-2); }
.ficha { margin: 0; }
.ficha > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid #1F1C24; }
.ficha dt { font: 800 .72rem/1.7 var(--f-tit); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--claro-2); }
.ficha dd { margin: 0; color: #DAD3D7; }
.ficha a { color: var(--claro); text-decoration-color: #6B6370; }
.ficha a:hover { color: var(--mag-claro); }
.ficha-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (min-width: 760px) { .ficha > div { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; } .ficha dt { text-align: right; } }

/* ============================================================ barra de compra (celular) e WhatsApp flutuante */
.barra-compra { display: none; }
.whats { position: fixed; right: 18px; bottom: 18px; z-index: 41; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 13px; border-radius: 999px;
  background: var(--tinta); color: #fff; text-decoration: none; font-weight: 700; border: 1.5px solid var(--tinta-4); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); view-transition-name: whats; }
.whats .ic { width: 26px; height: 26px; color: #25D366; }
.whats:hover { background: #221F28; color: #fff; }
@media (max-width: 919px) {
  .barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(21, 19, 26, .97); color: var(--claro); border-top: 1px solid #2E2A35; view-transition-name: barra-compra; }
  .bc-texto { flex: 1; min-width: 0; }
  .bc-preco { margin: 0; font-size: .95rem; line-height: 1.2; }
  .bc-preco b { font-family: var(--f-tit); font-size: 1.12rem; font-stretch: 106%; color: #fff; }
  .bc-selo { margin: 3px 0 0; font-size: .72rem; line-height: 1.3; color: var(--claro-2); }
  .barra-compra .btn { flex: none; min-height: 48px; padding: 10px 16px; }
  .rodape { padding-bottom: 120px; }
  .whats { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); padding: 11px; }
  .whats span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

@media (max-width: 389px) {
  .barra-compra { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .bc-preco { font-size: .85rem; }
  .bc-preco b { font-size: 1.02rem; }
  .bc-selo { font-size: .68rem; }
  .barra-compra .btn { padding: 10px 14px; }
}

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