/* Sorriso de Criança — funil de PERSONAGENS (/recado-personagens/, 23/10/2026).
   Folha própria, sem nada do Natal (o dono pediu: "parece layout de Natal"). Claro e colorido, de criança.
   Mesmas classes do sem-amostra.js — o motor é o mesmo; só a roupa muda. */
@font-face { font-family: 'Nunito Sans'; src: url(/_shared/font/nunito-sans.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --fundo: #FFF7EE;
  --cartao: #FFFFFF;
  --tinta: #2A2346;
  --tinta-2: #6B6488;
  --borda: #ECE3F6;
  --roxo: #7C4DFF;
  --roxo-escuro: #5B2FD6;
  --roxo-claro: #EFE8FF;
  --amarelo: #FFC93C;
  --rosa: #FF5C8A;
  --verde: #1F9D68;
  --corpo: 'Nunito Sans', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); overscroll-behavior-y: none; }
body {
  margin: 0; min-height: 100dvh; color: var(--tinta); font-family: var(--corpo); line-height: 1.5;
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(124,77,255,.10), transparent 70%),
    radial-gradient(50% 35% at 100% 10%, rgba(255,201,60,.18), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(255,92,138,.10), transparent 70%),
    var(--fundo);
  background-attachment: fixed;
}
p, h1, h2, h3, figure, ul { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- topo ---------- */
.faixa { text-align: center; font-size: 11px; font-weight: 900; letter-spacing: .14em; padding: 7px 12px; color: #fff;
  background: linear-gradient(90deg, var(--roxo), var(--rosa)); }
.marca { text-align: center; padding: 14px 16px 0; }
.marca b { font-size: 20px; font-weight: 1000; letter-spacing: -.01em; color: var(--roxo-escuro); }
.marca b::before { content: '☺ '; color: var(--amarelo); }
/* 27/10: com os ✓ as etapas passavam da largura e aparecia a barra de rolagem embaixo delas. */
.etapas { display: flex; justify-content: center; gap: 4px; margin: 10px auto 0; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.etapas::-webkit-scrollbar { display: none; }
.etapas span { font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 99px; white-space: nowrap;
  color: var(--tinta-2); background: var(--cartao); border: 1px solid var(--borda); }
.etapas span.feita { color: var(--roxo-escuro); border-color: #CDBBFF; }
.etapas span.atual { color: #fff; background: var(--roxo); border-color: var(--roxo); }

/* ---------- telas ---------- */
main { max-width: 520px; margin: 0 auto; padding: 22px 16px 150px; }
.tela { display: grid; gap: 20px; animation: entra .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
h1 { font-weight: 1000; font-size: 28px; line-height: 1.12; letter-spacing: -.02em; color: var(--tinta); text-wrap: balance; }
h1 em { font-style: normal; color: var(--roxo); }
.sub { margin-top: 8px; font-size: 16px; color: var(--tinta-2); }
.centro { text-align: center; }
.dica { font-size: 12.5px; color: var(--tinta-2); }

/* ---------- vídeo de fundo da 1ª tela (o do modelo 1) ----------
   Topo da tela, some num degradê pro creme do fundo. O título fica em branco em cima da parte escura. */
.capa-fundo { display: none; position: absolute; top: 0; left: 0; right: 0; height: 78vh; max-height: 760px; z-index: 0; overflow: hidden; }
body.na-capa .capa-fundo { display: block; }
.capa-fundo video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.capa-fundo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,35,70,.35) 0%, rgba(42,35,70,.05) 22%, rgba(42,35,70,.6) 50%, rgba(42,35,70,.88) 70%, rgba(42,35,70,.88) 84%, var(--fundo) 100%); }
@media (min-width: 600px) { .capa-fundo { left: 50%; right: auto; width: 600px; transform: translateX(-50%); } }
.faixa, .marca, .etapas, main { position: relative; z-index: 1; }
body.na-capa .marca b { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
body.na-capa .etapas span:not(.atual) { background: rgba(255,255,255,.85); }
.tela[data-tela="0"] { padding-top: 26vh; }
body.na-capa .tela[data-tela="0"] { padding-top: 20vh; }
/* 27/10: na capa, sem etapas e sem a barra do Continuar — tocar no personagem já leva pra próxima tela. */
body.na-capa .etapas, body.na-capa .barra { display: none; }
body.na-capa main { padding-bottom: 40px; }
/* Título da grade em pílula: cai em cima do degradê do vídeo, então tem que ler no escuro e no claro. */
.escolha { margin: 3vh 0 -6px; }
.escolha span { display: inline-block; padding: 7px 16px; border-radius: 99px; font-size: 16px; font-weight: 900;
  color: var(--roxo-escuro); background: #fff; box-shadow: 0 4px 14px rgba(42,35,70,.18); }
.capa-titulo h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.capa-titulo h1 em { color: var(--amarelo); }
.capa-titulo .sub { color: rgba(255,255,255,.95); text-shadow: 0 1px 10px rgba(0,0,0,.6); }

/* ---------- personagens (1ª tela) ---------- */
.personagens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.personagem { position: relative; display: grid; padding: 0; overflow: hidden; border-radius: 16px; cursor: pointer; text-align: center;
  background: var(--cartao); border: 3px solid transparent; box-shadow: 0 4px 14px rgba(42,35,70,.10);
  transition: transform .15s, border-color .2s, box-shadow .2s; }
.personagem-rosto { display: block; aspect-ratio: 1; background: var(--roxo-claro); }
.personagem-rosto i { display: grid; place-items: center; height: 100%; font-style: normal; font-size: 46px; }
.outro-personagem .personagem-rosto { background: #FFF4D1; }
.personagem-rosto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.personagem b { display: grid; place-items: center; min-height: 40px; padding: 6px 4px 8px; font-size: 13px; font-weight: 900; line-height: 1.1; }
.personagem:active { transform: scale(.97); }
.personagem[aria-checked="true"] { border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(124,77,255,.25), 0 8px 20px rgba(42,35,70,.16); }
.personagem[aria-checked="true"]::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 1000; color: #fff; background: var(--roxo); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.personagem-tag { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--rosa); }

/* ---------- formulário ---------- */
.capa-form { display: grid; gap: 18px; }
.campo-rotulo { font-weight: 800; font-size: 15px; color: var(--tinta); margin-bottom: 8px; }
.campo-rotulo .req { color: var(--rosa); }
.entrada { display: block; width: 100%; border-radius: 14px; padding: 15px 16px; font-size: 17px; outline: none; text-align: center; font-weight: 700;
  background: var(--cartao); color: var(--tinta); border: 2px solid var(--borda); }
.entrada::placeholder { color: #A9A3BF; font-weight: 500; }
.entrada:focus { border-color: var(--roxo); box-shadow: 0 0 0 4px rgba(124,77,255,.18); }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; padding: 14px 12px; border-radius: 14px;
  background: var(--cartao); border: 2px solid var(--borda); font-weight: 800; font-size: 14.5px; line-height: 1.25; transition: transform .15s, background .2s, border-color .2s; }
.capa-form .opcao { justify-content: center; font-size: 16px; }
.opcao .em { font-size: 22px; flex-shrink: 0; }
.opcao[aria-pressed="true"] { background: var(--roxo-claro); border-color: var(--roxo); transform: scale(1.02); }
.opcao[aria-pressed="true"]::after { content: '✓'; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff; background: var(--roxo); }
.idades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.idade { height: 44px; border-radius: 12px; font-weight: 900; font-size: 15px; cursor: pointer; background: var(--cartao); border: 2px solid var(--borda); color: var(--tinta); }
.idade[aria-pressed="true"] { background: var(--roxo); color: #fff; border-color: var(--roxo); transform: scale(1.04); }
.outro { margin-top: 2px; scroll-margin-bottom: 120px; }
#in-irmaos { resize: vertical; min-height: 64px; text-align: left; font-size: 15px; }

/* ---------- planos ---------- */
.escassez { text-align: center; padding: 16px 16px 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #D7263D, #FF5C5C); box-shadow: 0 10px 26px rgba(215,38,61,.3); margin-bottom: 26px; } /* 24/10: vermelho da promoção de pré-Natal (variante com contador) */
.escassez-titulo { font-size: 24px; font-weight: 1000; line-height: 1.15; }
.escassez-txt { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.95); }
.escassez-txt b { color: #fff; text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 3px; }
.cronometro { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.cronometro span { display: grid; min-width: 58px; padding: 6px 4px; border-radius: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.9); background: rgba(255,255,255,.18); }
.cronometro b { font-size: 24px; line-height: 1.1; font-weight: 1000; color: #fff; font-variant-numeric: tabular-nums; }
/* Exemplo antes dos planos (02/11): trecho da Helena que corta no meio. A barra mostra 0:17 de 1:00 e o resto
   trancado — a pessoa vê que o vídeo continua. */
.previa { margin: 6px auto 0; width: 100%; max-width: 260px; }
.previa-quadro { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 14px 34px rgba(42,35,70,.22); }
.previa-quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.previa-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); color: #fff; }
.previa-play .play-bola { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; padding-left: 5px; font-size: 26px;
  color: var(--roxo); background: rgba(255,255,255,.96); box-shadow: 0 0 0 10px rgba(255,255,255,.25); animation: previa-pulsa 1.8s ease-out infinite; }
@keyframes previa-pulsa { 50% { transform: scale(1.07); } }
.previa-play b { font-size: 15px; font-weight: 900; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.previa-fim { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 22px 18px; text-align: center;
  color: #fff; background: rgba(20,16,40,.78); backdrop-filter: blur(3px); }
.previa-fim b { font-size: 34px; font-weight: 1000; letter-spacing: .01em; line-height: 1; }
.previa-fim > span { font-size: 16px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.previa-quero { margin-top: 8px; padding: 13px 16px; border: 0; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 1000; line-height: 1.2;
  color: #fff; background: linear-gradient(180deg, #8F66FF, var(--roxo) 60%, var(--roxo-escuro)); box-shadow: 0 8px 20px rgba(124,77,255,.45); }
.previa-denovo { margin-top: 6px; padding: 4px; border: 0; background: none; cursor: pointer; font-size: 12.5px; color: #fff; text-decoration: underline; opacity: .75; }
.previa-controle { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 26px 12px 10px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65)); }
.previa-barra { position: relative; height: 5px; border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.35), rgba(255,255,255,.35) 5px, rgba(255,255,255,.15) 5px, rgba(255,255,255,.15) 10px); }
.previa-barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 99px; transition: width .25s linear; }
.previa-tempo { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 11.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.previa-tempo .trava { opacity: .85; }
.planos-titulo { margin: 4px 0 -6px; font-size: 17px; }
.lista-planos { display: grid; gap: 14px; }
.item-plano { position: relative; width: 100%; text-align: left; cursor: pointer; padding: 16px; border-radius: 18px; color: var(--tinta);
  background: var(--cartao); border: 3px solid var(--borda); box-shadow: 0 6px 18px rgba(42,35,70,.08); transition: transform .15s, border-color .2s; }
.item-plano[aria-checked="true"] { border-color: var(--roxo); box-shadow: 0 0 0 4px rgba(124,77,255,.18), 0 12px 28px rgba(42,35,70,.14); }
.item-tarja { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; border-radius: 99px;
  font-size: 11px; font-weight: 900; letter-spacing: .04em; color: var(--tinta); background: var(--amarelo); }
.item-topo { display: flex; align-items: center; gap: 12px; }
.item-icone { font-size: 28px; flex-shrink: 0; }
.item-nome { flex: 1; min-width: 0; }
.item-nome b { display: block; font-size: 18px; font-weight: 1000; }
.item-nome small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--tinta-2); }
.item-preco { font-weight: 1000; font-size: 19px; white-space: nowrap; }
.item-preco s { display: block; font-size: 12.5px; font-weight: 700; text-align: right; color: var(--tinta-2); }
.item-radio { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 2px solid #CFC6E2; }
.item-plano[aria-checked="true"] .item-radio { border-color: var(--roxo); box-shadow: inset 0 0 0 4px #fff; background: var(--roxo); }
.item-plano ul { list-style: none; padding: 0; margin: 10px 0 0 40px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.35; color: #3D3658; }
.item-plano li::before { content: '✓ '; font-weight: 900; color: var(--verde); }
/* Planos lado a lado (molde do /natal-sem-amostra/ de 23/10): o do meio mais alto, com a tarja da promoção;
   o marcado fica roxo e a lista de bônus gruda embaixo dele. */
.colunas { display: grid; grid-template-columns: 1fr 1.08fr 1fr; align-items: end; margin-top: 30px; }
.coluna { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; cursor: pointer; padding: 16px 6px 18px;
  min-height: 240px; background: var(--cartao); border: 2px solid var(--borda); color: var(--tinta); }
.coluna:first-child { border-radius: 16px 0 0 0; border-right: 0; }
.coluna:last-child { border-radius: 0 16px 0 0; border-left: 0; }
.coluna[data-plano="magico"] { min-height: 268px; background: var(--roxo-claro); border: 2px solid var(--roxo); border-bottom-width: 3px; border-radius: 0; z-index: 1; }
.coluna[aria-checked="true"] { color: #fff; background: linear-gradient(180deg, #8F66FF, var(--roxo)); border-color: var(--roxo); }
.coluna[data-plano="magico"][aria-checked="true"] { box-shadow: 0 14px 34px rgba(124,77,255,.4); }
.coluna[aria-checked="true"] .coluna-extra, .coluna[aria-checked="true"] .coluna-de { color: rgba(255,255,255,.9); }
.coluna-tarja { position: absolute; left: -2px; right: -2px; bottom: 100%; padding: 7px 4px; border-radius: 12px 12px 0 0; font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: var(--tinta); background: var(--amarelo); }
.coluna-tarja.promo { color: #fff; background: #D7263D; } /* 24/10: vermelho de promoção de pré-Natal, mais forte que o rosa */
.coluna-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #CFC6E2; display: grid; place-items: center; background: #fff; }
.coluna[aria-checked="true"] .coluna-check { border-color: #fff; }
.coluna[aria-checked="true"] .coluna-check::after { content: '✓'; color: var(--roxo); font-weight: 1000; font-size: 14px; }
.coluna-icone { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: #FFF4D1; box-shadow: 0 0 0 2px var(--amarelo); margin-top: 4px; }
.coluna-nome { font-size: 16px; font-weight: 1000; line-height: 1.15; }
.coluna-extra { font-size: 12.5px; color: var(--tinta-2); line-height: 1.3; }
.coluna-de { margin-top: auto; font-size: 13px; color: var(--tinta-2); line-height: 1.2; }
.coluna-de s { font-weight: 800; text-decoration-thickness: 2px; font-size: 17px; white-space: nowrap; } /* 24/10: o 77 riscado maior, pedido do dono */
.coluna-preco { font-size: 22px; font-weight: 1000; color: var(--roxo-escuro); white-space: nowrap; line-height: 1; }
.coluna[aria-checked="true"] .coluna-preco { color: var(--amarelo); }
.coluna-preco sup { font-size: .55em; }
.coluna[data-plano="magico"] .coluna-preco { font-size: 25px; }
.vantagens { list-style: none; padding: 4px 16px; margin-top: -20px; display: grid; color: #fff; background: var(--roxo); border-radius: 0 0 16px 16px; }
.vantagens li { display: flex; gap: 12px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 15.5px; line-height: 1.35; }
.vantagens li:last-child { border-bottom: 0; }
.vantagens li::before { content: '✓'; color: var(--amarelo); font-weight: 900; flex-shrink: 0; }
.vantagens li.bv::before, .vantagens li.bv-promo::before { content: none; }
.vantagens li.bv { align-items: center; gap: 12px; padding: 11px 2px; }
.bv-icone { font-size: 26px; flex-shrink: 0; transition: opacity .3s, filter .3s; }
.bv-txt { flex: 1; min-width: 0; transition: opacity .3s, filter .3s; }
.bv-txt b { display: block; font-size: 15px; line-height: 1.25; }
.bv-txt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.82); }
.bv-tag { flex-shrink: 0; max-width: 92px; text-align: right; font-size: 11.5px; font-weight: 900; line-height: 1.25; color: var(--amarelo); }
.vantagens li.bv.trav .bv-icone, .vantagens li.bv.trav .bv-txt { opacity: .5; filter: grayscale(.6); }
.vantagens li.bv.trav .bv-tag { color: rgba(255,255,255,.75); font-weight: 800; }
.vantagens li.bv-promo { display: block; margin: 10px -4px 4px; padding: 12px 14px; border: 0; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 14px; line-height: 1.4; }
.vantagens li.bv-promo b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--amarelo); }
.garantia-faixa { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 16px; border-radius: 18px; background: #E9F8F1; border: 2px solid #BDE9D3; color: #155E40; }
.garantia-selo { font-size: 30px; }
.garantia-faixa b { font-size: 20px; font-weight: 1000; }
.garantia-faixa span:last-child { font-size: 15px; line-height: 1.35; max-width: 320px; }
.alerta { padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; background: #FFE8EE; border: 1px solid #FFB3C6; color: #A3123F; }

/* ---------- barra de baixo ---------- */
.barra { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255,247,238,0), rgba(255,247,238,.96) 30%); }
.barra-miolo { max-width: 520px; margin: 0 auto; display: flex; gap: 10px; }
.btn-voltar { flex: 0 0 30%; border-radius: 14px; padding: 16px 0; font-weight: 900; font-size: 15px; cursor: pointer; background: var(--cartao); color: var(--tinta); border: 2px solid var(--borda); }
.btn-ouro { flex: 1; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  padding: 16px 14px; border-radius: 14px; font-weight: 1000; font-size: 16px; line-height: 1.2; color: #fff;
  background: linear-gradient(180deg, #8F66FF, var(--roxo) 60%, var(--roxo-escuro)); box-shadow: 0 10px 24px rgba(124,77,255,.35); transition: transform .15s, opacity .2s; }
.btn-ouro:active { transform: translateY(1px) scale(.99); }
.btn-ouro.parado { opacity: .4; box-shadow: none; cursor: default; }
body.na-capa #voltar { visibility: hidden; }
.barra-miolo:has(#buy:not([hidden])) .btn-voltar { flex-basis: 26%; }

/* ---------- cupom do aviso de saída ---------- */
.faixa-cupom { max-width: 520px; margin: 0 auto 10px; padding: 10px 12px; border-radius: 12px; text-align: center; font-size: 13px; line-height: 1.4;
  background: #FFF4D1; border: 1px solid #FFD873; color: var(--tinta); }
.faixa-cupom b { color: var(--roxo-escuro); }
.faixa-cupom .tick { color: var(--verde); font-weight: 900; margin-right: 4px; }
body.tem-cupom main { padding-bottom: 190px; }
.saida { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(42,35,70,.55); backdrop-filter: blur(3px); }
.saida-card { position: relative; margin: auto; width: 100%; max-width: 420px; padding: 38px 22px 20px; text-align: center; border-radius: 22px; background: var(--cartao); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.saida-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; cursor: pointer; font-size: 28px; line-height: 1; padding: 6px; color: var(--tinta-2); }
.saida-olho { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 99px; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--rosa); }
.saida h3 { margin: 0 0 12px; font-weight: 1000; font-size: 26px; line-height: 1.15; text-wrap: balance; }
.saida h3 em { font-style: normal; color: var(--roxo); }
.saida h3 span { font-weight: 800; font-size: .75em; color: var(--tinta-2); }
.saida-txt { max-width: 330px; margin: 0 auto 18px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.saida-cupom { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px 16px; border: 2px dashed #CDBBFF; border-radius: 10px; background: var(--roxo-claro); }
.saida-cupom .lbl { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--tinta-2); }
.saida-cupom .code { font-size: 18px; font-weight: 1000; letter-spacing: .12em; }
.saida-cupom .off { font-size: 11px; font-weight: 900; color: #fff; background: var(--rosa); padding: 4px 8px; border-radius: 6px; }
.saida-nao { display: block; width: 100%; margin-top: 12px; padding: 6px; background: none; border: 0; cursor: pointer; font-size: 12.5px; text-decoration: underline; color: var(--tinta-2); }

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

/* 23/10: botão do aviso de saída ocupa a largura do cartão (estava encostado à esquerda) */
.saida-card .btn-ouro { width: 100%; }

/* 02/11: aviso de saída no visual de Black Friday — o mesmo do banner do checkout (preto, dourado, vermelho, laço preto). */
@font-face { font-family: 'Fraunces'; src: url(/_shared/font/fraunces.woff2) format('woff2'); font-weight: 500 900; font-display: swap; }
.saida { background: rgba(0,0,0,.72); }
.saida-card { overflow: hidden; padding: 0 22px 20px; color: #FFFCF4; background: linear-gradient(180deg, #161616, #0B0B0B); border: 1px solid rgba(232,186,94,.5);
  box-shadow: 0 0 0 5px rgba(232,186,94,.07), 0 24px 60px rgba(0,0,0,.6); }
.saida-x { z-index: 2; color: rgba(255,252,244,.6); }
.bf-laco { display: block; width: 190px; height: auto; margin: 0 auto -18px; aspect-ratio: 380 / 280;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.bf-marca { margin: 0 0 14px; line-height: .95; }
.bf-marca b { display: block; font-weight: 1000; font-size: 40px; letter-spacing: .02em; color: #fff; }
.bf-marca i { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 36px; color: #E8BA5E; }
.saida-olho { background: linear-gradient(180deg, #C62A33, #7A1018); }
.saida h3 { color: #FFFCF4; font-size: 23px; }
.saida h3 em { padding: 0 .22em; border-radius: 6px; color: #fff; background: linear-gradient(180deg, #C62A33, #7A1018); box-shadow: 0 0 0 1px rgba(232,186,94,.6);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.saida h3 span { display: inline-block; margin-top: 4px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; color: #E8BA5E; }
.saida-txt, .saida-nao, .saida-cupom .lbl { color: rgba(255,252,244,.72); }
.saida-cupom { border: 1.5px dashed #E8BA5E; background: rgba(232,186,94,.08); }
.saida-cupom .code { color: #F7E1A6; }
.saida-cupom .off { background: #B4232C; }
.saida-card .btn-ouro { color: #2B1B05; background: linear-gradient(180deg, #F7E1A6, #E8BA5E 55%, #C99540); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px rgba(232,186,94,.25); }