/* Demonstração da plataforma (demonstracao.php) — apresentação em slides */
body.demo { --fundo: #1f1a16; --fundo-2: #2b241e; margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: radial-gradient(ellipse at 70% -10%, #3a3027 0%, var(--fundo) 60%); color: var(--texto); }
.demo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Topo */
.d-topo { position: fixed; inset: 0 0 auto 0; height: 64px; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: rgba(31, 26, 22, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .07); color: #efe7da; }
.d-marca { display: flex; align-items: center; gap: 10px; color: #f8f5ee; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); padding: 6px 14px 6px 8px; border-radius: 12px; }
.d-marca:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.d-marca img { width: 30px; height: 30px; object-fit: contain; }
.d-marca span { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .28em; }
.d-titulo { font-size: .9rem; color: #b8ab98; font-weight: 600; }
.d-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.d-contador { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; color: #b8ab98; letter-spacing: .06em; margin-right: 6px; }
.d-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #f2ebe0; font: 600 .85rem var(--sans); cursor: pointer; transition: background .2s, transform .2s; }
.d-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.d-ico { width: 40px; padding: 0; justify-content: center; }
.d-ico .i-play, .pausado .d-ico .i-pausa { display: none; }
.pausado .d-ico .i-play { display: block; }
.d-cta { border: 0; background: linear-gradient(135deg, #c9a77c, #8a7356); color: #fff; box-shadow: 0 6px 20px rgba(201, 167, 124, .35); }
.d-cta:hover { background: linear-gradient(135deg, #d6b78e, #9a8263); transform: translateY(-1px); }
.d-progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.d-progresso i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a77c, #f0dcc0); transition: width .5s ease; }

/* Palco e slides */
.d-palco { position: absolute; inset: 64px 0 0 0; }
.slide { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px 84px 72px; opacity: 0; visibility: hidden; transform: translateX(40px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s; }
.slide.ativo { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.slide.antes { transform: translateX(-40px) scale(.98); }
.cartao { position: relative; width: min(1180px, 100%); aspect-ratio: 16 / 9; max-height: 100%; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #fbfaf6 0%, #f5eee3 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 48px; padding: 48px 56px; }
.cartao::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; top: -220px; background: radial-gradient(circle, rgba(201, 167, 124, .22), transparent 70%); pointer-events: none; }
.invertido .cartao { grid-template-columns: 1fr 1.25fr; }
.invertido .visual { order: 2; }

/* Moldura de navegador */
.visual { position: relative; }
.moldura { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(20, 28, 46, .08), 0 24px 50px rgba(20, 28, 46, .2); border: 1px solid #e5dfd2; }
.barra { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #f1ebe1; border-bottom: 1px solid #e5dfd2; }
.barra i { width: 9px; height: 9px; border-radius: 50%; background: #e2675b; }
.barra i:nth-child(2) { background: #e9b949; }
.barra i:nth-child(3) { background: #69b56d; }
.barra span { margin: 0 auto; transform: translateX(-20px); font-size: .62rem; color: #8b806f; background: #fff; border-radius: 6px; padding: 1px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.moldura img { display: block; width: 100%; height: auto; }
.tela { overflow: hidden; }
.ativo .tela img { animation: aproximar 9s ease-out both; transform-origin: 30% 20%; }
@keyframes aproximar { from { transform: scale(1); } to { transform: scale(1.06); } }
.ativo .visual .moldura { animation: entrar .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(30px) rotate(-1deg); } to { opacity: 1; transform: none; } }

/* Celular sobreposto */
.telemovel { position: absolute; width: 23%; right: -4%; bottom: -10%; border-radius: 22px; padding: 6px; background: #141c2e; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.telemovel img { display: block; width: 100%; border-radius: 16px; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; }
.invertido .telemovel { right: auto; left: -4%; }
.ativo .telemovel { animation: subir 1s .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

/* Selos flutuantes */
.selo { position: absolute; z-index: 3; font-size: .8rem; font-weight: 700; color: var(--tinta); background: #fff; border: 1px solid #e5dfd2; border-radius: 999px; padding: 8px 14px; box-shadow: 0 10px 30px rgba(20, 28, 46, .2); white-space: nowrap; opacity: 0; }
.b-dir { right: -18px; top: 18%; }
.b-esq { left: -18px; bottom: 16%; }
.ativo .selo { animation: brotar .6s var(--atraso, 1s) cubic-bezier(.3, 1.5, .5, 1) both, flutuar 4s calc(var(--atraso, 1s) + .6s) ease-in-out infinite; }
@keyframes brotar { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes flutuar { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

/* Texto */
.texto { position: relative; z-index: 2; }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #8a7356, #1c2a44); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.texto h2, .s-fim h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.08; color: var(--tinta); margin: 0 0 14px; }
.texto p { color: var(--texto-suave); font-size: .98rem; margin: 0 0 18px; }
.texto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.texto li { position: relative; padding-left: 32px; font-size: .9rem; color: var(--texto); }
.texto li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: var(--taupe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ativo .texto > * { animation: aparecer .7s cubic-bezier(.2, .7, .2, 1) both; }
.ativo .texto > :nth-child(2) { animation-delay: .1s; }
.ativo .texto > :nth-child(3) { animation-delay: .2s; }
.ativo .texto li { animation: aparecer .6s cubic-bezier(.2, .7, .2, 1) both; }
.ativo .texto li:nth-child(1) { animation-delay: .4s; }
.ativo .texto li:nth-child(2) { animation-delay: .55s; }
.ativo .texto li:nth-child(3) { animation-delay: .7s; }
.ativo .texto li:nth-child(4) { animation-delay: .85s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rodape-slide { position: absolute; left: 56px; right: 56px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; color: #a49884; letter-spacing: .08em; }
.rodape-slide img { width: 28px; height: 28px; object-fit: contain; opacity: .7; }

/* Logótipo horizontal (já tem o nome): mostra só a imagem */
.marca-larga > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.d-marca.marca-larga { padding: 6px 14px; }
.d-marca.marca-larga img { width: auto; height: 34px; max-width: 170px; }
.capa-logo.marca-larga { padding: 10px 22px; }
.capa-logo.marca-larga img { width: auto; height: 52px; max-width: 240px; }
.rodape-slide.marca-larga img { width: auto; height: 30px; max-width: 120px; }
.rodape-slide.marca-larga > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* Logótipo no topo escuro: em branco, para ter contraste */
.d-marca img { filter: brightness(0) invert(1); opacity: .92; }

/* Capa */
.s-capa .cartao { background: linear-gradient(135deg, #141c2e 0%, #3d342a 55%, #5a4a3a 100%); color: #efe7da; grid-template-columns: 1fr 1.05fr; gap: 24px; }
.s-capa .cartao::before { background: radial-gradient(circle, rgba(201, 167, 124, .35), transparent 70%); width: 700px; height: 700px; }
.capa-logo { display: inline-flex; align-items: center; gap: 12px; background: #fbfaf6; color: var(--tinta); border-radius: 14px; padding: 8px 18px 8px 10px; margin-bottom: 22px; }
.capa-logo img { width: 40px; height: 40px; object-fit: contain; }
.capa-logo b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: .3em; line-height: 1; }
.capa-logo small { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.s-capa h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.02; color: #fff; margin: 0 0 16px; }
.s-capa h1 em, .s-fim h2 em { color: #d9bb93; }
.capa-publico { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; font-weight: 600; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); border-radius: 10px; padding: 7px 12px; margin-bottom: 14px; }
.s-capa p { color: #cfc3b2; font-size: .95rem; margin: 0 0 16px; max-width: 470px; }
.capa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.capa-chips span { font-size: .76rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.capa-numeros { display: flex; gap: 26px; margin-bottom: 22px; }
.capa-numeros b { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: 500; line-height: 1; color: #d9bb93; font-variant-numeric: tabular-nums; }
.capa-numeros small { font-size: .7rem; color: #b8ab98; }
.capa-btn { background: linear-gradient(135deg, #c9a77c, #8a7356); box-shadow: 0 10px 30px rgba(201, 167, 124, .35); }
.ativo .anim { animation: aparecer .8s cubic-bezier(.2, .7, .2, 1) both; }
.ativo .anim:nth-of-type(2) { animation-delay: .1s; } .ativo .anim:nth-of-type(3) { animation-delay: .2s; }
.ativo .capa-chips { animation-delay: .3s; } .ativo .capa-numeros { animation-delay: .4s; } .ativo .capa-btn { animation-delay: .5s; }
.capa-visual { position: relative; height: 100%; min-height: 300px; }
.capa-visual .moldura { position: absolute; width: 100%; }
.m-tras { top: 4%; right: -22%; transform: rotate(2deg); opacity: .9; }
.m-frente { top: 34%; left: -2%; width: 92% !important; }
.ativo .m-tras { animation: deslizar 1.1s .2s cubic-bezier(.2, .7, .2, 1) both; }
.ativo .m-frente { animation: deslizar2 1.1s .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes deslizar { from { opacity: 0; transform: translateX(80px) rotate(4deg); } to { opacity: .9; transform: rotate(2deg); } }
@keyframes deslizar2 { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
.b-capa1 { left: 4%; top: 22%; --atraso: 1.3s; }
.b-capa2 { right: 0; bottom: 6%; --atraso: 1.8s; }

/* Encerramento */
.s-fim .cartao { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.s-fim p { color: var(--texto-suave); max-width: 680px; margin: 0 0 26px; }
.s-fim h2 em { color: var(--terracota); }
.fim-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(760px, 100%); margin-bottom: 28px; }
.fim-grade span { background: #fff; border: 1px solid #e5dfd2; border-radius: 12px; padding: 12px 10px; font-size: .85rem; font-weight: 600; color: var(--tinta); box-shadow: 0 4px 14px rgba(20, 28, 46, .06); }
.ativo .fim-grade span { animation: brotar .5s calc(.3s + var(--k) * .07s) cubic-bezier(.3, 1.5, .5, 1) both; }
.fim-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Fale Conosco / Contrate Agora: botões de destaque com brilho passando */
.fim-contato { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.btn-brilho { position: relative; overflow: hidden; isolation: isolate; padding: 15px 30px; font-size: 1rem; font-weight: 700; color: #fff; border: 0; background: linear-gradient(135deg, #1c2a44, #141c2e); box-shadow: 0 10px 28px rgba(20, 28, 46, .3); transition: transform .2s, box-shadow .2s; }
.btn-contratar { background: linear-gradient(135deg, #c9a77c, #8a7356); box-shadow: 0 10px 28px rgba(201, 167, 124, .45); }
.btn-brilho:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20, 28, 46, .4); }
.btn-brilho::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: fim-brilho 3s ease-in-out infinite; }
.btn-contratar::after { animation-delay: 1.5s; }
@keyframes fim-brilho { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.ativo .fim-contato { animation: aparecer .7s .9s cubic-bezier(.2, .7, .2, 1) both; }

/* Navegação */
.d-seta { position: fixed; top: calc(50% + 32px); transform: translateY(-50%); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fbfaf6; color: var(--tinta); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; display: grid; place-items: center; transition: transform .2s, opacity .2s; }
.d-seta:hover { transform: translateY(-50%) scale(1.08); }
.d-seta svg { width: 22px; height: 22px; }
.d-ant { left: 18px; } .d-seg { right: 18px; }
.d-seta[disabled] { opacity: 0; pointer-events: none; }
.d-pontos { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fbfaf6; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.d-pontos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d5c9b5; cursor: pointer; transition: width .3s, background .3s; }
.d-pontos button.ativo { width: 26px; background: var(--taupe); }

/* Telas menores: o cartão deixa de ser 16:9 e passa a rolar */
@media (max-width: 1100px) {
  .d-titulo { display: none; }
  .slide { padding: 20px 70px 64px; }
  .cartao { gap: 28px; padding: 36px 36px 48px; }
}
@media (max-width: 860px), (max-height: 560px) {
  .d-so-pc, .d-btn span { display: none; }
  .d-btn { padding: 0 11px; }
  .d-cta span { display: inline; }
  .d-topo { gap: 10px; padding: 0 12px; }
  .d-marca span { font-size: 1rem; letter-spacing: .2em; }
  .slide { padding: 14px 16px 64px; place-items: start center; }
  .cartao, .invertido .cartao, .s-capa .cartao { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; height: 100%; overflow-y: auto; padding: 24px 20px 56px; gap: 22px; border-radius: 18px; }
  .invertido .visual { order: 0; }
  .cartao > * { flex-shrink: 0; }
  .capa-visual { min-height: 0; height: auto; order: -1; }
  .capa-visual .moldura { position: relative; inset: auto; width: 100% !important; }
  .m-tras { display: none; }
  .b-capa1 { left: 8px; top: auto; bottom: -14px; }
  .b-capa2 { display: none; }
  .b-dir { right: 6px; top: auto; bottom: -14px; }
  .b-esq { display: none; }
  .telemovel { width: 26%; right: -2%; bottom: -8%; }
  .rodape-slide { display: none; }
  .capa-numeros { gap: 16px; }
  .fim-grade { grid-template-columns: repeat(2, 1fr); }
  .s-fim .cartao { justify-content: flex-start; }
  .d-seta { display: none; }
  .d-pontos { bottom: 14px; max-width: calc(100% - 32px); overflow-x: auto; }
}
@media (max-width: 480px) { .d-contador { display: none; } .d-marca.marca-larga img { height: 28px; } .d-cta { padding: 0 12px; } }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide * { animation: none !important; transition: none !important; }
  .selo { opacity: 1; }
}

/* Baixar PDF: imprime cada slide numa página A4 deitada */
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.demo { height: auto; overflow: visible; background: #fff; }
  .d-topo, .d-seta, .d-pontos, .capa-btn, .fim-acoes, .fim-contato { display: none !important; }
  .d-palco { position: static; }
  .slide { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; height: 210mm; padding: 10mm; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .cartao { box-shadow: none; width: 100%; max-height: none; }
  .slide *, .slide *::before { animation: none !important; transition: none !important; }
  .selo { opacity: 1; }
  .m-tras { opacity: .9; transform: rotate(2deg); }
}