:root {
  --fundo: #eef0f3;
  --cartao: #ffffff;
  --texto: #1f2430;
  --suave: #5d6576;
  --linha: #dfe3e8;
  --c1: #f6f7f9;
  --c2: #e4e7ec;
  --c3: #c3c9d2;
  --esc1: #353b47;
  --esc2: #444b58;
  --esc3: #5b6371;
  --acento: #ff7a1a;
  --sug: #fff1a8;
  --ok: #1f9d55;
  --erro: #c0392b;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 120px; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: inherit; }

/* ---------- barra ---------- */
.barra { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.barra-in { max-width: 1480px; margin: 0 auto; padding: 10px 20px 6px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marca { display: flex; flex-direction: column; line-height: 1.2; }
.marca b { font: 800 16px Sora, Inter, sans-serif; }
.marca span { font-size: 12.5px; color: var(--suave); }
.progresso { flex: 1; min-width: 170px; max-width: 420px; }
.prog-txt { font-size: 12.5px; color: var(--suave); margin-bottom: 4px; }
.prog-txt b { color: var(--texto); }
.prog-trilho { height: 8px; background: var(--c2); border-radius: 99px; overflow: hidden; }
.prog-barra { height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width .5s ease; }
.estado { margin-left: auto; font-size: 12.5px; color: var(--suave); text-align: right; max-width: 280px; }
.estado.ok { color: var(--ok); }
.estado.erro { color: var(--erro); }
.indice { max-width: 1480px; margin: 0 auto; padding: 0 20px 9px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex-shrink: 0; text-decoration: none; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--c2); color: var(--suave); white-space: nowrap; }
.indice a.feito { background: #e3f4ea; color: var(--ok); }
.indice a.feito::before { content: '✓ '; }

/* ---------- área de trabalho: desenho + prévia ---------- */
.trabalho { max-width: 1480px; margin: 0 auto; padding: 22px 20px 90px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.wire { min-width: 0; }
.intro, .fim { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 22px 24px; }
.intro { margin-bottom: 20px; }
.intro h1 { font: 800 24px/1.2 Sora, Inter, sans-serif; margin: 0 0 8px; }
.intro p { margin: 0 0 12px; color: var(--suave); }
.intro a { color: var(--texto); font-weight: 600; }
.legenda { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 14px; }
.amostra-sug { font-style: normal; background: var(--sug); padding: 0 5px; border-radius: 4px; }
.amostra-falta { font-style: normal; background: #ffe0cc; color: #b4480c; padding: 0 5px; border-radius: 4px; }
.aviso-regra { background: #fff4ec; border-left: 4px solid var(--acento); padding: 9px 14px; border-radius: 8px; color: var(--texto) !important; font-size: 14px; margin: 0 !important; }
.fim { text-align: center; margin-top: 20px; }
.fim h2 { margin: 0 0 6px; font: 700 19px Sora, Inter, sans-serif; }
.fim p { margin: 0; color: var(--suave); }

/* ---------- cada parte ---------- */
.w-sec { margin-bottom: 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--linha); background: var(--cartao); }
.w-cab { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--cartao); border-bottom: 1px solid var(--linha); }
.w-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--esc1); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.w-cab h2 { margin: 0; font: 700 16px Sora, Inter, sans-serif; flex: 1; min-width: 0; }
.w-aprovar { flex-shrink: 0; border: 1.5px solid var(--c3); background: #fff; color: var(--suave); font: 600 13px Inter, sans-serif; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.w-aprovar:hover { border-color: var(--ok); color: var(--ok); }
.w-aprovar.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.w-fora { font-size: 12px; color: var(--suave); background: var(--c2); padding: 3px 10px; border-radius: 99px; }
.w-nota { margin: 0; padding: 10px 18px; background: #fffbe6; border-bottom: 1px solid #f3e7b0; font-size: 13.5px; color: #5c5233; }
.w-nota b { color: #3f381f; }
.w-pagina { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.tom-claro .w-pagina { background: var(--c1); }
.tom-escuro .w-pagina { background: var(--esc1); color: #eef0f3; }
.tom-nota .w-pagina { background: #fffdf3; }

/* ---------- texto editável no lugar ---------- */
.ed { white-space: pre-wrap; word-break: break-word; border-radius: 6px; padding: 2px 6px; margin: 0 -6px; outline: 1.5px dashed transparent; outline-offset: 1px; cursor: text; min-height: 1.5em; transition: outline-color .15s, background .15s; }
.ed:hover { outline-color: var(--c3); }
.tom-escuro .ed:hover { outline-color: var(--esc3); }
.ed:focus { outline: 2px solid var(--acento); background: rgba(255,255,255,.06); }
.tom-claro .ed:focus, .tom-nota .ed:focus { background: #fff; }
.ed:empty::before { content: attr(data-ph); color: #9aa1ad; font-style: italic; font-weight: 400; }
.tom-escuro .ed:empty::before { color: #8d95a3; }
.ed.sug { background: var(--sug); color: #3a3417; }
.tom-escuro .ed.sug { background: rgba(255,225,90,.20); color: #fff3c4; }
.ed.falta { box-shadow: inset 3px 0 0 #f08a3c; }
.ed.sug:focus { background: #fff; color: var(--texto); }
.tom-escuro .ed.sug:focus { background: rgba(255,255,255,.08); color: #fff; }

.w-pill { align-self: flex-start; font-size: 12.5px; font-weight: 600; border: 1px solid var(--esc3); border-radius: 99px; padding: 3px 12px !important; margin: 0 !important; }
.w-h1 { font: 800 30px/1.15 Sora, Inter, sans-serif; letter-spacing: -.01em; }
.w-h2 { font: 800 23px/1.2 Sora, Inter, sans-serif; letter-spacing: -.01em; }
.w-sub { font-size: 16px; opacity: .85; }
.w-chapeu { align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #c8471f; }
.tom-escuro .w-chapeu { color: #f3a46a; }
.w-b { font-weight: 700; font-size: 15.5px; }
.w-p { font-size: 14px; opacity: .9; }
.w-mini { font-size: 13px; opacity: .75; }
.w-fecho { font-size: 15px; font-weight: 600; border-left: 3px solid var(--c3); padding-left: 12px !important; margin-left: 0 !important; }
.w-btn { align-self: flex-start; background: var(--c3); color: #fff; font-weight: 700; padding: 10px 18px !important; margin: 4px 0 0 !important; border-radius: 10px !important; }
.tom-escuro .w-btn { background: var(--esc3); }
.w-btn.sug { background: #f1d660; color: #3a3417; }
.w-cabeca { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.w-cabeca.centro { align-self: center; text-align: center; align-items: center; }
.centro { text-align: center; }

.w-topo { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.w-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: start; }
.w-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.w-checks { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.w-checks li { display: flex; gap: 8px; align-items: flex-start; }
.w-checks li::before { content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--esc3); display: grid; place-items: center; font-size: 11px; margin-top: 3px; }
.w-checks .ed { flex: 1; margin: 0; }
.w-leg { background: var(--esc2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.w-faixa { display: flex; flex-wrap: wrap; gap: 8px; }
.w-chip { background: rgba(255,255,255,.08); border: 1px solid var(--esc3); border-radius: 99px; padding: 5px 14px !important; margin: 0 !important; font-size: 13.5px; }
.w-faixa-clara .w-chip { background: #fff; border-color: var(--c2); }
.w-grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.w-grade4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.w-card { background: #fff; border: 1px solid var(--c2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tom-escuro .w-card { background: var(--esc2); border-color: var(--esc3); }
.w-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #c8471f; }
.w-quote { border-left: 4px solid var(--esc3); }
.w-tile { align-items: center; text-align: center; }
.w-icone { width: 34px; height: 34px; border-radius: 10px; background: var(--c2); }
.w-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.w-numero { background: var(--esc2); border-radius: 10px; padding: 10px 12px !important; margin: 0 !important; font-weight: 700; font-size: 14px; }
.w-passo-n { width: 28px; height: 28px; border-radius: 50%; background: var(--esc1); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.w-selo { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ok); }
.w-faq { display: flex; flex-direction: column; gap: 8px; }
.w-faq-item { background: #fff; border: 1px solid var(--c2); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
.w-final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px 0; }
.w-final .w-btn { align-self: center; }
.w-legal { font-size: 12.5px; }
.w-notas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-nota-item { background: #fff; border: 1px solid #f0e6bd; border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.w-nota-item.largo { grid-column: 1 / -1; }
.w-nota-item > b { font-size: 13px; color: #5c5233; }

/* ---------- espaço de foto ---------- */
.slot { position: relative; border: 2px dashed var(--c3); border-radius: 12px; background: rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; min-height: 90px; }
.tom-escuro .slot { border-color: var(--esc3); background: rgba(255,255,255,.04); }
.slot-add { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--suave); background: #fff; border: 1px solid var(--c2); border-radius: 99px; padding: 5px 12px; text-align: center; }
.tom-escuro .slot-add { background: var(--esc2); border-color: var(--esc3); color: #dfe3e8; }
.slot-add:hover { border-color: var(--acento); }
.slot-msg { font-size: 12px; color: var(--suave); text-align: center; }
.slot-msg:empty { display: none; }
.slot-in { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.slot-in:empty { display: none; }
.slot:not(.multi).cheio .slot-in { grid-template-columns: 1fr; }
.slot:not(.multi).cheio .slot-add span::after { content: ' (trocar)'; }
.w-logo { min-height: 46px; width: 170px; flex-direction: row; padding: 6px; }
.w-foto-g { min-height: 300px; }
.w-foto-g.cheio .arq img { height: 280px; }
.w-foto-p { min-height: 110px; }
.w-prints { min-height: 110px; }
.arq { position: relative; border-radius: 8px; overflow: hidden; background: var(--c2); }
.arq img { display: block; width: 100%; height: 90px; object-fit: cover; }
.arq-doc { height: 90px; display: grid; place-items: center; font-weight: 800; color: var(--suave); }
.arq-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }

/* ---------- prévia ---------- */
.previa { position: sticky; top: 108px; }
.previa-cab { display: flex; align-items: center; gap: 10px; margin: 0 0 8px 4px; font-size: 13px; flex-wrap: wrap; }
.previa-obs { color: var(--suave); font-size: 12px; }
.modos { display: inline-flex; background: var(--c2); border-radius: 99px; padding: 3px; }
.modos button { border: 0; background: transparent; color: var(--suave); font: 600 12.5px Inter, sans-serif; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.modos button.on { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.previa-ampliar { margin-left: auto; border: 1px solid var(--c3); background: #fff; color: var(--texto); font: 600 12.5px Inter, sans-serif; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.previa-fechar { display: none; }
.barra-nav { display: none; }
.celular { width: 390px; max-width: 100%; height: calc(100vh - 160px); min-height: 420px; border: 10px solid #15181e; border-radius: 34px; background: #15181e; overflow: hidden; box-shadow: 0 20px 50px rgba(20,24,30,.25); }
.ver-previa { display: none; }

.pv {
  --pv-escuro: #0b0b0b; --pv-escuro2: #151515; --pv-preto: #000000;
  --pv-creme: #f6f6f2; --pv-creme2: #ecece6;
  --pv-ouro: #fcf408; --pv-ouro-txt: #fcf408; --pv-ouro-esc: #111111;
  height: 100%; overflow-y: auto; overflow-x: hidden; border-radius: 24px; background: var(--pv-creme); color: #141416;
  font: 13.5px/1.55 Inter, sans-serif; scrollbar-width: none; position: relative;
}
.pv::-webkit-scrollbar { display: none; }
.pv section { transition: box-shadow .4s; }
.pv section.foco { box-shadow: inset 0 0 0 3px rgba(255,122,26,.75); }
.pv h1, .pv h2, .pv h3 { font-family: Sora, Inter, sans-serif; letter-spacing: -.01em; margin: 0 0 10px; }
.pv h1 { font-size: 26px; line-height: 1.15; font-weight: 800; }
.pv h2 { font-size: 21px; line-height: 1.2; font-weight: 800; }
.pv h3 { font-size: 16px; margin: 0; }
.pv p { margin: 0 0 10px; }
.pv mark { background: #ffe0cc; color: #b4480c; border-radius: 3px; padding: 0 2px; }
.pv-escuro, .pv-escuro2, .pv-claro, .pv-claro2 { padding: 34px 20px; }
.pv-escuro { background: var(--pv-escuro); color: #f6f4f1; }
.pv-escuro2 { background: var(--pv-escuro2); color: #f6f4f1; }
.pv-claro { background: var(--pv-creme); }
.pv-claro2 { background: var(--pv-creme2); }
.pv-centro { text-align: center; }
.pv-sub { color: #57534e; font-size: 14px; }
.pv-escuro .pv-sub, .pv-escuro2 .pv-sub { color: #b9c0cc; }
.pv-chapeu { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pv-ouro-esc); margin-bottom: 8px; }
.pv-chapeu::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--pv-ouro); }
.pv-escuro .pv-chapeu, .pv-escuro2 .pv-chapeu { color: var(--pv-ouro-txt); }
.pv-topo { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(0,0,0,.94); color: #fff; }
.pv-logo { height: 34px; max-width: 140px; object-fit: contain; }
.pv-logo-txt { font: 800 14px Sora, sans-serif; }
.pv-topo .pv-btn { padding: 7px 12px; font-size: 12px; margin: 0; }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--pv-ouro); color: #000; font-weight: 700; font-size: 14px; padding: 13px 20px; border-radius: 12px; margin: 6px 0 8px; box-shadow: 0 10px 24px rgba(252,244,8,.22); }
.pv-btn svg { width: 17px; height: 17px; flex: none; }
.pv-pill { display: inline-block; font-size: 11.5px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: 4px 12px; margin-bottom: 14px; color: #dfe3ea; }
.pv-checks { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.pv-checks li { display: flex; gap: 9px; align-items: flex-start; color: #dfe3ea; }
.pv-checks li::before { content: '✓'; flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--pv-ouro); color: #000; font-size: 11px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
.pv-mini { font-size: 12px; color: #9aa3b2; }
.pv-foto-g { margin: 18px 0 0; position: relative; }
.pv-foto-img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; display: block; }
.pv-foto-g figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(0,0,0,.8); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; font-size: 12px; color: #c9d0db; }
.pv-foto-g figcaption b { color: #fff; font-size: 13px; }
.pv-vazio { display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(150,160,175,.18) 0 10px, rgba(150,160,175,.10) 10px 20px); color: #8b94a3; font-size: 12px; border-radius: 12px; }
.pv-faixa { background: var(--pv-preto); color: #fff; overflow: hidden; padding: 11px 0; }
.pv-faixa-trilho { display: flex; gap: 14px; width: max-content; animation: pv-correr 40s linear infinite; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pv-faixa-trilho i { font-style: normal; color: var(--pv-ouro-txt); }
@keyframes pv-correr { to { transform: translateX(-50%); } }
.pv-card { background: #fff; border: 1px solid rgba(17,17,19,.08); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.pv-card b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.pv-card p { margin: 0; color: #57534e; font-size: 13px; }
.pv-card small { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #000; background: var(--pv-ouro); border-radius: 4px; padding: 1px 6px; margin-bottom: 6px; }
.pv-fecho { font-weight: 600; margin-top: 14px; padding-left: 12px; border-left: 4px solid #111; }
.pv-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 14px; }
.pv-num { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px; font-size: 12.5px; font-weight: 600; color: #fff; }
.pv-prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pv-prints img, .pv-prints .pv-vazio { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; }
.pv blockquote { margin: 0 0 10px; padding: 12px 14px; border-left: 3px solid var(--pv-ouro); background: rgba(255,255,255,.05); border-radius: 0 12px 12px 0; font-size: 13px; color: #dfe3ea; }
.pv-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; text-align: center; }
.pv-tipo { background: #fff; border: 1px solid rgba(17,17,19,.08); border-radius: 14px; padding: 12px 10px; }
.pv-tipo b { display: block; font-size: 13.5px; margin: 6px 0 2px; }
.pv-tipo p { margin: 0; font-size: 12px; color: #57534e; }
.pv-icone { display: inline-block; width: 30px; height: 30px; border-radius: 9px; background: #000; box-shadow: inset 0 -6px 0 var(--pv-ouro); }
.pv-pessoa { display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.pv-pessoa-foto { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; }
.pv-cargo { display: block; font-size: 12px; color: var(--pv-ouro-txt); margin: 2px 0 8px; }
.pv-pessoa p { color: #c9d0db; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.pv-passo { display: flex; gap: 12px; background: #fff; border: 1px solid rgba(17,17,19,.08); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.pv-passo-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #000; color: var(--pv-ouro); display: grid; place-items: center; font-weight: 800; }
.pv-passo b { display: block; margin-bottom: 2px; }
.pv-passo p { margin: 0 0 4px; color: #57534e; font-size: 13px; }
.pv-selo { display: inline-block; font-size: 11px; font-weight: 700; color: #1a7a45; background: #e3f4ea; border-radius: 99px; padding: 2px 9px; }
.pv-selos { background: #fff; padding: 18px 16px; border-top: 1px solid rgba(17,17,19,.06); border-bottom: 1px solid rgba(17,17,19,.06); }
.pv-logos { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.pv-logos img { height: 30px; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.pv-selos-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pv-selos-chips span { font-size: 11.5px; color: #57534e; border: 1px solid rgba(17,17,19,.12); border-radius: 99px; padding: 4px 10px; }
.pv-faq { background: #fff; border: 1px solid rgba(17,17,19,.08); border-radius: 12px; margin-bottom: 8px; padding: 0 14px; }
.pv-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.pv-faq summary::after { content: '+'; color: #000; font-weight: 800; }
.pv-faq[open] summary::after { content: '−'; }
.pv-faq p { color: #57534e; font-size: 13px; }
.pv-final { padding: 44px 20px; }
.pv-final h2 { font-size: 22px; }
.pv-rodape { background: var(--pv-preto); color: #9aa3b2; padding: 24px 20px 70px; font-size: 12px; }
.pv-rodape p { margin: 0 0 12px; }
.pv-legal { font-size: 11px; color: #7b8494; }
.pv-barra-wpp { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--pv-ouro); color: #000; font-weight: 700; padding: 12px; }
.pv-barra-wpp svg { width: 18px; height: 18px; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .trabalho { grid-template-columns: minmax(0, 1fr); }
  .previa { display: none; }
  .previa-ampliar { display: none; }
  body.modo-desk .trabalho { grid-template-columns: minmax(0, 1fr); }
  .ver-previa { display: block; position: fixed; right: 16px; bottom: 16px; z-index: 40; border: 0; border-radius: 99px; background: var(--esc1); color: #fff; font: 700 14px Inter, sans-serif; padding: 13px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 140px; }
  .barra-in { padding: 10px 16px 6px; gap: 10px; }
  .estado { margin-left: 0; width: 100%; text-align: left; max-width: none; }
  .indice { padding: 0 16px 9px; }
  .trabalho { padding: 16px 16px 90px; }
  .intro { padding: 18px; }
  .intro h1 { font-size: 21px; }
  .w-cab { padding: 10px 14px; flex-wrap: wrap; }
  .w-nota { padding: 9px 14px; }
  .w-pagina { padding: 18px 16px; }
  .w-h1 { font-size: 24px; }
  .w-h2 { font-size: 20px; }
  .w-hero, .w-grade2, .w-grade3, .w-grade4, .w-notas { grid-template-columns: 1fr; }
  .w-nums { grid-template-columns: 1fr 1fr; }
  .w-foto-g { min-height: 200px; }
  body.previa-aberta .previa { padding: 10px; }
  body.previa-aberta .celular { border-width: 6px; border-radius: 26px; }
}

/* ---------- prévia no modo computador ---------- */
.trabalho { transition: grid-template-columns .3s; }
body.modo-desk .trabalho { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
body.modo-desk .celular { width: 100%; border: 1px solid #c9ced6; border-radius: 12px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(20,24,30,.18); }
body.modo-desk .barra-nav { display: flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px; background: #eceef1; border-bottom: 1px solid #d6dae0; }
body.modo-desk .barra-nav i { width: 10px; height: 10px; border-radius: 50%; background: #c9ced6; }
body.modo-desk .barra-nav i:nth-child(1) { background: #ff6159; } body.modo-desk .barra-nav i:nth-child(2) { background: #ffbd2e; } body.modo-desk .barra-nav i:nth-child(3) { background: #28c941; }
body.modo-desk .barra-nav span { margin-left: 10px; flex: 1; max-width: 360px; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: 11.5px; color: var(--suave); }
body.modo-desk .pv { flex: 1; height: auto; min-height: 0; border-radius: 0 0 12px 12px; }

.pv.desk { font-size: 16px; }
.pv.desk .pv-barra-wpp { display: none; }
.pv.desk .pv-escuro, .pv.desk .pv-escuro2, .pv.desk .pv-claro, .pv.desk .pv-claro2 { padding: 84px 90px; }
.pv.desk .pv-topo { padding: 16px 90px; }
.pv.desk .pv-logo { height: 46px; max-width: 200px; }
.pv.desk .pv-topo .pv-btn { padding: 11px 18px; font-size: 14px; }
.pv.desk h1 { font-size: 52px; max-width: 640px; }
.pv.desk h2 { font-size: 38px; max-width: 780px; }
.pv.desk h3 { font-size: 20px; }
.pv.desk .pv-sub { font-size: 18px; max-width: 720px; }
.pv.desk .pv-chapeu { font-size: 13px; }
.pv.desk .pv-btn { font-size: 16px; padding: 16px 26px; }
.pv.desk .pv-mini { font-size: 14px; }
.pv.desk .pv-pill { font-size: 14px; }
.pv.desk .pv-checks li { font-size: 16.5px; }
.pv.desk .pv-hero { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 56px; align-items: start; }
.pv.desk .pv-hero > * { grid-column: 1; }
.pv.desk .pv-hero > .pv-foto-g { grid-column: 2; grid-row: 1 / span 8; margin: 0; }
.pv.desk .pv-foto-img { height: 540px; }
.pv.desk .pv-faixa { padding: 16px 0; }
.pv.desk .pv-faixa-trilho { font-size: 16px; gap: 22px; }
.pv.desk .pv-l2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.pv.desk .pv-lauto { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; margin-top: 26px; }
.pv.desk .pv-lista > * { margin-bottom: 0; }
.pv.desk .pv-card { padding: 22px 24px; }
.pv.desk .pv-card b { font-size: 18px; }
.pv.desk .pv-card p, .pv.desk .pv-passo p, .pv.desk .pv-faq p { font-size: 15px; }
.pv.desk .pv-fecho { font-size: 18px; margin-top: 30px; max-width: 860px; }
.pv.desk .pv-nums { grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0; }
.pv.desk .pv-num { font-size: 16px; padding: 18px; }
.pv.desk .pv-prints { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pv.desk .pv-prints img, .pv.desk .pv-prints .pv-vazio { height: 230px; }
.pv.desk blockquote { font-size: 15px; }
.pv.desk .pv-centro h2, .pv.desk .pv-centro .pv-sub { margin-left: auto; margin-right: auto; }
.pv.desk .pv-tipos { grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 30px auto 20px; }
.pv.desk .pv-tipo { padding: 24px 18px; }
.pv.desk .pv-tipo b { font-size: 17px; }
.pv.desk .pv-tipo p { font-size: 14px; }
.pv.desk .pv-pessoa-foto { height: 320px; }
.pv.desk .pv-pessoa p { -webkit-line-clamp: 12; font-size: 14.5px; }
.pv.desk .pv-passo { flex-direction: column; padding: 22px; }
.pv.desk .pv-faq-lista { max-width: 860px; margin-top: 24px; }
.pv.desk .pv-faq summary { font-size: 16px; padding: 16px 0; }
.pv.desk .pv-final { padding: 110px 90px; }
.pv.desk .pv-final h2 { font-size: 44px; max-width: 820px; margin: 0 auto 18px; }
.pv.desk .pv-selos { padding: 28px 90px; }
.pv.desk .pv-logos img { height: 44px; }
.pv.desk .pv-selos-chips span { font-size: 13.5px; }
.pv.desk .pv-rodape { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 56px 90px; font-size: 14px; }
.pv.desk .pv-legal { font-size: 12.5px; }

/* ---------- prévia ampliada (tela cheia, qualquer tamanho de tela) ---------- */
body.previa-aberta { overflow: hidden; }
body.previa-aberta .previa { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 50; background: rgba(20,24,30,.92); padding: 14px 20px; align-items: center; }
body.previa-aberta .previa-cab { color: #fff; width: 100%; max-width: 390px; margin: 0 0 10px; }
body.previa-aberta.modo-desk .previa-cab { max-width: 1280px; }
body.previa-aberta .previa-obs { color: #b9c0cc; }
body.previa-aberta .previa-ampliar { display: none; }
body.previa-aberta .previa-fechar { display: block; margin-left: auto; border: 0; border-radius: 99px; background: #fff; color: var(--texto); font: 700 13px Inter, sans-serif; padding: 7px 14px; cursor: pointer; }
body.previa-aberta .celular { height: calc(100vh - 80px); }
body.previa-aberta.modo-desk .celular { width: min(1280px, 100%); }
body.previa-aberta .ver-previa { display: none; }

/* o topo da prévia fica preso enquanto a página rola (o bloco inteiro, não só o miolo) */
.pv section#pv-topo { position: sticky; top: 0; z-index: 3; }
.pv section#pv-topo .pv-topo { position: static; }
/* logo transparente (branco e amarelo) precisa de fundo escuro no desenho */
.w-logo { width: 240px; }
.w-logo .arq { background: #000; }
.w-logo .arq img { object-fit: contain; height: 70px; padding: 6px; }

/* ---------- dobra Representante oficial Servopa ---------- */
.w-selo-par { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.w-ellus-mini { background: #000; color: #fcf408; border-radius: 10px; padding: 12px 16px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.w-ellus-mini small { color: #bbb; font-weight: 400; }
.w-x { font-weight: 800; font-size: 20px; color: var(--suave); }
.w-logo-sv { width: 260px; min-height: 76px; }
.w-logo-sv .arq { background: #fff; }
.w-logo-sv .arq img { object-fit: contain; height: 62px; padding: 8px; }
.tom-claro .w-numero { background: #fff; border: 1px solid var(--c2); }
.tom-claro .w-checks li::before { color: #fff; }
.pv-par { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; flex-wrap: wrap; }
.pv-par-ellus { background: #000; border-radius: 12px; padding: 8px 14px; display: inline-flex; }
.pv-par-ellus img { height: 46px; }
.pv-par-sv { background: #fff; border: 1px solid rgba(17,17,19,.1); border-radius: 12px; padding: 12px 16px; display: inline-flex; align-items: center; min-height: 62px; }
.pv-par-sv img { height: 36px; }
.pv-par-sv.pv-vazio { min-width: 130px; }
.pv-par-x { font-weight: 800; font-size: 20px; color: #9a9a9a; }
.pv-nums-claro .pv-num { background: #fff; border: 1px solid rgba(17,17,19,.08); color: #141416; }
.pv-checks-claro li { color: #141416; }
.pv.desk .pv-par { gap: 18px; margin: 26px 0 30px; }
.pv.desk .pv-par-ellus img { height: 70px; }
.pv.desk .pv-par-sv { padding: 16px 22px; min-height: 92px; }
.pv.desk .pv-par-sv img { height: 56px; }
.pv.desk .pv-checks-claro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.pv.desk .pv-checks-claro li { font-size: 16px; }

/* ---------- logos lado a lado, sem caixa, numa faixa preta (06/10) ---------- */
.pv-par { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 20px; padding: 22px 18px; background: #0b0b0b; border-radius: 16px; flex-wrap: nowrap; }
.pv-par img.pv-par-ellus { height: 52px; width: auto; background: none; padding: 0; border-radius: 0; }
.pv-par img.pv-par-sv { height: 34px; width: auto; background: none; border: 0; padding: 0; min-height: 0; }
.pv-par .pv-par-fio { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }
.pv-par .pv-vazio { min-width: 120px; min-height: 40px; }
.pv.desk .pv-par { justify-content: flex-start; gap: 40px; padding: 30px 44px; margin: 28px 0 32px; }
.pv.desk .pv-par img.pv-par-ellus { height: 78px; }
.pv.desk .pv-par img.pv-par-sv { height: 54px; }
.w-logo-sv .arq { background: #0b0b0b; }
/* topo: coluna do texto mais larga, para o título e as bolinhas respirarem */
.pv.desk .pv-hero { grid-template-columns: 1.3fr .7fr; }
.pv.desk h1 { max-width: 700px; }

/* ---------- imagens provisórias do site da Servopa (06/10) ---------- */
.w-tipo-img { width: 100%; min-height: 84px; padding: 6px; }
.w-tipo-img .arq { background: transparent; }
.w-tipo-img .arq img { object-fit: contain; height: 72px; }
.w-foto-sv { min-height: 150px; }
.w-foto-sv .arq { background: transparent; }
.w-foto-sv .arq img { object-fit: contain; height: 200px; }
.w-foto-final { min-height: 110px; }
.w-foto-final .arq img { height: 150px; }
.pv-tipo-img { display: block; width: 100%; height: 64px; object-fit: contain; margin: 0 auto 4px; }
.pv-sv-foto { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; margin: 0 0 16px; }
.pv-final-foto { background: linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.84)), var(--fundo) center / cover no-repeat; }
.pv.desk .pv-tipo-img { height: 104px; margin-bottom: 8px; }
.pv.desk .pv-sv-topo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.pv.desk .pv-sv-foto { max-height: 420px; margin: 0; }
.pv.desk .pv-final { padding: 140px 90px; }

/* ---------- acabamento (06/10): ícone de traço e print em pé ---------- */
.pv-tipo-ico { display: grid; place-items: center; height: 64px; margin-bottom: 4px; }
.pv-tipo-ico svg { width: 42px; height: 42px; }
.pv.desk .pv-tipo-ico { height: 104px; margin-bottom: 8px; }
.pv.desk .pv-tipo-ico svg { width: 62px; height: 62px; }
.pv-prints img, .pv-prints .pv-vazio { height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top center; }
.pv.desk .pv-prints img, .pv.desk .pv-prints .pv-vazio { height: auto; }

/* topo no computador: a grade esticava o botão e a frase pequena; cada um fica do tamanho do texto */
.pv.desk .pv-hero > * { justify-self: start; }
.pv.desk .pv-hero > .pv-foto-g { justify-self: stretch; }

/* etiqueta da foto do time: nome em destaque, linha de baixo em amarelo, fio amarelo à esquerda */
.pv-foto-g figcaption { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); border-left: 3px solid var(--pv-ouro); border-radius: 10px; padding: 10px 14px; gap: 2px; }
.pv-foto-g figcaption b { font: 700 14px Sora, Inter, sans-serif; letter-spacing: -.01em; }
.pv-foto-g figcaption span { color: var(--pv-ouro-txt); font-size: 12px; font-weight: 500; }
.pv.desk .pv-foto-g figcaption { left: 18px; right: auto; bottom: 18px; padding: 14px 20px; }
.pv.desk .pv-foto-g figcaption b { font-size: 18px; }
.pv.desk .pv-foto-g figcaption span { font-size: 14px; }

/* ---------- carrossel da primeira dobra (06/10, no estilo do site da Servopa) ---------- */
.w-car-rot { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #f3a46a; }
.w-car-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-car-item { position: relative; background: var(--esc2); border: 1px solid var(--esc3); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w-car-n { position: absolute; top: 6px; left: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.w-car-img { min-height: 80px; padding: 6px; }
.w-car-img .arq img { height: 90px; }

.pv-car { margin-top: 24px; }
.pv-car-palco { position: relative; height: 270px; perspective: 1200px; }
.pv-car-card { position: absolute; top: 0; left: 50%; width: 70%; height: 100%; border-radius: 22px; overflow: hidden; border: 5px solid rgba(255,255,255,.5); background: #1d1d1d; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  transition: transform .9s cubic-bezier(.22,.8,.2,1), filter .9s ease, opacity .9s ease; }
.pv-car-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-car-card.pv-vazio { border-style: dashed; }
.pv-car-card[data-pos="0"] { transform: translateX(-50%) scale(1); z-index: 5; }
.pv-car-card[data-pos="1"] { transform: translateX(-12%) scale(.8) rotateY(-16deg); z-index: 4; filter: grayscale(1) brightness(.72); }
.pv-car-card[data-pos="-1"] { transform: translateX(-88%) scale(.8) rotateY(16deg); z-index: 4; filter: grayscale(1) brightness(.72); }
.pv-car-card[data-pos="2"] { transform: translateX(16%) scale(.64) rotateY(-24deg); z-index: 3; filter: grayscale(1) brightness(.55); opacity: .85; }
.pv-car-card[data-pos="-2"] { transform: translateX(-116%) scale(.64) rotateY(24deg); z-index: 3; filter: grayscale(1) brightness(.55); opacity: .85; }
.pv-car-card[data-pos="fora"] { transform: translateX(-50%) scale(.5); opacity: 0; z-index: 1; }
.pv-car-legenda { text-align: center; color: #c9cdd4; font-size: 15px; line-height: 1.4; min-height: 2.9em; margin: 18px 0 10px; }
.pv-car-legenda b { color: var(--pv-ouro); font-weight: 700; }
.pv-car-cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--pv-ouro); margin-left: 3px; vertical-align: -3px; animation: pv-pisca 1s steps(1) infinite; }
@keyframes pv-pisca { 50% { opacity: 0; } }
.pv-car-setas { display: flex; justify-content: center; gap: 14px; }
.pv-car-seta { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--pv-ouro); color: #000; font: 700 24px/1 Inter, sans-serif; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; box-shadow: 0 6px 16px rgba(252,244,8,.22); transition: transform .2s; }
.pv-car-seta:hover { transform: scale(1.08); }
.pv.desk .pv-hero > .pv-car { grid-column: 2; grid-row: 1 / span 8; justify-self: stretch; margin-top: 0; align-self: center; }
.pv.desk .pv-car-palco { height: 470px; }
.pv.desk .pv-car-card { width: 72%; border-radius: 34px; border-width: 7px; }
.pv.desk .pv-car-legenda { font-size: 20px; margin-top: 22px; }
.pv.desk .pv-car-seta { width: 48px; height: 48px; font-size: 28px; }
.pv.desk .pv-hero { grid-template-columns: 1.05fr .95fr; }

/* carrossel fica dentro da própria área: os cartões de trás são cortados na borda e não invadem o título */
.pv-car-palco { overflow: hidden; border-radius: 6px; }
.pv-car-card { top: 10px; height: calc(100% - 34px); }
.pv-car-palco { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }

/* ---------- carrossel do time (06/10): imóvel de luxo ao fundo, pessoa sem fundo por cima, sem setas ---------- */
.w-car-fundo { min-height: 90px; }
.w-car-fundo .arq img { height: 110px; }
.w-car-grade { grid-template-columns: repeat(3, 1fr); }
.pv-car-card { background: radial-gradient(ellipse at 50% 110%, rgba(252,244,8,.28), transparent 62%), linear-gradient(160deg, #262626, #0d0d0d); }
.pv-car-card.com-fundo { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)), var(--fundo) center / cover no-repeat; }
.pv-car-card .pv-car-pessoa { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 94%; width: auto; max-width: 110%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.pv-car-vazio { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: #b9bec7; font-size: 13px; }
.pv-car-vazio::before { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 58%; height: 72%; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: rgba(255,255,255,.07); }
.pv.desk .pv-car-vazio { font-size: 17px; }
.pv-car-legenda b { color: var(--pv-ouro); }
/* fechamento sem foto: preto com brilho amarelo discreto */
.pv-final:not(.pv-final-foto) { background: radial-gradient(ellipse at 50% 125%, rgba(252,244,8,.20), transparent 60%), #0b0b0b; }

/* ---------- título e frase de apoio trocando junto com a foto (06/10) ---------- */
.pv-h-tit, .pv-h-sub { transition: opacity .32s ease, transform .32s ease; }
.pv-h-tit.saindo, .pv-h-sub.saindo { opacity: 0; transform: translateY(-10px); }
.w-var { position: relative; display: flex; flex-direction: column; gap: 8px; padding-left: 30px; }
.w-var-n { position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.w-var-rot { margin-top: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #f3a46a; }
.w-h1-var { font-size: 22px; }

/* ---------- fundo transparente da primeira dobra (06/10): imóvel de luxo bem apagado atrás do texto ---------- */
.w-hero-fundo { min-height: 60px; margin-bottom: 6px; }
.w-hero-fundo .arq img { height: 90px; }
.pv-hero.com-fundo { background: linear-gradient(180deg, rgba(11,11,11,.86), rgba(11,11,11,.93)), var(--fundo) center / cover no-repeat; }
.pv.desk .pv-hero.com-fundo { background: linear-gradient(90deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,.86) 42%, rgba(11,11,11,.62) 100%), var(--fundo) center / cover no-repeat; }

/* ---------- depoimentos (06/10): maiores, na altura da conversa, em moldura de celular ---------- */
.pv-prints { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: 8px -2px 14px; scrollbar-width: none; align-items: flex-start; }
.pv-prints::-webkit-scrollbar { display: none; }
.pv-prints img, .pv-prints .pv-vazio { flex: 0 0 80%; width: 80%; height: auto; aspect-ratio: auto; object-fit: contain; scroll-snap-align: center;
  border-radius: 18px; border: 5px solid #1f1f1f; box-shadow: 0 14px 32px rgba(0,0,0,.45); background: #e5ddd5; }
.pv-prints .pv-vazio { aspect-ratio: 3 / 4; }
.pv.desk .pv-prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; overflow: visible; padding: 0; margin: 30px 0 26px; align-items: start; }
.pv.desk .pv-prints img, .pv.desk .pv-prints .pv-vazio { width: 100%; height: auto; border-radius: 22px; border-width: 7px; transition: transform .35s ease, box-shadow .35s ease; }
.pv.desk .pv-prints img:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 22px 44px rgba(0,0,0,.55); }
.pv.desk .pv-prints img:nth-child(3n+2) { margin-top: 34px; }

/* os 3 pontos com check também trocam junto com a foto */
.pv-h-pts { transition: opacity .32s ease, transform .32s ease; }
.pv-h-pts.saindo { opacity: 0; transform: translateY(-10px); }
.w-var .w-checks { margin-top: 2px; }

/* ---------- transições mais suaves e elegantes (06/10, pedido do Jefferson) ---------- */
/* giro do carrossel: começa e termina devagar, sem tranco */
.pv-car-card { transition: transform 1.15s cubic-bezier(.65,.05,.36,1), filter 1.15s cubic-bezier(.65,.05,.36,1), opacity 1.15s cubic-bezier(.65,.05,.36,1), box-shadow 1.15s ease;
  will-change: transform, filter, opacity; backface-visibility: hidden; }
.pv-car-card:not([data-pos="0"]) { box-shadow: 0 10px 24px rgba(0,0,0,.35); }
/* a pessoa da frente fica no tamanho cheio; as de trás, um pouco menores */
.pv-car-card .pv-car-pessoa { transition: transform 1.15s cubic-bezier(.65,.05,.36,1); }
.pv-car-card:not([data-pos="0"]) .pv-car-pessoa { transform: translateX(-50%) scale(.95); }
/* cartão que dá a volta (de um lado para o outro) some no meio do caminho em vez de cruzar atrás da foto */
.pv-car-card.dando-volta { animation: pv-volta 1.15s cubic-bezier(.65,.05,.36,1); }
@keyframes pv-volta { 30%, 70% { opacity: 0; } }

/* título, frase de apoio e pontos: saem rápido para cima e entram de baixo, em cascata, com leve desfoque */
.pv-h-tit, .pv-h-sub, .pv-h-pts { transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1), filter .75s cubic-bezier(.22,1,.36,1); }
.pv-h-sub { transition-delay: .09s; }
.pv-h-pts { transition-delay: .18s; }
.pv-h-tit.saindo, .pv-h-sub.saindo, .pv-h-pts.saindo { opacity: 0; transform: translateY(-8px); filter: blur(5px);
  transition-duration: .4s; transition-timing-function: cubic-bezier(.4,0,1,1); transition-delay: 0s; }
.pv-h-tit.entrando, .pv-h-sub.entrando, .pv-h-pts.entrando { opacity: 0; transform: translateY(12px); filter: blur(5px); transition: none; }

/* nome e papel surgem letra a letra, sem cursor piscando; o texto já ocupa o lugar e não empurra o centro */
.pv-car-cursor { display: none; }
.pv-car-txt { display: inline-block; transition: opacity .3s ease; }
.pv-car-txt.saindo { opacity: 0; }
.pv-car-txt .l { opacity: 0; animation: pv-letra .6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes pv-letra { to { opacity: 1; } }

/* setas: resposta macia ao toque */
.pv-car-seta { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }
.pv-car-seta:active { transform: scale(.94); }

/* faixa de perguntas: some nas pontas em vez de cortar seco */
.pv-faixa { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }

/* quem prefere menos movimento no sistema vê as trocas sem animação */
@media (prefers-reduced-motion: reduce) {
  .pv-car-card, .pv-car-card .pv-car-pessoa, .pv-h-tit, .pv-h-sub, .pv-h-pts, .pv-car-txt { transition-duration: .01s !important; transition-delay: 0s !important; }
  .pv-car-card.dando-volta { animation: none; }
  .pv-car-txt .l { animation: none; opacity: 1; }
}

/* ---------- elementos 3D do carrossel (06/10, v2): atravessam de lado a cada troca, num arco, trocando de objeto no caminho.
   Só transform e opacity (a placa de vídeo anima, sem travar). As posições usam cqw: % da largura da área do carrossel. ---------- */
.pv-car { position: relative; }
.pv-3d { position: absolute; left: 0; right: 0; top: 0; height: 270px; pointer-events: none; z-index: 6; container-type: inline-size; }
.pv-3d-g, .pv-3d-p { position: absolute; left: 0; will-change: transform; transition: transform 1.25s cubic-bezier(.65, 0, .35, 1); }
.pv-3d-g { bottom: -4%; width: 92px; transform: translateX(3cqw); }
.pv-3d-p { top: 2%; width: 50px; transform: translateX(calc(95cqw - 100%)); }
.pv-3d.lado-dir .pv-3d-g { transform: translateX(calc(97cqw - 100%)); }
.pv-3d.lado-dir .pv-3d-p { transform: translateX(5cqw); }
.pv-3d.sem-anim .pv-3d-g, .pv-3d.sem-anim .pv-3d-p, .pv-3d.sem-anim .c { transition: none !important; }
.pv-3d-gira { position: relative; width: 100%; will-change: transform; }
.pv-3d-gira.viajando { animation: pv-arco 1.25s cubic-bezier(.45, 0, .25, 1); }
.pv-3d-flut { position: relative; width: 100%; aspect-ratio: 1 / 1; will-change: transform; animation: pv-flutua 4.6s ease-in-out infinite; }
.pv-3d-p .pv-3d-flut { animation: pv-flutua-p 3.8s ease-in-out -1.2s infinite; }
.pv-3d-flut .c { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s ease .38s; }
.pv-3d-flut .c.vis { opacity: 1; }
.pv-3d-flut .c:not(.vis) { transition-delay: .12s; }
.pv-3d-sombra { position: absolute; left: 12%; right: 12%; bottom: -9%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); animation: pv-sombra 4.6s ease-in-out infinite; }
@keyframes pv-arco { 0% { transform: none; } 45% { transform: translateY(-34px) rotateY(28deg) rotate(-8deg) scale(.86); } 100% { transform: none; } }
@keyframes pv-flutua { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes pv-flutua-p { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-9px) rotate(-4deg); } }
@keyframes pv-sombra { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.74); opacity: .5; } }
.pv.desk .pv-3d { height: 470px; }
.pv.desk .pv-3d-g { width: 150px; }
.pv.desk .pv-3d-p { width: 78px; }
@media (prefers-reduced-motion: reduce) { .pv-3d-flut, .pv-3d-sombra, .pv-3d-gira.viajando { animation: none; } }

/* imagem realista nos tipos de consórcio: maior que o ícone, para mostrar o detalhe */
.pv-tipo-img { height: 92px; }
.pv.desk .pv-tipo-img { height: 150px; }

/* elemento 3D sem imagem ainda: some, junto com a sombra */
.pv-3d-g.vazio .pv-3d-sombra { opacity: 0; transition: opacity .4s; }

/* ---------- primeira dobra minimalista (06/10): uma foto só, esmaecendo; controles discretos; um objeto por foto ---------- */
.pv-car-palco { -webkit-mask-image: none; mask-image: none; perspective: none; }
.pv-car-card { width: 84%; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: linear-gradient(160deg, #1c1c1c, #0d0d0d);
  box-shadow: 0 30px 60px rgba(0,0,0,.5); filter: none !important; transition: opacity .9s ease, transform 1.3s cubic-bezier(.22,1,.36,1); }
.pv-car-card[data-pos] { transform: translateX(-50%) scale(1.035); opacity: 0; z-index: 1; }
.pv-car-card[data-pos="0"] { transform: translateX(-50%) scale(1); opacity: 1; z-index: 5; }
.pv-car-card.dando-volta { animation: none !important; }
.pv-car-vazio::before { background: rgba(255,255,255,.05); }
.pv.desk .pv-car-card { width: 76%; border-radius: 32px; border-width: 1px; }
.pv-car-setas { align-items: center; gap: 16px; }
.pv-car-seta { width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #e6e6e6; box-shadow: none; transition: border-color .3s, color .3s; }
.pv-car-seta svg { width: 15px; height: 15px; display: block; margin: auto; }
.pv-car-seta:hover { border-color: var(--pv-ouro); color: var(--pv-ouro); transform: none; }
.pv.desk .pv-car-seta { width: 40px; height: 40px; }
.pv-car-pontos { display: inline-flex; align-items: center; gap: 7px; }
.pv-car-ponto { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.25); cursor: pointer; transition: width .45s ease, background .45s ease; }
.pv-car-ponto.on { width: 22px; background: var(--pv-ouro); }
.pv-3d-p { display: none; }
.pv-3d-g { transition: none; bottom: -6%; transform: translateX(0); }
.pv-3d.lado-dir .pv-3d-g { transform: translateX(calc(100cqw - 100%)); }
.pv-3d-flut .c { transition: none; }
.pv-3d-gira { transition: opacity .6s ease, transform .95s cubic-bezier(.34, 1.4, .64, 1); }
.pv-3d-gira.viajando { animation: none; }
.pv-3d.saindo .pv-3d-gira { opacity: 0; transform: translateY(-10px) scale(.86); transition: opacity .3s ease, transform .35s ease-in; }
.pv-3d.entrando .pv-3d-gira { opacity: 0; transform: translateY(18px) scale(.7); transition: none; }

/* ---------- rodapé no estilo da Servopa, com o conteúdo da Ellus Investimentos (06/10) ---------- */
.w-rod-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-rod-cols .w-card { gap: 4px; }
.pv-rodape { display: block; background: #2b2f33; color: #c9ced4; padding: 30px 20px 76px; font-size: 13px; }
.pv-rod-topo { display: flex; flex-direction: column; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pv-rod-fone { display: flex; gap: 12px; align-items: flex-start; }
.pv-rod-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(252,244,8,.12); color: var(--pv-ouro); display: grid; place-items: center; }
.pv-rod-ico svg { width: 17px; height: 17px; }
.pv-rod-fone b { display: block; color: #fff; font: 700 17px Sora, Inter, sans-serif; }
.pv-rod-fone span { display: block; color: #aeb4bb; font-size: 12.5px; margin-top: 2px; }
.pv-rod-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.pv-rod-cols h4 { margin: 0 0 14px; font: 600 12px Inter, sans-serif; color: #8d949c; letter-spacing: .02em; padding-bottom: 10px; position: relative; }
.pv-rod-cols h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--pv-ouro); }
.pv-rod-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pv-rod-cols li { color: #e8eaed; font-size: 12.5px; }
.pv-rod-base { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 0 14px; }
.pv-rod-logo { height: 40px; width: auto; }
.pv-rod-social { display: flex; gap: 14px; color: #fff; }
.pv-rod-social svg { width: 20px; height: 20px; display: block; }
.pv-rod-empresa { white-space: normal; color: #aeb4bb; font-size: 12px; margin: 0 0 10px; }
.pv-rodape .pv-legal { color: #8d949c; font-size: 11px; }
.pv.desk .pv-rodape { display: block; padding: 54px 90px 40px; font-size: 14px; }
.pv.desk .pv-rod-topo { flex-direction: row; gap: 80px; padding-bottom: 30px; }
.pv.desk .pv-rod-fone b { font-size: 22px; }
.pv.desk .pv-rod-cols { grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 34px 0; }
.pv.desk .pv-rod-cols h4 { font-size: 14px; }
.pv.desk .pv-rod-cols li { font-size: 14px; }
.pv.desk .pv-rod-logo { height: 52px; }
.pv.desk .pv-rod-empresa { font-size: 13px; }
.pv.desk .pv-rodape .pv-legal { font-size: 12px; }
.pv-rod-ico svg { display: block; margin: auto; width: 17px !important; height: 17px !important; }
.pv.desk .pv-rod-ico { width: 42px; height: 42px; }
.pv.desk .pv-rod-ico svg { width: 20px !important; height: 20px !important; }

/* rodapé: o círculo do ícone não herda a regra do texto ao lado */
.pv-rod-fone .pv-rod-ico { display: grid; margin-top: 0; }
/* headline mais forte (06/10): curta, maior, com destaque amarelo */
.pv-destaque { color: var(--pv-ouro); }
.pv-hero h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.02em; }
.pv.desk .pv-hero h1 { font-size: 66px; max-width: 620px; line-height: 1.04; }

/* ---------- histórias de realização: avaliações reais do Google (06/10) ---------- */
.w-google-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pv-prova { position: relative; overflow: hidden; }
.pv-prova-cab { position: relative; z-index: 2; }
.pv-prova-cab h2 { margin-left: auto; margin-right: auto; }
.pv-google { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #202124; border-radius: 99px; padding: 7px 14px; margin: 6px 0 4px; font-size: 12.5px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.pv-google b { font: 800 15px Sora, Inter, sans-serif; }
.pv-g { width: 18px; height: 18px; flex: none; }
.pv-estrelas { color: #fbbc04; letter-spacing: 1px; }
.pv-revs { position: relative; z-index: 2; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 2px 16px; margin: 0 -2px; scrollbar-width: none; }
.pv-revs::-webkit-scrollbar { display: none; }
.pv-rev { flex: 0 0 82%; scroll-snap-align: center; background: #fff; color: #202124; border-radius: 14px; padding: 16px 16px 14px; text-align: left; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.pv-rev header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pv-rev header div { flex: 1; min-width: 0; }
.pv-rev header b { display: block; font-size: 14px; }
.pv-rev header small { color: #70757a; font-size: 12px; }
.pv-rev-av { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; }
.pv-rev p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.pv-baloes { display: none; }
.pv.desk .pv-baloes { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pv-balao { position: absolute; background: #fff; color: #3c4043; font-size: 12.5px; line-height: 1.3; text-align: center; padding: 9px 14px 10px; border-radius: 8px; max-width: 170px; box-shadow: 0 10px 24px rgba(0,0,0,.3); animation: pv-balao 6s ease-in-out infinite; will-change: transform; }
.pv-balao::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.pv-balao i { display: block; font-style: normal; color: #fbbc04; font-size: 11px; letter-spacing: 1px; margin-bottom: 3px; }
.pv-balao-1 { left: 5%; top: 70px; } .pv-balao-2 { left: 19%; top: 210px; animation-delay: -1.5s; }
.pv-balao-3 { right: 6%; top: 60px; animation-delay: -3s; } .pv-balao-4 { right: 18%; top: 200px; animation-delay: -4.5s; }
@keyframes pv-balao { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pv.desk .pv-revs { padding: 34px 2px 26px; gap: 18px; }
.pv.desk .pv-rev { flex: 0 0 calc(25% - 14px); padding: 20px 20px 18px; }
.pv.desk .pv-rev p { font-size: 14px; -webkit-line-clamp: 5; }
.pv.desk .pv-google { font-size: 14px; padding: 9px 18px; }
.pv.desk .pv-google b { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .pv-balao { animation: none; } }

/* balões nas bordas, longe do título */
.pv-balao-1 { left: 3%; top: 36px; } .pv-balao-2 { left: 5%; top: 230px; }
.pv-balao-3 { right: 3%; top: 36px; } .pv-balao-4 { right: 5%; top: 230px; }

/* rodapé enxuto: logo e redes no alto, linha fina, empresa e aviso */
.pv-rod-base { padding-top: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 18px; margin-bottom: 16px; }

/* ---------- mapa do Google no rodapé (06/10) ---------- */
.w-mapa { border: 2px dashed var(--esc3); border-radius: 12px; padding: 14px; color: #b9c0cc; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: flex; flex-direction: column; gap: 8px; }
.w-mapa .ed { text-transform: none; letter-spacing: 0; color: #eef0f3; }
.pv-rod-mapa { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 24px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.pv-rod-mapa iframe { display: block; width: 100%; height: 230px; border: 0; }
.pv-rod-end { display: flex; gap: 12px; align-items: flex-start; background: #1f2326; padding: 14px 16px; }
.pv-rod-end b { display: block; color: #fff; font: 700 15px Sora, Inter, sans-serif; }
.pv-rod-end p { margin: 2px 0 10px; color: #c9ced4; font-size: 12.5px; }
.pv-rod-rota { display: inline-block; background: var(--pv-ouro); color: #000; font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 8px; text-decoration: none; }
.pv.desk .pv-rod-mapa { display: grid; grid-template-columns: 1.6fr 1fr; }
.pv.desk .pv-rod-mapa iframe { height: 300px; }
.pv.desk .pv-rod-end { align-items: center; padding: 30px; }
.pv.desk .pv-rod-end b { font-size: 22px; }
.pv.desk .pv-rod-end p { font-size: 15px; margin: 6px 0 16px; }
.pv.desk .pv-rod-rota { font-size: 14px; padding: 11px 20px; }

/* ---------- vídeo de vendas (VSL), logo depois da primeira dobra (06/10) ---------- */
.w-vsl { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.w-vsl-video .arq video, .w-vsl-capa .arq img { width: 100%; max-height: 260px; object-fit: contain; background: #000; display: block; }
.pv-vsl-grade { display: flex; flex-direction: column; gap: 26px; }
.pv-vsl h2 { margin: 6px 0 10px; }
.pv-vsl .pv-sub { margin-bottom: 14px; }
.pv-vsl-tela { position: relative; width: min(100%, 290px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 26px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 7px #111, 0 30px 60px rgba(17,17,19,.32); }
.pv-vsl-tela video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-vsl-tela.pv-vazio { display: grid; place-items: center; color: #8d949c; }
.pv-vsl-play { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6)); }
.pv-vsl-play span { width: 74px; height: 74px; border-radius: 50%; background: var(--pv-ouro); color: #000; display: grid; place-items: center; animation: vslPulso 2.4s ease-in-out infinite; }
.pv-vsl-play svg { width: 30px; height: 30px; margin-left: 4px; }
.pv-vsl-play small { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: #fff; font: 600 13px Inter, sans-serif; letter-spacing: .01em; }
@keyframes vslPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,244,8,.45); } 50% { box-shadow: 0 0 0 16px rgba(252,244,8,0); } }
@media (prefers-reduced-motion: reduce) { .pv-vsl-play span { animation: none; } }
.pv.desk .pv-vsl-grade { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 80px; }
.pv.desk .pv-vsl h2 { font-size: 44px; line-height: 1.12; }
.pv.desk .pv-vsl .pv-sub { font-size: 18px; max-width: 540px; }
.pv.desk .pv-vsl-tela { width: 340px; }

/* ---------- par Ellus + Servopa: metade preta e metade branca, Servopa colorida (06/10) ---------- */
.pv-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: none; border-radius: 16px; overflow: hidden; border: 1px solid rgba(17,17,19,.08); box-shadow: 0 14px 34px rgba(17,17,19,.1); }
.pv-par-lado { display: grid; place-items: center; padding: 22px 16px; min-width: 0; }
.pv-par-esc { background: #0b0b0b; }
.pv-par-cla { background: #fff; }
.pv-par img.pv-par-ellus { height: 50px; max-width: 100%; }
.pv-par img.pv-par-sv { height: 32px; max-width: 100%; }
.pv.desk .pv-par { gap: 0; padding: 0; max-width: 560px; }
.pv.desk .pv-par-lado { padding: 30px 34px; }
.pv.desk .pv-par img.pv-par-ellus { height: 74px; }
.pv.desk .pv-par img.pv-par-sv { height: 50px; }

/* faixa de selos: logos na cor original (pedido do Jefferson, 06/10) */
.pv-logos img { filter: none; opacity: 1; }

/* ---------- avaliações: carrossel infinito da esquerda para a direita, com foto (06/10) ---------- */
.w-rev-foto { width: 72px; min-height: 72px; }
.w-rev-foto .arq img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pv-revs { display: block; overflow: hidden; margin: 0 -20px; padding: 22px 0 18px; gap: 0; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pv-revs-trilho { display: flex; align-items: stretch; width: max-content; animation: revsDir var(--dur, 77s) linear infinite; }
.pv-revs:hover .pv-revs-trilho { animation-play-state: paused; }
.pv-rev { flex: 0 0 272px; margin-right: 16px; scroll-snap-align: none; }
img.pv-rev-av { object-fit: cover; background: #e8eaed; }
@keyframes revsDir { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .pv-revs-trilho { animation: none; } .pv-revs { overflow-x: auto; } }
.pv.desk .pv-revs { margin: 0 -90px; padding: 34px 0 26px; gap: 0; }
.pv.desk .pv-rev { flex: 0 0 340px; margin-right: 22px; }

/* ---------- destaque no fundo claro: texto escuro com marca-texto amarelo (amarelo puro não se lê no claro) ---------- */
.pv-claro .pv-destaque, .pv-claro2 .pv-destaque { color: inherit; background: linear-gradient(180deg, transparent 58%, var(--pv-ouro) 58%, var(--pv-ouro) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }

/* ---------- vídeo de vendas: botão de ativar o som ---------- */
.pv-vsl-som { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 99px;
  padding: 10px 16px; font: 600 13px Inter, sans-serif; animation: vslSom 2.4s ease-in-out infinite; }
.pv-vsl-som svg { width: 18px; height: 18px; color: var(--pv-ouro); }
@keyframes vslSom { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,244,8,.4); } 50% { box-shadow: 0 0 0 10px rgba(252,244,8,0); } }
@media (prefers-reduced-motion: reduce) { .pv-vsl-som { animation: none; } }

/* ---------- animações ao passar o mouse, em todas as dobras (pedido do Jefferson, 06/10) ----------
   Só em aparelho com mouse e para quem não pediu menos movimento. Só transform, sombra e cor: leve e sem engasgo. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pv-card, .pv-passo, .pv-tipo, .pv-faq, .pv-pessoa, .pv-num, .pv-rev, .pv-rod-mapa, .pv-vsl-tela, .pv-sv-foto, .pv-selos-chips span,
  .pv-passo-n, .pv-tipo-img, .pv-tipo-ico, .pv-logos img, .pv-par-lado img, .pv-rod-social span, .pv-btn, .pv-rod-rota, .pv-google {
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease, background-color .4s ease, color .3s ease, background-size .6s cubic-bezier(.2,.8,.2,1); }

  /* cartões claros: sobem, sombra macia e um fio amarelo que corre embaixo */
  .pv-card, .pv-passo, .pv-tipo { background-image: linear-gradient(var(--pv-ouro), var(--pv-ouro)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 3px; }
  .pv-card:hover, .pv-passo:hover, .pv-tipo:hover { transform: translateY(-5px); background-size: 100% 3px; border-color: rgba(17,17,19,.14); box-shadow: 0 20px 40px rgba(17,17,19,.10); }
  .pv-passo:hover .pv-passo-n { transform: scale(1.14) rotate(-8deg); }
  .pv-tipo:hover .pv-tipo-img, .pv-tipo:hover .pv-tipo-ico { transform: translateY(-5px) scale(1.07); }
  .pv-faq:hover { border-color: rgba(17,17,19,.18); box-shadow: 0 10px 24px rgba(17,17,19,.07); transform: translateX(4px); }

  /* cartões no fundo escuro: sobem e acendem o contorno em amarelo */
  .pv-pessoa:hover { transform: translateY(-5px); border-color: rgba(252,244,8,.38); background-color: rgba(255,255,255,.06); box-shadow: 0 22px 44px rgba(0,0,0,.4); }
  .pv-num:hover { transform: translateY(-4px); border-color: rgba(252,244,8,.5); }
  .pv-nums-claro .pv-num:hover { box-shadow: 0 16px 32px rgba(17,17,19,.09); }
  .pv-google:hover { transform: scale(1.04); }

  /* avaliações: o carrossel para e o cartão apontado se destaca */
  .pv-rev:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 28px 50px rgba(0,0,0,.45); }

  /* botões: sobem e passa um brilho */
  .pv-btn, .pv-rod-rota { position: relative; overflow: hidden; }
  .pv-btn::after, .pv-rod-rota::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); transition: left .8s cubic-bezier(.2,.8,.2,1); }
  .pv-btn:hover, .pv-rod-rota:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(252,244,8,.38); }
  .pv-btn:hover::after, .pv-rod-rota:hover::after { left: 130%; }

  /* vídeo, fotos, logos e mapa */
  .pv-vsl-tela:hover { transform: translateY(-6px); box-shadow: 0 0 0 7px #111, 0 42px 72px rgba(17,17,19,.38); }
  .pv-sv-foto:hover { transform: scale(1.025) rotate(-.6deg); }
  .pv-logos img:hover { transform: scale(1.08); }
  .pv-par:hover .pv-par-lado img { transform: scale(1.05); }
  .pv-selos-chips span:hover { border-color: var(--pv-ouro); background-color: rgba(252,244,8,.14); color: #111; transform: translateY(-2px); }
  .pv-rod-mapa:hover { transform: translateY(-4px); box-shadow: 0 28px 52px rgba(0,0,0,.45); }
  .pv-rod-social span:hover { color: var(--pv-ouro); transform: translateY(-3px); }
}

/* ---------- texturas no fundo de algumas dobras (pedido do Jefferson, 06/10) ----------
   Ficam numa camada atrás do conteúdo, bem leves, e somem nas bordas para não pesar. */
#pv-vsl > div, #pv-dor > div, #pv-prova > div, #pv-quem > div, #pv-passos > div, #pv-duvidas > div { position: relative; isolation: isolate; }
#pv-vsl > div::before, #pv-dor > div::before, #pv-prova > div::before, #pv-quem > div::before, #pv-quem > div::after, #pv-passos > div::before, #pv-duvidas > div::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* vídeo: anéis finos atrás do celular */
#pv-vsl > div::before { background: repeating-radial-gradient(circle at 76% 50%, rgba(17,17,19,.07) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(circle at 76% 50%, #000 0, transparent 60%); mask-image: radial-gradient(circle at 76% 50%, #000 0, transparent 60%); }
/* a dor: pontinhos saindo do canto */
#pv-dor > div::before { background: radial-gradient(rgba(17,17,19,.14) 1.1px, transparent 1.6px) 0 0 / 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0, transparent 62%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0, transparent 62%); }
/* prova: riscas finas e um brilho amarelo no alto */
#pv-prova > div::before { background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(252,244,8,.11), transparent 70%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 15px); }
/* quem somos: as três barras da marca, enormes e quase sumindo, com grão de papel */
#pv-quem > div::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23fcf408'%3E%3Crect x='10' y='50' width='18' height='60' rx='3'/%3E%3Crect x='51' y='10' width='18' height='100' rx='3'/%3E%3Crect x='92' y='50' width='18' height='60' rx='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -50px bottom -30px / 420px auto; opacity: .07; }
#pv-quem > div::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px; opacity: .06; }
/* como funciona: papel quadriculado bem leve */
#pv-passos > div::before { background: linear-gradient(rgba(17,17,19,.05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(17,17,19,.05) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent); }
/* dúvidas: pontinhos no canto de baixo */
#pv-duvidas > div::before { background: radial-gradient(rgba(17,17,19,.13) 1.1px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 0, transparent 58%); mask-image: radial-gradient(ellipse at 0% 100%, #000 0, transparent 58%); }
.pv.desk #pv-quem > div::before { background-size: 620px auto; right: 0; }

/* ---------- cada dobra entra suave quando chega na tela (06/10) ----------
   Usa translate (não transform), para não brigar com a animação do mouse. Os cartões entram um depois do outro. */
@media (prefers-reduced-motion: no-preference) {
  .pv-in > section:not(#pv-topo) { opacity: 0; translate: 0 34px; transition: opacity .9s ease, translate 1s cubic-bezier(.2,.8,.2,1); }
  .pv-in > section.visto:not(#pv-topo) { opacity: 1; translate: none; }
  .pv-in > section :is(.pv-card, .pv-passo, .pv-tipo, .pv-num, .pv-pessoa, .pv-faq, .pv-vsl-tela, .pv-par, .pv-rod-mapa) {
    opacity: 0; translate: 0 22px;
    transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s), transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1),
      border-color .4s ease, background-color .4s ease, background-size .6s cubic-bezier(.2,.8,.2,1); }
  .pv-in > section.visto :is(.pv-card, .pv-passo, .pv-tipo, .pv-num, .pv-pessoa, .pv-faq, .pv-vsl-tela, .pv-par, .pv-rod-mapa) { opacity: 1; translate: none; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(2) { --d: .1s; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(3) { --d: .2s; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(4) { --d: .3s; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(5) { --d: .4s; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(6) { --d: .5s; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(7) { --d: .6s; }
  .pv-in > section :is(.pv-lista, .pv-tipos, .pv-nums) > :nth-child(8) { --d: .7s; }
  .pv-in > section .pv-vsl-tela { --d: .25s; }
}

/* faixa de selos: Servopa em preto e branco, ganha cor ao passar o mouse (pedido do Jefferson, 06/10) */
.pv-logos img { filter: grayscale(1) contrast(1.15); opacity: .85; transition: filter .5s ease, opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.pv-logos img:hover { filter: none; opacity: 1; }

/* ---------- fotos conceituais sem fundo: Quem somos, Prova e Como funciona (06/10) ---------- */
.w-conc { max-width: 260px; }
.pv-conc-topo { display: flex; flex-direction: column; gap: 18px; }
img.pv-conc { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; filter: drop-shadow(0 26px 26px rgba(17,17,19,.24)); animation: concFlutua 7s ease-in-out infinite; }
.pv-escuro2 img.pv-conc, .pv-escuro img.pv-conc { filter: drop-shadow(0 0 46px rgba(252,244,8,.12)) drop-shadow(0 28px 28px rgba(0,0,0,.5)); }
.pv.desk .pv-conc-topo { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 56px; margin-bottom: 10px; }
.pv.desk .pv-conc-topo > div { flex: 1; min-width: 0; }
.pv.desk .pv-conc-topo img.pv-conc { width: 430px; margin: 0; flex: none; }
.pv-conc-prova { position: relative; display: flex; justify-content: center; margin: 4px 0 24px; }
.pv-conc-prova::before { content: ''; position: absolute; left: 50%; top: 55%; width: 76%; height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(252,244,8,.16), transparent); }
.pv-conc-prova img.pv-conc { position: relative; width: min(100%, 380px); }
.pv.desk .pv-conc-prova img.pv-conc { width: 640px; }
@keyframes concFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { img.pv-conc { animation: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pv-in > section img.pv-conc { opacity: 0; translate: 0 26px; transition: opacity .9s ease .2s, translate 1s cubic-bezier(.2,.8,.2,1) .2s; }
  .pv-in > section.visto img.pv-conc { opacity: 1; translate: none; }
}

/* ---------- faixa que corre: sem o branco nas pontas (some no próprio preto) e com bordas finas douradas (06/10) ---------- */
.pv-faixa { position: relative; -webkit-mask-image: none; mask-image: none; background: linear-gradient(180deg, #141414, #0b0b0b);
  border-style: solid; border-width: 1px 0; border-image: linear-gradient(90deg, transparent, rgba(252,244,8,.55) 18%, rgba(252,244,8,.55) 82%, transparent) 1; }
.pv-faixa::before, .pv-faixa::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 1; pointer-events: none; }
.pv-faixa::before { left: 0; background: linear-gradient(90deg, #0b0b0b, transparent); }
.pv-faixa::after { right: 0; background: linear-gradient(270deg, #0b0b0b, transparent); }

/* ---------- avaliações: direção invertida, da direita para a esquerda (pedido do Jefferson, 06/10) ---------- */
.pv-revs-trilho { animation-name: revsEsq; }
@keyframes revsEsq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- rodapé: Segurança, Credibilidade e Pague com, no estilo do rodapé da Servopa (06/10) ---------- */
.pv-rod-selos { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 4px 0 24px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pv-rod-selos h5 { margin: 0 0 14px; font: 500 12.5px Inter, sans-serif; color: #8d949c; padding-bottom: 10px; position: relative; }
.pv-rod-selos h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 1px; background: rgba(255,255,255,.35); }
.pv-rod-itens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pv-rod-selo { display: inline-flex; align-items: center; gap: 8px; color: #e8eaed; font-size: 12px; line-height: 1.25; max-width: 190px; }
.pv-rod-selo svg { width: 22px; height: 22px; flex: none; color: var(--pv-ouro); }
.pv-pg { display: inline-flex; align-items: center; gap: 5px; color: #fff; opacity: .88; font-size: 13px; }
.pv-pg svg { height: 22px; width: auto; }
.pv-pg b { font-weight: 700; letter-spacing: .01em; }
.pv-pg-boleto svg { height: 18px; }
.pv-pg-boleto b { font-weight: 600; font-size: 12.5px; }
.pv-pg-elo { font: 800 18px/1 Sora, Inter, sans-serif; letter-spacing: -.02em; }
.pv-pg-hiper { font: italic 700 12.5px/1 Inter, sans-serif; border: 1.5px solid currentColor; border-radius: 4px; padding: 3px 6px; }
.pv-pg-txt { font-size: 12px; }
.pv.desk .pv-rod-selos { grid-template-columns: auto auto 1fr; gap: 70px; padding: 10px 0 34px; margin-bottom: 26px; }
.pv.desk .pv-rod-selos h5 { font-size: 14px; }
.pv.desk .pv-rod-selo { font-size: 13px; }
.pv.desk .pv-pg svg { height: 26px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pv-pg, .pv-rod-selo { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
  .pv-pg:hover { opacity: 1; transform: translateY(-3px); }
  .pv-rod-selo:hover { transform: translateY(-2px); }
}

/* fotos conceituais: a base some suave, em vez de terminar num corte reto */
img.pv-conc { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }

/* ---------- foto inteira bem transparente no fundo de Quem somos, Prova e Como funciona (pedido do Jefferson, 06/10) ---------- */
.pv-foto-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--f) center 30% / cover no-repeat; opacity: .16; }
#pv-quem .pv-foto-fundo { opacity: .2; background-position: 60% 25%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%); }
#pv-prova .pv-foto-fundo { opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%); }
#pv-passos .pv-foto-fundo { opacity: .13; background-position: 50% 28%; filter: saturate(.7);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.4) 45%, transparent 85%); mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.4) 45%, transparent 85%); }

/* ---------- Quem somos: retrato 4:5 com a cabeça inteira, os três no mesmo enquadramento ---------- */
.pv-pessoa-foto { height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0%; }
.pv.desk .pv-pessoa-foto { height: auto; }

/* rodapé: logos do Banco Central e da ABAC como no rodapé da Servopa, com legenda de quem são */
img.pv-rod-logo-selo { height: 40px; width: auto; display: block; opacity: .92; }
.pv-rod-leg { margin: 10px 0 0; color: #8d949c; font-size: 11px; max-width: 280px; line-height: 1.4; }
.pv.desk img.pv-rod-logo-selo { height: 48px; }
.pv.desk .pv-rod-leg { font-size: 12px; }
.pv.desk .pv-rod-selos .pv-rod-itens { gap: 14px 34px; }
.w-logos-rod .arq img { height: 40px; object-fit: contain; background: #2b2f33; padding: 6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  img.pv-rod-logo-selo { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
  img.pv-rod-logo-selo:hover { opacity: 1; transform: translateY(-3px); }
}

/* ---------- carrossel do time: troca em sequência (06/10) ----------
   A moldura fica parada; a pessoa da frente some e a próxima surge de leve, sem as duas ao mesmo tempo. */
.pv-car-card .pv-car-pessoa { transition: opacity .3s ease, transform .3s ease; }
.pv-car.apagando .pv-car-card[data-pos="0"] .pv-car-pessoa { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.985); animation: none; }
.pv-car-card[data-pos="0"] .pv-car-pessoa { animation: pessoaEntra .75s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes pessoaEntra { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }
.pv-car.sem-transicao .pv-car-card, .pv-car.sem-transicao .pv-car-pessoa { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pv-car-card[data-pos="0"] .pv-car-pessoa { animation: none; } }

/* ---------- topo fixo sempre por cima de tudo ao rolar (a foto do carrossel passava na frente) ---------- */
.pv section#pv-topo { z-index: 60; }

/* ---------- par Ellus + Servopa: tudo arredondado ---------- */
.pv-servopa .pv-par { padding: 0; background: none; border-radius: 18px; overflow: hidden; }
.pv-servopa .pv-par-lado:first-child { border-radius: 18px 0 0 18px; }
.pv-servopa .pv-par-lado:last-child { border-radius: 0 18px 18px 0; }
.pv-servopa .pv-par-lado:only-child { border-radius: 18px; }

/* ---------- par Ellus + Servopa, versão elegante (06/10): corte em diagonal com fio dourado ---------- */
.pv-servopa .pv-par { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f6f5f1); box-shadow: 0 26px 54px rgba(17,17,19,.14), 0 3px 8px rgba(17,17,19,.06); }
.pv-servopa .pv-par::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(50% + 3px); z-index: 0;
  background: linear-gradient(180deg, rgba(252,244,8,.25), var(--pv-ouro) 50%, rgba(252,244,8,.25)); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.pv-servopa .pv-par-lado { position: relative; z-index: 1; border-radius: 0 !important; padding: 26px 18px; }
.pv-servopa .pv-par-esc { background: radial-gradient(circle at 42% 50%, rgba(252,244,8,.13), transparent 62%), linear-gradient(135deg, #1b1b1b, #060606);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); padding-right: 30px; }
.pv-servopa .pv-par-cla { background: none; padding-left: 26px; }
.pv.desk .pv-servopa .pv-par { max-width: 600px; }
.pv.desk .pv-servopa .pv-par-lado { padding: 34px 30px; }
.pv.desk .pv-servopa .pv-par-esc { padding-right: 46px; }
.pv.desk .pv-servopa .pv-par-cla { padding-left: 42px; }

.pv-servopa .pv-par { align-items: stretch; justify-content: stretch; }
.pv-servopa .pv-par-lado { margin: 0; align-self: stretch; }
.pv-servopa .pv-par::before { width: calc(50% + 2px); background: linear-gradient(180deg, rgba(252,244,8,.35), rgba(252,244,8,.95) 50%, rgba(252,244,8,.35)); }

/* par Ellus + Servopa: o logo da Servopa nunca corta (encolhe dentro da metade branca, sem distorcer) */
.pv-servopa .pv-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pv-servopa .pv-par img.pv-par-sv { height: auto; width: 100%; max-width: 190px; max-height: 50px; object-fit: contain; }
.pv-servopa .pv-par-cla { padding: 22px 16px 22px 24px; }
.pv-servopa .pv-par img.pv-par-ellus { height: auto; width: 100%; max-width: 150px; max-height: 74px; object-fit: contain; }
.pv.desk .pv-servopa .pv-par img.pv-par-sv { max-width: 240px; max-height: 64px; }
.pv.desk .pv-servopa .pv-par img.pv-par-ellus { max-width: 190px; max-height: 96px; }

/* rodapé: selo próprio de SSL, no formato dos selos do rodapé da Servopa */
.pv-selo-ssl { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 8px; border-radius: 10px; background: linear-gradient(180deg, #3b4045, #24282c);
  border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25); }
.pv-selo-ssl svg { width: 26px; height: 26px; flex: none; }
.pv-selo-ssl b { display: block; font: 800 15px/1 Inter, sans-serif; color: #fff; letter-spacing: .05em; }
.pv-selo-ssl small { display: block; margin-top: 3px; font: 600 9.5px/1.2 Inter, sans-serif; color: #c9ced4; text-transform: uppercase; letter-spacing: .08em; }
.pv.desk .pv-selo-ssl svg { width: 30px; height: 30px; }
.pv.desk .pv-selo-ssl b { font-size: 17px; }
.pv.desk .pv-selo-ssl small { font-size: 10.5px; }

/* selo da Segurança como imagem (o do rodapé da Servopa): mesma altura dos logos do Banco Central e da ABAC */
.pv-rod-selos div > .pv-rod-itens > img.pv-rod-logo-selo[alt^="ssl"] { height: 40px; }
.pv.desk .pv-rod-selos div > .pv-rod-itens > img.pv-rod-logo-selo[alt^="ssl"] { height: 46px; }

/* Segurança: selo do tamanho do rodapé da Servopa e o aviso de confirmar embaixo dele (não ao lado) */
.pv-rod-itens .pv-rod-leg { flex-basis: 100%; max-width: 230px; margin: 4px 0 0; }
.pv-rod-selos div > .pv-rod-itens > img.pv-rod-logo-selo[alt^="ssl"] { height: 44px; }
.pv.desk .pv-rod-selos div > .pv-rod-itens > img.pv-rod-logo-selo[alt^="ssl"] { height: 54px; }
.pv.desk .pv-rod-selos { grid-template-columns: auto auto minmax(0, 1fr); gap: 60px; }

/* logo da Servopa: tira o canto arredondado herdado (no celular ele cortava a ponta do A e do O) */
.pv-servopa .pv-par img.pv-par-sv, .pv-servopa .pv-par img.pv-par-ellus { border-radius: 0; min-height: 0; }
/* barra do WhatsApp no celular sempre por cima da foto do carrossel ao rolar */
.pv-barra-wpp { z-index: 70; }

/* aviso de confirmar embaixo do selo, numa linha própria */
.pv-rod-selos > div > .pv-rod-leg { max-width: 230px; margin: 10px 0 0; }
.pv.desk .pv-rod-selos { gap: 52px; }

/* par Ellus + Servopa: logos no tamanho certo nos dois modos (a grade interna deixava a largura do logo indefinida e ele encolhia) */
.pv-servopa .pv-par-lado { display: flex; align-items: center; justify-content: center; }
.pv-servopa .pv-par img.pv-par-sv { width: 100%; max-width: 190px; height: auto; max-height: none; }
.pv-servopa .pv-par img.pv-par-ellus { width: 100%; max-width: 150px; height: auto; max-height: none; }
.pv.desk .pv-servopa .pv-par img.pv-par-sv { max-width: 230px; }
.pv.desk .pv-servopa .pv-par img.pv-par-ellus { max-width: 180px; }

/* modo computador: uma regra antiga (.pv.desk .pv-par-sv) dava 16 px de enchimento ao logo e o espremia; aqui zera */
.pv .pv-servopa .pv-par img.pv-par-sv, .pv .pv-servopa .pv-par img.pv-par-ellus { padding: 0; border: 0; background: none; min-height: 0; }
.pv.desk .pv-servopa .pv-par img.pv-par-sv { height: auto; }

/* computador: os dois logos com o mesmo peso visual */
.pv.desk .pv-servopa .pv-par img.pv-par-ellus { max-width: 235px; max-height: none; height: auto; }
.pv.desk .pv-servopa .pv-par img.pv-par-sv { max-width: 205px; }

/* rodapé: coluna Pague com um pouco mais para a direita (pedido do Jefferson, 06/10) */
.pv.desk .pv-rod-pague-col { margin-left: 44px; }

/* Mastercard branco, um pouco maior por causa do nome embaixo */
.pv-pg-master svg { height: 30px; width: auto; }
.pv.desk .pv-pg-master svg { height: 34px; }

/* Pague com: deslocado para a direita e numa linha só */
.pv.desk .pv-rod-selos { gap: 40px; }
.pv.desk .pv-rod-pague-col { margin-left: 36px; }
.pv.desk .pv-rod-pague { flex-wrap: nowrap; gap: 14px 18px; }

/* vídeo em tela cheia: inteiro, com faixas pretas dos lados (antes herdava o 'cobrir' do quadro e estourava) */
.pv-vsl-tela video:fullscreen { object-fit: contain; background: #000; width: 100%; height: 100%; }
.pv-vsl-tela video:-webkit-full-screen { object-fit: contain; background: #000; width: 100%; height: 100%; }

/* ---------- história de sucesso em vídeo, logo abaixo das avaliações (08/10) ---------- */
.pv-hist-grade { display: flex; flex-direction: column; gap: 26px; }
.pv-hist-txt { order: -1; }
.pv-hist h2 { margin: 6px 0 14px; }
.pv-hist-cit { position: relative; margin: 0 0 12px; padding: 4px 0 4px 18px; border-left: 3px solid var(--pv-ouro); color: #3f3f46; font-size: 15px; line-height: 1.6; }
.pv-hist-quem { margin: 0 0 16px; color: #6b7078; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.pv.desk .pv-hist-grade { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; }
.pv.desk .pv-hist-txt { order: 0; }
.pv.desk .pv-hist h2 { font-size: 44px; line-height: 1.12; }
.pv.desk .pv-hist-cit { font-size: 18px; max-width: 560px; }
.pv.desk .pv-hist-quem { font-size: 14px; }
#pv-historia > div { position: relative; isolation: isolate; }
#pv-historia > div::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 24% 50%, rgba(17,17,19,.07) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(circle at 24% 50%, #000 0, transparent 58%); mask-image: radial-gradient(circle at 24% 50%, #000 0, transparent 58%); }

/* ---------- cartas contempladas (ideia do Eduardo, 08/10) ---------- */
.pv-cartas h2 { margin: 6px 0 8px; }
.pv-cc-lista { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 18px; }
.pv-cc { position: relative; display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) 44px; align-items: center; gap: 10px 12px; padding: 14px;
  background: #fff; border: 1px solid rgba(17,17,19,.08); border-radius: 16px; box-shadow: 0 8px 22px rgba(17,17,19,.06); transition: border-color .3s, box-shadow .3s, opacity .3s; }
.pv-cc.marcada { border-color: rgba(17,17,19,.45); box-shadow: 0 0 0 3px rgba(252,244,8,.55), 0 10px 26px rgba(17,17,19,.08); }
.pv-cc.reservada { opacity: .62; }
.pv-cc-marca { position: relative; display: grid; place-items: center; cursor: pointer; }
.pv-cc-marca input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-cc-marca span { position: relative; width: 22px; height: 22px; border: 2px solid #c4c7cc; border-radius: 6px; background: #fff; transition: background .25s, border-color .25s; }
.pv-cc-marca span::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--pv-ouro); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pv-cc-marca input:checked + span { background: #111; border-color: #111; }
.pv-cc-marca input:checked + span::after { transform: rotate(45deg) scale(1); }
.pv-cc-marca input:focus-visible + span { box-shadow: 0 0 0 3px rgba(252,244,8,.6); }
.pv-cc-marca input:disabled + span { background: #eceef0; cursor: not-allowed; }
.pv-cc-ico { width: 40px; height: 40px; border-radius: 12px; background: #111; color: var(--pv-ouro); display: grid; place-items: center; }
.pv-cc-ico svg { width: 21px; height: 21px; }
.pv-cc-valor b { display: block; font: 800 18px/1.15 Sora, Inter, sans-serif; color: #111; }
.pv-cc-valor small { display: block; margin-top: 2px; color: #6b7078; font-size: 12px; }
.pv-cc-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 9px 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #137a3f; background: rgba(19,122,63,.1); }
.pv-cc-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ccPulso 2s ease-in-out infinite; }
.pv-cc.reservada .pv-cc-status { color: #7a6400; background: rgba(252,244,8,.32); }
.pv-cc.reservada .pv-cc-status::before { animation: none; }
@keyframes ccPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(19,122,63,.45); } 50% { box-shadow: 0 0 0 5px rgba(19,122,63,0); } }
.pv-cc-dados { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(17,17,19,.12); }
.pv-cc-dado small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8f96; }
.pv-cc-dado b { display: block; margin-top: 2px; font-size: 12.5px; color: #1f2937; }
.pv-cc-sv { display: none; height: 28px; width: auto; }
.pv-cc-wpp { width: 44px; height: 44px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(37,211,102,.35); }
.pv-cc-wpp svg { width: 22px; height: 22px; }
.pv-cc-acao { text-align: center; }
.pv-cc-botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; padding: 14px 22px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 800; font-size: 14px; text-align: center; box-shadow: 0 14px 30px rgba(37,211,102,.32); }
.pv-cc-botao svg { width: 20px; height: 20px; flex: none; }
.pv-cc-num { margin: 8px 0 0; font-size: 12.5px; color: #57534e; }
.pv-cc-aviso { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: #8a8f96; }
.pv.desk .pv-cartas h2 { font-size: 40px; }
.pv.desk .pv-cc-lista { gap: 12px; margin: 34px 0 26px; }
.pv.desk .pv-cc { grid-template-columns: 24px 46px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .8fr) auto 48px; gap: 18px; padding: 16px 22px; }
.pv.desk .pv-cc-dados { display: contents; }
.pv.desk .pv-cc-dado b { font-size: 15px; }
.pv.desk .pv-cc-dado small { font-size: 10.5px; }
.pv.desk .pv-cc-ico { width: 46px; height: 46px; }
.pv.desk .pv-cc-valor b { font-size: 21px; }
.pv.desk .pv-cc-sv { display: block; }
.pv.desk .pv-cc-wpp { width: 48px; height: 48px; }
.pv.desk .pv-cc-botao { font-size: 17px; padding: 17px 34px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pv-cc { transition: border-color .3s, box-shadow .4s, transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .pv-cc:not(.reservada):hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(17,17,19,.1); }
  .pv-cc-wpp, .pv-cc-botao { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
  .pv-cc-wpp:hover { transform: scale(1.08); }
  .pv-cc-botao:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(37,211,102,.42); }
}
@media (prefers-reduced-motion: reduce) { .pv-cc-status::before { animation: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pv-in > section .pv-cc { opacity: 0; translate: 0 18px; transition: opacity .6s ease var(--d, 0s), translate .7s cubic-bezier(.2,.8,.2,1) var(--d, 0s), border-color .3s, box-shadow .4s, transform .45s cubic-bezier(.2,.8,.2,1); }
  .pv-in > section.visto .pv-cc { opacity: 1; translate: none; }
  .pv-in > section.visto .pv-cc.reservada { opacity: .62; }
  .pv-cc-lista > :nth-child(2) { --d: .08s; } .pv-cc-lista > :nth-child(3) { --d: .16s; } .pv-cc-lista > :nth-child(4) { --d: .24s; }
  .pv-cc-lista > :nth-child(5) { --d: .32s; } .pv-cc-lista > :nth-child(6) { --d: .4s; } .pv-cc-lista > :nth-child(7) { --d: .48s; } .pv-cc-lista > :nth-child(8) { --d: .56s; }
}
.w-cc-lista { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; }

/* ajustes de 08/10: botão sem sublinhado, citação legível e, no celular, o WhatsApp de cada carta na mesma linha do valor */
.pv-cc-botao, .pv-cc-botao:hover, .pv-cc-wpp { text-decoration: none; }
.pv-hist .pv-hist-cit { color: #3f3f46; background: none; opacity: 1; font-style: normal; }
.pv-cc-wpp { grid-row: 1; grid-column: 4; }
.pv-cc-dados { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .7fr); }
.pv-cc-dado b { white-space: nowrap; }
.pv-cc-longo { display: none; }
.pv.desk .pv-cc-wpp { grid-row: auto; grid-column: auto; }
.pv.desk .pv-cc-longo { display: inline; }

/* cartas contempladas: fundo próprio (a dobra dos tipos, antes dela, também é creme) com textura fina (pedido do Jefferson, 09/10) */
#pv-cartas > .pv-cartas { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(900px 420px at 85% -10%, rgba(252,244,8,.22), transparent 65%), radial-gradient(700px 380px at 0% 110%, rgba(252,244,8,.14), transparent 65%), linear-gradient(180deg, #fbf8e8, #f3eed6); }
#pv-cartas > .pv-cartas::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(17,17,19,.045) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 60%, #000); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 60%, #000); }
#pv-cartas > .pv-cartas::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(17,17,19,.14), transparent); }
#pv-cartas .pv-cc { border-color: rgba(17,17,19,.07); box-shadow: 0 10px 26px rgba(90,80,20,.10); }

/* ---------- cartas contempladas em dourado (pedido do Jefferson, 09/10: cor que gere desejo) ----------
   Ouro = riqueza e conquista; cartas brancas saltam por cima; a reservada em vermelho dá escassez. */
#pv-cartas > .pv-cartas { color: #141416;
  background: radial-gradient(900px 460px at 12% -12%, rgba(255,255,255,.55), transparent 62%), radial-gradient(800px 520px at 100% 110%, rgba(176,110,0,.28), transparent 65%),
    linear-gradient(160deg, #ffe766 0%, #fcd116 42%, #f2b500 100%); }
#pv-cartas > .pv-cartas::before { background: repeating-linear-gradient(135deg, rgba(90,55,0,.07) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.4) 55%, #000); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.4) 55%, #000); }
#pv-cartas > .pv-cartas::after { background: linear-gradient(90deg, transparent, rgba(90,55,0,.25), transparent); }
#pv-cartas .pv-chapeu { color: #141416; }
#pv-cartas .pv-chapeu::before { background: #141416; }
#pv-cartas .pv-sub { color: #3d3000; }
#pv-cartas .pv-destaque { color: var(--pv-ouro); background: #141416; padding: 0 .22em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#pv-cartas .pv-cc { border-color: rgba(90,55,0,.08); box-shadow: 0 14px 30px rgba(110,70,0,.18), 0 2px 6px rgba(110,70,0,.08); }
#pv-cartas .pv-cc.marcada { border-color: #141416; box-shadow: 0 0 0 3px #141416, 0 16px 34px rgba(110,70,0,.22); }
#pv-cartas .pv-cc-ico { background: #141416; }
#pv-cartas .pv-cc-botao { background: #141416; color: #fff; box-shadow: 0 16px 34px rgba(60,35,0,.35); }
#pv-cartas .pv-cc-botao svg { color: #25d366; }
#pv-cartas .pv-cc-num { color: #3d3000; font-weight: 600; }
#pv-cartas .pv-cc-aviso { color: #5a4600; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #pv-cartas .pv-cc-botao:hover { box-shadow: 0 20px 40px rgba(60,35,0,.45); }
  #pv-cartas .pv-cc:not(.reservada):hover { box-shadow: 0 22px 44px rgba(110,70,0,.26); }
}
/* carta reservada: selo vermelho bem visível, carta um pouco apagada */
.pv-cc.reservada { opacity: .9; }
.pv-cc.reservada .pv-cc-valor b, .pv-cc.reservada .pv-cc-dado b { color: #6b7078; }
.pv-cc.reservada .pv-cc-status { color: #fff; background: #d32f2f; box-shadow: 0 4px 12px rgba(211,47,47,.35); }
.pv-cc.reservada .pv-cc-status::before { background: #fff; }
.pv-cc.reservada .pv-cc-ico { background: #6b7078; color: #fff; }
.pv-cc.reservada .pv-cc-wpp { background: #9aa0a6; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .pv-in > section.visto .pv-cc.reservada { opacity: .9; } }

/* reservada e vendida: o WhatsApp da carta fica apagado e não clica (pedido do Jefferson, 09/10) */
.pv-cc-wpp.off { background: #c9ccd1; color: #fff; box-shadow: none; cursor: not-allowed; }
@media (hover: hover) { .pv-cc-wpp.off:hover { transform: none; } }
/* carta vendida: tudo riscado, selo escuro */
.pv-cc.vendida { opacity: .78; }
.pv-cc.vendida .pv-cc-valor b, .pv-cc.vendida .pv-cc-valor small, .pv-cc.vendida .pv-cc-dado b {
  color: #8a8f96; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(211,47,47,.75); }
.pv-cc.vendida .pv-cc-dado small { color: #a9adb3; }
.pv-cc.vendida .pv-cc-status { color: #fff; background: #3f3f46; }
.pv-cc.vendida .pv-cc-status::before { animation: none; background: #fff; }
.pv-cc.vendida .pv-cc-ico { background: #8a8f96; color: #fff; }
.pv-cc.vendida .pv-cc-sv { filter: grayscale(1); opacity: .6; }
@media (prefers-reduced-motion: no-preference) { .pv-in > section.visto .pv-cc.vendida { opacity: .78; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pv-cc.vendida:hover { transform: none; } }

/* reservada e vendida com fundo cinza sólido (a transparência deixava o dourado passar) */
.pv-cc.reservada, .pv-cc.vendida { opacity: 1; background: #f1f1ef; box-shadow: 0 6px 16px rgba(110,70,0,.10); }
@media (prefers-reduced-motion: no-preference) { .pv-in > section.visto .pv-cc.reservada, .pv-in > section.visto .pv-cc.vendida { opacity: 1; } }