/* CAT N'CLAW · novidades de 04/11/2026 sobre o site original (carregado depois do styles.css)
   fundo vivo · logo em partículas no topo · faixa passando · texto no notebook · antes e depois Harmonize ·
   bloco "sem compromisso" · WhatsApp com balão */
:root { --cnc-vermelho: #ee292f; --cnc-disp: "Archivo", "Arial Narrow", sans-serif; }

/* ---------- fundo vivo (página toda) ---------- */
.fundo-fixo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.fundo-fixo::before { content: ""; position: absolute; inset: 0; 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: 64px 64px; background-position: center; -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%); mask: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%); }
.fundo-luz { position: absolute; left: 0; top: 0; width: 760px; height: 760px; overflow: hidden; transform: translate3d(calc(50vw - 380px), calc(40vh - 380px), 0); will-change: transform;
  -webkit-mask: radial-gradient(380px circle at 50% 50%, #000, transparent 75%); mask: radial-gradient(380px circle at 50% 50%, #000, transparent 75%); }
.fundo-grade { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform: translate3d(calc(380px - 50vw), calc(380px - 40vh), 0); will-change: transform; background-image: linear-gradient(rgba(238,41,47,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(238,41,47,.22) 1px, transparent 1px); background-size: 64px 64px; background-position: center; opacity: .55; }
.mancha { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, rgba(238,41,47,.13), transparent 62%); will-change: transform; }
.m1 { left: -20vmax; top: 10vh; animation: cnc-deriva1 26s ease-in-out infinite alternate; }
.m2 { right: -25vmax; top: 40vh; animation: cnc-deriva2 32s ease-in-out infinite alternate; }
.m3 { left: 20vw; bottom: -35vmax; animation: cnc-deriva1 38s ease-in-out infinite alternate-reverse; background: radial-gradient(circle, rgba(180,18,28,.12), transparent 62%); }
@keyframes cnc-deriva1 { to { transform: translate(28vw, 18vh) scale(1.15); } }
@keyframes cnc-deriva2 { to { transform: translate(-30vw, -22vh) scale(.9); } }
/* no celular a luz passeia sozinha (só transform, roda na placa de vídeo) */
@media (hover: none) {
  .fundo-luz { animation: cnc-luz 14s ease-in-out infinite alternate; }
  .fundo-grade { animation: cnc-grade 14s ease-in-out infinite alternate; }
}
@keyframes cnc-luz { 0% { transform: translate3d(calc(15vw - 380px), calc(20vh - 380px), 0); } 50% { transform: translate3d(calc(85vw - 380px), calc(45vh - 380px), 0); } 100% { transform: translate3d(calc(30vw - 380px), calc(80vh - 380px), 0); } }
@keyframes cnc-grade { 0% { transform: translate3d(calc(380px - 15vw), calc(380px - 20vh), 0); } 50% { transform: translate3d(calc(380px - 85vw), calc(380px - 45vh), 0); } 100% { transform: translate3d(calc(380px - 30vw), calc(380px - 80vh), 0); } }
.brasas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.brasas i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ff4d52; box-shadow: 0 0 10px 2px rgba(238,41,47,.8); opacity: 0; animation: cnc-brasa 9s linear infinite; }
.brasas i:nth-child(1) { left: 8%; } .brasas i:nth-child(2) { left: 17%; animation-delay: 3.1s; animation-duration: 11s; }
.brasas i:nth-child(3) { left: 26%; animation-delay: 6s; } .brasas i:nth-child(4) { left: 38%; animation-delay: 1.4s; animation-duration: 12s; }
.brasas i:nth-child(5) { left: 47%; animation-delay: 4.6s; width: 3px; height: 3px; } .brasas i:nth-child(6) { left: 56%; animation-delay: 7.7s; animation-duration: 10s; }
.brasas i:nth-child(7) { left: 63%; animation-delay: 2.2s; } .brasas i:nth-child(8) { left: 71%; animation-delay: 5.3s; animation-duration: 13s; width: 5px; height: 5px; }
.brasas i:nth-child(9) { left: 79%; animation-delay: .8s; animation-duration: 10s; } .brasas i:nth-child(10) { left: 86%; animation-delay: 3.9s; }
.brasas i:nth-child(11) { left: 92%; animation-delay: 6.8s; animation-duration: 12s; width: 3px; height: 3px; } .brasas i:nth-child(12) { left: 4%; animation-delay: 8.4s; animation-duration: 11s; }
@keyframes cnc-brasa { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .6; } 100% { transform: translate(40px, -95vh); opacity: 0; } }

/* ---------- topo: raios, partículas da logo, faixa ---------- */
.hero { background: transparent; }
.hero-fundo { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.fx-raios { position: absolute; inset: 0; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.hero-shade { background: linear-gradient(90deg, rgba(5,5,5,.55), rgba(5,5,5,.1) 50%, transparent 75%), linear-gradient(0deg, #050505, transparent 22%); }
.hero-ceu { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-campo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.hero-campo.is-pronto { opacity: 1; }
.hero-content { position: relative; z-index: 1; }
/* metade direita do topo: a logo centralizada nela */
.hero-slot { position: absolute; z-index: 0; left: 75%; top: 40%; width: min(50%, 860px); aspect-ratio: 640 / 530; transform: translate(-50%, -50%); pointer-events: none; }
.hero-slot-logo { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.sem-particulas .hero-slot-logo { opacity: 1; }
.tem-particulas .hero-slot-logo { opacity: 0; }

.faixas { position: relative; z-index: 1; overflow: hidden; padding: 14px 0 6px; margin-top: auto; }
.faixa { display: flex; white-space: nowrap; will-change: transform; font: 800 clamp(2rem, 4.6vw, 4.4rem)/1.08 var(--cnc-disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; color: #f5f5f4; }
.faixa span { padding-right: .4em; }
.faixa.contorno { color: transparent; -webkit-text-stroke: 1.3px var(--cnc-vermelho); }

@media (max-width: 639px) {
  .hero-slot { left: 50%; top: 90px; width: min(92vw, 420px); transform: translateX(-50%); }
  .hero-content { padding-top: calc(min(92vw, 420px) * .83 + 22px) !important; }
  .faixa { font-size: 2rem; }
}

/* ---------- texto no notebook ---------- */
.manifesto-tela { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .55em; min-height: 100%; padding: 6% 7%; font: 700 clamp(1.9rem, 3.7vw, 3.5rem)/1.12 var(--cnc-disp); font-stretch: 100%; letter-spacing: -.02em; color: #f5f5f4; }
.manifesto-tela .mf-linha { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; max-width: none; }
.mf-linha em { font-style: normal; color: var(--cnc-vermelho); text-shadow: 0 0 26px rgba(238,41,47,.45); }
.manifesto-tela .mf-pausa { margin-top: .7em; }
.manifesto-tela .mf-fim { margin-top: .9em; font-size: 1.12em; }
.mf-risco { position: relative; display: inline-block; color: var(--cnc-vermelho); white-space: nowrap; }
.mf-risco svg { position: absolute; left: -1%; width: 102%; bottom: -.34em; height: .42em; overflow: visible; }
.mf-risco path { fill: none; stroke: var(--cnc-vermelho); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset .8s cubic-bezier(.7,0,.2,1); }
.mf-risco path + path { stroke-width: 3; opacity: .7; transition-delay: .18s; }
.js-mf .mf-linha { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .7s, transform .8s cubic-bezier(.2,.8,.2,1), filter .7s; }
.js-mf.mf-on .mf-linha { opacity: 1; transform: none; filter: none; }
.js-mf.mf-on .mf-linha:nth-child(2) { transition-delay: .25s; } .js-mf.mf-on .mf-linha:nth-child(3) { transition-delay: .6s; }
.js-mf.mf-on .mf-linha:nth-child(4) { transition-delay: .85s; } .js-mf.mf-on .mf-linha:nth-child(5) { transition-delay: 1.25s; }
.mf-on .mf-risco path { stroke-dashoffset: 0; transition-delay: 2s; }
.mf-on .mf-risco path + path { transition-delay: 2.2s; }
@media (max-width: 639px) { .manifesto-tela { font-size: 1.55rem; padding: 30px 22px; } }

/* ---------- antes e depois: Harmonize ---------- */
.comparison-base, .comparison-before img { object-position: top center; }

/* ---------- sem compromisso ---------- */
.garantia-section { padding-block: 0 20px; }
.garantia { padding: clamp(26px, 3.5vw, 40px) clamp(24px, 4vw, 48px); border-radius: 24px; background: linear-gradient(120deg, rgba(238,41,47,.16), rgba(238,41,47,.04)); border: 1px solid rgba(238,41,47,.35); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.garantia p { margin: 0; max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #e4e4e8; }
.garantia strong { display: block; font: 800 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--cnc-disp); font-stretch: 115%; color: #fff; margin-bottom: 6px; }
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.b-gira { position: relative; display: inline-flex; padding: 2px; border-radius: 999px; text-decoration: none; isolation: isolate; background: conic-gradient(from var(--giro), #6b0b10 0 50%, #ff5a5f 66%, #fff 72%, #ff5a5f 78%, #6b0b10 92%) border-box; animation: cnc-gira 3.4s linear infinite; }
.b-gira::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; z-index: -1; background: conic-gradient(from var(--giro), transparent 0 55%, var(--cnc-vermelho), transparent); filter: blur(16px); opacity: .45; transition: opacity .4s; animation: inherit; }
.b-gira:hover::after { opacity: .9; }
.b-gira > span { display: inline-flex; align-items: center; gap: 10px; padding: 1.02em 1.9em; border-radius: inherit; background: var(--cnc-vermelho); color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1; transition: background .3s; }
.b-gira:hover > span { background: #ff3b41; }
.b-gira svg { width: 1.25em; height: 1.25em; }
@keyframes cnc-gira { to { --giro: 360deg; } }
@media (max-width: 639px) { .garantia { flex-direction: column; align-items: stretch; } .b-gira, .b-gira > span { width: 100%; justify-content: center; } }

/* ---------- WhatsApp com balão ---------- */
.zap-fixo { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; align-items: flex-end; gap: 14px; }
.zap-fixo .bola { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 34px rgba(37,211,102,.45); transition: transform .3s; }
.zap-fixo .bola svg { width: 34px; height: 34px; }
.zap-fixo .bola:hover { transform: scale(1.07); }
.zap-fixo .bola::before, .zap-fixo .bola::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: cnc-onda 2.6s ease-out infinite; pointer-events: none; }
.zap-fixo .bola::after { animation-delay: 1.3s; }
@keyframes cnc-onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.75); opacity: 0; } }
.aviso-1 { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--cnc-vermelho); color: #fff; font: 700 12px/22px Manrope, Arial, sans-serif; text-align: center; border: 2px solid #000; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.zap-fixo.abre .aviso-1 { transform: scale(1); }
.zap-fixo.lido .aviso-1 { transform: scale(0); }
.balao { position: relative; width: 270px; padding: 13px 15px 14px; border-radius: 20px 20px 4px 20px; background: #fff; color: #111; box-shadow: 0 24px 60px -12px rgba(0,0,0,.7); cursor: pointer; opacity: 0; transform: translateY(12px) scale(.94); transform-origin: bottom right; pointer-events: none; transition: opacity .45s, transform .5s cubic-bezier(.3,.8,.2,1); }
.zap-fixo.abre .balao { opacity: 1; transform: none; pointer-events: auto; }
.balao-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
.balao-cab img { width: 30px; height: 30px; border-radius: 50%; }
.balao-cab b { display: block; font: 800 .95rem/1.1 var(--cnc-disp); font-stretch: 110%; }
.balao-cab small { display: flex; align-items: center; gap: 6px; color: #5b5b62; font-size: .82rem; line-height: 1.3; }
.balao-cab small i { width: 7px; height: 7px; border-radius: 50%; background: #25d366; }
.digitando { display: none; gap: 5px; padding: 12px 14px; width: max-content; border-radius: 14px; background: #f1f1f3; }
.digitando i { width: 8px; height: 8px; border-radius: 50%; background: #9a9aa2; animation: cnc-pontinho 1.1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes cnc-pontinho { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.zap-fixo.digita .digitando { display: flex; }
.zap-fixo.digita .balao-msg { display: none; }
.balao-msg { margin: 0; font-size: .93rem; line-height: 1.42; color: #111; }
.balao-msg mark { background: linear-gradient(transparent 55%, rgba(238,41,47,.3) 55%); color: #000; font-weight: 700; padding: 0 2px; }
.balao .fecha { position: absolute; top: -10px; left: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #000; background: #2a2a2e; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
@media (max-width: 639px) {
  .zap-fixo { right: 14px; bottom: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .balao { width: min(228px, calc(100vw - 100px)); padding: 11px 13px 12px; }
  .balao-cab { padding-bottom: 7px; margin-bottom: 8px; }
  .balao-msg { font-size: .86rem; }
  .zap-fixo .bola { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .mancha, .brasas i, .fundo-luz, .fundo-grade, .b-gira, .b-gira::after, .zap-fixo .bola::before, .zap-fixo .bola::after { animation: none !important; }
  .js-mf .mf-linha { opacity: 1; transform: none; filter: none; }
  .mf-risco path { stroke-dashoffset: 0; }
}
/* telas baixas (notebook 1280x720 etc.): a logo encolhe para não encostar no título nem na faixa */
@media (min-width: 640px) and (max-height: 800px) { .hero-slot { width: min(50%, 62svh); top: 41%; } }

/* desempenho: o notebook vira camada própria; o zoom só escala a camada em vez de redesenhar teclado e tela a cada quadro */
.macbook-device { will-change: transform; }

/* ---------- celular: o topo cresce com o conteúdo (o botão e a faixa não são cortados) ---------- */
@media (max-width: 639px) {
  .hero { height: auto !important; max-height: none !important; min-height: 100svh; }
  .hero-content { padding-bottom: 26px !important; }
}

/* ---------- celular: a frase do notebook vira linha do tempo (arsenal rolagem/linha-do-tempo, como na Telma) ----------
   uma frase por vez, com espaço entre elas para ir descendo; a bolinha acende e o feixe vermelho desce junto */
@media (max-width: 639px) {
  .macbook-showcase:not(.is-enhanced) .macbook-display,
  .macbook-showcase:not(.is-enhanced) .macbook-screen,
  .macbook-showcase:not(.is-enhanced) .macbook-screen-content { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .macbook-showcase:not(.is-enhanced) .macbook-screen-page.manifesto-tela { position: relative; display: block; padding: 6vh 0 4vh 52px !important; font-size: 1.85rem; line-height: 1.16; }
  .manifesto-tela .mf-trilho, .manifesto-tela .mf-feixe { position: absolute; left: 14px; top: 6vh; width: 3px; border-radius: 2px; }
  .manifesto-tela .mf-trilho { bottom: 4vh; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 8px, transparent 8px 16px); }
  .manifesto-tela .mf-feixe { height: 0; background: linear-gradient(to bottom, #7a0d12, var(--cnc-vermelho)); box-shadow: 0 0 14px rgba(238,41,47,.6); }
  .manifesto-tela.mf-celular .mf-linha, .manifesto-tela.mf-celular .mf-pausa, .manifesto-tela.mf-celular .mf-fim { position: relative; margin: 0 0 30vh !important; opacity: .22; filter: none !important; transform: none !important; transition: opacity .5s, transform .5s !important; }
  .manifesto-tela.mf-celular .mf-linha:last-of-type { margin-bottom: 0 !important; }
  .manifesto-tela.mf-celular .mf-fim { font-size: 1.1em; }
  .manifesto-tela.mf-celular .mf-linha::before { content: ""; position: absolute; left: -47px; top: .3em; width: 19px; height: 19px; border-radius: 50%; background: #050505; border: 2.5px solid rgba(255,255,255,.3); transition: .4s; }
  .manifesto-tela.mf-celular .mf-linha.aceso { opacity: 1; }
  .manifesto-tela.mf-celular .mf-linha.aceso::before { border-color: #fff; background: var(--cnc-vermelho); box-shadow: 0 0 0 6px rgba(238,41,47,.3), 0 0 18px rgba(238,41,47,.7); }
  .manifesto-tela.mf-celular .mf-linha em { text-shadow: none; }
  .manifesto-tela.mf-celular .mf-linha.aceso em { text-shadow: 0 0 22px rgba(238,41,47,.5); }
  .manifesto-tela.mf-celular .mf-risco path { stroke-dashoffset: 340; transition-delay: .2s !important; }
  .manifesto-tela.mf-celular .mf-fim.aceso .mf-risco path { stroke-dashoffset: 0; }
}
@media (max-width: 639px) {
  /* "trabalharem a seu favor." não cabe numa linha no celular: quebra e o risco duplo vira sublinhado duplo */
  .manifesto-tela.mf-celular .mf-risco { white-space: normal; display: inline; text-decoration: underline double transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .6s .2s; }
  .manifesto-tela.mf-celular .mf-risco svg { display: none; }
  .manifesto-tela.mf-celular .mf-fim.aceso .mf-risco { text-decoration-color: var(--cnc-vermelho); }
}
/* celular com tela mais baixa (iPhone com as barras do Safari): logo um pouco menor para o botão aparecer na primeira tela */
@media (max-width: 639px) and (max-height: 760px) {
  .hero-slot { top: 82px; width: min(76vw, 340px); }
  .hero-content { padding-top: calc(min(76vw, 340px) * .83 + 14px) !important; }
}

/* ---------- 08/11: topo limpo (só texto e logo), faixa passando entre o topo e "Seu próximo passo" ---------- */
.faixas.faixas-entre { margin: 0; padding: clamp(28px, 5vw, 64px) 0; }
@media (min-width: 640px) {
  .hero { height: 100svh !important; min-height: 640px !important; max-height: none !important; justify-content: center !important; padding-block: 0 !important; }
  .hero-content { padding-block: 0 !important; }
  .hero-slot { top: 50% !important; left: 76% !important; width: min(45%, 780px) !important; }
}
@media (min-width: 640px) and (max-height: 800px) { .hero-slot { width: min(45%, 68svh) !important; } }
/* celular: logo em cima e no centro, texto e botão embaixo, tudo centralizado */
@media (max-width: 639px) {
  .hero { justify-content: flex-start; }
  .hero-content { text-align: center; }
  .hero-intro { justify-content: center; }
  .hero-description { margin-inline: auto; }
  .hero-actions { align-items: center !important; }
  .faixas.faixas-entre { padding: 22px 0; }
}
/* celulares baixos (até 700 de altura): logo menor para o botão ficar acima da bola do WhatsApp */
@media (max-width: 639px) and (max-height: 700px) {
  .hero-slot { top: 72px; width: min(60vw, 300px); }
  .hero-content { padding-top: calc(min(60vw, 300px) * .83 + 6px) !important; }
}