/* Páginas de provedor (app e proposta) no padrão visual HanoSys, 17/10/2026.
   Base: ../inst.css; aqui ficam as variáveis que app-provedor.css e proposta.css usam e o topo com celulares. */
:root {
  --primary: #0D6949; --secondary: #1D1D30; --accent: #00E5A3; --surface: #ffffff; --surface-alt: #f3f6f5; --bg-color: #f3f6f5;
  --border: #dce3e0; --text-main: #1D1D30; --text-muted: #5a6170; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08); --shadow-lg: 0 18px 40px rgba(16, 24, 40, .18); --transition-fast: .15s ease;
}
.section-header { text-align: center; max-width: 780px; margin: 0 auto 34px; }
.section-title { font-size: 2rem; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.section-subtitle { color: var(--suave); font-size: 1.05rem; }
.section-subtitle a, .pp-link { color: var(--verde); font-weight: 600; }
.ap-features, .ap-how, .ap-gallery { padding: 72px 0; }
.ap-features { background: var(--bg); }
.ap-how, .ap-gallery { background: var(--sup); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.ap-feat { background: var(--sup); }
.ap-feat-icon { background: linear-gradient(135deg, #0D6949, #03D699) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(13, 105, 73, .25); }
.ap-feat-icon svg { stroke: #fff !important; }
.btn-outline-white, .btn-white { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.btn-white { background: var(--acento); color: #0b1d16; border-color: var(--acento); }
.btn-outline-white:hover { background: rgba(255, 255, 255, .08); }
.ap-btn-main { background: var(--acento); color: #0b1d16; }
.ap-btn-main:hover { filter: brightness(1.08); }
.cta-section { padding: 72px 0; text-align: center; color: #e8f5ef; background: linear-gradient(160deg, #14141F 0%, #1D1D30 60%, #0D3B2E 100%); }
.cta-section .section-title { color: #fff; }
.cta-section .section-subtitle { color: #c4e6d8; max-width: 640px; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Topo: celulares com as telas reais e avisos animados */
.ap-vis { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 10px 0 30px; }
.ap-vis .mk-phone { width: 210px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.ap-vis .mk-phone + .mk-phone { margin-left: -46px; transform: translateY(34px) scale(.92); opacity: .92; }
.bolha { position: absolute; display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 14px; background: rgba(29, 29, 48, .92);
  border: 1px solid rgba(3, 214, 153, .45); color: #e8f5ef; font-size: .86rem; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: bolha 9s ease-in-out infinite; opacity: 0; backdrop-filter: blur(4px); }
.bolha i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; background: linear-gradient(135deg, #0D6949, #03D699); color: #fff; font-size: .8rem; }
.bolha small { display: block; font-weight: 500; color: #9ea3b5; font-size: .74rem; }
.bolha.b1 { top: 12%; left: -2%; animation-delay: 0s; }
.bolha.b2 { top: 46%; right: -4%; animation-delay: 3s; }
.bolha.b3 { bottom: 6%; left: 4%; animation-delay: 6s; }
@keyframes bolha { 0% { opacity: 0; translate: 0 10px; } 6%, 30% { opacity: 1; translate: 0 0; } 36%, 100% { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .bolha { animation: none; opacity: 1; } }

/* Galeria */
.ap-shot .mk-phone { width: 100%; }
.ap-shot figcaption b { color: var(--txt); }
@media (max-width: 900px) {
  .ap-vis { order: -1; transform: scale(.78); transform-origin: top center; margin-bottom: -70px; }
  .bolha.b1 { left: -8%; } .bolha.b2 { right: -10%; }
  .section-title { font-size: 1.55rem; }
  .ap-features, .ap-how, .ap-gallery, .cta-section { padding: 48px 0; }
}

/* Listas: sem marcador do navegador (as listas têm marcador próprio) e sem esticar dentro dos cards */
ul, ol { list-style: none; }
.pp-list, .pp-terms { align-content: start; }