/* DestaqueArt — só da PÁGINA INICIAL: apresentação (história com o celular 3D) e a abertura (splash).
   Carregado apenas em / (layouts/site.php com $publicPage); usa as cores e fontes do destaque.css. */
/* ======================================================================
   APRESENTAÇÃO (site público): a página inteira é a história contada pelo celular
   ====================================================================== */
.pub { overflow-x: clip; }
.pub-top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 max(18px, calc((100vw - 1180px) / 2 + 18px)); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.pub-top.is-scrolled { background: rgba(27, 28, 32, .78); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: var(--line); }
.pub-top__brand img { height: 18px; width: auto; }
/* Página inicial: logo maior no centro, Entrar e Começar à direita */
.pub .pub-top__brand img { height: 22px; }
@media (min-width: 700px) {
  .pub .pub-top { display: grid; grid-template-columns: 1fr auto 1fr; }
  .pub .pub-top__brand { grid-column: 2; }
  .pub .pub-top__brand img { height: 28px; }
  .pub .pub-top__end { grid-column: 3; justify-self: end; }
}
/* Páginas públicas sem a barra de rolagem lateral (a página continua rolando) */
html.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
html.no-scrollbar::-webkit-scrollbar { display: none; }
.pub-top__end { margin-left: auto; display: flex; gap: 6px; align-items: center; }
@media (min-width: 900px) { .pub-top__brand img { height: 20px; } }.badge { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 7px 14px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 700; backdrop-filter: blur(8px); }
.shine--move { background: linear-gradient(100deg, #9ea5af 0%, #f4f4f2 25%, #c9ced6 45%, #ffffff 55%, #9ea5af 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine-move 6s linear infinite; }
@keyframes shine-move { to { background-position: -250% 0; } }
/* "destaque" do título: revela da esquerda com uma luz passando, traço prateado se desenha, a estrela da marca surge e
   pisca, e depois o brilho prateado corre e a palavra "respira" num leve halo. Começa quando a abertura fecha (.is-in). */
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl__word { display: inline-block; padding-right: .04em; background: linear-gradient(90deg, #a78bfa 0%, #9b7bf7 20%, #b38cfb 36%, #d9c9fe 50%, #b38cfb 64%, #9b7bf7 80%, #a78bfa 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hl-shine 9s linear infinite, hl-glow 4.5s ease-in-out 2s infinite; }
/* roxo contínuo (o degradê começa e termina na mesma cor e anda exatamente 1 volta: sem pulo no recomeço) */
@keyframes hl-shine { to { background-position: 200% 0; } }
@keyframes hl-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(139, 92, 246, .18)); } 50% { filter: drop-shadow(0 0 20px rgba(167, 139, 250, .38)); } }
.hl::before { content: ""; position: absolute; top: 4%; bottom: 8%; left: 0; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 18px 4px rgba(244, 244, 242, .75); opacity: 0; pointer-events: none; }
.hl__line { position: absolute; left: 0; width: 100%; bottom: -.1em; height: .2em; overflow: visible; pointer-events: none; }
.hl__line path { fill: none; stroke: url(#hl-silver); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hl__spark { position: absolute; top: -.12em; right: -.34em; width: .36em; height: .36em; fill: #ede9fe; filter: drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 3px #a855f7); animation: hl-twinkle 2.6s ease-in-out infinite; }
@keyframes hl-twinkle { 0%, 100% { transform: scale(.72) rotate(0deg); opacity: .75; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hl__word { clip-path: inset(-20% 100% -30% 0); }
  .js .hl__line path { stroke-dashoffset: 1; }
  .js .hl__spark { opacity: 0; transform: scale(0); animation: none; }
  .is-in .hl__word { animation: hl-reveal 1.1s cubic-bezier(.2, .8, .2, 1) .2s forwards, hl-shine 9s linear infinite, hl-glow 4.5s ease-in-out 2.2s infinite; }
  .is-in .hl::before { animation: hl-bar 1.1s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .is-in .hl__line path { animation: hl-draw .9s cubic-bezier(.3, .7, .2, 1) 1.05s forwards; }
  .is-in .hl__spark { animation: hl-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1.6s forwards, hl-twinkle 2.6s ease-in-out 2.2s infinite; }
}
@keyframes hl-reveal { to { clip-path: inset(-20% -10% -30% 0); } }
@keyframes hl-bar { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hl-draw { to { stroke-dashoffset: 0; } }
@keyframes hl-pop { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: scale(.72) rotate(0deg); } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pub-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 30px 18px 34px; color: var(--mute-2); font-size: 13px; border-top: 1px solid var(--line); }
.pub-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pub-foot a:hover { color: var(--ink); }

/* Fundo: aurora prateada e grade sutil */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -10%; top: -10%; background: radial-gradient(circle, rgba(201, 206, 214, .28), transparent 65%); }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -8%; top: 20%; background: radial-gradient(circle, rgba(150, 165, 190, .22), transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: 30%; bottom: -15%; background: radial-gradient(circle, rgba(244, 244, 242, .12), transparent 65%); animation-duration: 26s; animation-delay: -12s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.12); } 100% { transform: translate(-5%, 4%) scale(.95); } }
.gridlines { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); }

/* ---------- História (computador): celular preso na tela, textos passando ---------- */
.story { position: relative; }
.story__sticky { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; pointer-events: none; perspective: 1700px; perspective-origin: 50% 42%; }
.story__phone { position: relative; transform-style: preserve-3d; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1)); will-change: transform, opacity; }
.story__phone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -70px; height: 50px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); filter: blur(12px); transform: translateX(calc(var(--ry-shadow, 0) * 1px)); pointer-events: none; }
.story__steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.story__step { display: flex; align-items: center; min-height: 105vh; width: 100%; max-width: 1180px; margin: 0 auto; padding: 90px 18px 40px; }
.story__step:first-child { min-height: 100vh; }
.story__step:nth-child(even) { justify-content: flex-end; }
.story__text { display: grid; gap: 18px; width: 100%; max-width: 470px; }
.story__text .lead { max-width: 38ch; }
.story__step--hero .story__text { max-width: 560px; }
.step-num { font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--mute); }
.step-num::after { content: ""; display: inline-block; width: 38px; height: 2px; margin-left: 10px; vertical-align: middle; border-radius: 2px; background: var(--accent-grad); }
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; color: var(--mute); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scroll-hint i { position: relative; width: 20px; height: 32px; border-radius: 12px; border: 1.5px solid var(--mute-2); }
.scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 3px; background: var(--ink); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
.js .story__text > * { opacity: .08; transform: translateY(26px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.js .story__step.is-active .story__text > * { opacity: 1; transform: none; filter: none; }
.js .story__step.is-active .story__text > :nth-child(2) { transition-delay: .07s; }
.js .story__step.is-active .story__text > :nth-child(3) { transition-delay: .14s; }
.js .story__step.is-active .story__text > :nth-child(4) { transition-delay: .21s; }
.js .story__step.is-active .story__text > :nth-child(5) { transition-delay: .28s; }
.plan-list { display: grid; gap: 8px; }
.plan-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(37, 39, 43, .72); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: border-color .2s, transform .25s var(--ease); }
.plan-row:hover { border-color: var(--line-2); transform: translateX(4px); }
.plan-row span { flex: 1; display: grid; }
.plan-row b { font-size: 14px; letter-spacing: .12em; }
.plan-row small { color: var(--mute); font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.plan-row strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.plan-row strong small { font-size: 12px; margin-left: 2px; }
.plan-row .icon { color: var(--mute); }
.plan-row.is-featured { border: 1px solid transparent; background: linear-gradient(#2a2c31, #2a2c31) padding-box, conic-gradient(from var(--spin), rgba(201, 206, 214, .15), #a855f7, #6d28d9 12%, rgba(201, 206, 214, .15) 30%, rgba(201, 206, 214, .15)) border-box; animation: spin-border 5s linear infinite; }
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --spin: 360deg; } }

/* ---------- Celular realista em 3D (modelo Pro prateado) ----------
   Frente e traseira são faces; laterais, platô das câmeras, lentes e botões são fatias
   montadas pelo destaque.js, que também acende cada fatia conforme o giro. */
.phone3d { --w: 300px; --h: 640px; --rad: 52px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); will-change: transform; }
.phone3d > .phone { position: absolute; inset: 0; transform: translateZ(18px); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Frente: aro de alumínio fino, borda preta do vidro e a tela */
.phone { width: var(--w, 300px); height: var(--h, 640px); padding: 3px; border-radius: var(--rad, 52px); background: linear-gradient(135deg, #f7f8f9 0%, #b4bac1 14%, #eceef0 30%, #8f959d 50%, #e3e6e9 68%, #a1a7af 84%, #f2f4f6 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 0 0 1.5px rgba(110, 118, 128, .5), 0 50px 110px rgba(0, 0, 0, .55); }
.phone__screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border: 7px solid #020203; border-radius: calc(var(--rad, 52px) - 3px); overflow: hidden; background: radial-gradient(120% 55% at 50% 0%, #292b31, var(--bg) 62%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.phone__glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 43%, rgba(255, 255, 255, .03) 51%, transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 18%); background-size: 260% 100%, 100% 100%; background-position: var(--glare, 50%) 0, 0 0; mix-blend-mode: screen; }
.phone__status { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 22px 0 30px; font-size: 13px; font-weight: 700; flex: none; }
.phone__island { position: relative; width: 94px; height: 28px; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
.phone__island b { position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a4966, #0b0e16 45%, #050608 70%); box-shadow: inset 0 0 0 1px rgba(90, 110, 150, .25); }
.phone__icons { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
/* Topo igual ao app: menu · "Destaque" · nova conversa */
.phone__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 14px 8px; flex: none; }
.phone__logo { display: block; height: 12px; width: auto; }
.phone__icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink-2); }
.phone .bot-mark { width: 24px; height: 24px; border-radius: 8px; }
.phone .bot-mark svg { width: 10px; }
.phone__scenes { position: relative; flex: 1; overflow: hidden; } /* o que sobe além do topo some, como num chat */
.phone__composer { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin: 6px 10px 6px; padding: 5px 5px 5px 6px; border-radius: 19px; background: var(--card); border: 1px solid var(--line-2); color: var(--mute-2); font-size: 11.5px; line-height: 1.4; flex: none; transition: border-color .3s; }
.phone__input { flex: 1; align-self: center; max-height: 3em; overflow: hidden; }
.phone__composer.is-typing { border-color: rgba(201, 206, 214, .4); }
.phone__composer.is-typing .phone__input { color: var(--ink); }
.phone__composer.is-typing .phone__input::after { content: ""; display: inline-block; width: 1.5px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: caret 1s steps(1) infinite; }
.phone__composer.is-ready .phone__input::after { display: none; }
.phone__composer i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card-3); color: var(--mute); transition: background .3s, color .3s; }
.phone__composer .phone__clip { background: none; color: var(--mute-2); }
.phone__composer.is-typing .phone__send { background: var(--silver); color: var(--on-silver); }
.phone__composer.is-ready .phone__send { animation: btn-pulse 1.4s ease-in-out infinite; }
.phone__home { display: block; width: 112px; height: 4px; margin: 4px auto 8px; border-radius: 4px; background: rgba(255, 255, 255, .7); flex: none; }
/* Traseira: alumínio escovado, painel de vidro fosco e a marca gravada */
.phone__back { position: absolute; inset: 0; border-radius: var(--rad); overflow: hidden; transform: rotateY(180deg) translateZ(18px); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(172deg, #eceef1 0%, #d9dde1 48%, #cbd0d5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 2px rgba(140, 148, 158, .3); }
.phone__glass { position: absolute; left: 15px; right: 15px; top: 196px; bottom: 15px; display: grid; place-items: center; padding-top: 36px; border-radius: 37px; color: #c6cbd1; background: linear-gradient(168deg, #fbfbfc 0%, #f0f2f4 42%, #e3e6ea 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(140, 148, 158, .26), 0 -1px 0 rgba(120, 128, 138, .12); }
.phone__glass svg { width: 62px; height: auto; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1px 0 rgba(110, 118, 128, .22)); }
/* Luz nas faces: escurece quando a face vira para longe da luz e um reflexo corre com o giro */
.p3-shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #1a1c20; opacity: var(--dim-back, 0); pointer-events: none; }
.p3-sheen { position: absolute; top: 0; bottom: 0; left: -100%; z-index: 4; width: 300%; background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .1) 53%, transparent 62%); transform: translateX(var(--sheen, 0px)); pointer-events: none; }
/* Celular 3D (modelo real): canvas WebGL + a tela HTML encaixada por cima (CSS3DRenderer) */
.story__gl { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; }
.story__gl-canvas, .story__gl-css { position: absolute; left: 0; top: 0; }
.story__gl-css, .story__gl-css * { pointer-events: none !important; }
.story.is-gl-loading .story__phone, .story.has-gl .story__phone { opacity: 0 !important; }
.story.is-page .story__gl { display: none; }
.phone.is-gl { padding: 0; background: none; box-shadow: none; border-radius: 42px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.phone.is-gl .phone__screen { border-width: 6px; border-radius: 42px; box-shadow: none; }
/* Peças montadas em fatias (versão simples, se o 3D não carregar) */
.phone__body { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.p3 { position: absolute; left: 0; top: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.p3--seg { background-color: #cfd3d8; background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .16)); }
.p3--antenna { background-image: linear-gradient(90deg, transparent 44px, rgba(58, 64, 72, .5) 44px 47px, transparent 47px calc(100% - 47px), rgba(58, 64, 72, .5) calc(100% - 47px) calc(100% - 44px), transparent calc(100% - 44px)), linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .16)); }
.p3--well { background-image: none; }
.p3--btn { border-radius: 4.5px; background-image: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 28%, transparent 72%, rgba(0, 0, 0, .2)); box-shadow: inset 0 0 0 .5px rgba(40, 44, 50, .35); }
.p3--bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 28px; }
.p3--bottom b { display: block; height: 6px; background: radial-gradient(circle, #2c2f35 1.3px, transparent 1.8px) 0 50% / 6px 6px repeat-x; }
.p3--bottom b:nth-child(2) { width: 30px; height: 9px; border-radius: 5px; background: linear-gradient(180deg, #0b0c0e, #26292e); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .35); }
/* Platô das câmeras: bloco de alumínio que atravessa a traseira */
.p3-plateau { width: 300px; height: 184px; overflow: hidden; border-radius: 52px 52px 30px 30px; background: linear-gradient(174deg, #f3f5f7 0%, #e1e4e8 55%, #d3d7dc 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 3px rgba(120, 128, 138, .2); }
.p3-flash { position: absolute; left: 228px; top: 42px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 46% 42%, #ffffff 0 20%, #f2f0e9 36%, #d9d7d0 54%, #b7babe 68%, #eef0f2 76%, #9aa0a7 100%); box-shadow: 0 0 0 1px rgba(120, 128, 138, .45), inset 0 1px 2px rgba(0, 0, 0, .2); }
.p3-mic { position: absolute; left: 238.5px; top: 98.5px; width: 3px; height: 3px; border-radius: 50%; background: #3a3d43; }
.p3-lidar { position: absolute; left: 227px; top: 127px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #50545d 0 7%, #17191d 38%, #07080a 70%); box-shadow: 0 0 0 1px rgba(100, 106, 114, .5), inset 0 0 3px rgba(0, 0, 0, .8); }
/* Lentes: aro metálico saltado e vidro com reflexos */
.p3-ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 210deg, #ffffff, #a9afb6 14%, #f1f3f5 28%, #7f868f 46%, #e9ecef 62%, #9ba1a9 80%, #ffffff); -webkit-mask: radial-gradient(circle, transparent 20.5px, #000 21px); mask: radial-gradient(circle, transparent 20.5px, #000 21px); }
.p3-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 21px, rgba(0, 0, 0, .55) 21.5px, rgba(0, 0, 0, .15) 23px, rgba(0, 0, 0, 0) 24.5px, rgba(0, 0, 0, 0) 29.5px, rgba(255, 255, 255, .85) 31px, rgba(120, 128, 138, .6) 32px); }
.p3-glass { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(214, 224, 255, .8) 0 3%, rgba(214, 224, 255, 0) 10%), radial-gradient(circle at 62% 68%, rgba(150, 105, 220, .38), rgba(150, 105, 220, 0) 28%), radial-gradient(circle at 30% 64%, rgba(80, 160, 190, .22), rgba(80, 160, 190, 0) 24%), radial-gradient(circle, #040507 0 21%, #1d2433 24%, #06070a 28%, #0e1117 43%, #2b3142 46%, #090a0e 49%, #12151c 70%, #050507 88%, #1c1f26 100%); box-shadow: inset 0 0 0 1.5px #0a0b0d, inset 0 0 9px rgba(0, 0, 0, .85); }
/* Artes flutuando em profundidades diferentes */
.float-art { position: absolute; width: 150px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: float 7s ease-in-out infinite; }
.float-art--a { left: -220px; top: 60px; rotate: -9deg; transform: translateZ(-20px); }
.float-art--b { right: -215px; bottom: 120px; rotate: 8deg; transform: translateZ(-20px); animation-delay: -3.5s; }
.float-art--c { left: -185px; bottom: -30px; width: 104px; rotate: 6deg; transform: translateZ(-20px); animation-delay: -1.8s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }

/* Cenas da tela: cada item com data-at aparece no seu tempo (destaque.js), como uma conversa de verdade */
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px 12px 4px; font-size: 12px; line-height: 1.45; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.scene.is-active { opacity: 1; transform: none; }
.js .scene [data-at]:not(.is-on) { display: none; }
.scene [data-at].is-on { animation: msg-in .45s var(--ease) both; }
.scene .is-gone { display: none !important; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
/* Início do app: marca, "Bom dia!" e as 4 sugestões (igual à tela Nova conversa) */
.scene--home { justify-content: center; gap: 14px; }
.p-hello { display: grid; justify-items: center; gap: 4px; text-align: center; }
.p-hello__mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 13px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink); }
.p-hello strong { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.p-hello small { color: var(--mute); font-size: 11px; }
.p-suggest { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-suggest span { display: grid; gap: 2px; padding: 8px 9px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.p-suggest b { font-size: 11px; }
.p-suggest small { color: var(--mute); font-size: 9.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene--home .p-suggest span:first-child.is-on { box-shadow: 0 0 0 1px var(--line-2); }
.p-user { align-self: flex-end; max-width: 84%; padding: 8px 11px; border-radius: 16px 16px 5px 16px; background: var(--card-2); border: 1px solid var(--line); }
.scene .p-user.is-on { transform-origin: 100% 100%; animation: sent .5s var(--ease) both; }
@keyframes sent { from { opacity: 0; transform: translate(14px, 30px) scale(.82); } }
.p-bot { display: flex; gap: 7px; align-items: flex-start; color: var(--ink); }
.p-bot p { padding-top: 3px; }
.p-bot .typing { padding: 7px 0; }
.p-bot .typing i { width: 5px; height: 5px; }
/* Resumo da arte com "Criar arte" (igual ao cartão do chat) */
.p-brief { display: grid; gap: 8px; margin-left: 31px; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); }
.p-chip { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 10px; font-weight: 700; }
.p-brief dl { display: grid; gap: 4px; margin: 0; }
.p-brief dl div { display: grid; grid-template-columns: 58px 1fr; gap: 6px; font-size: 10.5px; }
.p-brief dt { color: var(--mute); font-weight: 700; }
.p-brief dd { margin: 0; color: var(--ink); }
.p-brief__foot { display: grid; justify-items: start; gap: 5px; padding-top: 8px; border-top: 1px solid var(--line); }
.p-brief__foot small { color: var(--mute); font-size: 9.5px; }
.p-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0 12px; border-radius: 99px; background: var(--silver); color: var(--on-silver); font-size: 11px; font-weight: 800; transition: background .3s, color .3s; }
.p-btn--ghost { background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2); }
.p-btn--wide { min-height: 34px; }
.p-btn--pulse { animation: btn-pulse 1.8s ease-in-out infinite; }
@keyframes btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 206, 214, .5); } 50% { box-shadow: 0 0 0 7px rgba(201, 206, 214, 0); transform: scale(.97); } }
.p-btn b { display: inline-flex; align-items: center; gap: 4px; } /* igual no passo 01 (sem troca) e no 02 (com troca) */
.p-btn[data-flip] b + b, .p-btn[data-flip].is-on b:first-of-type { display: none; }
.p-btn[data-flip].is-on b + b { display: inline-flex; }
.p-btn[data-flip].is-on { animation: none; background: var(--card-2); color: var(--ok); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Toque do dedo: círculo que aperta e se abre */
.p-touch { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, .32); border: 1px solid rgba(255, 255, 255, .65); pointer-events: none; }
.scene .p-touch.is-on { animation: touch .9s var(--ease) both; }
@keyframes touch { 0% { opacity: 0; transform: scale(1.7); } 35% { opacity: 1; transform: scale(.78); } 55% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(2); } }
/* Criando: texto com brilho + moldura com pixels formando a marca (igual ao chat; canvas desenhado pelo home.js) */
.p-job { display: grid; gap: 8px; margin-left: 31px; }
.p-job__label { justify-self: start; font-size: 12px; font-weight: 700; color: transparent; background: linear-gradient(90deg, #6f7680 0, #6f7680 60px, #f4f4f2 100px, #6f7680 140px, #6f7680 200px) 0 0 / 200px 100% repeat-x; -webkit-background-clip: text; background-clip: text; animation: p-job-text 1.6s linear infinite; }
@keyframes p-job-text { from { background-position: -200px 0; } to { background-position: 0 0; } }
.p-job__frame { position: relative; width: 60%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; isolation: isolate; background: radial-gradient(130% 100% at 25% 15%, #2e3035, #16171a 72%); border: 1px solid var(--line-2); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.p-job__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-job__aurora { position: absolute; inset: -30%; background: radial-gradient(40% 40% at 30% 30%, rgba(201, 206, 214, .18), transparent 70%), radial-gradient(35% 35% at 75% 70%, rgba(201, 206, 214, .1), transparent 70%); animation: p-aurora 6s ease-in-out infinite alternate; }
@keyframes p-aurora { to { transform: translate(8%, -6%) rotate(8deg); } }
/* Arte pronta: prévia, Baixar/Editar do mesmo tamanho, logo, 👍/👎 e legenda (igual ao cartão do chat) */
.p-done { display: grid; gap: 6px; margin-left: 31px; width: 68%; }
.p-done .p-art { margin: 0; width: 100%; }
.p-done__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.p-done__actions .p-btn { min-height: 24px; padding: 0 6px; font-size: 10px; }
.p-done__row { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 9.5px; font-weight: 700; }
.p-done__row > span { margin-right: auto; }
.p-logo { position: relative; width: 22px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); }
.p-logo::after { content: ""; position: absolute; bottom: 3px; width: 7px; height: 2.5px; border-radius: 2px; background: var(--ink-2); }
.p-logo--left::after { left: 3px; }
.p-logo--center::after { left: calc(50% - 3.5px); }
.p-logo--right::after { right: 3px; }
.p-logo.is-sel { background: var(--silver); border-color: transparent; }
.p-logo.is-sel::after { background: var(--on-silver); }
.p-vote { position: relative; display: grid; place-items: center; width: 22px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink-2); font-style: normal; transition: background .3s, color .3s; }
.p-vote.is-on { background: var(--silver); border-color: transparent; color: var(--on-silver); }
.p-vote .p-touch { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.p-art { position: relative; margin-left: 31px; width: 64%; overflow: hidden; border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.p-art img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2); }
.scene .p-done.is-on .p-art { animation: art-pop .7s var(--ease) both; }
.p-done.is-on .p-art img { animation: art-in 1s var(--ease) both .1s; }
.p-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); }
.p-done.is-on .p-art::after { animation: shine 1.1s var(--ease) .7s both; }
@keyframes art-pop { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.p-caption { display: grid; gap: 2px; padding: 6px 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 9.5px; line-height: 1.4; }
.p-caption > span { display: flex; justify-content: space-between; align-items: center; }
.p-caption b { color: var(--ink); font-size: 10px; }
.p-caption em { display: inline-flex; align-items: center; gap: 3px; color: var(--mute); font-style: normal; font-weight: 700; }
/* Minhas artes: filtro e cartões com o formato embaixo (igual à tela de verdade) */
.p-seg { display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); align-self: flex-start; }
.p-seg span { padding: 3px 9px; border-radius: 99px; color: var(--mute); font-size: 9.5px; font-weight: 700; }
.p-seg .is-sel { background: var(--card-3); color: var(--ink); }
.p-grid small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 9px; font-weight: 700; }
.p-toast { position: absolute; left: 50%; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 99px; background: rgba(243, 243, 241, .96); color: #1e2227; font-size: 10.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); translate: -50% 0; }
.scene .p-toast.is-on { animation: toast 2.6s var(--ease) both; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.p-title { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.p-title small { color: var(--mute-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.p-grid span { position: relative; }
.p-grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.p-new { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 99px; background: var(--silver); color: var(--on-silver); font-size: 9px; font-style: normal; font-weight: 800; }
.p-grid span:first-child img { box-shadow: 0 0 0 1.5px rgba(243, 243, 241, .8); }
.p-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-kit > div { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 92px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); }
.p-kit__logo { color: var(--silver-solid); }
.p-kit > .p-kit__colors { grid-column: span 2; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 64px; }
.p-kit__colors i { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); }
.p-kit__colors.is-on i { animation: swatch .5s var(--ease) both; }
.p-kit__colors.is-on i:nth-child(2) { animation-delay: .1s; }
.p-kit__colors.is-on i:nth-child(3) { animation-delay: .2s; }
.p-kit__colors.is-on i:nth-child(4) { animation-delay: .3s; }
@keyframes swatch { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
/* paleta da própria Destaque: grafite, roxo escuro, roxo claro e branco */
.p-kit__colors i:nth-child(1) { background: #16171a; }
.p-kit__colors i:nth-child(2) { background: #6d28d9; }
.p-kit__colors i:nth-child(3) { background: #a855f7; }
.p-kit__colors i:nth-child(4) { background: #f4f4f2; }
.p-kit__type b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.p-kit__type span { color: var(--mute); font-size: 10.5px; }
.p-plans { display: grid; gap: 7px; }
.p-plan { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.p-plan span { display: grid; line-height: 1.25; }
.p-plan b { font-size: 12px; letter-spacing: .12em; }
.p-plan small { color: var(--mute); font-size: 10.5px; }
.p-plan strong { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.p-plan.is-featured { border: 1px solid transparent; background: linear-gradient(160deg, #34373d, var(--card)) padding-box, conic-gradient(from var(--spin), rgba(201, 206, 214, .15), #f4f4f2, rgba(201, 206, 214, .15) 30%, rgba(201, 206, 214, .15)) border-box; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.scene .p-plan.is-featured.is-on { animation: msg-in .45s var(--ease) both, spin-border 5s linear infinite; }

/* ---------- Celular (tela pequena): página de rolagem normal ----------
   Cada parte: texto e, embaixo, a cena da conversa num cartão com cara de tela de app (.m-shot, criado pelo destaque.js). */
.m-shot { display: none; }
.story.is-page { overflow: hidden; }
.story.is-page::before { content: ""; position: absolute; left: -30%; right: -30%; top: -60px; height: 640px; background: radial-gradient(45% 45% at 28% 32%, rgba(201, 206, 214, .14), transparent 70%), radial-gradient(38% 38% at 82% 18%, rgba(201, 206, 214, .08), transparent 70%); pointer-events: none; }
.story.is-page .story__sticky { display: none; }
.story.is-page .story__steps { margin-top: 0; }
.story.is-page .story__step { display: block; min-height: 0; max-width: 560px; padding: 72px 18px 0; }
.story.is-page .story__step--hero { padding-top: 104px; }
.story.is-page .story__step:last-child { padding-bottom: 64px; }
.story.is-page .story__text { gap: 14px; max-width: none; }
.story.is-page .story__text .lead { max-width: none; font-size: 16px; }
.story.is-page .h-hero { font-size: clamp(40px, 12vw, 56px); }
.story.is-page .h2 { font-size: clamp(28px, 8.4vw, 38px); }
.story.is-page .scroll-hint { display: none; }
.story.is-page .hero__cta { flex-wrap: nowrap; gap: 10px; }
.story.is-page .hero__cta .btn { flex: 1; min-height: 50px; padding: 0 12px; font-size: 15px; }
.story.is-page .step-num { font-size: 12px; }
/* Cena num cartão com cara de tela de app */
.story.is-page .m-shot { display: block; position: relative; max-width: 380px; margin: 28px auto 0; padding: 10px 12px 14px; border-radius: 30px; background: radial-gradient(120% 60% at 50% 0%, #2a2c31, #1d1e22 72%); border: 1px solid var(--line-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); overflow: hidden; }
.m-shot__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 2px 4px 8px; }
.m-shot__head .phone__logo { height: 14px; }
.m-shot .bot-mark { width: 26px; height: 26px; border-radius: 9px; }
.m-shot .bot-mark svg { width: 11px; }
.m-shot .scene { position: relative; inset: auto; min-height: 290px; padding: 6px 2px 0; font-size: 14px; opacity: 1; transform: none; }
.m-shot .p-btn { min-height: 34px; font-size: 12.5px; }
.m-shot .p-done { width: 62%; }
.m-shot .p-job__frame { width: 60%; }
.m-shot .p-brief dl div { font-size: 12.5px; grid-template-columns: 70px 1fr; }
.m-shot .p-done__row { font-size: 11px; }
.m-shot .p-done__actions .p-btn { min-height: 28px; font-size: 11.5px; }
.m-shot .p-title { font-size: 18px; }
/* Abertura: três artes em leque, sem o cartão */
.p-fan { display: none; }
.story.is-page .m-shot--fan { max-width: 440px; margin-top: 36px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.m-shot--fan .scene { min-height: 0; padding: 0; }
.m-shot--fan .scene > :not(.p-fan) { display: none; }
.m-shot--fan .p-fan { display: block; position: relative; height: min(88vw, 360px); }
.p-fan img { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); translate: -50% -50%; }
.p-fan img:nth-child(1) { rotate: -13deg; translate: -108% -46%; }
.p-fan img:nth-child(3) { rotate: 13deg; translate: 8% -46%; }
.p-fan img:nth-child(2) { z-index: 1; translate: -50% -54%; }
.scene.is-active .p-fan img { animation: fan-in .9s var(--ease) both; }
.scene.is-active .p-fan img:nth-child(1) { animation-delay: .12s; }
.scene.is-active .p-fan img:nth-child(3) { animation-delay: .24s; }
@keyframes fan-in { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .js .story__text > * { opacity: 1; transform: none; filter: none; }
}
/* ======================================================================
   ABERTURA "HOLOFOTE" DA PÁGINA INICIAL (mín. 4 s; 27/09/2026)
   0,0 s pixels prata piscando no escuro · 0,2–1,9 s se juntam e formam a marca (canvas do home.js) ·
   0,5 s o holofote acende de cima, com poeira de luz e brilho no chão · 1,9 s a marca vira prata sólida, passa um
   reflexo e a estrela pisca · 2,1 s nome revelado com uma luz passando · 2,6 s "Sua marca em destaque." ·
   barra de carregamento. Saída (.is-out): o feixe se abre, o conteúdo cresce e a tela clareia até sumir.
   home.js controla o tempo (100% → is-out); sem JS, some sozinha em 9 s.
   ====================================================================== */
html:has(.splash:not(.is-out)) { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: radial-gradient(90% 70% at 50% 42%, #1a1b1f, #0f1012 72%); animation: splash-fallback .8s 5s forwards; transition: opacity .9s var(--ease) .25s; }
.splash__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; padding: 24px; transition: transform 1s var(--ease), filter 1s var(--ease), opacity .8s var(--ease); }
/* Holofote: feixe em trapézio vindo de cima, desfocado, que "acende" com uma leve oscilação */
.splash__beam { position: absolute; left: 50%; top: -12vh; width: min(560px, 120vw); height: calc(50vh + 12vh + 10px); translate: -50% 0; filter: blur(26px); opacity: 0; transform-origin: 50% 0; animation: splash-beam-on .8s cubic-bezier(.3, .7, .2, 1) .25s forwards, splash-beam-sway 7s ease-in-out 1s infinite; pointer-events: none; }
/* a forma do feixe fica no ::before (o desfoque do pai suaviza as bordas do recorte) */
.splash__beam::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244, 244, 242, .34), rgba(201, 206, 214, .12) 60%, rgba(201, 206, 214, 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
@keyframes splash-beam-on { 0% { opacity: 0; } 30% { opacity: .9; } 45% { opacity: .35; } 100% { opacity: 1; } }
@keyframes splash-beam-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
/* Poeira de luz subindo devagar dentro do feixe */
.splash__dust { position: absolute; left: 50%; top: 8vh; width: 260px; height: 42vh; translate: -50% 0; opacity: 0; animation: splash-up-in .7s ease .5s forwards; pointer-events: none; }
.splash__dust b { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #f4f4f2; box-shadow: 0 0 6px rgba(244, 244, 242, .9); opacity: 0; animation: splash-dust 6s linear infinite; }
.splash__dust b:nth-child(1) { left: 20%; animation-delay: 0s; }
.splash__dust b:nth-child(2) { left: 38%; animation-delay: 1.4s; animation-duration: 7s; }
.splash__dust b:nth-child(3) { left: 55%; animation-delay: .6s; width: 2px; height: 2px; }
.splash__dust b:nth-child(4) { left: 70%; animation-delay: 2.3s; animation-duration: 5.5s; }
.splash__dust b:nth-child(5) { left: 30%; animation-delay: 3.1s; width: 2px; height: 2px; }
.splash__dust b:nth-child(6) { left: 62%; animation-delay: 4s; animation-duration: 8s; }
.splash__dust b:nth-child(7) { left: 47%; animation-delay: 2.8s; }
@keyframes splash-dust { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .8; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate(14px, -38vh); } }
@keyframes splash-up-in { to { opacity: 1; } }
/* Palco: pixels (canvas) formando a marca; a marca em prata entra por cima quando os pixels terminam */
.splash__stage { position: relative; width: 280px; height: 280px; }
.splash__pixels { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .8s ease; }
.splash__floor { position: absolute; left: 50%; bottom: 34px; width: 210px; height: 36px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 244, 242, .32), rgba(201, 206, 214, .08) 60%, transparent); filter: blur(4px); opacity: 0; animation: splash-up-in .7s ease .6s forwards; }
.splash__mark { position: absolute; left: 50%; top: 50%; width: 117px; height: 140px; translate: -50% -50%; filter: drop-shadow(0 10px 30px rgba(244, 244, 242, .25)); opacity: 0; transform: scale(.96); animation: splash-solid .6s var(--ease) 1.05s forwards; }
@keyframes splash-solid { to { opacity: 1; transform: none; } }
.splash__stage:has(.splash__mark) .splash__pixels { animation: splash-pixels-out .6s ease 1.1s forwards; }
@keyframes splash-pixels-out { to { opacity: .18; } }
.splash__spark { position: absolute; left: calc(50% + 50px); top: calc(50% - 88px); width: 26px; height: 26px; fill: #f4f4f2; filter: drop-shadow(0 0 10px rgba(244, 244, 242, .9)); opacity: 0; transform: scale(0); animation: splash-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.3s forwards, splash-twinkle 2.6s ease-in-out 1.8s infinite; }
@keyframes splash-pop { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: scale(.75) rotate(0deg); } }
@keyframes splash-twinkle { 0%, 100% { opacity: .8; transform: scale(.75) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
/* Nome revelado da esquerda para a direita com uma luz passando, depois brilho em loop */
.splash__word { position: relative; display: block; width: 200px; margin-top: -26px; clip-path: inset(-10% 100% -10% 0); animation: splash-reveal .7s cubic-bezier(.6, 0, .2, 1) 1.15s forwards; }
.splash__word::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 16px 4px rgba(244, 244, 242, .75); opacity: 0; animation: splash-bar-run .7s cubic-bezier(.6, 0, .2, 1) 1.15s both; }
@keyframes splash-bar-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.splash__word img { display: block; width: 100%; height: auto; opacity: .9; }
@keyframes splash-reveal { to { clip-path: inset(-10% -10% -10% 0); } }
.splash__shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, transparent 90px, #fff 130px, transparent 170px, transparent 260px) 0 0 / 260px 100% repeat-x; -webkit-mask: url("/assets/destaque-logo.png") center / contain no-repeat; mask: url("/assets/destaque-logo.png") center / contain no-repeat; animation: splash-glint 2.2s linear 1.8s infinite; opacity: .8; }
@keyframes splash-glint { to { background-position-x: 260px; } }
.splash__tagline { color: var(--mute); font-size: 15px; font-weight: 600; letter-spacing: -.01em; opacity: 0; animation: splash-up .6s var(--ease) 1.45s forwards; }
.splash__tagline span { background: linear-gradient(90deg, #a78bfa 0%, #9b7bf7 20%, #b38cfb 36%, #d9c9fe 50%, #b38cfb 64%, #9b7bf7 80%, #a78bfa 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; animation: hl-shine 4s linear infinite; }
@keyframes splash-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Barra de carregamento (o valor vem do home.js) */
.splash__progress { display: flex; align-items: center; gap: 12px; width: 200px; margin-top: 6px; opacity: 0; animation: splash-up .5s var(--ease) .3s forwards; }
.splash__bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.splash__bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--accent-grad); box-shadow: 0 0 12px var(--accent-glow); transition: width .35s linear; }
.splash__pct { min-width: 38px; color: var(--mute); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* Saída: o feixe se abre e clareia, o conteúdo cresce e desfoca, e a tela some */
.splash.is-out { opacity: 0; pointer-events: none; }
.splash.is-out .splash__beam { animation: none; opacity: 1; transform: scaleX(3.2); filter: blur(40px); transition: transform .9s cubic-bezier(.7, 0, .25, 1), filter .9s ease; }
.splash.is-out .splash__inner { transform: scale(1.14); filter: blur(8px); opacity: 0; }
@keyframes splash-fallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Visita de volta na mesma sessão (~1 s): marca já pronta sob a luz, sem pixels nem revelações */
.splash.is-quick .splash__pixels { display: none; }
.splash.is-quick .splash__beam, .splash.is-quick .splash__dust, .splash.is-quick .splash__floor, .splash.is-quick .splash__mark, .splash.is-quick .splash__tagline, .splash.is-quick .splash__progress { animation: none; opacity: 1; transform: none; }
.splash.is-quick .splash__spark { animation: splash-twinkle 2.6s ease-in-out infinite; opacity: 1; }
.splash.is-quick .splash__word { animation: none; clip-path: none; }
.splash.is-quick .splash__word::after { display: none; }
@media (max-width: 520px) { .splash__stage { transform: scale(.88); } }
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash *::before, .splash *::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .splash__pixels { display: none; }
  .splash.is-out { transition: opacity .3s; }
}

/* Cor de destaque (roxo) em detalhes pequenos da página inicial (27/09/2026) */
.badge .dot--live { background: #a855f7; box-shadow: 0 0 10px var(--accent-glow); }
.p-plan.is-featured { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(168, 85, 247, .35); }

/* ======================================================================
   Tela do celular = app novo (30/09/2026, pedido do usuário: "igual o site novo"). Topo com o logo no centro,
   início com botões, Criar arte, pensando → criando, arte pronta com a barra de ações, Minhas criações, marca e ideias.
   ====================================================================== */
.phone__head { justify-content: space-between; padding: 2px 12px 8px; }
.phone__head .phone__logo { height: 12px; }
.phone__icon--round { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); }
.phone__icon--me { font-size: 10px; font-style: normal; font-weight: 800; color: var(--ink); }
.scene--app { justify-content: flex-start; gap: 9px; padding: 8px 12px 10px; }
.scene--home.scene--app { justify-content: flex-start; padding-top: 14px; }
.scene--app .p-hello__mark { width: 38px; height: 38px; margin-bottom: 4px; box-shadow: 0 0 22px rgba(139, 92, 246, .25); }
.scene--app .p-hello strong { font-size: 17px; }
/* Início: Criar arte prateado + 4 botões coloridos + últimas artes */
.n-main { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 10px; border-radius: 15px; background: linear-gradient(125deg, #f4f4f2, #c9ced6 60%, #aeb5bf); color: var(--on-silver); overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.n-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-120%); animation: n-sweep 4s ease-in-out 1s infinite; }
@keyframes n-sweep { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.n-main__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(120deg, #6d28d9, #a855f7); color: #fff; flex: none; box-shadow: 0 6px 14px rgba(109, 40, 217, .4); }
.n-main > span:nth-child(2) { display: grid; line-height: 1.2; flex: 1; }
.n-main b { font-size: 13px; letter-spacing: -.02em; }
.n-main small { color: #4a5059; font-size: 9px; font-weight: 600; }
.n-main > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(30, 34, 39, .1); }
.n-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.n-tile { --tone: 201, 206, 214; display: grid; gap: 5px; padding: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.n-tile i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(var(--tone), .15); border: 1px solid rgba(var(--tone), .3); color: rgb(var(--tone)); font-style: normal; }
.n-tile b { font-size: 10px; letter-spacing: -.01em; }
.n-tile--amber { --tone: 242, 205, 125; }
.n-tile--sky { --tone: 125, 180, 242; }
.n-tile--rose { --tone: 244, 143, 177; }
.n-tile--mint { --tone: 143, 214, 168; }
.n-recent { display: grid; gap: 5px; }
.n-recent > b { font-size: 10.5px; }
.n-recent > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.n-recent img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
/* Criar arte: formatos, campo com o pedido sendo digitado, foto e "Pensar na arte" */
.n-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.n-format { position: relative; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 10px; font-weight: 700; transition: border-color .3s, background .3s, color .3s; }
.n-format.is-on { border-color: rgba(167, 139, 250, .8); background: rgba(139, 92, 246, .14); color: var(--ink); box-shadow: 0 0 0 2px rgba(139, 92, 246, .18); }
.n-shape { display: block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; flex: none; }
.n-shape--post { width: 11px; height: 14px; }
.n-shape--story { width: 8px; height: 15px; }
.n-shape--carousel { width: 12px; height: 12px; box-shadow: 3px -3px 0 -1.5px currentColor; }
.n-shape--pair { width: 14px; height: 11px; border-right-width: 5px; }
.n-field { display: grid; gap: 4px; min-height: 62px; padding: 8px 9px; border-radius: 12px; background: var(--bg-2, #16171a); border: 1px solid var(--line-2); transition: border-color .3s; }
.n-field small { color: var(--mute); font-size: 9px; font-weight: 700; }
.n-field .phone__input { max-height: none; color: var(--mute-2); font-size: 11px; line-height: 1.4; }
.n-field.is-typing { border-color: rgba(167, 139, 250, .55); }
.n-field.is-typing .phone__input { color: var(--ink); }
.n-field.is-typing .phone__input::after { content: ""; display: inline-block; width: 1.5px; height: 11px; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: caret 1s steps(1) infinite; }
.n-field.is-ready .phone__input::after { display: none; }
.n-photos { display: flex; align-items: center; gap: 7px; color: var(--mute); font-size: 9.5px; font-weight: 700; }
.n-photos img { width: 30px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); }
.n-photos span { display: inline-flex; align-items: center; gap: 4px; }
.n-go { display: grid; }
.n-go .p-btn { width: 100%; min-height: 32px; }
/* Pensando → criando: a mesma moldura com os pixels, o título que troca e o passo a passo */
.scene--work { align-items: center; justify-content: center; text-align: center; gap: 8px; }
.n-frame { width: 54%; }
.n-eyebrow { color: var(--mute); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.n-work { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; }
.n-work b { color: transparent; background: linear-gradient(90deg, #8a919b 0, #8a919b 60px, #f4f4f2 100px, #8a919b 140px, #8a919b 200px) 0 0 / 200px 100% repeat-x; -webkit-background-clip: text; background-clip: text; animation: p-job-text 1.6s linear infinite; }
.n-work b + b, .n-work.is-on b:first-child { display: none; }
.n-work.is-on b + b { display: inline; }
.n-steps { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; text-align: left; }
.n-steps li { display: flex; align-items: center; gap: 6px; color: var(--mute-2); font-size: 10px; font-weight: 700; }
.n-steps li i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); color: transparent; font-style: normal; }
.n-steps li.is-done, .n-steps li.is-on { color: var(--ink-2); }
.n-steps li.is-done i, .n-steps li.is-on i { background: rgba(143, 214, 168, .18); border-color: rgba(143, 214, 168, .5); color: var(--ok); }
/* Arte pronta: arte grande, chips, título e a barra de ações do celular */
.scene--done { align-items: center; text-align: center; gap: 7px; }
.n-done { margin: 0; width: 66%; }
.n-chips { display: flex; justify-content: center; gap: 5px; }
.n-chips .p-chip { font-size: 9px; }
.n-arttitle { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.n-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; margin-top: auto; padding: 4px; border-radius: 15px; background: rgba(30, 31, 35, .9); border: 1px solid var(--line-2); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.n-dock span { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 2px; border-radius: 11px; color: var(--ink-2); font-size: 8.5px; font-weight: 700; transition: color .3s, background .3s; }
.n-dock .is-main { background: linear-gradient(120deg, #f4f4f2, #c9ced6); color: var(--on-silver); }
.n-dock__copy.is-on { color: var(--ok); background: rgba(143, 214, 168, .12); }
.n-dock .p-touch { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
/* Minhas criações: o carrossel com efeito de pilha */
.p-grid span.is-stack img { box-shadow: 3px -3px 0 -1px #2e3035, 6px -6px 0 -2px #3a3d43; }
/* Marca + ideias de arte */
.n-sub { display: flex; align-items: center; gap: 5px; color: #f2cd7d; font-size: 10.5px; font-weight: 800; }
.n-idea { --tone: 167, 139, 250; position: relative; display: grid; gap: 3px; padding: 8px 9px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); overflow: hidden; }
.n-idea::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, rgba(var(--tone), .9), transparent); }
.n-idea--story { --tone: 244, 143, 177; }
.n-idea .p-chip { color: rgb(var(--tone)); border-color: rgba(var(--tone), .4); font-size: 9px; }
.n-idea b { font-size: 11px; }
.n-idea small { color: var(--mute); font-size: 9.5px; }
/* Celular (cartões da página): um pouco maior */
.m-shot .scene--app { gap: 10px; }
.m-shot .n-main b { font-size: 15px; }
.m-shot .n-tile b, .m-shot .n-format { font-size: 12px; }
.m-shot .n-field .phone__input { font-size: 13px; }
.m-shot .n-work { font-size: 15px; }
.m-shot .n-steps li { font-size: 12px; }
.m-shot .n-dock span { font-size: 10.5px; }
.m-shot .n-done { width: 58%; }
.m-shot__head .phone__icon--round { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .n-main::after, .n-work b { animation: none; } }