/* ============================================================================
   AEOMaps Core — assets/css/aeomaps-comofunciona.css
   Página "Como funciona" — v0.42.0 (redesign premium · jornada serpenteante)
   ----------------------------------------------------------------------------
   ESCOPO ESTRITO: tudo em body.aeomaps-core .cf-page, classes próprias .cf-*.
   NÃO redefine nenhuma classe compartilhada (sec, card, grid3, cta-green, btn,
   eyebrow, h-*). NÃO edita foundation/legacy. Camada de apresentação apenas.
   Ritmo de fundos: branco → branco → verde → branco → escuro (ink-grad da Home).
   ============================================================================ */

body.aeomaps-core .cf-page{ --cf-ink:#0F1729; --cf-ink2:#475067; --cf-ink3:#8A93A6; --cf-line:#EAECEF; --cf-line2:#DDE1E6; --cf-brand:#16A36A; --cf-brandink:#0E7A4E; }

/* ---- HERO ---------------------------------------------------------------- */
/* HERO — fundo idêntico ao da Home (gradiente 168deg + grid técnico + glows radiais).
   Tipografia padronizada pelos tokens medidos da Home: h1 46px/lh1.0/ls-2px, lede 18px. */
body.aeomaps-core .cf-page .cf-hero{ background:linear-gradient(168deg,#F3F7F5 0%,#EEF3F0 55%,#F1F6F3 100%) !important; border-radius:20px !important; position:relative !important; overflow:hidden !important; padding:56px 26px !important; text-align:center !important; margin:0 14px 6px !important; }
body.aeomaps-core .cf-page .cf-hero::before{ content:"" !important; position:absolute !important; inset:0 !important; background-image:linear-gradient(rgba(11,107,71,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(11,107,71,.02) 1px,transparent 1px) !important; background-size:34px 34px !important; pointer-events:none !important; z-index:0 !important; }
body.aeomaps-core .cf-page .cf-hero::after{ content:"" !important; position:absolute !important; inset:0 !important; background-image:radial-gradient(48% 40% at 84% 5%,rgba(11,107,71,.08),transparent 64%),radial-gradient(40% 46% at 5% 96%,rgba(14,138,89,.06),transparent 60%) !important; pointer-events:none !important; z-index:0 !important; }
body.aeomaps-core .cf-page .cf-hero .cf-dotgrid{ display:none !important; }
body.aeomaps-core .cf-page .cf-hero-in{ position:relative !important; z-index:1 !important; }
body.aeomaps-core .cf-page .cf-h1{ font-family:var(--sans) !important; font-size:46px !important; font-weight:800 !important; letter-spacing:-2px !important; line-height:1.0 !important; color:var(--cf-ink) !important; margin:18px auto 0 !important; }
body.aeomaps-core .cf-page .cf-hl{ background:linear-gradient(135deg,#1BB877,#0E7A4E) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
body.aeomaps-core .cf-page .cf-lede{ font-family:var(--sans) !important; font-size:18px !important; color:var(--cf-ink2) !important; max-width:46ch !important; margin:18px auto 0 !important; line-height:1.55 !important; }
body.aeomaps-core .cf-page .cf-hbtns{ display:flex !important; gap:11px !important; justify-content:center !important; margin-top:24px !important; flex-wrap:wrap !important; }

/* ---- PILL (eyebrow) ------------------------------------------------------ */
body.aeomaps-core .cf-page .cf-pill{ font-family:var(--mono) !important; font-size:10px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--cf-brandink) !important; background:#fff !important; border:1px solid #E6F6EE !important; border-radius:30px !important; padding:6px 14px !important; display:inline-flex !important; align-items:center !important; gap:7px !important; }
body.aeomaps-core .cf-page .cf-pill::before{ content:"" !important; width:6px !important; height:6px !important; border-radius:50% !important; background:var(--cf-brand) !important; }
body.aeomaps-core .cf-page .cf-pill.cf-on-color,
body.aeomaps-core .cf-page .cf-pill.cf-on-dark{ background:rgba(95,224,163,.10) !important; border-color:rgba(95,224,163,.28) !important; color:#fff !important; }
body.aeomaps-core .cf-page .cf-pill.cf-on-color::before,
body.aeomaps-core .cf-page .cf-pill.cf-on-dark::before{ background:#5fe0a3 !important; }

/* ---- BOTÕES -------------------------------------------------------------- */
body.aeomaps-core .cf-page .cf-btn{ font-family:var(--sans) !important; font-size:13px !important; font-weight:600 !important; padding:11px 20px !important; border-radius:9px !important; display:inline-flex !important; align-items:center !important; gap:7px !important; border:1px solid transparent !important; transition:.18s !important; }
body.aeomaps-core .cf-page .cf-btn svg{ width:16px !important; height:16px !important; }
body.aeomaps-core .cf-page .cf-btn-green{ background:linear-gradient(135deg,#1BB877,#0E7A4E) !important; color:#fff !important; box-shadow:0 1px 2px rgba(14,122,78,.3),0 8px 20px -6px rgba(14,122,78,.4) !important; }
body.aeomaps-core .cf-page .cf-btn-green:hover{ transform:translateY(-1px) !important; }
body.aeomaps-core .cf-page .cf-btn-ghost{ background:#fff !important; border-color:var(--cf-line2) !important; color:var(--cf-ink) !important; }
body.aeomaps-core .cf-page .cf-btn-white{ background:#fff !important; color:var(--cf-ink) !important; box-shadow:0 8px 22px -8px rgba(0,0,0,.5) !important; }
body.aeomaps-core .cf-page .cf-btn-wghost{ background:transparent !important; border-color:rgba(255,255,255,.30) !important; color:#fff !important; }

/* ---- PAINEL STATBAR (hero) ----------------------------------------------- */
body.aeomaps-core .cf-page .cf-panel{ background:#fff !important; border:1px solid var(--cf-line) !important; border-radius:14px !important; margin:28px auto 0 !important; max-width:560px !important; overflow:hidden !important; box-shadow:0 4px 6px -1px rgba(16,23,41,.05),0 12px 28px -8px rgba(16,23,41,.12) !important; }
body.aeomaps-core .cf-page .cf-panel-bar{ display:flex !important; justify-content:space-between !important; align-items:center !important; padding:12px 18px !important; border-bottom:1px solid var(--cf-line) !important; font-family:var(--sans) !important; font-size:12px !important; color:var(--cf-ink2) !important; }
body.aeomaps-core .cf-page .cf-active{ color:var(--cf-brandink) !important; }

/* ---- SEÇÕES (2,3,4,5) ---------------------------------------------------- */
body.aeomaps-core .cf-page .cf-sec{ padding:56px 0 !important; position:relative !important; background:#fff !important; overflow:hidden !important; }
body.aeomaps-core .cf-page .cf-sec .cf-dotgrid{ -webkit-mask:radial-gradient(70% 80% at 50% 15%,#000,transparent 75%) !important; mask:radial-gradient(70% 80% at 50% 15%,#000,transparent 75%) !important; opacity:.5 !important; }
body.aeomaps-core .cf-page .cf-sec.cf-green{ background:linear-gradient(155deg,#1BB077,#0B6B47) !important; border-radius:24px !important; margin:14px !important; }
body.aeomaps-core .cf-page .cf-sec.cf-green::after{ content:"" !important; position:absolute !important; top:-40% !important; right:-10% !important; width:60% !important; height:120% !important; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%) !important; pointer-events:none !important; }
body.aeomaps-core .cf-page .cf-sec.cf-dark{ background:linear-gradient(135deg,#1B2436,#0F1729) !important; border-radius:24px !important; margin:14px !important; }
body.aeomaps-core .cf-page .cf-glow{ position:absolute !important; top:-30% !important; left:50% !important; transform:translateX(-50%) !important; width:70% !important; height:80% !important; background:radial-gradient(circle,rgba(22,163,106,.15),transparent 65%) !important; pointer-events:none !important; z-index:0 !important; }

body.aeomaps-core .cf-page .cf-head{ text-align:center !important; max-width:640px !important; margin:0 auto !important; padding:0 24px !important; position:relative !important; z-index:1 !important; }
body.aeomaps-core .cf-page .cf-h2{ font-family:var(--sans) !important; font-size:28px !important; font-weight:800 !important; letter-spacing:-.04em !important; line-height:1.1 !important; color:var(--cf-ink) !important; margin:16px auto 0 !important; }
body.aeomaps-core .cf-page .cf-sub{ font-family:var(--sans) !important; font-size:14px !important; color:var(--cf-ink2) !important; margin:12px auto 0 !important; line-height:1.6 !important; max-width:56ch !important; }
body.aeomaps-core .cf-page .cf-on-w.cf-on-w{ color:#fff !important; }
body.aeomaps-core .cf-page .cf-sub.cf-on-w{ color:#fff !important; }

/* ---- TRILHO SERPENTEANTE ------------------------------------------------- */
body.aeomaps-core .cf-page .cf-rail{ position:relative !important; max-width:680px !important; margin:34px auto 0 !important; padding:0 28px !important; z-index:1 !important; }
body.aeomaps-core .cf-page .cf-row{ position:relative !important; display:flex !important; align-items:center !important; gap:24px !important; margin-bottom:18px !important; }
body.aeomaps-core .cf-page .cf-row:last-child{ margin-bottom:0 !important; }
body.aeomaps-core .cf-page .cf-row.cf-rev{ flex-direction:row-reverse !important; }
body.aeomaps-core .cf-page .cf-node{ width:72px !important; height:72px !important; border-radius:20px !important; flex-shrink:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:30px !important; position:relative !important; z-index:2 !important; background:linear-gradient(150deg,#fff,#F4FAF7) !important; color:var(--cf-brandink) !important; box-shadow:0 1px 2px rgba(16,23,41,.04),0 14px 30px -10px rgba(16,163,106,.35) !important; }
body.aeomaps-core .cf-page .cf-node::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:20px !important; padding:1.5px !important; background:linear-gradient(150deg,#2CCB8A,#0B6B47) !important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important; -webkit-mask-composite:xor !important; mask-composite:exclude !important; opacity:.5 !important; }
body.aeomaps-core .cf-page .cf-node svg{ width:30px !important; height:30px !important; position:relative !important; z-index:1 !important; }
body.aeomaps-core .cf-page .cf-node-onG{ background:#fff !important; color:#0B6B47 !important; box-shadow:0 10px 30px -8px rgba(0,0,0,.30) !important; }
body.aeomaps-core .cf-page .cf-node-onG::before{ background:linear-gradient(150deg,#9FE9C7,#0B6B47) !important; opacity:.4 !important; }
body.aeomaps-core .cf-page .cf-badge{ position:absolute !important; top:-7px !important; right:-7px !important; min-width:22px !important; height:22px !important; border-radius:11px !important; background:linear-gradient(135deg,#1BB877,#0E7A4E) !important; color:#fff !important; font-family:var(--mono) !important; font-size:10px !important; font-weight:600 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 6px !important; box-shadow:0 4px 10px -2px rgba(14,122,78,.5) !important; border:2px solid #fff !important; z-index:3 !important; }
body.aeomaps-core .cf-page .cf-green .cf-badge{ border-color:#0d7a4e !important; }

body.aeomaps-core .cf-page .cf-cap{ flex:1 !important; display:flex !important; flex-direction:column !important; }
body.aeomaps-core .cf-page .cf-row:not(.cf-rev) .cf-cap{ text-align:left !important; }
body.aeomaps-core .cf-page .cf-row.cf-rev .cf-cap{ text-align:right !important; }
body.aeomaps-core .cf-page .cf-kn{ font-family:var(--mono) !important; font-size:10px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--cf-brandink) !important; }
body.aeomaps-core .cf-page .cf-kn-w{ color:#fff !important; }
body.aeomaps-core .cf-page .cf-kt{ font-family:var(--sans) !important; font-size:18px !important; font-weight:800 !important; letter-spacing:-.03em !important; color:var(--cf-ink) !important; margin:5px 0 7px !important; }
body.aeomaps-core .cf-page .cf-kp{ font-family:var(--sans) !important; font-size:13px !important; line-height:1.6 !important; color:var(--cf-ink2) !important; margin:0 !important; }

body.aeomaps-core .cf-page .cf-conn{ height:30px !important; width:60% !important; position:relative !important; }
body.aeomaps-core .cf-page .cf-conn-r{ border-right:2px solid #CDE7DA !important; border-bottom:2px solid #CDE7DA !important; border-radius:0 0 20px 0 !important; margin-right:32% !important; }
body.aeomaps-core .cf-page .cf-conn-l{ border-left:2px solid #CDE7DA !important; border-bottom:2px solid #CDE7DA !important; border-radius:0 0 0 20px !important; margin-left:32% !important; }
body.aeomaps-core .cf-page .cf-conn::after{ content:"" !important; position:absolute !important; width:8px !important; height:8px !important; border-radius:50% !important; background:var(--cf-brand) !important; bottom:-4px !important; box-shadow:0 0 0 4px rgba(22,163,106,.15) !important; }
body.aeomaps-core .cf-page .cf-conn-r::after{ right:32% !important; transform:translateX(50%) !important; }
body.aeomaps-core .cf-page .cf-conn-l::after{ left:32% !important; transform:translateX(-50%) !important; }
body.aeomaps-core .cf-page .cf-conn-onG{ border-color:rgba(255,255,255,.4) !important; }
body.aeomaps-core .cf-page .cf-conn-onG::after{ background:#fff !important; box-shadow:0 0 0 4px rgba(255,255,255,.2) !important; }

/* ---- TRANSPARÊNCIA (parte 5) --------------------------------------------- */
body.aeomaps-core .cf-page .cf-tgrid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px !important; max-width:640px !important; margin:34px auto 0 !important; padding:0 28px !important; position:relative !important; z-index:1 !important; }
body.aeomaps-core .cf-page .cf-tcard{ background:#fff !important; border-radius:18px !important; overflow:hidden !important; box-shadow:0 1px 2px rgba(0,0,0,.12),0 24px 50px -20px rgba(0,0,0,.65) !important; text-align:left !important; }
body.aeomaps-core .cf-page .cf-t-pos{ border-top:3px solid #16A36A !important; }
body.aeomaps-core .cf-page .cf-t-neg{ border-top:3px solid #E24B4A !important; }
body.aeomaps-core .cf-page .cf-t-time{ border-top:3px solid #EF9F27 !important; }
body.aeomaps-core .cf-page .cf-t-cyc{ border-top:3px solid #185FA5 !important; }
body.aeomaps-core .cf-page .cf-ttop{ padding:18px 20px 0 !important; display:flex !important; align-items:center !important; gap:12px !important; }
body.aeomaps-core .cf-page .cf-tic{ width:40px !important; height:40px !important; border-radius:11px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }
body.aeomaps-core .cf-page .cf-tic svg{ width:20px !important; height:20px !important; }
body.aeomaps-core .cf-page .cf-tic-green{ background:#E6F6EE !important; color:#0E7A4E !important; }
body.aeomaps-core .cf-page .cf-tic-red{ background:#FCEBEB !important; color:#A32D2D !important; }
body.aeomaps-core .cf-page .cf-tic-amber{ background:#FAEEDA !important; color:#854F0B !important; }
body.aeomaps-core .cf-page .cf-tic-blue{ background:#E6F1FB !important; color:#185FA5 !important; }
body.aeomaps-core .cf-page .cf-tt{ font-family:var(--sans) !important; font-size:14.5px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--cf-ink) !important; margin:0 !important; line-height:1.25 !important; }
body.aeomaps-core .cf-page .cf-tp{ font-family:var(--sans) !important; font-size:12.5px !important; color:var(--cf-ink2) !important; line-height:1.6 !important; margin:0 !important; padding:12px 20px 20px !important; }
body.aeomaps-core .cf-page .cf-fbtns{ display:flex !important; gap:12px !important; justify-content:center !important; margin-top:28px !important; position:relative !important; z-index:1 !important; flex-wrap:wrap !important; }

/* ---- RESPONSIVO (mobile) — trilho vira coluna única, sem zigue-zague ----- */
@media(max-width:760px){
  body.aeomaps-core .cf-page .cf-h1{ font-size:32px !important; }
  body.aeomaps-core .cf-page .cf-h2{ font-size:23px !important; }
  body.aeomaps-core .cf-page .cf-row,
  body.aeomaps-core .cf-page .cf-row.cf-rev{ flex-direction:row !important; gap:16px !important; }
  body.aeomaps-core .cf-page .cf-row .cf-cap,
  body.aeomaps-core .cf-page .cf-row.cf-rev .cf-cap{ text-align:left !important; }
  body.aeomaps-core .cf-page .cf-node{ width:56px !important; height:56px !important; }
  body.aeomaps-core .cf-page .cf-node svg{ width:24px !important; height:24px !important; }
  body.aeomaps-core .cf-page .cf-conn{ width:2px !important; height:22px !important; margin:0 0 0 28px !important; border-radius:0 !important; border-right:0 !important; border-bottom:0 !important; border-left:2px solid #CDE7DA !important; }
  body.aeomaps-core .cf-page .cf-conn::after{ left:0 !important; right:auto !important; transform:translateX(-50%) !important; }
  body.aeomaps-core .cf-page .cf-conn-onG{ border-left-color:rgba(255,255,255,.4) !important; }
  body.aeomaps-core .cf-page .cf-tgrid{ grid-template-columns:1fr !important; }
}