/* ===== Página de vendas v3 (29/09/2026) — carregado depois de site.css ===== */
.hero-venta h1 { font-size: 1.62rem; line-height: 1.2; }
.hero-venta .hero-precio { font-size: .95rem; font-weight: 900; margin-top: 10px; }
.hero-venta .btn-xl { font-size: 1.15rem; padding-top: 18px; padding-bottom: 18px; }

/* celular do topo: 3 telas reais em fade. Proporção da captura (600×1298): a tela aparece inteira, com a tarefa e o ¡Listo! */
.hero-app { width: 212px; }
.hero-tel { aspect-ratio: 600 / 1298; }
.hero-venta .hero-tel img { margin: 0; width: 100%; }
.hero-fade { position: relative; }
.hero-fade img { position: absolute; inset: 0; opacity: 0; animation: heroFade 9s infinite; }
.hero-fade img:nth-child(1) { position: relative; }
.hero-fade img:nth-child(2) { animation-delay: 3s; }
.hero-fade img:nth-child(3) { animation-delay: 6s; }
@keyframes heroFade { 0% { opacity: 0; } 4% { opacity: 1; } 33% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } }

/* carrossel em loop infinito */
.loop { overflow: hidden; margin: 8px -16px 0; padding: 6px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.loop-pista { display: flex; gap: 14px; width: max-content; animation: loopMove 48s linear infinite; }
.loop.pausa .loop-pista { animation-play-state: paused; }
.loop-card { flex: none; width: 190px; margin: 0; }
.loop-foto { border-radius: 22px; overflow: hidden; box-shadow: 0 10px 22px rgba(18,59,122,.2); background: var(--hielo); aspect-ratio: 780 / 1688; border: 5px solid #0F1F3D; }
.loop-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.loop-card figcaption { text-align: center; font-weight: 900; font-size: .82rem; color: var(--marino); margin-top: 8px; }
@keyframes loopMove { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
  .loop { overflow-x: auto; } .loop-pista { animation: none; }
  .hero-fade img { animation: none; } .hero-fade img:nth-child(1) { opacity: 1; }
}

/* culpa + o que não é */
.venta section > p { font-size: 1.02rem; }
.no-es { background: var(--hielo-claro); border: 2px solid var(--hielo); border-radius: 18px; padding: 14px; }
.no-es-tit { display: block; text-align: center; font-size: 1.05rem; color: var(--marino); margin-bottom: 6px; }
.no-es ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.si-es { margin-top: 10px; background: #E8FBEF; border-radius: 12px; padding: 10px 12px; font-size: .95rem; }

/* demo tocável */
.demo { background: var(--hielo-claro); border: 5px solid #0F1F3D; border-radius: 28px; overflow: hidden; max-width: 340px; margin: 0 auto; box-shadow: 0 12px 26px rgba(18,59,122,.2); padding-bottom: 4px; }
.demo-barra { background: var(--azul); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-weight: 900; }
.demo-est { background: rgba(255,255,255,.2); border-radius: 99px; padding: 3px 10px; }
.demo-tarea { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--gris); border-radius: 16px; margin: 10px; padding: 8px 10px; transition: background .2s, border-color .2s; }
.demo-tarea img { width: 48px; height: 48px; border-radius: 12px; background: var(--hielo); flex: none; }
.demo-nom { font-weight: 900; font-size: .95rem; flex: 1; line-height: 1.2; }
.demo-voz { border: 0; background: var(--hielo); border-radius: 50%; width: 38px; height: 38px; font-size: 1rem; cursor: pointer; flex: none; }
.demo-ok { border: 0; background: var(--verde); color: #fff; font: inherit; font-weight: 900; border-radius: 12px; padding: 10px 12px; box-shadow: 0 3px 0 var(--verde-oscuro); cursor: pointer; flex: none; min-width: 72px; }
.demo-ok:active { transform: translateY(3px); box-shadow: none; }
.demo-tarea.hecha { background: #FFFBEB; border-color: var(--amarillo); }
.demo-tarea.hecha .demo-ok { background: var(--amarillo); box-shadow: 0 3px 0 var(--amarillo-oscuro); font-size: 1.1rem; }
.demo-vuela { position: absolute; right: 30px; top: 6px; font-size: 1.6rem; pointer-events: none; animation: vuela .9s ease-out forwards; }
@keyframes vuela { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(40px,-90px) scale(1.6); opacity: 0; } }
.demo-premio { display: flex; gap: 12px; align-items: center; margin: 10px; padding: 12px; border-radius: 16px; background: #FFF3BF; border: 2px solid var(--amarillo); animation: aparece .4s ease-out; }
.demo-premio[hidden] { display: none; }
.demo-premio img { width: 64px; height: 64px; flex: none; }
.demo-premio b { display: block; color: var(--marino); }
.demo-premio span { font-size: .88rem; }
@keyframes aparece { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.demo-cta { max-width: 340px; margin-left: auto; margin-right: auto; scroll-margin-bottom: 110px; animation: aparece .4s ease-out; }
.demo-cta[hidden] { display: none; }
#precio-oferta { scroll-margin-bottom: 90px; }

/* cena da manhã */
.escena { background: var(--blanco); border-left: 5px solid var(--amarillo); border-radius: 0 16px 16px 0; padding: 4px 16px; }
.escena p { margin: 10px 0; }
.escena-fin { font-weight: 900; color: var(--marino); }
.paso-mama { border-color: #DCCBFD; background: #FAF7FF; }
.paso-mama .num { background: var(--morado); font-size: 1rem; }

/* carta honesta */
.carta p { margin-top: 10px; }
.confianza-lista { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: .95rem; }
.primeras { margin-top: 14px; background: #FFF3BF; border: 2px solid var(--amarillo); border-radius: 16px; padding: 12px 14px; font-size: .95rem; }
.firma { text-align: right; font-weight: 900; color: var(--marino); }

/* oferta */
.lista-oferta .valor { text-decoration: none; }
.lista-oferta .valor s { text-decoration: line-through; }
.oferta .antes { text-decoration: none; }
.lista-oferta .bono-nota { display: block; font-size: .85rem; color: var(--morado-oscuro); background: #FAF7FF; border: 0; border-radius: 10px; padding: 8px 10px; margin-top: 6px; text-align: left; }
.precio-total { font-size: .95rem; margin-top: 2px; }
.precio-total b { color: var(--marino); }
.bajo-boton { display: grid; gap: 4px; margin-top: 12px; font-size: .88rem; }

/* passos do pagamento */
.pasos-pago { list-style: none; counter-reset: pp; padding: 0; margin: 0; display: grid; gap: 10px; }
.pasos-pago li { counter-increment: pp; position: relative; background: var(--blanco); border: 2px solid var(--gris); border-radius: 14px; padding: 12px 14px 12px 50px; font-size: .95rem; }
.pasos-pago li::before { content: counter(pp); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; }

/* fechamento */
.precio-cierre { display: grid; gap: 4px; justify-items: center; background: #FFF3BF; border: 2px solid var(--amarillo); border-radius: 16px; padding: 12px; margin: 16px auto 0; max-width: 420px; }
.precio-cierre .pc-pais { font-weight: 900; color: var(--marino); }
.precio-cierre s { color: var(--gris-texto); }
.precio-cierre b { font-size: 1.6rem; color: var(--azul); }
.precio-cierre small { color: var(--gris-texto); font-size: .82rem; }
.otros-paises { margin: 10px auto 0; max-width: 420px; text-align: left; }
.otros-paises summary { cursor: pointer; text-align: center; color: var(--azul); font-weight: 900; font-size: .9rem; }
.otros-paises .precios-pais { margin-top: 8px; }
.otros-paises .pp-fila { flex-wrap: wrap; }
.otros-paises .pp-precio { margin-left: auto; text-align: right; }

/* popup do pacote (desligado por config) */
.paquete-modal { position: fixed; inset: 0; background: rgba(15,31,61,.6); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.paquete-modal[hidden] { display: none; }
.paquete-caja { position: relative; background: #fff; width: 100%; max-width: 480px; border-radius: 24px 24px 0 0; padding: 24px 18px calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.paquete-caja ul { list-style: none; padding: 0; margin: 12px 0; text-align: left; display: grid; gap: 6px; }
.paquete-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 1.8rem; cursor: pointer; color: var(--gris-texto); }
.paquete-no { display: block; margin-top: 12px; font-weight: 900; color: var(--marino); }