/* DK Pneus · apresentação para o cliente (#/apresentacao). Classes com prefixo ap-.
   Palco 16:9 que cabe em qualquer tela. Medidas em --u = 1cqw (1% da largura do palco): a composição é a mesma no
   notebook (1366×768), na TV (1920×1080) e no projetor. Em 1366 em tela cheia o texto corrido fica com ~18 px.
   As prévias da loja são feitas em px e ganham "zoom" para caber (JS); as telas ao vivo são iframes com transform: scale.
   Troca de slide: o conteúdo sai com fade, o fundo muda de cor e o novo entra em camadas (título, texto, imagem).
   Celular em pé (ou tela estreita): um slide por tela, com rolagem vertical e os mesmos componentes. */

.ap {
  --u: 1cqw;
  --ap-claro: #F4F5F8;
  --ap-azul-vivo: #3D6DFF;   /* azul DK legível sobre o noite (palavra-chave dos títulos) */
  --ap-azul-rot: #8FA8FF;    /* rótulos e ícones sobre o noite */
  --ap-corpo-escuro: #A9B1C5;
  --ap-suave-escuro: #8C95AD;
  --ap-cine: cubic-bezier(.16, .84, .24, 1);
  --f-capa: calc(var(--u) * 5.1);
  --f-tit: calc(var(--u) * 3.5);
  --f-h3: max(15px, calc(var(--u) * 1.66));
  --f-lead: max(15px, calc(var(--u) * 1.52));
  --f-corpo: max(13.5px, calc(var(--u) * 1.36));
  --f-peq: max(12.5px, calc(var(--u) * 1.3));
  --f-rot: max(11px, calc(var(--u) * 1.1));
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--noite);
  color: var(--ap-corpo-escuro);
  outline: none;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .6s var(--ease);
}
.ap[data-tema="claro"] { background: var(--ap-claro); }
/* especificidade zero de propósito: com ".ap ol" o reset vencia o margin-top das listas dos slides e o título encostava no 1º item */
.ap :where(ol, ul) { list-style: none; margin: 0; padding: 0; }
.ap figure, .ap dl, .ap dd { margin: 0; }
.ap.ocioso, .ap.ocioso * { cursor: none !important; }

/* ---------- palco 16:9 ---------- */
.ap-palco {
  position: relative;
  width: min(100vw, 177.7778vh);
  height: min(56.25vw, 100vh);
  container-type: size;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .ap-palco { width: min(100vw, 177.7778dvh); height: min(56.25vw, 100dvh); }
}

/* ---------- slide + transição ----------
   O slide é transparente: quem troca de cor é o fundo (.ap). O antigo sai com fade; o novo entra por cima. */
.ap-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  column-gap: calc(var(--u) * 4.4);
  padding: calc(var(--u) * 4.2) calc(var(--u) * 5.6) calc(var(--u) * 6.4);
  color: var(--ap-corpo-escuro);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s var(--ease-saida), visibility 0s linear .34s;
}
.ap-slide.is-on { z-index: 2; opacity: 1; visibility: visible; transition: opacity .45s var(--ease) .1s, visibility 0s; }
.ap-slide.ap-t-claro { color: var(--texto); }
/* só os títulos da apresentação (as prévias da loja mantêm as cores do site) */
.ap-slide.ap-t-escuro .ap-tit, .ap-slide.ap-t-escuro .ap-col-txt h3 { color: #fff; }

/* entrada em camadas: --i dá a ordem (rótulo e título primeiro, depois texto, por último a imagem / prévia) */
.ap-slide [data-r] {
  opacity: 0;
  transform: translate3d(0, calc(var(--u) * 1.3), 0);
  transition: opacity .28s var(--ease-saida), transform 0s linear .4s;
}
.ap-slide [data-r="m"] { transform: translate3d(0, calc(var(--u) * 1.8), 0) scale(.975); }
.ap-slide .ap-tit[data-r], .ap-slide .ap-capa-tit[data-r], .ap-slide .ap-fim-tit[data-r] { transform: translate3d(0, calc(var(--u) * 2.2), 0); }
.ap-slide .ap-pneu[data-r] { transform: translate3d(calc(var(--u) * 24), 0, 0); }
.ap-slide.is-on [data-r] {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .95s var(--ap-cine);
  transition-delay: calc(var(--i, 0) * 85ms + 260ms);
}
.ap-sem-anim .ap-slide, .ap-sem-anim .ap-slide [data-r], .ap-sem-anim .ap-progresso i, .ap-sem-anim .ap-pneu .ap-pa-gira { transition: none !important; }
.ap-reduzir .ap-slide [data-r] { transform: none !important; }

/* ---------- tipografia comum ---------- */
.ap-rot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  font: 600 var(--f-rot)/1.2 var(--fonte);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--azul);
}
.ap-rot::before { content: ""; flex: none; width: calc(var(--u) * 2.2); height: 2px; border-radius: 2px; background: currentColor; }
.ap-t-escuro .ap-rot { color: var(--ap-azul-rot); }
.ap-tit {
  margin-top: calc(var(--u) * 1.2);
  font: 800 var(--f-tit)/1.04 var(--fonte-tit);
  letter-spacing: -.015em;
  color: var(--tinta);
  text-wrap: balance;
}
.ap-tit em, .ap-capa-tit em, .ap-fim-tit em { font-style: normal; color: var(--azul); }
.ap-t-escuro .ap-tit em, .ap-t-escuro .ap-capa-tit em, .ap-t-escuro .ap-fim-tit em { color: var(--ap-azul-vivo); }
.ap-lead { font-size: var(--f-lead); line-height: 1.45; text-wrap: pretty; }
.ap-meta { font-size: var(--f-peq); color: #7F869B; letter-spacing: .01em; }
.ap-legenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .6);
  margin-top: calc(var(--u) * 1.2);
  font-size: var(--f-peq);
  line-height: 1.4;
  color: var(--suave);
  text-align: center;
}
.ap-legenda .ic { flex: none; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); color: var(--azul); }
.ap-legenda--esq { justify-content: flex-start; text-align: left; }
.ap-t-escuro .ap-legenda { color: var(--ap-suave-escuro); }
.ap-ponto { flex: none; width: calc(var(--u) * .6); height: calc(var(--u) * .6); min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(27, 138, 75, .16); }
.ap-url { font-weight: 700; color: #DCE3FF; white-space: nowrap; }
.ap-desfazer { margin-top: calc(var(--u) * 1.2); font-size: var(--f-peq); }
.ap-desfazer .ic { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }
.ap-t-escuro .ap-desfazer { color: var(--ap-azul-rot); }

/* ---------- logo oficial (capa e fim) ---------- */
.ap-logo { display: block; flex: none; align-self: flex-start; width: auto; height: calc(var(--u) * 3.3); }
.ap-logo--mini { height: calc(var(--u) * 2.7); }

/* ---------- colunas e prévias com zoom ---------- */
.ap-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }
.ap-caixa-escala { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ap-escala { flex: none; }
.ap-print { pointer-events: none; -webkit-user-select: none; user-select: none; }
.ap-semdados { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 24px; text-align: center; color: var(--suave); font-size: 14px; }
.ap-semdados b { color: var(--tinta); font-size: 16px; }
.ap-semdados .ic { color: #B9BFCC; }

/* =================================================================
   CAPA · pneu-assinatura
   ================================================================= */
.ap-k-capa { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--u) * 5.8); }
/* luz de estúdio atrás do pneu (fundo, não texto) */
.ap-k-capa::before {
  content: "";
  position: absolute;
  right: calc(var(--u) * -25);
  bottom: calc(var(--u) * -12.5);
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(38, 60, 140, .3), rgba(38, 60, 140, .1) 55%, rgba(38, 60, 140, 0));
  pointer-events: none;
}
.ap-capa-txt { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; max-width: calc(var(--u) * 48); }
.ap-capa-meio { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--u) * 1.5); }
.ap-capa-tit { font: 800 var(--f-capa)/.98 var(--fonte-tit); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.ap-capa-sub { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 2.4); font-size: var(--f-lead); font-weight: 500; color: #B4BBCD; }
.ap-capa-sub::before { content: ""; flex: none; width: calc(var(--u) * 2.6); height: 2px; border-radius: 2px; background: var(--azul); }

/* O pneu fica acima da barra de controles (bottom > altura da barra) e inteiro no palco: nada de botão por cima da borracha. */
.ap-pneu {
  position: absolute;
  z-index: 1;
  right: calc(var(--u) * -6);
  bottom: calc(var(--u) * 6.4);
  width: calc(var(--u) * 46);
  aspect-ratio: 1;
  pointer-events: none;
}
.ap-pneu-in { position: relative; width: 100%; height: 100%; }
/* luz de estúdio bem fraca atrás e sombra de contato embaixo (a mesma do banner da loja) */
.ap-pneu-in::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); }
.ap-pneu-in::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -5%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); }
.ap-pa-l { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.ap-pa-gira { transform-origin: 50% 50%; }
.ap-pa-txt { font-family: var(--fonte-tit); font-size: 18px; font-weight: 700; }
.ap-pa-marca { font-size: 31px; font-weight: 800; }
.ap-pa-txt-s { fill: #030405; }
.ap-pa-txt-l { fill: #3D424B; }
/* entra rolando da direita (giro proporcional ao caminho: 24u / raio 23u ≈ 60°; usamos 49°) e assenta. Não gira sem parar. */
.ap-pneu .ap-pa-gira { transform: rotate(49deg); transition: transform 0s linear .4s; }
.ap-slide.is-on .ap-pneu[data-r] { transition: opacity 1s var(--ease), transform 1.8s var(--ap-cine); transition-delay: 200ms; }
.ap-slide.is-on .ap-pneu .ap-pa-gira { transform: none; transition: transform 1.8s var(--ap-cine) 200ms; }
.ap-reduzir .ap-pneu .ap-pa-gira { transform: none !important; transition: none !important; }

/* =================================================================
   O QUE VOCÊ RECEBE
   ================================================================= */
.ap-k-entregas { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ap-entregas { margin-top: calc(var(--u) * 2.6); }
.ap-entregas li { display: grid; grid-template-columns: calc(var(--u) * 3.6) minmax(0, 1fr); padding: calc(var(--u) * 1.5) 0; border-top: 1px solid #DCDFE7; }
.ap-entregas li:last-child { border-bottom: 1px solid #DCDFE7; }
.ap-num { padding-top: calc(var(--u) * .3); font: 700 var(--f-rot)/1.4 var(--fonte); letter-spacing: .1em; color: var(--azul); font-variant-numeric: tabular-nums; }
.ap-entregas h3 { font: 700 var(--f-h3)/1.15 var(--fonte-tit); color: var(--tinta); }
.ap-entregas p { margin-top: calc(var(--u) * .5); font-size: var(--f-corpo); line-height: 1.45; max-width: 30em; }

/* prévia da loja (px; ganha zoom) */
.ap-site { width: 660px; overflow: hidden; border-radius: 14px; background: #fff; color: var(--texto); font-size: 14px; text-align: left; box-shadow: 0 40px 70px -40px rgba(0, 2, 14, .55), 0 0 0 1px rgba(0, 2, 14, .07); }
.ap-site-url { height: 36px; display: flex; align-items: center; justify-content: center; background: #ECEEF3; border-bottom: 1px solid var(--linha); }
.ap-site-url span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 52%; height: 24px; padding: 0 14px; border-radius: 7px; background: #fff; color: var(--texto); font-size: 12px; font-weight: 600; }
.ap-site-url .ic { color: var(--ok); }
.ap-site-hdr { height: 66px; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--linha); }
.ap-site-hdr .logo img { width: auto; height: 32px; }
.ap-site-hdr > .ic { flex: none; color: var(--tinta); }
.ap-site-busca { flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 12px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo); color: var(--suave); font-size: 12.5px; }
.ap-site-busca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-site-busca .ic { flex: none; width: 28px; height: 26px; padding: 5px; border-radius: 6px; background: var(--azul); color: #fff; }
.ap-site-wa { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--verde-wa); color: var(--verde-wa-esc); font-size: 12px; font-weight: 700; }
.ap-site-menu { height: 36px; display: flex; align-items: center; gap: 20px; padding: 0 20px; overflow: hidden; background: var(--azul); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ap-site-banner { position: relative; height: 122px; display: flex; align-items: center; overflow: hidden; background: var(--noite); }
.ap-site-banner img { position: absolute; top: 0; right: 0; width: 54%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.ap-site-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--noite) 42%, rgba(0, 2, 14, .6) 62%, rgba(0, 2, 14, .08) 100%); }
.ap-site-banner > div { position: relative; z-index: 1; max-width: 340px; padding: 0 22px; }
.ap-site-banner small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #AFC3FF; }
.ap-site-banner b { display: block; margin: 6px 0 10px; font: 800 22px/1.05 var(--fonte-tit); color: #fff; }
.ap-site-banner span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 7px; background: var(--azul); color: #fff; font-size: 12px; font-weight: 700; }
.ap-site-sec { padding: 16px 20px 20px; background: var(--fundo); }
.ap-site-sec > b { display: block; margin-bottom: 10px; font: 700 18px/1.2 var(--fonte-tit); color: var(--tinta); }
.ap-site-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* =================================================================
   COMO O SEU CLIENTE COMPRA
   ================================================================= */
.ap-k-compra { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.ap-passos { margin-top: calc(var(--u) * 2.2); }
.ap-passos li { position: relative; display: grid; grid-template-columns: calc(var(--u) * 3.6) minmax(0, 1fr); padding: calc(var(--u) * .7) 0; }
.ap-passos li::before { content: ""; position: absolute; left: calc(var(--u) * 1.25); top: calc(var(--u) * 3.5); bottom: calc(var(--u) * -.5); width: 1px; background: rgba(255, 255, 255, .16); }
.ap-passos li:last-child::before { display: none; }
.ap-passo-n { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%; display: grid; place-items: center; font: 700 max(10px, calc(var(--u) * .95))/1 var(--fonte); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); font-variant-numeric: tabular-nums; }
.ap-passos h3 { padding-top: calc(var(--u) * .2); font: 700 var(--f-h3)/1.18 var(--fonte-tit); }
.ap-passos p { margin-top: calc(var(--u) * .2); font-size: var(--f-corpo); line-height: 1.45; color: #9AA3BA; }
.ap-passos li.is-wa .ap-passo-n { background: var(--verde-wa); box-shadow: none; }
.ap-passos li.is-wa .ap-passo-n .ic-wa { width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
.ap-destaque { margin-top: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.5); border-radius: calc(var(--u) * .9); background: rgba(37, 211, 102, .08); box-shadow: inset 3px 0 0 var(--verde-wa); font: 700 var(--f-lead)/1.3 var(--fonte-tit); color: #fff; }
.ap-col-fone .ap-legenda { margin-top: calc(var(--u) * .9); }

/* celular com a mensagem do WhatsApp (px; ganha zoom) */
.ap-fone { width: 350px; height: 720px; padding: 11px; border-radius: 50px; background: #0B0F1E; box-shadow: 0 60px 90px -50px rgba(0, 0, 0, .95), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.ap-fone-tela { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 40px; background: #EFEAE2; color: #111B21; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left; }
.ap-fone-status { flex: none; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 30px; background: #008069; color: #fff; font-size: 13px; font-weight: 600; }
.ap-fone-status i { position: relative; width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, .85); }
.ap-fone-status i::after { content: ""; position: absolute; top: 2.5px; bottom: 2.5px; left: 2.5px; width: 12px; border-radius: 1.5px; background: #fff; }
.ap-fone-topo { flex: none; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 8px; background: #008069; color: #fff; }
.ap-fone-topo img { width: 38px; height: 38px; border-radius: 50%; }
.ap-fone-topo b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.ap-fone-topo small { display: block; font-size: 12.5px; opacity: .85; }
.ap-fone-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 10px 10px 6px; overflow: hidden; }
.ap-fone-dia { align-self: center; padding: 4px 10px; border-radius: 8px; background: #fff; color: #54656F; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.ap-fone-msg { align-self: flex-end; max-width: 93%; padding: 7px 9px 5px; border-radius: 10px 3px 10px 10px; background: #D9FDD3; font-size: 13.2px; line-height: 1.42; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.ap-fone-txt { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-fone-txt b { font-weight: 700; }
.ap-fone-hora { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; font-size: 11px; color: #667781; }
.ap-fone-campo { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 16px; }
.ap-fone-campo span { flex: 1; height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 22px; background: #fff; color: #8696A0; font-size: 15px; }
.ap-fone-campo i { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #00A884; }

/* =================================================================
   VOCÊ NO CONTROLE · ANÚNCIOS (lista com ícones)
   ================================================================= */
.ap-k-painel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.ap-k-anuncios { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.ap-pontos { margin-top: calc(var(--u) * 2.4); display: grid; gap: calc(var(--u) * 1.5); }
.ap-pontos li { display: grid; grid-template-columns: calc(var(--u) * 3) minmax(0, 1fr); gap: calc(var(--u) * 1.3); align-items: start; }
.ap-ic { width: calc(var(--u) * 3); height: calc(var(--u) * 3); display: grid; place-items: center; border-radius: calc(var(--u) * .8); background: var(--azul-claro); color: var(--azul); }
.ap-ic .ic, .ap-ic .ic-wa { width: calc(var(--u) * 1.45); height: calc(var(--u) * 1.45); }
.ap-pontos h3 { padding-top: calc(var(--u) * .1); font: 700 var(--f-h3)/1.2 var(--fonte-tit); color: var(--tinta); }
.ap-pontos p { margin-top: calc(var(--u) * .3); font-size: var(--f-corpo); line-height: 1.45; }
.ap-t-escuro .ap-ic { background: rgba(61, 109, 255, .15); color: var(--ap-azul-rot); }
.ap-t-escuro .ap-pontos p { color: #9AA3BA; }
.ap-legenda-acao { justify-content: space-between; gap: calc(var(--u) * 1.4); text-align: left; }
.ap-legenda-acao > span { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); }
.ap-legenda-acao .ap-desfazer { flex: none; margin-top: 0; }

/* painel do lojista (px; ganha zoom; botões funcionam de verdade) */
.ap-pn { width: 760px; display: flex; overflow: hidden; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 40px 70px -40px rgba(0, 2, 14, .5), 0 0 0 1px rgba(0, 2, 14, .06); }
.ap-pn-lado { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; background: var(--noite-2); color: #7F8AB0; }
.ap-pn-lado span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.ap-pn-lado span.on { background: rgba(4, 70, 230, .3); color: #fff; }
.ap-pn-corpo { flex: 1; min-width: 0; }
.ap-pn-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px 14px 20px; border-bottom: 1px solid var(--linha); }
.ap-pn-tit b { display: block; font: 700 19px/1.2 var(--fonte-tit); color: var(--tinta); }
.ap-pn-vivo { display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.ap-pn-vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(27, 138, 75, .15); }
.ap-pn-acoes { display: flex; gap: 8px; }
.ap-pn-bt { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linha); color: var(--tinta); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: box-shadow .15s, color .15s; }
.ap-pn-bt:hover { box-shadow: inset 0 0 0 1.5px #C4C9D5; color: var(--azul); }
.ap-pn-bt .ic { color: var(--azul); }
.ap-pn-cab, .ap-pn-linha { display: grid; grid-template-columns: minmax(0, 1fr) 116px 100px 128px; align-items: center; gap: 12px; padding: 0 20px; }
.ap-pn-cab { height: 38px; background: #FAFBFC; border-bottom: 1px solid var(--linha); color: var(--suave); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.ap-pn-linha { min-height: 68px; border-bottom: 1px solid var(--linha); transition: background-color .5s var(--ease-saida); }
.ap-pn-linha:last-child { border-bottom: 0; }
.ap-pn-linha.mudou { background: #F2F6FF; transition: none; }
.ap-pn-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-pn-prod img { flex: none; width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.ap-pn-prod span { min-width: 0; }
.ap-pn-prod b { display: block; overflow: hidden; color: var(--tinta); font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.ap-pn-prod small { display: block; overflow: hidden; color: var(--suave); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.ap-pn-qtd { display: inline-flex; align-items: center; width: max-content; height: 36px; overflow: hidden; border: 1px solid var(--linha); border-radius: 9px; background: #fff; }
.ap-pn-qtd button { width: 34px; height: 100%; display: grid; place-items: center; border: 0; background: none; color: var(--tinta); transition: background-color .15s, color .15s; }
.ap-pn-qtd button:hover { background: var(--fundo); color: var(--azul); }
.ap-pn-qtd button:focus-visible { outline-offset: -2px; border-radius: 0; }
.ap-pn-qtd button:disabled { color: #C5C9D3; background: none; cursor: default; }
.ap-pn-qtd output { min-width: 38px; color: var(--tinta); font-size: 15px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ap-pn-preco { color: var(--tinta); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-pn-loja .estoque { margin: 0; font-size: 12.5px; }

/* conferência da planilha importada (o modal fica fora do .ap, no body) */
.ap-imp-arq { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
.ap-imp-arq .ic { flex: none; color: var(--azul); }
.ap-imp { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ap-imp li { padding: 10px 14px; border-radius: 10px; background: var(--fundo); font-size: 14.5px; }
.ap-imp li b { color: var(--tinta); font-size: 16px; }
.ap-imp li span { color: var(--suave); }
.ap-imp li.is-ok { background: #E9F6EE; }
.ap-imp li.is-alerta { background: #FFF6E0; }
.ap-imp-dica { margin-top: 12px; color: var(--suave); font-size: 14px; }

/* =================================================================
   VEJA FUNCIONANDO · a loja de verdade em dois iframes
   ================================================================= */
.ap-k-aovivo { grid-template-columns: calc(var(--u) * 22) minmax(0, 1fr); column-gap: calc(var(--u) * 2.2); }
.ap-k-aovivo::before {
  content: "";
  position: absolute;
  left: 34%;
  right: -6%;
  top: 2%;
  bottom: -18%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 70, 150, .24), rgba(46, 70, 150, 0));
  pointer-events: none;
}
.ap-ao-txt { position: relative; z-index: 2; transition: opacity .3s var(--ease) .12s, visibility 0s; }
.ap-ao-passos { margin-top: calc(var(--u) * 2.2); display: grid; gap: calc(var(--u) * .7); }
.ap-ao-passo {
  width: 100%;
  display: grid;
  grid-template-columns: calc(var(--u) * 2.4) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .65) calc(var(--u) * 1) calc(var(--u) * .65) calc(var(--u) * .8);
  border: 0;
  border-radius: calc(var(--u) * 1);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: #fff;
  text-align: left;
  transition: background-color .18s, box-shadow .18s;
}
.ap-ao-passo:hover { background: rgba(255, 255, 255, .08); }
.ap-ao-passo.is-on { background: rgba(4, 70, 230, .2); box-shadow: inset 0 0 0 1.5px var(--azul); }
.ap-ao-n { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); font: 700 max(11px, calc(var(--u) * 1))/1 var(--fonte); font-variant-numeric: tabular-nums; }
.ap-ao-passo.is-on .ap-ao-n { background: var(--azul); box-shadow: none; }
.ap-ao-t b { display: block; font: 700 max(14px, calc(var(--u) * 1.42))/1.2 var(--fonte); color: #fff; }
.ap-ao-t small { display: block; margin-top: calc(var(--u) * .15); color: var(--ap-suave-escuro); font-size: var(--f-peq); line-height: 1.3; }
.ap-ao-passo > .ic { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); color: #6F7891; transition: transform .2s var(--ease), color .2s; }
.ap-ao-passo:hover > .ic, .ap-ao-passo.is-on > .ic { color: #fff; transform: translateX(2px); }
.ap-ao-nota { display: flex; align-items: flex-start; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * 1.6); color: var(--ap-suave-escuro); font-size: var(--f-peq); line-height: 1.4; }
.ap-ao-nota .ic { flex: none; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); margin-top: .15em; color: var(--ap-azul-rot); }

.ap-ao { position: static; display: flex; align-items: flex-end; justify-content: center; align-self: center; }
.ap-note { --nh: 29.5; position: relative; z-index: 1; flex: none; transform-origin: 0 0; transition: opacity .3s var(--ease) .12s, visibility 0s; }
.ap-note-tampa {
  position: relative;
  width: calc(var(--u) * (var(--nh) * 1.6 + 1.8));
  margin: 0 auto;
  padding: calc(var(--u) * .9) calc(var(--u) * .9) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * .4) calc(var(--u) * .4);
  background: #0B0E1A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 calc(var(--u) * 2.4) calc(var(--u) * 5) calc(var(--u) * -2) rgba(0, 0, 0, .85);
}
.ap-note-cam { position: absolute; top: calc(var(--u) * .3); left: 50%; width: calc(var(--u) * .32); height: calc(var(--u) * .32); margin-left: calc(var(--u) * -.16); border-radius: 50%; background: #1E2436; }
.ap-note-base {
  position: relative;
  width: calc(var(--u) * (var(--nh) * 1.6 + 5.4));
  height: calc(var(--u) * 1.3);
  margin: 0 auto;
  border-radius: 0 0 calc(var(--u) * 1.6) calc(var(--u) * 1.6) / 0 0 calc(var(--u) * 1) calc(var(--u) * 1);
  background: linear-gradient(180deg, #D7DBE3, #A9AFBC 60%, #7E8595);
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2) calc(var(--u) * -.8) rgba(0, 0, 0, .7);
}
.ap-note-base::before { content: ""; position: absolute; top: 0; left: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * .42); margin-left: calc(var(--u) * -4); border-radius: 0 0 calc(var(--u) * .5) calc(var(--u) * .5); background: #959CAB; }

.ap-cel { --ch: 27.5; position: relative; z-index: 2; flex: none; margin-left: calc(var(--u) * -2.6); transform-origin: 0 0; transition: opacity .3s var(--ease) .12s, visibility 0s; }
.ap-cel-corpo {
  width: calc(var(--u) * (var(--ch) * .4865 + 1.2));
  padding: calc(var(--u) * .6);
  border-radius: calc(var(--u) * 2.4);
  background: #0B0E1A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * -1.2) rgba(0, 0, 0, .9);
}
.ap-cel-tela { overflow: hidden; border-radius: calc(var(--u) * 1.85); background: #fff; }
.ap-cel-status { position: relative; height: calc(var(--u) * 1.9); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 1.5) 0 calc(var(--u) * 1.7); background: var(--noite); color: #fff; font: 600 max(8px, calc(var(--u) * .78))/1 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ap-cel-ilha { position: absolute; top: calc(var(--u) * .42); left: 50%; width: calc(var(--u) * 4.4); height: calc(var(--u) * 1.1); margin-left: calc(var(--u) * -2.2); border-radius: 999px; background: #000; }
.ap-cel-bat { position: relative; width: calc(var(--u) * 1.5); height: calc(var(--u) * .72); border-radius: calc(var(--u) * .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.ap-cel-bat::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 60%; border-radius: 1px; background: #fff; }

/* tela embutida: o iframe tem o tamanho real (--vw × --vh) e é reduzido para caber (--s, calculado no JS) */
.ap-tela { position: relative; overflow: hidden; aspect-ratio: var(--vw) / var(--vh); background: #fff; }
.ap-tela--note { border-radius: 2px; }
.ap-tela iframe { position: absolute; top: 0; left: 0; display: block; width: calc(var(--vw) * 1px); height: calc(var(--vh) * 1px); border: 0; background: #fff; transform: scale(var(--s, .5)); transform-origin: 0 0; }
.ap-tela-capa { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1); padding: 8%; background: #fff; color: var(--suave); font-size: max(10px, calc(var(--u) * .9)); text-align: center; transition: opacity .45s var(--ease), visibility 0s .45s; }
.ap-tela-capa img { width: 46%; max-width: 240px; height: auto; }
.ap-tela.carregou .ap-tela-capa { opacity: 0; visibility: hidden; }

.ap-disp-leg { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.1); color: var(--ap-suave-escuro); font-size: var(--f-peq); }
.ap-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * .45); height: max(28px, calc(var(--u) * 2.3)); padding: 0 calc(var(--u) * .9); border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-size: max(12px, calc(var(--u) * 1.05)); font-weight: 600; white-space: nowrap; transition: background-color .18s; }
.ap-chip:hover { background: rgba(255, 255, 255, .16); }
.ap-chip .ic { width: max(14px, calc(var(--u) * 1.1)); height: max(14px, calc(var(--u) * 1.1)); }

/* ampliar: a tela escolhida ocupa o palco (posição calculada a partir do slide; a animação é FLIP no JS) */
.ap-k-aovivo.foco-note .ap-ao-txt, .ap-k-aovivo.foco-note .ap-cel,
.ap-k-aovivo.foco-cel .ap-ao-txt, .ap-k-aovivo.foco-cel .ap-note {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease-saida), visibility 0s .2s;
}
.ap-k-aovivo.foco-note .ap-note, .ap-k-aovivo.foco-cel .ap-cel { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--u) * 1.4); width: max-content; margin: 0 auto; }
.ap-k-aovivo.foco-note .ap-note { --nh: 41.5; }
.ap-k-aovivo.foco-cel .ap-cel { --ch: 41; }

/* =================================================================
   REFERÊNCIAS
   ================================================================= */
.ap-k-refs { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
.ap-refs-lead { margin-top: calc(var(--u) * 2.2); max-width: 22em; color: var(--ap-corpo-escuro); }
.ap-refs { width: 100%; }
.ap-refs-cab, .ap-ref { display: grid; grid-template-columns: calc(var(--u) * 2.8) minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--u) * 1.2); }
.ap-refs-cab { padding-bottom: calc(var(--u) * .9); border-bottom: 1px solid rgba(255, 255, 255, .14); color: #6F7891; font-size: var(--f-rot); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ap-refs-cab span:first-child { grid-column: 1 / 3; }
.ap-ref { padding: calc(var(--u) * .85) 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ap-ref > .ic, .ap-ref > .ic-wa { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); color: var(--ap-azul-rot); }
.ap-ref b { font: 600 max(14px, calc(var(--u) * 1.42))/1.25 var(--fonte); color: #fff; }
.ap-ref em { display: inline-block; margin-left: calc(var(--u) * .7); padding: calc(var(--u) * .12) calc(var(--u) * .55); border-radius: calc(var(--u) * .4); background: rgba(61, 109, 255, .18); color: #B7C7FF; font-size: max(10px, calc(var(--u) * .82)); font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: .12em; }
.ap-ref span { color: #9AA3BA; font-size: var(--f-corpo); text-align: right; }
.ap-ref.is-dk { margin: calc(var(--u) * 1.2) calc(var(--u) * -1.4) 0; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4); border: 0; border-radius: calc(var(--u) * 1); background: var(--azul); box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 2.6) calc(var(--u) * -1.6) rgba(0, 0, 0, .6); }
.ap-ref.is-dk > .ic-wa { color: #fff; }
.ap-ref.is-dk b { font-weight: 700; }
.ap-ref.is-dk span { color: #fff; font-size: var(--f-rot); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

/* =================================================================
   CATÁLOGO
   ================================================================= */
.ap-k-catalogo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ap-numero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 2.4); }
.ap-numero small { grid-column: 1; color: var(--suave); font-size: var(--f-rot); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ap-numero b { grid-column: 1; grid-row: 2; display: inline-block; font: 800 calc(var(--u) * 9)/.84 var(--fonte-tit); letter-spacing: -.03em; color: var(--azul); font-variant-numeric: tabular-nums; }
.ap-numero span { grid-column: 2; grid-row: 2; max-width: 8em; padding-bottom: calc(var(--u) * .6); font: 700 var(--f-h3)/1.12 var(--fonte-tit); color: var(--tinta); }
.ap-cat-lead { margin-top: calc(var(--u) * 1.8); max-width: 25em; }
.ap-cat-stats { margin-top: calc(var(--u) * 2.4); }
.ap-stats { display: flex; flex-wrap: wrap; row-gap: calc(var(--u) * 1); }
.ap-stats div { padding: 0 calc(var(--u) * 1.7); border-left: 1px solid #D9DCE4; }
.ap-stats div:first-child { padding-left: 0; border-left: 0; }
.ap-stats b { display: block; font: 800 calc(var(--u) * 2.5)/1 var(--fonte-tit); color: var(--tinta); font-variant-numeric: tabular-nums; }
.ap-stats span { display: block; margin-top: calc(var(--u) * .3); color: var(--suave); font-size: var(--f-peq); }
.ap-cat-stats .ap-legenda { margin-top: calc(var(--u) * 1.3); }
.ap-marcas { width: 100%; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: calc(var(--u) * 1.1); }
.ap-marca { aspect-ratio: 5 / 2; display: grid; place-items: center; padding: 0 10%; border-radius: calc(var(--u) * .9); background: #fff; box-shadow: 0 1px 0 var(--linha), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * -2) rgba(0, 2, 14, .28); }
.ap-marca img { max-width: 88%; max-height: 64%; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter .2s, opacity .2s; }
.ap-marca:hover img { filter: none; opacity: 1; }
.ap-marca span { color: var(--tinta); font: 800 max(11px, calc(var(--u) * 1.02))/1.1 var(--fonte); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.ap-marca.is-mais { background: transparent; box-shadow: inset 0 0 0 1.5px #D3D7E0; }
.ap-marca.is-mais span { color: var(--azul); font-size: max(11px, calc(var(--u) * 1)); font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-transform: none; }

/* =================================================================
   ANÚNCIOS · pedidos no painel com origem (px; ganha zoom)
   ================================================================= */
.ap-peds { position: relative; width: 470px; height: 440px; text-align: left; }
.ap-ped { position: absolute; padding: 18px 20px; border-radius: 16px; background: #fff; color: var(--texto); font-size: 13.5px; line-height: 1.45; box-shadow: 0 44px 70px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 2, 14, .05); }
.ap-ped-tras { top: 0; right: 0; width: 360px; background: #E6E9F1; }
.ap-ped-frente { bottom: 0; left: 0; width: 410px; }
.ap-ped-topo { display: flex; align-items: center; gap: 10px; }
.ap-ped-topo b { font: 700 18px/1.2 var(--fonte-tit); color: var(--tinta); }
.ap-ped-topo small { margin-left: auto; color: var(--suave); font-size: 12.5px; }
.ap-ped-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; background: var(--azul-claro); color: var(--azul); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.ap-ped-st.is-pago { background: #E1F4E8; color: var(--ok); }
.ap-ped-topo small.ap-ped-ex { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #C9CED9; color: var(--suave); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ap-ped-itens { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.ap-ped-itens li { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.ap-ped-itens span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-ped-itens b { flex: none; color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-ped-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linha); }
.ap-ped-total span { color: var(--suave); }
.ap-ped-total b { color: var(--tinta); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ap-ped-origem { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #F2F5FF; box-shadow: inset 0 0 0 1px #DAE3FF; }
.ap-ped-origem small { display: block; color: var(--azul); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.ap-ped-origem > b { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--tinta); font-size: 15px; }
.ap-ped-origem > b .ic { color: var(--azul); }
.ap-ped-origem dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin-top: 8px; font-size: 12.5px; }
.ap-ped-origem dt { color: var(--suave); }
.ap-ped-origem dd { color: var(--tinta); font-weight: 600; }
.ap-ped-tras .ap-ped-origem { background: #fff; box-shadow: none; }

/* =================================================================
   PRÓXIMOS PASSOS
   ================================================================= */
.ap-k-passos { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.ap-passos-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(var(--u) * 3.4); align-items: start; margin-top: calc(var(--u) * 2.6); }
.ap-bloco-tit { margin-bottom: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * .9); border-bottom: 1px solid #DADDE5; color: var(--suave); font-size: var(--f-rot); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ap-fase { position: relative; padding-left: calc(var(--u) * 2.2); }
.ap-fase::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * .5); width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 calc(var(--u) * .3) var(--azul-claro); }
.ap-fase::after { content: ""; position: absolute; left: calc(var(--u) * .45); top: calc(var(--u) * 1.9); bottom: calc(var(--u) * -1.6); width: 1px; margin-left: -.5px; background: #CCD3E3; }
.ap-fase.is-2::before { background: var(--ap-claro); box-shadow: inset 0 0 0 2px var(--azul); }
.ap-fase.is-2::after { display: none; }
.ap-fase + .ap-fase { margin-top: calc(var(--u) * 1.9); }
.ap-fase-cab { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * .8); }
.ap-fase-cab small { color: var(--suave); font-size: var(--f-peq); }
.ap-pill { display: inline-flex; align-items: center; height: max(20px, calc(var(--u) * 1.9)); padding: 0 calc(var(--u) * .85); border-radius: 999px; background: var(--azul); color: #fff; font-size: max(10px, calc(var(--u) * .86)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ap-pill--contorno { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--azul); }
.ap-fase h3 { margin-top: calc(var(--u) * .7); font: 700 var(--f-h3)/1.18 var(--fonte-tit); color: var(--tinta); }
.ap-fase ul { margin-top: calc(var(--u) * .5); }
.ap-fase li { position: relative; padding: calc(var(--u) * .12) 0 calc(var(--u) * .12) calc(var(--u) * 1.1); font-size: var(--f-corpo); line-height: 1.45; }
.ap-fase li::before { content: ""; position: absolute; left: 0; top: .72em; width: calc(var(--u) * .45); height: 1.5px; background: #A6ADBD; }
.ap-check li, .ap-decisoes li { display: grid; gap: calc(var(--u) * .9); padding: calc(var(--u) * .6) 0; }
.ap-check li { grid-template-columns: calc(var(--u) * 1.5) minmax(0, 1fr); }
.ap-check li:first-child, .ap-decisoes li:first-child { padding-top: 0; }
.ap-caixinha { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); margin-top: calc(var(--u) * .25); display: grid; place-items: center; border-radius: calc(var(--u) * .35); background: #fff; box-shadow: inset 0 0 0 1.5px #BFC5D2; }
.ap-caixinha svg { width: 80%; height: 80%; }
.ap-check li.is-ok .ap-caixinha { background: var(--ok); box-shadow: none; }
.ap-check li.is-ok b { color: var(--suave); }
.ap-check b, .ap-decisoes b { display: block; color: var(--tinta); font-size: var(--f-corpo); font-weight: 700; line-height: 1.35; }
.ap-check small, .ap-decisoes small { display: block; margin-top: calc(var(--u) * .15); color: var(--suave); font-size: var(--f-peq); line-height: 1.4; }
.ap-decisoes li { grid-template-columns: calc(var(--u) * 1.8) minmax(0, 1fr); border-bottom: 1px solid #E1E4EB; }
.ap-decisoes li:last-child { border-bottom: 0; }
.ap-decisoes i { color: var(--azul); font: 800 calc(var(--u) * 1.6)/1.05 var(--fonte-tit); font-style: normal; }

/* =================================================================
   ENCERRAMENTO
   ================================================================= */
.ap-k-fim { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 5.8); }
.ap-fim-txt { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; }
.ap-fim-meio { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ap-fim-tit { font: 800 calc(var(--u) * 5.6)/.98 var(--fonte-tit); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.ap-fim-meio .ap-lead { max-width: 25em; margin-top: calc(var(--u) * 1.9); color: #B4BBCD; }
.ap-fim-bts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 2.8); }
.ap-fim-bts .btn { height: max(48px, calc(var(--u) * 4)); padding: 0 calc(var(--u) * 2.1); gap: calc(var(--u) * .7); border-radius: max(10px, calc(var(--u) * .8)); font-size: max(15px, calc(var(--u) * 1.3)); }
.ap-fim-bts .btn .ic { width: max(18px, calc(var(--u) * 1.4)); height: max(18px, calc(var(--u) * 1.4)); }
.ap-fim-foto { position: relative; align-self: center; justify-self: end; width: 100%; max-width: calc(var(--u) * 32); max-height: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: calc(var(--u) * 1.1); background: var(--noite-2); box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5) calc(var(--u) * -2.4) rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.ap-fim-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ap-fim-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 2, 14, .2) 0%, rgba(0, 2, 14, 0) 28%, rgba(0, 2, 14, 0) 62%, rgba(0, 2, 14, .55) 100%); }
.ap-fim-foto figcaption {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 1.2);
  bottom: calc(var(--u) * 1.2);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .5) calc(var(--u) * .9);
  border-radius: 999px;
  background: rgba(0, 2, 14, .74);
  color: #fff;
  font-size: var(--f-peq);
  font-weight: 600;
}
.ap-fim-foto figcaption .ic { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); color: var(--ap-azul-rot); }

/* =================================================================
   CONTROLES (barra, setas laterais, aviso das telas, índice, dica, roteiro)
   ================================================================= */
.ap-barra {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 calc(var(--u) * 5.6);
  color: rgba(255, 255, 255, .5);
  font-size: max(11px, calc(var(--u) * 1.05));
  transition: color .3s;
}
.ap[data-tema="claro"] .ap-barra { color: var(--suave); }
.ap-barra-marca { letter-spacing: .02em; transition: opacity .3s; }
.ap-barra-marca b { color: inherit; font-weight: 800; }
.ap-barra-dir { flex: none; display: flex; align-items: center; gap: max(6px, calc(var(--u) * .5)); }
.ap-contador { margin-right: max(6px, calc(var(--u) * .7)); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ap-contador b { color: #fff; font-weight: 700; }
.ap[data-tema="claro"] .ap-contador b { color: var(--tinta); }
.ap-bt {
  width: max(34px, calc(var(--u) * 2.8));
  height: max(34px, calc(var(--u) * 2.8));
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: background-color .15s, color .15s, opacity .3s;
}
.ap-bt:hover { background: rgba(255, 255, 255, .16); }
.ap-bt:disabled { opacity: .28; cursor: default; background: rgba(255, 255, 255, .07); }
.ap-bt .ic { width: max(16px, calc(var(--u) * 1.3)); height: max(16px, calc(var(--u) * 1.3)); }
.ap[data-tema="claro"] .ap-bt { background: rgba(0, 2, 14, .055); color: var(--tinta); }
.ap[data-tema="claro"] .ap-bt:hover { background: rgba(0, 2, 14, .1); }
.ap-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: max(3px, calc(var(--u) * .22)); background: rgba(255, 255, 255, .08); }
.ap[data-tema="claro"] .ap-progresso { background: rgba(0, 2, 14, .06); }
.ap-progresso i { display: block; height: 100%; background: var(--azul); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .8s var(--ap-cine); }
.ap.ocioso .ap-bt, .ap.ocioso .ap-barra-marca, .ap.ocioso .ap-contador { opacity: 0; }

.ap-lado {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: max(40px, calc(var(--u) * 3.2));
  height: max(40px, calc(var(--u) * 3.2));
  translate: 0 -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease);
}
.ap[data-tema="claro"] .ap-lado { background: rgba(0, 2, 14, .07); color: var(--tinta); }
.ap-lado-ant { left: calc(var(--u) * 1.3); transform: translateX(-8px); }
.ap-lado-prox { right: calc(var(--u) * 1.3); transform: translateX(8px); }
.ap.mira-ant .ap-lado-ant, .ap.mira-prox .ap-lado-prox { opacity: 1; transform: none; }
.ap.mira-ant .ap-palco, .ap.mira-prox .ap-palco, .ap.mira-ant, .ap.mira-prox { cursor: pointer; }
.ap.ocioso .ap-lado { opacity: 0; }

/* foco dentro de uma tela ao vivo: a barra explica como voltar (as setas passam a ser da loja) */
.ap-barra-dica { display: none; min-width: 0; align-items: center; gap: calc(var(--u) * .6); overflow: hidden; color: #fff; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ap-barra-dica i { flex: none; width: max(7px, calc(var(--u) * .55)); height: max(7px, calc(var(--u) * .55)); border-radius: 50%; background: var(--verde-wa); }
.ap[data-tema="claro"] .ap-barra-dica { color: var(--tinta); }
.ap.na-tela .ap-barra-marca { display: none; }
.ap.na-tela .ap-barra-dica { display: flex; }

/* índice (G) */
.ap-indice { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: calc(var(--u) * 3); background: rgba(0, 2, 14, .92); animation: ap-surgir .28s var(--ease) both; }
.ap-indice-in { width: min(calc(var(--u) * 64), 100%); animation: ap-subir .38s var(--ap-cine) both; }
.ap-indice-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: calc(var(--u) * 1.6); }
.ap-indice-topo b { color: #fff; font: 800 calc(var(--u) * 2.4)/1 var(--fonte-tit); }
.ap-indice-topo span { color: var(--ap-suave-escuro); font-size: max(12px, calc(var(--u) * 1.05)); }
.ap-indice ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * .8); }
.ap-indice button {
  width: 100%;
  display: grid;
  grid-template-columns: calc(var(--u) * 3) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border: 0;
  border-radius: calc(var(--u) * .9);
  background: #0D1228;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: #fff;
  text-align: left;
  transition: background-color .15s, box-shadow .15s;
}
.ap-indice button:hover { background: #141A36; }
.ap-indice button.is-on { background: rgba(4, 70, 230, .22); box-shadow: inset 0 0 0 1.5px var(--azul); }
.ap-indice button span { color: var(--ap-azul-rot); font: 700 max(12px, calc(var(--u) * 1.1))/1 var(--fonte); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.ap-indice button b { font: 600 max(14px, calc(var(--u) * 1.36))/1.25 var(--fonte); }
@keyframes ap-surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-subir { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

.ap-dica {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 84px;
  margin: 0;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(10, 15, 36, .94);
  color: #E6E9F2;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ap-dica.on { opacity: 1; transform: translate(-50%, 0); }
.ap-dica-toque { display: none; }
@media (pointer: coarse) {
  .ap-dica-tecla { display: none; }
  .ap-dica-toque { display: inline; }
  .ap-lado { display: none; }
}

.ap-notas {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 76px;
  width: min(760px, calc(100% - 32px));
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  color: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  transform: translateX(-50%);
  box-shadow: 0 24px 60px -20px rgba(0, 2, 14, .55), 0 0 0 1px rgba(0, 2, 14, .06);
}
.ap-notas-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ap-notas-topo b { flex: 1; min-width: 0; color: var(--azul); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ap-notas-tempo { display: inline-flex; align-items: center; gap: 5px; color: var(--suave); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-notas-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fundo); color: var(--texto); }
.ap-notas-x:hover { background: var(--linha); }
.ap-notas small { display: block; margin-top: 8px; color: var(--suave); font-size: 12.5px; }

.ap :focus-visible { outline: 2.5px solid var(--azul); outline-offset: 2px; }
.ap .ap-t-escuro :focus-visible, .ap[data-tema="escuro"] .ap-barra :focus-visible, .ap .ap-indice :focus-visible { outline-color: #8FA8FF; }

/* notebook (1366×768, 1366×860): título um pouco menor, para sobrar ar entre o título e a lista */
@media (max-height: 900px) and (min-aspect-ratio: 1/1) and (min-width: 761px) {
  .ap { --f-tit: calc(var(--u) * 3.2); }
  .ap-tit { margin-top: calc(var(--u) * 1); }
}

/* tela baixa em paisagem (celular deitado): o slide rola se não couber */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) and (min-width: 761px) {
  .ap-slide { overflow-y: auto; overscroll-behavior: contain; }
}

/* menos movimento: o pneu da capa já nasce assentado e o índice aparece sem animar */
@media (prefers-reduced-motion: reduce) {
  .ap-pneu .ap-pa-gira, .ap-slide.is-on .ap-pneu .ap-pa-gira { transform: none; transition: none; }
  .ap-indice, .ap-indice-in { animation: none; }
}

/* =================================================================
   CELULAR EM PÉ / TELA ESTREITA — um slide por tela, rolagem vertical
   ================================================================= */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .ap {
    --u: 6.4px;
    --f-capa: clamp(34px, 10.2vw, 48px);
    --f-tit: clamp(28px, 8.4vw, 40px);
    --f-h3: 18px;
    --f-lead: 17px;
    --f-corpo: 15px;
    --f-peq: 13.5px;
    --f-rot: 11.5px;
    place-items: stretch;
  }
  .ap-palco { width: 100vw; height: 100vh; }
  @supports (height: 100dvh) { .ap-palco { width: 100vw; height: 100dvh; } }
  .ap-slide {
    display: block;
    padding: 30px max(20px, calc((100vw - 640px) / 2)) 104px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .ap-col + .ap-col { margin-top: 30px; }
  .ap-caixa-escala { flex: none; }
  .ap-tit { margin-top: 12px; }
  .ap-legenda .ic, .ap-desfazer .ic { width: 16px; height: 16px; }
  .ap-ponto { width: 8px; height: 8px; }

  /* capa */
  .ap-k-capa { display: flex; flex-direction: column; padding-bottom: 104px; }
  .ap-k-capa::before { width: 120vw; height: 120vw; right: -50vw; bottom: auto; top: 46%; }
  .ap-capa-txt { max-width: none; display: contents; }
  .ap-capa-txt > *, .ap-pneu { flex: none; }
  .ap-logo { order: 1; height: 36px; }
  .ap-capa-meio { order: 2; padding: 34px 0 10px; }
  .ap-pneu { order: 3; position: relative; right: auto; bottom: auto; align-self: flex-end; width: min(96vw, 460px); margin: 6px -34% 0 0; }
  .ap-capa-txt .ap-meta { order: 4; margin-top: 18px; }
  .ap-capa-sub { margin-top: 18px; }
  .ap-capa-sub::before { width: 22px; }

  /* listas */
  .ap-entregas { margin-top: 20px; }
  .ap-entregas li { grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0; }
  .ap-passos { margin-top: 18px; }
  .ap-passos li { grid-template-columns: 44px minmax(0, 1fr); padding: 9px 0; }
  .ap-passos li::before { left: 14px; top: 42px; bottom: -4px; }
  .ap-passo-n { width: 30px; height: 30px; font-size: 11px; }
  .ap-passos li.is-wa .ap-passo-n .ic-wa { width: 16px; height: 16px; }
  .ap-destaque { margin-top: 18px; padding: 14px 16px; border-radius: 12px; }
  .ap-pontos { margin-top: 20px; gap: 18px; }
  .ap-pontos li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .ap-ic { width: 40px; height: 40px; border-radius: 11px; }
  .ap-ic .ic, .ap-ic .ic-wa { width: 20px; height: 20px; }
  .ap-legenda-acao { flex-direction: column; align-items: flex-start; }

  /* prévias em formato de celular */
  .ap-site { width: 380px; }
  .ap-site-wa { display: none; }
  .ap-site-hdr { gap: 10px; padding: 0 14px; }
  .ap-site-hdr .logo img { height: 26px; }
  .ap-site-menu { padding: 0 14px; gap: 16px; }
  .ap-site-banner b { font-size: 19px; }
  .ap-site-banner img { width: 46%; }
  .ap-site-sec { padding: 14px 12px 16px; }
  .ap-site-cards { gap: 10px; }
  .ap-pn { width: 360px; }
  .ap-pn-lado, .ap-pn-c-preco, .ap-pn-c-loja, .ap-pn-preco, .ap-pn-vivo { display: none; }
  .ap-pn-topo { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .ap-pn-tit b { font-size: 17px; }
  .ap-pn-cab, .ap-pn-linha { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 0 14px; }
  .ap-pn-linha { row-gap: 2px; padding-top: 10px; padding-bottom: 10px; }
  .ap-pn-prod { grid-column: 1; grid-row: 1; }
  .ap-pn-qtd { grid-column: 2; grid-row: 1 / span 2; }
  .ap-pn-loja { grid-column: 1; grid-row: 2; padding-left: 58px; }
  .ap-peds { width: 350px; height: auto; display: flex; flex-direction: column; }
  .ap-ped { position: relative; inset: auto; width: auto; }
  .ap-ped-tras { margin: 0 0 -26px 26px; padding-bottom: 40px; }

  /* ao vivo: só o celular, largo o bastante para usar */
  .ap-k-aovivo { display: block; }
  .ap-k-aovivo::before { display: none; }
  .ap-ao-passos { margin-top: 18px; gap: 8px; }
  .ap-ao-passo { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 12px; }
  .ap-ao-n { width: 30px; height: 30px; font-size: 12px; }
  .ap-ao-t b { font-size: 16px; }
  .ap-ao-passo > .ic, .ap-ao-nota .ic { width: 16px; height: 16px; }
  .ap-ao-nota { margin-top: 14px; }
  .ap-ao { margin-top: 26px; }
  .ap-note { display: none; }
  .ap-cel { margin: 0 auto; }
  .ap-cel-corpo { width: min(320px, 84vw); padding: 7px; border-radius: 34px; }
  .ap-cel-tela { border-radius: 28px; }
  .ap-cel-status { height: 26px; padding: 0 22px 0 26px; font-size: 11px; }
  .ap-cel-ilha { top: 5px; width: 70px; height: 17px; margin-left: -35px; }
  .ap-cel-bat { width: 20px; height: 10px; border-radius: 3px; }
  .ap-chip { display: none; }
  .ap-disp-leg { margin-top: 10px; }

  /* referências */
  .ap-refs-lead { margin-top: 14px; }
  .ap-col-vis .ap-refs { margin-top: 4px; }
  .ap-refs-cab span:last-child { display: none; }
  .ap-ref { grid-template-columns: 28px minmax(0, 1fr); row-gap: 2px; padding: 12px 0; }
  .ap-ref > .ic, .ap-ref > .ic-wa { grid-row: 1 / span 2; align-self: start; margin-top: 1px; width: 20px; height: 20px; }
  .ap-ref b { font-size: 15.5px; }
  .ap-ref span { grid-column: 2; text-align: left; font-size: 13.5px; }
  .ap-ref.is-dk { margin: 14px -12px 0; padding: 14px 12px; border-radius: 12px; }
  .ap-ref.is-dk span { font-size: 11.5px; }

  /* catálogo */
  .ap-numero b { font-size: clamp(64px, 20vw, 96px); }
  .ap-numero span { font-size: 18px; }
  .ap-stats { row-gap: 14px; }
  .ap-stats div { padding: 0 16px; }
  .ap-stats b { font-size: 26px; }
  .ap-marcas { grid-template-columns: repeat(var(--cols-r, 3), minmax(0, 1fr)); gap: 10px; }
  .ap-marca { border-radius: 10px; }

  /* próximos passos */
  .ap-k-passos { display: block; }
  .ap-passos-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 24px; }
  .ap-fase { padding-left: 22px; }
  .ap-fase::before { width: 10px; height: 10px; top: 4px; box-shadow: 0 0 0 3px var(--azul-claro); }
  .ap-fase::after { left: 5px; top: 22px; bottom: -14px; }
  .ap-fase + .ap-fase { margin-top: 20px; }
  .ap-fase li { padding-left: 14px; }
  .ap-fase li::before { width: 6px; }
  .ap-check li, .ap-decisoes li { gap: 12px; padding: 10px 0; }
  .ap-check li { grid-template-columns: 20px minmax(0, 1fr); }
  .ap-caixinha { width: 18px; height: 18px; border-radius: 5px; margin-top: 2px; }
  .ap-decisoes li { grid-template-columns: 22px minmax(0, 1fr); }
  .ap-decisoes i { font-size: 20px; }
  .ap-pill { height: 24px; padding: 0 10px; font-size: 11px; }

  /* encerramento */
  .ap-k-fim { display: flex; flex-direction: column; padding-bottom: 104px; }
  .ap-fim-txt { display: contents; }
  .ap-fim-txt > *, .ap-fim-foto { flex: none; }
  .ap-logo--mini { order: 1; height: 30px; }
  .ap-fim-foto { order: 2; align-self: stretch; justify-self: auto; max-width: none; aspect-ratio: 4 / 3; margin-top: 24px; border-radius: 14px; }
  .ap-fim-meio { order: 3; padding: 26px 0 8px; }
  .ap-fim-txt .ap-meta { order: 4; margin-top: 18px; }
  .ap-fim-foto figcaption { left: 12px; bottom: 12px; padding: 5px 10px; }
  .ap-fim-foto figcaption .ic { width: 14px; height: 14px; }
  .ap-fim-tit { font-size: clamp(38px, 11vw, 54px); }
  .ap-fim-bts { flex-direction: column; align-items: stretch; margin-top: 24px; }
  .ap-fim-bts .btn { height: 52px; font-size: 16px; padding: 0 20px; border-radius: 10px; }

  /* barra fixa no pé */
  .ap-barra { height: 64px; padding: 0 16px; background: var(--noite); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); font-size: 13px; }
  .ap[data-tema="claro"] .ap-barra { background: var(--ap-claro); box-shadow: 0 -1px 0 var(--linha); }
  .ap-bt { width: 42px; height: 42px; }
  .ap-bt-tela { display: none; }
  .ap-progresso { top: -1px; bottom: auto; height: 3px; }
  .ap-lado { display: none; }
  .ap-indice { padding: 20px 16px 84px; align-items: start; overflow-y: auto; }
  .ap-indice ol { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ap-indice button { grid-template-columns: 36px minmax(0, 1fr); padding: 13px 14px; border-radius: 12px; }
  .ap-indice button span { font-size: 13px; }
  .ap-indice button b { font-size: 16px; }
  .ap-indice-topo b { font-size: 24px; }
  .ap-indice-topo span { font-size: 12.5px; }
  .ap-dica { bottom: 82px; font-size: 13.5px; }
  .ap-notas { bottom: 74px; font-size: 14.5px; }
}

/* modo PDF (#/apresentacao?pdf=1): esconde dica de teclado, setas laterais e botões; mantém a marca e o número da página */
.ap-pdf .ap-dica, .ap-pdf .ap-lado, .ap-pdf .ap-barra-dica, .ap-pdf .ap-bt, .ap-pdf .ap-progresso { display: none !important; }