/* ==========================================================================
   Combos da Loja/Delivery (combos.js): secao "Combos" da pagina inicial, palco
   animado (previas do painel e compra) e faixa no alto da loja.
   Cores da marca: --g1/--g2/--g3 (bootstrap da marca ou do painel).
   ========================================================================== */
.cb-sec { position: relative; margin: 8px 0 4px; border-radius: var(--r-xl, 26px); overflow: hidden; isolation: isolate; box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--g2, #6366F1) 70%, #000); }
.cb-track { position: relative; display: grid; }
.cb-cell { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.cb-cell.on { opacity: 1; visibility: visible; }
/* Combo mais baixo que o maior (equalize em combos.js): o conteudo fica no meio da altura igual. */
.cb-slide.cb-eq > .cb-body { min-height: inherit; align-content: center; }
/*
 * Desempenho (celulares e computadores mais fracos): o combo de fora da vez e
 * a secao fora da tela ficam com as animacoes paradas (antes giravam e
 * flutuavam escondidos o tempo todo), e cada combo se desenha isolado.
 */
.cb-cell { contain: layout paint; }
.cb-cell:not(.on) *, .cb-sec.is-off * { animation-play-state: paused !important; }
/*
 * Aparelho fraco (combos.js marca .cb-lite): o vidro fosco (backdrop-filter)
 * por cima das fotos animadas vira um fundo translucido um pouco mais forte, e
 * o Holofote apaga as outras fotos sem desfoque (o desfoque redesenhava tudo a
 * cada quadro). O desenho continua o mesmo.
 */
.cb-lite :is(.cb-ph__q, .cb-ph__in.is-emoji, .cb-brand, .cb-head > span, .cb-arrow, .cb-sound, .cb-text) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cb-lite .cb-ph__in.is-emoji { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2) 70%); }
.cb-lite .cb-head > span { background: rgba(255, 255, 255, .22); }
.cb-lite .cb-brand { background: rgba(5, 8, 18, .5); }
.cb-lite .cb-arrow, .cb-lite .cb-sound:not([aria-pressed="true"]) { background: rgba(5, 8, 18, .48); }
.cb-lite :is(.ly-card, .ly-card-right):not(.bd-soft) .cb-text { background: rgba(255, 255, 255, .18); }
.cb-lite .cb-stage.spot .cb-ph { filter: grayscale(.4); }
.cb-lite .cb-stage.fr-none .cb-ph img { filter: none; }

.cb-slide { --cb-speed: 1; position: relative; overflow: hidden; color: #fff; min-height: clamp(420px, 52cqw, 560px); isolation: isolate; }
.cb-slide.is-mini { min-height: 0; aspect-ratio: 1 / 1; border-radius: var(--r-lg, 20px); }
.cb-bg { position: absolute; inset: 0; z-index: -3; background: linear-gradient(135deg, var(--g2, #4F46E5), var(--g1, #7C3AED) 55%, var(--g3, #EC4899)); }
.cb-slide.bd-dark .cb-bg { background: radial-gradient(120% 90% at 80% 20%, color-mix(in srgb, var(--g2, #6366F1) 55%, #0B1020), #070A14 70%); }
.cb-slide.bd-soft { color: var(--text, #0D1520); }
.cb-slide.bd-soft .cb-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #6366F1) 16%, var(--bg, #fff)), color-mix(in srgb, var(--g3, #EC4899) 18%, var(--bg, #fff))); }
.cb-slide.bd-photo .cb-bg { background: #0B1020; }
.cb-slide.bd-photo .cb-bg::before { content: ''; position: absolute; inset: -40px; background: var(--cb-photo) center / cover; filter: blur(28px) saturate(1.4); opacity: .75; transform: scale(1.1); }
.cb-fx { position: absolute; inset: 0; z-index: -2; }
.cb-fx .mk-fx-canvas { opacity: .9; }
.cb-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 80% at 72% 50%, transparent 30%, rgba(5, 8, 18, .38) 100%); }
.cb-slide.bd-soft .cb-shade { background: radial-gradient(90% 80% at 72% 50%, transparent 40%, rgba(255, 255, 255, .45) 100%); }

.cb-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(16px, 3cqw, 40px); padding: clamp(22px, 4cqw, 48px); min-height: inherit; }
.cb-slide.is-mini .cb-body { grid-template-columns: 1fr; padding: 0; height: 100%; }
.cb-text { order: -1; display: grid; gap: 12px; align-content: center; max-width: 560px; }
.cb-top, .cb-bot { display: grid; gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.cb-top > *, .cb-bot > * { max-width: 100%; }
.cb-photos { position: absolute; inset: 0; z-index: 1; }

/* Palco das fotos */
.cb-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; justify-self: center; cursor: pointer; }
.cb-slide.is-mini .cb-stage { max-width: none; height: 100%; cursor: default; }
.cb-ph { position: absolute; left: var(--x); top: var(--y); width: calc(62% * var(--s)); aspect-ratio: 1 / 1; margin: 0; transform: translate(-50%, -50%) rotate(var(--r)); z-index: calc(10 - var(--k)); }
.cb-ph__in, .cb-ph__fx { position: absolute; inset: 0; display: block; }
/* Camadas proprias para as fotos: entrar, flutuar e o efeito so movem a camada (sem redesenhar a foto e a mascara). */
.go .cb-ph, .go .cb-ph__in { will-change: transform; }
.cb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-ph__q { position: absolute; right: 6%; bottom: 6%; z-index: 2; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: rgba(5, 8, 18, .72); backdrop-filter: blur(6px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); }

/* Produto sem foto: emoji grande num disco de vidro, com o nome. */
.cb-ph__in.is-emoji { display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 70%); border: 1px solid rgba(255, 255, 255, .45); box-shadow: inset 0 0 30px rgba(255, 255, 255, .25), 0 24px 50px -24px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-mask-image: none !important; mask-image: none !important; }
.cb-emoji { font-size: calc(min(150px, 30cqw) * var(--s)); line-height: 1; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.cb-slide.is-mini .cb-emoji { font-size: calc(140px * var(--s)); }
.cb-emoji__n { position: absolute; bottom: 9%; left: 8%; right: 8%; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-slide.bd-soft .cb-ph__in.is-emoji { background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--g1, #6366F1) 12%, #fff)); border-color: color-mix(in srgb, var(--g1, #6366F1) 25%, transparent); }
.cb-slide.bd-soft .cb-emoji__n { text-shadow: none; }
.cb-chipcard__img i { position: absolute; top: 4px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 26px; background: rgba(255, 255, 255, .25); border: 2px solid #fff; left: calc(var(--k) * 12px); }

/* Mesclado: as bordas da foto somem no fundo (o mesmo efeito dos slides do quadro principal). */
.cb-stage.fr-blend .cb-ph__in { -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }
.cb-stage.fr-blend .cb-ph img { transform: scale(1.04); }
.cb-stage.fr-frame .cb-ph__in { border-radius: var(--r-lg, 20px); overflow: hidden; border: 4px solid rgba(255, 255, 255, .92); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .7); }
.cb-stage.fr-round .cb-ph__in { border-radius: 50%; overflow: hidden; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 6px color-mix(in srgb, var(--g1, #6366F1) 45%, transparent), 0 24px 50px -22px rgba(0, 0, 0, .7); }
/* Nenhum: so a foto, inteira e com o fundo transparente dela (PNG), sem moldura nem mascara. */
.cb-stage.fr-none .cb-ph__in { -webkit-mask-image: none; mask-image: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.cb-stage.fr-none .cb-ph img { object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }

/* Selo do preco no centro, com anel girando. */
.cb-burst { position: absolute; left: 50%; top: 50%; z-index: 20; width: clamp(96px, 26%, 150px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #F3F4F8); color: #0D1520; box-shadow: 0 20px 45px -16px rgba(0, 0, 0, .65), 0 0 0 6px rgba(255, 255, 255, .22); text-align: center; }
.cb-stage:not(.st-orbit) .cb-burst { left: 84%; top: 82%; width: clamp(88px, 24%, 132px); }
.cb-burst__ring { position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .85); }
.cb-burst__in { display: grid; line-height: 1.05; }
.cb-burst s { font-size: clamp(10px, 1.2cqw, 13px); color: #6B7280; font-weight: 700; }
.cb-burst b { font-size: clamp(17px, 2.4cqw, 27px); font-weight: 900; letter-spacing: -.04em; background: linear-gradient(120deg, var(--g2, #4F46E5), var(--g1, #7C3AED) 60%, var(--g3, #EC4899)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cb-tag { position: absolute; left: 4%; top: 6%; z-index: 21; transform: scale(0); }
.cb-tag .lj-tag { font-size: 14px; padding: 7px 13px; }
/* Selo do preco: tamanhos e formatos (o circulo e o padrao). */
.cb-burst.sz-sm { width: clamp(70px, 18%, 104px) !important; }
.cb-burst.sz-lg { width: clamp(120px, 34%, 190px) !important; }
.cb-burst.sz-sm b { font-size: clamp(13px, 1.8cqw, 20px); }
.cb-burst.sz-lg b { font-size: clamp(22px, 3.2cqw, 36px); }
.cb-burst.ps-pill, .cb-burst.ps-tag { aspect-ratio: auto; width: auto !important; min-width: 0; padding: 10px 20px; border-radius: 999px; }
.cb-burst.ps-pill .cb-burst__in, .cb-burst.ps-tag .cb-burst__in { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cb-burst.ps-tag { border-radius: 10px 999px 999px 10px; }
.cb-burst.ps-square { border-radius: 24%; }
.cb-burst.ps-square .cb-burst__ring { border-radius: 28%; }
.cb-burst.ps-pill .cb-burst__ring, .cb-burst.ps-tag .cb-burst__ring { display: none; }
/*
 * Cores do selo (design.seal_theme), como os estilos da etiqueta; 'custom'
 * usa --sb (fundo) e --si (preco). O mesmo no app (SEAL_THEMES no ComboKit.tsx)
 * e no video (combo-video.js).
 */
.cb-burst.pt-color { background: linear-gradient(135deg, var(--g2, #4F46E5), var(--g1, #7C3AED) 55%, var(--g3, #EC4899)); }
.cb-burst.pt-dark { background: radial-gradient(circle at 35% 30%, #1F2937, #0B0F19); }
.cb-burst.pt-gold { background: linear-gradient(135deg, #FDE68A, #E0A91B 55%, #B7791F); }
.cb-burst.pt-red { background: radial-gradient(circle at 35% 30%, #F87171, #DC2626 70%); }
.cb-burst.pt-yellow { background: radial-gradient(circle at 35% 30%, #FEF08A, #FACC15 70%); }
.cb-burst.pt-green { background: radial-gradient(circle at 35% 30%, #4ADE80, #16A34A 70%); }
.cb-burst.pt-glass { background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cb-burst.pt-outline { background: transparent; border: 3px solid #fff; box-shadow: 0 20px 45px -26px rgba(0, 0, 0, .6); }
.cb-burst.pt-neon { background: #0B1020; border: 2px solid var(--g1, #7C3AED); box-shadow: 0 0 18px color-mix(in srgb, var(--g1, #7C3AED) 75%, transparent), inset 0 0 14px color-mix(in srgb, var(--g1, #7C3AED) 45%, transparent); }
.cb-burst.pt-custom { background: var(--sb, #fff); }
/* Preco e "de" riscado em cada cor (o Classico continua com o preco em degrade). */
.cb-burst:is(.pt-color, .pt-dark, .pt-red, .pt-green, .pt-glass, .pt-outline, .pt-neon) b { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.cb-burst:is(.pt-color, .pt-dark, .pt-red, .pt-green, .pt-glass, .pt-outline, .pt-neon) s { color: rgba(255, 255, 255, .78); }
.cb-burst.pt-gold b { background: none; color: #3B2300; -webkit-text-fill-color: #3B2300; }
.cb-burst.pt-gold s { color: #6B4E16; }
.cb-burst.pt-yellow b { background: none; color: #111827; -webkit-text-fill-color: #111827; }
.cb-burst.pt-yellow s { color: #713F12; }
.cb-burst.pt-neon b { text-shadow: 0 0 10px var(--g1, #7C3AED); }
.cb-burst.pt-custom b { background: none; color: var(--si, #0D1520); -webkit-text-fill-color: var(--si, #0D1520); }
.cb-burst.pt-custom s { color: var(--si, #0D1520); opacity: .7; }
.cb-lite .cb-burst.pt-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .26); }
/* Fonte do preco (design.seal_font). */
.cb-burst.pf-bold b { font-weight: 700; }
.cb-burst.pf-semibold b { font-weight: 600; }
.cb-burst.pf-wide b { letter-spacing: .04em; }
.cb-burst.pf-wide s { letter-spacing: .06em; }

/* Logotipo e nome do estabelecimento (centro no ponto escolhido; padrao: alto e no meio). */
.cb-brand { position: absolute; left: 50%; top: 9%; z-index: 22; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(5, 8, 18, .38); color: #fff; backdrop-filter: blur(8px); white-space: nowrap; max-width: 92%; }
.cb-brand img { width: calc(var(--lg, 40px) * var(--bs, 1)); height: calc(var(--lg, 40px) * var(--bs, 1)); border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.cb-brand b { font-size: calc(var(--lg, 40px) * .36 * var(--bs, 1)); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.cb-brand:not(:has(b)) { padding: 4px; }
.cb-brand:not(:has(img)) { padding: 6px 14px; }
.cb-brand.sz-sm { --lg: 30px; }
.cb-brand.sz-md { --lg: 42px; }
.cb-brand.sz-lg { --lg: 60px; }
.cb-slide.bd-soft .cb-brand { background: rgba(255, 255, 255, .7); color: #0D1520; }
/* Arrastar no assistente. */
.cb-dragging .cb-burst { transform: translate(-50%, -50%); animation: none; }
.cb-dragging .cb-tag { transform: none; animation: none; }
.cb-dragging .cb-flash { display: none; }
/* Arrastando: tudo parado no quadro final (o selo e a etiqueta aparecem; sem Holofote nem efeito). */
.cb-dragging, .cb-dragging * { animation: none !important; transition: none !important; }
.cb-dragging .cb-ph, .cb-dragging .cb-ph.lit { opacity: 1 !important; filter: none !important; }
.cb-dragging .cb-burst, .cb-dragging .cb-tag { opacity: 1 !important; }
.cb-dragging [data-drag] { cursor: grab; outline: 2px dashed rgba(255, 255, 255, .7); outline-offset: 3px; }
.cb-dragging [data-drag].is-grab { cursor: grabbing; }
.cb-flash { position: absolute; inset: 0; z-index: 25; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 60%); opacity: 0; }

/* ---- Entradas (classe "go" reinicia a cada combo) ------------------------ */
.go .cb-ph { animation: cbIn calc(.9s * var(--cb-speed)) cubic-bezier(.2, 1.3, .4, 1) calc((.15s + var(--k) * .22s) * var(--cb-speed)) both; }
.go .cb-ph__in { animation: cbFloat calc(5.6s * var(--cb-speed)) ease-in-out calc((1.2s + var(--k) * .4s) * var(--cb-speed)) infinite; }
.go .cb-burst { animation: cbBurst calc(.8s * var(--cb-speed)) cubic-bezier(.2, 1.6, .4, 1) calc((.5s + var(--n) * .22s) * var(--cb-speed)) both; }
.go .cb-burst__ring { animation: cbSpin 14s linear infinite; }
.go .cb-tag { animation: cbBurst calc(.7s * var(--cb-speed)) cubic-bezier(.2, 1.6, .4, 1) calc((.75s + var(--n) * .22s) * var(--cb-speed)) both; }
.go .cb-flash { animation: cbFlash calc(1s * var(--cb-speed)) ease-out calc((.5s + var(--n) * .22s) * var(--cb-speed)) both; }
@keyframes cbIn { from { opacity: 0; transform: translate(calc(-50% + var(--from) * 70%), -40%) rotate(calc(var(--r) + var(--from) * 28deg)) scale(.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } }
@keyframes cbFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4%) rotate(1.5deg); } }
@keyframes cbBurst { from { transform: translate(-50%, -50%) scale(0) rotate(-25deg); } to { transform: translate(-50%, -50%) scale(1) rotate(0); } }
.go .cb-tag { animation-name: cbPop; }
@keyframes cbPop { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(0); } }
@keyframes cbSpin { to { transform: rotate(360deg); } }
@keyframes cbFlash { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* Cascata: caem do alto e quicam. */
.go .st-cascade .cb-ph { animation-name: cbDrop; animation-timing-function: cubic-bezier(.3, 1.55, .5, 1); }
@keyframes cbDrop { from { opacity: 0; transform: translate(-50%, -260%) rotate(calc(var(--r) * -3)); } 60% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); } }

/* Orbita: giram devagar em volta do preco. */
.cb-orbit { position: absolute; inset: 0; }
.st-orbit .cb-ph { left: calc(50% + cos(var(--a)) * 31%); top: calc(50% + sin(var(--a)) * 31%); width: calc(44% * min(1, 3.2 / var(--n) + .25)); --r: 0deg; }
.st-orbit[data-n="1"] .cb-ph { left: 50%; top: 50%; width: 62%; }
.go .st-orbit .cb-orbit { animation: cbSpin calc(38s * var(--cb-speed)) linear calc(1.4s * var(--cb-speed)) infinite; }
.go .st-orbit .cb-ph__in { animation: cbCounter calc(38s * var(--cb-speed)) linear calc(1.4s * var(--cb-speed)) infinite; }
@keyframes cbCounter { to { transform: rotate(-360deg); } }
.go .st-orbit .cb-ph { animation-name: cbZoomIn; }
@keyframes cbZoomIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.1); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Desfile: lado a lado, deslizando da direita. */
.st-parade .cb-ph { top: calc(46% + (var(--k) - (var(--n) - 1) / 2) * 0% ); left: calc(50% + (var(--k) - (var(--n) - 1) / 2) * min(22%, 76% / var(--n))); width: min(44%, calc(120% / var(--n))); --r: 0deg; }
.st-parade .cb-ph:nth-child(even) { top: 56%; }
.go .st-parade .cb-ph { animation-name: cbParade; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
@keyframes cbParade { from { opacity: 0; transform: translate(220%, -50%) skewX(-12deg); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Animacoes novas: a entrada (cb-ph) e o movimento depois de entrar (cb-ph__in). */
.go .st-zoom .cb-ph { animation-name: cbZoomBlur; animation-timing-function: cubic-bezier(.2, 1.2, .4, 1); }
@keyframes cbZoomBlur { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); filter: blur(12px); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); filter: none; } }
.go .st-spiral .cb-ph { animation-name: cbSpiral; animation-timing-function: cubic-bezier(.25, .9, .35, 1); animation-duration: calc(1.2s * var(--cb-speed)); }
@keyframes cbSpiral { from { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r) - 540deg)) scale(.1); } 60% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } }
.go .st-rise .cb-ph, .go .st-wave .cb-ph { animation-name: cbRise; animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
@keyframes cbRise { from { opacity: 0; transform: translate(-50%, 140%) rotate(var(--r)); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); } }
.go .st-flip .cb-ph { animation-name: cbFlipIn; animation-timing-function: cubic-bezier(.2, .8, .3, 1.1); animation-duration: calc(1s * var(--cb-speed)); }
@keyframes cbFlipIn { from { opacity: 0; transform: translate(-50%, -50%) perspective(700px) rotateY(-180deg) rotate(var(--r)); } 40% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) perspective(700px) rotateY(0) rotate(var(--r)); } }
.go .st-bounce .cb-ph { animation-name: cbBounceIn; animation-timing-function: ease-out; animation-duration: calc(1.3s * var(--cb-speed)); }
@keyframes cbBounceIn { 0% { opacity: 0; transform: translate(-50%, -320%) rotate(var(--r)); } 35% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.06, .9); } 52% { transform: translate(-50%, -85%) rotate(var(--r)); } 68% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.03, .95); } 82% { transform: translate(-50%, -62%) rotate(var(--r)); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); } }
.go .st-bounce .cb-ph__in { animation-name: cbHop; animation-duration: calc(1.6s * var(--cb-speed)); animation-timing-function: ease-in-out; }
@keyframes cbHop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-9%) scale(1); } 64% { transform: translateY(0) scale(1.05, .95); } }
.go .st-pop .cb-ph { animation-name: cbPopIn; animation-timing-function: ease-out; animation-duration: calc(.7s * var(--cb-speed)); }
@keyframes cbPopIn { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); filter: brightness(2.2); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.25); filter: brightness(1.6); } 80% { transform: translate(-50%, -50%) rotate(var(--r)) scale(.93); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); filter: none; } }
.st-swing .cb-ph__in { transform-origin: 50% 0; }
.go .st-swing .cb-ph { animation-name: cbSwingIn; animation-timing-function: ease-out; animation-duration: calc(1.2s * var(--cb-speed)); transform-origin: 50% 0; }
@keyframes cbSwingIn { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r) - 70deg)); } 30% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r) + 28deg)); } 55% { transform: translate(-50%, -50%) rotate(calc(var(--r) - 14deg)); } 78% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 6deg)); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); } }
.go .st-swing .cb-ph__in { animation-name: cbSwing; animation-duration: calc(3s * var(--cb-speed)); animation-timing-function: ease-in-out; }
@keyframes cbSwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.go .st-wave .cb-ph__in { animation-name: cbWavePh; animation-duration: calc(2.4s * var(--cb-speed)); animation-timing-function: ease-in-out; animation-delay: calc((1.1s + var(--k) * .3s) * var(--cb-speed)); }
@keyframes cbWavePh { 0%, 100% { transform: translateY(6%); } 50% { transform: translateY(-6%); } }
.go .st-pulse .cb-ph { animation-name: cbZoomBlur; }
.go .st-pulse .cb-ph__in { animation-name: cbBeat; animation-duration: calc(1.8s * var(--cb-speed)); animation-timing-function: ease-in-out; animation-delay: calc((1.1s + var(--k) * .45s) * var(--cb-speed)); }
@keyframes cbBeat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.09); } 20% { transform: scale(.98); } 30% { transform: scale(1.06); } }
.go .st-fan .cb-ph { animation-name: cbFan; animation-timing-function: cubic-bezier(.2, 1.1, .4, 1); animation-duration: calc(1s * var(--cb-speed)); }
@keyframes cbFan { from { opacity: 0; transform: translate(-50%, 10%) rotate(calc(var(--from) * -75deg)) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } }
.st-fan .cb-ph { transform-origin: 50% 130%; }

/* Holofote (efeito): um por vez no centro, depois todos juntos. */
.cb-stage.fx-spotlight .cb-ph { transition: left .7s cubic-bezier(.2, .9, .3, 1), top .7s cubic-bezier(.2, .9, .3, 1), width .7s cubic-bezier(.2, .9, .3, 1), opacity .5s, filter .5s; }
.cb-stage.spot .cb-ph { opacity: .18; filter: blur(3px) grayscale(.4); }
.cb-stage.spot .cb-ph.lit { opacity: 1; filter: none; left: 50%; top: 48%; width: 74%; z-index: 15; }
.cb-stage.spot .cb-burst, .cb-stage.spot .cb-tag { opacity: 0; }
/* Com efeito (Holofote e os outros): o selo e a etiqueta so entram depois dele (--fx-end = fxEnd em combos.js). */
.go .has-fx { --cb-spot-end: calc((var(--fx-end) + .4s) * var(--cb-speed)); }
.go .has-fx .cb-burst, .go .has-fx .cb-flash { animation-delay: var(--cb-spot-end); }
.go .has-fx .cb-tag { animation-delay: calc(var(--cb-spot-end) + .25s * var(--cb-speed)); }

/*
 * Efeitos das fotos (tocam uma vez, depois da entrada; a animacao continua).
 * Cada foto comeca em --fx0 + k x --fxs e dura --fxd (combos.js, tabela FX).
 * Os mesmos quadros-chave do app (ComboKit.tsx) e do video (combo-video.js).
 */
.go .has-fx:not(.fx-spotlight) .cb-ph__fx { animation-duration: calc(var(--fxd) * var(--cb-speed)); animation-delay: calc((var(--fx0) + var(--k) * var(--fxs)) * var(--cb-speed)); animation-timing-function: ease-in-out; animation-fill-mode: both; }
.go .fx-grow .cb-ph__fx { animation-name: cbFxGrow; }
@keyframes cbFxGrow { 0%, 100% { transform: none; } 40% { transform: scale(1.28); } 70% { transform: scale(.96); } }
.go .fx-jump .cb-ph__fx { animation-name: cbFxJump; }
@keyframes cbFxJump { 0%, 100% { transform: none; } 15% { transform: scale(1.1, .86); } 45% { transform: translateY(-35%) scale(.95, 1.08); } 75% { transform: scale(1.08, .9); } 88% { transform: translateY(-5%); } }
.go .fx-spin .cb-ph__fx { animation-name: cbFxSpin; }
@keyframes cbFxSpin { 0% { transform: none; } 50% { transform: rotate(200deg) scale(1.12); } 100% { transform: rotate(360deg); } }
.go .fx-shake .cb-ph__fx { animation-name: cbFxShake; }
@keyframes cbFxShake { 0%, 100% { transform: none; } 12% { transform: translateX(-6%) rotate(-4deg); } 25% { transform: translateX(6%) rotate(4deg); } 38% { transform: translateX(-5%) rotate(-3deg); } 50% { transform: translateX(5%) rotate(3deg); } 63% { transform: translateX(-3%); } 76% { transform: translateX(3%); } }
.go .fx-flip .cb-ph__fx { animation-name: cbFxFlip; }
@keyframes cbFxFlip { 0% { transform: perspective(700px); } 50% { transform: perspective(700px) rotateY(180deg) scale(1.1); } 100% { transform: perspective(700px) rotateY(360deg); } }
.go .fx-jelly .cb-ph__fx { animation-name: cbFxJelly; }
@keyframes cbFxJelly { 0%, 100% { transform: none; } 20% { transform: scale(1.25, .75); } 40% { transform: scale(.8, 1.2); } 60% { transform: scale(1.12, .88); } 80% { transform: scale(.95, 1.05); } }
.go .fx-tilt .cb-ph__fx { animation-name: cbFxTilt; }
@keyframes cbFxTilt { 0%, 100% { transform: none; } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } }
.go .fx-flash .cb-ph__fx { animation-name: cbFxGlowIn; }
@keyframes cbFxGlowIn { 0%, 100% { transform: none; } 35% { transform: scale(1.1); } }
.cb-ph__fx::after { content: none; }
.fx-flash .cb-ph__fx::after { content: ''; position: absolute; inset: -6%; z-index: 3; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35) 55%, transparent); opacity: 0; }
.go .fx-flash .cb-ph__fx::after { animation: cbFxFlash calc(var(--fxd) * var(--cb-speed)) ease-in-out calc((var(--fx0) + var(--k) * var(--fxs)) * var(--cb-speed)) both; }
@keyframes cbFxFlash { 0%, 100% { opacity: 0; } 35% { opacity: .8; } }
.go .fx-beat .cb-ph__fx { animation-name: cbFxBeat; }
@keyframes cbFxBeat { 0%, 30%, 70%, 100% { transform: none; } 15% { transform: scale(1.18); } 45% { transform: scale(1.14); } }
.go .fx-blink .cb-ph__fx { animation-name: cbFxBlink; }
@keyframes cbFxBlink { 0%, 40%, 80%, 100% { opacity: 1; } 20%, 60% { opacity: .15; } }
.go .fx-ola .cb-ph__fx { animation-name: cbFxOla; }
@keyframes cbFxOla { 0%, 100% { transform: none; } 40% { transform: translateY(-28%); } 70% { transform: translateY(3%); } }
.go .fx-snap .cb-ph__fx { animation-name: cbFxSnap; }
@keyframes cbFxSnap { 0%, 100% { transform: none; } 30% { transform: scale(.7); } 65% { transform: scale(1.22); } }

/* ---- Texto ---------------------------------------------------------------- */
.cb-head { margin: 0; font-size: clamp(13px, 1.4cqw, 15px); font-weight: 900; letter-spacing: .24em; text-transform: uppercase; display: inline-flex; flex-wrap: nowrap; gap: 0 .4em; white-space: nowrap; }
/* Uma linha so (como no computador e no video); se nao couber, combos.js diminui a letra (fitHeads). */
.cb-head > span { display: inline-flex; flex-wrap: nowrap; gap: 0 .45em; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); }
.cb-slide.bd-soft .cb-head > span { background: color-mix(in srgb, var(--g1, #6366F1) 14%, transparent); border-color: color-mix(in srgb, var(--g1, #6366F1) 30%, transparent); color: var(--accent-text, #4338CA); }
.cb-w { display: inline-flex; }
.cb-l { display: inline-block; }
.cb-name, .section .cb-name { margin: 0; font-size: clamp(30px, 4.6cqw, 56px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; text-shadow: 0 10px 30px rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.cb-slide.bd-soft .cb-name { text-shadow: none; }
.cb-desc { margin: 0; font-size: clamp(15px, 1.4cqw, 17px); line-height: 1.5; opacity: .9; max-width: 480px; white-space: pre-line; }
.cb-items { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cb-items li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.cb-items li b { color: #FDE68A; }
.cb-slide.bd-soft .cb-items li { background: var(--surface, #fff); border-color: var(--line, #E5E7EB); }
.cb-slide.bd-soft .cb-items li b { color: var(--accent-text, #4338CA); }
.cb-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.cb-price s { font-size: 16px; opacity: .7; font-weight: 600; }
.cb-price b { font-size: clamp(32px, 4cqw, 46px); font-weight: 900; letter-spacing: -.04em; }
.cb-off { font-size: 13px; font-weight: 900; padding: 4px 9px; border-radius: 8px; background: #FDE68A; color: #7C2D12; align-self: center; }
.cb-cta { justify-self: start; min-height: 50px; padding: 0 22px; font-size: 16px; }
.cb-slide:not(.bd-soft) .cb-cta.btn.primary { background: #fff; color: #0D1520; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .55); }

.go .cb-name, .go .cb-desc, .go .cb-price, .go .cb-cta { animation: cbUp calc(.7s * var(--cb-speed)) cubic-bezier(.2, .8, .2, 1) both; }
.go .cb-name { animation-delay: calc(.35s * var(--cb-speed)); }
.go .cb-desc { animation-delay: calc(.5s * var(--cb-speed)); }
.go .cb-items li { animation: cbUp calc(.55s * var(--cb-speed)) cubic-bezier(.2, .8, .2, 1) calc((.6s + var(--k) * .12s) * var(--cb-speed)) both; }
.go .cb-price { animation-delay: calc(.75s * var(--cb-speed)); }
.go .cb-cta { animation-delay: calc(.9s * var(--cb-speed)); }
@keyframes cbUp { from { opacity: 0; transform: translateY(22px); } }

/* Animacao do titulo principal (as mesmas da Vitrine animada). */
.go .ha-rise > span { animation: cbUp .7s cubic-bezier(.2, .8, .2, 1) both; }
.go .ha-zoom > span { animation: cbZoomT .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.go .ha-focus > span { animation: cbFocus .9s ease both; }
.go .ha-slide > span { animation: cbSlideT .7s cubic-bezier(.2, .8, .2, 1) both; }
.go .ha-stretch > span { animation: cbStretch 1s cubic-bezier(.2, .8, .2, 1) both; }
.go .ha-glow > span { animation: cbGlow 2.2s ease-in-out infinite; }
.go .ha-type .cb-l { animation: cbType .01s steps(1) both; animation-delay: calc(var(--l) * 70ms + .2s); }
.go .ha-wave .cb-l { animation: cbWave 1.6s ease-in-out infinite; animation-delay: calc(var(--l) * 70ms); }
.go .ha-drop .cb-l { animation: cbDropL .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--l) * 45ms); }
.go .ha-flip .cb-l { animation: cbFlipL .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--l) * 45ms); }
@keyframes cbZoomT { from { opacity: 0; transform: scale(.4); } }
@keyframes cbFocus { from { opacity: 0; filter: blur(12px); letter-spacing: .6em; } }
@keyframes cbSlideT { from { opacity: 0; transform: translateX(-40px); } }
@keyframes cbStretch { from { opacity: 0; letter-spacing: 1em; } }
@keyframes cbGlow { 50% { box-shadow: 0 0 22px rgba(255, 255, 255, .55), inset 0 0 12px rgba(255, 255, 255, .25); text-shadow: 0 0 12px #fff; } }
@keyframes cbType { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbWave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes cbDropL { from { opacity: 0; transform: translateY(-120%); } }
@keyframes cbFlipL { from { opacity: 0; transform: perspective(300px) rotateX(90deg); } }

/* ---- Controles ------------------------------------------------------------ */
.cb-ui { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.cb-ui > * { pointer-events: auto; }
.cb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(5, 8, 18, .32); color: #fff; display: grid; place-items: center; font-size: 21px; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, transform .2s; }
.cb-arrow:hover { background: rgba(5, 8, 18, .55); transform: translateY(-50%) scale(1.06); }
/* Setas bem no canto (anterior a esquerda, proximo a direita). */
.cb-arrow.prev { left: 4px; }
.cb-arrow.next { right: 4px; }
/* Com setas, o texto e o palco ficam fora do caminho delas. */
.cb-sec:has(.cb-arrow) .cb-body { padding-left: clamp(64px, 6cqw, 84px); padding-right: clamp(64px, 6cqw, 84px); }
.cb-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 7px; }
.cb-dot { width: 9px; height: 9px; border-radius: 5px; border: 0; padding: 0; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .3s, background .3s; }
.cb-dot.on { width: 26px; background: #fff; }
.cb-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .18); }
.cb-progress i { display: block; height: 100%; width: 0; background: #fff; }
.cb-sound { position: absolute; right: 14px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(5, 8, 18, .35); color: #fff; font-size: 19px; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.cb-sound[aria-pressed="true"] { background: #fff; color: #0D1520; }

/* Logotipo no fundo, atras das fotos (centro no ponto escolhido). */
.cb-logobg { position: absolute; left: 50%; top: 50%; z-index: 0; width: 64%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.cb-logobg.sz-sm { width: 44%; }
.cb-logobg.sz-lg { width: 92%; }
.cb-logobg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-logobg.lb-blend img { opacity: .55; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
.cb-logobg.lb-frame img { border-radius: 22%; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .65); opacity: .9; }
.cb-logobg.lb-round img { border-radius: 50%; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 10px color-mix(in srgb, var(--g1, #6366F1) 35%, transparent), 0 24px 60px -24px rgba(0, 0, 0, .65); opacity: .9; }
.go .cb-logobg { animation: cbLogoIn calc(1.1s * var(--cb-speed)) ease both; }
@keyframes cbLogoIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }

/* Largura do proprio combo (pagina, previa do painel ou janela): celular. */
.cb-cell, .cb-prevbox { container-type: inline-size; }
@container (max-width: 760px) {
  .cb-slide { min-height: 0; }
  .cb-body, .cb-sec:has(.cb-arrow) .cb-body { grid-template-columns: 1fr; padding: 18px 18px 52px; gap: 6px; }
  .cb-text { order: 0; gap: 9px; }
  .cb-stage { max-width: 380px; }
  .cb-cta { justify-self: stretch; }
}
@media (max-width: 760px) {
  /* Setas embaixo, ao lado dos pontos; o som no alto (nada cobre as fotos). */
  .cb-arrow { top: auto; bottom: 6px; transform: none; width: 36px; height: 36px; font-size: 17px; }
  .cb-arrow:hover { transform: scale(1.06); }
  .cb-arrow.prev { left: 4px; }
  .cb-arrow.next { right: 4px; }
  .cb-dots { bottom: 19px; }
  .cb-sound { top: 12px; bottom: auto; right: 12px; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .go .cb-ph, .go .cb-ph__in, .go .cb-ph__fx, .go .cb-ph__fx::after, .go .cb-burst, .go .cb-tag, .go .cb-orbit, .go .st-orbit .cb-ph__in, .go .cb-items li, .go .cb-name, .go .cb-desc, .go .cb-price, .go .cb-cta, .go .cb-head > span, .go .cb-l, .go .cb-flash { animation: none !important; }
  .cb-burst { transform: translate(-50%, -50%); }
  .cb-tag { transform: none; }
}

/* ---- Faixa no alto da loja ------------------------------------------------ */
.cb-strip { margin: 0 0 16px; }
.cb-strip__t { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 16px; }
.cb-strip__row { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; }
.cb-chipcard { flex: none; display: flex; align-items: center; gap: 12px; width: min(320px, 80vw); padding: 10px 14px 10px 10px; border-radius: var(--r-lg, 18px); border: 0; cursor: pointer; text-align: left; font: inherit; color: #fff; background: linear-gradient(120deg, var(--g2, #4F46E5), var(--g1, #7C3AED) 60%, var(--g3, #EC4899)); box-shadow: 0 14px 30px -18px var(--g2, #4F46E5); transition: transform .2s; }
.cb-chipcard:hover { transform: translateY(-2px); }
.cb-chipcard__img { position: relative; flex: none; width: 74px; height: 64px; }
.cb-chipcard__img img { position: absolute; top: 4px; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; left: calc(var(--k) * 12px); transform: rotate(calc(var(--k) * 8deg - 8deg)); }
.cb-chipcard__t { display: grid; gap: 1px; min-width: 0; }
.cb-chipcard__t small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cb-chipcard__t b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-chipcard__t s { opacity: .7; font-size: 12.5px; }
.cb-chipcard__t em { font-style: normal; font-weight: 900; font-size: 16px; }

/* ---- Compra do combo ------------------------------------------------------ */
.cb-prod__stage .cb-slide { border-radius: var(--r-lg, 20px); }
.cb-save { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--success, #15803D); font-weight: 600; font-size: 14px; }
.cb-list { display: grid; gap: 6px; }
.cb-list__row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cb-list__row:last-child { border-bottom: 0; }
.cb-list__n { flex: 1; min-width: 0; font-size: 14.5px; }
.cb-list__p { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ==========================================================================
   Leiautes (design.layout -> .ly-*): onde ficam o texto e as fotos.
   Computador (largura do combo acima de 760 px) e celular/app (ate 760 px).
   O aplicativo repete o mesmo no ComboKit.tsx (LAYOUTS).
   ========================================================================== */
/* Alinhamento do texto usado por varios leiautes. */
.cb-slide :is(.cb-top, .cb-bot) .cb-items { justify-content: inherit; }
@container (min-width: 761px) {
  .ly-mirror .cb-body, .ly-card-right .cb-body { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .ly-mirror .cb-text, .ly-card-right .cb-text { order: 1; }
  .ly-center .cb-body, .ly-poster .cb-body { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ly-center .cb-text { order: 1; justify-items: center; max-width: 720px; }
  .ly-center .cb-stage { max-width: 380px; }
  .ly-center :is(.cb-top, .cb-bot), .ly-poster :is(.cb-top, .cb-bot), .ly-textfirst .cb-top { justify-items: center; text-align: center; }
  .ly-center .cb-items, .ly-poster .cb-items, .ly-center .cb-price, .ly-poster .cb-price { justify-content: center; }
  .ly-center .cb-desc, .ly-poster .cb-desc, .ly-textfirst .cb-desc { margin-inline: auto; }
  /* Titulo primeiro: texto, fotos e o preco numa linha embaixo. */
  .ly-textfirst .cb-body, .ly-poster .cb-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "ph" "bot"; justify-items: center; }
  .ly-textfirst .cb-text, .ly-poster .cb-text, .ly-magazine .cb-text, .ly-banner .cb-text { display: contents; }
  .ly-textfirst .cb-top, .ly-poster .cb-top, .ly-magazine .cb-top, .ly-banner .cb-top { grid-area: top; }
  .ly-textfirst .cb-bot, .ly-poster .cb-bot, .ly-magazine .cb-bot, .ly-banner .cb-bot { grid-area: bot; }
  .ly-textfirst .cb-stage, .ly-poster .cb-stage, .ly-magazine .cb-stage, .ly-banner .cb-stage { grid-area: ph; }
  .ly-textfirst .cb-stage { max-width: 400px; }
  .ly-textfirst .cb-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }
  .ly-poster .cb-stage { max-width: 340px; }
  /* Sobreposto: o texto por cima das fotos, com uma sombra atras. */
  .ly-overlay .cb-body, .ly-overlay-left .cb-body, .ly-corner .cb-body { grid-template-columns: minmax(0, 1fr); }
  .ly-overlay .cb-stage, .ly-overlay .cb-text, .ly-overlay-left .cb-stage, .ly-overlay-left .cb-text, .ly-corner .cb-stage, .ly-corner .cb-text { grid-area: 1 / 1; }
  .ly-overlay .cb-stage { max-width: 640px; opacity: .92; }
  .ly-overlay .cb-text { z-index: 2; justify-self: center; justify-items: center; text-align: center; max-width: 620px; padding: 34px 40px; border-radius: 32px; background: radial-gradient(closest-side, rgba(5, 8, 18, .62), rgba(5, 8, 18, .25) 70%, transparent); }
  .ly-overlay :is(.cb-top, .cb-bot) { justify-items: center; }
  .ly-overlay .cb-items, .ly-overlay .cb-price { justify-content: center; }
  .ly-overlay-left .cb-stage { justify-self: end; width: 64%; max-width: 680px; }
  .ly-overlay-left .cb-text { z-index: 2; justify-self: start; }
  .ly-overlay-left .cb-shade { background: linear-gradient(90deg, rgba(5, 8, 18, .78), rgba(5, 8, 18, .4) 45%, transparent 72%); }
  /* Cartao de vidro. */
  .ly-card .cb-text, .ly-card-right .cb-text { padding: clamp(22px, 2.6cqw, 34px); border-radius: 26px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
  .bd-soft.ly-card .cb-text, .bd-soft.ly-card-right .cb-text { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .9); }
  /* Dividido: o texto num painel claro de cima a baixo. */
  .ly-split .cb-body { padding: 0; gap: 0; align-items: stretch; }
  .ly-split .cb-text { align-self: stretch; align-content: center; max-width: none; padding: clamp(26px, 4cqw, 52px); background: var(--surface, #fff); color: var(--text, #0D1520); }
  .ly-split .cb-stage { align-self: center; margin: clamp(22px, 3cqw, 44px); width: calc(100% - 2 * clamp(22px, 3cqw, 44px)); }
  /* Fotos em destaque: fotos grandes e o texto numa faixa embaixo. */
  .ly-hero .cb-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ly-hero .cb-stage { max-width: 600px; }
  .ly-hero .cb-text { order: 1; max-width: none; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
  .ly-hero .cb-top { gap: 6px; flex: 1 1 320px; }
  .ly-hero .cb-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ly-hero .cb-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .ly-hero .cb-items { display: none; }
  /* Faixa: compacto, fotos | texto | preco e botao. */
  .cb-slide.ly-banner { min-height: 0; }
  .ly-banner .cb-body { grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) auto; grid-template-areas: "ph top bot"; padding: clamp(16px, 2.2cqw, 26px) clamp(20px, 3cqw, 36px); }
  .ly-banner .cb-name { font-size: clamp(24px, 2.8cqw, 36px); }
  .ly-banner .cb-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ly-banner .cb-bot { justify-items: end; text-align: right; }
  .ly-banner .cb-items { display: none; }
  /* Revista: o nome bem grande atravessando o alto. */
  .ly-magazine .cb-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "ph bot"; align-items: center; }
  .ly-magazine .cb-name { font-size: clamp(44px, 6.6cqw, 96px); line-height: .95; }
  .ly-magazine .cb-top { gap: 10px; }
  .ly-magazine .cb-stage { max-width: 440px; }
  /* Canto: texto no alto a esquerda e as fotos grandes saindo pelo canto. */
  .ly-corner .cb-text { z-index: 2; justify-self: start; align-self: start; max-width: 48%; }
  .ly-corner .cb-stage { justify-self: end; align-self: end; width: 60%; max-width: 640px; margin: 0 -5% -9% 0; }
  /* Diagonal: o texto sobre um corte inclinado. */
  .ly-diagonal .cb-shade { background: linear-gradient(105deg, rgba(5, 8, 18, .58) 0 47%, transparent 47.2%); }
  .bd-soft.ly-diagonal .cb-shade { background: linear-gradient(105deg, rgba(255, 255, 255, .68) 0 47%, transparent 47.2%); }
  /* Minimalista: fotos grandes e o texto leve embaixo, ao lado. */
  .ly-minimal .cb-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .ly-minimal .cb-text { order: 1; align-self: end; }
  .ly-minimal .cb-stage { max-width: 600px; }
}
@container (max-width: 760px) {
  .ly-mirror :is(.cb-top, .cb-bot), .ly-card-right :is(.cb-top, .cb-bot) { justify-items: end; text-align: right; }
  .ly-mirror .cb-items, .ly-mirror .cb-price, .ly-card-right .cb-items, .ly-card-right .cb-price { justify-content: flex-end; }
  .ly-mirror .cb-cta, .ly-card-right .cb-cta { justify-self: stretch; }
  .ly-center :is(.cb-top, .cb-bot), .ly-poster :is(.cb-top, .cb-bot), .ly-overlay :is(.cb-top, .cb-bot), .ly-hero :is(.cb-top, .cb-bot), .ly-minimal :is(.cb-top, .cb-bot) { justify-items: center; text-align: center; }
  .ly-center .cb-items, .ly-poster .cb-items, .ly-overlay .cb-items, .ly-hero .cb-items, .ly-minimal .cb-items, .ly-center .cb-price, .ly-poster .cb-price, .ly-overlay .cb-price, .ly-hero .cb-price, .ly-minimal .cb-price { justify-content: center; }
  /* Texto antes das fotos. */
  .ly-textfirst .cb-text, .ly-poster .cb-text, .ly-magazine .cb-text, .ly-corner .cb-text { display: contents; }
  .ly-textfirst .cb-body, .ly-poster .cb-body, .ly-magazine .cb-body, .ly-corner .cb-body { grid-template-areas: "top" "ph" "bot"; }
  .ly-textfirst .cb-top, .ly-poster .cb-top, .ly-magazine .cb-top, .ly-corner .cb-top { grid-area: top; }
  .ly-textfirst .cb-stage, .ly-poster .cb-stage, .ly-magazine .cb-stage, .ly-corner .cb-stage { grid-area: ph; }
  .ly-textfirst .cb-bot, .ly-poster .cb-bot, .ly-magazine .cb-bot, .ly-corner .cb-bot { grid-area: bot; }
  .ly-poster .cb-stage { max-width: 300px; }
  .ly-magazine .cb-name { font-size: clamp(40px, 12cqw, 60px); line-height: .96; }
  .ly-corner .cb-stage { justify-self: end; width: 90%; margin-right: -4%; }
  /* Sobreposto e cinema: as fotos atras e o texto por cima. */
  .ly-overlay .cb-body, .ly-overlay-left .cb-body { grid-template-areas: "a"; }
  .ly-overlay .cb-stage, .ly-overlay .cb-text, .ly-overlay-left .cb-stage, .ly-overlay-left .cb-text { grid-area: a; }
  .ly-overlay .cb-stage { max-width: none; opacity: .88; }
  .ly-overlay .cb-stage { align-self: start; }
  .ly-overlay .cb-text { z-index: 2; align-self: end; margin-top: 58%; padding: 22px 14px 4px; border-radius: 26px; background: radial-gradient(120% 90% at 50% 60%, rgba(5, 8, 18, .62), rgba(5, 8, 18, .25) 70%, transparent); }
  .ly-overlay-left .cb-stage { align-self: start; max-width: none; }
  .ly-overlay-left .cb-text { z-index: 2; align-self: end; margin-top: 68%; }
  .ly-overlay-left .cb-shade { background: linear-gradient(180deg, transparent 25%, rgba(5, 8, 18, .55) 55%, rgba(5, 8, 18, .85)); }
  /* Cartao de vidro. */
  .ly-card .cb-text, .ly-card-right .cb-text { padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .bd-soft.ly-card .cb-text, .bd-soft.ly-card-right .cb-text { background: rgba(255, 255, 255, .72); }
  /* Dividido: fotos no fundo da marca e o texto num painel claro. */
  .ly-split .cb-body { padding: 18px 0 0; gap: 14px; }
  .ly-split .cb-stage { width: calc(100% - 36px); }
  .ly-split .cb-text { padding: 20px 18px 56px; background: var(--surface, #fff); color: var(--text, #0D1520); border-radius: 24px 24px 0 0; }
  /* Fotos em destaque: fotos maiores e o texto curto. */
  .ly-hero .cb-stage { max-width: none; }
  .ly-hero .cb-items { display: none; }
  .ly-hero .cb-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Faixa: fotos pequenas ao lado do texto. */
  .ly-banner .cb-text { display: contents; }
  .ly-banner .cb-body { grid-template-columns: 44% minmax(0, 1fr); grid-template-areas: "ph top" "bot bot"; align-items: center; column-gap: 12px; }
  .ly-banner .cb-stage { grid-area: ph; }
  .ly-banner .cb-top { grid-area: top; gap: 6px; }
  .ly-banner .cb-bot { grid-area: bot; }
  .ly-banner .cb-name { font-size: 24px; }
  .ly-banner .cb-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  /* Diagonal: o corte inclinado embaixo, atras do texto. */
  .ly-diagonal .cb-shade { background: linear-gradient(170deg, transparent 0 44%, rgba(5, 8, 18, .55) 44.2%); }
  .bd-soft.ly-diagonal .cb-shade { background: linear-gradient(170deg, transparent 0 44%, rgba(255, 255, 255, .7) 44.2%); }
  .ly-minimal .cb-stage { max-width: none; }
}
/* Dividido: textos escuros no painel claro (os dois aparelhos). */
.ly-split .cb-text .cb-head > span { background: color-mix(in srgb, var(--g1, #6366F1) 14%, transparent); border-color: color-mix(in srgb, var(--g1, #6366F1) 30%, transparent); color: var(--accent-text, #4338CA); }
.ly-split .cb-text .cb-name { text-shadow: none; }
.ly-split .cb-text .cb-items li { background: var(--soft, #F3F4F8); border-color: var(--line, #E5E7EB); }
.ly-split .cb-text .cb-items li b { color: var(--accent-text, #4338CA); }
.cb-slide.ly-split .cb-text .cb-cta.btn.primary { background: linear-gradient(120deg, var(--g2, #4F46E5), var(--g1, #7C3AED)); color: #fff; }
/* Minimalista: sem pilulas nem cartoes, so o texto. */
.ly-minimal .cb-head > span { background: none; border: 0; padding: 0; backdrop-filter: none; }
.ly-minimal .cb-items { gap: 4px 12px; }
.ly-minimal .cb-items li { background: none; border: 0; padding: 0; font-weight: 600; opacity: .9; }
.cb-slide.ly-minimal:not(.bd-soft) .cb-cta.btn.primary { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: none; }

/* ==========================================================================
   Posicoes livres (arrastadas na previa do assistente): cada peca vai para
   [x, y] em % do combo, com a largura escolhida. Computador: .free-d (quadro
   2:1); celular/app: .free-m (quadro 1:2). Selo e logotipo: pelo centro.
   ========================================================================== */
@container (min-width: 761px) {
  .cb-slide.free-d:not(.is-mini) { aspect-ratio: 1 / var(--hd, .5); min-height: 0; }
  .free-d:not(.is-mini) .cb-body { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
  .free-d:not(.is-mini) :is(.cb-stage, .cb-text, .cb-top, .cb-bot) { display: contents; }
  .free-d:not(.is-mini) [data-el] { position: absolute !important; left: var(--x-d, 4%) !important; top: var(--y-d, 4%) !important; margin: 0 !important; z-index: 3; }
  .free-d:not(.is-mini) [data-el]:is(.cb-name, .cb-desc, .cb-items, .cb-price) { width: var(--w-d, auto); max-width: none; }
  .free-d:not(.is-mini) .cb-head[data-el] { width: max-content; max-width: none; }
  .free-d:not(.is-mini) .cb-photos { width: var(--w-d, 40%); height: auto; aspect-ratio: 1; inset: auto; z-index: 2; }
  .free-d:not(.is-mini) .cb-logobg { width: var(--w-d, 34%); z-index: 1; }
  .free-d:not(.is-mini) :is(.cb-burst, .cb-brand) { z-index: 6; }
  .free-d:not(.is-mini) .cb-burst:not(.ps-pill):not(.ps-tag) { width: var(--w-d, 11cqw) !important; }
  /* Tamanho (controles da previa): textos, botao e etiqueta crescem pelo canto de cima; o logotipo e nome pelo --bs. Oculto: some (na previa, fica apagado para poder mostrar de novo). */
  .free-d:not(.is-mini) [data-el]:is(.cb-head, .cb-name, .cb-desc, .cb-items, .cb-price, .cb-cta, .cb-tag) { scale: var(--s-d, 1); transform-origin: 0 0; }
  .free-d:not(.is-mini) .cb-brand { --bs: var(--s-d, 1); }
  .free-d:not(.is-mini) [data-hide-d] { visibility: hidden; }
  .pc-prevbox .free-d:not(.is-mini) [data-hide-d] { visibility: visible; opacity: .3; }
}
@container (max-width: 760px) {
  .cb-slide.free-m:not(.is-mini) { aspect-ratio: 1 / var(--hm, 2); min-height: 0; }
  .free-m:not(.is-mini) .cb-body { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
  .free-m:not(.is-mini) :is(.cb-stage, .cb-text, .cb-top, .cb-bot) { display: contents; }
  .free-m:not(.is-mini) [data-el] { position: absolute !important; left: var(--x-m, 4%) !important; top: var(--y-m, 4%) !important; margin: 0 !important; z-index: 3; }
  .free-m:not(.is-mini) [data-el]:is(.cb-name, .cb-desc, .cb-items, .cb-price) { width: var(--w-m, auto); max-width: none; }
  .free-m:not(.is-mini) .cb-head[data-el] { width: max-content; max-width: none; }
  .free-m:not(.is-mini) .cb-photos { width: var(--w-m, 80%); height: auto; aspect-ratio: 1; inset: auto; z-index: 2; }
  .free-m:not(.is-mini) .cb-logobg { width: var(--w-m, 60%); z-index: 1; }
  .free-m:not(.is-mini) :is(.cb-burst, .cb-brand) { z-index: 6; }
  .free-m:not(.is-mini) .cb-burst:not(.ps-pill):not(.ps-tag) { width: var(--w-m, 24cqw) !important; }
  .free-m:not(.is-mini) [data-el]:is(.cb-head, .cb-name, .cb-desc, .cb-items, .cb-price, .cb-cta, .cb-tag) { scale: var(--s-m, 1); transform-origin: 0 0; }
  .free-m:not(.is-mini) .cb-brand { --bs: var(--s-m, 1); }
  .free-m:not(.is-mini) [data-hide-m] { visibility: hidden; }
  .pc-prevbox .free-m:not(.is-mini) [data-hide-m] { visibility: visible; opacity: .3; }
  /* O botao nunca fica mais estreito que o texto dele (a largura salva vem do app, com outra fonte). */
  .free-m:not(.is-mini) .cb-cta { width: var(--w-m, auto); min-width: max-content; white-space: nowrap; }
}
/* Logotipo e nome nas posicoes livres: sempre a largura do nome inteiro (antes, arrastado para a direita, so cabia o que sobrava ate a borda e o nome virava "Ponto do ..."). */
@container (min-width: 761px) { .cb-slide.free-d:not(.is-mini) .cb-brand { width: max-content; max-width: none; } .cb-slide.free-d:not(.is-mini) .cb-brand b { overflow: visible; text-overflow: clip; } }
@container (max-width: 760px) { .cb-slide.free-m:not(.is-mini) .cb-brand { width: max-content; max-width: none; } .cb-slide.free-m:not(.is-mini) .cb-brand b { overflow: visible; text-overflow: clip; } }
/* Selo e logotipo: o ponto salvo e o centro (como no palco). */
.cb-slide:is(.free-d, .free-m):not(.is-mini) .cb-tag { transform-origin: 0 0; }

/* Selo do preco numa linha; palcos menores (centralizado, cartaz, titulo primeiro, faixa) com o selo menor. */
.cb-burst b { white-space: nowrap; }
:is(.ly-center, .ly-poster, .ly-textfirst) .cb-burst b { font-size: clamp(14px, 1.8cqw, 22px); }
.ly-banner .cb-burst b { font-size: 14px; }
.ly-banner .cb-burst s { font-size: 9px; }
.ly-banner .cb-brand b { display: none; }
.ly-banner .cb-brand { padding: 3px; }
.ly-banner .cb-tag .lj-tag { font-size: 11px; padding: 4px 8px; }
.ly-banner .cb-burst:not(.ps-pill):not(.ps-tag) { width: clamp(56px, 30%, 86px) !important; }