/* ========================================================= Editor IA — folha de estilo Base: tokens · tipografia · componentes · uma seção por bloco ========================================================= */ :root { color-scheme: dark; --preto: #000; --sup-1: #0d0d0f; --sup-2: #161617; --sup-3: #1d1d1f; --claro: #f5f5f7; --tinta: #1d1d1f; --ac: #ff6a1f; --ac-h: #ff7d3a; --ac-tinta: #000; --verde: #30d158; --vermelho: #ff453a; --fundo: var(--preto); --tx: #f5f5f7; --tx-2: #a1a1a6; --tx-3: #6e6e73; --tx-nota: #86868b; --ac-tx: var(--ac); --sup: var(--sup-2); --sup-alta: var(--sup-3); --borda: rgba(255, 255, 255, .08); --borda-2: rgba(255, 255, 255, .18); --vela: rgba(255, 255, 255, .08); --foco: #f5f5f7; --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .4); --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 28px 70px rgba(0, 0, 0, .55); --vidro: rgba(22, 22, 23, .8); --vidro-filtro: saturate(180%) blur(20px); --vidro-fio: rgba(255, 255, 255, .1); --r-ctrl: 12px; --r-cartao: 20px; --r-quadro: 28px; --r-quadro-g: 32px; --r-pilula: 980px; --e-mola: cubic-bezier(.32, .72, 0, 1); --e-ctrl: cubic-bezier(.25, .1, .25, 1); --e-toque: ease-out; --d-toque: .1s; --d-ctrl: .24s; --d-entra: .6s; --d-entra-curta: .45s; --rv-passo: 70ms; --rv-sobe: 20px; --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; --fw-hero: 700; --fw-1: 700; --fs-hero: 2.5rem; --tr-hero: -.025em; --lh-hero: 1.07; --fs-1: 2rem; --tr-1: -.022em; --lh-1: 1.1; --fs-2: 1.625rem; --tr-2: -.02em; --lh-2: 1.12; --fs-3: 1.3125rem; --tr-3: -.016em; --lh-3: 1.2; --fs-apoio: 1.1875rem; --tr-apoio: -.012em; --lh-apoio: 1.4; --fs-corpo: 1.0625rem; --tr-corpo: -.01em; --lh-corpo: 1.47; --fs-nota: .875rem; --tr-nota: -.005em; --lh-nota: 1.43; --fs-leg: .75rem; --tr-leg: .06em; --lh-leg: 1.33; --cx-max: 1080px; --cx-est: 680px; --gut: 22px; --sec-y: 60px; --cab-h: 48px; } @media (min-width: 761px) { :root { --fw-hero: 600; --fw-1: 600; --fs-hero: 3.5rem; --tr-hero: -.03em; --lh-hero: 1.06; --fs-1: 2.75rem; --tr-1: -.026em; --lh-1: 1.08; --fs-2: 2rem; --tr-2: -.022em; --lh-2: 1.1; --fs-3: 1.5rem; --tr-3: -.018em; --lh-3: 1.17; --fs-apoio: 1.3125rem; --tr-apoio: -.014em; --lh-apoio: 1.38; --fs-corpo: 1.1875rem; --tr-corpo: -.012em; --lh-corpo: 1.47; --gut: 32px; --sec-y: 112px; --cab-h: 52px; } } @media (min-width: 1081px) { :root { --fs-hero: 5rem; --tr-hero: -.035em; --lh-hero: 1.05; --fs-1: 3.5rem; --tr-1: -.03em; --lh-1: 1.07; --fs-2: 2.5rem; --tr-2: -.025em; --lh-2: 1.1; --fs-3: 1.75rem; --tr-3: -.02em; --lh-3: 1.14; --fs-apoio: 1.5rem; --tr-apoio: -.016em; --lh-apoio: 1.33; --fs-corpo: 1.3125rem; --tr-corpo: -.014em; --lh-corpo: 1.47; --gut: 48px; --sec-y: 132px; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--preto); } body { margin: 0; min-width: 320px; background: var(--fundo); color: var(--tx); font-family: var(--fonte); font-size: var(--fs-corpo); line-height: var(--lh-corpo); letter-spacing: var(--tr-corpo); font-weight: 400; font-optical-sizing: auto; font-kerning: normal; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } main { display: block; overflow-x: clip; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } h1, h2, h3, h4 { font-size: inherit; font-weight: 600; text-wrap: balance; } p { text-wrap: pretty; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } b, strong { font-weight: 600; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: rgba(255, 106, 31, .32); } section[id], #comprar { scroll-margin-top: var(--cab-h); } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .num { font-variant-numeric: tabular-nums; } .ac { color: var(--ac-tx); } .nq { white-space: nowrap; } .pulo { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pilula); background: var(--claro); color: var(--tinta); font-size: var(--fs-nota); font-weight: 600; transform: translateY(-200%); } .pulo:focus { transform: none; } /* ---------- tipografia ---------- */ .t-hero { font-size: var(--fs-hero); letter-spacing: var(--tr-hero); line-height: var(--lh-hero); font-weight: var(--fw-hero); } .t-1 { font-size: var(--fs-1); letter-spacing: var(--tr-1); line-height: var(--lh-1); font-weight: var(--fw-1); } .t-2 { font-size: var(--fs-2); letter-spacing: var(--tr-2); line-height: var(--lh-2); font-weight: 600; } .t-3 { font-size: var(--fs-3); letter-spacing: var(--tr-3); line-height: var(--lh-3); font-weight: 600; } .t-apoio { font-size: var(--fs-apoio); letter-spacing: var(--tr-apoio); line-height: var(--lh-apoio); font-weight: 400; color: var(--tx-2); } .t-corpo { font-size: var(--fs-corpo); letter-spacing: var(--tr-corpo); line-height: var(--lh-corpo); } .t-nota { font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); color: var(--tx-nota); } /* ---------- layout ---------- */ .cx { width: 100%; max-width: calc(var(--cx-max) + 2 * var(--gut)); margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); } .sec { position: relative; padding-block: var(--sec-t, var(--sec-y)) var(--sec-b, var(--sec-y)); background: var(--fundo); color: var(--tx); } .sec-clara { color-scheme: light; --fundo: var(--claro); --tx: #1d1d1f; --tx-2: #6e6e73; --tx-3: #86868b; --tx-nota: #6e6e73; --ac-tx: #c4440d; --sup: #fff; --sup-alta: #fff; --borda: rgba(0, 0, 0, .08); --borda-2: rgba(0, 0, 0, .2); --vela: rgba(0, 0, 0, .05); --foco: #1d1d1f; --sombra-1: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .08); --sombra-2: 0 2px 6px rgba(0, 0, 0, .06), 0 28px 70px rgba(0, 0, 0, .12); } .sec-cab { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; } .sec-cab .t-apoio { max-width: 34em; } @media (min-width: 761px) { .sec-cab { gap: 18px; } } /* ---------- botões e links ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 50px; padding: 0 1.65em; border-radius: var(--r-pilula); background: var(--ac); color: var(--ac-tinta); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl), opacity var(--d-ctrl) var(--e-ctrl); } .btn:active { transform: scale(.97); transition-duration: var(--d-toque); transition-timing-function: var(--e-toque); } .btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--r-pilula); } .btn[aria-disabled=true] { opacity: .4; pointer-events: none; } .btn-g { min-height: 56px; padding: 0 2em; font-size: 1.1875rem; letter-spacing: -.012em; } .btn-bloco { display: flex; width: 100%; } @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ac-h); } } .lk { display: inline-flex; align-items: center; gap: .32em; color: var(--ac-tx); cursor: pointer; border-radius: 6px; touch-action: manipulation; } .lk::after { content: ""; flex: none; width: .44em; height: .74em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--d-ctrl) var(--e-mola); } .lk[data-seta=baixo]::after { transform: rotate(90deg); } .lk:active { opacity: .7; } @media (hover: hover) and (pointer: fine) { .lk:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .lk:hover::after { transform: translateX(3px); } .lk[data-seta=baixo]:hover::after { transform: translateY(3px) rotate(90deg); } } .acoes { display: flex; flex-direction: column; align-items: center; gap: 18px; } @media (min-width: 761px) { .acoes { flex-direction: row; justify-content: center; gap: 28px; } } /* ---------- entrada ao rolar ---------- */ .js .rv { opacity: 0; transform: translate3d(0, var(--rv-sobe), 0); transition: opacity var(--d-entra) var(--e-mola), transform var(--d-entra) var(--e-mola); transition-delay: calc(var(--i, 0) * var(--rv-passo)); } .js .rv.in { opacity: 1; transform: none; } /* ---------- cabeçalho ---------- */ .cab { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--cab-h); color: #f5f5f7; } .cab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vidro); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro); box-shadow: 0 .5px 0 var(--vidro-fio); opacity: 0; transition: opacity .32s var(--e-ctrl); } .cab.cab-on::before { opacity: 1; } .cab-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; } .cab-logo { display: block; flex: none; border-radius: 6px; } .cab-logo img { display: block; height: 26px; width: auto; } @media (min-width: 761px) { .cab-logo img { height: 28px; } } /* ---------- barra fixa (celular) ---------- */ .bfix { display: none; } @media (max-width: 760px) { .bfix { position: fixed; z-index: 40; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; color: #f5f5f7; background: var(--vidro); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro); box-shadow: inset 0 .5px 0 var(--vidro-fio), inset 0 0 0 .5px rgba(255,255,255,.06), var(--sombra-1); opacity: 0; transform: translate3d(0, calc(100% + 24px), 0); pointer-events: none; transition: transform .52s var(--e-mola), opacity .32s var(--e-ctrl); } .bfix.show { opacity: 1; transform: none; pointer-events: auto; } .bfix-tx { display: grid; gap: 1px; min-width: 0; } .bfix-tx b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .bfix-tx span { font-size: .8125rem; line-height: 1.3; color: #c7c7cc; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bfix .btn { flex: none; min-height: 40px; padding: 0 1.3em; font-size: .9375rem; } } /* ---------- rodapé ---------- */ .rod { background: var(--preto); color: #86868b; padding-block: 40px calc(44px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px rgba(255,255,255,.08); font-size: .75rem; line-height: 1.5; letter-spacing: 0; } .rod-in { display: grid; gap: 10px; justify-items: start; } .rod-logo { display: block; margin-bottom: 8px; border-radius: 6px; } .rod-logo img { height: 24px; width: auto; } .rod-emp { color: #a1a1a6; } .rod-av { max-width: 62em; } .rod a:not(.rod-logo) { color: #d2d2d7; text-decoration: underline; text-underline-offset: .2em; } @media (min-width: 761px) { .rod { padding-block: 48px 56px; } } /* ========================================================= 01 · TOPO ========================================================= */ .tp { --sec-t: calc(var(--cab-h) + 26px); --sec-b: 76px; } .tp-cab { max-width: 1080px; gap: 0; } .tp-titulo { max-width: 13.4em; } .tp-apoio { margin-top: 16px; } .tp > .cx > .tp-apoio { max-width: 29em; margin: 18px auto 0; text-align: center; } .tp-compra { display: grid; justify-items: center; gap: 16px; margin-top: 30px; text-align: center; } .tp-lk { min-height: 28px; } @keyframes tp-entra { from { opacity: 0; transform: translate3d(0, var(--rv-sobe), 0); } } @keyframes tp-entra-q { from { opacity: 0; transform: translate3d(0, 24px, 0); } } .js .tp-e { animation: tp-entra var(--d-entra) var(--e-mola) backwards; animation-delay: calc(var(--i, 0) * var(--rv-passo)); } .js .tp-palco.tp-e { animation-name: tp-entra-q; animation-duration: .65s; } .tp-palco { display: grid; justify-items: center; gap: 14px; margin: 28px auto 0; } .tp-quadro { position: relative; isolation: isolate; overflow: hidden; overflow: clip; width: min(84vw, 330px); aspect-ratio: 9 / 16; border-radius: var(--r-quadro-g); background: var(--sup-1); box-shadow: var(--sombra-2); -webkit-user-select: none; user-select: none; } .tp-quadro::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .tp-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--sup-1); } .tp-veu { position: absolute; inset: auto 0 0 0; z-index: 1; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.28) 45%, transparent); pointer-events: none; transition: opacity .32s var(--e-ctrl); } .tp-som .tp-veu { opacity: 0; } .tp-som.tp-parado .tp-veu { opacity: .7; } .tp-vidro { color: #f5f5f7; background: rgba(29,29,31,.56); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.24); } .tp-toque { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border-radius: inherit; cursor: pointer; touch-action: manipulation; background: transparent; transition: background-color .24s var(--e-ctrl); } .tp-toque:active { background: rgba(0,0,0,.16); transition-duration: var(--d-toque); } .tp-toque:focus-visible { outline: 2px solid var(--foco); outline-offset: -7px; border-radius: calc(var(--r-quadro-g) - 6px); } .tp-centro { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .2s var(--e-ctrl), transform .32s var(--e-mola); } .tp-centro svg { margin-left: 3px; } .tp-som.tp-parado:not(.tp-falha) .tp-centro { opacity: 1; transform: none; } .tp-barra { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 3; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.24); pointer-events: none; transition: opacity .32s var(--e-ctrl); } .tp-barra i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ac); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } .tp-falha .tp-barra { opacity: 0; } @keyframes tp-espera { from { opacity: 1; } to { opacity: .35; } } .tp-espera .tp-barra { animation: tp-espera .7s ease-in-out infinite alternate; } .tp-trilho { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; padding-bottom: 38px; pointer-events: none; } .tp-ctrl { position: sticky; bottom: 24px; flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; gap: 6px; padding-inline: 16px; pointer-events: none; transition: opacity .24s var(--e-ctrl), transform .36s var(--e-mola), visibility 0s; } .tp-ctrl > * { pointer-events: auto; } .tp-som .tp-ctrl, .tp-falha .tp-ctrl { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); visibility: hidden; transition: opacity .2s var(--e-ctrl), transform .36s var(--e-mola), visibility 0s linear .2s; } .tp-pil { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.35em 0 1.15em; border-radius: var(--r-pilula); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl); } .tp-pil svg { flex: none; } .tp-pil:active, .tp-rd:active { transform: scale(.96); transition-duration: var(--d-toque); } .tp-pil-2 { min-height: 44px; padding: 0 1.1em; color: #f5f5f7; font-size: .9375rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.6); } .tp-rd { position: absolute; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; touch-action: manipulation; transition: transform .32s var(--e-mola), opacity .24s var(--e-ctrl), background-color var(--d-ctrl) var(--e-ctrl), visibility 0s; } .tp-rd::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; } .tp-rd svg { grid-area: 1 / 1; transition: opacity .16s var(--e-ctrl); } .tp-mudo { top: 14px; right: 14px; opacity: 0; visibility: hidden; } .tp-som:not(.tp-falha) .tp-mudo { opacity: 1; visibility: visible; } .tp-i-mudo, .tp-calado .tp-i-som { opacity: 0; } .tp-calado .tp-i-mudo { opacity: 1; } @media (hover: hover) and (pointer: fine) { .tp-pil.tp-vidro:hover, .tp-rd:hover { background: rgba(58,58,60,.66); } .tp-pil-2:hover { text-decoration: underline; text-underline-offset: .2em; } } .tp-erro { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: rgba(0,0,0,.5); color: #f5f5f7; font-size: 1.0625rem; } .tp-leg { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .5em; min-height: 1.43em; max-width: 30em; text-align: center; } .tp-leg:empty { visibility: hidden; } .tp-quadro.tp-vturb .tp-veu, .tp-quadro.tp-vturb .tp-centro, .tp-quadro.tp-vturb .tp-barra, .tp-quadro.tp-vturb .tp-trilho, .tp-quadro.tp-vturb .tp-toque, .tp-quadro.tp-vturb .tp-rd, .tp-quadro.tp-vturb .tp-erro, .tp-quadro.tp-vturb .tp-video { display: none !important; } .tp-vt { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; } .tp-vturb { -webkit-user-select: auto; user-select: auto; } @media (min-width: 761px) { .tp { --sec-t: calc(var(--cab-h) + 48px); --sec-b: 104px; } .tp-titulo { font-size: clamp(2.75rem, 4.4vw, 4rem); letter-spacing: -.032em; line-height: 1.05; } .tp > .cx > .tp-apoio { margin-top: 20px; } .tp-compra { margin-top: 36px; gap: 18px; } .tp-palco { margin-top: 40px; gap: 16px; } .tp-quadro { width: clamp(300px, calc((100svh - var(--cab-h) - 132px) * .5625), 410px); } .tp-trilho { padding-bottom: 42px; } .tp-ctrl { bottom: 28px; } } @media (min-width: 1081px) { .tp { --sec-b: 120px; } .tp > .cx > .tp-apoio { margin-top: 22px; } .tp-lk { font-size: 1.1875rem; letter-spacing: -.012em; } } @media (max-width: 374px) { .tp-titulo { font-size: 2.125rem; letter-spacing: -.023em; line-height: 1.08; } .tp-apoio { font-size: 1.0625rem; } } /* ---------- topo: VSL estilo "Seu vídeo já começou" ---------- */ .tp-dest { font-style: normal; background: linear-gradient(90deg, #ffb070, #ff6a1f 55%, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; } .tp-quadro { border: 1px solid rgba(255,150,90,.28); box-shadow: 0 35px 100px rgba(2,0,0,.4), 0 0 110px rgba(255,106,31,.16); } .tp-veu { display: none; } .tp-ouvir { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(64%, 216px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.34); background: linear-gradient(150deg, rgba(255,140,64,.96), rgba(214,72,10,.96)); color: #fff; text-align: center; cursor: pointer; box-shadow: 0 22px 60px rgba(0,0,0,.66); animation: tpPulso 1.9s ease-out infinite; transition: background .2s ease, transform .3s var(--e-mola); } .tp-ouvir:hover { background: linear-gradient(150deg, #ff9a54, #e65612); } .tp-ouvir:active { transform: translate(-50%, -50%) scale(.97); } .tp-ouvir:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 20px; } .tp-ouvir-k { font-size: 13px; font-weight: 600; line-height: 1.3; opacity: .95; } .tp-ouvir svg { width: 58px; height: 58px; flex: none; } .tp-ouvir strong { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } .tp-som .tp-ouvir, .tp-falha .tp-ouvir { display: none; } .tp-zero { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; } .tp-som .tp-zero { display: none; } @keyframes tpPulso { 0% { box-shadow: 0 22px 60px rgba(0,0,0,.66), 0 0 0 0 rgba(255,140,64,.7); } 70% { box-shadow: 0 22px 60px rgba(0,0,0,.66), 0 0 0 24px rgba(255,140,64,0); } 100% { box-shadow: 0 22px 60px rgba(0,0,0,.66), 0 0 0 0 rgba(255,140,64,0); } } /* pausado com som: quadrado laranja com play */ .tp-centro { width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 24px; background: linear-gradient(150deg, rgba(255,140,64,.94), rgba(214,72,10,.94)); box-shadow: 0 18px 50px rgba(0,0,0,.6); -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; } .tp-centro svg { width: 44px; height: 44px; } /* barra de progresso grossa na base */ .tp-barra { left: 0; right: 0; bottom: 0; height: 7px; border-radius: 0; background: rgba(255,255,255,.15); opacity: 1; } .tp-barra i { border-radius: 0; background: linear-gradient(90deg, #ffc08c, #ff6a1f); box-shadow: 0 0 14px #ff7a32; } @media (prefers-reduced-motion: reduce) { .tp-ouvir { animation: none; } } /* celular: só o logo no topo, título curto, VSL ocupando a tela, botão e texto embaixo */ @media (max-width: 760px) { .cab-in { justify-content: center; } .cab-logo img { height: 30px; } .tp { --sec-t: calc(var(--cab-h) + 14px); --sec-b: 50px; --vsl-h: max(380px, calc(100vh - 168px)); } @supports (height: 1svh) { .tp { --vsl-h: max(380px, calc(100svh - 168px)); } } .tp > .cx { display: flex; flex-direction: column; align-items: center; } .tp-cab { display: contents; } .tp-titulo { order: 1; font-size: clamp(21px, 6vw, 27px); line-height: 1.12; letter-spacing: -.035em; text-align: center; margin: 0 auto 12px; max-width: 420px; } .tp-palco { order: 2; margin-top: 0; width: 100%; } .tp-quadro { width: min(100%, calc(var(--vsl-h) * 9 / 16)); border-radius: 18px; } .tp-leg { display: none; } .tp-compra { order: 4; margin-top: 18px; width: min(100%, calc(var(--vsl-h) * 9 / 16)); } .tp-compra .btn { width: 100%; } .tp > .cx > .tp-apoio { order: 3; margin: 16px auto 0; text-align: center; max-width: 470px; } .tp-ouvir { width: min(64%, 196px); gap: 6px; padding: 12px; } .tp-ouvir svg { width: 44px; height: 44px; } .tp-ouvir strong { font-size: 17px; } .tp-ouvir-k { font-size: 12px; } } /* ========================================================= 02 · TIMELINE ("Veja a IA editando") ========================================================= */ .tl { --tl-trilho: #131314; --tl-onda: #c7c7cc; --tl-corte-fundo: rgba(255, 69, 58, .16); --tl-ctrl: rgba(118, 118, 128, .24); --tl-ctrl-alta: #636366; } .tl-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; } .tl-cena { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; } .tl-visor { position: relative; height: min(34svh, 300px); aspect-ratio: 9 / 16; border-radius: var(--r-quadro); overflow: hidden; background: var(--sup-1); isolation: isolate; } .tl-visor::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .tl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tl-v-pronto { z-index: 1; opacity: 0; transition: opacity .36s var(--e-ctrl); } [data-fonte=pronto] .tl-v-pronto { opacity: 1; } .tl-fala { display: grid; gap: 8px; justify-items: center; text-align: center; width: 100%; min-width: 0; } .tl-passo { font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); color: var(--tx-nota); } .tl-frases { display: grid; width: 100%; max-width: 15em; font-size: var(--fs-2); letter-spacing: var(--tr-2); line-height: var(--lh-2); font-weight: 600; min-height: calc(2 * var(--lh-2) * 1em); align-items: center; } .tl-frase { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .14s var(--e-ctrl), transform 0s linear .14s; text-wrap: balance; } .tl-frase.tl-on { opacity: 1; transform: none; transition: opacity .32s var(--e-ctrl) .14s, transform .52s var(--e-mola) .14s; } .tl-tempos { display: none; font-size: var(--fs-nota); line-height: var(--lh-nota); color: var(--tx-2); } .tl-tempos [data-tl-db], .tl-tempos [data-tl-dp] { color: var(--tx); font-weight: 600; } .tl-seta { margin-inline: .3em; color: var(--tx-3); } .tl-linha { --col: 0px; --topo: 26px; --rot: 18px; --hv: 40px; --hf: 30px; --hl: 20px; --vao: 5px; --pe: 24px; --yv: var(--topo); --yf: calc(var(--yv) + var(--hv) + var(--vao) + var(--rot)); --yl: calc(var(--yf) + var(--hf) + var(--vao) + var(--rot)); --fim: calc(var(--yl) + var(--hl)); position: relative; height: calc(var(--fim) + var(--pe)); padding-left: var(--col); } .tl-rot { position: absolute; left: 0; z-index: 1; display: flex; align-items: center; gap: 6px; height: var(--rot); font-size: .75rem; letter-spacing: 0; line-height: 1; color: var(--tx-nota); pointer-events: none; } .tl-rot svg { flex: none; } .tl-rot-v { top: 2px; } .tl-rot-f { top: calc(var(--yf) - var(--rot) - 1px); } .tl-rot-l { top: calc(var(--yl) - var(--rot) - 1px); } .tl-area { position: relative; height: 100%; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 10px; } .tl-area:focus-visible { outline: 2px solid var(--foco); outline-offset: 6px; } .tl-trilho { position: absolute; left: 0; right: 0; border-radius: 8px; background: var(--tl-trilho); transition: background-color var(--d-ctrl) var(--e-ctrl); } .tl-t-v { top: var(--yv); height: var(--hv); } .tl-t-f { top: var(--yf); height: var(--hf); } .tl-t-l { top: var(--yl); height: var(--hl); } .tl-press .tl-trilho, .tl-pegou .tl-trilho { background: #1b1b1d; } .tl-blocos, .tl-legs { position: absolute; inset: 0; pointer-events: none; } .tl-b { position: absolute; top: 0; bottom: 0; transform-origin: 0 50%; } .tl-b:first-child .tl-bv { border-radius: 8px 0 0 8px; } .tl-b:last-child .tl-bv { border-radius: 0 8px 8px 0; } .tl-bv, .tl-bf { position: absolute; left: 0; right: -.6px; overflow: hidden; } .tl-bv { top: var(--yv); height: var(--hv); background: var(--tl-trilho); isolation: isolate; } .tl-bf { top: var(--yf); height: var(--hf); } .tl-q { position: absolute; top: 0; bottom: 0; background-repeat: no-repeat; } .tl-bv::after { content: ""; position: absolute; inset: 0 .75px; z-index: 3; border-radius: 5px; box-shadow: 0 0 0 8px var(--tl-trilho); opacity: 0; transition: opacity .32s var(--e-ctrl); } .tl-cortada .tl-bv::after { opacity: 1; } .tl-sai .tl-bv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .32s var(--e-ctrl); } .tl-bv u { position: absolute; inset: 0; z-index: 2; background: var(--vermelho); mix-blend-mode: color; opacity: 0; transition: opacity .32s var(--e-ctrl); } .tl-bf::before { content: ""; position: absolute; inset: 0 .75px; border-radius: 5px; background: var(--tl-corte-fundo); opacity: 0; transition: opacity .32s var(--e-ctrl); } .tl-m .tl-bv::before, .tl-m .tl-bf::before { opacity: 1; } .tl-m .tl-bv u { opacity: .9; } .tl-onda { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .tl-onda path { fill: none; stroke-width: 2; stroke-linecap: round; transition: opacity .32s var(--e-ctrl); } .tl-o1 { stroke: var(--tl-onda); opacity: .82; } .tl-o2 { stroke: var(--vermelho); opacity: 0; } .tl-m .tl-o1 { opacity: 0; } .tl-m .tl-o2 { opacity: 1; } .tl-lg { position: absolute; left: 0; top: var(--yl); height: var(--hl); } .tl-lg i { position: absolute; inset: 4px 1px; border-radius: 4px; background: #f5f5f7; opacity: 0; transform: scaleX(.3); transform-origin: 0 50%; transition: opacity .3s var(--e-ctrl), transform .42s var(--e-mola); } .tl-lg.tl-on i { opacity: .34; transform: none; } .tl-lg.tl-on.tl-vez i { opacity: 1; transition-duration: .12s, .42s; } .tl-etq, .tl-dita, .tl-dur { position: absolute; left: 0; top: calc(var(--fim) + 7px); font-size: .75rem; letter-spacing: 0; line-height: 1.35; white-space: nowrap; pointer-events: none; } .tl-etq { color: var(--vermelho); opacity: 0; transition: opacity .22s var(--e-ctrl); } .tl-etq.tl-on { opacity: 1; } .tl-dita { color: var(--tx); font-weight: 500; opacity: 0; transition: opacity .16s var(--e-ctrl); } .tl-dita.tl-on { opacity: 1; } .tl-dur { color: var(--tx-2); opacity: 0; transition: opacity .32s var(--e-ctrl); } .tl-viva .tl-dur { opacity: 1; } .tl-agulha { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; opacity: 0; will-change: transform; pointer-events: none; transition: opacity .32s var(--e-ctrl); } .tl-viva .tl-agulha { opacity: 1; } .tl-agulha b { position: absolute; left: 0; width: 2px; border-radius: 1px; background: var(--ac); } .tl-ag-v { top: calc(var(--yv) - 4px); height: calc(var(--hv) + 8px); } .tl-ag-f { top: calc(var(--yf) - 4px); height: calc(var(--hf) + 8px); } .tl-ag-l { top: calc(var(--yl) - 4px); height: calc(var(--hl) + 8px); } .tl-agulha i { position: absolute; left: -5px; top: calc(var(--yv) - 11px); width: 12px; height: 9px; border-radius: 3px 3px 5px 5px; background: var(--ac); transform-origin: 50% 100%; transition: transform .32s var(--e-mola); } .tl-pegou .tl-agulha i { transform: scale(1.28); transition-duration: var(--d-toque); } .tl-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; } .tl-ctrl-e { display: flex; align-items: center; gap: 8px; min-width: 0; } .tl-ctrl-d { display: flex; justify-content: flex-end; min-width: 0; } .tl-agora { font-size: var(--fs-nota); letter-spacing: 0; color: var(--tx-2); min-width: 2.2em; } .tl-rd { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-width: 44px; height: 44px; border-radius: var(--r-pilula); background: var(--tl-ctrl); color: var(--tx); font-size: var(--fs-nota); font-weight: 500; touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl); } .tl-rd:active { transform: scale(.94); transition-duration: var(--d-toque); } .tl-i-toca { display: none; } .tl-parado .tl-i-toca, .tl-carrega .tl-i-toca { display: block; } .tl-parado .tl-i-pausa, .tl-carrega .tl-i-pausa { display: none; } .tl-carrega:not(.tl-parado) .tl-i-toca { opacity: .38; } .tl-denovo-tx { display: none; } .tl-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: clamp(124px, 38vw, 148px); height: 40px; padding: 2px; border-radius: 11px; background: var(--tl-ctrl); } .tl-seg-pol { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 9px; background: var(--tl-ctrl-alta); box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.28); transition: transform .36s var(--e-mola); } [data-fonte=pronto] .tl-seg-pol { transform: translate3d(100%, 0, 0); } .tl-seg-op { position: relative; z-index: 1; display: grid; border-radius: 9px; font-size: .9375rem; font-weight: 500; line-height: 1; color: var(--tx-2); cursor: pointer; touch-action: manipulation; } .tl-seg-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .tl-seg-op span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 9px; transition: color var(--d-ctrl) var(--e-ctrl); } .tl-seg-op input:checked + span { color: var(--tx); } .tl-falhou .tl-linha, .tl-falhou .tl-seg, .tl-falhou .tl-denovo, .tl-falhou .tl-passo, .tl-falhou .tl-agora { display: none; } @media (hover: hover) and (pointer: fine) { .tl-rd:hover { background: rgba(118,118,128,.36); } .tl-seg-op:hover span { color: var(--tx); } .tl-area:hover .tl-trilho { background: #18181a; } } @media (min-width: 761px) { .tl-palco { gap: clamp(24px, 4vh, 40px); margin-top: 56px; } .tl-cena { grid-template-columns: auto minmax(0, 1fr); gap: 64px; align-items: center; justify-items: start; padding-left: 104px; } .tl-visor { height: min(48vh, 480px); } .tl-fala { justify-items: start; text-align: left; gap: 14px; } .tl-frases { max-width: 14em; align-items: end; } .tl-tempos { display: block; } .tl-linha { --col: 104px; --topo: 14px; --rot: 0px; --hv: 56px; --hf: 44px; --hl: 26px; --vao: 8px; --pe: 32px; } .tl-rot { width: var(--col); font-size: .8125rem; gap: 8px; } .tl-rot-v { top: var(--yv); height: var(--hv); } .tl-rot-f { top: var(--yf); height: var(--hf); } .tl-rot-l { top: var(--yl); height: var(--hl); } .tl-dita { font-size: .8125rem; } .tl-ctrl { padding-left: 104px; gap: 12px; } .tl-seg { width: 184px; } .tl-ctrl-e { gap: 12px; } .tl-denovo { padding: 0 18px 0 14px; } .tl-denovo-tx { display: inline; } } @media (min-width: 1081px) { .tl-cena { gap: 96px; } .tl-frases { max-width: 12em; } } @media (min-width: 961px) { .sec.tl { --sec-t: 96px; } .tl-palco { --tl-col: 88px; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; column-gap: 64px; row-gap: 24px; margin-top: 48px; align-items: end; } .tl-cena { display: contents; } .tl-visor { grid-column: 1; grid-row: 1 / -1; align-self: center; height: clamp(400px, 60vh, 560px); } .tl-fala { grid-column: 2; grid-row: 1; align-self: center; padding-left: var(--tl-col); } .tl-linha { grid-column: 2; grid-row: 2; --col: var(--tl-col); } .tl-ctrl { grid-column: 2; grid-row: 3; padding-left: var(--tl-col); } } @media (min-width: 961px) and (max-height: 720px) { .sec.tl { --sec-t: 80px; } .tl-palco { margin-top: 32px; row-gap: 14px; } .tl-linha { --hv: 46px; --hf: 36px; --hl: 22px; --vao: 6px; --pe: 28px; } .tl-frases { font-size: var(--fs-3); letter-spacing: var(--tr-3); line-height: var(--lh-3); min-height: calc(2 * var(--lh-3) * 1em); } } /* ========================================================= 03 · CONVERSA ========================================================= */ .cv { --sec-t: 64px; --sec-b: 64px; --cv-tela: 100svh; --cv-h: clamp(480px, calc(var(--cv-tela) - var(--cab-h) - 64px), 600px); --cv-topo: 3.5rem; --cv-lado: 16px; --cv-vao: 14px; --cv-doca: calc(1.0625rem + 107px); --cv-cobre: 2.375rem; --cv-vw: min(168px, calc((var(--cv-h) - var(--cv-topo) - var(--cv-doca) - 40px) * .5625)); --cv-ia: #242426; --cv-eu: #f5f5f7; --cv-eu-tx: #1d1d1f; --cv-eu-2: #6e6e73; --cv-campo: #232325; --cv-alta: #2c2c2f; --cv-alta-h: #38383b; --cv-ctrl: rgba(118, 118, 128, .24); --cv-ctrl-h: rgba(118, 118, 128, .36); } .cv-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .cv-lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; min-width: 0; } .cv-passos { display: grid; justify-items: start; min-width: 0; } .cv-passo { position: relative; display: grid; grid-template-columns: 1.5em minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 40px; padding: 7px 0; border-radius: 10px; text-align: left; color: var(--tx-nota); font-size: var(--fs-apoio); letter-spacing: var(--tr-apoio); line-height: 1.3; cursor: pointer; touch-action: manipulation; transition: color .32s var(--e-ctrl), opacity var(--d-ctrl) var(--e-ctrl); } .cv-passo b, .cv-n { font-weight: 600; } .cv-pt { text-wrap: balance; } .cv-passo.cv-on { color: var(--tx); } .cv-passo:active { opacity: .6; } .cv-pd { display: none; } .cv-janela { position: relative; isolation: isolate; display: grid; grid-template-rows: var(--cv-topo) minmax(0, 1fr); width: 100%; max-width: 460px; height: var(--cv-h); margin-inline: auto; border-radius: var(--r-quadro); background: var(--sup); overflow: hidden; overflow: clip; -webkit-user-select: none; user-select: none; } .cv-janela::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .cv-topo { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 10px 0 var(--cv-lado); background: var(--sup); box-shadow: 0 1px 0 var(--borda); } .cv-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cv-alta); color: var(--tx); } .cv-quem { display: grid; min-width: 0; margin-right: auto; } .cv-quem b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .cv-quem span { font-size: .75rem; letter-spacing: 0; line-height: 1.3; color: var(--tx-nota); } .cv-ctrl { display: flex; gap: 8px; flex: none; } .cv-rd { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cv-ctrl); color: var(--tx); cursor: pointer; touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl); } .cv-rd svg { grid-area: 1 / 1; } .cv-rd:active { transform: scale(.92); transition-duration: var(--d-toque); } .cv-i-toca { display: none; } .cv-parado .cv-rd .cv-i-toca { display: block; } .cv-parado .cv-rd .cv-i-pausa { display: none; } .cv-fio { position: relative; z-index: 1; min-height: 0; overflow: hidden; overflow: clip; } .cv-fio::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 14px; background: linear-gradient(to bottom, var(--sup), transparent); opacity: 0; pointer-events: none; transition: opacity .2s var(--e-ctrl); } .cv-rolou .cv-fio::before { opacity: 1; } .cv-rolo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cv-vao); padding: 16px var(--cv-lado) 0; will-change: transform; } .cv-m { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; min-width: 0; transform-origin: 0 100%; } .cv-eu { justify-items: end; transform-origin: 100% 100%; } .cv-junto { margin-top: -8px; } [data-cv-m=grava] { gap: var(--cv-vao); } .cv-viva .cv-m { opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0) scale(.97); transition: opacity .14s var(--e-ctrl), transform 0s linear .14s, visibility 0s linear .14s; } .cv-viva .cv-m.cv-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--e-ctrl), transform .52s var(--e-mola), visibility 0s; } .cv-b { max-width: 84%; padding: 9px 14px 10px; border-radius: 20px; background: var(--cv-ia); color: var(--tx); font-size: 1rem; letter-spacing: -.01em; line-height: 1.35; text-wrap: balance; } .cv-eu .cv-b { background: var(--cv-eu); color: var(--cv-eu-tx); } .cv-arq { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 18px 10px 12px; border-radius: 18px; background: var(--cv-eu); color: var(--cv-eu-tx); } .cv-arq svg { flex: none; } .cv-arq-tx { display: grid; min-width: 0; } .cv-arq-tx b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; } .cv-arq-tx span { font-size: .75rem; line-height: 1.3; color: var(--cv-eu-2); } .cv-grav { position: relative; width: 104px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--sup-1); } .cv-grav img { width: 100%; height: 100%; object-fit: cover; } .cv-quadro { position: relative; isolation: isolate; width: var(--cv-vw); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--sup-1); } .cv-quadro::after, .cv-grav::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .cv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cv-selo { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 56px); padding: 3px 8px; border-radius: 9px; background: rgba(0,0,0,.62); color: #f5f5f7; font-size: .75rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .cv-vt { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border-radius: inherit; cursor: pointer; } .cv-vt-i { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(29,29,31,.78); color: #f5f5f7; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); transition: transform .32s var(--e-mola); } .cv-vt-i svg { grid-area: 1 / 1; } .cv-vt:active .cv-vt-i { transform: scale(.9); } .cv-vt .cv-i-toca { display: block; } .cv-vt .cv-i-pausa, .cv-tocando .cv-vt .cv-i-toca { display: none; } .cv-tocando .cv-vt .cv-i-pausa { display: block; } @keyframes cv-respira { from { opacity: .25; transform: scale(.78); } to { opacity: 1; transform: none; } } .cv-pensa { position: absolute; left: var(--cv-lado); top: 0; display: grid; place-items: center; width: 44px; height: 38px; border-radius: 19px; background: var(--cv-ia); opacity: 0; pointer-events: none; transition: opacity .14s var(--e-ctrl); } .cv-pensa.cv-on { opacity: 1; transition-duration: .24s; } .cv-pensa i { width: 8px; height: 8px; border-radius: 50%; background: var(--tx-2); } .cv-pensa.cv-on i { animation: cv-respira .62s ease-in-out infinite alternate; } .cv-doca { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--cv-doca); pointer-events: none; } .cv-doca::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, var(--sup) 18px); transform: translate3d(0, var(--cv-cobre), 0); transition: transform .52s var(--e-mola); } .cv-leg { position: absolute; left: 0; right: 0; bottom: 70px; display: none; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: 1.0625rem; padding-inline: calc(var(--cv-lado) + 2px); font-size: .8125rem; line-height: 1.0625rem; color: var(--tx-nota); transition: opacity .24s var(--e-ctrl); } .cv-leg > span { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity .12s var(--e-ctrl); } .cv-leg > .cv-on { opacity: 1; transition: opacity .24s var(--e-ctrl) .12s; } .cv-leg b { font-weight: 600; color: var(--tx-2); } .cv-livre .cv-leg { opacity: 0; } .cv-campo { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px 0 18px; border-radius: 26px; background: var(--cv-campo); transition: opacity .32s var(--e-ctrl), transform .52s var(--e-mola), visibility 0s; } .cv-campo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .cv-campo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--ac); opacity: 0; pointer-events: none; transition: opacity .32s var(--e-ctrl); } .cv-campo.cv-alvo::after { opacity: 1; transition-duration: .16s; } .cv-livre .cv-campo { opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0) scale(.98); transition: opacity .2s var(--e-ctrl), transform .32s var(--e-mola), visibility 0s linear .2s; } .cv-entrada { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 100%; } .cv-vago { position: absolute; left: 0; right: 0; top: 50%; overflow: hidden; text-overflow: ellipsis; transform: translate3d(0, -50%, 0); font-size: 1rem; letter-spacing: -.01em; line-height: 1.3; color: var(--tx-2); white-space: nowrap; transition: opacity .2s var(--e-ctrl); } .cv-tem .cv-vago { opacity: 0; transition-duration: .1s; } .cv-vai .cv-vago { transition-delay: .18s; } .cv-ficha, .cv-mini { display: none; flex: none; margin-left: -8px; opacity: 0; will-change: transform; } .cv-ficha.cv-on, .cv-mini.cv-on { display: block; } .cv-sobe { display: block; transition: opacity .12s var(--e-ctrl); } .cv-vai .cv-sobe { opacity: 0; transform: translate3d(0, -10px, 0) scale(.94); transition: opacity .18s var(--e-ctrl), transform .32s var(--e-mola); } .cv-arq-p { gap: 7px; padding: 7px 13px 7px 9px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.4); } .cv-arq-p .cv-arq-tx b { font-size: .875rem; } .cv-mini .cv-sobe { width: 30px; height: 38px; border-radius: 9px; overflow: hidden; background: var(--sup-1); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.36); } .cv-mini img { width: 100%; height: 100%; object-fit: cover; } .cv-linha { display: flex; justify-content: flex-end; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 1rem; letter-spacing: -.01em; line-height: 1.5; color: var(--tx); } .cv-cheia .cv-linha { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px); mask-image: linear-gradient(to right, transparent 0, #000 22px); } .cv-texto { flex: none; margin-right: auto; padding-right: 3px; } @keyframes cv-pisca { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } .cv-texto::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; border-radius: 1px; background: var(--ac); vertical-align: -.2em; opacity: 0; } .cv-digita .cv-texto::after { opacity: 1; animation: cv-pisca .9s linear infinite; } @keyframes cv-aperta { from { transform: scale(.84); } } .cv-envia { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cv-ctrl); color: var(--tx-nota); transition: background-color var(--d-ctrl) var(--e-ctrl), color var(--d-ctrl) var(--e-ctrl); } .cv-armado .cv-envia { background: var(--ac); color: var(--ac-tinta); } .cv-envia.cv-aperta { animation: cv-aperta .42s var(--e-mola); } .cv-pedidos { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); pointer-events: auto; transition: opacity .16s var(--e-ctrl), transform 0s linear .16s, visibility 0s linear .16s; } .cv-livre .cv-pedidos { opacity: 1; visibility: visible; transform: none; transition: opacity .32s var(--e-ctrl) .14s, transform .52s var(--e-mola) .14s, visibility 0s; } .cv-dica { min-height: 1.0625rem; padding-inline: calc(var(--cv-lado) + 2px); font-size: .8125rem; line-height: 1.0625rem; color: var(--tx-nota); transition: opacity .2s var(--e-ctrl); } .cv-pediu .cv-dica { opacity: 0; } .cv-fila { position: relative; overflow: hidden; overflow: clip; touch-action: pan-y; } .cv-fila::before, .cv-fila::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 30px; opacity: 0; pointer-events: none; transition: opacity .2s var(--e-ctrl); } .cv-fila::before { left: 0; background: linear-gradient(to right, var(--sup), transparent); } .cv-fila::after { right: 0; background: linear-gradient(to left, var(--sup), transparent); } .cv-fila.cv-mais-e::before, .cv-fila.cv-mais-d::after { opacity: 1; } .cv-trilho { display: flex; gap: 8px; width: max-content; padding: 2px var(--cv-lado); will-change: transform; } @keyframes cv-entra { from { opacity: 0; transform: translate3d(0, 10px, 0); } } .cv-ped { position: relative; display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; padding: 0 7px 0 16px; border-radius: var(--r-pilula); background: var(--cv-campo); box-shadow: inset 0 0 0 1px var(--borda-2); color: var(--tx); font-size: .9375rem; font-weight: 500; letter-spacing: -.008em; line-height: 1.2; white-space: nowrap; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl), color var(--d-ctrl) var(--e-ctrl); } .cv-livre .cv-ped { animation: cv-entra .52s var(--e-mola) backwards; animation-delay: calc(var(--k, 0) * 60ms + .2s); } .cv-ped:active { transform: scale(.96); } .cv-ped-i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ac); color: var(--ac-tinta); transition: background-color var(--d-ctrl) var(--e-ctrl), color var(--d-ctrl) var(--e-ctrl); } .cv-feito { color: var(--tx-2); } .cv-feito .cv-ped-i { background: var(--cv-ctrl); color: var(--tx); } .cv-seta { display: none; } .cv-pegou .cv-fila { cursor: grabbing; } .cv-pegou .cv-ped { pointer-events: none; } .cv-sem-anim *, .cv-sem-anim *::before, .cv-sem-anim *::after { transition: none !important; animation: none !important; } @media (hover: hover) and (pointer: fine) { .cv-passo:not(.cv-on):hover { color: var(--tx-2); } .cv-rd:hover { background: var(--cv-ctrl-h); } .cv-ped:hover { background: var(--cv-alta); } .cv-fila { cursor: grab; } .cv-fila::before, .cv-fila::after { width: 72px; } .cv-fila::before { background: linear-gradient(to right, var(--sup) 36%, transparent); } .cv-fila::after { background: linear-gradient(to left, var(--sup) 36%, transparent); } .cv-seta { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--cv-alta); color: var(--tx); box-shadow: inset 0 0 0 1px var(--borda), 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.36); cursor: pointer; opacity: 0; visibility: hidden; transform: scale(.88); transition: opacity .16s var(--e-ctrl), transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl), visibility 0s linear .16s; } .cv-seta-e { left: 10px; } .cv-seta-d { right: 10px; } .cv-mais-e .cv-seta-e, .cv-mais-d .cv-seta-d { opacity: 1; visibility: visible; transform: none; transition: opacity .24s var(--e-ctrl), transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl), visibility 0s; } .cv-seta:hover { background: var(--cv-alta-h); } } @media (max-width: 960px) { .cv-leg { display: grid; } } @media (max-width: 760px) and (max-height: 700px) { .cv { --sec-t: 56px; --sec-b: 56px; --cv-h: clamp(440px, calc(var(--cv-tela) - var(--cab-h) - 56px), 600px); } .cv-grade { gap: 24px; } .cv-lado { gap: 16px; } } @media (min-width: 761px) { .cv { --sec-t: 96px; --sec-b: 96px; --cv-h: clamp(520px, calc(var(--cv-tela) - var(--cab-h) - 120px), 640px); --cv-topo: 3.75rem; --cv-lado: 20px; --cv-vw: min(196px, calc((var(--cv-h) - var(--cv-topo) - var(--cv-doca) - 44px) * .5625)); } .cv-grade { gap: 44px; } .cv-lado { gap: 28px; } .cv-passo { min-height: 44px; } .cv-b { font-size: 1.0625rem; padding: 10px 16px 11px; } .cv-grav { width: 116px; } .cv-avatar { width: 34px; height: 34px; } } @media (min-width: 961px) { .cv { --sec-t: 104px; --sec-b: 104px; --cv-h: clamp(520px, calc(var(--cv-tela) - var(--cab-h) - 150px), 660px); } .cv-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(48px, 7vw, 104px); align-items: center; } .cv-lado { justify-items: start; gap: 40px; } .cv-cab { justify-items: start; margin-inline: 0; text-align: left; } .cv-apoio { max-width: 22em; } .cv-passos { gap: 6px; width: 100%; max-width: 30em; } .cv-passo { grid-template-columns: 1.6em minmax(0, 1fr); padding: 10px 0; font-size: var(--fs-3); letter-spacing: var(--tr-3); line-height: var(--lh-3); } .cv-passo b { display: block; } .cv-pd { display: block; margin-top: 6px; text-wrap: pretty; font-size: var(--fs-apoio); letter-spacing: var(--tr-apoio); line-height: 1.36; font-weight: 400; transition: color .32s var(--e-ctrl); } .cv-passo.cv-on .cv-pd { color: var(--tx-2); } .cv-janela { max-width: none; } } @media (min-width: 1081px) { .cv-passo { color: var(--tx-3); } .cv-passo.cv-on { color: var(--tx); } } @media (min-width: 961px) and (max-height: 760px) { .cv { --sec-t: 56px; --sec-b: 56px; --cv-h: clamp(500px, calc(var(--cv-tela) - var(--cab-h) - 56px), 660px); } .cv-lado { gap: 28px; } .cv-passo { padding: 7px 0; } } /* ========================================================= 04 · ESTILOS (carrossel) ========================================================= */ .es { --es-vh: 1svh; --es-alt: calc(100 * var(--es-vh)); --es-ar: clamp(0px, calc((var(--es-alt) - 700px) * .1), 4px); --es-vao: 12px; --es-esc: .8; --es-apaga: .4; --es-l: clamp(150px, min(62vw, calc((var(--es-alt) - 154px - 8.625rem) * .5625)), 300px); --es-a: calc(var(--es-l) * 16 / 9); --es-folga: 8px; --es-ctrl: rgba(118, 118, 128, .24); --es-ctrl-h: rgba(118, 118, 128, .36); } .es-peca { margin-top: calc(24px + var(--es-ar)); } .es-prat { position: relative; height: calc(var(--es-a) + 2 * var(--es-folga)); overflow: hidden; outline: none; touch-action: pan-y pinch-zoom; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .es-fila { position: absolute; inset: var(--es-folga) 0; transition: opacity .14s ease; } .es-fila.es-some { opacity: 0; } .es-it { position: absolute; top: 0; left: 50%; width: var(--es-l); height: var(--es-a); margin-left: calc(var(--es-l) / -2); opacity: 0; will-change: transform, opacity; cursor: pointer; } .es-it.es-foco { cursor: inherit; } .es-pegou .es-prat, .es-pegou .es-it { cursor: grabbing; } .es-q { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: var(--r-quadro); background: var(--sup-1); transition: transform .32s var(--e-mola); } .es-q::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .es-aperto .es-q { transform: scale(.985); transition-duration: var(--d-toque); } .es-poster, .es-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .es-video { z-index: 1; opacity: 0; transition: opacity .24s var(--e-ctrl); } .es-pronto .es-video, .es-vivo .es-video { opacity: 1; transition-duration: 80ms; } .es-barra { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 2; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.24); opacity: 0; pointer-events: none; transition: opacity .24s var(--e-ctrl); } .es-barra i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ac); transform: scaleX(0); transform-origin: 0 50%; } .es-vivo .es-barra { opacity: 1; transition-duration: .32s; } .es-anel { position: absolute; top: var(--es-folga); left: 50%; z-index: 4; width: var(--es-l); height: var(--es-a); margin-left: calc(var(--es-l) / -2); border-radius: calc(var(--r-quadro) + 4px); outline: 2px solid var(--foco); outline-offset: 4px; opacity: 0; pointer-events: none; transition: opacity .16s var(--e-ctrl); } .es-prat:focus-visible .es-anel { opacity: 1; } .es-marca { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; color: #f5f5f7; background: rgba(22,22,23,.78); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.24); opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .16s var(--e-ctrl), transform .32s var(--e-mola); } .es-marca svg { margin-left: 3px; } .es-parado:not(.es-anda) .es-marca { opacity: 1; transform: none; transition-duration: .24s, .32s; } .es-pe { display: grid; justify-items: center; gap: calc(14px + var(--es-ar)); margin-top: calc(10px + var(--es-ar) / 2); } .es-legs { display: grid; width: 100%; max-width: 26em; text-align: center; } .es-leg { grid-area: 1 / 1; display: grid; justify-items: center; align-content: start; min-width: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); transition: opacity .14s var(--e-ctrl), transform 0s linear .14s, visibility 0s linear .14s; } .es-leg.es-on { opacity: 1; visibility: visible; transform: none; transition: opacity .32s var(--e-ctrl) .14s, transform .52s var(--e-mola) .14s, visibility 0s; } .es-cat { font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); font-weight: 500; color: var(--tx-2); } .es-tit { margin-top: 4px; font-size: var(--fs-2); letter-spacing: var(--tr-2); line-height: var(--lh-2); font-weight: 600; text-wrap: balance; } .es-ped { margin-top: calc(8px + var(--es-ar) / 2); max-width: 21em; font-size: var(--fs-corpo); letter-spacing: var(--tr-corpo); line-height: 1.35; color: var(--tx); text-wrap: balance; } .es-ped-r { margin-right: .45em; font-size: var(--fs-nota); letter-spacing: var(--tr-nota); font-weight: 500; color: var(--tx-nota); } .es-ped q, .lg-ped q { quotes: "\201c" "\201d"; } .es-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; } .es-rd, .es-pil { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; height: 44px; border-radius: var(--r-pilula); background: var(--es-ctrl); color: var(--tx); touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl), opacity var(--d-ctrl) var(--e-ctrl); } .es-rd:active, .es-pil:active { transform: scale(.94); transition-duration: var(--d-toque); } .es-rd { width: 44px; } .es-rd[aria-disabled=true] { opacity: .32; cursor: default; } .es-pil { gap: 8px; padding: 0 18px 0 14px; font-size: .9375rem; font-weight: 500; letter-spacing: -.008em; line-height: 1; } .es-pil svg { flex: none; } .es-cont { min-width: 4.3em; text-align: center; } .es-i-toca { display: none; } .es-parado .es-i-toca { display: block; } .es-parado .es-i-pausa { display: none; } @media (hover: hover) and (pointer: fine) { .es-rd:hover, .es-pil:hover { background: var(--es-ctrl-h); } .es-rd[aria-disabled=true]:hover { background: var(--es-ctrl); } } @media (min-width: 761px) { .es { --es-vao: 18px; --es-esc: .82; --es-l: clamp(168px, calc(min(54 * var(--es-vh), var(--es-alt) - 176px - 8.8125rem) * .5625), 320px); } .es-peca { margin-top: 48px; } .es-pe { gap: 24px; margin-top: 20px; } .es-tit { margin-top: 6px; } .es-ped { margin-top: 12px; max-width: 26em; } .es-marca { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .es-barra { left: 22px; right: 22px; bottom: 16px; } } @media (min-width: 1081px) { .es { --es-vao: 20px; } .es-peca { margin-top: 56px; } .es-tit { font-size: 2.125rem; letter-spacing: -.023em; line-height: 1.1; } } @media (max-width: 374px) { .es-tit { font-size: 1.4375rem; } .es-ped { font-size: 1rem; } } /* ========================================================= 05 · PROVA (bruto x editado) ========================================================= */ .pv { --pv-e: .5248; --pv-alt: 8px; --pv-pega: 28px; --pv-ponta: #fff; --pv-bruta: var(--tx-3); --pv-trilho: var(--borda); --pv-trilho-on: var(--borda-2); --pv-fio: var(--borda-2); --pv-contorno: var(--tx-3); --pv-vazio: var(--vela); } .pv-fr { display: inline-block; } @media (max-width: 760px) { .pv-titulo { font-size: clamp(1.5rem, 7.8vw, var(--fs-1)); letter-spacing: -.022em; line-height: 1.1; } } .pv-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 36px; } .pv-par, .pv-regua { width: 100%; max-width: 480px; margin-inline: auto; } .pv-par { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; -webkit-user-select: none; user-select: none; } .pv-col { display: grid; gap: 10px; min-width: 0; } .pv-rot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-inline: 8px; font-size: var(--fs-nota); line-height: var(--lh-nota); } .pv-nome { font-weight: 600; color: var(--tx); } .pv-dur { color: var(--tx-2); } .pv-quadro { position: relative; isolation: isolate; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--pv-vazio); cursor: pointer; touch-action: manipulation; } .pv-quadro::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .pv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pv-junta { position: absolute; left: 50%; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: var(--tx); color: var(--fundo); box-shadow: 0 0 0 4px var(--fundo); touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl); } .pv-junta:active, .pv-aperta .pv-junta { transform: scale(.92); transition-duration: var(--d-toque), var(--d-ctrl); } .pv-junta svg { grid-area: 1 / 1; transition: opacity .16s var(--e-ctrl); } .pv-i-toca, .pv-parado .pv-i-pausa { opacity: 0; } .pv-parado .pv-i-toca { opacity: 1; } .pv-regua { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; } .pv-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; } .pv-conta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; min-width: 0; } .pv-num { font-size: 3.5rem; letter-spacing: -.03em; line-height: 1; font-weight: 600; color: var(--tx); } .pv-l-bruto .pv-num { color: var(--tx-3); } .pv-de { font-size: var(--fs-corpo); letter-spacing: var(--tr-corpo); line-height: 1.2; color: var(--tx-2); white-space: nowrap; } .pv-troca { display: inline-grid; } .pv-troca > span { grid-area: 1 / 1; } .pv-antes { opacity: 0; } .pv-barra { position: relative; height: var(--pv-pega); } .pv-cheia, .pv-trilho, .pv-clip { position: absolute; left: 0; right: 0; top: 50%; height: var(--pv-alt); margin-top: calc(var(--pv-alt) / -2); border-radius: var(--pv-alt); } .pv-cheia { background: var(--pv-bruta); } .pv-trilho { background: var(--pv-trilho); transition: background-color var(--d-ctrl) var(--e-ctrl); } .pv-clip { overflow: hidden; } .pv-fill { position: absolute; inset: 0; border-radius: var(--pv-alt); background: var(--ac); transform: translate3d(calc((var(--pv-e) - 1) * 100%), 0, 0); will-change: transform; } .pv-area { -webkit-user-select: none; user-select: none; touch-action: pan-y; border-radius: 14px; cursor: grab; } .pv-pegou .pv-area { cursor: grabbing; } .pv-area::before { content: ""; position: absolute; inset: -10px -14px; } .pv-area:focus-visible { outline: none; } .pv-area:focus-visible .pv-pega i { outline: 2px solid var(--foco); outline-offset: 3px; } .pv-press .pv-trilho, .pv-pegou .pv-trilho { background: var(--pv-trilho-on); } .pv-pega { position: absolute; left: 0; top: 50%; width: var(--pv-pega); height: var(--pv-pega); margin: calc(var(--pv-pega) / -2) 0 0 calc(var(--pv-pega) / -2); will-change: transform; pointer-events: none; } .pv-pega i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--pv-ponta); box-shadow: 0 0 0 1px var(--pv-contorno), 0 1px 1.5px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.14); transition: transform .32s var(--e-mola), box-shadow var(--d-ctrl) var(--e-ctrl); } .pv-press .pv-pega i, .pv-pegou .pv-pega i { transform: scale(1.16); box-shadow: 0 0 0 1px var(--pv-contorno), 0 2px 3px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.2); transition-duration: var(--d-toque), var(--d-ctrl); } .pv-sob { position: relative; height: 34px; font-size: .8125rem; letter-spacing: -.003em; line-height: 1.3; } .pv-cota { position: absolute; inset: 0; pointer-events: none; } .pv-cota-l { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--pv-fio); transform-origin: 0 50%; } .pv-cota-m { position: absolute; top: 3px; width: 1px; height: 9px; background: var(--pv-fio); } .pv-cota-e { left: 0; } .pv-cota-d { right: 0; } .pv-cota-tx { position: absolute; left: 0; right: 0; top: 15px; text-align: center; white-space: nowrap; color: var(--tx-2); pointer-events: none; } .pv-cota-tx b { font-weight: 600; color: var(--tx); } .pv-dica { position: absolute; left: 0; top: 15px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--tx-nota); opacity: 0; pointer-events: none; transition: opacity .32s var(--e-ctrl); } .pv-dica svg { flex: none; } .pv-convida .pv-dica { opacity: 1; } .pv-fecho { margin-top: 4px; font-size: var(--fs-3); letter-spacing: var(--tr-3); line-height: var(--lh-3); font-weight: 600; color: var(--tx); text-wrap: balance; } @media (hover: hover) and (pointer: fine) { .pv-junta:hover { background: color-mix(in srgb, var(--tx) 84%, var(--fundo)); } .pv-area:hover .pv-trilho { background: var(--pv-trilho-on); } .pv-viva:not(.pv-pegou) .pv-area:hover .pv-pega i { transform: scale(1.07); } } @media (min-width: 761px) { .pv { --pv-alt: 10px; --pv-pega: 30px; } .pv-fa { display: inline-block; } .pv-palco { gap: 48px; margin-top: 56px; justify-items: center; } .pv-par { grid-template-columns: repeat(2, 250px); gap: 18px; width: auto; max-width: none; margin-inline: 0; } .pv-col { gap: 12px; } .pv-rot { padding-inline: 10px; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; } .pv-quadro { border-radius: var(--r-quadro); } .pv-junta { width: 48px; height: 48px; margin-left: -24px; bottom: 20px; box-shadow: 0 0 0 5px var(--fundo); } .pv-regua { max-width: 518px; gap: 18px; } .pv-num { font-size: 4.5rem; letter-spacing: -.033em; } .pv-linha { gap: 4px; } .pv-sob { height: 38px; font-size: .875rem; } .pv-cota-tx, .pv-dica { top: 17px; } .pv-fecho { margin-top: 8px; } } @media (min-width: 961px) { .sec.pv { --sec-t: 104px; } .pv-palco { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(56px, 7vw, 96px); align-items: center; justify-items: stretch; margin-top: 60px; } .pv-par { grid-template-columns: repeat(2, clamp(210px, min(calc((100vh - 300px) * .5625), 21vw), 264px)); gap: 20px; } .pv-regua { max-width: 460px; margin-inline: 0; gap: 22px; padding-top: 30px; } .pv-fecho { margin-top: 14px; } } @media (min-width: 1081px) { .pv-num { font-size: 5rem; letter-spacing: -.035em; } .pv-de { font-size: 1.3125rem; letter-spacing: -.014em; } } /* ========================================================= 06 · VÍDEO LONGO ========================================================= */ .lg { --lg-ctrl: rgba(0, 0, 0, .56); --lg-ctrl-h: rgba(0, 0, 0, .72); } .lg-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 40px; } .lg-ex { display: grid; align-content: start; gap: 18px; min-width: 0; } .lg-yt { width: 132px; margin: -12px auto -10px; } .lg-yt img { width: 100%; height: auto; animation: lg-flutua 4s ease-in-out infinite alternate; } @keyframes lg-flutua { from { transform: translate3d(0, -3px, 0) rotate(-2deg); } to { transform: translate3d(0, 4px, 0) rotate(2deg); } } .lg-quadro { position: relative; isolation: isolate; aspect-ratio: 16 / 9; border-radius: var(--r-cartao); overflow: hidden; background: var(--sup-1); } .lg-quadro::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borda); pointer-events: none; } .lg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lg-pp { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lg-ctrl); color: #fff; touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl); } .lg-pp:active { transform: scale(.92); } .lg-quadro-ad .lg-pp { left: auto; right: 8px; top: 8px; bottom: auto; } .lg-pp svg { grid-area: 1 / 1; } .lg-i-toca, .lg-parado .lg-i-pausa { display: none; } .lg-parado .lg-i-toca { display: block; } .lg-tx { display: grid; gap: 8px; padding-inline: 4px; } .lg-cat { font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); font-weight: 500; color: var(--tx-2); } .lg-tit { font-size: var(--fs-3); letter-spacing: var(--tr-3); line-height: var(--lh-3); font-weight: 600; text-wrap: balance; } .lg-ped { margin-top: 4px; font-size: var(--fs-corpo); letter-spacing: var(--tr-corpo); line-height: 1.35; color: var(--tx); text-wrap: pretty; } .lg-ped-r { margin-right: .45em; font-size: var(--fs-nota); letter-spacing: var(--tr-nota); font-weight: 500; color: var(--tx-nota); } .lg-conta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-size: var(--fs-nota); line-height: var(--lh-nota); color: var(--tx-2); } .lg-seta { color: var(--ac-tx); font-weight: 600; } .lg-fim { color: var(--tx); font-weight: 600; } .lg-extra { font-size: var(--fs-nota); line-height: var(--lh-nota); color: var(--tx-2); } .lg-nota { margin-top: 40px; text-align: center; text-wrap: balance; } @media (min-width: 761px) { .lg-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 52px; } .lg-quadro { border-radius: 24px; } .lg-pp { left: 12px; bottom: 12px; } .lg-quadro-ad .lg-pp { left: auto; right: 12px; top: 12px; bottom: auto; } .lg-yt { width: 152px; margin-bottom: -12px; } .lg-nota { margin-top: 48px; } } @media (min-width: 1081px) { .lg-grade { gap: 36px; margin-top: 60px; } .lg-yt { width: 172px; margin-top: -20px; margin-bottom: -14px; } .lg-tx { gap: 10px; } } @media (hover: hover) and (pointer: fine) { .lg-pp:hover { background: var(--lg-ctrl-h); } } /* ========================================================= 07 · FUNÇÕES ========================================================= */ .fn { --fn-w: min(66vw, 264px); --fn-r: 30px; } .fn-palco { display: grid; justify-items: center; gap: 18px; margin-top: 30px; } .fn-fone { position: relative; width: var(--fn-w); aspect-ratio: 9 / 16; border-radius: var(--fn-r); background: #0a0a0c; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px -30px rgba(255,107,26,.35), 0 18px 40px -18px rgba(0,0,0,.9); } .fn-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .32s var(--e-ctrl); } .fn-v.fn-on { opacity: 1; } .fn-fone::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 64px; z-index: 1; background: linear-gradient(rgba(0,0,0,.55), transparent); pointer-events: none; } .fn-bars { position: absolute; z-index: 2; top: 12px; left: 14px; right: 14px; display: flex; gap: 4px; pointer-events: none; } .fn-bars i { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.32); overflow: hidden; } .fn-bars b { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; } .fn-bars .fn-foi b { --p: 1; } .fn-lado { position: absolute; z-index: 2; top: 0; bottom: 0; width: 38%; cursor: pointer; } .fn-ant { left: 0; } .fn-prox { right: 0; width: 62%; } .fn-lado:focus-visible { outline: 2px solid var(--foco); outline-offset: -6px; border-radius: 24px; } .fn-pp { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: rgba(30,30,32,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; } .fn-pp:active { transform: scale(.94); } .fn-i-toca, .fn-parado .fn-i-pausa { display: none; } .fn-parado .fn-i-toca { display: block; } .fn-leg { display: grid; gap: 4px; justify-items: center; text-align: center; min-height: 6.2em; align-content: start; } .fn-leg-n { font-size: var(--fs-leg); letter-spacing: var(--tr-leg); text-transform: uppercase; color: var(--tx-3); font-variant-numeric: tabular-nums; } .fn-leg-linha { max-width: 22em; font-size: var(--fs-corpo); letter-spacing: var(--tr-corpo); line-height: 1.4; color: var(--tx-2); text-wrap: balance; } .fn-troca .fn-leg-nome, .fn-troca .fn-leg-linha { animation: fn-sobe .38s var(--e-mola) both; } .fn-troca .fn-leg-linha { animation-delay: 50ms; } @keyframes fn-sobe { from { opacity: 0; transform: translate3d(0, 8px, 0); } } .fn-lista { display: flex; gap: 8px; width: 100vw; margin: 2px 0 0; padding: 4px var(--gut); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fn-lista::-webkit-scrollbar { display: none; } .fn-lista li { flex: none; scroll-snap-align: center; } .fn-it { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pilula); background: rgba(118,118,128,.2); color: var(--tx-2); font-size: .9375rem; font-weight: 500; letter-spacing: -.008em; white-space: nowrap; cursor: pointer; transition: background-color var(--d-ctrl) var(--e-ctrl), color var(--d-ctrl) var(--e-ctrl); } .fn-it.fn-on { background: #f5f5f7; color: #1d1d1f; } .fn-it:active { transform: scale(.97); } .fn-it-n, .fn-it-linha, .fn-it-pg { display: none; } .fn-it-nome > span { display: none; } .fn-it-nome::after { content: attr(data-curto); } @media (min-width: 900px) { .fn { --fn-w: 320px; --fn-r: 38px; } .fn-palco { grid-template-columns: minmax(0, 1fr) var(--fn-w); align-items: center; justify-items: stretch; column-gap: clamp(48px, 7vw, 104px); max-width: 940px; margin: 64px auto 0; } .fn-fone { grid-column: 2; grid-row: 1; } .fn-leg { display: none; } .fn-lista { grid-column: 1; grid-row: 1; display: grid; gap: 0; width: auto; margin: 0; padding: 0; overflow: visible; } .fn-lista li + li { border-top: 1px solid var(--borda); } .fn-it { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 0; padding: 17px 4px 17px 0; border-radius: 0; background: none; text-align: left; white-space: normal; color: var(--tx-2); } .fn-it.fn-on { background: none; color: var(--tx); } .fn-it:active { transform: none; } .fn-it-n { display: block; font-size: .8125rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--tx-2); opacity: .7; } .fn-it.fn-on .fn-it-n { color: var(--ac-tx); opacity: 1; } .fn-it-tx { display: grid; } .fn-it-nome { font-size: 1.375rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; transition: color var(--d-ctrl) var(--e-ctrl); } .fn-it-nome > span { display: inline; } .fn-it-nome::after { content: none; } .fn-it-linha { font-size: 1.0625rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.42; color: var(--tx-2); } .fn-it.fn-on .fn-it-linha { display: block; padding-top: 6px; max-width: 26em; animation: fn-sobe .42s var(--e-mola) both; } .fn-it-pg { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; } .fn-it-pg i { display: block; width: 100%; height: 100%; background: var(--ac-tx); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; } .fn-it.fn-on .fn-it-pg i { opacity: 1; } } @media (hover: hover) and (pointer: fine) { .fn-it:not(.fn-on):hover { color: var(--tx); } .fn-pp:hover { background: rgba(60,60,64,.7); } } /* ========================================================= 08 · O QUE VOCÊ RECEBE ========================================================= */ .kt { --kt-palco: max(232px, 11.5rem); --kt-chip: 212px; --kt-zip: 114px; --kt-vao: 14px; --kt-letra: var(--fs-3); --kt-teto: 8.4cqw; } .kt-apoio { text-wrap: balance; } .kt-caixa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; } .kt-palco { position: relative; height: var(--kt-palco); margin-inline: calc(-1 * var(--gut)); container-type: inline-size; overflow: hidden; overflow: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .kt-toque, .kt-cena, .kt-obj { position: absolute; inset: 0; } .kt-toque { transition: transform .36s var(--e-mola); } .kt-press .kt-toque { transform: scale(.972); transition-duration: var(--d-toque); } .kt-cena { transform-origin: 50% 54%; will-change: transform, opacity; } .kt-obj { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 12px; opacity: 0; pointer-events: none; will-change: transform, opacity; } .kt-o1 { opacity: 1; } .kt-obj img { -webkit-user-drag: none; user-select: none; } .kt-chip { width: var(--kt-chip); } .kt-zip { width: var(--kt-zip); } .kt-arq { font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); font-weight: 500; color: var(--tx-2); } .kt-rol { display: grid; gap: var(--kt-vao); max-width: calc(100% - 2 * var(--gut)); text-align: left; } .kt-rol li { display: flex; align-items: center; gap: .6em; font-size: min(var(--kt-letra), var(--kt-teto)); letter-spacing: var(--tr-3); line-height: 1.2; font-weight: 600; color: var(--tx); } .kt-ic { flex: none; width: 1em; height: 1em; color: var(--tx-3); } .kt-ic svg { width: 100%; height: 100%; } .kt-viva .kt-rol li { opacity: calc(.34 + .66 * clamp(0, (var(--kt-q, 1) - .34 - var(--j, 0) * .1) / .36, 1)); } .kt-lista { display: grid; gap: 8px; } .kt-item { position: relative; isolation: isolate; padding: 14px 18px 15px; border-radius: var(--r-cartao); box-shadow: inset 0 0 0 1px var(--borda); } .kt-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sup); box-shadow: inset 0 0 0 1px var(--borda); opacity: var(--kt-k, 0); } .kt-salto .kt-item::before { transition: opacity .26s var(--e-ctrl); } .kt-nome { color: var(--tx-2); transition: color var(--d-ctrl) var(--e-ctrl); } .kt-desc { margin-top: 4px; max-width: 34em; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.47; color: var(--tx-nota); transition: color var(--d-ctrl) var(--e-ctrl); } .kt-on .kt-nome { color: var(--tx); } .kt-on .kt-desc { color: var(--tx-2); } .kt-bt { text-align: left; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .kt-bt::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-cartao); background: transparent; transition: background-color var(--d-ctrl) var(--e-ctrl); } .kt-bt:active::after { background: var(--vela); transition-duration: var(--d-toque); } .kt-bt:focus-visible { outline: none; } .kt-bt:focus-visible::after { outline: 2px solid var(--foco); outline-offset: 2px; } .kt-fecho { display: grid; justify-items: center; margin-top: 28px; text-align: center; } .kt-frase { max-width: 22em; color: var(--tx); } .kt-acoes { margin-top: 22px; } .kt-preco { margin-top: 14px; } @media (hover: hover) and (pointer: fine) { .kt-viva .kt-palco { cursor: grab; } .kt-viva .kt-palco.kt-pegou { cursor: grabbing; } .kt-item:not(.kt-on):hover .kt-nome { color: var(--tx); } .kt-item:not(.kt-on):hover .kt-desc { color: var(--tx-2); } .kt-item:not(.kt-on) .kt-bt:hover::after { background: color-mix(in srgb, var(--vela) 50%, transparent); } } @media (max-width: 380px) { .kt { --kt-palco: max(212px, 11.5rem); --kt-chip: 200px; --kt-zip: 102px; --kt-vao: 12px; } .kt-item { padding: 12px 16px 13px; } .kt-desc { font-size: 1rem; } } @media (min-width: 761px) { .kt { --kt-palco: max(320px, 14rem); --kt-chip: 280px; --kt-zip: 150px; --kt-vao: 18px; --kt-teto: 7cqw; } .kt-caixa { gap: 28px; margin-top: 48px; } .kt-palco { margin-inline: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12% 88%, transparent); } .kt-chip { max-width: 74%; } .kt-rol { max-width: 72%; } .kt-arq { font-size: .9375rem; } .kt-lista { width: 100%; max-width: 620px; margin-inline: auto; gap: 10px; } .kt-item { padding: 20px 26px 22px; } .kt-desc { margin-top: 6px; font-size: 1.1875rem; letter-spacing: -.012em; } .kt-fecho { margin-top: 44px; } .kt-acoes { margin-top: 26px; } .kt-preco { margin-top: 16px; } } @media (min-width: 961px) { .kt { --kt-palco: max(420px, 16rem); --kt-chip: 320px; --kt-zip: 184px; --kt-vao: 20px; } .kt-caixa { grid-template-columns: minmax(0, 1fr) minmax(0, 468px); gap: 40px; align-items: center; margin-top: 56px; } .kt-lista { max-width: none; margin-inline: 0; } .kt-fecho { margin-top: 56px; } } @media (min-width: 1081px) { .kt-caixa { gap: 56px; margin-top: 64px; } .kt-fecho { margin-top: 64px; } } /* ========================================================= 09 · PRA QUEM É ========================================================= */ .pb { --pb-apagada: .5; --pb-lida: .74; --pb-quem: .62; --pb-recuo: 20px; --pb-marca: 2px; } .pb-apoio { text-wrap: balance; } .pb-dica { display: none; } @media (hover: none) and (pointer: coarse) { .pb-viva .pb-dica { display: block; margin-top: -4px; } } .pb-peca { position: relative; margin-top: 40px; } .pb-col { position: relative; max-width: var(--cx-est); margin-inline: auto; padding-left: var(--pb-recuo); } .pb-fio { position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; border-radius: 1px; background: var(--borda-2); transform-origin: 0 0; pointer-events: none; } .pb-viva .pb-fio { transform: scaleY(0); will-change: transform; } .pb-marca { position: absolute; left: calc((1px - var(--pb-marca)) / 2); top: 0; width: var(--pb-marca); height: 1px; background: var(--ac); transform-origin: 0 0; opacity: 0; pointer-events: none; will-change: transform; transition: opacity .28s var(--e-ctrl); } .pb-marca.pb-on { opacity: 1; } .pb-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } .pb-bt { position: relative; display: block; width: 100%; text-align: left; border-radius: 10px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transform-origin: 0 50%; transition: transform .32s var(--e-mola); } .pb-bt::before { content: ""; position: absolute; inset: -14px -8px -14px calc(-1 * var(--pb-recuo)); } .pb-bt:active { transform: scale(.98); transition-duration: var(--d-toque); } .pb-bt:focus-visible { outline: 2px solid var(--foco); outline-offset: 8px; } .pb-quem { display: flex; align-items: center; gap: 6px; font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); font-weight: 500; color: var(--tx-2); } .pb-quem svg { flex: none; } .pb-s, .pb-s-l { display: inline-block; } .pb-frase { display: block; margin-top: 6px; font-size: var(--fs-2); letter-spacing: var(--tr-2); line-height: var(--lh-2); font-weight: 600; color: var(--tx); text-wrap: balance; } .pb-viva .pb-quem { color: var(--tx); opacity: var(--pb-quem); } .pb-viva .pb-w { opacity: var(--pb-apagada); } .pb-viva .ac .pb-w { opacity: var(--pb-lida); } .pb-fecho { display: grid; justify-items: center; gap: 8px; max-width: 820px; margin: 56px auto 0; text-align: center; } .pb-fecho-tx { text-wrap: balance; } .pb-lk { min-height: 44px; } @media (max-width: 760px) { .pb-titulo { font-size: clamp(1.625rem, calc((100vw - 44px) / 10.3), 2rem); letter-spacing: -.022em; line-height: 1.1; } .pb-frase { font-size: clamp(1.1875rem, calc((100vw - 64px) / 13.58), 1.625rem); letter-spacing: -.02em; line-height: 1.14; } .pb-fecho-tx { font-size: clamp(1.5rem, calc((100vw - 44px) / 11.5), 1.875rem); letter-spacing: -.021em; line-height: 1.1; } } @media (min-width: 761px) { .pb { --pb-recuo: 32px; --pb-marca: 3px; } .pb-peca { margin-top: 64px; } .pb-lista { gap: 44px; } .pb-quem { gap: 8px; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.35; } .pb-quem svg { width: 16px; height: 16px; } .pb-frase { margin-top: 8px; } .pb-bt::before { inset: -20px -16px -20px calc(-1 * var(--pb-recuo)); } .pb-fecho { gap: 12px; max-width: none; margin-top: 84px; } .pb-fecho-tx { max-width: 17em; } } @media (min-width: 1081px) { .pb-peca { margin-top: 76px; } .pb-col { max-width: 820px; } .pb-lista { gap: 52px; } .pb-fecho { margin-top: 104px; } .pb-lk { font-size: 1.1875rem; letter-spacing: -.012em; line-height: 1.3; } } /* ========================================================= 10 · AUTOR ========================================================= */ .au { --au-h: min(430px, 56svh); --au-beira: 22px; --au-w: calc(var(--au-h) * .5625); --au-ctrl: rgba(118, 118, 128, .24); --au-ctrl-h: rgba(118, 118, 128, .36); --au-pe: calc(84px + 1.38125rem + 3 * var(--fs-nota) * var(--lh-nota)); } .au-grade { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .au-titulo { max-width: 11em; } .au-peca { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; margin-top: 36px; } .au-pilha { position: relative; width: var(--au-w); height: var(--au-h); border-radius: var(--r-quadro); touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; -webkit-user-select: none; } .au-pilha.au-pegou { cursor: grabbing; } .au-pilha:focus-visible { outline: none; } .au-pilha:focus-visible::after { content: ""; position: absolute; z-index: 30; inset: -6px calc(-6px - var(--au-beira) * 2) -6px -6px; border-radius: calc(var(--r-quadro) + 6px); box-shadow: 0 0 0 2px var(--foco); pointer-events: none; } .au-c { position: absolute; inset: 0; z-index: calc(10 - var(--k, 0)); margin: 0; border-radius: var(--r-quadro); overflow: hidden; isolation: isolate; box-shadow: var(--sombra-1); transform-origin: 50% 50%; transform: translate3d(calc(var(--k, 0) * (var(--au-w) * .04 + var(--au-beira))), 0, 0) scale(calc(1 - .08 * var(--k, 0))); } .au-c:nth-of-type(n+4) { opacity: 0; visibility: hidden; } .au-ci { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; background: var(--sup-1); } .au-ci::before, .au-ci::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; } .au-ci::after { box-shadow: inset 0 0 0 1px var(--borda); } .au-ci::before { box-shadow: inset 0 0 0 1px var(--borda-2); opacity: 0; transition: opacity .32s var(--e-ctrl); } .au-c[aria-hidden=true] .au-ci::before { opacity: 1; } .au-m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: var(--sup-1); pointer-events: none; -webkit-user-drag: none; } .au-foto { top: -12px; height: calc(100% + 24px); object-position: 45% 50%; } .au-veu { position: absolute; inset: 0; z-index: 2; background: #000; opacity: calc(var(--k, 0) * .14); pointer-events: none; } .au-viva .au-c { will-change: transform, opacity; } .au-pp-leva { position: absolute; right: 14px; bottom: 14px; z-index: 20; display: block; opacity: 0; visibility: hidden; } .au-pp { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #f5f5f7; background: rgba(29,29,31,.78); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.24); cursor: pointer; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl); } .au-pp:active { transform: scale(.94); } .au-pp svg { grid-area: 1 / 1; transition: opacity .16s var(--e-ctrl); } .au-i-toca, .au-parado .au-i-pausa { opacity: 0; } .au-parado .au-i-toca { opacity: 1; } .au-leg { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin-top: 18px; } .au-l { grid-area: 1 / 1; display: grid; gap: 2px; justify-items: center; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .14s var(--e-ctrl), transform 0s linear .14s; } .au-l.au-on { opacity: 1; transform: none; transition: opacity .32s var(--e-ctrl) .14s, transform .52s var(--e-mola) .14s; } .au-l b { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; font-weight: 600; color: var(--tx); } .au-l span { font-size: var(--fs-nota); letter-spacing: var(--tr-nota); line-height: var(--lh-nota); color: var(--tx-nota); } .au-ctrl { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; } .au-rd { position: relative; display: none; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--au-ctrl); color: var(--tx); cursor: pointer; touch-action: manipulation; transition: transform .32s var(--e-mola), background-color var(--d-ctrl) var(--e-ctrl), opacity var(--d-ctrl) var(--e-ctrl); } .au-rd:active { transform: scale(.94); } .au-rd[aria-disabled=true] { opacity: .32; cursor: default; } .au-pts { position: relative; display: flex; } .au-pt { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; } .au-pt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tx-3); transition: background-color var(--d-ctrl) var(--e-ctrl); } .au-pt-on { position: absolute; left: 18.5px; top: 18.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--tx); pointer-events: none; } .au-dica { width: 0; min-width: 100%; margin-top: 6px; text-wrap: balance; transition: opacity .32s var(--e-ctrl); } .au-usou .au-dica { opacity: 0; } .au-texto { display: grid; gap: 12px; max-width: 26em; margin-top: 30px; color: var(--tx-2); } .au-texto b { color: var(--tx); } @media (hover: hover) and (pointer: fine) { .au-rd:not([aria-disabled=true]):hover { background: var(--au-ctrl-h); } .au-pp:hover { background: rgba(58,58,60,.86); } .au-pt:hover::before { background: var(--tx-2); } } @media (min-width: 761px) { .au { --au-h: clamp(400px, 60svh, 520px); --au-beira: 28px; } .au-grade { grid-template-columns: auto minmax(0, 31rem); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) var(--au-pe); grid-template-areas: "peca ." "peca titulo" "peca texto" "peca ." "peca ."; column-gap: 56px; justify-items: start; justify-content: center; text-align: left; } .au-titulo { grid-area: titulo; max-width: 9.4em; } .au-peca { grid-area: peca; align-self: start; width: auto; margin-top: 0; padding-right: calc(var(--au-beira) * 2); text-align: center; } .au-rd { display: grid; } .au-ctrl { width: 0; min-width: 100%; } .au-texto { grid-area: texto; margin-top: 26px; gap: 14px; } .au-leg { margin-top: 20px; } .au-dica { margin-top: 8px; } } @media (min-width: 1081px) { .au { --au-h: clamp(420px, 62svh, 560px); } .au-grade { column-gap: 104px; } .au-texto { margin-top: 30px; } } /* ========================================================= 11 · OFERTA — card central: logo, o que vem, preço em rolos de caça-níquel (de → por), botão e selo de garantia Celular: logo → preço → botão → lista → garantia → botão Computador: logo → lista → preço → botão → garantia ========================================================= */ .of { --of-ac: #ff6a1f; --of-ac-2: #ffb27a; --of-ac-3: #ffd9bf; --of-ac-esc: #d9480a; --of-tx: #fff3ea; --of-mudo: #b3a79f; --of-mudo-2: #a39589; position: relative; overflow: hidden; isolation: isolate; padding: 76px 0 84px; background: radial-gradient(ellipse 75% 50% at 50% 42%, rgba(255,106,31,.16), transparent 72%), radial-gradient(ellipse 50% 28% at 50% 100%, rgba(255,178,122,.07), transparent 70%), #0b0706; border-top: 1px solid rgba(255,178,122,.1); border-bottom: 1px solid rgba(255,178,122,.1); color: var(--of-tx); } .of::before { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 92%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,178,122,.4), transparent); } .of-wrap { position: relative; display: flex; justify-content: center; } .of-wrap::before { content: ""; position: absolute; left: 50%; bottom: -18px; width: min(760px, 86%); height: 60px; transform: translateX(-50%); border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #1d130d, #130c08); box-shadow: 0 0 0 1px rgba(255,178,122,.1), 0 30px 60px -20px rgba(0,0,0,.8); z-index: -1; } .of-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 820px; border-radius: 28px; padding: 38px 22px 0; text-align: center; background: radial-gradient(120% 38% at 50% 0%, rgba(255,106,31,.2), transparent 64%), radial-gradient(90% 30% at 50% 58%, rgba(255,106,31,.1), transparent 70%), linear-gradient(180deg, #1c130e 0%, #140d09 52%, #110b08 100%); box-shadow: 0 0 0 1px rgba(255,178,122,.17), inset 0 1px 0 rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.9), 0 30px 130px -50px rgba(255,106,31,.6); } .of-card:focus { outline: none; } .of-card > *:not(.of-borda) { position: relative; z-index: 1; } /* borda com pontos de luz que percorrem o contorno */ .of-borda { position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none; background: linear-gradient(172deg, rgba(255,178,122,.4) 0%, rgba(255,106,31,.16) 26%, rgba(255,106,31,.07) 55%, rgba(255,106,31,.16) 82%, rgba(255,178,122,.3) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .of-borda i { position: absolute; left: 0; top: 0; display: none; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, #fff0e4 14%, rgba(255,190,140,.87) 32%, rgba(255,106,31,.47) 60%, rgba(255,106,31,0) 100%); offset-path: inset(0 round 28px); offset-rotate: 0deg; offset-distance: 0%; will-change: transform; animation: ofOrbita var(--of-volta, 9s) linear infinite; animation-delay: -.5s; } .of-borda i + i { width: 210px; height: 210px; opacity: .55; animation-delay: -.25s; } .of-borda i + i + i { width: 170px; height: 170px; opacity: .3; animation-delay: 0s; } @supports (offset-path: inset(0 round 28px)) { .of-borda i { display: block; } } /* cabeçalho */ .of-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,178,122,.24); background: linear-gradient(135deg, rgba(255,106,31,.15), rgba(255,106,31,.04)); font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: .13em; text-transform: uppercase; color: var(--of-ac-3); } .of-kicker span { color: var(--of-ac-2); font-size: 13px; letter-spacing: 0; } .of-logo { margin: 0 auto 18px; line-height: 0; } .of-logo img { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 28px rgba(255,106,31,.35)); } .of-lead { max-width: 520px; margin: 0 auto; font-size: 15px; line-height: 1.7; color: var(--of-mudo); text-wrap: pretty; } /* compra */ .of-compra { margin-top: 26px; } .of-preco { position: relative; } .of-de { position: relative; z-index: 3; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--of-mudo-2); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .of-de s { color: #e6d6ca; text-decoration-line: line-through; text-decoration-color: var(--of-ac); text-decoration-thickness: 2px; } .of-preco.of-armado .of-de { opacity: 0; transform: translateY(6px); } .of-preco.of-ja .of-de { transition: none; } .of-valor { position: relative; z-index: 1; isolation: isolate; display: flex; justify-content: center; margin: 4px 0 0; font-weight: 800; font-size: clamp(88px, 27vw, 150px); line-height: 1; letter-spacing: -.04em; } .of-fig { position: relative; z-index: 2; display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; } .of-moeda, .of-cent { font-size: .29em; line-height: 1; font-weight: 800; color: var(--of-ac-2); letter-spacing: -.02em; margin-top: .36em; transition: transform .62s cubic-bezier(.7,0,.25,1); } .of-moeda { margin-right: .16em; } .of-cent { margin-left: .08em; } .of-moeda::before, .of-cent::before { content: attr(data-t); } .of-num { position: relative; display: inline-flex; transition: transform .62s cubic-bezier(.7,0,.25,1); } .of-rolo { position: relative; display: block; height: 1em; padding: 0 .1em; margin: 0 -.1em; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); } .of-rolo::before { content: attr(data-d); display: block; visibility: hidden; } .of-rolo + .of-rolo { margin-left: -.14em; } .of-fita { position: absolute; left: .1em; right: .1em; top: 0; display: block; } .of-cel { display: flex; justify-content: center; height: 1em; background: linear-gradient(180deg, #fff 14%, #ffe6d4 46%, #ff9a52 88%); -webkit-background-clip: text; background-clip: text; color: transparent; } .of-cel::before { content: attr(data-d); } .of-num .of-rolo-x { position: absolute; top: 0; right: calc(100% - .14em); margin: 0; opacity: 0; transition: opacity .3s ease; } .of-fig.of-largo .of-moeda { transform: translateX(calc(var(--of-w, 60px) * var(--of-k, 1) * -.5)); } .of-fig.of-largo .of-num, .of-fig.of-largo .of-cent { transform: translateX(calc(var(--of-w, 60px) * var(--of-k, 1) * .5)); } .of-fig.of-largo .of-rolo-x { opacity: 1; } .of-fig.of-ja .of-moeda, .of-fig.of-ja .of-num, .of-fig.of-ja .of-cent, .of-fig.of-ja .of-rolo-x { transition: none; } /* batida final */ .of-luz, .of-anel, .of-faiscas { position: absolute; z-index: 0; left: 50%; top: 50%; pointer-events: none; } .of-luz { width: 3.1em; height: 1.3em; margin: -.65em 0 0 -1.55em; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,31,.4), rgba(255,106,31,.12) 55%, transparent); opacity: .55; } .of-anel { width: 2.2em; height: .94em; margin: -.47em 0 0 -1.1em; border-radius: 50%; border: 2px solid var(--of-ac-3); box-shadow: 0 0 18px rgba(255,106,31,.8), inset 0 0 18px rgba(255,106,31,.5); opacity: 0; transform: scale(.6); } .of-faiscas { width: 0; height: 0; } .of-faiscas i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; opacity: 0; background: radial-gradient(closest-side, #fff, #ffd9bf 45%, #ffb27a); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: translate(calc(var(--x) * .3), calc(var(--y) * .3)) scale(.3); } .of-faiscas i:nth-child(1) { --x: 1.3em; --y: 0em; } .of-faiscas i:nth-child(2) { --x: 1.15em; --y: .24em; } .of-faiscas i:nth-child(3) { --x: .61em; --y: .44em; } .of-faiscas i:nth-child(4) { --x: -.61em; --y: .44em; } .of-faiscas i:nth-child(5) { --x: -1.15em; --y: .24em; } .of-faiscas i:nth-child(6) { --x: -1.3em; --y: 0em; } .of-faiscas i:nth-child(7) { --x: -1.15em; --y: -.24em; } .of-faiscas i:nth-child(8) { --x: -.61em; --y: -.44em; } .of-faiscas i:nth-child(9) { --x: .61em; --y: -.44em; } .of-faiscas i:nth-child(10) { --x: 1.15em; --y: -.24em; } .of-fig, .of-luz { will-change: transform; } .of-valor.of-bate .of-fig { animation: ofBatida 1.05s cubic-bezier(.3,0,.3,1) both; } .of-valor.of-bate .of-luz { animation: ofClarao 1.3s ease-out both; } .of-valor.of-bate .of-anel { animation: ofAnel .9s cubic-bezier(.2,.7,.3,1) both; } .of-valor.of-bate .of-faiscas i { animation: ofFaisca .9s cubic-bezier(.15,.7,.3,1) both; } .of-valor.of-bate .of-faiscas i:nth-child(even) { animation-duration: 1.05s; animation-delay: .05s; } .of-termos { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--of-mudo); } .of-termos b { font-weight: 700; color: var(--of-tx); } .of-ponto { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--of-ac); } /* botão */ .of-btn { position: relative; overflow: hidden; isolation: isolate; display: flex; width: 100%; max-width: 520px; min-height: 64px; margin: 26px auto 0; padding: 19px 24px; justify-content: center; align-items: center; gap: 14px; border-radius: 16px; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: #120802; white-space: normal; text-wrap: balance; text-align: center; background: linear-gradient(120deg, #ffa25c 0%, #ff6a1f 45%, #e04a0c 100%); box-shadow: 0 18px 44px -14px rgba(255,106,31,.8), 0 0 0 1px rgba(255,210,180,.25), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.19); transition: transform .32s var(--e-mola), box-shadow var(--d-ctrl) var(--e-ctrl), background var(--d-ctrl) var(--e-ctrl); } .of-btn:active { transform: scale(.98); transition-duration: var(--d-toque); } .of-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4) 50%, transparent); transform: translateX(-120%) skewX(-18deg); animation: ofVarre 3.8s ease-in-out infinite; } .of-seta { font-size: 22px; line-height: 1; } @media (hover: hover) and (pointer: fine) { .of-btn:hover { background: linear-gradient(120deg, #ffb070 0%, #ff7d3a 45%, #ee5714 100%); box-shadow: 0 22px 54px -14px rgba(255,106,31,.93), 0 0 0 1px rgba(255,220,195,.4), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.19); } } .of-nota { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 14px auto 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--of-mudo-2); } .of-nota .of-ponto { display: none; } .of-nota-g { display: inline-flex; align-items: center; gap: 6px; color: #ffd6bb; } .of-nota-g svg { flex: none; width: 15px; height: 15px; } .of-pag { margin: 6px auto 0; font-size: 12.5px; line-height: 1.5; color: #7d7168; } /* o que vem */ .of-inclui { margin-top: 38px; } .of-rot { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto 14px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--of-ac-2); } .of-rot::before, .of-rot::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,178,122,.28)); } .of-rot::after { background: linear-gradient(270deg, transparent, rgba(255,178,122,.28)); } .of-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; gap: 2px; text-align: left; } .of-lista li { position: relative; display: flex; align-items: center; padding: 10px 6px 10px 42px; font-size: 15px; font-weight: 600; line-height: 1.5; color: #f1e6dd; border-bottom: 1px solid rgba(255,255,255,.045); } .of-lista li:last-child { border-bottom: 0; } .of-lista li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: linear-gradient(150deg, #ffd2ad 0%, #ff6a1f 52%, #c23d06 100%); box-shadow: 0 0 0 3px rgba(255,106,31,.13), 0 4px 14px rgba(255,106,31,.36), inset 0 1px 0 rgba(255,255,255,.4); } .of-lista li::after { content: ""; position: absolute; left: 13px; top: 50%; width: 5.5px; height: 10.5px; margin-top: -7.5px; border: solid #fff; border-width: 0 2.3px 2.3px 0; border-radius: 0 0 1px 0; transform: rotate(43deg); } .of-lista .of-dest { margin-bottom: 6px; padding: 13px 14px 13px 50px; border: 1px solid rgba(255,178,122,.28); border-radius: 14px; background: linear-gradient(115deg, rgba(255,106,31,.24), rgba(255,106,31,.06) 70%); color: #fff; } .of-lista .of-dest::before { left: 14px; } .of-lista .of-dest::after { left: 23px; } .of-lista b { font-weight: 700; } /* garantia */ .of-garantia { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 34px -22px 0; padding: 32px 22px 34px; border-top: 1px solid rgba(255,178,122,.12); border-radius: 0 0 28px 28px; background: radial-gradient(70% 90% at 50% 0%, rgba(255,106,31,.12), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,106,31,.05)); } .of-selo { position: relative; flex: none; width: 172px; height: 172px; } .of-selo::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,31,.3), transparent 72%); } .of-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .of-selo-estrela { filter: drop-shadow(0 10px 18px rgba(10,3,0,.6)); } .of-selo-anel { animation: ofGira 40s linear infinite; } .of-selo-texto { font-size: 17px; font-weight: 700; letter-spacing: .06em; fill: #ffe7d6; } .of-selo-num { font-size: 88px; font-weight: 800; letter-spacing: -.02em; } .of-selo-dias { font-size: 18px; font-weight: 700; letter-spacing: .3em; fill: #fff1e6; } .of-selo-brilho { position: absolute; inset: 20.8%; border-radius: 50%; overflow: hidden; pointer-events: none; } .of-selo-brilho::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.36) 50%, transparent); transform: translateX(-160%) rotate(18deg); animation: ofReflexo 5.2s ease-in-out infinite; } .of-g-tx { max-width: 380px; } .of-g-tx h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: var(--of-tx); } .of-g-tx p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--of-mudo); } .of-btn-fim { margin-top: 8px; } /* laços pausados fora da tela */ .of.of-js:not(.of-on) .of-borda i, .of.of-js:not(.of-on) .of-selo-anel, .of.of-js:not(.of-on) .of-selo-brilho::before, .of.of-js:not(.of-on) .of-btn::after { animation-play-state: paused; } @keyframes ofGira { to { transform: rotate(360deg); } } @keyframes ofOrbita { from { offset-distance: .01%; } to { offset-distance: 100%; } } @keyframes ofVarre { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(330%) skewX(-18deg); } } @keyframes ofReflexo { 0%, 40% { transform: translateX(-160%) rotate(18deg); } 75%, 100% { transform: translateX(360%) rotate(18deg); } } @keyframes ofBatida { 0% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(.97); } 46% { transform: scale(1.08); } 72%, 100% { transform: scale(1); } } @keyframes ofClarao { 0% { opacity: .55; transform: scale(.8); } 18% { opacity: 1; transform: scale(1.2); } 100% { opacity: .55; transform: scale(1); } } @keyframes ofAnel { 0% { opacity: 0; transform: scale(.6); } 14% { opacity: .9; } 60% { opacity: .35; } 100% { opacity: 0; transform: scale(1.1); } } @keyframes ofFaisca { 0% { opacity: 0; transform: translate(calc(var(--x) * .3), calc(var(--y) * .3)) scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.9) rotate(45deg); } } @media (min-width: 600px) { .of-card { padding: 46px 44px 0; } .of-garantia { margin: 38px -44px 0; padding: 34px 44px 38px; } .of-logo img { width: 360px; } .of-lead { font-size: 16px; } .of-nota { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; } .of-nota .of-ponto { display: block; } } @media (min-width: 900px) { .of { padding: 112px 0 124px; } .of-card { padding: 56px 64px 0; } .of-logo img { width: 400px; } .of-lead { font-size: 17px; max-width: 560px; } .of-inclui { order: 1; margin-top: 36px; } .of-compra { order: 2; margin-top: 36px; padding-top: 34px; border-top: 1px solid rgba(255,178,122,.12); } .of-garantia { order: 3; } .of-rot, .of-lista { max-width: none; } .of-lista { grid-template-columns: 1fr 1fr; column-gap: 26px; } .of-lista .of-dest { grid-column: 1 / -1; justify-self: center; width: auto; padding: 13px 24px 13px 52px; margin-bottom: 10px; } .of-lista li:nth-last-child(2) { border-bottom: 0; } .of-valor { font-size: 152px; } .of-btn { font-size: 18px; min-height: 68px; } .of-garantia { flex-direction: row; justify-content: center; gap: 30px; margin: 44px -64px 0; padding: 36px 64px 44px; text-align: left; } .of-selo { width: 180px; height: 180px; } .of-g-tx h3 { font-size: 26px; } .of-g-tx p { font-size: 16px; } .of-g-tx { max-width: 400px; } .of-btn-fim { display: none; } } @media (max-width: 380px) { .of-card { padding: 34px 16px 0; } .of-garantia { margin: 30px -16px 0; padding: 28px 16px 30px; } .of-kicker { gap: 7px; padding: 7px 12px; letter-spacing: .07em; } .of-lista li { padding-left: 40px; } .of-lista .of-dest { padding-left: 48px; padding-right: 10px; } .of-btn { padding: 18px 14px; font-size: 15px; gap: 10px; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .of-borda i { display: none; } .of-selo-anel, .of-selo-brilho::before, .of-btn::after { animation: none; } .of-btn::after { opacity: 0; } .of-de, .of-moeda, .of-num, .of-cent, .of-rolo-x { transition: none; } } /* ========================================================= 12 · PERGUNTAS ========================================================= */ .fq { --fq-r: 18px; --sec-t: calc(var(--sec-y) * .6); position: static; } .fq-lista { --rv-passo: 40ms; --d-entra: var(--d-entra-curta); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 780px; margin: 36px auto 0; } .fq-item { position: relative; border-radius: var(--fq-r); background: var(--sup); overflow: hidden; overflow: clip; touch-action: manipulation; } .fq-item::before { content: ""; position: absolute; inset: 0; background: var(--tx); opacity: calc(.08 * var(--t, 0)); pointer-events: none; } .fq-q { font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.3; font-weight: 600; text-wrap: pretty; } .fq-bt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 16px 16px 16px 20px; text-align: left; font-weight: inherit; color: var(--tx); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .fq-bt:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; border-radius: calc(var(--fq-r) - 3px); } .fq-ic { position: relative; display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; transform: scale(calc(1 - .1 * var(--t, 0))); } .fq-ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tx); opacity: .06; transition: opacity var(--d-ctrl) var(--e-ctrl); } .fq-ic i { position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; } .fq-ic i + i { transform: rotate(calc(90deg * (1 - var(--p, 0)))); } .fq-r { position: relative; overflow: hidden; overflow: clip; } .fq-rin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 20px 22px; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.47; color: var(--tx-2); opacity: calc(var(--p, 0) * var(--p, 0)); transform: translate3d(0, calc((var(--p, 0) - 1) * 10px), 0); } .fq-rin b { color: var(--tx); font-weight: 600; } .fq-ul { display: grid; gap: 8px; } .fq-ul li { position: relative; padding-left: 16px; } .fq-ul li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 4px; height: 4px; border-radius: 50%; background: var(--tx-3); } .fq-fora { visibility: hidden; } .fq-sup { max-width: 780px; margin: 28px auto 0; text-align: center; } .fq-sup a { color: var(--ac-tx); text-decoration: underline; text-underline-offset: .2em; } @media (hover: hover) and (pointer: fine) { .fq-item::after { content: ""; position: absolute; inset: 0; background: var(--tx); opacity: 0; pointer-events: none; transition: opacity var(--d-ctrl) var(--e-ctrl); } .fq-item:has(.fq-bt:hover)::after { opacity: .025; } .fq-bt:hover .fq-ic::before { opacity: .14; } } @media (max-width: 360px) { .fq-bt { padding: 15px 14px 15px 16px; gap: 12px; } .fq-rin { padding: 0 16px 20px; } } @media (min-width: 761px) { .fq { --fq-r: 20px; } .fq-lista { gap: 10px; margin-top: 56px; } .fq-q { font-size: 1.1875rem; letter-spacing: -.014em; line-height: 1.26; } .fq-bt { min-height: 72px; padding: 20px 20px 20px 28px; gap: 20px; } .fq-ic { width: 32px; height: 32px; } .fq-rin { gap: 12px; padding: 0 76px 28px 28px; } .fq-sup { margin-top: 32px; } } @media (min-width: 1081px) { .fq-lista { max-width: 820px; margin-top: 64px; } .fq-q { font-size: 1.3125rem; letter-spacing: -.016em; line-height: 1.24; } .fq-bt { min-height: 78px; padding: 22px 22px 22px 32px; } .fq-rin { padding: 0 84px 32px 32px; font-size: 1.1875rem; letter-spacing: -.012em; } .fq-sup { max-width: 820px; } } /* ========================================================= 13 · FIM ========================================================= */ .fm { --sec-b: 80px; --fm-vao: 28px; --fm-vao-p: 16px; --fm-ctrl: rgba(118, 118, 128, .24); --fm-ctrl-alta: #636366; --fm-corte: rgba(255, 69, 58, .16); --fm-fs: min(var(--fs-1), 10.5vw); --fm-ph: min(1.5rem, 7.5vw); --fm-hc: calc(var(--fm-fs) * (var(--lh-1) + .14)); --fm-hp: calc(var(--fm-ph) + var(--fm-fs) * .1); --fm-folga: calc(2 * var(--fm-hc) + var(--fm-hp)); } .fm.fm-viva { --sec-t: 36px; } .fm-cxa { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .fm-peca { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--fm-vao); width: 100%; min-width: 0; } .fm-viva .fm-peca { padding-top: var(--fm-folga); } .fm-titulo { position: relative; width: 100%; font-size: var(--fm-fs); } .fm-l { display: block; white-space: nowrap; } .fm-viva .fm-l { will-change: transform; } .fm-sai { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: center; height: var(--fm-hc); transform-origin: 50% 0; visibility: hidden; } .fm-pausa { height: var(--fm-hp); } .fm-viva .fm-sai { visibility: visible; } .fm-gr { position: relative; display: block; flex: none; } .fm-cx { position: relative; display: flex; align-items: center; justify-content: center; height: calc(var(--fm-hc) - var(--fm-fs) * .08); padding-inline: .24em; border-radius: .28em; overflow: hidden; } .fm-cx::before { content: ""; position: absolute; inset: 0; background: var(--fm-corte); opacity: 0; transition: opacity .32s var(--e-ctrl); transition-delay: calc(var(--k, 0) * .12s); } .fm-tx { position: relative; display: block; } .fm-p { display: block; transition: opacity .32s var(--e-ctrl); transition-delay: calc(var(--k, 0) * .12s); } .fm-risco { position: absolute; left: -.1em; right: -.1em; top: 56%; height: max(2px, .056em); border-radius: 2px; background: var(--vermelho); transform: scaleX(0); transform-origin: 0 50%; transition: transform .46s var(--e-mola); transition-delay: calc(var(--k, 0) * .12s); } .fm-pausa .fm-cx { height: var(--fm-ph); padding-inline: 12px; border-radius: var(--r-pilula); } .fm-pausa .fm-tx { font-size: min(.8125rem, 4.2vw); font-weight: 500; letter-spacing: 0; line-height: 1; } .fm-pausa .fm-p { display: flex; align-items: center; gap: 8px; color: var(--tx-nota); } .fm-pausa .fm-p-m { position: absolute; inset: 0; color: var(--vermelho); opacity: 0; } .fm-onda { display: block; flex: none; width: 27px; height: 4px; border-radius: 1px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); } .fm-etq { position: absolute; left: calc(100% + 10px); top: 50%; display: block; transform: translate3d(0, -50%, 0); font-size: min(.75rem, 3.75vw); font-weight: 500; letter-spacing: 0; line-height: 1.2; text-align: left; white-space: nowrap; color: var(--vermelho); pointer-events: none; } .fm-etq > span { display: block; opacity: 0; transition: opacity .32s var(--e-ctrl); transition-delay: calc(var(--k, 0) * .12s + .16s); } .fm-etq.fm-fora { visibility: hidden; } .fm-marca .fm-cx::before { opacity: 1; } .fm-marca .fm-p { opacity: .5; } .fm-marca .fm-risco { transform: none; } .fm-marca .fm-etq > span { opacity: 1; } .fm-marca .fm-pausa .fm-p { opacity: 0; } .fm-marca .fm-pausa .fm-p-m { opacity: 1; } .fm-seg { position: relative; display: none; grid-template-columns: 1fr 1fr; width: 208px; height: 40px; padding: 2px; border-radius: 11px; background: var(--fm-ctrl); cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .fm-viva .fm-seg { display: grid; } .fm-seg::before { content: ""; position: absolute; inset: -8px -10px; } .fm-seg-pol { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); transform: translate3d(100%, 0, 0); will-change: transform; pointer-events: none; } .fm-seg-pol i { position: absolute; inset: 0; border-radius: 9px; background: var(--fm-ctrl-alta); box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.28); transition: transform .32s var(--e-mola); } .fm-press .fm-seg-pol i { transform: scale(.95); transition-duration: var(--d-toque); } .fm-seg.fm-press { cursor: grabbing; } .fm-seg-op { position: relative; z-index: 1; display: grid; border-radius: 9px; font-size: .9375rem; font-weight: 500; letter-spacing: -.008em; line-height: 1; color: var(--tx-2); cursor: pointer; } .fm-seg-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .fm-seg-op span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 9px; transition: color var(--d-ctrl) var(--e-ctrl), opacity var(--d-toque) var(--e-toque); } .fm-seg-op input:checked + span { color: var(--tx); } .fm-resto { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--fm-vao); width: 100%; margin-top: var(--fm-vao); } .fm-apoio { max-width: 19em; text-wrap: balance; } .fm-ap2 { display: block; } .fm-compra { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--fm-vao-p); width: 100%; } .fm-bt { max-width: 100%; padding-block: .35em; white-space: normal; text-wrap: balance; } @media (hover: hover) and (pointer: fine) { .fm-seg-op:hover span { color: var(--tx); } } @media (max-width: 340px) { .fm-pt { display: none; } .fm-nq { display: block; } } @media (min-width: 761px) { .fm { --sec-b: 104px; --fm-vao: 36px; --fm-vao-p: 18px; --fm-ph: 1.75rem; } .fm.fm-viva { --sec-t: 56px; } .fm-seg { width: 224px; } .fm-pausa .fm-tx { font-size: .8125rem; } .fm-etq { left: calc(100% + 14px); font-size: .8125rem; } .fm-etq br { display: none; } .fm-onda { width: 37px; } .fm-apoio { max-width: 30em; } } @media (min-width: 1081px) { .fm { --sec-b: 120px; --fm-vao: 40px; --fm-ph: 2rem; } .fm-pausa .fm-tx { font-size: .875rem; } .fm-etq { left: calc(100% + 18px); font-size: .875rem; } } @media (min-width: 761px) and (max-height: 830px) { .fm { --sec-b: 88px; --fm-vao: 32px; } } /* ========================================================= Movimento reduzido ========================================================= */ @media (prefers-reduced-motion: reduce) { .js .rv { transform: none; transition: opacity .2s ease; transition-delay: 0s; } .js .tp-e, .js .tp-palco.tp-e { animation: none; } .btn, .btn:active { transform: none; } .tl-frase, .tl-frase.tl-on, .es-leg, .es-leg.es-on, .au-l, .au-l.au-on { transform: none; transition: opacity .2s ease; } .lg-yt img { animation: none; } .cv-viva .cv-m, .cv-viva .cv-m.cv-on { transform: none; transition: opacity .2s ease, visibility 0s; } } @media print { .cab, .bfix { display: none !important; } .js .rv { opacity: 1; transform: none; } }