/* ============================================================
   COMPASSO · MOVIMENTO CONSTANTE (v2, mais forte)
   Cada secção tem sempre várias coisas a mexer: rosa-dos-ventos a
   rodar, partículas laranja a subir, luz quente a passear, fitas de
   texto a correr, parallax ao fazer scroll e efeitos próprios em
   cada bloco. Só anima o que está à vista (.vivo) e pára com a aba
   escondida (body.pausado). Os flutuares usam translate/scale/rotate
   para não chocar com as entradas e o hover, que usam transform.
   ============================================================ */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body.pausado *, body.pausado *::before, body.pausado *::after { animation-play-state: paused !important; }

/* ---------- barra de progresso do scroll ---------- */
.progresso-scroll {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9000; pointer-events: none;
  background: linear-gradient(90deg, var(--orange), #FFB15C, var(--orange)); background-size: 200% 100%;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px rgba(255,127,0,.55);
  animation: correr-fundo 2.5s linear infinite;
}
@keyframes correr-fundo { to { background-position: -200% 0; } }

/* ---------- camada decorativa de cada secção ---------- */
.com-decor { position: relative; overflow: hidden; isolation: isolate; }
.com-decor > .container { position: relative; z-index: 1; }
.decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* rosa-dos-ventos (o compasso) a rodar, com parallax */
.decor__rosa { position: absolute; width: 560px; height: 560px; top: -140px; right: -160px; translate: 0 calc(var(--sp, 0) * -90px); }
.decor--esq .decor__rosa { right: auto; left: -180px; top: auto; bottom: -160px; }
.decor__rosa svg { width: 100%; height: 100%; overflow: visible; }
.decor__rosa .r-fora { stroke: var(--orange); stroke-opacity: .3; fill: none; stroke-width: 1.5; stroke-dasharray: 4 10; }
.decor__rosa .r-meio { stroke: var(--orange); stroke-opacity: .22; fill: none; stroke-width: 1; }
.decor__rosa .r-tique { stroke: var(--orange); stroke-opacity: .35; fill: none; stroke-width: 10; stroke-dasharray: 2 9.2; }
.decor__rosa .r-agulha { fill: var(--orange); fill-opacity: .16; }
.decor__rosa .r-eixo { stroke: var(--orange); stroke-opacity: .2; stroke-width: 1; }
.decor__rosa .r-gira { transform-origin: 250px 250px; transform-box: view-box; }
.vivo .decor__rosa .r-gira--a { animation: girar 36s linear infinite; }
.vivo .decor__rosa .r-gira--b { animation: girar 24s linear infinite reverse; }
.vivo .decor__rosa .r-gira--c { animation: oscilar-agulha 6s ease-in-out infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes oscilar-agulha { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(28deg); } }

/* partículas laranja a subir */
.decor__p { position: absolute; bottom: -20px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%; background: var(--orange); opacity: 0; box-shadow: 0 0 calc(var(--t) * 1.6) rgba(255,127,0,.55); }
.vivo .decor__p { animation: subir var(--d) linear var(--atraso) infinite; }
@keyframes subir {
  0% { translate: 0 0; opacity: 0; }
  10% { opacity: var(--o); }
  50% { translate: var(--dx) calc(var(--alt) * -.5); }
  90% { opacity: var(--o); }
  100% { translate: calc(var(--dx) * -1) calc(var(--alt) * -1); opacity: 0; }
}

/* luz quente que passeia (e segue o rato no computador) */
.decor__luz { position: absolute; left: var(--mx, 30%); top: var(--my, 40%); width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,127,0,.16), rgba(255,127,0,0)); transition: left 1.2s cubic-bezier(.16,1,.3,1), top 1.2s cubic-bezier(.16,1,.3,1); }
.vivo .decor__luz { animation: passear 16s ease-in-out infinite; }
@keyframes passear { 0%, 100% { translate: 0 0; } 25% { translate: 260px 80px; } 50% { translate: 120px -120px; } 75% { translate: -200px 60px; } }

/* ---------- fitas de texto a correr ---------- */
.fita { position: relative; overflow: hidden; white-space: nowrap; padding: 18px 0; user-select: none; }
.fita__trilho { display: inline-flex; animation: fita 38s linear infinite; }
.fita--inversa .fita__trilho { animation-direction: reverse; animation-duration: 46s; }
.fita__trilho span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; }
.fita__trilho i { font-style: normal; display: inline-block; animation: girar 6s linear infinite; }
@keyframes fita { to { transform: translateX(-50%); } }
.fita--laranja { background: var(--orange); color: var(--graphite-dark); font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.fita--laranja i { color: var(--white); }
.fita--clara { background: var(--white); color: var(--graphite-dark); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 500; padding: 26px 0; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.fita--clara i { color: var(--orange); font-size: .6em; }
.fita:hover .fita__trilho { animation-play-state: paused; }

/* ---------- brilho que passa nos botões ---------- */
.btn--primary, .btn-submit, .btn--outline-white { position: relative; overflow: hidden; }
.btn--primary::after, .btn-submit::after, .btn--outline-white::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  transform: skewX(-18deg); pointer-events: none;
  animation: brilho-botao 3.2s ease-in-out infinite;
}
.btn--outline-white::after { animation-delay: -1.6s; }
@keyframes brilho-botao { 0%, 45% { left: -60%; } 75%, 100% { left: 130%; } }
.btn--primary, .btn-submit { animation: pulsar-botao 3.2s ease-in-out infinite; }
@keyframes pulsar-botao { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,127,0,.45); } 60% { box-shadow: 0 0 0 14px rgba(255,127,0,0); } }

/* ---------- etiquetas: o traço laranja estica e encolhe ---------- */
.vivo .section-label::before { animation: esticar 2.6s ease-in-out infinite; }
@keyframes esticar { 0%, 100% { width: 28px; } 50% { width: 56px; } }

/* ---------- títulos: entram palavra a palavra e depois brilham em onda ---------- */
.section-title .palavra { display: inline-block; opacity: 0; translate: 0 .5em; rotate: 4deg; transition: opacity .6s ease, translate .8s cubic-bezier(.16,1,.3,1), rotate .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--w, 0) * 60ms); padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.section-title.entrou .palavra { opacity: 1; translate: 0 0; rotate: 0deg; }
.section-title { --tinta: var(--graphite-dark); --tinta-luz: var(--orange-texto, #AD5400); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .vivo .section-title.entrou .palavra {
    color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(100deg, var(--tinta) 0 42%, var(--tinta-luz) 50%, var(--tinta) 58% 100%);
    background-size: 300% 100%; background-position: 100% 0;
    animation: onda-titulo 6s ease-in-out infinite; animation-delay: calc(1.2s + var(--w, 0) * 90ms);
  }
}
@keyframes onda-titulo { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0 0; } }

/* ---------- topo: a sala aproxima-se e desliza depois do voo ---------- */
.voo.terminou .voo__imagem--fim img { animation: aproximar-sala 18s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes aproximar-sala { from { scale: 1; translate: 0 0; } to { scale: 1.14; translate: -2.5% -1.5%; } }

/* ---------- a nossa diferença ---------- */
.pos-image { position: relative; translate: 0 calc(var(--sp, 0) * -40px); }
.posicionamento.vivo .pos-image img { animation: respirar-foto 12s ease-in-out infinite alternate; }
@keyframes respirar-foto { from { scale: 1; translate: 0 0; } to { scale: 1.16; translate: -3% -2%; } }
.pos-image::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: skewX(-15deg); pointer-events: none; }
.posicionamento.vivo .pos-image::after { animation: brilho-foto 6s ease-in-out infinite; }
@keyframes brilho-foto { 0%, 55% { left: -70%; } 85%, 100% { left: 140%; } }
.pillar-icon { position: relative; }
.posicionamento.vivo .pillar-icon { animation: flutuar-icone 2.8s ease-in-out infinite; }
.posicionamento.vivo .pillar:nth-child(2) .pillar-icon { animation-delay: -.9s; }
.posicionamento.vivo .pillar:nth-child(3) .pillar-icon { animation-delay: -1.8s; }
@keyframes flutuar-icone { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 0 -10px; rotate: 8deg; } }

/* ---------- como ajudamos: cartões a flutuar com contorno de luz a girar ---------- */
.como-card { position: relative; }
.como-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(255,127,0,0) 0 62%, rgba(255,127,0,.9) 80%, rgba(255,177,92,.9) 86%, rgba(255,127,0,0) 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);
}
.como-ajudamos.vivo .como-card::before { animation: girar-ang 4.5s linear infinite; }
.como-ajudamos.vivo .como-card:nth-child(2)::before { animation-delay: -1.5s; }
.como-ajudamos.vivo .como-card:nth-child(3)::before { animation-delay: -3s; }
@keyframes girar-ang { to { --ang: 360deg; } }
.como-ajudamos.vivo .como-card { animation: flutuar-cartao 5s ease-in-out infinite; }
.como-ajudamos.vivo .como-card:nth-child(2) { animation-delay: -1.7s; }
.como-ajudamos.vivo .como-card:nth-child(3) { animation-delay: -3.4s; }
@keyframes flutuar-cartao { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.como-number { transform-origin: left center; }
.como-ajudamos.vivo .como-number { animation: pulsar-numero 2.4s ease-in-out infinite; }
.como-ajudamos.vivo .como-card:nth-child(2) .como-number { animation-delay: -.8s; }
.como-ajudamos.vivo .como-card:nth-child(3) .como-number { animation-delay: -1.6s; }
@keyframes pulsar-numero { 0%, 100% { opacity: .35; scale: 1; } 50% { opacity: 1; scale: 1.2; } }

/* ---------- equipa: as pessoas flutuam e respiram, a planta deriva ---------- */
.equipa-palco.vivo .membro__palco { animation: flutuar-membro 6s ease-in-out infinite; }
.equipa-palco.vivo .membro:nth-child(2) .membro__palco { animation-delay: -2s; }
.equipa-palco.vivo .membro:nth-child(3) .membro__palco { animation-delay: -4s; }
@keyframes flutuar-membro { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.equipa-palco.vivo .membro__moldura { animation: respirar-membro 4.5s ease-in-out infinite; }
.equipa-palco.vivo .membro:nth-child(2) .membro__moldura { animation-delay: -1.5s; }
.equipa-palco.vivo .membro:nth-child(3) .membro__moldura { animation-delay: -3s; }
@keyframes respirar-membro { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
.equipa-palco.vivo .membro__planta { animation: derivar-planta 8s ease-in-out infinite alternate; }
@keyframes derivar-planta { from { translate: -14px 8px; rotate: -2deg; } to { translate: 14px -8px; rotate: 2deg; } }

/* ---------- como trabalhamos: 5 cartões; o ativo avança sozinho, em ciclo ---------- */
@media (min-width: 1025px) { .processo-header { margin-bottom: 96px; } }   /* espaço para a linha por cima dos cartões */
.processo-steps { position: relative; gap: 18px; align-items: stretch; --ciclo: 1.6s; }
.step {
  position: relative; z-index: 1; isolation: isolate; text-align: left;
  padding: 30px 24px 34px; border-radius: 20px;
  background: var(--white); border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: opacity .5s ease, transform .5s ease, translate .45s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
/* número grande ao fundo do cartão */
.step-num {
  position: absolute; top: 10px; right: 16px; z-index: -1; pointer-events: none;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 4.4rem; font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  color: rgba(46,46,46,.06); transition: color .35s ease, translate .45s cubic-bezier(.16,1,.3,1);
}
/* ícone em traço numa placa arredondada */
.step-icone {
  position: relative; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--orange-light); color: var(--orange-texto, #AD5400);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, scale .4s cubic-bezier(.34,1.56,.64,1);
}
.step-icone svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.step-icone path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.step-icone::after { content: ''; position: absolute; inset: -3px; border-radius: 19px; border: 2px solid var(--orange); opacity: 0; pointer-events: none; }
.step h4 { font-size: 1.05rem; margin-bottom: 10px; transition: color .4s ease; }
.step p { font-size: 0.88rem; line-height: 1.7; }
/* barra de tempo até ao passo seguinte */
.step-tempo { position: absolute; left: 24px; right: 24px; bottom: 16px; height: 3px; border-radius: 3px; background: rgba(46,46,46,.06); overflow: hidden; }
.step-tempo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #FFB15C, var(--orange)); transform: scaleX(0); transform-origin: 0 50%; }

/* o cartão ativo */
.step.em-curso {
  translate: 0 -10px; border-color: rgba(255,127,0,.45);
  box-shadow: 0 24px 50px rgba(255,127,0,.16), 0 4px 14px rgba(0,0,0,.05);
}
.step.em-curso .step-num { color: rgba(255,127,0,.18); translate: 0 -4px; }
.step.em-curso .step-icone { background: var(--orange); color: var(--graphite-dark); box-shadow: 0 10px 24px rgba(255,127,0,.35); scale: 1.06; }
.step.em-curso .step-icone path { animation: desenhar-traco .7s cubic-bezier(.65,0,.35,1) both; }
.step.em-curso .step-icone path:nth-child(2) { animation-delay: .12s; }
.step.em-curso .step-icone path:nth-child(3) { animation-delay: .24s; }
.step.em-curso .step-icone::after { animation: onda-icone 1s ease-out infinite; }
.step.em-curso h4 { color: var(--orange-texto, var(--orange)); }
.step.em-curso .step-tempo::after { animation: tempo-passo var(--ciclo) linear both; }
.processo-steps.preso .step.em-curso .step-tempo::after { animation: none; transform: scaleX(1); }
/* os passos já percorridos ficam marcados */
.step.feito .step-num { color: rgba(255,127,0,.1); }
.step.feito .step-tempo::after { transform: scaleX(1); opacity: .35; }
@keyframes desenhar-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes onda-icone { from { transform: scale(1); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }
@keyframes tempo-passo { to { transform: scaleX(1); } }

/* luz laranja que segue o rato dentro do cartão (rato.js) */
.step::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,127,0,.1), rgba(255,127,0,0) 65%); opacity: 0; transition: opacity .35s ease; }
.step.sob-rato::after { opacity: 1; }

/* a linha por cima dos cartões, com um ponto por passo */
.caminho { position: absolute; left: 0; right: 0; top: -38px; height: 2px; z-index: 0; pointer-events: none; }
.caminho__linha { position: absolute; inset: 0; background: repeating-linear-gradient(to right, var(--gray) 0 6px, transparent 6px 12px); opacity: .8; }
.processo.vivo .caminho__linha { animation: tracejado .8s linear infinite; }
@keyframes tracejado { to { background-position: 12px 0; } }
.caminho__feito { position: absolute; left: 0; top: -1px; bottom: -1px; width: 100%; background: linear-gradient(90deg, #FFB15C, var(--orange)); transform-origin: 0 50%; transform: scaleX(var(--feito, 0)); transition: transform .6s cubic-bezier(.65,0,.35,1); }
.caminho__no { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gray-light); border: 2px solid var(--gray); transition: background .3s ease .2s, border-color .3s ease .2s; }
.caminho__no.aceso { background: var(--orange); border-color: var(--orange); }
.caminho__ponto {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 7px rgba(255,127,0,.22), 0 0 24px rgba(255,127,0,.8);
  transform: translateX(var(--ponto-x, 0)); transition: transform .6s cubic-bezier(.65,0,.35,1);
}
/* fio que desce do ponto até ao cartão ativo */
.step::before { content: ''; position: absolute; left: 50%; top: -28px; width: 2px; height: 28px; margin-left: -1px; background: linear-gradient(var(--orange), rgba(255,127,0,.15)); transform: scaleY(0); transform-origin: 50% 0; transition: transform .3s ease .25s; }
.step.em-curso::before { transform: scaleY(1); }

@media (max-width: 1024px) {
  .caminho, .step::before { display: none; }
}
/* tablet: 3 + 2 cartões, os dois de baixo ao centro */
@media (max-width: 1024px) and (min-width: 769px) {
  .processo-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  .step { flex: 0 1 calc((100% - 40px) / 3); }
}
/* telemóvel: cartões em lista, ícone à esquerda e texto à direita */
@media (max-width: 768px) {
  .processo-steps { gap: 14px; }
  .step { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 22px 20px 30px; }
  .step-icone { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; border-radius: 15px; }
  .step-icone::after { border-radius: 18px; }
  .step-num { font-size: 3.4rem; top: 8px; right: 12px; }
  .step h4 { margin: 4px 0 6px; }
  .step-tempo { left: 88px; right: 20px; bottom: 14px; }
  .step.em-curso { translate: 0 -4px; }
}

/* ---------- testemunhos: cartões a flutuar, estrelas a cintilar, aspas a balançar ---------- */
.testemunhos.vivo .testemunho { animation: flutuar-cartao 5.5s ease-in-out infinite; }
.testemunhos.vivo .testemunho:nth-child(2) { animation-delay: -1.8s; }
.testemunhos.vivo .testemunho:nth-child(3) { animation-delay: -3.6s; }
.testemunhos.vivo.em-cena .stars .estrela { animation: cintilar 2.4s ease-in-out infinite; animation-delay: calc(2s + var(--e, 0) * .12s + var(--c, 0) * .3s); }
@keyframes cintilar { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.45; } }
.testemunhos.vivo.em-cena .testemunho::before { animation: balancar 4s ease-in-out infinite; }
@keyframes balancar { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.testemunhos.vivo .autor-initials svg { animation: girar 8s linear infinite; }

/* ---------- onde atuamos: ondas sobre o mapa, mapa em parallax ---------- */
.zonas-image { position: relative; translate: 0 calc(var(--sp, 0) * -40px); }
.pino { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.pino i { position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%; border: 2.5px solid var(--orange); background: rgba(255,127,0,.06); opacity: 0; }
.zonas.vivo .pino i { animation: onda 2.4s ease-out infinite; }
.zonas.vivo .pino i:nth-child(2) { animation-delay: .8s; }
.zonas.vivo .pino i:nth-child(3) { animation-delay: 1.6s; }
@keyframes onda { from { transform: scale(.1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.zonas.vivo .zona-dot { animation: pulsar-ponto 1.6s ease-in-out infinite; }
@keyframes pulsar-ponto { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,127,0,.3); scale: 1; } 50% { box-shadow: 0 0 0 14px rgba(255,127,0,0); scale: 1.3; } }

/* ---------- próximo passo: luzes quentes a derivar, formulário a flutuar ---------- */
.cta-final::before, .cta-final::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.cta-final::before { width: 640px; height: 640px; left: -160px; top: -200px; background: radial-gradient(closest-side, rgba(255,127,0,.38), rgba(255,127,0,0)); }
.cta-final::after { width: 560px; height: 560px; right: -120px; bottom: -180px; background: radial-gradient(closest-side, rgba(255,177,92,.3), rgba(255,177,92,0)); }
.cta-final.vivo::before { animation: derivar-luz 11s ease-in-out infinite alternate; }
.cta-final.vivo::after { animation: derivar-luz 14s ease-in-out -5s infinite alternate-reverse; }
@keyframes derivar-luz { 0% { translate: 0 0; scale: 1; } 50% { translate: 260px 160px; scale: 1.25; } 100% { translate: 80px 300px; scale: .9; } }
.cta-final .section-title, .cta-final h2 { --tinta: #fff; --tinta-luz: #FFB15C; }
.cta-final .decor__rosa .r-fora, .cta-final .decor__rosa .r-meio { stroke-opacity: .4; }
.cta-final .cta-form { position: relative; }
.cta-final.vivo .cta-form { animation: flutuar-cartao 6s ease-in-out infinite; }
.cta-final .cta-form::before {
  content: ''; position: absolute; inset: -3px; border-radius: calc(var(--radius-lg) + 3px); padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(255,127,0,0) 0 55%, var(--orange) 78%, #FFD3A3 85%, rgba(255,127,0,0) 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);
}
.cta-final.vivo .cta-form::before { animation: girar-ang 4s linear infinite; }

/* ---------- rodapé: linha de luz a correr e logótipo a flutuar ---------- */
.footer { position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(255,127,0,0), var(--orange), rgba(255,127,0,0)); background-size: 50% 100%; background-repeat: no-repeat; animation: luz-rodape 4s linear infinite; }
@keyframes luz-rodape { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.footer.vivo .footer-logo { animation: flutuar-cartao 5s ease-in-out infinite; }

@media (max-width: 768px) {
  .decor__rosa { width: 340px; height: 340px; top: -90px; right: -130px; }
  .decor--esq .decor__rosa { left: -140px; bottom: -110px; }
  .decor__luz { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
  .fita { padding: 14px 0; }
  .fita--clara { padding: 18px 0; }
}

/* ============================================================
   REAÇÃO AO RATO (só computador; classe .com-rato posta por rato.js)
   ============================================================ */
/* topo: a imagem e o texto deslocam-se com o rato (parallax) */
.com-rato .voo__imagem, .com-rato .voo__video { transform: translate(calc(var(--hx, 0) * -32px), calc(var(--hy, 0) * -20px)) scale(1.03); }
.com-rato .voo__imagem--inicio { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.com-rato .voo__video { transition: opacity .6s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.com-rato .voo__imagem--fim { transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.com-rato .faixa__caixa { translate: calc(var(--hx, 0) * 16px) calc(var(--hy, 0) * 10px); transition: translate 1.2s cubic-bezier(.16,1,.3,1); }

/* cartões "Como ajudamos": inclinam-se, a luz segue o rato e o número ganha profundidade */
.como-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,127,0,.14), rgba(255,127,0,0) 60%); opacity: 0; transition: opacity .35s ease; }
.como-card.sob-rato::after { opacity: 1; }
.com-rato .como-card.sob-rato { transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateY(-6px); transition: transform .12s linear, box-shadow .35s ease; box-shadow: var(--shadow-lg); }
.como-number, .como-card h3 { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.como-card.sob-rato .como-number { transform: translate(calc(var(--ix, 0) * 18px), calc(var(--iy, 0) * 12px)); }
.como-card.sob-rato h3 { transform: translate(calc(var(--ix, 0) * 8px), calc(var(--iy, 0) * 5px)); }

/* fotografia do escritório: inclina e a imagem desloca-se por dentro */
.com-rato .pos-image.sob-rato { transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .15s linear; }
.pos-image img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.pos-image.sob-rato img { transform: translate(calc(var(--ix, 0) * -28px), calc(var(--iy, 0) * -20px)) scale(1.05); }

/* testemunhos e formulário: luz que segue o rato */
.testemunho::after, .cta-final .cta-form::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,127,0,.13), rgba(255,127,0,0) 60%); opacity: 0; transition: opacity .35s ease; }
.cta-final .cta-form::after { background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,127,0,.08), rgba(255,127,0,0) 60%); }
.testemunho.sob-rato::after, .cta-final .cta-form.sob-rato::after { opacity: 1; }

/* a agulha do compasso aponta para o rato */
.decor.apontar .r-gira--c { animation: none !important; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.decor__rosa .r-agulha { transition: fill-opacity .4s ease; }
.decor.apontar .r-agulha { fill-opacity: .34; }

/* palavras dos títulos levantam-se e acendem ao passar */
.section-title.pronto .palavra { transition: translate .35s cubic-bezier(.16,1,.3,1), opacity .3s ease; transition-delay: 0s; }
.com-rato .section-title.pronto .palavra:hover { translate: 0 -.2em; --tinta: var(--orange-texto, #AD5400); --tinta-luz: var(--orange-texto, #AD5400); color: var(--orange-texto, #AD5400); }
.com-rato .cta-final .section-title.pronto .palavra:hover { --tinta: #FFB15C; --tinta-luz: #FFB15C; color: #FFB15C; }

/* pilares: deslizam e o ícone cresce */
.com-rato .pillar { transition: translate .35s cubic-bezier(.16,1,.3,1); }
.com-rato .pillar:hover { translate: 10px 0; }
.pillar-icon { transition: scale .35s cubic-bezier(.34,1.56,.64,1); }
.com-rato .pillar:hover .pillar-icon { scale: 1.4; }

/* fitas: param e a frase sob o rato acende */
.fita__trilho span { transition: color .3s ease; }
.fita--laranja .fita__trilho span:hover { color: #fff; }
.fita--clara .fita__trilho span:hover { color: var(--orange-texto, #AD5400); }

/* rodapé: sublinhado laranja que cresce */
.footer-col ul a { background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: color .2s ease, background-size .35s cubic-bezier(.16,1,.3,1); }
.footer-col ul a:hover { background-size: 100% 1px; }

/* quem pediu ao sistema menos movimento fica só com as entradas */
@media (prefers-reduced-motion: reduce) {
  .progresso-scroll, .decor *, .fita__trilho, .fita__trilho i, .btn--primary, .btn-submit, .btn--primary::after, .btn-submit::after, .btn--outline-white::after,
  .section-label::before, .section-title .palavra, .voo__imagem--fim img, .pos-image img, .pos-image::after, .pillar-icon, .como-card, .como-card::before, .como-number,
  .membro__palco, .membro__moldura, .membro__planta, .caminho__linha, .step-icone::after, .step-icone path, .step-tempo::after, .testemunho, .testemunho::before, .estrela, .autor-initials svg,
  .pino i, .zona-dot, .cta-final::before, .cta-final::after, .cta-form, .cta-form::before, .footer::before, .footer-logo { animation: none !important; }
  .section-title .palavra { opacity: 1; translate: none; rotate: none; transition: none; }
  .step.em-curso .step-tempo::after { transform: scaleX(1); }
}