/* Pagina do Webiia Flow (webiia.com.br/flow/), feita a mao em 22/09/2026.
   Carrega depois de produto.css: reaproveita tokens, topbar, faq e rodape,
   e acrescenta o que a pagina de vitrine precisa (prints, tour, precos). */
:root{--line:rgba(255,255,255,.08);--card:#12161f;--card2:#171c27}
.wrap{max-width:1120px}
.wrap.estreito{max-width:760px}

/* ---------- hero ---------- */
.fx-hero{padding:64px 0 0;text-align:center;position:relative;overflow:hidden}
.fx-hero::before{content:"";position:absolute;left:50%;top:-120px;width:900px;height:620px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(47,174,116,.22),transparent 70%);pointer-events:none}
.fx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--flow-lt);border:1px solid rgba(47,174,116,.4);border-radius:999px;padding:6px 14px;background:rgba(47,174,116,.08)}
.fx-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--flow-lt);box-shadow:0 0 10px var(--flow-lt)}
.fx-hero h1{font-size:clamp(2.1rem,5.4vw,3.7rem);margin:22px auto 18px;max-width:860px}
.fx-hero .sub{font-size:clamp(1rem,1.6vw,1.14rem);color:#c9d0db;max-width:680px;margin:0 auto}
.fx-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.98rem;border-radius:12px;padding:15px 26px;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.pri{background:var(--flow);color:#06140d;box-shadow:0 10px 30px -10px rgba(47,174,116,.7)}
.btn.pri:hover{background:#38c283}
.btn.sec{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.03)}
.btn.sec:hover{border-color:var(--flow-lt)}
.btn svg{width:18px;height:18px;flex:none}
.fx-selos{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:.8rem;color:var(--gray)}
.fx-selos span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.02)}
.fx-selos b{color:#fff;font-weight:700}

/* moldura de navegador em volta dos prints */
.tela{border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);cursor:zoom-in;position:relative}
.tela .barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1b2130;border-bottom:1px solid rgba(255,255,255,.06)}
.tela .barra i{width:10px;height:10px;border-radius:50%;background:#3a4254}
.tela .barra i:nth-child(1){background:#ff5f57}.tela .barra i:nth-child(2){background:#febc2e}.tela .barra i:nth-child(3){background:#28c840}
.tela .barra span{margin-left:10px;font-size:.7rem;color:#8a93a3;font-family:ui-monospace,monospace;background:#11151e;border-radius:6px;padding:2px 10px}
.tela img{display:block;width:100%;height:auto}
.fx-hero .tela{margin:52px auto 0;max-width:1060px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.fx-hero-fade{height:70px;margin-top:-70px;position:relative;background:linear-gradient(transparent,var(--bg))}

/* ---------- blocos gerais ---------- */
.fx-sec{padding:88px 0;border-top:1px solid var(--line)}
.fx-sec.sem-linha{border-top:0}
.fx-kicker{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--flow-lt);margin-bottom:12px;display:block}
.fx-sec h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.fx-lead{font-size:1.06rem;color:#c3cad6;max-width:680px}
.centro{text-align:center}.centro .fx-lead{margin:0 auto}

/* numeros de prova */
.fx-numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:6px}
.fx-numeros div{background:var(--bg);padding:26px 20px;text-align:center}
.fx-numeros b{display:block;font-family:'Poppins',sans-serif;font-size:1.8rem;color:#fff;line-height:1.1}
.fx-numeros span{font-size:.84rem;color:var(--gray)}
@media(max-width:760px){.fx-numeros{grid-template-columns:1fr 1fr}}

/* problema */
.fx-dor{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.fx-dor blockquote{border-left:3px solid #f5b83d;background:rgba(245,184,61,.06);border-radius:0 14px 14px 0;padding:22px 24px;font-size:1.02rem;color:#e7ebf1}
.fx-dor blockquote b{color:#fff}
.fx-dor p+p{margin-top:12px}
@media(max-width:820px){.fx-dor{grid-template-columns:1fr;gap:24px}}

/* ---------- tour: texto + print alternando ---------- */
.fx-abas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:34px 0 10px}
.fx-abas a{font-size:.84rem;font-weight:600;text-decoration:none;color:#c9d0db;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.02)}
.fx-abas a:hover{border-color:var(--flow);color:#fff}
.fx-linha{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:64px 0;scroll-margin-top:70px}
.fx-linha.inv{grid-template-columns:7fr 5fr}
.fx-linha.inv .fx-txt{order:2}
.fx-txt h3{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:12px}
.fx-txt p{color:#c3cad6}
.fx-txt ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.fx-txt li{position:relative;padding-left:28px;font-size:.95rem;color:#dfe4ec}
.fx-txt li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;
  background:rgba(47,174,116,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FE3A6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.fx-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(47,174,116,.14);color:var(--flow-lt);font-weight:800;font-size:.9rem;margin-bottom:14px}
@media(max-width:900px){
  .fx-linha,.fx-linha.inv{grid-template-columns:1fr;gap:26px;padding:44px 0}
  .fx-linha.inv .fx-txt{order:0}
}

/* ---------- instagram ---------- */
.fx-ig{background:radial-gradient(900px 400px at 85% 0%,rgba(225,48,108,.12),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(131,58,180,.12),transparent 60%)}
.fx-ig .fx-kicker{color:#f58fb5}
.fx-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.fx-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.fx-card h4{font-family:'Poppins',sans-serif;font-size:1rem;margin-bottom:6px;color:#fff}
.fx-card p{font-size:.9rem;color:#b3bbc8;line-height:1.6}
.fx-card .ic{font-size:1.2rem;margin-bottom:10px;display:block}
@media(max-width:900px){.fx-grade{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fx-grade{grid-template-columns:1fr}}
.fx-nota{margin-top:26px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;color:#c9d0db;font-size:.96rem}
.fx-nota b{color:#fff}

/* ---------- IA ---------- */
.fx-ia{background:linear-gradient(180deg,rgba(107,59,255,.08),transparent 60%)}
.fx-ia .fx-kicker{color:var(--roxo-lt)}
.fx-pedido{background:#0f1320;border:1px solid rgba(167,139,250,.3);border-radius:14px;padding:18px 20px;font-family:ui-monospace,Consolas,monospace;font-size:.86rem;color:#d7d2ff;line-height:1.65;position:relative}
.fx-pedido::before{content:"O pedido, digitado";position:absolute;top:-11px;left:16px;background:var(--bg);padding:0 8px;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--roxo-lt)}
.fx-faixa{margin-top:30px;border-radius:14px;border:1px solid rgba(255,255,255,.12);overflow-x:auto;background:#eef2ef;-webkit-overflow-scrolling:touch;cursor:zoom-in}
.fx-faixa img{display:block;height:300px;width:auto;max-width:none}
.fx-legenda{font-size:.8rem;color:var(--gray);margin-top:8px}
.fx-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.fx-tres .fx-card b{display:inline-flex;width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;background:rgba(167,139,250,.16);color:var(--roxo-lt);font-size:.85rem;margin-bottom:10px}
@media(max-width:820px){.fx-tres{grid-template-columns:1fr}}

/* ---------- API oficial ---------- */
.fx-api{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid rgba(47,174,116,.3);border-radius:18px;padding:32px}
.fx-api .selo{width:84px;height:84px;border-radius:20px;background:rgba(47,174,116,.12);display:flex;align-items:center;justify-content:center}
.fx-api .selo svg{width:44px;height:44px}
.fx-api h3{font-size:1.4rem;margin-bottom:8px}
.fx-api p{color:#c3cad6}
@media(max-width:640px){.fx-api{grid-template-columns:1fr;padding:24px}}

/* ---------- pra quem ---------- */
.fx-quem{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.fx-quem .fx-card h4{color:var(--flow-lt)}
@media(max-width:900px){.fx-quem{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fx-quem{grid-template-columns:1fr}}

/* ---------- comparativo ---------- */
.fx-tab{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch}
.fx-tab table{width:100%;min-width:760px;border-collapse:collapse;font-size:.86rem}
.fx-tab th,.fx-tab td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.fx-tab thead th{font-family:'Poppins',sans-serif;font-size:.86rem;color:#fff;background:var(--card2)}
.fx-tab thead th.nos{color:#06140d;background:var(--flow)}
.fx-tab td.nos{background:rgba(47,174,116,.08)}
.fx-tab tbody th{font-weight:600;color:#dfe4ec;width:24%}
.fx-tab tr:last-child td,.fx-tab tr:last-child th{border-bottom:0}
.s{font-weight:800;margin-right:4px}.s.ok{color:#5FE3A6}.s.no{color:#ff7b7b}.s.mei{color:#f5b83d}
.fx-tab td{color:#b3bbc8}

/* ---------- precos ---------- */
.fx-precos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;align-items:stretch}
.plano{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;position:relative}
.plano.dest{border-color:var(--flow);background:linear-gradient(180deg,rgba(47,174,116,.12),var(--card) 45%);box-shadow:0 20px 60px -30px rgba(47,174,116,.6)}
.plano .fita{position:absolute;top:-12px;left:24px;background:var(--flow);color:#06140d;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px}
.plano h3{font-size:1.15rem}
.plano .pra{font-size:.86rem;color:var(--gray);margin:4px 0 16px;min-height:2.8em}
.plano .valor{font-family:'Poppins',sans-serif;font-size:2.4rem;font-weight:700;color:#fff;line-height:1}
.plano .valor small{font-size:.9rem;color:var(--gray);font-weight:600}
.plano .apartir{font-size:.76rem;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.plano ul{list-style:none;margin:20px 0 24px;display:grid;gap:9px;flex:1}
.plano li{font-size:.9rem;color:#dfe4ec;padding-left:24px;position:relative}
.plano li::before{content:"✓";position:absolute;left:0;color:var(--flow-lt);font-weight:800}
.plano li.nao{color:var(--gray)}.plano li.nao::before{content:"–";color:var(--gray)}
.plano .btn{justify-content:center}
@media(max-width:900px){.fx-precos{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.fx-extra{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.fx-extra .fx-card{display:flex;flex-direction:column;gap:6px}
.fx-extra a{color:var(--flow-lt);font-weight:700;font-size:.9rem;text-underline-offset:3px}
@media(max-width:900px){.fx-extra{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.fx-miudo{font-size:.84rem;color:var(--gray);margin-top:18px;text-align:center}

/* ---------- passos ---------- */
.fx-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;counter-reset:p}
.fx-passos div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;counter-increment:p}
.fx-passos div::before{content:counter(p);display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:var(--flow);color:#06140d;font-weight:800;font-size:.85rem;margin-bottom:12px}
.fx-passos h4{font-family:'Poppins',sans-serif;font-size:1rem;margin-bottom:6px}
.fx-passos p{font-size:.88rem;color:#b3bbc8;line-height:1.6}
@media(max-width:900px){.fx-passos{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fx-passos{grid-template-columns:1fr}}

/* botao fixo no celular */
.fx-fixo{display:none}
@media(max-width:700px){
  .fx-fixo{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;transform:translateY(130%);transition:transform .25s}
  .fx-fixo.vis{transform:none}
  .fx-fixo .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.9rem}
  body{padding-bottom:0}
}
.topbar .cta-top{margin-left:6px;font-size:.78rem;font-weight:700;text-decoration:none;background:var(--flow);color:#06140d;border-radius:8px;padding:7px 12px;letter-spacing:0;text-transform:none}
@media(max-width:620px){.topbar .cta-top{display:none}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,7,10,.92);display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* ajustes pos-render 22/09 */
.fx-hero h1{max-width:980px;font-size:clamp(2.1rem,5vw,3.4rem)}
section p.fx-nota,section p.fx-pedido,section p.fx-lead{max-width:none}
section .fx-lead{max-width:700px}
.fx-linha{grid-template-columns:4fr 7fr}.fx-linha.inv{grid-template-columns:7fr 4fr}
.fx-fixo .btn.sec{background:#161b25;border-color:rgba(255,255,255,.22)}