/* ============================================================================
   A PAGINA /extras: os dois produtos adicionais do Cria ai!, venda e checkout juntos.
   Criado em 06/10/2026.

   POR QUE ARQUIVO PROPRIO E NAO O estilo.css:
   O estilo.css tem cache imutavel de 1 ano e e carregado por 11 paginas; mexer nele e
   mexer em tudo. E o teste da ciencia exige que ele NAO contenha a caixa de ciencia. Aqui,
   so a /extras carrega. Toda classe comeca com ex- para nao esbarrar nas 1.800 linhas dele.

   POR QUE PRIMEIRO O CELULAR:
   Quase todo mundo chega pelo navegador de dentro do TikTok e do Instagram, com o telefone
   na mao. O computador e o caso secundario, e mora nas media queries do fim.

   Pedido de 06/10/2026: pagina curta, preco em destaque, checkout na mesma pagina
   (regras em scratchpad/extras/DECISOES.md). O impacto vem de quatro coisas e nenhuma cor
   nova:
     1. escala: o preco e o maior texto da pagina;
     2. contraste: o laranja so aparece no que vende (botao, selo do 2o, borda do combo), um
        de cada vez por tela; os titulos de secao ficam em creme com sublinhado;
     3. movimento com funcao: letreiro, borda viva no combo, brilho que atravessa o botao,
        faiscas quando o combo fecha, contador do que a pessoa viu;
     4. prova: video real logo no primeiro quadro.
   Tudo o que mexe para em prefers-reduced-motion (fim do arquivo).

   Vem DEPOIS do estilo.css e do marca.css: usa os tokens do brandbook (azul noite,
   laranja, off-white, Sora e Manrope) e precisa ganhar das regras deles.
   ============================================================================ */

/* A FONTE DE RESERVA COM A MEDIDA AJUSTADA (12/10/2026). A Sora e a Manrope chegam com
   display=swap: ate elas baixarem (o FOUT do 4G), o texto sai na fonte do sistema, e a do
   Linux/Android antigo e bem mais larga que a Sora. Foi assim que o "na mesma compra" do
   adesivo vazou para fora da tela. Estas faces pegam uma fonte do aparelho com largura
   parecida (Arial, Helvetica, Roboto) e corrigem o tamanho com size-adjust, medido contra a
   Sora 800 e a Manrope 700 em texto da pagina: a largura nao pula quando a fonte certa chega.
   So entram DEPOIS da Sora e da Manrope na pilha (.ex-pagina, abaixo).
   A ALTURA DA LINHA TAMBEM (12/10/2026, revisao): sem ascent/descent/line-gap-override, a
   linha "normal" da reserva era a da Arial/Roboto (1,15) e a da Manrope e 1,37: o letreiro
   crescia de 34 para 40px quando a fonte chegava e empurrava o hero inteiro (CLS 0,21 no
   computador). Os numeros sao os da propria Sora (subida 97%, descida 29%, sem entrelinha) e da
   Manrope (106,6% e 30%), medidos no navegador, DIVIDIDOS pelo size-adjust de cada face: o
   Chrome aplica o size-adjust por cima do override (conferido: 105,02% x 101,5% = 106,6%).
   A MANROPE-FB RECALIBRADA (29/10/2026, pente fino L6): medida no proprio texto do topo, a
   Manrope 500 tem 101,5% da largura da Arial e a Manrope 700 tem 99% da Arial Bold. Com os 90% e
   93% de antes a reserva saia 10% mais estreita e o paragrafo ganhava uma linha quando a fonte
   chegava (CLS 0,25 na /extras e 0,21 na /studios a 390). display=swap continua. */
@font-face {
  font-family: 'Sora-fb'; font-weight: 600 900; size-adjust: 100%;
  ascent-override: 97%; descent-override: 29%; line-gap-override: 0%;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
}
@font-face {
  font-family: 'Sora-fb'; font-weight: 100 599; size-adjust: 92%;
  ascent-override: 105.43%; descent-override: 31.52%; line-gap-override: 0%;
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('HelveticaNeue'), local('Roboto'), local('Roboto-Regular'), local('Liberation Sans'), local('LiberationSans');
}
@font-face {
  font-family: 'Manrope-fb'; font-weight: 700 900; size-adjust: 99%;
  ascent-override: 107.68%; descent-override: 30.3%; line-gap-override: 0%;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
}
@font-face {
  font-family: 'Manrope-fb'; font-weight: 100 699; size-adjust: 101.5%;
  ascent-override: 105.02%; descent-override: 29.56%; line-gap-override: 0%;
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('HelveticaNeue'), local('Roboto'), local('Roboto-Regular'), local('Liberation Sans'), local('LiberationSans');
}

.ex-pagina {
  /* as duas fontes do brandbook, agora com a reserva medida logo atras (ver as @font-face
     acima). O resto da pilha e a do marca.css. */
  --fonte-titulo: 'Sora', 'Sora-fb', system-ui, -apple-system, sans-serif;
  --fonte-corpo: 'Manrope', 'Manrope-fb', system-ui, -apple-system, sans-serif;
  /* o gradiente de botao em TODAS as larguras: o #FA480D do computador da contraste 3,50
     com letra branca e reprova; este da 4,56 na ponta clara e 5,62 na escura */
  --ex-cta: linear-gradient(90deg, #D54123, #C62A08);
  --ex-vidro: rgba(255, 106, 43, .09);
  --ex-borda: rgba(255, 106, 43, .34);
  --ex-caixa: linear-gradient(160deg, #131843, #0A0C2D);
  --ex-raio: 20px;
  --ex-creme-90: rgba(243, 236, 222, .9);
  --ex-creme-82: rgba(243, 236, 222, .82);
  --ex-creme-60: rgba(243, 236, 222, .6);
  --ex-fio: rgba(243, 236, 222, .1);
  --ex-linha: rgba(32, 40, 104, .95);
  /* o bloco claro (so o #comprar), com as cores ja medidas no #oferta.claro do index */
  --ex-claro-fundo: #F3ECDE;
  --ex-claro-cartao: #FFFDF8;
  --ex-claro-texto: #14131A;
  --ex-claro-sec: #43414F;
  --ex-claro-destaque: #C62A08;
  --ex-claro-fio: rgba(20, 19, 26, .16);
  /* o "escolhido" do checkout e o azul-noite da marca (#131843, o --surface2), e nao um
     preto que nao existe na paleta: o claro continua sendo o Cria ai!. Creme sobre ele da
     ~14:1. O texto do corpo continua #14131A. */
  --ex-claro-escolhido: #131843;
  /* o easing da casa, o mesmo do index */
  --ex-mola: cubic-bezier(.16, 1, .3, 1);
}

/* O ATRIBUTO hidden PRECISA VENCER. Varias pecas aqui tem display:flex/grid, e display
   escrito em classe ganha do hidden do navegador. Sem esta linha nada sumiria. */
.ex-pagina [hidden] { display: none !important; }

/* o estilo.css corta a rolagem lateral com overflow-x: hidden, que pode transformar o body
   em area de rolagem e quebrar o position: sticky (o entrar.css registra isso). "clip" corta
   do mesmo jeito sem criar area de rolagem; navegador antigo fica com o hidden. */
body.ex-pagina { overflow-x: clip; }

/* so para leitor de tela (a regiao viva #exAnuncio) */
.ex-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ex-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* pular direto para o pagamento: invisivel ate receber o foco do teclado */
.ex-pular {
  position: absolute; left: 8px; top: 8px; z-index: 10000;
  transform: translateY(-160%);
  background: var(--cream); color: var(--bg); font-weight: 700; font-size: 14px;
  padding: 10px 14px; border-radius: 10px; text-decoration: none;
}
.ex-pular:focus { transform: none; }

/* ============================================================================
   TOPO COMPACTO, nao fixo. 44px no celular.
   ============================================================================ */
.ex-topo { padding: 0 16px; min-height: 44px; }
.ex-topo .nav-logo { width: 112px; height: 38px; flex-shrink: 0; }
/* o texto da logo existe para o Google e o leitor de tela (aria-label no link); com
   text-indent ele ficava 9.999px para fora da tela e aparecia como estouro no laudo */
.ex-pagina .nav-logo span { display: none; }
.ex-topo .nav-links { gap: 4px; }
/* "entrar" e o globo SEM CARA DE BOTAO: duas pilulas contornadas no topo de uma pagina de
   venda disputavam o olho com a oferta e convidavam a sair. A area de toque de 44px fica. */
.ex-topo .nav-entrar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 6px; font-size: 12px; letter-spacing: .12em;
  color: var(--ex-creme-60); border: 0; border-radius: 8px;
}
.ex-topo .nav-entrar:hover { color: var(--cream); }
.ex-topo .idioma-btn { padding: 9px 11px; min-height: 44px; min-width: 44px; border-color: transparent; background: transparent; }
.ex-topo .idioma-btn .ic-rotulo { display: none; }

/* ============================================================================
   O LETREIRO. A fonte do estilo.css e a Raleway, que nao e carregada: a fila caia na
   fonte de sistema. Aqui volta para a Manrope do brandbook.
   ============================================================================ */
/* O GESTO DA MARCA (o .marquee.orange do index): a fita de oferta com as palavras fortes em
   LARANJA. E texto, nao preenchimento: nao disputa com o botao, e "os 2 por R$ 47" e "o 2o
   sai por R$ 20" saltam no primeiro olhar (o impacto dos 50 ms, Lindgaard 2006). */
/* line-height em px (12/10/2026, revisao): com "normal", a altura da faixa era a da fonte que
   estivesse na tela (34px na reserva, 40px na Manrope) e o hero inteiro pulava 6px quando a
   Manrope chegava. 22px e a linha que a Manrope ja dava: o desenho com a fonte certa nao muda. */
.ex-letreiro.marquee.orange { padding: 8px 0; line-height: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--ex-borda); background: var(--surface2); }
.ex-letreiro .track {
  font-family: var(--fonte-corpo); font-weight: 700; font-size: 13.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
  animation-duration: 30s;
  /* duas voltas (~1 min) e para sozinho: o movimento e para a chegada (WCAG 2.2.2) */
  animation-iteration-count: 2;
}
.ex-letreiro.marquee.orange .track b { color: var(--orange); font-weight: 800; }
/* para no ponteiro, no toque e com o topo fora da tela (extras.js) */
.ex-letreiro:hover .track, .ex-letreiro.parado .track, .ex-letreiro.fora .track { animation-play-state: paused; }

/* ============================================================================
   BOTOES. Uma pilula solida por tela, no desenho da prancha 08.
   12/10/2026 (prancha 10: sem brilhos, neons ou efeitos exagerados): o halo baixou para
   .28, o mesmo do marca.css, e o brilho que atravessa o botao ficou SO no botao do topo, por
   duas passadas, e para. Antes ele corria sem fim em todo botao laranja e na barra.
   ============================================================================ */
.ex-bt {
  -webkit-appearance: none; appearance: none;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 16px 28px; border-radius: 100px; border: 0;
  /* o marca.css troca a fonte de <a> e <button> para Manrope com !important; o CTA e Sora */
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 15.5px;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ex-mola), box-shadow .2s, filter .2s, opacity .2s;
}
.ex-bt-forte {
  background: var(--ex-cta); color: #fff;
  box-shadow: 0 8px 24px rgba(213, 65, 35, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ex-bt-hero::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: exBrilho 5s ease-in-out 1.2s 2;
}
@keyframes exBrilho {
  0%, 70% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(560%) skewX(-20deg); }
}
.ex-bt-forte:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(213, 65, 35, .34); }
.ex-bt-forte:active { transform: scale(.985); }
.ex-bt:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.ex-bt[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.25); box-shadow: none; }
.ex-bt[disabled]::after { animation: none; display: none; }
/* o botao forte em creme: acao clara que NAO e compra (copiar o prompt do presente). O
   laranja fica so para o que vende. */
.ex-bt-claro {
  background: var(--cream); color: var(--bg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.ex-bt-claro:hover { transform: translateY(-2px); background: #fff; }
.ex-bt-claro:active { transform: scale(.985); }
.ex-bt-claro.copiado { background: var(--surface2); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ex-borda); }
/* O BOTAO DE DUAS LINHAS: a acao (os 2 por R$ 47) em cima, o que vem e a vantagem embaixo,
   em letra de corpo. E o desenho dos laranjas de secao: o combo e a acao principal. */
.ex-bt-2l { flex-direction: column; gap: 3px; padding-top: 12px; padding-bottom: 12px; }
.ex-bt-l1 { display: inline-flex; align-items: center; gap: 10px; }
.ex-bt-2l small {
  font-family: var(--fonte-corpo) !important; font-size: 12.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0; line-height: 1.25; opacity: .94;
}

/* o caminho secundario: texto neutro, nunca escondido nem minusculo (sem confirmshaming) */
.ex-link-um {
  display: block; text-align: center; padding: 12px 8px; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ex-creme-82);
  text-decoration: underline; text-decoration-color: rgba(243, 236, 222, .35); text-underline-offset: 4px;
}
.ex-link-um:hover { color: var(--cream); text-decoration-color: var(--orange); }

/* ============================================================================
   S1. A PRIMEIRA DOBRA
   Conta feita para 390 x 664 uteis (navegador do TikTok): topo 44 + letreiro 34 + dois
   quadros ~210 + selo do presente (morde a borda dos quadros, nao soma altura) + titulo em
   3 linhas + linha de apoio + preco + botao fecham perto de 650. Para celular baixo
   (375 x 553 no Instagram, Android de entrada) ha um aperto proprio no fim do bloco.
   ============================================================================ */
.ex-hero {
  position: relative; overflow: hidden;
  padding: 8px 0 30px;
}
/* SEM EMENDA NO FIM DO HERO: os brilhos dele moram numa camada que se apaga para baixo
   (mascara), e o fundo da pagina (que tem brilho fixo proprio no estilo.css) aparece
   continuo. Pintar uma faixa de --bg por cima criava outra emenda contra esse brilho. */
.ex-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 460px 380px at 92% 64%, rgba(255, 106, 43, .16), transparent 70%),
    radial-gradient(ellipse 620px 420px at 0% 0%, rgba(45, 79, 184, .18), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.ex-hero > .ex-wrap { position: relative; z-index: 1; }
.ex-hero-grade { display: grid; grid-template-columns: minmax(0, 1fr); }

/* --- os quadros de video ------------------------------------------------------- */
.ex-hero-prova { position: relative; min-width: 0; }
.ex-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  align-items: start;
}
.ex-trio .ex-tile { aspect-ratio: 9 / 15; }
/* DOIS QUADROS (o caso de hoje: os dois videos do agente): maiores, lado a lado. O espaco
   fica reservado mesmo antes do JavaScript montar os quadros, para nada pular. */
.ex-trio.ex-dupla-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ex-trio.ex-dupla-hero .ex-tile { aspect-ratio: 5 / 6; }
.ex-trio.ex-dupla-hero:empty { min-height: calc((100vw - 42px) / 2 * 1.2); }
.ex-trio.ex-um-hero { grid-template-columns: minmax(0, 1fr); max-width: 260px; margin: 0 auto; }
.ex-trio.ex-um-hero .ex-tile { aspect-ratio: 9 / 16; }
/* o nome do video sobe um pouco para o selo do presente nao cobrir */
.ex-trio.ex-dupla-hero .ex-tile-nome { padding-bottom: 22px; }
/* A RESERVA DOS 3 QUADROS (29/10/2026, pente fino L2): o #exTrio nasce sem classe de modo e vazio.
   O ::before ocupa a 1a coluna da grade de 3 e tem a altura exata de um quadro, entao o topo nao
   pula quando os efeitos entram (nem quando o plano B poe os 2 do agente, que trocam a classe). */
.ex-hero-prova .ex-trio:empty:not(.ex-dupla-hero):not(.ex-um-hero)::before { content: ""; aspect-ratio: 9 / 15; }

.ex-tile {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 10 / 17; border-radius: 14px;
  background: var(--surface2);
  border: 1px solid rgba(243, 236, 222, .12);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.ex-tile video, .ex-tile img.ex-tile-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* O BOTAO QUE TOCA E PAUSA cobre o quadro inteiro (o dedo acerta em qualquer lugar) e e um
   <button> de verdade: o Tab chega nele e o rotulo diz a acao (WCAG 2.1.1 e 2.2.2). Parado
   (movimento reduzido, economia de dados ou pausado no toque), um "play" no meio diz que
   aquilo e video. O som fica por cima dele. */
.ex-play {
  -webkit-appearance: none; appearance: none;
  position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ex-play:focus-visible { outline: 3px solid var(--cream); outline-offset: -3px; }
.ex-tile.ex-parado .ex-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(2, 3, 27, .62); border: 1.5px solid rgba(243, 236, 222, .55); box-sizing: border-box;
}
.ex-tile.ex-parado .ex-play::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px;
  border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--cream);
}
/* o rotulo honesto de cada video: feito com IA, no Google Flow */
.ex-chip {
  position: absolute; z-index: 2; left: 6px; top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 100px;
  background: rgba(2, 3, 27, .7); color: var(--cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700; line-height: 1.25;
  letter-spacing: .02em; white-space: nowrap; pointer-events: none;
}
.ex-chip::before { content: "\2726"; color: var(--orange); font-size: 10px; }
.ex-tile-nome {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 26px 8px 8px;
  background: linear-gradient(180deg, transparent, rgba(2, 3, 27, .88));
  font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: var(--cream); pointer-events: none;
}
.ex-tile-sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--ex-creme-82); white-space: nowrap; }
.ex-trio .ex-tile-nome { padding-left: 8px; padding-right: 8px; }
/* o trio de efeitos (3 quadros): a legenda sobe um pouco para o selo da isca nao cobrir */
.ex-trio:not(.ex-dupla-hero):not(.ex-um-hero) .ex-tile-nome { padding-bottom: 26px; }

/* O SELO DO PRESENTE: curiosidade e reciprocidade no primeiro quadro. Pilula de borda
   creme, sem laranja solido (o laranja da dobra e o botao). Morde a borda de baixo dos
   videos: nao soma altura na dobra. */
.ex-chip-isca {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: max-content; max-width: calc(100% - 16px); margin: -16px auto 0;
  min-height: 34px; padding: 6px 14px; border-radius: 100px;
  background: rgba(10, 12, 45, .94); border: 1.5px solid rgba(243, 236, 222, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  font-family: var(--fonte-corpo); font-size: 13px; font-weight: 700; line-height: 1.25;
  color: var(--cream); text-decoration: none; text-align: center; white-space: nowrap;
}
.ex-chip-isca:hover { border-color: var(--cream); }
.ex-chip-isca:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
/* a area de toque cresce para 44px sem mudar o desenho (o selo e o gancho da dobra) */
.ex-chip-isca::before { content: ""; position: absolute; inset: -5px -2px; }
/* o presente em traco, no lugar do emoji (12/10/2026): laranja, do tamanho da letra */
.ex-ic-presente { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- o cartao-reserva: onde o video da Brenda vai entrar ------------------------
   Moldura quieta de proposito: ela precisa ver o lugar e a medida de cada exemplo sem que
   o meio da pagina vire "obra" na revisao. No dominio de producao ele nao e montado. */
.ex-reserva {
  display: flex; align-items: center; justify-content: center;
  background: var(--ex-caixa);
  border: 1.5px dashed rgba(243, 236, 222, .22);
  box-shadow: none;
}
.ex-reserva-miolo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; text-align: center;
}
.ex-reserva-miolo svg { width: 22px; height: 22px; fill: none; stroke: var(--ex-creme-60); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; }
.ex-reserva-tag {
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: #FFE45C; background: transparent; border: 1px solid rgba(255, 228, 92, .55); border-radius: 4px; padding: 0 6px;
}
/* a etiqueta da reserva dentro de um quadro que ja funciona (a prova do agente) */
.ex-reserva-nota { margin: 10px 0 0 !important; font-size: 12px; line-height: 1.45; color: var(--ex-creme-60); }
.ex-reserva-id { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: var(--cream); letter-spacing: .02em; }
.ex-reserva-txt { font-family: var(--fonte-corpo); font-size: 12px; line-height: 1.35; color: var(--ex-creme-60); }

/* --- o texto da dobra ----------------------------------------------------------- */
.ex-hero-texto { position: relative; padding-top: 8px; }
/* no celular o selo do presente ocupa o lugar desta linha; no computador ela volta */
.ex-selo {
  display: none; margin: 0 0 6px;
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ex-creme-82);
}
.ex-h1 {
  margin: 0;
  font-family: var(--fonte-titulo) !important; font-weight: 800 !important;
  /* 33,5px em 390: o gancho da dobra bem acima dos titulos de secao (25px), e nao 2px */
  font-size: clamp(30px, 8.6vw, 58px); line-height: .98; letter-spacing: -.035em !important;
  color: var(--cream);
  text-wrap: balance;
}
.ex-h1 i { display: block; font-style: normal; color: var(--orange); }
/* a quebra fixa do titulo dos efeitos (variante) so no computador */
.ex-quebra { display: none; }
/* max-width em em, e nao em ch (12/10/2026, revisao): o "ch" e a largura do "0" da fonte que
   estiver na tela, e o da reserva e bem mais estreito que o da Manrope. Com 46ch a frase tinha
   368px e 3 linhas antes da fonte chegar e 506px e 2 linhas depois: o hero subia 17px no
   computador. 30em e a mesma medida nas duas fontes (510px a 17px, a largura que a frase ja
   tinha na Manrope; 420px a 14px, mais que a coluna do celular). */
.ex-sub {
  margin: 8px 0 0; max-width: 30em;
  font-size: 14px; line-height: 1.45; color: var(--ex-creme-82);
}
.ex-sub b { color: var(--cream); font-weight: 700; }
/* A FRASE DO TOPO NAO CRESCE QUANDO O NUMERO CHEGA (12/10/2026, revisao). O "571 " entra no
   [data-n-efeitos] so quando a vitrine responde (no 4G, com a funcao fria, depois da primeira
   pintura). Ate 404px ele leva a frase de 2 para 3 linhas, e o preco, o botao e a micro
   desciam 20px exatamente quando o dedo ia ao botao (CLS 0,12 em 390). A 3a linha fica
   reservada desde o comeco: medido com a Sora/Manrope e com a reserva, de 320 a 430px, a frase
   com o numero tem 3 linhas ate 404px e 2 a partir de 405px (um total de 4 digitos empurraria
   esse limite para 411px). Sem vitrine, sobra uma linha vazia, e nada pula. */
@media (max-width: 404px) {
  .ex-sub { min-height: calc(1.45em * 3); }
}
/* no plano B (fechado) a frase troca por outra, sem numero, de 2 linhas: a reserva sai, para
   nao sobrar um buraco entre ela e o preco (navegador sem :has fica com a reserva, sem dano) */
.ex-sub:not(:has([data-n-efeitos])) { min-height: 0; }

/* --- O PRECO, o heroi tipografico ------------------------------------------------ */
/* os dois rotulos ("separados" e "os 2 por") na mesma altura: alinhados pelo topo */
.ex-preco-hero {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  margin: 12px 0 0; padding-right: 132px; /* o adesivo mora a direita, sem cobrir o numero */
}
.ex-preco-hero p { margin: 0; }
.ex-ph-rot {
  display: block; margin-bottom: 2px;
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.ex-ph-ancora { padding-bottom: 0; }
.ex-ph-cada { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ex-creme-60); white-space: nowrap; }
.ex-ph-ancora s {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 22px; color: var(--muted);
  text-decoration-thickness: 2px; text-decoration-color: rgba(243, 236, 222, .7);
  white-space: nowrap;
}
/* sem o text-shadow laranja (12/10/2026): o "47" e heroi pelo tamanho e pelo creme, e o
   brilho em volta do numero era o neon que a prancha 10 proibe */
.ex-ph-num {
  display: flex; align-items: flex-start;
  font-family: var(--fonte-titulo) !important; font-weight: 800;
  /* 19vw (74px em 390): com 20vw o "7" encostava no canto girado do adesivo (12/10/2026).
     29/10/2026: o numero ganhou um digito (167): 15vw (58px em 390) cabe ao lado do adesivo. */
  font-size: clamp(50px, 15vw, 104px); line-height: .82; letter-spacing: -.05em;
  color: var(--cream);
}
.ex-ph-num small {
  font-size: .3em; font-weight: 800; letter-spacing: 0; margin: .12em .1em 0 0; color: var(--cream);
}
/* O ADESIVO "o 2o sai por R$ 20": o segundo dos tres laranjas da tela. Inclinado como
   cartaz de promocao de loja. Entra uma vez so, e SO AQUI no topo (12/10/2026). A
   condicao ("na mesma compra") vai escrita nele: a oferta vincula (CDC art. 30).
   Afastado 4px da borda direita: girado, o canto passava da calha de 16px. A sombra e escura
   e curta, sem o halo laranja. */
.ex-adesivo {
  position: absolute; right: 4px; top: -2px;
  width: 120px; padding: 8px 7px 9px;
  background: var(--orange); color: var(--bg);
  border-radius: 12px;
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 12.5px;
  line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; text-align: center;
  transform: rotate(-6deg);
  box-shadow: 0 8px 18px rgba(2, 3, 27, .4);
  animation: exAdesivo .6s var(--ex-mola) .45s both;
}
/* 29/10/2026: o adesivo e um link (leva a secao dos Studios): sem sublinhado e com o foco visivel */
a.ex-adesivo { display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.ex-adesivo:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.ex-adesivo b {
  display: block; font-family: var(--fonte-titulo) !important; font-weight: 800;
  font-size: 25px; letter-spacing: -.02em; margin-top: 3px; white-space: nowrap;
}
/* A CONDICAO PODE QUEBRAR (12/10/2026): com nowrap, na fonte de reserva (antes da Manrope
   chegar), "na mesma compra" vazava para fora do adesivo e da tela, e e justamente a
   condicao da oferta. Com a Manrope ela cabe numa linha; sem ela, desce para a segunda. */
.ex-adesivo small {
  display: block; margin-top: 3px; font-family: var(--fonte-corpo) !important; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0; text-transform: none; line-height: 1.1; white-space: normal; overflow-wrap: break-word;
}
@keyframes exAdesivo {
  0% { transform: rotate(-16deg) scale(.4); opacity: 0; }
  70% { transform: rotate(-4deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); opacity: 1; }
}
.ex-bt-hero { width: 100%; min-height: 58px; margin-top: 14px; font-size: 16px; }
.ex-micro {
  margin: 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ex-creme-60);
}

/* OS SEPARADORES "·" SEM ORFAO (12/10/2026). Cada pedaco e um <span> que nao quebra, e o
   ponto entra aqui, so ENTRE pedacos: nunca fica um "·" sozinho no fim de uma linha. Onde a
   linha deve virar, o HTML diz (.ex-seps-quebra sempre, .ex-seps-quebra-cel so no celular):
   no lugar do ponto entra uma quebra de verdade. */
.ex-seps > span { white-space: nowrap; }
.ex-seps > span + span::before { content: "\00B7"; margin: 0 .38em 0 .08em; opacity: .75; }
/* pedaco longo que pode quebrar por dentro (o ponto fica colado na 1a palavra dele) */
.ex-seps > .ex-seps-quebra, .ex-seps > .ex-seps-livre { white-space: normal; }
.ex-seps > span.ex-seps-quebra::before { content: "\A"; white-space: pre; margin: 0; }
@media (max-width: 639px) {
  .ex-seps > span.ex-seps-quebra-cel::before { content: "\A"; white-space: pre; margin: 0; }
}

/* ABAIXO DE 400 px a condicao do adesivo vai a 11px (12/10/2026): 12px nao cabia em 360 */
@media (max-width: 399px) {
  .ex-adesivo small { font-size: 11px; }
}
/* 375 px (iPhone SE e mini): o adesivo encostava no "7" do preco */
@media (max-width: 389px) {
  .ex-preco-hero { gap: 8px; padding-right: 122px; }
  .ex-ph-ancora s { font-size: 19px; }
  .ex-ph-num { font-size: 14vw; }
  .ex-adesivo { width: 112px; padding: 8px 6px 9px; font-size: 11.5px; }
  .ex-adesivo b { font-size: 21px; }
  .ex-chip-isca { font-size: 12.5px; padding: 6px 12px; }
  /* o canto girado do adesivo ficava a 3-4px do topo do botao */
  .ex-bt-hero { margin-top: 18px; }
}
/* CELULAR BAIXO (375 x 553 dentro do Instagram, Android de entrada): o botao TEM que
   caber na primeira tela. Sai a MICRO (o "Pix ou cartao, liberado na hora" ja esta no
   letreiro e na barra), e NAO a linha que diz o que sao "os 2": sem ela, quem chega frio
   le "os 2 por R$ 47" sem saber 2 o que. Os quadros ficam quadrados, o titulo aperta. */
@media (max-width: 480px) and (max-height: 640px) {
  .ex-hero { padding-top: 6px; }
  .ex-micro { display: none; }
  /* a 13px a frase com o numero so vai a 3 linhas ate 380px (medido): acima disso a reserva
     da 3a linha sairia do espaco mais disputado da pagina */
  .ex-sub { font-size: 13px; margin-top: 6px; line-height: 1.4; min-height: 0; }
  .ex-trio .ex-tile { aspect-ratio: 9 / 12; }
  .ex-hero-prova .ex-trio:empty:not(.ex-dupla-hero):not(.ex-um-hero)::before { aspect-ratio: 9 / 12; }
  .ex-trio.ex-dupla-hero .ex-tile { aspect-ratio: 1 / 1; }
  .ex-trio.ex-dupla-hero:empty { min-height: calc((100vw - 42px) / 2); }
  .ex-trio.ex-dupla-hero .ex-tile-sub { display: none; }
  .ex-h1 { font-size: 28px; }
  .ex-hero-texto { padding-top: 10px; }
  .ex-preco-hero { margin-top: 8px; }
  .ex-bt-hero { margin-top: 14px; }
}
@media (max-width: 380px) and (max-height: 640px) {
  .ex-sub { min-height: calc(1.4em * 3); }
}
/* MAIS BAIXO AINDA (375 x 553, o Instagram com as duas barras): com a linha que diz o que
   sao "os 2" de volta, o botao passava 11px da tela. Os quadros deitam um pouco (a garrafa
   esta no meio do quadro e continua inteira). */
@media (max-width: 480px) and (max-height: 580px) {
  .ex-trio.ex-dupla-hero .ex-tile { aspect-ratio: 5 / 4; }
  .ex-trio.ex-dupla-hero:empty { min-height: calc((100vw - 42px) / 2 * .8); }
}

/* ============================================================================
   SECOES ESCURAS: a gramatica do index (sobrelinha, titulo, lead, conteudo, botao),
   mais curta. As sobrelinhas ficam em creme: o laranja e para o que vende.
   ============================================================================ */
.ex-sec { position: relative; padding: 48px 0; }
.ex-sec-alt {
  background:
    radial-gradient(ellipse 760px 420px at 85% -10%, rgba(255, 106, 43, .06), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg) 120%);
  border-top: 1px solid var(--ex-fio);
}
.ex-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 12px;
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ex-creme-82); text-align: center;
}
.ex-eyebrow::before { content: "\2726"; color: var(--orange); font-size: 11px; letter-spacing: 0; }
.ex-h2 {
  margin: 0 auto 12px; max-width: 22ch; text-align: center;
  font-family: var(--fonte-titulo) !important; font-weight: 800 !important;
  /* 25px em 390: os titulos de secao falam abaixo do gancho da dobra (33,5px) */
  font-size: clamp(24px, 6.4vw, 44px); line-height: 1.1; letter-spacing: -.03em !important;
  color: var(--cream);
  text-wrap: balance;
}
/* a metade de apoio do titulo em creme com MARCA-TEXTO laranja translucido: acompanha a
   quebra de linha (o sublinhado virava 2 ou 3 reguas empilhadas) e o laranja solido fica
   so para o que vende (o botao, o selo do R$ 20, a borda do combo; Von Restorff). */
.ex-h2 i {
  font-style: normal; color: var(--cream); text-decoration: none;
  background: linear-gradient(transparent 62%, rgba(255, 106, 43, .28) 62%, rgba(255, 106, 43, .28) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .05em;
}
.ex-lead {
  margin: 0 auto 26px; max-width: 54ch; text-align: center;
  font-size: 16px; line-height: 1.6; color: var(--ex-creme-82);
}
.ex-eyebrow-esq { justify-content: flex-start; text-align: left; }
.ex-h2-esq, .ex-lead-esq { text-align: left; margin-left: 0; }
.ex-nota { margin: 10px auto 0; max-width: 52ch; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ex-creme-60); }
.ex-nota-esq { text-align: left; margin-left: 0; }

.ex-cta-bloco { display: flex; flex-direction: column; align-items: stretch; max-width: 460px; margin: 26px auto 0; }
.ex-cta-esq { margin-left: 0; }

/* a lista com a faisca de quatro pontas, o marcador oficial do brandbook */
.ex-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-lista li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--cream); }
.ex-lista li::before { content: "\2726"; position: absolute; left: 2px; top: 1px; color: var(--orange); font-size: 14px; }

/* a configuracao como caminho de cliques, do jeito que aparece no Flow */
.ex-config-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 14px 0 0; padding: 0; }
.ex-config-linha span {
  position: relative; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 8px;
  background: rgba(243, 236, 222, .06); border: 1px solid var(--ex-fio);
  font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--cream);
}
/* a seta entre os passos mora DENTRO do chip seguinte: fora dele, quando a linha quebra,
   ela ficava pendurada na margem esquerda */
.ex-config-linha span + span::before { content: "›"; margin-right: 7px; color: var(--orange); font-weight: 800; font-size: 15px; line-height: 1; }

.ex-cadeado { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================================
   S2. OS EFEITOS (sem numero fixo: a contagem vem da vitrine, ver extras.js)
   ============================================================================ */
.ex-mecanica-linha { margin-bottom: 8px; }
.ex-nota-mecanica { margin: 0 auto 8px; }
.ex-nota-pack { margin: 0 auto 22px; }

/* "INDISPONIVEL": o aviso no lugar do botao de compra do Efeitos (so no plano B, fechado) */
.ex-embreve { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--cream); text-align: center; text-wrap: pretty; }

/* a frase a mais do titulo dos efeitos, so quando a vitrine tem exemplos em video */
.ex-h2-mais { display: block; margin-top: 8px; font-size: .58em; font-weight: 700; letter-spacing: -.01em; color: var(--ex-creme-82); }

/* ============================================================================
   O COFRE DE VERDADE (12/10/2026): o numero-heroi e as gavetas trancadas.
   Saiu o "em breve" de 112px com brilho laranja por cima de pilulas cinza (lia "a pagina nao
   carregou" ou "ainda nao da pra comprar", logo acima do botao de compra). No lugar, um
   painel so: em cima o total da vitrine em Sora 800 creme, SEM text-shadow, com a legenda;
   embaixo uma gaveta por divisao, com o nome e a contagem reais e um cadeado de traco.
   2 colunas no celular, 4 no computador. Sem mascara e sem rolagem de lado: o carrossel
   antigo mostrava 1 das 16 divisoes no celular e 3 no computador.
   ============================================================================ */
.ex-cofre {
  max-width: 920px; margin: 6px auto 0; padding: 22px 12px 12px; border-radius: 24px;
  background: radial-gradient(ellipse 520px 240px at 50% 0%, rgba(45, 79, 184, .16), transparent 72%), var(--ex-caixa);
  border: 1px solid var(--ex-linha);
}
.ex-cofre-total {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 0 0 18px; text-align: center;
}
.ex-cofre-num {
  display: block;
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: clamp(64px, 19vw, 112px);
  line-height: .86; letter-spacing: -.045em; color: var(--cream);
}
/* a legenda em duas linhas: o que sao (creme, forte) e quando abrem (apagado) */
.ex-cofre-rot { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ex-cofre-rot-1 { font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--cream); }
.ex-cofre-rot-2 { font-size: 13.5px; font-weight: 600; color: var(--ex-creme-60); }

/* com o contador dos videos na tela, o numero-heroi sai (extras.js, montarContador): o
   contador logo acima ja diz o total e o que abre na compra. O cofre comeca nas gavetas, com o
   mesmo recuo dos lados. */
.ex-cofre.ex-cofre-sem-total { padding-top: 12px; margin-top: 16px; }
.ex-cofre-sem-total .ex-cofre-total { display: none; }

/* as gavetas */
.ex-divisoes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.ex-gaveta {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 11px 12px 12px; border-radius: 14px;
  background: rgba(243, 236, 222, .035); border: 1px solid var(--line);
}
.ex-gaveta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* O CADEADO SE LE COMO CADEADO (12/10/2026, revisao): com 13px, o desenho do viewBox ocupava
   uns 8px em creme-60 dentro de uma caixa de 26px e lia como botao vazio. Agora 18px (o
   corpo do cadeado fica com ~13px), traco 1.8 e creme-82, numa caixa de 28px.
   O NUMERO DA GAVETA EM CREME, e nao em laranja: 16 numeros laranja em Sora 800 deixavam a
   grade quente demais e disputavam com o botao de compra logo abaixo (o laranja e do que vende). */
.ex-gaveta-tranca {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--line); color: var(--ex-creme-82);
}
.ex-gaveta-tranca .ex-cadeado { width: 18px; height: 18px; stroke-width: 1.8; }
.ex-gaveta-n { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.ex-gaveta-nome { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--cream); overflow-wrap: break-word; hyphens: auto; }
/* A AMOSTRA (so se a vitrine mandar divisoes[i].amostra): ate 3 nomes, cada um com a tarja
   do comando apagada na frente, desenho puro (a barra "/" e um traco, nenhum texto por
   baixo). A tarja tem largura fixa: os nomes ficam numa coluna so e quebram dentro dela. */
.ex-gaveta-amostra {
  list-style: none; margin: 0; padding: 9px 0 0; display: grid; gap: 7px;
  border-top: 1px dashed rgba(243, 236, 222, .14);
}
/* O NOME DO EFEITO NAO QUEBRA NO MEIO DA PALAVRA (12/10/2026, revisao): a 390px saia
   "Acompanhame / nto lateral", e parecia defeito logo na peca que vende o Efeitos. hyphens:auto
   (o <html> e pt-BR) hifeniza onde o navegador tem o dicionario; o break-word fica so como rede
   para um nome que nem hifenizado caiba. Para as palavras longas do pack ("Acompanhamento",
   "Transformações") caberem inteiras na coluna de 2 gavetas, no celular a tarja encolhe,
   o cofre e a gaveta devolvem 4px e 2px de recuo de cada lado e o nome vai a 12px (ver o
   @media logo abaixo): medido com a Manrope, "Acompanhamento" cabe inteiro de 360px para cima.
   O headless do Chromium nao tem dicionario de hifenizacao: sem essa folga, o print do juiz
   mostrava a palavra cortada mesmo com o hyphens. */
.ex-gaveta-amostra li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.ex-gaveta-ef { min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ex-creme-82); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ex-gaveta-tarja {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; padding: 3px 5px;
  border-radius: 6px; background: #060823; border: 1px solid var(--line);
}
.ex-gaveta-tarja span { font-family: var(--fonte-titulo); font-weight: 700; font-size: 10.5px; line-height: 1; color: var(--muted); }
.ex-gaveta-tarja i { display: block; width: 18px; height: 5px; border-radius: 3px; background: rgba(243, 236, 222, .2); }
@media (max-width: 639px) {
  /* 8px do cofre ate a gaveta, o mesmo vao entre as gavetas: o ritmo fica igual nos 3 lados */
  .ex-cofre { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; }
  .ex-cofre.ex-cofre-sem-total { padding-top: 8px; }
  .ex-gaveta { padding-left: 10px; padding-right: 10px; }
  .ex-gaveta-amostra li { gap: 5px; }
  .ex-gaveta-tarja { gap: 1px; padding: 3px; }
  .ex-gaveta-tarja i { width: 7px; }
  .ex-gaveta-ef { font-size: 12px; }
}
/* 360px (o Android mais comum): o vao entre as gavetas devolve 2px e a palavra longa cabe */
@media (max-width: 374px) {
  .ex-divisoes { gap: 6px; }
  .ex-cofre { padding-left: 6px; padding-right: 6px; padding-bottom: 6px; }
  .ex-cofre.ex-cofre-sem-total { padding-top: 6px; }
}
.ex-cmd {
  display: inline-block; padding: 1px 8px; border-radius: 7px;
  background: var(--bg); border: 1px solid var(--ex-borda);
  font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: .95em; color: var(--cream);
}

/* TRES POR LINHA no celular: seis resultados numa tela so passam fartura */
.ex-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-efeito { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex-efeito .ex-tile { aspect-ratio: 9 / 16; }
.ex-efeito .ex-reserva-miolo { padding: 8px 4px; }
.ex-efeito .ex-reserva-id { font-size: 12px; }
/* a medida pedida ja esta no CONTRATO e no MIDIA: no cartao pequeno ela so poluia */
.ex-efeito .ex-reserva-txt { display: none; }
.ex-efeito-nome {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; line-height: 1.25;
  color: var(--cream);
}
.ex-efeito-nome.ex-vago { color: var(--muted); font-weight: 600; opacity: .45; }
/* A TARJA DO COMANDO e so desenho, por cima do video: cadeado, barra e tres tracos, sem
   texto nenhum por baixo. O comando de verdade nao existe neste arquivo. */
.ex-tarja {
  position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 6px; pointer-events: none;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 9px;
  background: rgba(2, 3, 27, .8); border: 1px solid var(--line); color: var(--ex-creme-82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ex-tarja .ex-cadeado { width: 13px; height: 13px; }
.ex-tarja i { display: block; height: 6px; border-radius: 4px; background: rgba(243, 236, 222, .22); }
.ex-tarja i:nth-of-type(1) { width: 26%; } .ex-tarja i:nth-of-type(2) { width: 18%; } .ex-tarja i:nth-of-type(3) { width: 12%; }
.ex-tarja .ex-barra-cmd { font-family: var(--fonte-titulo); font-weight: 700; font-size: 12px; color: var(--muted); }

.ex-contador { margin: 22px auto 0; max-width: 520px; text-align: center; }
.ex-contador-txt {
  margin: 0 0 10px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; color: var(--cream);
}
.ex-contador-txt b {
  display: inline-block; min-width: 1ch; font-family: var(--fonte-titulo) !important; font-weight: 800;
  font-size: 26px; color: var(--orange); vertical-align: -2px;
}
.ex-pontos {
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center; margin: 0 auto; max-width: 220px;
}
.ex-pontos span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(243, 236, 222, .14);
  transition: background .4s, transform .4s var(--ex-mola), box-shadow .4s;
}
.ex-contador-falta { margin: 12px 0 0; font-size: 14.5px; font-weight: 600; color: var(--cream); }
.ex-contador-falta b { font-family: var(--fonte-titulo); font-weight: 800; }
.ex-pontos span.aceso { background: var(--orange); transform: scale(1.25); box-shadow: 0 0 10px rgba(255, 106, 43, .55); }

/* ============================================================================
   S1b. O PRESENTE: os 2 prompts do video da loja
   ============================================================================ */
.ex-gratis-topo {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px; align-items: center;
  max-width: 640px; margin: 4px auto 18px;
}
.ex-gratis-midia .ex-tile { aspect-ratio: 9 / 16; }
.ex-gratis-midia .ex-som { width: 44px; height: 44px; right: 4px; bottom: 4px; }
.ex-gratis-txt p { margin: 0; }
.ex-gratis-cena { font-size: 15px; line-height: 1.5; color: var(--ex-creme-90); }
.ex-gratis-cena b { color: var(--cream); }
.ex-gratis-rot { margin-top: 8px !important; font-size: 12.5px; line-height: 1.45; color: var(--ex-creme-60); }
.ex-gratis-dica { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--ex-fio); font-size: 14px; line-height: 1.45; color: var(--cream); font-weight: 600; }

.ex-prompts { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.ex-prompt {
  position: relative; margin: 0; padding: 14px 14px 14px; border-radius: 18px;
  background: var(--ex-caixa); border: 1px solid var(--ex-linha);
}
.ex-prompt-cab {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream);
}
.ex-prompt-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--bg);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; letter-spacing: 0;
}
.ex-prompt-como { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ex-creme-82); }
.ex-prompt-como .ex-config-linha { display: flex; margin: 6px 0 6px; gap: 6px 4px; }
.ex-prompt-como .ex-config-linha span { padding: 4px 8px; font-size: 12px; }
/* RECOLHIDO: 4 linhas INTEIRAS e a ultima apagando (antes eram 3,1 linhas, e a de baixo
   aparecia cortada pela metade, com cara de defeito). Sem recheio embaixo, a conta fecha. */
.ex-prompt-txt {
  margin: 0; padding: 10px 12px 0; border-radius: 12px;
  background: #060823; border: 1px solid var(--line);
  /* 10px de recheio em cima + 2px das bordas (o box-sizing do site e border-box) */
  max-height: calc(4 * 1.5em + 12px); overflow: hidden;
  font-family: var(--fonte-corpo) !important; font-size: 13px; line-height: 1.5; color: var(--ex-creme-82);
  white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 98%);
}
/* ABERTO, a caixa rola por dentro: as ~300 linhas do prompt de video empurravam a pagina
   inteira para baixo (e o "copiar" sumia la no fim) */
.ex-prompt-txt.aberto {
  max-height: 60vh; overflow: auto; padding-bottom: 10px; overscroll-behavior: contain;
  -webkit-mask-image: none; mask-image: none;
}
.ex-prompt-txt:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.ex-prompt-ver {
  -webkit-appearance: none; appearance: none; display: block; margin: 0 auto 2px; padding: 8px 12px; min-height: 44px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--fonte-corpo) !important; font-size: 14px; font-weight: 700; color: var(--ex-creme-82);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(243, 236, 222, .35);
}
.ex-prompt-ver:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; border-radius: 6px; }
.ex-bt-copiar-prompt { width: 100%; min-height: 52px; font-size: 14.5px; }
.ex-prompt-fala { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ex-creme-90); }
.ex-prompt-fala code { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: var(--cream); background: rgba(243, 236, 222, .08); padding: 1px 5px; border-radius: 5px; }

/* depois de copiar: so a confirmacao, logo abaixo do prompt copiado */
.ex-gratis-ok {
  margin: 0; padding: 12px 16px; border-radius: 14px;
  background: var(--surface); border: 1.5px solid var(--ex-borda);
}
.ex-gratis-ok p { margin: 0; }
.ex-gratis-ok-tit { font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: 15.5px; line-height: 1.4; color: var(--cream); }

/* A PONTE, sempre a vista no fim do presente: o que ela acabou de ver e 1 produto em 1
   cena; o agente faz isso para o produto dela. */
.ex-gratis-ponte {
  margin-top: 22px; padding: 18px 16px 6px; border-radius: 20px;
  background: radial-gradient(ellipse 420px 240px at 100% 0%, rgba(255, 106, 43, .14), transparent 70%), var(--surface);
  border: 1.5px solid var(--ex-borda);
}
.ex-gratis-ponte-txt { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--ex-creme-90); text-align: center; text-wrap: pretty; }
.ex-gratis-ponte-txt b { color: var(--cream); }

/* ============================================================================
   S3. AMOSTRA GRATIS (escondida ate a Brenda escolher o efeito)
   ============================================================================ */
.ex-teste-caixa {
  display: grid; gap: 20px; padding: 24px 18px;
  border: 1px solid var(--ex-borda); border-radius: 26px;
  background: radial-gradient(ellipse 480px 320px at 100% 100%, rgba(255, 106, 43, .16), transparent 70%), var(--ex-caixa);
}
.ex-teste-texto .ex-eyebrow, .ex-teste-texto .ex-h2 { text-align: left; justify-content: flex-start; margin-left: 0; }
.ex-teste-cmd { display: flex; gap: 8px; align-items: stretch; margin-top: 16px; }
.ex-teste-cmd code {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: 12px 14px;
  border-radius: 14px; background: var(--bg); border: 1px solid var(--line);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; color: var(--cream);
  overflow-wrap: anywhere;
}
.ex-bt-copiar { min-height: 52px; padding: 12px 20px; font-size: 14px; }
.ex-teste-ok { min-height: 20px; margin: 8px 0 0; font-size: 13.5px; color: var(--cream); }
.ex-teste-micro { margin: 6px 0 0; font-size: 13.5px; color: var(--ex-creme-82); }
.ex-teste-midia .ex-tile { max-width: 280px; margin: 0 auto; aspect-ratio: 9 / 16; }

/* ============================================================================
   S4. O AGENTE
   No celular: cabecalho, as 5 funcoes, o fechamento. No computador as funcoes vao para a
   direita, ao lado do titulo, e o fechamento fica embaixo do titulo.
   ============================================================================ */
.ex-agente-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; grid-template-areas: "cab" "func" "det"; }
.ex-agente-cab { grid-area: cab; }
.ex-agente-cab .ex-lead { margin-bottom: 0; }
.ex-agente-func { grid-area: func; min-width: 0; }
.ex-agente-det { grid-area: det; min-width: 0; }
.ex-agente-det > .ex-guia:first-child { margin-top: 0; }

/* o botao de som: o video comeca mudo (regra dos navegadores e de quem esta no onibus) */
.ex-som {
  -webkit-appearance: none; appearance: none;
  position: absolute; z-index: 3; right: 6px; bottom: 6px;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 3, 27, .72); border: 1px solid rgba(243, 236, 222, .3); color: var(--cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ex-som svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex-som[aria-pressed="true"] { background: var(--cream); color: var(--bg); }
.ex-som:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.ex-gratis-midia .ex-tile-nome { padding-right: 46px; }

.ex-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.ex-passos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ex-creme-90); }
.ex-passos b {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--line);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 14px; color: var(--cream);
}
.ex-lista-tit {
  margin: 0 0 12px; font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ex-creme-60);
}
.ex-diferente {
  margin: 18px 0 0; padding: 14px 16px; border-radius: 16px;
  background: rgba(243, 236, 222, .04); border: 1px solid var(--ex-fio);
}
.ex-diferente p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--ex-creme-82); }
.ex-diferente .ex-diferente-tit { margin-bottom: 4px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 15.5px; color: var(--cream); }
/* O AVISO DO GPT com destaque normal: legivel, no corpo do texto, sem alarme e sem miudo.
   O titulo diz o que ele e para quem compra: a receita completa do agente vai junto. */
.ex-aviso-gpt {
  margin: 18px 0 0; padding: 14px 16px; border-radius: 16px;
  background: rgba(243, 236, 222, .05); border: 1px solid rgba(243, 236, 222, .16);
}
.ex-aviso-gpt p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--ex-creme-90); }
.ex-aviso-gpt .ex-aviso-tit {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--cream);
}
.ex-aviso-tit-2 { display: block; }
.ex-aviso-marca {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ex-vidro); border: 1px solid var(--ex-borda); color: var(--orange); font-size: 13px;
}

/* ============================================================================
   S5. O QUE ENTRA NA SUA CONTA
   ============================================================================ */
.ex-conta { max-width: 620px; margin: 0 auto 22px; }
.ex-conta .ex-tile { aspect-ratio: 16 / 9; }
/* a reserva da imagem da conta, baixa: a medida esta no CONTRATO, nao precisa de 200px de obra */
.ex-conta .ex-tile.ex-reserva { aspect-ratio: auto; min-height: 96px; }
.ex-conta img.ex-conta-img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--ex-fio); }
.ex-conta-leg { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--ex-creme-60); }
.ex-leva-grade { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.ex-leva-card .ex-lista { gap: 8px; }
.ex-leva-card .ex-lista li { font-size: 14.5px; line-height: 1.45; }
.ex-leva-card {
  position: relative; padding: 16px 16px 16px; border-radius: var(--ex-raio);
  background: var(--ex-caixa); border: 1px solid var(--ex-linha);
}
.ex-leva-nome {
  margin: 0 72px 10px 0; font-family: var(--fonte-titulo) !important; font-weight: 800;
  font-size: 16px; letter-spacing: .02em; line-height: 1.25; color: var(--cream);
}
/* "indisponível" (so no plano B, fechado) em tom neutro: laranja e para o que vende (12/10/2026) */
.ex-leva-preco.ex-leva-preco-embreve { background: rgba(243, 236, 222, .06); border-color: var(--ex-fio); color: var(--ex-creme-60); font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; }
.ex-leva-preco {
  position: absolute; top: 16px; right: 16px; margin: 0;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--ex-fio);
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 15px; color: var(--cream);
}
/* O FECHO: a recompensa MAIOR que a conta. O preco volta no tamanho de heroi, com o mesmo
   adesivo do topo, no pico de desejo da pagina. */
.ex-leva-fecho {
  display: flex; flex-direction: column; align-items: center;
  margin: 14px auto 6px; text-align: center; color: var(--ex-creme-82);
}
.ex-leva-fecho p { margin: 0; }
.ex-leva-fecho-rot { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-creme-60); }
.ex-leva-fecho-preco b {
  display: block; margin-top: 4px;
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: clamp(44px, 13vw, 64px);
  line-height: 1; letter-spacing: -.04em; color: var(--cream);
}
/* (12/10/2026) o .ex-adesivo-fixo do "o que voce leva" saiu: o adesivo mora so no topo */
/* a vantagem numa linha simples (12/10/2026): o adesivo mora so no topo */
.ex-leva-fecho-sep { margin-top: 10px !important; font-size: 15px; font-weight: 600; color: var(--ex-creme-82); }
/* A CONTA NA TELA: 27 + 27 = 54, riscado, e o 47 do lado. A vantagem do combo vista como
   aritmetica, que e o que ela e, e nao como promessa. */
.ex-soma {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  margin: 24px auto 0; font-family: var(--fonte-titulo); font-weight: 800; color: var(--cream);
}
.ex-soma-item { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--ex-linha); background: var(--ex-caixa); font-size: 18px; }
.ex-soma-op { font-size: 20px; color: var(--muted); }
.ex-soma s { font-size: 22px; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: var(--orange); }


/* ============================================================================
   S6. ANTES DE PAGAR
   ============================================================================ */
.ex-antes-grade { display: grid; gap: 10px; margin-top: 8px; }
.ex-antes-card {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: start;
  padding: 16px 16px; border-radius: var(--ex-raio);
  background: linear-gradient(165deg, var(--surface2), var(--bg) 150%);
  border: 1px solid var(--ex-fio);
}
.ex-antes-card > :not(svg):not(h3) { grid-column: 1 / -1; }
.ex-antes-card svg { width: 26px; height: 26px; fill: none; stroke: var(--orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ex-antes-card h3 { margin: 0; font-family: var(--fonte-titulo) !important; font-weight: 700 !important; font-size: 18px; line-height: 1.25; color: var(--cream); }
.ex-antes-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ex-creme-82); }
.ex-antes-card .ex-nao { margin-top: 10px; }
.ex-antes-card a { color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 106, 43, .6); }
.ex-nao { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-nao li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--ex-creme-82); }
.ex-nao li::before { content: "\00D7"; position: absolute; left: 2px; top: -2px; font-size: 20px; color: var(--muted); }
/* o cartao LEGAL e o unico com destaque: o "sem reembolso" nao pode ter o mesmo peso dos
   outros (Decreto 7.962, art. 4o, I: destaque para o que limita direito) */
.ex-antes-card.ex-antes-legal { border-color: rgba(255, 106, 43, .45); background: linear-gradient(165deg, rgba(255, 106, 43, .08), var(--surface2)); }
/* NO CELULAR, 4 cartoes de texto logo antes do checkout eram a maior pausa de leitura da
   pagina: mais juntos e um corpo menor, sem cortar nada do texto */
@media (max-width: 639px) {
  .ex-antes-grade { gap: 8px; }
  .ex-antes-card { padding: 14px; }
  .ex-antes-card h3 { font-size: 16px; }
  .ex-antes-card p, .ex-nao li { font-size: 14px; line-height: 1.5; }
  .ex-antes-card p, .ex-antes-card .ex-nao { margin-top: 6px; }
  .ex-nao { gap: 4px; }
}

.ex-faixa-preco {
  margin: 26px auto 0; max-width: 620px; padding: 18px; border-radius: 22px;
  background: rgba(243, 236, 222, .04); border: 1px solid var(--ex-fio); text-align: center;
}
.ex-fp-txt { margin: 0 0 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; font-size: 15px; color: var(--ex-creme-82); }
.ex-fp-txt s { color: var(--muted); font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; text-decoration-thickness: 2px; }
.ex-fp-txt b { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--cream); }
.ex-fp-txt .ex-fp-rot { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ex-fp-txt .ex-fp-cond { flex-basis: 100%; font-size: 14px; color: var(--ex-creme-60); }
.ex-faixa-preco .ex-bt { width: 100%; }

/* ============================================================================
   S7. O CHECKOUT: o unico bloco claro da pagina.
   Folha creme com cantos redondos sobre o azul noite: a pessoa percebe que mudou de
   lugar, do "ver" para o "levar", sem trocar de pagina.
   ============================================================================ */
.ex-comprar {
  position: relative; margin: 0 6px; padding: 40px 0 44px;
  background: var(--ex-claro-fundo); color: var(--ex-claro-texto);
  border-radius: 28px;
  box-shadow: 0 -20px 60px rgba(255, 106, 43, .08);
  scroll-margin-top: 8px;
}
.ex-comprar .ex-wrap { padding: 0 12px; }
.ex-comprar .ex-h2 { color: var(--ex-claro-texto); }
.ex-comprar .ex-h2 i { color: var(--ex-claro-texto); background: linear-gradient(transparent 62%, rgba(198, 42, 8, .16) 62%, rgba(198, 42, 8, .16) 92%, transparent 92%); }
.ex-comprar .ex-lead { color: var(--ex-claro-sec); margin-bottom: 20px; }

.ex-etapas {
  list-style: none; margin: 0 auto 18px; padding: 0; max-width: 460px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.ex-etapas li {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 6px; border-radius: 100px; border: 1.5px solid var(--ex-claro-fio);
  font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 700; color: var(--ex-claro-sec);
  white-space: nowrap; transition: background .3s, color .3s, border-color .3s;
}
.ex-et-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 19, 26, .08); font-family: var(--fonte-titulo); font-weight: 800; font-size: 12px;
}
.ex-etapas li.atual { border-color: var(--ex-claro-destaque); color: var(--ex-claro-texto); }
.ex-etapas li.atual .ex-et-num { background: var(--ex-claro-destaque); color: #fff; }
.ex-etapas li.feita { background: var(--ex-claro-escolhido); border-color: var(--ex-claro-escolhido); color: var(--cream); }
.ex-etapas li.feita .ex-et-num { background: rgba(243, 236, 222, .18); color: var(--cream); }
/* ABAIXO DE 400px (29/10/2026, pente fino L3): em 3 colunas iguais, "Seus dados" passava 5 a 6px de
   cada borda da pilula a 320 e encostava nela a 360. Cada etapa fica com a largura do proprio texto. */
@media (max-width: 399px) {
  .ex-etapas { display: flex; justify-content: space-between; gap: 4px; }
  .ex-etapas li { flex: 1 1 auto; gap: 4px; padding: 6px; font-size: 11.5px; }
  .ex-et-num { width: 17px; height: 17px; font-size: 10.5px; }
}

.ex-compra-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ex-col-escolha, .ex-col-form { min-width: 0; }
.ex-col-escolha { display: flex; flex-direction: column; gap: 10px; }
/* O FIM DA COLUNA (29/10/2026, pente fino L7): a FAI, a linha legal e o resumo moram juntos num
   .ex-col-fim. No computador e ESSE BLOCO que acompanha a rolagem (abaixo, 900px), e a FAI nao passa
   mais por cima da linha legal. O vao e o mesmo da coluna, e nenhum dos tres tem margem propria: o
   espaco nao dobra.
   30/10/2026 (conferencia): o sticky NAO fecha o vao creme do pe da coluna com nada marcado (a
   coluna e uns 320px mais curta que o formulario, e o bloco so desce quando o topo dele passa dos
   20px). Com 1 item marcado o resumo ocupa quase todo o vao. Fechar com nada marcado pede mostrar o
   resumo vazio no computador, o que contraria a regra do .ex-resumo.vazio (abaixo): decisao da dona. */
.ex-col-fim { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* 29/10/2026: saiu o cartao do combo dos 3 (.ex-combo), com a borda viva e o botao. O desconto de
   cada conjunto agora e da tabela do servidor e aparece sozinho no resumo. */

/* --- os dois produtos avulsos: o cartao inteiro e o alvo do dedo ------------------ */
.ex-item {
  position: relative; /* pintado por cima da sombra do combo, que lavava a borda dele */
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; min-height: 76px; border-radius: 18px; cursor: pointer;
  background: var(--ex-claro-cartao); border: 1.5px solid var(--ex-claro-fio);
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.ex-item input {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; margin: 0;
  position: relative; width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
  border: 2px solid rgba(20, 19, 26, .45); background: #fff;
  transition: background .2s, border-color .2s;
}
.ex-item input::after {
  content: ""; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px;
  border: solid var(--cream); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0);
  transition: transform .2s var(--ex-mola);
}
.ex-item input:checked { background: var(--ex-claro-escolhido); border-color: var(--ex-claro-escolhido); }
.ex-item input:checked::after { transform: rotate(45deg) scale(1); }
.ex-item input:focus-visible { outline: 3px solid var(--ex-claro-destaque); outline-offset: 2px; }
.ex-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-item-nome { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 14.5px; line-height: 1.25; letter-spacing: .01em; color: var(--ex-claro-texto); }
.ex-item-desc { font-size: 13.5px; line-height: 1.4; color: var(--ex-claro-sec); text-wrap: pretty; }
/* O GANHO DO CARTAO SAI DO VERMELHO (12/10/2026): vermelho no bloco claro lia como erro ou
   alerta. Fica em azul-escuro (o --ex-claro-sec) em 700, com a faisca laranja na frente. O
   vermelho e so do preco e do erro. */
.ex-item-unid { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ex-claro-sec); text-wrap: pretty; }
.ex-item-unid::before { content: "\2726"; margin-right: 5px; font-size: 11px; color: var(--orange); }
/* a condicao do link, em tom neutro: data em vermelho lia como alerta */
.ex-item-cond { font-size: 12.5px; font-weight: 600; }
.ex-item-preco { flex-shrink: 0; text-align: right; font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 21px; line-height: 1.15; color: var(--ex-claro-texto); }
/* o preco do cartao acompanha a escolha: R$ 27 riscado em cima, a vantagem embaixo */
.ex-item-embreve { cursor: default; background: var(--ex-claro-cartao); border-style: dashed; }
.ex-item-embreve input { display: none; }
.ex-item-embreve .ex-item-nome, .ex-item-embreve .ex-item-desc { opacity: .78; }
.ex-item-preco.ex-item-preco-embreve {
  align-self: center; padding: 5px 11px; border-radius: 100px; background: rgba(20, 19, 26, .07); color: var(--ex-claro-sec);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.ex-item-preco s { display: block; font-size: 13px; font-weight: 700; color: var(--ex-claro-sec); text-decoration-thickness: 1.5px; }
.ex-item-preco b { display: block; font-weight: 800; color: var(--ex-claro-destaque); white-space: nowrap; }
.ex-item.marcado { border-color: var(--ex-claro-escolhido); box-shadow: 0 0 0 1px var(--ex-claro-escolhido), 0 10px 26px rgba(19, 24, 67, .14); background: #fff; }
/* [PREVIA] o que o servidor ainda nao entrega, no proprio cartao (PRONTO, no extras.js) */
.ex-pendente-item { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; align-self: flex-start; }
.ex-item.travado { cursor: not-allowed; opacity: .7; }

/* --- a mensagem viva, na voz da FAI --------------------------------------------
   A FAI mora DENTRO da caixa, encostada na borda de baixo (o corte reto e de proposito),
   e o texto e a fala dela: antes eram duas caixas dizendo a mesma coisa. */
.ex-vivo {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: end; column-gap: 10px;
  padding: 12px 0 0 14px; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1.5px solid var(--ex-claro-fio);
  scroll-margin-top: 12px;
  transition: background .25s, border-color .25s;
}
.ex-vivo-corpo { padding-bottom: 12px; min-width: 0; align-self: center; }
.ex-vivo-txt { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ex-claro-texto); }
.ex-vivo-txt b { font-weight: 800; }
.ex-vivo-total { display: block; margin-top: 2px; font-weight: 800; }
.ex-vivo-bt {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px;
  min-height: 52px; padding: 10px 14px; border-radius: 100px; cursor: pointer; border: 0;
  background: var(--ex-cta); color: #fff; box-shadow: 0 10px 24px rgba(213, 65, 35, .28);
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase;
}
.ex-vivo-bt:hover { filter: brightness(1.06); }
.ex-vivo-nao {
  -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px;
  min-height: 48px; padding: 8px 14px; border-radius: 100px; cursor: pointer; background: transparent;
  border: 1.5px solid rgba(2, 3, 27, .35); color: var(--ex-claro-texto); font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: 14px;
}
.ex-vivo-nao[hidden] { display: none; }
.ex-vivo-nao:hover { border-color: rgba(2, 3, 27, .7); }
.ex-vivo-nao:focus-visible { outline: 3px solid #C62A08; outline-offset: 2px; }
.ex-vivo.um { border-color: rgba(198, 42, 8, .35); }
.ex-vivo.combo { background: var(--ex-claro-escolhido); border-color: var(--ex-claro-escolhido); }
.ex-vivo.combo .ex-vivo-txt { color: var(--cream); }
.ex-fai {
  width: 72px; height: auto; display: block; margin-bottom: -1px;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.ex-fai.troca { animation: exFaiPula .5s var(--ex-mola); }
@keyframes exFaiPula { 0% { transform: translateY(8px) scale(.94); } 100% { transform: none; } }

.ex-linha-legal { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ex-claro-sec); }
/* sem orfaos nem "R$" sozinho no fim da linha nos textos que mudam ao vivo */
.ex-vivo-txt, .ex-linha-legal, .ex-leva-fecho-sep, .ex-sub, .ex-lead, .ex-nota { text-wrap: pretty; }
.ex-ll-forte { color: var(--ex-claro-texto); font-weight: 700; }
.ex-linha-legal a, .ex-cb-termos a, .ex-comprar .ex-msg a { color: var(--ex-claro-destaque); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- o resumo do pedido, desenhado como cupom de loja ---------------------------- */
.ex-resumo {
  padding: 16px; border-radius: 16px; background: var(--ex-claro-cartao);
  border: 1.5px dashed rgba(20, 19, 26, .28);
  scroll-margin-top: 12px;
}
/* SEM NADA MARCADO NAO HA PEDIDO, e o resumo nem aparece: um "total" sem pedido parecia o
   combo ja somado (pre-selecao), e eram ~210px entre a escolha e o formulario. O cartao do
   combo, logo acima, ja mostra R$ 54 -> R$ 47. O resumo aparece no primeiro toque, antes de
   qualquer pagamento (Decreto 7.962, art. 4o, I). */
.ex-resumo.vazio { display: none; }
.ex-resumo p { margin: 0; }
.ex-resumo-tit { font-family: var(--fonte-corpo); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ex-claro-sec); margin-bottom: 8px !important; }
.ex-resumo-linhas { list-style: none; margin: 0; padding: 0 0 10px; border-bottom: 1.5px dashed rgba(20, 19, 26, .2); display: grid; gap: 6px; }
.ex-resumo-linhas li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--ex-claro-texto); }
.ex-resumo-linhas li span:last-child { white-space: nowrap; font-weight: 700; }
.ex-resumo-linhas li.desconto { color: var(--ex-claro-destaque); font-weight: 700; }
.ex-resumo-linhas li.ex-resumo-vazio { color: var(--ex-claro-sec); }
.ex-resumo-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
.ex-resumo-total span { font-size: 14px; font-weight: 800; color: var(--ex-claro-texto); }
.ex-resumo-total b { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--ex-claro-texto); display: inline-block; }
.ex-resumo-pe { margin-top: 2px !important; font-size: 12.5px; color: var(--ex-claro-sec); text-align: right; }
/* o total da um "tique" quando muda: o olho percebe que a conta acompanhou o toque */
.tique { animation: exTique .38s var(--ex-mola); }
@keyframes exTique { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* --- o formulario --------------------------------------------------------------- */
.ex-form {
  padding: 18px 16px 16px; border-radius: 22px; background: var(--ex-claro-cartao);
  box-shadow: 0 18px 48px rgba(20, 19, 26, .09); border: 1px solid rgba(20, 19, 26, .06);
}
.ex-form-tit { margin: 0 0 4px; font-family: var(--fonte-corpo); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ex-claro-sec); }
.ex-form-tit-pg { margin-top: 18px; }
.ex-sessao { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(20, 19, 26, .05); font-size: 14px; line-height: 1.5; color: var(--ex-claro-texto); overflow-wrap: anywhere; }
.ex-sessao-sair { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; padding: 0 8px; color: var(--ex-claro-destaque); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 14px; vertical-align: middle; }
/* a sugestao do email ("voce quis dizer...?"): so sugere, nunca troca sozinha */
.ex-ajuda.ex-sugestao { margin-top: 2px; font-size: 13.5px; color: var(--ex-claro-texto); overflow-wrap: anywhere; }
.ex-sugestao-bt {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin-left: 2px;
  border: 0; background: none; cursor: pointer; vertical-align: middle;
  font-family: var(--fonte-corpo) !important; font-size: 14px; font-weight: 800; color: var(--ex-claro-destaque);
  text-decoration: underline; text-underline-offset: 3px;
}
.ex-sugestao-bt:focus-visible { outline: 3px solid #14131A; outline-offset: 2px; border-radius: 6px; }
.ex-campo-bloco { min-width: 0; }
.ex-rotulo { display: block; margin: 12px 0 5px; font-family: var(--fonte-corpo); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ex-claro-texto); }
.ex-campo {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; margin: 0;
  /* a borda e o unico contorno do campo branco sobre o cartao creme: 3,3:1 (WCAG 1.4.11) */
  border-radius: 12px; border: 1.5px solid #8E8B98; background: #fff; color: var(--ex-claro-texto);
  /* 16px e nao menos: abaixo disso o Safari do iPhone da zoom sozinho no campo */
  font-family: var(--fonte-corpo) !important; font-size: 16px; line-height: 1.2;
  transition: border-color .18s, box-shadow .18s;
}
.ex-campo::placeholder { color: #6B6875; opacity: 1; }
.ex-campo:focus { outline: 0; border-color: var(--ex-claro-texto); box-shadow: 0 0 0 3px rgba(198, 42, 8, .16); }
.ex-campo[readonly] { background: rgba(20, 19, 26, .05); color: var(--ex-claro-sec); }
.ex-campo.invalido { border-color: var(--ex-claro-destaque); }
.ex-campo.valido { border-color: rgba(20, 19, 26, .5); }
.ex-ajuda { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ex-claro-sec); }
.ex-ajuda-colada { margin-top: 2px; }
.ex-erro-campo { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--ex-claro-destaque); }
.ex-erro-campo:empty { display: none; }
/* CPF e celular empilhados no celular: lado a lado, cada campo ficava com 125px e o numero
   digitado nao cabia (a pessoa nao confere o proprio telefone) */
.ex-linha2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 10px; }
.ex-linha3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.ex-linha2-cep { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 10px; }

.ex-indicacao-ok { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--ex-claro-sec); }
.ex-indicacao { margin-top: 12px; border-radius: 12px; border: 1px solid var(--ex-claro-fio); padding: 0 12px; }
.ex-indicacao summary {
  list-style: none; cursor: pointer; padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--ex-claro-texto);
}
.ex-indicacao summary::-webkit-details-marker { display: none; }
.ex-indicacao summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 600; color: var(--ex-claro-sec); }
.ex-indicacao[open] summary::after { content: "\2212"; }
.ex-indicacao summary span { font-weight: 600; color: var(--ex-claro-sec); }
.ex-indicacao .ex-rotulo { margin-top: 0; }
.ex-indicacao-res { margin: 6px 0 12px; min-height: 18px; font-size: 12.5px; line-height: 1.45; color: var(--ex-claro-sec); }

.ex-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ex-metodo {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; padding: 8px; border-radius: 14px;
  border: 1.5px solid rgba(20, 19, 26, .22); background: #fff; color: var(--ex-claro-texto);
  font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: 15.5px; line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s;
}
.ex-metodo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ex-metodo small { font-family: var(--fonte-corpo); font-size: 12px; font-weight: 600; color: var(--ex-claro-sec); }
.ex-metodo.escolhido { background: var(--ex-claro-escolhido); border-color: var(--ex-claro-escolhido); color: var(--cream); }
.ex-metodo.escolhido small { color: rgba(243, 236, 222, .78); }
.ex-metodo:focus-visible { outline: 3px solid var(--ex-claro-destaque); outline-offset: 2px; }
.ex-metodo[disabled] { opacity: .55; cursor: not-allowed; }

.ex-cartao { margin-top: 10px; padding: 4px 12px 12px; border-radius: 16px; background: #F4EEE2; border: 1px solid var(--ex-claro-fio); }
.ex-cartao-cab { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--ex-claro-texto); }

/* --- a caixa de ciencia (versao extras-v1) ---------------------------------------- */
.ex-ciencia {
  margin-top: 16px; padding: 14px 14px 12px; border-radius: 14px;
  border: 1px solid rgba(198, 42, 8, .40); background: rgba(198, 42, 8, .07);
}
.ex-cb-etiqueta { display: block; margin: 0 0 6px; font-family: var(--fonte-corpo); font-weight: 800; font-size: 12px; letter-spacing: .13em; color: var(--ex-claro-destaque); }
.ex-cb-porque { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #3A2A22; }
.ex-cc {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 12px 0 2px; min-height: 44px; border-top: 1px solid rgba(198, 42, 8, .22);
}
.ex-cc input { flex: 0 0 auto; width: 24px; height: 24px; margin: 1px 0 0; accent-color: #C62A08; cursor: pointer; }
.ex-cc input:focus-visible { outline: 3px solid #C62A08; outline-offset: 2px; }
.ex-cc-corpo { display: block; }
.ex-cc-texto { font-size: 15px; line-height: 1.55; color: var(--ex-claro-texto); }
/* o empurrao com a faisca da marca, e nao o emoji 👉 (12/10/2026). Em cinza-escuro 700, e nao
   no vermelho 800 (revisao do mesmo dia): ele aparece antes de qualquer erro, e pela marca o
   vermelho e so de preco e de erro; em vermelho ele lia como alerta. A faisca segue laranja. */
.ex-cc-empurrao { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ex-claro-sec); }
.ex-cc-faisca { margin-right: 2px; color: var(--orange); }
.ex-ciencia.marcada .ex-cc-empurrao { display: none; }
.ex-cb-termos { margin: 4px 0 0; font-size: 13px; }
.ex-cb-termos a { display: inline-block; padding: 13px 0; } /* alvo de 44px longe da caixa (com 12px media 42) */
.ex-cb-requisito { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ex-claro-sec); }

.ex-bt-pagar { width: 100%; margin-top: 14px; min-height: 60px; font-size: 16px; }
/* DESLIGADO, O TEXTO E A INSTRUCAO ("marque o que voce quer levar"): neutro e legivel
   (contraste ~7:1), sem o salmao apagado. Ligar = virar laranja, e isso e o sinal de pronto. */
.ex-comprar .ex-bt-pagar[disabled] {
  opacity: 1; filter: none; background: #E4DCCD; color: #43414F; box-shadow: none;
  font-size: 14px; padding-left: 14px; padding-right: 14px; letter-spacing: .01em;
}
.ex-falta { margin: 6px 0 0; text-align: center; }
.ex-falta:empty { display: none; }
.ex-falta-bt {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: 10px 8px;
  font-family: var(--fonte-corpo) !important; font-size: 14px; font-weight: 700; line-height: 1.4;
  color: var(--ex-claro-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20, 19, 26, .35);
}
.ex-msg {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(198, 42, 8, .07); border: 1px solid rgba(198, 42, 8, .35); border-left-width: 4px;
  font-size: 14px; line-height: 1.55; color: var(--ex-claro-texto);
}
.ex-msg p { margin: 0; }
.ex-msg p + p { margin-top: 6px; }
.ex-msg.neutra { background: rgba(20, 19, 26, .05); border-color: var(--ex-claro-fio); }
.ex-msg .ex-bt { width: 100%; margin-top: 10px; min-height: 52px; font-size: 14.5px; }
/* DEPOIS DE PAGAR (12/10/2026): tres linhas curtas, numeradas, entre o botao e o selo de
   seguranca. O endereco da area em negrito, sem quebrar no meio. */
.ex-depois { margin: 14px 0 0; padding: 12px 14px 12px; border-radius: 14px; background: rgba(20, 19, 26, .04); border: 1px solid var(--ex-claro-fio); }
.ex-depois-tit { margin: 0 0 8px; font-family: var(--fonte-corpo); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ex-claro-sec); }
.ex-depois-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ex-depois-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ex-claro-texto); }
.ex-depois-lista b {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ex-claro-escolhido); color: var(--cream);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 12px;
}
.ex-depois-url { font-weight: 800; overflow-wrap: anywhere; }
.ex-seguro { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ex-claro-sec); }
.ex-seguro .ex-cadeado { margin-top: 2px; }
.ex-seguro a { color: var(--ex-claro-texto); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* --- a tela do Pix ----------------------------------------------------------------- */
.ex-pix {
  padding: 20px 16px; border-radius: 22px; background: var(--ex-claro-cartao);
  box-shadow: 0 18px 48px rgba(20, 19, 26, .09); text-align: center;
}
.ex-pix p { margin: 0; }
.ex-pix-tit { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--ex-claro-texto); }
.ex-pix-tit:focus { outline: 0; }
.ex-pix-volta { margin-top: 8px !important; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ex-claro-texto); }
.ex-pix-sub { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: var(--ex-claro-sec); }
.ex-pix .ex-bt { width: 100%; margin-top: 16px; min-height: 60px; }
.ex-pix-codigo {
  display: block; width: 100%; height: 64px; margin-top: 10px; padding: 10px; resize: none;
  border-radius: 12px; border: 1px solid var(--ex-claro-fio); background: #fff; color: var(--ex-claro-sec);
  font-family: var(--fonte-corpo) !important; font-size: 12.5px !important; line-height: 1.4; word-break: break-all;
}
.ex-pix-qr { display: block; width: 196px; height: 196px; margin: 16px auto 0; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--ex-claro-fio); object-fit: contain; }
.ex-pix-qrleg { margin-top: 6px !important; font-size: 12.5px; color: var(--ex-claro-sec); }
.ex-pix-validade { margin-top: 14px !important; font-size: 14px; font-weight: 700; color: var(--ex-claro-texto); }
.ex-pix-status {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px !important;
  padding: 12px 14px; border-radius: 12px; background: rgba(20, 19, 26, .05);
  font-size: 14px; font-weight: 700; color: var(--ex-claro-texto);
}
.ex-pix-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--ex-claro-destaque); animation: exPulsa 1.4s ease-in-out infinite; flex-shrink: 0; }
@keyframes exPulsa { 50% { opacity: .25; transform: scale(.7); } }
.ex-pix-status.pago { background: var(--ex-claro-escolhido); color: var(--cream); }
.ex-pix-abre { color: var(--ex-claro-texto) !important; font-weight: 500; }
.ex-pix-naoachou { margin-top: 10px !important; }
.ex-pix-naoachou a { color: var(--ex-claro-destaque); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ex-pix-status.pago i { background: var(--orange); animation: none; }
.ex-pix-trocar {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer;
  margin-top: 10px; padding: 12px; min-height: 44px; font-size: 14px; font-weight: 700;
  color: var(--ex-claro-texto); text-decoration: underline; text-underline-offset: 3px;
}
/* o primeiro toque em "trocar" so avisa: o Pix antigo continua pagavel no banco */
.ex-pix-trocar.confirmar { color: var(--ex-claro-destaque); text-decoration: none; line-height: 1.45; border: 1.5px solid rgba(198, 42, 8, .45); border-radius: 12px; background: rgba(198, 42, 8, .06); }

/* O FOCO NO BLOCO CLARO: o anel creme da pagina sumia no cartao creme (1,06:1) */
.ex-comprar .ex-bt:focus-visible, .ex-itens-de-novo:focus-visible, .ex-comprar .ex-vivo-bt:focus-visible,
.ex-pix-trocar:focus-visible, .ex-sessao-sair:focus-visible, .ex-comprar a:focus-visible, .ex-falta-bt:focus-visible,
.ex-comprar summary:focus-visible { outline: 3px solid #14131A; outline-offset: 3px; }

/* A TELA DO PIX: o que nao vale mais sai da frente (a selecao esta travada), e no celular
   o Pix sobe para logo abaixo do titulo */
.ex-comprar.pagando .ex-lead, .ex-comprar.pagando .ex-faixa-lanc, .ex-comprar.pagando .ex-vivo { display: none; }
@media (max-width: 899px) {
  .ex-comprar.pagando .ex-col-form { order: -1; }
}

/* --- as faiscas do combo: uma vez so, quando os dois ficam marcados --------------- */
.ex-faiscas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 3; }
.ex-faisca {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  color: #FF6A2B; font-size: 14px; line-height: 9px; text-align: center;
  animation: exFaisca .9s var(--ex-mola) forwards;
}
@keyframes exFaisca {
  0% { transform: translate(0, 0) scale(.3); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(90deg); opacity: 0; }
}

/* ============================================================================
   S8. FAQ
   ============================================================================ */
.ex-faq-wrap { max-width: 760px; }
.ex-faq { margin-top: 10px; border-top: 1px solid var(--line); }
.ex-faq-item { border-bottom: 1px solid var(--line); }
.ex-faq-q {
  -webkit-appearance: none; appearance: none; position: relative; display: block; width: 100%;
  padding: 14px 44px 14px 0; min-height: 52px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--fonte-titulo) !important; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--cream);
}
.ex-faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; margin-top: -15px;
  font-size: 26px; line-height: 30px; font-weight: 400; color: var(--ex-creme-60);
  transition: transform .25s var(--ex-mola);
}
.ex-faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.ex-faq-q:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
/* fechada, a resposta fica invisivel de verdade: o Tab nao cai num link de altura zero e o
   leitor de tela nao le o que esta fechado */
.ex-faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s ease, visibility 0s linear .35s; }
.ex-faq-a p { margin: 0; padding: 0 4px 20px 0; font-size: 15.5px; line-height: 1.65; color: var(--ex-creme-82); }
.ex-faq-a a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.ex-faq-item.aberto .ex-faq-a { max-height: 900px; visibility: visible; transition: max-height .35s ease, visibility 0s; }
/* as 7 perguntas de menos peso, atras de um botao neutro (nunca laranja: nao e compra) */
.ex-faq-ver {
  -webkit-appearance: none; appearance: none; display: block; margin: 14px auto 0; min-height: 44px; padding: 10px 18px;
  border-radius: 100px; border: 1.5px solid rgba(243, 236, 222, .28); background: none; cursor: pointer;
  font-family: var(--fonte-corpo) !important; font-size: 14px; font-weight: 700; color: var(--ex-creme-90);
}
.ex-faq-ver:hover { border-color: var(--cream); color: var(--cream); }
.ex-faq-ver:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ============================================================================
   S9. RODAPE
   ============================================================================ */
.ex-rodape { padding: 40px 16px; }
/* os termos com o "·" so entre eles (.ex-seps, 12/10/2026). Cada link ja e um alvo de 44px
   (estilo.css), entao a linha e alta de proposito. */
.ex-rodape .ex-ident { max-width: 640px; margin: 10px auto 0; font-size: 13px; line-height: 1.7; color: var(--ex-creme-82); }
.ex-rodape .ex-ident a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
/* aparece em amarelo de proposito, para a revisao: o Decreto 7.962 exige o endereco e ele
   NAO pode ser inventado. Sai quando a Brenda informar. */
.ex-pendente { background: #FFE45C; color: #14131A; font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: normal; }
.ex-rodape .ex-isencao { max-width: 520px; margin: 10px auto 0; font-size: 12px; line-height: 1.6; color: var(--ex-creme-60); }
/* a referencia do versiculo tinha 11px no estilo.css: piso de 12px no celular (laudo de 22/09) */
.ex-rodape .vers-ref { font-size: 12px; letter-spacing: .15em; }

/* ============================================================================
   A BARRA DE COMPRA DO CELULAR. Mapa de altura: granulado 9999, barra 9992.
   ============================================================================ */
/* 90px (29/10/2026, pente fino L1): com o rotulo do preco quebrando linha, a barra chega a 88px */
.ex-pagina { --ex-altura-barra: 90px; }
.ex-barra { display: none; }

@media (max-width: 780px) {
  .ex-barra {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9992;
    background: rgba(10, 12, 45, .97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(130%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .26s ease, visibility 0s linear .26s;
  }
  .ex-barra.visivel {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .26s ease, visibility 0s;
  }
  .ex-barra-linha { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; }
  /* O PRECO DA BARRA EM DUAS LINHAS (12/10/2026): em cima "SEPARADOS R$ 54" (o rotulo A VISTA,
     colado no riscado), embaixo o rotulo do estado e o valor ("OS 2 POR R$ 47"). Com 1 item, a
     linha de cima some e o empurrao "+ R$ 20 leva os 2" ganha linha propria (.ex-barra-um). */
  .ex-barra-preco { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 3px; line-height: 1.1; min-width: 96px; }
  .ex-barra-ancora { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
  .ex-barra-sep { font-family: var(--fonte-corpo); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  /* a vantagem a vista o tempo todo: o R$ 54 riscado mora no unico elemento sempre na tela */
  .ex-barra-ancora s { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: var(--muted); text-decoration-thickness: 1.5px; text-decoration-color: rgba(243, 236, 222, .55); }
  .ex-barra-linha-val { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .ex-barra-rot { font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-creme-82); }
  .ex-barra-um .ex-barra-linha-val { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ex-barra-val { font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--cream); display: inline-block; }
  .ex-barra-bt {
    position: relative; overflow: hidden; isolation: isolate;
    flex: 1 1 auto; min-width: 0; min-height: 50px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 10px; border-radius: 100px; text-decoration: none; color: #fff;
    background: var(--ex-cta); box-shadow: 0 8px 22px rgba(213, 65, 35, .28);
    font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  }
  /* sem o brilho que corria sem fim (12/10/2026): ele fica so no botao do topo */
  .ex-barra-bt:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
  /* COM 1 ITEM, o rotulo vira um empurrao tocavel: a vantagem continua no unico elemento
     sempre na tela. A area de toque cresce para cima e para baixo sem mudar o desenho. */
  .ex-barra-up {
    -webkit-appearance: none; appearance: none; position: relative;
    border: 0; background: none; padding: 0; margin: 0 0 2px; min-height: 24px; cursor: pointer;
    font-family: var(--fonte-corpo) !important; font-size: 12.5px; font-weight: 800; line-height: 1.1;
    letter-spacing: 0; text-transform: none; white-space: nowrap; text-align: left;
    color: var(--orange); text-decoration: underline; text-underline-offset: 3px;
  }
  .ex-barra-up::before { content: ""; position: absolute; left: -6px; right: -6px; top: -10px; bottom: -10px; }
  .ex-barra-up:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; border-radius: 4px; }
  /* o fim da pagina ganha a altura da barra, constante, para nada ficar por baixo dela e
     sem a pagina pular debaixo do dedo */
  .ex-rodape { padding-bottom: calc(40px + var(--ex-altura-barra) + env(safe-area-inset-bottom)); }
}

/* ============================================================================
   REVELACAO AO ROLAR. So esconde quando o JavaScript avisou que esta vivo (html.ex-anima):
   se o script falhar, nada fica invisivel. O extras.js ainda tem uma rede de 2,5 s.
   ============================================================================ */
html.ex-anima .ex-revela { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ex-mola), transform .8s var(--ex-mola); }
html.ex-anima .ex-revela.ex-visivel { opacity: 1; transform: none; }

/* ============================================================================
   TELAS MAIORES
   ============================================================================ */
@media (max-width: 780px) {
  /* no celular a barra do polegar ja e esse botao: o checkout comeca logo abaixo da faixa,
     e o fim do FAQ fica com a barra (um laranja por tela, e nunca dois iguais) */
  .ex-faixa-preco, #duvidas .ex-cta-bloco { display: none; }
}
@media (min-width: 440px) {
  .ex-linha2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .ex-wrap { padding: 0 24px; }
  /* a reserva dos 2 quadros do topo com a calha de 24px (12/10/2026, revisao): com a conta
     do celular (calha de 16px), a 768 a reserva tinha 10px a mais e o texto subia quando os
     quadros entravam */
  .ex-trio.ex-dupla-hero:empty { min-height: calc((100vw - 58px) / 2 * 1.2); }
  .ex-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ex-gratis-topo { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }
  .ex-leva-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-leva-grade.ex-leva-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
  .ex-comprar { margin: 0 16px; }
  .ex-comprar .ex-wrap { padding: 0 20px; }
  .ex-form, .ex-pix { padding: 24px 22px 20px; }
}

/* O ADESIVO ENTRA NO FLUXO, ao lado do "7", como cartaz de loja: solto a 75px do preco ele
   nao tinha amarracao com o numero. Vale A PARTIR DE 640px (12/10/2026, revisao): no tablet e
   no celular deitado ele ficava absoluto na borda direita, ~300px longe do "47", como peca
   perdida. E com FOLGA de 8px, e nao a margem negativa de antes (-14px): o canto girado cobria
   a ponta do braco do "7" a 1024 e 1366, e a regra e o adesivo nao cortar nem encostar no 47.
   Medido (tinta do "7" ate o canto girado): 10px ou mais de 640 a 1920. */
@media (min-width: 640px) {
  .ex-preco-hero { padding-right: 0; max-width: none; gap: 16px; }
  .ex-preco-hero .ex-adesivo {
    position: relative; top: auto; right: auto; align-self: flex-start; flex-shrink: 0;
    width: 150px; font-size: 14px; padding: 11px 12px 12px; margin: -6px 0 0 8px;
  }
  .ex-adesivo b { font-size: 32px; }
  .ex-adesivo small { font-size: 12.5px; }
}

@media (min-width: 900px) {
  .ex-topo { padding: 8px 24px; min-height: 64px; }
  .ex-topo .nav-logo { width: 150px; height: 50px; }
  .ex-topo .idioma-btn .ic-rotulo { display: inline; }

  /* O HERO NO COMPUTADOR: texto e preco a esquerda, a prova a direita (dois quadros 9:16
     de ~212px, o video inteiro, sem corte). UMA COLUNA-GUIA SO: o hero usa os mesmos
     1080px do topo e das secoes (antes eram 1200 e as bordas nao batiam). O titulo fica
     menor que o "47": o preco continua sendo o maior texto da tela. */
  .ex-hero { padding: 36px 0 64px; }
  .ex-hero > .ex-wrap { max-width: 1080px; }
  .ex-hero-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 48px; align-items: center; }
  .ex-hero-prova { grid-column: 2; grid-row: 1; }
  .ex-hero-texto { grid-column: 1; grid-row: 1; padding-top: 0; }
  .ex-trio.ex-dupla-hero { gap: 16px; }
  .ex-trio.ex-dupla-hero .ex-tile { aspect-ratio: 9 / 16; }
  .ex-trio.ex-dupla-hero:empty { min-height: 377px; }
  .ex-trio.ex-dupla-hero .ex-tile-nome { padding-bottom: 28px; }
  .ex-chip-isca { font-size: 14px; padding: 8px 18px; min-height: 40px; margin-top: -20px; }
  .ex-selo { display: block; font-size: 13px; margin-bottom: 14px; letter-spacing: .16em; }
  .ex-h1 { font-size: clamp(46px, 4.4vw, 60px); }
  .ex-quebra { display: inline; }
  .ex-sub { font-size: 17px; margin-top: 18px; }
  .ex-preco-hero { margin-top: 24px; }
  .ex-ph-ancora s { font-size: 28px; }
  .ex-ph-cada { font-size: 13.5px; }
  .ex-bt-hero { width: auto; min-width: 420px; padding: 18px 40px; font-size: 17px; min-height: 64px; margin-top: 22px; }
  .ex-hero-texto .ex-link-um, .ex-hero-texto .ex-micro { text-align: left; }
  .ex-hero-texto .ex-link-um { display: inline-block; padding-left: 0; }
  .ex-hero-texto .ex-micro { margin-top: 2px; }
  .ex-chip { left: 10px; top: 10px; font-size: 12.5px; padding: 4px 9px; }
  .ex-tile-nome { font-size: 14px; padding: 34px 12px 12px; }
  .ex-reserva-id { font-size: 15px; }
  .ex-reserva-txt { font-size: 12.5px; }

  .ex-sec { padding: 88px 0; }
  .ex-lead { font-size: 17px; margin-bottom: 34px; }
  /* sem lead embaixo, o titulo ficava a 12-20px do conteudo */
  .ex-h2 { margin-bottom: 18px; }
  .ex-h2 + .ex-conta, .ex-h2 + .ex-antes-grade, .ex-h2 + .ex-faq, .ex-h2 + .ex-gratis-topo { margin-top: 34px; }
  .ex-cta-bloco { flex-direction: row; align-items: center; justify-content: center; gap: 18px; max-width: none; }
  .ex-cta-bloco .ex-bt { min-width: 380px; }
  .ex-cta-esq { justify-content: flex-start; }
  .ex-cta-bloco .ex-link-um { padding: 12px 0; white-space: nowrap; }
  .ex-cta-esq .ex-bt { min-width: 340px; }

  .ex-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .ex-efeito-nome { font-size: 14px; }
  /* o cofre no computador: o numero a esquerda e a legenda numa linha so ao lado dele, e as
     gavetas em 4 colunas */
  .ex-cofre { padding: 30px 24px 24px; border-radius: 28px; }
  .ex-cofre.ex-cofre-sem-total { padding-top: 24px; }
  .ex-cofre-total { flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin-bottom: 26px; text-align: left; }
  .ex-cofre-rot-1 { font-size: 22px; }
  .ex-cofre-rot-2 { font-size: 15.5px; }
  .ex-divisoes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ex-gaveta { padding: 14px 14px 15px; }
  .ex-gaveta-nome { font-size: 14px; }
  .ex-mecanica-linha { margin-bottom: 8px; }
  .ex-nota-pack { margin-bottom: 30px; }

  /* O PRESENTE: o video e a grade dos prompts com a MESMA borda esquerda (antes 273 contra
     167), e os dois cartoes com as mesmas linhas (subgrid): cabecalho com cabecalho, prompt
     com prompt, botao com botao, e o fundo reto */
  .ex-gratis-topo { max-width: none; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .ex-gratis-txt { max-width: 640px; }
  .ex-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; max-width: none; }
  .ex-prompt { display: flex; flex-direction: column; }
  @supports (grid-template-rows: subgrid) {
    .ex-prompts { grid-template-rows: repeat(6, auto); column-gap: 12px; row-gap: 0; }
    .ex-prompt { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .ex-prompt > .ex-prompt-cab, .ex-prompt > .ex-prompt-como { align-self: start; }
  }
  /* a confirmacao depois de copiar ocupa a linha inteira, embaixo dos dois prompts */
  .ex-prompts .ex-gratis-ok { grid-column: 1 / -1; grid-row: auto; order: 3; margin-top: 12px; }
  .ex-gratis-cena { font-size: 19px; }
  .ex-gratis-rot { font-size: 13.5px; }
  .ex-gratis-dica { font-size: 16px; }
  .ex-gratis-ponte { flex-wrap: wrap; max-width: 860px; padding: 22px 24px 10px; }
  .ex-gratis-ponte-txt { flex-basis: 100%; font-size: 17px; }

  /* titulo e fechamento a esquerda, as 5 funcoes a direita, as duas colunas no mesmo alto */
  .ex-agente-grade { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px 56px; grid-template-areas: "cab func" "det func"; align-items: start; }
  .ex-agente-func { align-self: stretch; grid-auto-rows: 1fr; }
  .ex-agente-func li { align-content: center; }
  /* na coluna da esquerda o "so o Agente" desce para baixo do botao quando nao cabe ao lado */
  .ex-agente-det .ex-cta-bloco { flex-wrap: wrap; row-gap: 2px; }

  .ex-teste-caixa { grid-template-columns: minmax(0, 1fr) 280px; padding: 40px; gap: 40px; align-items: center; }

  .ex-antes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin-left: auto; margin-right: auto; }
  .ex-faixa-preco { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 860px; padding: 20px 22px; text-align: left; }
  .ex-fp-txt { margin: 0; justify-content: flex-start; }
  .ex-fp-txt .ex-fp-cond { flex-basis: auto; }
  .ex-faixa-preco .ex-bt { width: auto; flex-shrink: 0; }

  /* o checkout em duas colunas: a escolha e o resumo de um lado, o formulario do outro. A
     coluna da escolha vai ate o fim do formulario e o RESUMO ACOMPANHA A ROLAGEM: o total ao
     vivo fica a vista enquanto a pessoa preenche (antes sobrava um buraco creme de ~350px) */
  .ex-comprar { margin: 0 24px; padding: 64px 0 72px; border-radius: 36px; }
  .ex-compra-grade { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .ex-col-escolha { align-self: stretch; }
  /* 29/10/2026 (pente fino L7): quem cola e o bloco inteiro (FAI, linha legal e resumo). O resumo
     sozinho nem aparece com nada marcado (ficava o buraco), e a FAI sozinha colada passava por cima
     da linha legal ao rolar */
  .ex-col-fim { position: -webkit-sticky; position: sticky; top: 20px; }
  .ex-vivo { grid-template-columns: minmax(0, 1fr) 88px; }
  .ex-fai { width: 88px; }
  .ex-form, .ex-pix { padding: 26px 26px 22px; }

  /* O PIX NO COMPUTADOR: o caminho real e escanear com o celular, entao o QR vem primeiro e
     grande; copiar o codigo fica logo abaixo. No celular continua copiar primeiro. */
  .ex-pix { display: flex; flex-direction: column; align-items: center; }
  .ex-pix > * { width: 100%; }
  .ex-pix .ex-pix-qr { order: 1; width: 240px; height: 240px; margin-top: 14px; }
  .ex-pix .ex-pix-qrleg { order: 2; }
  .ex-pix .ex-bt { order: 3; max-width: 360px; }
  .ex-pix .ex-pix-volta, .ex-pix .ex-pix-abre { order: 3; }
  .ex-pix .ex-pix-codigo { order: 4; }
  .ex-pix .ex-pix-validade, .ex-pix .ex-pix-status, .ex-pix .ex-pix-naoachou, .ex-pix .ex-pix-trocar, .ex-pix .ex-pix-regerar { order: 5; }
}

/* ============================================================================
   QUEM PEDIU MENOS MOVIMENTO NO APARELHO nao leva letreiro andando, borda girando,
   brilho, faisca nem pulo. A pagina continua inteira, so parada.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ex-letreiro .track { animation: none; }
  .ex-chip-isca { transition: none; }
  .ex-bt-hero::after { animation: none; display: none; }
  .ex-adesivo { animation: none; }
  .ex-faisca, .ex-faiscas { display: none; }
  .tique, .ex-fai.troca, .ex-pix-status i { animation: none; }
  .ex-barra, .ex-barra.visivel, .ex-faq-a, .ex-pontos span { transition: none; }
  html.ex-anima .ex-revela { opacity: 1; transform: none; transition: none; }
}

/* "(opcional)" no rotulo da senha: dito no proprio rotulo, sem esconder o campo */
.ex-opcional { font-weight: 600; color: var(--ex-claro-sec); }

/* telas de 320 px: o selo do presente quebra em duas linhas em vez de sair pela borda, e o
   preco aperta (12/10/2026: o "47" passava por baixo do adesivo) */
@media (max-width: 359px) {
  .ex-chip-isca { white-space: normal; }
  .ex-preco-hero { gap: 8px; padding-right: 104px; }
  .ex-ph-rot { letter-spacing: .06em; }
  .ex-ph-ancora s { font-size: 17px; }
  .ex-ph-num { font-size: 16.5vw; }
  .ex-adesivo { width: 98px; padding: 7px 5px 8px; font-size: 10.5px; }
  .ex-adesivo b { font-size: 18px; }
  .ex-adesivo small { font-size: 10.5px; }
  .ex-bt-hero { margin-top: 26px; }
}

/* ==========================================================================
   MOTION CONTROL e o convite ao Cria ai! (14/10/2026). A mensagem do Motion e o cupom sairam em 29/10/2026.
   ========================================================================== */
/* O CONVITE AO CRIA AI! (14/10/2026): o link do topo e a faixa antes do rodape, os dois discretos */
.ex-topo-criaai { margin-right: 14px; font-size: 13px; font-weight: 600; color: var(--ex-creme-82); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 106, 43, .5); }
.ex-topo-criaai:hover { color: var(--cream); text-decoration-color: var(--orange); }
/* o estilo.css esconde no celular todo link do topo que nao e o entrar: este fica */
.ex-topo .nav-links a.ex-topo-criaai { display: inline-block; white-space: nowrap; letter-spacing: 0; text-transform: none; padding: 13px 0; }
.ex-criaai { padding: 26px 0 30px; border-top: 1px solid var(--ex-fio); }
.ex-criaai[hidden] { display: none; }
.ex-criaai-dentro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ex-criaai-txt { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.55; color: var(--ex-creme-82); }
.ex-criaai-txt b { color: var(--cream); }
.ex-criaai-ir { display: inline-block; padding: 12px 0; line-height: 20px; font-size: 14.5px; font-weight: 700; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 106, 43, .6); }
.ex-criaai-ir:hover { text-decoration-color: var(--orange); }
@media (max-width: 380px) { .ex-topo-criaai { margin-right: 10px; font-size: 12.5px; } }

/* S0. MOTION CONTROL (14/10/2026): o par antes e depois, lado a lado tambem no celular */
.ex-motion { border-top: 1px solid var(--ex-fio); }
.ex-motion[hidden] { display: none; }
.ex-motion-par {
  /* start, e nao center: as legendas tem alturas diferentes e puxavam um video 9px para baixo */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px;
  max-width: 560px; margin: 0 auto 26px;
}
.ex-motion-q { margin: 0; min-width: 0; }
.ex-motion-v {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px;
  background: var(--surface2); border: 1px solid var(--ex-linha);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
}
.ex-motion-q-res .ex-motion-v { border-color: rgba(255, 106, 43, .55); }
.ex-motion-q figcaption { margin: 8px 0 0; text-align: center; font-size: 13px; line-height: 1.35; color: var(--ex-creme-82); }
.ex-motion-seta { align-self: center; margin-top: -26px; font-size: 22px; font-weight: 800; color: var(--orange); }
.ex-motion-passos { max-width: 460px; margin: 0 auto; }
.ex-motion-video { max-width: 560px; margin: 26px auto 0; }
.ex-motion-play, .ex-motion-video iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--ex-linha);
  border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
}
.ex-motion-play { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ex-motion-play img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .2s; }
.ex-motion-play:hover img { opacity: 1; }
.ex-motion-play:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.ex-motion-play-ic {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--orange); box-shadow: 0 10px 30px -8px rgba(255, 106, 43, .7);
}
.ex-motion-play-ic svg { width: 26px; height: 26px; margin-left: 3px; fill: #fff; }
.ex-motion-video-leg { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--ex-creme-82); }

/* ============================================================================
   O CHECKOUT GENERICO (29/10/2026, lancamento dos Studios). Os cartoes de #exItens sao montados
   pelo extras.js a partir da vitrine, em qualquer quantidade, e reaproveitam o .ex-item de cima.
   Aqui: a lista, o titulo de cada grupo, a imagem pequena (nos Studios, a logo), a faixa calma do
   lancamento, a linha do preco de depois no resumo e o que a /studios pode trocar de tema.
   A /studios copia a secao #comprar inteira; para mudar o tema dela, redefina os --ex-claro-* no
   escopo da pagina (ou em .ex-comprar) e as cores --st-* abaixo, sem tocar nestas regras.
   ============================================================================ */
.ex-itens { display: flex; flex-direction: column; gap: 10px; }
.ex-itens-carregando {
  margin: 0; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--ex-claro-fio);
  background: var(--ex-claro-cartao); font-size: 14px; line-height: 1.5; color: var(--ex-claro-sec); text-align: center;
}
.ex-itens-de-novo {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font-family: var(--fonte-corpo) !important; font-size: 14px; font-weight: 800; color: var(--ex-claro-destaque);
  text-decoration: underline; text-underline-offset: 3px;
}
/* o titulo pequeno de cada grupo ("Os Studios de vídeo"), so quando a lista tem mais de um */
.ex-itens-grupo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0;
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ex-claro-sec);
}
/* a etiqueta "lancamento": azul com letra branca (laranja so de preenchimento, nunca atras de
   letra pequena: azul sobre laranja da 4,2:1 e reprova em 11px) */
.ex-itens-grupo-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px;
  background: var(--st-azul, #1E3A8A); color: #fff; font-size: 11px; letter-spacing: .1em;
}
.ex-itens-grupo-tag::before { content: "\2726"; color: var(--st-laranja, #F28C28); font-size: 10px; letter-spacing: 0; }
/* a imagem pequena do cartao: quadrada, recortada, e nunca o alvo do dedo (o cartao inteiro e) */
.ex-item-mini {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; display: block;
  background: var(--st-bege, #EFE3CC); border: 1px solid var(--ex-claro-fio); pointer-events: none;
}
.ex-item.ex-item-com-mini { gap: 10px; padding-left: 12px; }
.ex-item-embreve .ex-item-mini { opacity: .6; filter: grayscale(.4); }
.ex-item.travado .ex-item-mini { opacity: .8; }
/* somar o item custa MAIS que ele sozinho (a conta da tabela): o "+ R$ X" vai em tom neutro, sem o
   vermelho de vantagem e sem riscado (nao ha desconto para mostrar) */
.ex-item-preco b.ex-item-soma { color: var(--ex-claro-texto); font-size: 18px; }
/* no celular a imagem encolhe um pouco para a frase do cartao ter mais largura */
@media (max-width: 480px) {
  .ex-item-mini { width: 42px; height: 42px; border-radius: 11px; }
  .ex-item .ex-item-preco { font-size: 19px; }
}
@media (max-width: 374px) {
  .ex-item-mini { width: 40px; height: 40px; border-radius: 10px; }
  .ex-item.ex-item-com-mini { gap: 8px; padding-left: 10px; padding-right: 10px; }
}
/* a faixa calma do lancamento (sem contagem regressiva): azul, letra branca, a faisca laranja */
.ex-faixa-lanc {
  margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--st-azul, #1E3A8A); color: #fff;
  font-size: 13.5px; font-weight: 700; line-height: 1.4; text-align: center; text-wrap: balance;
}
.ex-faixa-lanc::before { content: "\2726"; margin-right: 6px; color: var(--st-laranja, #F28C28); }
/* 30/10/2026: na /extras a faixa mora dentro do grupo dos Studios (o extras.js monta a do grupo e
   tira a fixa do #comprar, que e copia fiel da /studios). Como o extras.js e defer, a fixa podia
   aparecer por um instante em cima do grupo Pack e Agente: fora da /studios ela nasce escondida. */
body:not(.st-pagina) #comprar .ex-col-escolha > .ex-faixa-lanc { display: none; }
/* no resumo: ate quando vale o preco de agora e quanto fica depois (so quando muda) */
.ex-resumo-lanc {
  margin-top: 8px !important; padding: 8px 10px; border-radius: 10px;
  background: var(--st-creme, #FBF1E1); border: 1px solid rgba(30, 58, 138, .25);
  font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--st-azul, #1E3A8A);
}
/* as faiscas do primeiro desconto nascem dentro da mensagem viva */
.ex-vivo { position: relative; }

/* ============================================================================
   S5b. OS STUDIOS (29/10/2026): a unica secao da /extras com as cores dos Studios (creme de
   fundo, azul-marinho no texto, laranja SO de preenchimento e destaque, bege nas caixas). E o
   produto novo, com cara propria, entre "o que voce leva" e "antes de pagar".
   Contraste: azul #1E3A8A sobre creme #FBF1E1 da cerca de 9,3:1; branco sobre o azul, mais de 10:1.
   O botao principal e azul com letra branca (o laranja dos botoes da pagina continua sendo dos
   3 extras, um laranja por tela).
   ============================================================================ */
.ex-pagina {
  --st-creme: #FBF1E1;
  --st-azul: #1E3A8A;
  --st-laranja: #F28C28;
  --st-bege: #EFE3CC;
}
.ex-studios {
  background: var(--st-creme); color: var(--st-azul);
  border-top: 4px solid var(--st-laranja);
}
.ex-studios .ex-eyebrow { color: var(--st-azul); }
.ex-studios .ex-eyebrow::before { color: var(--st-laranja); }
.ex-studios .ex-h2 { color: var(--st-azul); }
.ex-studios .ex-h2 i {
  color: var(--st-azul);
  background: linear-gradient(transparent 62%, rgba(242, 140, 40, .4) 62%, rgba(242, 140, 40, .4) 92%, transparent 92%);
}
.ex-studios-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  max-width: 640px; margin: 20px auto 0;
}
.ex-studio-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 10px 10px 14px; border-radius: 18px; background: var(--st-bege);
}
.ex-studio-logo { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.ex-studio-txt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--st-azul); text-wrap: pretty; }
.ex-studio-txt b {
  display: block; margin-bottom: 3px; font-family: var(--fonte-titulo) !important; font-weight: 800;
  font-size: 15px; letter-spacing: .02em; color: var(--st-azul);
}
.ex-studios-nota {
  margin: 14px auto 0; max-width: 56ch; text-align: center;
  font-size: 13px; line-height: 1.55; color: rgba(30, 58, 138, .86); text-wrap: pretty;
}
.ex-studios-preco {
  max-width: 460px; margin: 22px auto 0; padding: 16px 14px; border-radius: 18px; text-align: center;
  background: #fff; border: 2px solid var(--st-laranja); box-shadow: 0 14px 30px -18px rgba(30, 58, 138, .45);
}
.ex-studios-preco p { margin: 0; }
.ex-studios-preco-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; }
.ex-studios-preco-rot { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--st-azul); }
.ex-studios-preco-linha b {
  font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.03em; color: var(--st-azul); white-space: nowrap;
}
.ex-studios-cheio { font-size: 13px; font-weight: 700; color: rgba(30, 58, 138, .8); white-space: nowrap; }
.ex-studios-cheio s { text-decoration-thickness: 2px; text-decoration-color: var(--st-laranja); }
.ex-studios-depois { margin-top: 10px !important; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--st-azul); text-wrap: balance; }
.ex-studios-cada { margin-top: 4px !important; font-size: 13px; color: rgba(30, 58, 138, .8); }
.ex-studios-cta { margin-top: 18px; }
.ex-bt-studios {
  width: 100%; background: var(--st-azul); color: #fff;
  box-shadow: 0 12px 26px -10px rgba(30, 58, 138, .55);
}
.ex-bt-studios:hover { transform: translateY(-2px); filter: brightness(1.15); }
.ex-bt-studios:active { transform: scale(.985); }
.ex-bt-studios:focus-visible { outline: 3px solid var(--st-azul); outline-offset: 3px; }
.ex-studios .ex-link-um { color: var(--st-azul); text-decoration-color: rgba(30, 58, 138, .4); }
.ex-studios .ex-link-um:hover { color: var(--st-azul); text-decoration-color: var(--st-laranja); }
.ex-studios .ex-link-um:focus-visible { outline: 3px solid var(--st-azul); outline-offset: 2px; border-radius: 8px; }
.ex-studios-junta b { font-weight: 800; white-space: nowrap; }
@media (min-width: 640px) {
  .ex-studios-grade { gap: 18px; }
  .ex-studio-card { padding: 14px 14px 18px; }
  .ex-studio-txt { font-size: 15px; }
}

/* ============================================================================
   O SISTEMA DE LAYOUT DO DECK FINAL (29/10/2026). A dona: "esse leyout ta totalmente
   desajustado" e "ajuste todas as versoes de mobile, desktop e tablet pra se ajustar
   automaticamente". Por isso, UMA regua para a pagina inteira, e nada de largura fixa que quebre
   entre os pontos de corte:
     - um container so (.ex-wrap): a mesma largura maxima (--ex-larg) e a mesma calha fluida
       (--ex-calha, 16px no celular ate 40px no monitor) em TODAS as secoes, inclusive o hero,
       o FAQ e o bloco claro do checkout, cuja borda bate com a borda do conteudo das outras;
     - um ritmo vertical so (--ex-ritmo) entre as secoes;
     - grades que dividem a largura inteira em colunas iguais (o numero de colunas e escolhido
       para a ultima linha nao ficar pela metade: 12 videos em 2/3/4/6, 30 gavetas em 2/3/5,
       4 pacotes em 1/2/4), com cartoes de mesma altura na mesma linha;
     - imagens e videos com aspect-ratio: nada pula quando a midia chega.
   Vem DEPOIS das regras antigas de proposito (mesma especificidade, ganha pela ordem); o modo
   embutido, mais abaixo, continua por cima.
   ============================================================================ */
.ex-pagina {
  --ex-larg: 1120px;
  --ex-calha: clamp(16px, 4vw, 40px);
  --ex-ritmo: clamp(56px, 7.5vw, 104px);
}
.ex-wrap, .ex-hero > .ex-wrap, .ex-faq-wrap, .ex-comprar .ex-wrap {
  box-sizing: border-box; width: 100%;
  max-width: calc(var(--ex-larg) + 2 * var(--ex-calha));
  margin-left: auto; margin-right: auto;
  padding-left: var(--ex-calha); padding-right: var(--ex-calha);
}
.ex-sec { padding: var(--ex-ritmo) 0; }
.ex-h2 { max-width: 24ch; }
.ex-lead { max-width: 60ch; }
.ex-cta-bloco { margin-top: clamp(24px, 3vw, 36px); }
.ex-h3 {
  margin: 0 0 16px; text-align: center; font-family: var(--fonte-titulo) !important; font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -.02em; color: var(--cream); text-wrap: balance;
}
.ex-h3 i { font-style: normal; color: var(--orange); }

/* O CHECKOUT CLARO: no celular ocupa a tela toda; da tablet para cima e um bloco arredondado cuja
   borda bate com a borda do conteudo das outras secoes (a mesma regua). */
@media (min-width: 640px) {
  .ex-comprar {
    margin-left: max(var(--ex-calha), calc((100% - var(--ex-larg)) / 2));
    margin-right: max(var(--ex-calha), calc((100% - var(--ex-larg)) / 2));
    border-radius: 32px;
  }
  .ex-comprar .ex-wrap { max-width: none; padding-left: clamp(18px, 3vw, 36px); padding-right: clamp(18px, 3vw, 36px); }
}
/* o FAQ usa o mesmo container; a lista de perguntas fica numa coluna de leitura centrada */
.ex-faq { max-width: 820px; margin-left: auto; margin-right: auto; }

/* --- O HERO ------------------------------------------------------------------ */
.ex-preco-hero { flex-wrap: wrap; }
.ex-preco-hero .ex-ph-combo {
  flex: 0 0 100%; margin: 0 0 -4px; font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
/* no topo do celular, a legenda do ladrilho fica so com o nome (a divisao cortava) */
@media (max-width: 639px) { .ex-hero .ex-tile-sub { display: none; } }
@media (min-width: 900px) {
  .ex-hero-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: clamp(32px, 4vw, 56px); }
  .ex-h1 { font-size: clamp(42px, 3.9vw, 54px); }
}
/* o selo do presente cabe com folga das bordas no celular estreito */
@media (max-width: 400px) { .ex-chip-isca { font-size: 12px; padding-left: 12px; padding-right: 12px; } }
/* DE 900 A 1099px (29/10/2026, pente fino L5): a coluna dos videos e estreita para o selo numa linha
   so (a 1024 o presente e a seta ficavam 7px para fora). Ele quebra em 2 linhas por dentro da pilula.
   Tem de vir DEPOIS da regra de 900px do .ex-chip-isca. */
@media (min-width: 900px) and (max-width: 1099px) {
  .ex-chip-isca { white-space: normal; font-size: 13px; padding: 8px 14px; }
}
/* NO CELULAR OS VIDEOS DOS EFEITOS VIRAM UMA FAIXA DE ARRASTAR (29/10/2026): 12 videos 9:16 em duas
   colunas eram 6 telas de rolagem antes da oferta. A faixa mostra 2 e um pedaco do 3o (o convite para
   arrastar), e todos continuam contando no "voce viu". As gavetas perdem a amostra de nomes: ficam o
   nome da divisao e a contagem. */
@media (max-width: 599px) {
  .ex-grade {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--ex-calha)); margin-right: calc(-1 * var(--ex-calha));
    padding: 0 var(--ex-calha) 8px; scroll-padding-left: var(--ex-calha); scrollbar-width: none;
  }
  .ex-grade::-webkit-scrollbar { display: none; }
  .ex-grade > .ex-efeito { flex: 0 0 42%; scroll-snap-align: start; min-width: 0; }
  .ex-gaveta-amostra { display: none; }
}

/* --- OS EFEITOS ------------------------------------------------------------------ */
.ex-cmd { white-space: nowrap; }
.ex-segredo {
  max-width: 60ch; margin: -6px auto clamp(24px, 3vw, 36px); text-align: center;
  font-size: 15.5px; line-height: 1.6; color: var(--ex-creme-82); text-wrap: pretty;
}
.ex-segredo b { color: var(--cream); }
/* os videos: 2, 3, 4 e 6 colunas (12 exemplos sempre em linhas inteiras) */
.ex-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
@media (min-width: 600px) { .ex-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ex-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ex-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ex-grade .ex-tile { aspect-ratio: 9 / 16; }
.ex-efeito-div {
  margin: 2px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
  color: var(--ex-creme-60); text-wrap: pretty;
}
.ex-tarja-dica { margin-left: auto; font-family: var(--fonte-corpo); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--ex-creme-82); white-space: nowrap; }
/* um comando, tres jeitos */
.ex-jeitos { margin: clamp(32px, 4vw, 48px) 0 0; }
.ex-jeitos-lista { list-style: none; counter-reset: jeito; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ex-jeitos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.ex-jeitos-lista li {
  counter-increment: jeito; position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 18px 56px; border-radius: var(--ex-raio); background: var(--ex-caixa); border: 1px solid var(--ex-linha);
  font-size: 15px; line-height: 1.5; color: var(--ex-creme-82);
}
.ex-jeitos-lista li::before {
  content: counter(jeito); position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--orange); color: var(--bg);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 14px;
}
.ex-jeitos-lista b { color: var(--cream); font-size: 16px; }
.ex-jeitos-lista code { padding: 1px 6px; border-radius: 6px; background: rgba(243, 236, 222, .1); color: var(--cream); font-weight: 700; font-size: .95em; }
.ex-jeitos .ex-nota { margin-top: 12px; }
/* o cofre: 2, 3 e 5 colunas (30 divisoes sempre em linhas inteiras) */
.ex-cofre { max-width: none; margin-top: clamp(32px, 4vw, 48px); }
.ex-divisoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ex-divisoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ex-divisoes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ex-complemento {
  max-width: 64ch; margin: clamp(24px, 3vw, 32px) auto 0; padding: 16px 18px; border-radius: 16px; text-align: center;
  background: rgba(243, 236, 222, .05); border: 1px dashed rgba(243, 236, 222, .22);
  font-size: 15px; line-height: 1.55; color: var(--ex-creme-82); text-wrap: pretty;
}
.ex-complemento b { color: var(--cream); }

/* --- O AGENTE: as 5 funcoes ---------------------------------------------------- */
.ex-funcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-funcoes li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 16px; background: var(--ex-caixa); border: 1px solid var(--ex-linha);
}
.ex-funcao-n { font-family: var(--fonte-titulo); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--orange); letter-spacing: -.02em; }
.ex-funcoes p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ex-creme-82); text-wrap: pretty; }
.ex-funcoes b { display: block; margin-bottom: 2px; color: var(--cream); font-size: 16px; }
.ex-guia {
  margin: 14px 0 0; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 106, 43, .16), rgba(255, 106, 43, .05)); border: 1px solid var(--ex-borda);
  font-size: 15.5px; line-height: 1.55; color: var(--cream); text-wrap: pretty;
}
.ex-ponte-gratis {
  display: block; margin-top: 14px; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--ex-creme-82);
  text-decoration: underline; text-decoration-color: rgba(255, 106, 43, .55); text-underline-offset: 4px;
}
.ex-ponte-gratis:hover { color: var(--cream); }
@media (max-width: 899px) { .ex-ponte-gratis { text-align: center; } }

/* --- O PACOTE EM UMA LINHA (#leva, #studios, #motion) ------------------------- */
.ex-pacote-linha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  max-width: 720px; margin: clamp(20px, 3vw, 32px) auto 0; padding: 16px 20px; border-radius: 20px; text-align: center;
  background: var(--ex-vidro); border: 1px solid var(--ex-borda);
}
.ex-pacote-linha p { margin: 0; }
.ex-pacote-linha-nome { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 17px; letter-spacing: .01em; color: var(--cream); }
.ex-pacote-linha-nome small { margin-left: 8px; font-family: var(--fonte-corpo); font-size: 13px; font-weight: 700; color: var(--ex-creme-60); letter-spacing: .02em; white-space: nowrap; }
.ex-pacote-linha-nome .ex-adesivo-mini { margin-left: 8px; vertical-align: 2px; }
.ex-pacote-linha-preco { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; color: var(--cream); }
.ex-pacote-linha-preco b { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.02em; white-space: nowrap; }
.ex-pacote-sep { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-creme-60); white-space: nowrap; }
.ex-pacote-sep s { letter-spacing: 0; text-decoration-thickness: 2px; text-decoration-color: var(--orange); }
.ex-adesivo-mini {
  display: inline-block; padding: 4px 10px; border-radius: 100px; background: var(--orange); color: var(--bg);
  font-family: var(--fonte-corpo); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg);
}
.ex-pacote-linha .ex-studios-depois { flex-basis: 100%; margin-top: 4px !important; }

/* --- A FAMILIA STUDIOS (#studios, creme) --------------------------------------- */
.ex-studios-grade { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(20px, 3vw, 32px); }
.ex-studio-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 6px;
  align-items: start; padding: 12px; position: relative;
}
.ex-studio-card .ex-studio-logo { grid-row: 1 / -1; width: 96px; }
.ex-studio-selo {
  justify-self: start; margin: 0; padding: 3px 9px; border-radius: 100px; background: var(--st-azul); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.ex-studio-selo::before { content: "\2726  "; color: var(--st-laranja); }
.ex-studio-selo-vago { visibility: hidden; }
@media (max-width: 719px) { .ex-studio-selo-vago { display: none !important; } }
.ex-studio-txt { grid-column: 2; }
.ex-studio-preco { grid-column: 2; margin: 0; font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 20px; color: var(--st-azul); }
.ex-studio-link { font-weight: 800; color: var(--st-azul); text-decoration: underline; text-decoration-color: var(--st-laranja); text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 720px) {
  .ex-studios-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
  .ex-studio-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding: 14px 14px 18px; row-gap: 10px; }
  .ex-studio-card .ex-studio-logo { grid-row: auto; width: 100%; }
  .ex-studio-txt, .ex-studio-preco { grid-column: 1; }
}
.ex-studios .ex-pacote-linha { background: #fff; border: 2px solid var(--st-laranja); box-shadow: 0 14px 30px -18px rgba(30, 58, 138, .45); }
.ex-studios .ex-pacote-linha-nome, .ex-studios .ex-pacote-linha-preco { color: var(--st-azul); }
.ex-studios .ex-pacote-sep { color: rgba(30, 58, 138, .8); }
.ex-studios .ex-pacote-sep s { text-decoration-color: var(--st-laranja); }
.ex-studios .ex-adesivo-mini { background: var(--st-azul); color: #fff; }

/* --- O FLOW MOTION ------------------------------------------------------------- */
.ex-eyebrow-logo::before { display: none; }
.ex-eyebrow-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ex-motion-par { max-width: 520px; }
.ex-motion-q video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.ex-motion-passos { max-width: 620px; }
.ex-destaque-cel {
  display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 620px; margin: 18px auto 0;
  padding: 12px 16px; border-radius: 14px; background: var(--ex-vidro); border: 1px solid var(--ex-borda);
  font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--cream); text-align: left;
}
.ex-destaque-cel svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; }
.ex-motion-video { max-width: 620px; }
.ex-motion-video img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- ANTES DE PAGAR: 1 coluna, 2 da tablet em diante, sempre a largura inteira ---- */
.ex-antes-grade { max-width: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ex-antes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); } }
.ex-vale { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ex-vale li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: var(--ex-creme-82); }
.ex-vale li::before { content: "\2726"; position: absolute; left: 2px; top: 1px; color: var(--orange); font-size: 13px; }

/* --- OS PACOTES: 1, 2 e 4 colunas, cartoes da mesma altura e botao no pe --------- */
.ex-pacotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 560px) { .ex-pacotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); } }
@media (min-width: 1100px) { .ex-pacotes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ex-pacote {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 22px 18px 18px; border-radius: var(--ex-raio); text-align: center;
  background: var(--ex-caixa); border: 1px solid var(--ex-linha);
}
.ex-pacote p { margin: 0; }
.ex-pacote-destaque { border: 2px solid var(--orange); box-shadow: 0 18px 40px -22px rgba(255, 106, 43, .55); }
.ex-pacote-selo {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 12px; border-radius: 100px; background: var(--orange); color: var(--bg);
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ex-pacote-selo-claro { background: var(--cream); }
.ex-pacote-nome { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--cream); }
.ex-pacote-itens { font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ex-creme-60); flex: 1 1 auto; }
.ex-pacote .ex-pacote-sep { margin-top: 6px; }
.ex-pacote-preco { font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: clamp(30px, 3.4vw, 38px); line-height: 1.05; letter-spacing: -.03em; color: var(--cream); white-space: nowrap; }
.ex-pacote .ex-bt { width: 100%; min-width: 0 !important; margin-top: 10px; min-height: 50px; font-size: 15px; }
.ex-pacotes-pe { margin: 18px 0 0; text-align: center; font-size: 14.5px; color: var(--ex-creme-82); }
.ex-pacotes-pe a { color: var(--cream); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 106, 43, .6); text-underline-offset: 3px; }

/* --- O CHECKOUT: o selo do lancamento no cartao, o "no seu pedido" e a dica do email ---- */
.ex-item-tag {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: 2px; margin-left: 2px; padding: 2px 8px; border-radius: 100px;
  background: var(--st-azul, #1E3A8A); color: #fff; font-family: var(--fonte-corpo); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ex-item-tag::before { content: "\2726"; color: var(--st-laranja, #F28C28); font-size: 9px; }
.ex-item-no-pedido { display: block; margin-bottom: 2px; font-family: var(--fonte-corpo); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ex-claro-destaque); white-space: nowrap; }
.ex-dica-email {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 8px !important; padding: 10px 12px; border-radius: 12px;
  background: rgba(30, 58, 138, .06); border: 1px solid rgba(30, 58, 138, .18);
  font-size: 13.5px !important; line-height: 1.5 !important; color: var(--ex-claro-texto) !important;
}
.ex-dica-email svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: #1E3A8A; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ex-dica-email b { color: #1E3A8A; }
.ex-sessao-nao { white-space: nowrap; }
/* O TOPO EM 360 px (29/10/2026): com a Manrope carregada, "conheça o Cria aí!", o globo e o "entrar"
   passavam 18px da tela. Abaixo de 390px tudo encolhe um pouco, sem sumir nada.
   30/10/2026: o corte era 374px, e a pagina ainda rolava de lado a 375-377 e 381px (o "ENTRAR" saia
   cortado no iPhone SE e no mini). Varrido pixel a pixel de 320 a 420: com 389px, nenhuma rola. */
@media (max-width: 389px) {
  .ex-topo { padding-left: 12px; padding-right: 12px; }
  .ex-topo .ex-topo-criaai { margin-right: 4px; font-size: 11.5px; }
  .ex-topo .idioma-btn { padding-left: 7px; padding-right: 7px; }
  .ex-topo .nav-entrar { padding-left: 4px; padding-right: 4px; }
}
/* NO CELULAR, NO MAXIMO 3 LINHAS POR CARTAO (deck final): fica a frase do que o item faz; a linha do
   ganho e a condicao saem, menos a do Agente (o link tem data: aviso que nao pode sumir) */
@media (max-width: 480px) {
  #exItens .ex-item-unid, #exItens .ex-item-cond { display: none; }
  #exItens #exItemAgenteRot .ex-item-cond { display: block; }
}
/* a barra do celular com uma sugestao: o pedido de agora em cima, o combo embaixo */
@media (max-width: 780px) {
  .ex-barra-rot.ex-barra-sug { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 800; color: var(--orange); white-space: normal; line-height: 1.2; }
  .ex-barra-um { flex: 1 1 50%; min-width: 0; }
  .ex-barra-um + .ex-barra-bt { flex: 0 1 auto; padding-left: 14px; padding-right: 14px; font-size: 14px; }
  .ex-barra-ancora b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; color: var(--cream); }
}

/* ============================================================================
   CONSERTOS DE LAYOUT (29/10/2026, revisao final das previas)
   ============================================================================ */
/* O TOPO EM 320 px: logo, convite, globo e "entrar" nao cabiam (23px para o lado, e a barra do
   celular esticava junto). Abaixo de 350px o convite sai do topo, como na /studios.
   30/10/2026: o corte era 339px, e de 340 a 342px a pagina ainda rolava de lado. */
@media (max-width: 349px) {
  .ex-topo .nav-links a.ex-topo-criaai { display: none; }
}
/* O CARTAO DO CHECKOUT NO CELULAR, igual ao da /studios: o nome e o preco dividem a primeira linha,
   e a frase desce em largura total (antes sobravam 73px para o texto em 320 e 129px em 390, e a
   frase quebrava palavra por palavra). Nenhuma classe muda: o .ex-item-info vira display: contents. */
@media (max-width: 480px) {
  #exItens { --ex-mini: 42px; }
  #exItens .ex-item {
    display: grid; grid-template-columns: 28px var(--ex-mini) minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 0; align-items: start; align-content: center;
  }
  #exItens .ex-item:not(.ex-item-com-mini) { grid-template-columns: 28px minmax(0, 1fr) auto; }
  #exItens .ex-item-info { display: contents; }
  #exItens .ex-item > input { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin-top: calc((var(--ex-mini) - 28px) / 2); }
  #exItens .ex-item:not(.ex-item-com-mini) > input { margin-top: 0; }
  #exItens .ex-item-mini { grid-column: 2; grid-row: 1 / span 6; align-self: start; width: var(--ex-mini); height: var(--ex-mini); }
  #exItens .ex-item .ex-item-nome { grid-column: -3; grid-row: 1; align-self: center; }
  #exItens .ex-item .ex-item-preco { grid-column: -2; grid-row: 1; align-self: center; }
  #exItens .ex-item .ex-item-info > :not(.ex-item-nome) { grid-column: -3 / -1; margin-top: 3px; }
}
@media (max-width: 374px) {
  #exItens { --ex-mini: 40px; }
  #exItens .ex-item { column-gap: 8px; }
}
/* O "ou escolher só um" do topo nunca encosta no botao: sempre na linha de baixo */
@media (min-width: 1024px) {
  .ex-hero-texto .ex-link-um { display: block; width: fit-content; margin-top: 12px; }
  /* a legenda dos videos do topo nao encosta no selo do presente */
  .ex-trio:not(.ex-dupla-hero):not(.ex-um-hero) .ex-tile-nome { padding-bottom: 32px; }
}
/* A DIVISAO NA LEGENDA DOS VIDEOS DO TOPO: termina em reticencias, nunca cortada no meio da palavra */
.ex-trio .ex-tile-sub { overflow: hidden; text-overflow: ellipsis; }
/* A TARJA DOS EFEITOS NO CELULAR: o ladrilho e estreito para cadeado, barra, tracos e a dica.
   Ate 430px saem os tracos; ate 374px sai a dica e os tracos voltam. */
@media (max-width: 430px) {
  .ex-tarja i { display: none; }
  .ex-tarja-dica { font-size: 10px; letter-spacing: .02em; }
}
@media (max-width: 374px) {
  .ex-tarja i { display: block; }
  .ex-tarja-dica { display: none; }
}
/* enquanto o video da vitrine (sem poster) carrega, o ladrilho respira em vez de ficar chapado */
@keyframes ex-respira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ex-tile video:not([poster]):not([data-pronto]) { animation: ex-respira 1.6s ease-in-out infinite; background: linear-gradient(160deg, #1b2a5c, #0a1030); }
@media (prefers-reduced-motion: reduce) { .ex-tile video:not([poster]):not([data-pronto]) { animation: none; } }

/* A BARRA DO POLEGAR NAO CORTA O BOTAO (29/10/2026, pente fino L1). Regra: o botao de pagar da barra
   fixa NUNCA encolhe; quem cede e quebra linha e o rotulo do preco. Antes era o contrario (o preco
   rigido e em uma linha, o botao com overflow hidden) e a 390 sobrava "AR R$ 1" na pilula. Fica
   DEPOIS do .ex-barra-um + .ex-barra-bt (acima) para ganhar dele, e ANTES do modo embutido (que tem
   de ser o ultimo bloco). Medido de 320 a 430, nos 5 estados, nas duas paginas: o texto fica dentro
   do botao com 12px (320) ou 16px de folga, sem encostar no preco, e a barra chega a 88px
   (--ex-altura-barra: 90px). A fonte do botao na /studios mora no studios.css, que carrega depois. */
@media (max-width: 780px) {
  .ex-barra-linha { gap: 10px; }
  .ex-barra-preco { flex: 1 1 auto; min-width: 0; }
  /* "SEU PEDIDO R$ 97" em cima da sugestao tambem cede: a 360, com "quero os 3 Studios" no botao, o
     valor encostava na pilula. Quando nao cabe, o valor desce para a linha de baixo. */
  .ex-barra-ancora { flex-wrap: wrap; row-gap: 0; }
  .ex-barra-linha-val { white-space: normal; flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
  .ex-barra-rot, .ex-barra-up { white-space: normal; font-size: 11px; line-height: 1.15; }
  .ex-barra-bt, .ex-barra-um + .ex-barra-bt { flex: 0 0 auto; padding: 12px 16px; font-size: 14px; letter-spacing: .02em; }
}
@media (max-width: 359px) {
  .ex-barra-bt, .ex-barra-um + .ex-barra-bt { padding: 12px; font-size: 13px; letter-spacing: 0; gap: 6px; }
}

/* OS ALVOS DE TOQUE DE 44px (29/10/2026, pente fino L8), so nas paginas de venda: o idiomas.css e do
   site todo e fica como esta. O globo do rodape media 41x33. A logo do topo cresce so na
   area de toque, pelo ::after, e a caixa desenhada (o selo azul da /studios) nao muda; o overflow
   volta a visible porque o marca.css cortava o pseudo, e o texto da logo ja esta escondido
   (.ex-pagina .nav-logo span, acima). */
.ex-pagina .footer .idioma-btn { min-height: 44px; min-width: 44px; justify-content: center; }
.ex-pagina .ex-topo .nav-logo { position: relative; overflow: visible; }
.ex-pagina .ex-topo .nav-logo::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* DEPOIS DO LANCAMENTO, ANTES DA TABELA (29/10/2026, pente fino P3). A partir de 02/11 03:00 UTC um
   script do <head> poe .ex-pos-lanc no <html>, e o extras.js tira a classe quando a tabela da
   vitrine chega (dai em diante quem decide e a vitrine). Enquanto ela nao chega, lenta ou fora do
   ar, nenhum selo de lancamento aparece, e os precos escritos no HTML (os do lancamento) ficam
   ocultos sem mudar o tamanho de nada; o #exItensCarregando ja explica. */
.ex-pos-lanc [data-so-lancamento] { display: none !important; }
.ex-pos-lanc [data-preco], .ex-pos-lanc [data-preco-depois], .ex-pos-lanc [data-cheio],
.ex-pos-lanc #exBarraVal, .ex-pos-lanc #exBarraAncora { visibility: hidden; }
/* o "R$" pequeno do numero grande do topo mora fora do [data-preco] (data-formato="numero"): some junto */
.ex-pos-lanc .ex-ph-num small { visibility: hidden; }
/* 30/10/2026: so o numero sumindo deixava a frase pela metade ("quero os 2 por →", "os 2 Studios por
   ✦", "separados" sem nada). Agora some a FRASE de preco inteira: o " por R$ X" dos botoes, do
   letreiro, dos links "só o ..." e das respostas do FAQ mora num .ex-com-preco (o botao fica "quero
   os 2 →"); os blocos que sao so preco ("separados" com o riscado, "os 2 por" com o numero, o rotulo
   da barra) ficam ocultos sem mudar de tamanho; no adesivo do topo o numero sai do desenho. */
.ex-pos-lanc .ex-com-preco { display: none; }
.ex-pos-lanc .ex-ph-ancora, .ex-pos-lanc .ex-ph-agora, .ex-pos-lanc .ex-pacote-linha-preco,
.ex-pos-lanc .ex-pacote-sep, .ex-pos-lanc #exBarraRot { visibility: hidden; }
.ex-pos-lanc .ex-adesivo [data-preco] { display: none; }

/* ============================================================================
   MODO EMBUTIDO (07/10/2026): /extras?embutido=1&itens=... dentro do iframe do modal
   (CONTRATO-COMPRA-NA-AREA.md). O <head> poe a classe ex-embutido no <html> antes do
   primeiro desenho, e o extras.js ainda TIRA do documento tudo o que nao e o bloco de compra.
   Sem a classe, NENHUMA regra daqui vale: a pagina de venda fica como estava.

   Fundo creme, o mesmo do bloco de compra: o iframe e uma folha so, sem moldura escura em volta
   (um modal escuro por fora combina; um claro tambem). Nada em vh: o pai ajusta a altura do
   iframe a do conteudo (extras:altura), e medida em vh faria os dois se perseguirem.
   ============================================================================ */
html.ex-embutido { background: #F3ECDE; scroll-behavior: auto; }
html.ex-embutido body.ex-pagina {
  margin: 0; padding: 0; min-height: 0; background: var(--ex-claro-fundo); background-attachment: scroll;
  color: var(--ex-claro-texto); overflow-x: hidden;
}
/* o grao decorativo (estilo.css) so servia ao fundo escuro */
html.ex-embutido body.ex-pagina::before { display: none; }

/* o que nao e o bloco de compra (rede de seguranca: o JS tambem remove estes nos) */
html.ex-embutido .ex-pular, html.ex-embutido .ex-topo, html.ex-embutido .ex-letreiro, html.ex-embutido .ex-hero,
html.ex-embutido .ex-rodape, html.ex-embutido .ex-barra, html.ex-embutido main > section:not(#comprar) { display: none !important; }
/* o modal ja tem titulo e o preco ja esta nos cartoes: sem etapas, sem combo, sem a FAI, sem
   indicacao e sem senha (quem compra aqui ja tem conta e nao ha afiliada) */
html.ex-embutido #exEtapas, html.ex-embutido #exComprarLead, html.ex-embutido #exCombo, html.ex-embutido #exVivo,
html.ex-embutido #exIndicacao, html.ex-embutido #exIndicacaoOk, html.ex-embutido #exBlocoSenha, html.ex-embutido #exSessao { display: none !important; }
/* o "depois de pagar" (12/10/2026) e da pagina de venda: no modal a pessoa ja esta na propria
   conta, e o recibo "Pagamento confirmado" ja leva a /meus-extras */
html.ex-embutido .ex-depois { display: none !important; }
/* o titulo continua para o leitor de tela (a secao se chama por ele), so some do olho */
html.ex-embutido #exComprarTit {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

html.ex-embutido .ex-comprar { margin: 0; padding: 12px 0 4px; border-radius: 0; box-shadow: none; scroll-margin-top: 0; }
html.ex-embutido .ex-comprar .ex-wrap { max-width: 640px; padding: 0 14px; }
/* uma coluna em qualquer largura: o modal e estreito, e o resumo nao precisa ficar colado */
html.ex-embutido .ex-compra-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
html.ex-embutido .ex-resumo { position: static; }
/* so aparece o formulario depois de saber quem compra e o que se vende (o JS liga ex-emb-ok) */
html.ex-embutido:not(.ex-emb-ok) .ex-compra-grade { display: none; }

/* os cartoes do que se compra: so mostram, quem escolheu foi o cartao em que a pessoa tocou la
   fora. Menores que na pagina de venda, e sem dedo (nao ha o que tocar) */
html.ex-embutido .ex-item { cursor: default; pointer-events: none; min-height: 0; padding: 10px 12px; border-radius: 14px; }
html.ex-embutido .ex-item input { width: 24px; height: 24px; border-radius: 8px; }
html.ex-embutido .ex-item input::after { left: 6px; top: 2px; }
html.ex-embutido .ex-item.travado { cursor: default; opacity: 1; }
html.ex-embutido .ex-col-escolha { gap: 8px; }
html.ex-embutido .ex-col-fim { gap: 8px; position: static; }
html.ex-embutido .ex-linha-legal { margin-top: 2px; }
html.ex-embutido .ex-form { padding: 14px 12px 12px; box-shadow: none; border-radius: 18px; }
html.ex-embutido .ex-pix { padding: 16px 12px; }

/* a nota "abre em breve" quando o modal pediu os Efeitos e eles ainda nao estao a venda */
.ex-emb-breve {
  margin: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(20, 19, 26, .3);
  background: var(--ex-claro-cartao); font-size: 13.5px; line-height: 1.45; color: var(--ex-claro-texto);
}

/* as telas curtas: carregando, sem sessao, ja tem, pago, Efeitos fechado */
.ex-emb-estado {
  padding: 18px 14px 14px; border-radius: 18px; background: var(--ex-claro-cartao);
  border: 1px solid var(--ex-claro-fio); text-align: center;
}
.ex-emb-tit { margin: 0 0 6px; font-family: var(--fonte-titulo) !important; font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; color: var(--ex-claro-texto); }
.ex-emb-txt { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ex-claro-sec); }
.ex-emb-estado .ex-emb-link { display: flex; width: 100%; margin-top: 14px; min-height: 54px; text-decoration: none; }

/* o "fechar" de dentro do iframe: discreto, alvo de 44px */
.ex-emb-rodape { margin: 8px 0 0; text-align: center; }
.ex-emb-fechar {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 18px; border: 0; background: none; cursor: pointer;
  font-family: var(--fonte-corpo) !important; font-size: 14px; font-weight: 700; color: var(--ex-claro-sec);
  text-decoration: underline; text-underline-offset: 3px;
}
.ex-emb-fechar:focus-visible { outline: 3px solid var(--ex-claro-destaque); outline-offset: 2px; border-radius: 8px; }

/* 14/10/2026: o convite ao Cria ai! nao entra no modal da area de membros */
html.ex-embutido .ex-criaai, html.ex-embutido .ex-topo-criaai { display: none !important; }

/* 29/10/2026 (Studios): no modal aparecem so os cartoes pedidos, entao o titulo dos grupos sai; a
   faixa do lancamento tambem (o resumo ja diz, quando o preco do que foi pedido muda na virada) */
html.ex-embutido .ex-itens-grupo, html.ex-embutido .ex-faixa-lanc { display: none !important; }
html.ex-embutido .ex-item-mini { width: 40px; height: 40px; border-radius: 10px; }