/* CSS compartilhado das paginas de modulo (site/www/modulos/*.html).
   Padrao fechado no Comercial: hero centralizado, bandas alternadas, elementos
   reutilizaveis (mock, fstrip, rel, rulecard, rchips). Cada pagina ainda pode ter
   um <style> local so pro conteudo dos mockups especificos dela.
   Depende de css/site.css (tokens + .aibento/.acard/.mods/.stats-card/.faq/.h2-2/.eyebrow-c). */

/* hero */
.mhero { padding: clamp(2.6rem, 5vw, 4.5rem) 0 clamp(2.6rem, 5vw, 4rem); text-align: center; }
.mhero-head { max-width: 720px; margin: 0 auto; }
.mhero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -0.03em; margin-top: 0.7rem; }
.mhero .lead-2 { max-width: 52ch; margin: 1rem auto 0; }
.mhero-ctas { margin-top: 1.8rem; display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.mhero-reel { max-width: 1000px; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--blue); }

/* bandas alternadas pra separar as secoes */
.sec-2 { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* row (âncora: texto + mockup) */
.row { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.row.inv .row-media { order: -1; }
.row + .row { margin-top: clamp(3.5rem, 7vw, 6rem); }
.row-txt h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; margin-top: 0.5rem; }
.row-txt h2 .g { color: var(--ink-3); }
.row-txt > p { margin-top: 1rem; color: var(--ink-3); font-size: 1.04rem; max-width: 44ch; }
@media (max-width: 60rem) { .row, .row.inv { grid-template-columns: 1fr; } .row.inv .row-media { order: 0; } }

/* moldura de navegador */
.mock { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--sh); }
.mock-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.8rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #d6dae1; }
.mock-bar .url { margin-left: 0.5rem; font-size: 0.72rem; color: var(--ink-3); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.7rem; }
.mock-app { display: flex; min-height: 300px; background: var(--bg-2); }
.mock-side { width: 46px; background: var(--ink); flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; }
.mock-side i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.12); }
.mock-side i.on { background: var(--blue); }
.mock-main { flex: 1; padding: 14px; min-width: 0; }
.mock-h { font-family: var(--f); font-weight: 600; font-size: 0.9rem; margin-bottom: 11px; }

/* chip verde de confirmacao (ok) */
.vok { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: var(--ok); background: var(--ok-050); border-radius: 999px; padding: 4px 10px; }
.vok svg { flex: none; }

/* fluxo de status vertical (lista de linhas com icone + tag) */
.sflow { padding: 8px; }
.srow { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px; padding: 11px 10px; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.sic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.sic.ok { background: var(--ok-050); color: var(--ok); }
.sic.b { background: var(--blue-050); color: var(--blue); }
.srow b { font-size: 0.86rem; font-weight: 600; }
.srow .sub { display: block; font-size: 0.72rem; color: var(--ink-3); }
.stag { font-size: 0.62rem; font-weight: 700; color: var(--ok); background: var(--ok-050); border-radius: 5px; padding: 3px 7px; }

/* card de regra (SE/ENTAO) */
.rulecard { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh); padding: clamp(1.4rem, 3vw, 2rem); max-width: 720px; margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; }
.rlbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; }
.rlbl.se { color: var(--blue); }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { font-size: 0.82rem; font-weight: 500; padding: 0.45rem 0.85rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); }
.rchip.act { background: var(--blue-050); border-color: #d5e2fb; color: var(--blue-600); font-weight: 600; }
.rarrow { display: flex; justify-content: center; color: var(--ink-3); margin: 0.9rem 0; }

/* faixa de fluxo horizontal (passos conectados) */
.fstrip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.4rem, 4vw, 3.4rem); background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.fstrip.f5 { grid-template-columns: repeat(5, 1fr); }
.fstep { position: relative; padding: clamp(1.3rem, 2.4vw, 1.7rem); border-left: 1px solid var(--line); }
.fstep:first-child { border-left: 0; }
.fstep::after { content: ""; position: absolute; top: 50%; right: -7px; width: 13px; height: 13px; background: #fff; border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); z-index: 2; }
.fstep:last-child::after { display: none; }
.fstep .fic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 0.9rem; background: var(--blue-050); color: var(--blue); }
.fstep .fic.ok { background: var(--ok-050); color: var(--ok); }
.fstep h4 { font-size: 0.98rem; font-weight: 600; }
.fstep p { font-size: 0.82rem; color: var(--ink-3); margin-top: 0.3rem; line-height: 1.45; }
.fstat { display: inline-block; margin-top: 0.8rem; font-size: 0.62rem; font-weight: 700; border-radius: 5px; padding: 3px 7px; color: var(--ok); background: var(--ok-050); }
.fstat.b { color: var(--blue-600); background: var(--blue-050); }
@media (max-width: 62rem) { .fstrip, .fstrip.f5 { grid-template-columns: 1fr 1fr; } .fstep:nth-child(3) { border-left: 0; } .fstep:nth-child(n+3) { border-top: 1px solid var(--line); } .fstep:nth-child(2)::after { display: none; } }
@media (max-width: 40rem) { .fstrip, .fstrip.f5 { grid-template-columns: 1fr; } .fstep { border-left: 0; border-top: 1px solid var(--line); } .fstep:first-child { border-top: 0; } .fstep::after { display: none; } }

/* embed do reel (so o Comercial usa) */
.jreel-embed { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #eef1f5; box-shadow: 0 30px 60px -40px rgba(20, 22, 27, .35), 0 10px 24px -16px rgba(20, 22, 27, .12); }
.jreel-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* grade de 3 cards com mini-visual (relatorios) */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(2.4rem, 4vw, 3.4rem); background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.relc { background: #fff; padding: 1.6rem 1.5rem; }
.relc .rvis { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 1rem; min-height: 92px; }
.relc h4 { font-size: 1rem; font-weight: 600; }
.relc p { color: var(--ink-3); font-size: 0.88rem; margin-top: 0.25rem; }
.winrate { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.03em; }
.winrate small { font-size: 0.7rem; color: var(--ink-3); font-weight: 500; }
.mbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 6px; }
.mbar .t { height: 6px; border-radius: 4px; background: var(--blue); }
.mbar span { font-size: 0.6rem; color: var(--ink-3); }
@media (max-width: 62rem) { .rel { grid-template-columns: 1fr; } }

/* grade generica de cards (icone + titulo + texto), reaproveitando o visual dos modulos */
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(2.4rem, 4vw, 3.4rem); background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.fcards.c2 { grid-template-columns: repeat(2, 1fr); }
.fcard { background: #fff; padding: 1.6rem 1.5rem; }
.fcard .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-050); color: var(--blue); display: grid; place-items: center; margin-bottom: 0.9rem; }
.fcard h4 { font-size: 1rem; font-weight: 600; }
.fcard p { color: var(--ink-3); font-size: 0.9rem; margin-top: 0.3rem; line-height: 1.5; }
@media (max-width: 62rem) { .fcards, .fcards.c2 { grid-template-columns: 1fr; } }