/* =========================================================================
   Alice — Landing comercial (reformulada)
   Mantido da pagina anterior, na essencia: as ONDAS entre secoes (.wsep) e a LUZ que
   corre pela costura de cada onda (.wsep-light). Todo o resto foi redesenhado.
   Mobile primeiro. Sem dependencia externa alem da fonte (Google Fonts, ja permitida na CSP).
   ========================================================================= */

:root {
  --brand: #d97706;          /* laranja da Alice (destaques, ondas, luz) */
  --brand-strong: #b45309;   /* laranja com contraste para texto/botao sobre claro */
  --brand-deep: #7c2d12;
  --brand-soft: #f59e0b;
  --brand-050: #fffbeb;
  --brand-100: #fef3c7;

  --ink: #231a12;
  --ink-soft: #5e5042;       /* contraste >= 7:1 sobre creme/branco */
  --ink-faint: #8a7b6b;

  --cream: #fff7ea;
  --bg: #ffffff;
  --bg-alt: #fffaf2;
  --card: #ffffff;
  --border: #efe4d3;
  --dark: #24150b;
  --dark-2: #34200f;
  --on-dark: #fbeedd;
  --on-dark-soft: #d9c3a8;

  --ok: #15803d;
  --no: #b91c1c;

  --shadow-sm: 0 1px 2px rgba(35, 26, 18, 0.06), 0 6px 16px rgba(35, 26, 18, 0.05);
  --shadow-md: 0 10px 30px rgba(124, 45, 18, 0.14);
  --shadow-lg: 0 28px 70px rgba(124, 45, 18, 0.22);

  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 3px; border-radius: 8px; }
.on-dark :focus-visible, .dark :focus-visible { outline-color: #ffd199; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
section { padding: 64px 0; position: relative; }
@media (min-width: 900px) { section { padding: 96px 0; } }
.bg-alt { background: var(--bg-alt); }
.bg-cream { background: var(--cream); }
.dark { background: var(--dark); color: var(--on-dark); }
.dark .lead, .dark p { color: var(--on-dark-soft); }

/* ---------- Ondas entre as secoes (preservado) ---------- */
/* Cada divisor: fundo = cor da secao de cima (--from), onda preenchida com a cor da secao de baixo (--to). */
.wsep {
  position: relative;
  height: clamp(40px, 9vw, var(--h, 88px));
  background: var(--from, #fff);
  line-height: 0;
  overflow: hidden;
  margin-top: -1px;
}
.wsep svg { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 100%; display: block; }
.wsep path { fill: var(--to, #fff); }

/* "Luz correndo" sobre a curva do divisor: o <svg class="wsep-light"> e irmao do divisor, depois dele no markup, e cai por cima da costura.
   Dois <path> na MESMA curva aberta: um trilho quase invisivel e um brilho que corre via stroke-dashoffset. Nada morfa. */
:root { --wl-from: #ffe6bd; --wl-via: #ffb457; --wl-to: #ff7d33; }
.wsep-light { pointer-events: none; -webkit-user-select: none; user-select: none; }
.wsep-light.is-flip { transform: scaleX(-1); }
.wsep .wsep-light path { fill: none; stroke-linecap: round; }
.wsep-light.on-amber { --wl-from: #ffffff; --wl-via: #fff3e0; --wl-to: #ffffff; }
.wsep-light.on-amber .wsep-rail { opacity: 0.22; }
.wsep-light.on-amber .wsep-glow { opacity: 0.7; }
.wsep-rail { opacity: 0.12; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wsep-glow {
  opacity: 0.45;
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--wl-dash, 16) calc(100 - var(--wl-dash, 16));
  animation: snake-dash var(--wl-dur, 7s) linear infinite;
  filter: drop-shadow(0 0 3px var(--wl-via));
}
.wsep-light.is-rtl .wsep-glow { animation-direction: reverse; }
@keyframes snake-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
/* fora da tela, ou com o controle "pausar animacoes": a luz para (economiza CPU e atende a quem prefere sem movimento) */
.js .wsep:not(.is-visible) .wsep-glow, .no-motion .wsep-glow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .wsep-rail, .wsep-glow { animation: none; }
  .wsep-glow { opacity: 0; }
}

/* ---------- Tipografia de secao ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-strong); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; }
.dark .eyebrow { color: #ffc27a; }
.dark .eyebrow::before { background: #ffb457; }
.section-head { max-width: 760px; margin: 0 0 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(1.75rem, 4.6vw, 2.75rem); }
.section-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; max-width: 62ch; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.dark .section-head p { color: var(--on-dark-soft); }
.hl { color: var(--brand-strong); }
.dark .hl { color: #ffb457; }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--brand-strong); color: #fff; box-shadow: 0 8px 22px rgba(180, 83, 9, 0.32); }
.btn-primary:hover { background: #9a4507; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(180, 83, 9, 0.4); }
.btn-ghost { background: transparent; color: var(--ink); border-color: #d9c8b2; }
.btn-ghost:hover { border-color: var(--brand-strong); color: var(--brand-strong); transform: translateY(-2px); }
.dark .btn-ghost, .btn-ghost.on-dark { color: var(--on-dark); border-color: #6b4a2c; }
.dark .btn-ghost:hover, .btn-ghost.on-dark:hover { border-color: #ffb457; color: #ffd199; }
.btn-light { background: #fff; color: var(--brand-deep); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-wa { background: #166534; color: #fff; }
.btn-wa:hover { background: #14532d; transform: translateY(-2px); }
.btn-lg { min-height: 54px; padding: 14px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.75; cursor: progress; transform: none; }
.link-quiet { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; font-size: 0.95rem; }
.link-quiet:hover { color: var(--brand-strong); }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cabecalho ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 242, 0.0); border-bottom: 1px solid transparent;
  transition: background-color .25s, box-shadow .25s, border-color .25s, backdrop-filter .25s;
}
.header.scrolled { background: rgba(255, 250, 242, 0.92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: var(--border); box-shadow: 0 6px 24px rgba(35,26,18,.06); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand img { height: 36px; width: auto; }
.nav-links { display: none; list-style: none; gap: 26px; }
.nav-links a { font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); padding: 8px 2px; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-actions { display: none; align-items: center; gap: 18px; }
.nav-toggle { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.header.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.open .nav-toggle span:nth-child(2) { opacity: 0; }
.header.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; border-top: 1px solid var(--border); background: #fffaf2; padding: 12px 20px 20px; }
.header.open .mobile-menu { display: block; animation: fade-down .25s var(--ease); }
.mobile-menu a { display: block; padding: 14px 4px; font-weight: 500; border-bottom: 1px solid var(--border); }
.mobile-menu .btn { margin-top: 16px; width: 100%; border-bottom: 2px solid transparent; }
.mobile-menu .client-link { text-align: center; border: 0; color: var(--ink-soft); font-size: .95rem; }
@keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { background: var(--bg-alt); padding: 28px 0 56px; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 760px; max-height: 760px; background: radial-gradient(closest-side, rgba(245,158,11,.22), rgba(245,158,11,0)); pointer-events: none; }
.hero-grid { display: grid; gap: 40px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(2.15rem, 8.4vw, 3.9rem); font-weight: 800; letter-spacing: -0.025em; }
.hero .lead { margin-top: 18px; font-size: clamp(1.02rem, 2.6vw, 1.2rem); color: var(--ink-soft); max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-points { display: grid; gap: 10px; margin-top: 28px; list-style: none; font-size: .95rem; color: var(--ink-soft); }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; }
.hero-points svg { flex: none; margin-top: 4px; color: var(--ok); }
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-visual { animation: rise .9s .15s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .hero { padding: 56px 0 84px; }
  .hero-grid { grid-template-columns: 1.02fr 1fr; gap: 56px; }
}

/* mockup do painel + conversa (demonstracao ilustrativa) */
.demo-note { margin-top: 10px; font-size: .78rem; color: var(--ink-faint); display: flex; gap: 8px; align-items: center; }
.dark .demo-note { color: #b79c7e; }
.demo-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.mock { position: relative; }
.mock-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden;
  animation: floaty 9s ease-in-out infinite;
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f8efe1; border-bottom: 1px solid var(--border); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0cfb6; display: block; }
.mock-bar span { margin-left: 10px; font-size: .72rem; color: var(--ink-faint); font-weight: 500; }
.mock-body { display: grid; grid-template-columns: 1fr; min-height: 300px; }
.mock-list { border-bottom: 1px solid var(--border); padding: 12px; display: grid; gap: 8px; align-content: start; background: #fffdf9; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: .8rem; border: 1px solid transparent; min-width: 0; }
.mock-row > div { min-width: 0; flex: 1 1 auto; }
.mock-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row.active { background: var(--brand-050); border-color: #f6dca8; }
.mock-row .av { width: 30px; height: 30px; border-radius: 50%; background: #f3e1c4; color: var(--brand-deep); display: grid; place-items: center; font-weight: 700; font-size: .72rem; flex: none; }
.mock-row b { display: block; font-size: .8rem; }
.mock-row small { color: var(--ink-faint); font-size: .7rem; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #f6ebd9; color: var(--brand-deep); white-space: nowrap; }
.tag.warn { background: #fde7c4; color: #7c3a05; }
.tag.ok { background: #dff3e4; color: #14532d; }
.tag.dark { background: #3f2a17; color: #ffd199; }
.chat { padding: 14px; display: grid; gap: 8px; align-content: start; background: #fdf6ea; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.chat-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--border); }
.chat-head b { font-size: .85rem; display: block; line-height: 1.2; }
.chat-head small { font-size: .7rem; color: var(--ink-faint); }
.bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: .84rem; line-height: 1.45; box-shadow: 0 1px 2px rgba(35,26,18,.08); }
.bubble.them { background: #fff; border-top-left-radius: 4px; justify-self: start; }
.bubble.alice { background: #ffe8c2; border-top-right-radius: 4px; justify-self: end; }
.bubble small { display: block; margin-top: 3px; font-size: .64rem; color: var(--ink-faint); text-align: right; }
.chat-hint { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.js .chat [data-step] { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .chat [data-step].on { opacity: 1; transform: none; }
.typing { display: none; justify-self: end; gap: 4px; padding: 10px 14px; background: #ffe8c2; border-radius: 14px; }
.typing.on { display: inline-flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-strong); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.js .mock:not(.is-visible) .mock-panel, .no-motion .mock-panel { animation-play-state: paused; }
@media (min-width: 640px) {
  .mock-body { grid-template-columns: 200px 1fr; }
  .mock-list { border-bottom: 0; border-right: 1px solid var(--border); }
}

/* ---------- Dor ---------- */
.pain-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pain {
  background: var(--dark-2); border: 1px solid #4a3017; border-radius: var(--radius); padding: 20px;
  transition: transform .25s var(--ease), border-color .25s, background-color .25s;
}
.pain:hover { transform: translateY(-4px); border-color: #b45309; background: #3b2511; }
.pain .ico { width: 44px; height: 44px; border-radius: 12px; background: #4a3017; color: #ffb457; display: grid; place-items: center; margin-bottom: 14px; }
.pain h3 { font-size: 1.05rem; color: #fff; }
.pain p { margin-top: 8px; font-size: .94rem; color: var(--on-dark-soft); }
.pain-foot { margin-top: 28px; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed #6b4a2c; color: var(--on-dark); font-size: 1.02rem; }
@media (min-width: 640px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pain-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- Jornada ---------- */
.journey { position: relative; margin-top: 8px; }
.journey-track { position: absolute; left: 21px; top: 18px; bottom: 18px; width: 3px; background: #ead9bf; border-radius: 3px; }
.journey-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(var(--brand), var(--brand-soft)); border-radius: 3px; transform-origin: top; transform: scaleY(var(--p, 0)); }
.journey-steps { list-style: none; display: grid; gap: 18px; position: relative; }
.jstep { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; align-content: start; }
.jstep .dot { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid #ead9bf; display: grid; place-items: center; font-weight: 700; color: var(--ink-faint); transition: border-color .4s, background-color .4s, color .4s, transform .4s var(--ease); z-index: 1; }
.jstep.done .dot { border-color: var(--brand); background: var(--brand-strong); color: #fff; transform: scale(1.06); }
.jstep h3 { font-size: 1.12rem; padding-top: 8px; }
.jstep p { margin-top: 4px; color: var(--ink-soft); font-size: .95rem; }
@media (min-width: 960px) {
  .journey-track { left: 6%; right: 6%; top: 21px; bottom: auto; width: auto; height: 3px; }
  .journey-fill { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .journey-steps { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .jstep { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 10px; }
  .jstep h3 { padding-top: 0; font-size: 1.02rem; }
}
.two-modes { display: grid; gap: 16px; margin-top: 44px; }
.mode { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.mode h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 12px; }
.mode .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-100); color: var(--brand-strong); display: grid; place-items: center; flex: none; }
.mode p { margin-top: 10px; color: var(--ink-soft); }
.mode ul { margin-top: 14px; list-style: none; display: grid; gap: 8px; font-size: .94rem; }
.mode li { display: flex; gap: 10px; }
.mode li::before { content: ""; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.mode .ex { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt); border: 1px solid var(--border); font-size: .9rem; color: var(--ink-soft); }
.mode .ex b { color: var(--ink); }
@media (min-width: 800px) { .two-modes { grid-template-columns: 1fr 1fr; } }

/* ---------- Demonstracao: abas ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tab {
  flex: none; scroll-snap-align: start; min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid #d9c8b2; background: #fff; font-weight: 600; font-size: .92rem; color: var(--ink-soft);
  transition: background-color .2s, color .2s, border-color .2s, transform .18s var(--ease);
}
.tab:hover { border-color: var(--brand-strong); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.tabpanel { margin-top: 12px; display: none; }
.tabpanel.active { display: grid; gap: 22px; animation: tab-in .45s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tab-copy h3 { font-size: 1.35rem; }
.tab-copy p { margin-top: 10px; color: var(--ink-soft); }
.tab-copy ul { margin-top: 14px; list-style: none; display: grid; gap: 9px; }
.tab-copy li { display: flex; gap: 10px; font-size: .95rem; }
.tab-copy li svg { flex: none; margin-top: 4px; color: var(--ok); }
.tab-copy .badge-proto { margin-top: 16px; }
.badge-proto { display: inline-flex; gap: 8px; align-items: center; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fdecc9; color: #6b3306; }
.screen { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-md); overflow: hidden; }
.screen-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #f8efe1; border-bottom: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.screen-body { padding: 16px; display: grid; gap: 10px; }
.kan { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.kcol { background: #fbf4e8; border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.kcol h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.kcard { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .78rem; }
.kcard small { color: var(--ink-faint); display: block; }
.cal { display: grid; gap: 6px; }
.cal-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: stretch; font-size: .78rem; }
.cal-row time { color: var(--ink-faint); padding-top: 8px; font-weight: 600; }
.cal-slot { border-radius: 10px; padding: 8px 10px; background: #fbf4e8; border: 1px dashed #e3d1b4; color: var(--ink-faint); }
.cal-slot.busy { background: #ffe8c2; border: 1px solid #f3cf8e; color: var(--brand-deep); border-style: solid; font-weight: 600; }
.cal-slot.block { background: #efe9e1; border-style: solid; border-color: #ddd2c3; }
.rem-list { display: grid; gap: 10px; }
.rem { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font-size: .84rem; }
.rem .when { padding: 4px 10px; border-radius: 999px; background: var(--brand-100); font-weight: 700; font-size: .72rem; color: var(--brand-deep); white-space: nowrap; }
.rem q { display: block; quotes: none; color: var(--ink-soft); margin-top: 4px; }
.cfg { display: grid; gap: 10px; }
.cfg-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: .86rem; background: #fff; }
.cfg-item b { display: block; font-size: .86rem; }
.cfg-item small { color: var(--ink-faint); }
.switch { width: 40px; height: 22px; border-radius: 999px; background: var(--brand); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.switch.off { background: #d9ccba; } .switch.off::after { right: auto; left: 3px; }
.skel { display: grid; gap: 8px; }
.skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f3e7d3 25%, #fbf3e4 50%, #f3e7d3 75%); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }
.no-motion .skel i { animation: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
.rep-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.rep { border: 1px dashed #dcc8a8; border-radius: 14px; padding: 14px; background: #fffdf9; }
.rep h4 { font-size: .86rem; } .rep p { font-size: .78rem; color: var(--ink-faint); margin: 4px 0 10px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.bars i { flex: 1; border-radius: 6px 6px 0 0; background: #f0dfc2; }
@media (min-width: 900px) {
  .tabpanel.active { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
  .rep-grid { grid-template-columns: repeat(3, 1fr); }
  .kan { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .tabpanel.active { animation: none; } .skel i { animation: none; } }

/* ---------- Recursos ---------- */
.res-grid { display: grid; gap: 16px; }
.res-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.res-card .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-100); color: var(--brand-strong); display: grid; place-items: center; margin-bottom: 14px; }
.res-card h3 { font-size: 1.25rem; }
.res-card .benefit { margin-top: 6px; color: var(--ink-soft); font-size: .98rem; }
.res-card ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.res-card li { display: flex; gap: 10px; font-size: .93rem; align-items: flex-start; }
.res-card li svg { flex: none; margin-top: 5px; color: var(--ok); }
.cond { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f6ebd9; color: #7c3a05; vertical-align: 1px; white-space: nowrap; }
.res-more { margin-top: 14px; }
.acc { border-top: 1px solid var(--border); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; font-weight: 600; min-height: 48px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-100); display: grid; place-items: center; color: var(--brand-strong); transition: transform .3s var(--ease); }
.acc[open] summary .chev { transform: rotate(180deg); }
.acc summary:hover { color: var(--brand-strong); }
.acc .acc-body { overflow: hidden; }
.acc .acc-body > div { padding: 0 2px 16px; color: var(--ink-soft); font-size: .95rem; }
@media (min-width: 860px) { .res-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .res-card:last-child { grid-column: span 2; } }
@media (min-width: 1100px) { .res-grid { grid-template-columns: repeat(6, 1fr); } .res-card, .res-card:last-child { grid-column: span 2; } .res-card.wide { grid-column: span 3; } }
.res-foot { margin-top: 24px; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Segmentos ---------- */
.seg-wrap { display: grid; gap: 20px; }
.seg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #d9c8b2; background: #fff; font-weight: 500; font-size: .92rem; color: var(--ink);
  transition: background-color .2s, border-color .2s, color .2s, transform .18s var(--ease);
}
.chip:hover { border-color: var(--brand-strong); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.seg-detail { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); min-height: 260px; }
.seg-detail h3 { font-size: 1.4rem; }
.seg-list { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; }
.seg-cols { display: grid; gap: 14px; margin-top: 18px; }
.seg-box { padding: 14px 16px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--border); }
.seg-box h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-strong); margin-bottom: 6px; }
.seg-box p { font-size: .94rem; color: var(--ink); }
.seg-foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.seg-note { margin-top: 16px; font-size: .86rem; color: var(--ink-soft); padding: 12px 14px; border-radius: 12px; background: #fdf1d6; }
.seg-detail.swap { animation: tab-in .4s var(--ease); }
@media (min-width: 900px) { .seg-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Personalizacao ---------- */
.ctl-grid { display: grid; gap: 14px; }
.ctl { background: var(--dark-2); border: 1px solid #4a3017; border-radius: var(--radius); padding: 18px 20px; }
.ctl h3 { font-size: 1.02rem; color: #fff; display: flex; gap: 10px; align-items: center; }
.ctl h3 svg { color: #ffb457; flex: none; }
.ctl p { margin-top: 8px; font-size: .92rem; }
.ctl-split { display: grid; gap: 28px; }
.rule-mock { background: #fff; color: var(--ink); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-lg); display: grid; gap: 10px; }
.rule-mock .cfg-item { background: #fffaf2; }
@media (min-width: 900px) { .ctl-split { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .ctl-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Implantacao / confianca ---------- */
.steps { display: grid; gap: 14px; counter-reset: s; }
.step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; position: relative; box-shadow: var(--shadow-sm); }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-strong); color: #fff; font-weight: 700; margin-bottom: 12px; }
.step h3 { font-size: 1.1rem; } .step p { margin-top: 6px; color: var(--ink-soft); font-size: .94rem; }
.trust { margin-top: 36px; display: grid; gap: 14px; }
.trust-item { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.trust-item svg { flex: none; color: var(--brand-strong); margin-top: 3px; }
.trust-item b { display: block; } .trust-item p { color: var(--ink-soft); font-size: .93rem; margin-top: 2px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } .trust { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Planos ---------- */
.plan-box { display: grid; gap: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); }
.plan-box h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.plan-box p { color: var(--ink-soft); margin-top: 10px; }
.factors { list-style: none; display: grid; gap: 12px; }
.factors li { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--border); }
.factors svg { flex: none; color: var(--brand-strong); margin-top: 2px; }
.factors b { display: block; font-size: .95rem; } .factors span { font-size: .88rem; color: var(--ink-soft); }
@media (min-width: 900px) { .plan-box { grid-template-columns: 1fr 1fr; padding: 44px; gap: 44px; align-items: center; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq .acc { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 0 18px; }
.faq .acc summary { padding: 16px 0; }

/* ---------- Fechamento + formulario ---------- */
.final { background: var(--dark); color: var(--on-dark); overflow: clip; }
.final::before { content: ""; position: absolute; left: -10%; bottom: -30%; width: 60vw; height: 60vw; max-width: 640px; max-height: 640px; background: radial-gradient(closest-side, rgba(217,119,6,.28), rgba(217,119,6,0)); pointer-events: none; }
.final-grid { display: grid; gap: 36px; position: relative; }
.final h2 { font-size: clamp(1.9rem, 5.4vw, 3rem); }
.final .lead { margin-top: 14px; color: var(--on-dark-soft); max-width: 50ch; font-size: 1.05rem; }
.final ul { margin-top: 20px; list-style: none; display: grid; gap: 10px; color: var(--on-dark); font-size: .98rem; }
.final li { display: flex; gap: 10px; } .final li svg { flex: none; margin-top: 4px; color: #ffb457; }
.form-card { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: 1.3rem; }
.form-card .sub { color: var(--ink-soft); font-size: .93rem; margin-top: 4px; }
.form { margin-top: 18px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; }
.field .opt { font-weight: 400; color: var(--ink-faint); font-size: .8rem; }
.field input, .field select {
  width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #cdb99f; background: #fff; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input:hover, .field select:hover { border-color: #a98c66; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.22); }
.field [aria-invalid="true"] { border-color: var(--no); background: #fff7f7; }
.err { color: var(--no); font-size: .84rem; font-weight: 500; min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 14px 16px; border-radius: 12px; font-size: .94rem; }
.form-status[hidden] { display: none; }
.form-status.ok { background: #e2f5e8; color: #14532d; border: 1px solid #a9dcb7; }
.form-status.fail { background: #fdeaea; color: #7f1d1d; border: 1px solid #f1b5b5; }
.privacy { font-size: .82rem; color: var(--ink-soft); }
.privacy a { text-decoration: underline; text-underline-offset: 3px; color: var(--brand-strong); font-weight: 600; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: .85rem; }
.or::before, .or::after { content: ""; height: 1px; flex: 1; background: var(--border); }
@media (min-width: 960px) { .final-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .form-card { padding: 32px; } }

/* ---------- Rodape ---------- */
.footer { background: #1a0f07; color: var(--on-dark-soft); padding: 40px 0 120px; font-size: .92rem; }
.footer-grid { display: grid; gap: 22px; }
.footer img { height: 34px; width: auto; }
.footer a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: #ffd199; }
.footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.motion-toggle { background: transparent; border: 1px solid #5a3d22; color: var(--on-dark); border-radius: 999px; padding: 8px 16px; min-height: 40px; font-size: .86rem; }
.motion-toggle:hover { border-color: #ffb457; }
@media (min-width: 800px) { .footer { padding-bottom: 48px; } .footer-grid { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- CTA fixo mobile ---------- */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 10px; transform: translateY(140%); transition: transform .35s var(--ease); pointer-events: none; }
.sticky-cta.show { transform: none; pointer-events: auto; }
.sticky-cta .btn { flex: 1; min-height: 50px; box-shadow: 0 10px 30px rgba(35,26,18,.3); }
.sticky-cta .btn-wa { flex: none; width: 54px; padding: 0; }
@media (min-width: 800px) { .sticky-cta { display: none; } }

/* ---------- Revelar ao rolar (conteudo visivel sem JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.from-left { transform: translateX(-30px); } .js .reveal.from-right { transform: translateX(30px); }
.js .reveal.from-left.in, .js .reveal.from-right.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.from-left, .js .reveal.from-right { opacity: 1; transform: none; transition: none; }
  .hero-copy > *, .hero-visual { animation: none; }
  .mock-panel { animation: none; }
  .js .chat [data-step] { opacity: 1; transform: none; transition: none; }
  .typing { display: none !important; }
  .journey-fill { transition: none; }
  .tabpanel.active, .seg-detail.swap, .header.open .mobile-menu { animation: none; }
}
/* controle manual "pausar animacoes" */
.no-motion .hero-copy > *, .no-motion .hero-visual { animation: none; }
.no-motion .js .reveal, .no-motion.js .reveal { opacity: 1; transform: none; transition: none; }
.no-motion .typing { display: none !important; }
.no-motion.js .chat [data-step] { opacity: 1; transform: none; transition: none; }
.no-motion .tabpanel.active, .no-motion .seg-detail.swap { animation: none; }

/* ---------- sem JavaScript: tudo continua legivel ---------- */
html:not(.js) .tabs { display: none; }
html:not(.js) .tabpanel { display: grid; margin-top: 28px; }
html:not(.js) .tabpanel[hidden] { display: grid; }
.seg-static { display: grid; gap: 10px; }
.seg-static[hidden] { display: none; }
.seg-static .acc { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 0 18px; }
.seg-static .acc-body p { margin-top: 8px; }
.seg-chips[hidden], .seg-wrap[hidden] { display: none; }
.badge-proto { margin-top: 16px; }
p.badge-proto { display: inline-flex; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fdecc9; color: #6b3306; }
span.badge-proto { margin: 0 0 4px; }
.mock-row .av, .jstep .dot { flex: none; }
.jstep .dot { font-family: inherit; }
.res-card ul li > span { min-width: 0; }
.rem-list { display: grid; gap: 10px; }
.switch { display: inline-block; }

/* cartoes brancos dentro de secoes escuras mantem o texto escuro */
.dark .form-card p, .dark .rule-mock p { color: var(--ink-soft); }
.dark .form-card .or { color: var(--ink-faint); }
.dark .form-card .privacy a { color: var(--brand-strong); }
.dark .badge-proto { color: #6b3306; }

/* ---------- Hero com imagem de fundo (hero.png) e textos em HTML por cima ---------- */
.hero { padding: 0; background: var(--bg-alt); overflow: clip; }
.hero::before { display: none; }
.hero-bg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 0.82; object-fit: cover; object-position: 80% 50%; order: 2; }
.hero { display: flex; flex-direction: column; }
.hero .container { order: 1; }
.hero-grid { display: block; padding-top: 20px; padding-bottom: 8px; }
.hero-copy { max-width: 36rem; }
.hero .eyebrow { color: #8a5a3c; letter-spacing: .22em; font-weight: 500; }
.hero .eyebrow::before { display: none; }
.hero h1 { color: #3b1d0d; }
.hero .hl { color: #c2410c; }
.hero .lead { color: #6b4a38; }
.hero-note { position: absolute; right: 20px; bottom: 12px; margin: 0; color: #8a7060; }
@media (min-width: 960px) {
  .hero { display: block; position: relative; min-height: clamp(560px, 56.3vw, 900px); }
  .hero-bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: right center; }
  .hero-grid { position: relative; display: flex; align-items: center; min-height: clamp(560px, 56.3vw, 900px); padding-top: clamp(150px, 16vw, 230px); padding-bottom: 60px; }
  .hero-copy { max-width: min(46%, 40rem); }
  .hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
  .hero-note { right: 32px; bottom: 18px; }
  /* o logo ja esta na imagem de fundo: no topo da pagina o do cabecalho fica oculto (volta ao rolar) */
  .header:not(.scrolled) .brand { visibility: hidden; }
  .header { position: fixed; left: 0; right: 0; }
}
@media (min-width: 960px) {
  .hero { height: clamp(540px, 56.25vw, 900px); min-height: 0; }
  .hero .container { max-width: none; padding-left: 3.2vw; padding-right: 3.2vw; }
  .hero-grid { min-height: 0; height: 100%; align-items: flex-start; padding-top: clamp(96px, 12.4vw, 200px); padding-bottom: 0; }
  .hero-copy { max-width: min(44vw, 40rem); }
  .hero h1 { font-size: clamp(2.2rem, 3.95vw, 3.7rem); }
  .hero .lead { font-size: clamp(1rem, 1.35vw, 1.2rem); max-width: 34ch; }
  .hero-cta { margin-top: 1.6vw; flex-wrap: nowrap; }
  .hero-cta .btn-lg { white-space: nowrap; }
}
/* hero v2: imagem puxada para a direita (o logo embutido na arte fica recortado; o do cabecalho aparece) e texto sem sobrepor os aparelhos */
@media (min-width: 960px) {
  .header:not(.scrolled) .brand { visibility: visible; }
  .hero-bg { inset: 0 0 0 auto; width: 62%; height: 100%; object-fit: cover; object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%); mask-image: linear-gradient(to right, transparent 0, #000 14%); }
  .hero-copy { max-width: 36vw; }
  .hero h1 { font-size: clamp(2rem, 3.25vw, 3.5rem); }
  .hero .lead { font-size: clamp(.95rem, 1.2vw, 1.15rem); max-width: 30ch; }
  .hero-cta { flex-wrap: wrap; }
  .hero-grid { padding-top: clamp(104px, 10vw, 170px); }
}
/* a onda seguinte sobe sobre a base do hero: a curva escura cobre a frase "Demonstracao ilustrativa" */
.hero + .wsep { background: transparent !important; margin-top: calc(-1 * clamp(40px, 9vw, 96px)); position: relative; z-index: 3; }
.hero-note { z-index: 1; bottom: 8px; }
/* hero v3: o recorte comeca antes do celular e o esmaecido fica so na borda, para nao "lavar" o aparelho */
@media (min-width: 960px) {
  .hero-bg { width: 66%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%); mask-image: linear-gradient(to right, transparent 0, #000 6%); }
}

/* logo no hero (acima do eyebrow); o cabecalho fica sem logo na pagina inicial */
.hero-logo { display: inline-block; margin-bottom: 18px; }
.hero-logo img { height: clamp(44px, 4.6vw, 64px); width: auto; }
.header.no-brand .nav { justify-content: flex-end; gap: 28px; }
@media (min-width: 960px) { .header.no-brand .nav-links { margin-right: auto; margin-left: 0; } .header.no-brand .nav { justify-content: flex-end; } .header.no-brand .nav-links { margin-right: 0; } }
@media (max-width: 959px) { .hero-grid { padding-top: 12px; } }
@media (min-width: 960px) {
  .hero-grid { padding-top: clamp(76px, 6.4vw, 110px); }
  .hero .lead { max-width: 36ch; }
  .hero-logo { margin-bottom: 14px; }
  .hero-cta { margin-top: 1.2vw; }
}
/* logo e eyebrow em linhas proprias, alinhados a esquerda com o resto do texto */
.hero-logo { display: block; width: max-content; }
.hero .eyebrow { display: flex; justify-content: flex-start; text-align: left; }

/* cartoes flutuantes sobre a arte (decorativos; so no desktop, posicionados como na referencia) */
.hero-floats { display: none; }
@media (min-width: 960px) {
  .hero-floats { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .float-card {
    position: absolute; width: 15vw; max-width: 270px; padding: 1.1vw 1.2vw 1.3vw; border-radius: 1.2vw; background: rgba(255, 250, 244, .94);
    box-shadow: 0 1.4vw 3.4vw rgba(124, 45, 18, .16), 0 2px 6px rgba(124, 45, 18, .06); display: grid; grid-template-columns: auto 1fr; column-gap: .9vw; align-items: center;
    animation: float-card 7s ease-in-out infinite;
  }
  .float-card b { font-size: clamp(.8rem, 1.2vw, 1.15rem); line-height: 1.15; color: #2b1608; font-weight: 600; }
  .float-card .fc-ico { color: #c2410c; display: grid; place-items: center; }
  .float-card .fc-ico svg { width: clamp(24px, 2.3vw, 38px); height: auto; }
  .float-card i { grid-column: 1 / -1; display: block; height: .55vw; min-height: 6px; border-radius: 99px; background: #eadfd2; margin-top: .9vw; }
  .float-card i.s { width: 62%; margin-top: .6vw; }
  .fc-1 { left: 41vw; top: 11.4%; }
  .fc-2 { left: 83.2vw; top: 69.5%; animation-delay: -3.2s; }
  .hero:not(.is-visible) .float-card, .no-motion .float-card { animation-play-state: paused; }
}
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7vw); } }
@media (prefers-reduced-motion: reduce) { .float-card { animation: none !important; } }

/* marca em texto no hero ("alice."), como na referencia */
.hero-logo { font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.8rem); letter-spacing: -0.045em; line-height: 1; color: #2b1608; margin-bottom: 18px; }
.hero-logo span { color: #d9500f; }
.hero-logo img { display: none; }
@media (min-width: 960px) { .fc-1 { left: 37vw; } }

/* barra superior: links com respiro e "Ja sou cliente" como botao secundario no lugar do CTA */
.header .nav { min-height: 76px; }
@media (min-width: 960px) {
  .header.no-brand .nav { justify-content: flex-end; gap: 44px; padding-top: 6px; padding-bottom: 6px; }
  .header .nav-links { gap: 36px; }
  .header .nav-links a { font-size: .98rem; padding: 10px 2px; }
  .header .nav-actions { gap: 0; }
}
.btn-outline-nav { min-height: 44px; padding: 8px 24px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1.5px solid #c9a98a; color: var(--ink); font-weight: 600; font-size: .95rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-outline-nav:hover { border-color: var(--brand-strong); color: var(--brand-strong); background: #fff; transform: translateY(-1px); }
.mobile-menu .btn-ghost { width: 100%; margin-top: 16px; }

/* botao flutuante de WhatsApp (abre a conversa; nao envia nada) */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 58px; height: 58px; border-radius: 50%; background: #166534; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(22,101,52,.4), 0 2px 6px rgba(0,0,0,.2); transition: transform .2s var(--ease), box-shadow .2s, opacity .25s; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px rgba(22,101,52,.5), 0 2px 6px rgba(0,0,0,.2); }
.wa-float:active { transform: scale(.97); }
.wa-float.hide { opacity: 0; pointer-events: none; transform: translateY(12px); }
.sticky-cta { right: 90px; }
@media (min-width: 800px) { .wa-float { right: 28px; bottom: 28px; width: 62px; height: 62px; } }

/* "7 dias gratis": selo evidente (hero, planos, formulario) */
.trial-badge { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff3e2; border: 1.5px solid #f0c48a; box-shadow: 0 6px 18px rgba(217,119,6,.18); }
.trial-badge .tb-num { background: linear-gradient(135deg, #c2410c, #d97706); color: #fff; font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.35rem); letter-spacing: -.01em; padding: 6px 16px; border-radius: 999px; white-space: nowrap; }
.trial-badge .tb-txt { color: #5a3416; font-weight: 600; font-size: clamp(.82rem, 1vw, .95rem); }
.trial-badge--lg .tb-num { font-size: 1.5rem; padding: 8px 20px; }
.form-card .trial-badge { margin-bottom: 14px; }
.final li b { color: #ffcf99; }
@media (min-width: 960px) { .hero .trial-badge { margin-bottom: 1.2vw; } }
@media (min-width: 960px) {
  .hero .btn-lg { font-size: .98rem; padding: 10px 22px; min-height: 50px; white-space: nowrap; }
  .hero-cta { flex-wrap: nowrap; gap: 10px; margin-top: .6vw; }
  .hero .trial-badge { margin-bottom: .8vw; margin-top: .4vw; }
  .hero .lead { margin-top: 12px; }
}

/* "Sua empresa. Seu jeito de atender." - vitrine com a arte do painel, cartao flutuante e atalhos (nao e um hero: titulo centralizado acima) */
.stage { position: relative; margin: 8px auto 36px; max-width: 1100px; border-radius: 28px; overflow: hidden; background: #fbeee0; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.stage > img { display: block; width: 100%; height: auto; }
.stage-pop { position: absolute; right: 4.5%; top: 7%; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px; border-radius: 18px; background: rgba(255,250,244,.96); color: #2b1608; box-shadow: 0 14px 34px rgba(124,45,18,.22); animation: float-card 7s ease-in-out infinite; }
.stage-pop b { font-size: clamp(.85rem, 1.5vw, 1.25rem); font-weight: 600; }
.stage-pop .sp-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #c2410c; color: #c2410c; flex: none; }
.stage-pills { list-style: none; position: absolute; left: 4%; top: 36%; display: grid; gap: 14px; }
.stage-pills li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px; background: rgba(255,250,244,.88); border: 1.5px solid #e7c9ad; color: #2b1608; font-weight: 500; font-size: clamp(.8rem, 1.35vw, 1.1rem); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(124,45,18,.1); white-space: nowrap; }
.stage-pills li svg { color: #c2410c; flex: none; }
.stage .demo-note { position: absolute; left: 4%; bottom: 14px; margin: 0; color: #8a7060; }
.ctl-grid--row { grid-template-columns: 1fr; }
@media (min-width: 700px) { .ctl-grid--row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ctl-grid--row { grid-template-columns: repeat(5, 1fr); } .ctl-grid--row .ctl h3 { font-size: .98rem; } }
@media (max-width: 759px) {
  .stage { border-radius: 20px; }
  .stage > img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 78% 50%; }
  .stage-pop { right: 4%; top: 5%; padding: 8px 14px 8px 10px; }
  .stage-pop .sp-ico { width: 30px; height: 30px; border-radius: 9px; }
  .stage-pop .sp-ico svg { width: 18px; height: 18px; }
  .stage-pills { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: #fff7ea; }
  .stage-pills li { padding: 9px 14px; font-size: .88rem; }
  .stage .demo-note { position: static; padding: 0 14px 12px; background: #fff7ea; }
}
@media (prefers-reduced-motion: reduce) { .stage-pop { animation: none; } }
.no-motion .stage-pop { animation: none; }

/* ---------- Jornada em S, fixada no centro: o fundo nao se mexe; o caminho tracejado e os checkpoints aparecem conforme a rolagem (desktop) ---------- */
.s-journey { display: none; }
html.sj-on .s-journey { display: block; height: 560vh; position: relative; margin-top: 24px; }
html.sj-on .journey { display: none; }
.sj-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 70px; }
.sj-eyebrow { margin: 0 0 6px; }
.sj-map { position: relative; height: calc(100vh - 150px); max-height: 760px; aspect-ratio: 1000 / 700; max-width: 100%; }
.sj-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sj-list { list-style: none; position: absolute; inset: 0; }
.sj-ghost { fill: none; stroke: #d9c3a4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 15; opacity: .5; }
.sj-lit { fill: none; stroke: url(#sjGrad); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 15; filter: drop-shadow(0 0 4px rgba(245,158,11,.65)); }
.sj-deco { fill: none; stroke: #e6d2b6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 11; transition: opacity .8s, stroke .8s; opacity: .25; }
.sj-deco.on { opacity: .9; stroke: #f0b878; }
.sj-head { fill: #f59e0b; filter: drop-shadow(0 0 10px rgba(245,158,11,.95)); opacity: 0; transition: opacity .3s; }
.sj-cp { position: absolute; transform: translate(-50%, -50%); width: 0; height: 0; }
.sj-cp .dot { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.82); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; background: #fff; border: 3px solid #e3d3bd; color: #b9a58e; transition: background-color .6s, border-color .6s, color .6s, transform .6s var(--ease), box-shadow .6s; }
.sj-cp.on .dot { background: var(--brand-strong); border-color: #f59e0b; color: #fff; transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 8px rgba(245,158,11,.18), 0 10px 24px rgba(180,83,9,.35); }
.sj-cp .txt { position: absolute; top: 0; width: 21vw; max-width: 270px; min-width: 190px; transform: translateY(-50%) translateY(10px); opacity: .2; filter: blur(1.5px); transition: opacity .7s, filter .7s, transform .7s var(--ease); }
.sj-cp.left .txt { right: 46px; text-align: right; }
.sj-cp.right .txt { left: 46px; text-align: left; }
.sj-cp.on .txt { opacity: 1; filter: none; transform: translateY(-50%); }
.sj-cp .txt h3 { font-size: 1.15rem; }
.sj-cp .txt p { margin-top: 4px; color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }

/* aba "Veja o produto": fundo aquarela e telas de demonstracao em moldura */
.demo-bg { background: #fff7ea url(/assets/background-vejaoproduto.jpg) center / cover no-repeat; }
.shot { margin: 0; border-radius: 24px; overflow: hidden; background: #fdf8f3; box-shadow: 0 28px 70px rgba(124,45,18,.2), 0 0 0 1px rgba(124,45,18,.07); }
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .tabpanel.active { grid-template-columns: 0.72fr 1.28fr; gap: 44px; } }

/* ondas sobre secoes com imagem de fundo: sem faixa de outra cor entre a onda e a imagem */
.wsep { --wh: clamp(40px, 9vw, var(--h, 88px)); }
.wsep.over { background: transparent !important; position: relative; z-index: 3; }
.wsep.over-before { margin-bottom: calc(var(--wh) * -1); }
.wsep.over-after { margin-top: calc(var(--wh) * -1); }
.demo-bg { padding-top: calc(var(--wh-pad, 90px) + 40px); padding-bottom: calc(var(--wh-pad, 90px) + 20px); }
/* sem a fresta de 1px no topo da onda sobreposta (era ela que deixava a imagem aparecer como uma linha) */
.wsep.over { margin-top: 0; }
.wsep.over-before svg { top: -2px; bottom: auto; height: calc(100% + 2px); }
.wsep.over-before { overflow: visible; }
.wsep.over-before svg:first-child { clip-path: inset(0 0 0 0); }
.wsep.over-after svg { top: 0; bottom: -2px; height: calc(100% + 2px); }

/* ---------- Segmentos: carrossel de cards ---------- */
.seg-stage { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; padding: 6px 2px 14px; -webkit-overflow-scrolling: touch; }
.seg-ring { display: flex; gap: 12px; }
.seg-card { flex: 0 0 auto; width: 190px; scroll-snap-align: center; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: #fff; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm, 0 2px 8px rgba(80,40,0,.06)); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .25s, box-shadow .25s, background-color .25s; }
.seg-card .sc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; background: #fdf1d6; color: var(--brand-strong); }
.seg-card b { font-size: 1rem; line-height: 1.25; }
.seg-card small { color: var(--ink-soft); font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seg-card:hover { border-color: var(--brand-strong); }
.seg-card[aria-pressed="true"] { border-color: var(--brand-strong); background: #fff8ec; box-shadow: 0 10px 28px rgba(180,83,9,.22); }
.seg-card[aria-pressed="true"] .sc-ico { background: var(--brand-strong); color: #fff; }
.seg-card:focus-visible, .seg-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.seg-ctrl { display: flex; justify-content: center; align-items: center; gap: 10px; }
.seg-btn { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.seg-btn:hover { border-color: var(--brand-strong); }
.seg-wrap { gap: 12px; }
.seg-3d .seg-pause { display: inline-block; }
.seg-wrap:not(.seg-3d) .seg-pause { display: none; }
.seg-3d .seg-stage { display: block; perspective: 1200px; overflow: hidden; height: 250px; padding: 0; }
.seg-3d .seg-ring { display: block; position: relative; width: 210px; height: 190px; margin: 28px auto 0; transform-style: preserve-3d; will-change: transform; }
.seg-3d .seg-card { position: absolute; left: 0; top: 0; width: 210px; height: 190px; transform: rotateY(var(--a)) translateZ(var(--seg-r)); backface-visibility: visible; }
.seg-3d .seg-card.front { box-shadow: 0 14px 34px rgba(180,83,9,.2); }
.seg-3d .seg-detail { margin-top: 4px; }

.seg-card .sc-art { display: grid; place-items: center; height: 72px; border-radius: 12px; position: relative; overflow: hidden; }
.seg-card .sc-art::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -26px; top: -34px; background: rgba(255,255,255,.18); }
.seg-card .sc-art svg { position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.seg-card[aria-pressed="true"] .sc-art { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-strong); }
.seg-3d .seg-stage { height: 290px; }
.seg-3d .seg-ring { height: 230px; }
.seg-3d .seg-card { height: 230px; }
.seg-3d .seg-stage { perspective: 1900px; height: 310px; border-radius: var(--radius-lg); }
.seg-3d .seg-ring { width: 230px; height: 240px; margin-top: 34px; }
.seg-3d .seg-card { width: 230px; height: 240px; }
.seg-3d .seg-card { height: 205px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.seg-3d .seg-ring { height: 205px; }
.seg-3d .seg-stage { height: 280px; }

/* ---------- Profundidade: sombra suave projetada pela curva de cada onda sobre a secao vizinha ---------- */
.wsep > svg:first-child path { filter: drop-shadow(0 -7px 9px rgba(70, 35, 5, .2)); }
.wsep.over-before > svg:first-child path { filter: drop-shadow(0 7px 9px rgba(70, 35, 5, .22)); }

/* a onda de baixo entra POR CIMA do fim da imagem (a imagem termina dentro da curva, sem borda reta) e a flor do canto fica visivel */
.wsep.over-after { margin-top: calc(var(--wh) * -1); }
.demo-bg { background-position: 8% 50%; padding-bottom: calc(var(--wh, 84px) + 60px); }

/* Personalizacao: imagem maior, sem a faixa de legenda (cortada embaixo) e todos os beneficios dentro dela */
.stage { width: min(1280px, calc(100vw - 32px)); max-width: none; margin-left: calc(50% - min(640px, 50vw - 16px)); }
.stage > img { aspect-ratio: 1600 / 800; object-fit: cover; object-position: 50% 0; }
.stage-pills { top: 22%; gap: 12px; }
@media (max-width: 699px) { .stage { width: auto; margin-left: auto; } }
.foot-logo { display: inline-block; font-weight: 700; font-size: 2.2rem; letter-spacing: -0.045em; line-height: 1; color: #fff; }
.foot-logo span { color: #ff7d33; }

/* botao principal do hero em verde (mesmo verde do WhatsApp flutuante; branco sobre #166534 tem contraste alto) */
.hero .btn-primary[data-cta="hero-principal"] { background: #166534; border-color: #166534; color: #fff; box-shadow: 0 12px 28px rgba(22,101,52,.35); }
.hero .btn-primary[data-cta="hero-principal"]:hover { background: #14532d; border-color: #14532d; box-shadow: 0 16px 34px rgba(22,101,52,.45); }
@media (min-width: 700px) { .stage-pills { top: 7%; gap: 9px; } .stage-pills li { padding: 8px 18px; font-size: clamp(.78rem, 1.2vw, 1rem); } }

/* ---------- "Sem a Alice": secao em tons de vermelho, com X, alertas e animacao ---------- */
.dor-red { background: radial-gradient(800px 360px at 88% 28%, rgba(220,38,38,.26), transparent 70%), radial-gradient(640px 360px at 6% 72%, rgba(153,27,27,.32), transparent 70%), #1c0b0b; position: relative; overflow: hidden; }
.dor-red .eyebrow { color: #ff8a80; }
.dor-red .eyebrow::before { background: #ef4444; }
.dor-red .hl { color: #ff6b5e; text-shadow: 0 0 28px rgba(239,68,68,.45); }
.dor-red .pain { background: linear-gradient(160deg, #2a1010, #1f0c0c); border: 1px solid #5c1f1f; position: relative; overflow: hidden; }
.dor-red .pain::after { content: ""; position: absolute; inset: 0; background: radial-gradient(220px 120px at 100% 0, rgba(239,68,68,.2), transparent 70%); pointer-events: none; }
.dor-red .pain:hover { background: linear-gradient(160deg, #351313, #240e0e); border-color: #ef4444; box-shadow: 0 14px 40px rgba(220,38,38,.22); }
.dor-red .pain .ico { background: #4a1616; color: #ff8a80; }
.dor-red .pain h3 { color: #fff; }
.pain-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #dc2626; color: #fff; box-shadow: 0 0 0 4px rgba(220,38,38,.2), 0 6px 16px rgba(220,38,38,.45); z-index: 1; }
.pain-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(220,38,38,.16); border: 1px solid rgba(239,68,68,.45); color: #ffb4ac; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pain-tag i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: pain-blink 1.4s ease-in-out infinite; }
@keyframes pain-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
@keyframes pain-stamp { 0% { transform: scale(2.4) rotate(-25deg); opacity: 0; } 55% { transform: scale(.88) rotate(6deg); opacity: 1; } 75% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes pain-ring { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.55), 0 6px 16px rgba(220,38,38,.45); } 100% { box-shadow: 0 0 0 16px rgba(220,38,38,0), 0 6px 16px rgba(220,38,38,.45); } }
@keyframes pain-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.js .dor-red .pain .pain-x { opacity: 0; }
.js .dor-red .pain.in .pain-x { animation: pain-stamp .6s cubic-bezier(.2,.9,.3,1.2) .5s both, pain-ring 2.4s ease-out 1.3s infinite; }
.js .dor-red .pain.in { animation: pain-shake .5s ease .35s 1; }
.dor-red .pain:hover .pain-x { transform: rotate(90deg); transition: transform .35s var(--ease); }
.dor-red .pain-foot { border-color: #7f2a2a; background: rgba(220,38,38,.08); }
@media (prefers-reduced-motion: reduce) { .js .dor-red .pain.in, .js .dor-red .pain.in .pain-x, .pain-tag i { animation: none; } .js .dor-red .pain .pain-x { opacity: 1; } }
.no-motion .dor-red .pain.in, .no-motion .dor-red .pain.in .pain-x, .no-motion .pain-tag i { animation: none !important; }
.no-motion .dor-red .pain .pain-x { opacity: 1; }

/* ---------- "Com a Alice": secao positiva em verde, com selo de ok, etiquetas e movimento suave ---------- */
.rec-green { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f1faf3 38%, #ecf8ef 62%, #fff 100%); }
.rec-green > .container { position: relative; z-index: 1; }
.rec-green .eyebrow { color: #15803d; }
.rec-green .eyebrow::before { background: #22c55e; }
.hl-green { color: #15803d; background: linear-gradient(transparent 62%, rgba(34,197,94,.22) 62%); padding: 0 .08em; }
.rg-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); background: radial-gradient(circle at 35% 35%, rgba(74,222,128,.38), rgba(34,197,94,.08) 70%); animation: rg-float 11s ease-in-out infinite; }
.rg-o1 { width: 260px; height: 260px; left: -70px; top: 22%; }
.rg-o2 { width: 180px; height: 180px; right: -40px; top: 8%; animation-delay: -4s; animation-duration: 13s; }
.rg-o3 { width: 220px; height: 220px; right: 8%; bottom: 6%; animation-delay: -7s; }
@keyframes rg-float { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14px,-26px,0) scale(1.07); } }
.rec-green .res-card { position: relative; overflow: hidden; border: 1.5px solid #bfe8cb; background: linear-gradient(165deg, #fff 55%, #f0fbf3); box-shadow: 0 10px 30px rgba(22,101,52,.08); }
.rec-green .res-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #16a34a, #4ade80, #16a34a); background-size: 200% 100%; animation: rg-shine 4s linear infinite; }
@keyframes rg-shine { to { background-position: -200% 0; } }
.rec-green .res-card:hover { border-color: #22c55e; box-shadow: 0 18px 44px rgba(22,163,74,.2); }
.rec-green .res-card .ico { background: #dcfce7; color: #15803d; }
.res-ok { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #16a34a; color: #fff; box-shadow: 0 0 0 4px rgba(34,197,94,.18), 0 6px 16px rgba(22,163,74,.4); }
.res-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: #dcfce7; border: 1px solid #86efac; color: #166534; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.res-tag i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 8px #22c55e; animation: pain-blink 1.8s ease-in-out infinite; }
.rec-green .res-card li svg { color: #16a34a; }
@keyframes rg-stamp { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes rg-ring { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5), 0 6px 16px rgba(22,163,74,.4); } 100% { box-shadow: 0 0 0 16px rgba(34,197,94,0), 0 6px 16px rgba(22,163,74,.4); } }
@keyframes rg-tick { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: scale(1); } }
.js .rec-green .res-ok { opacity: 0; }
.js .rec-green .res-card.in .res-ok { animation: rg-stamp .6s cubic-bezier(.2,.9,.3,1.2) .4s both, rg-ring 2.6s ease-out 1.2s infinite; }
.js .rec-green .res-card.in > ul > li svg { animation: rg-tick .45s cubic-bezier(.2,.9,.3,1.3) both; }
.js .rec-green .res-card.in > ul > li:nth-child(1) svg { animation-delay: .6s; }
.js .rec-green .res-card.in > ul > li:nth-child(2) svg { animation-delay: .78s; }
.js .rec-green .res-card.in > ul > li:nth-child(3) svg { animation-delay: .96s; }
@media (prefers-reduced-motion: reduce) { .rg-orb, .rec-green .res-card::before, .res-tag i { animation: none; } .js .rec-green .res-ok { opacity: 1; animation: none !important; } .js .rec-green .res-card.in > ul > li svg { animation: none; } }
.no-motion .rg-orb, .no-motion .rec-green .res-card::before, .no-motion .res-tag i { animation: none; }
.no-motion .rec-green .res-ok { opacity: 1; animation: none !important; }
.no-motion .rec-green .res-card.in > ul > li svg { animation: none !important; }

/* ---------- Implantacao em linguagem simples: 4 passos com linha que se completa, quem faz o que e icones ---------- */
.hl-warm { color: var(--brand-strong); background: linear-gradient(transparent 62%, rgba(245,158,11,.28) 62%); padding: 0 .08em; }
.impl-hint { text-align: center; font-weight: 600; color: var(--ink-soft); margin: 4px 0 18px; }
.steps-flow { position: relative; gap: 16px; }
.steps-flow .step { counter-increment: none; padding: 24px 22px 22px; border: 1.5px solid #f0d9b8; background: linear-gradient(170deg, #fff 60%, #fff8ec); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.steps-flow .step::before { display: none; }
.steps-flow .step:hover { transform: translateY(-5px); border-color: #f59e0b; box-shadow: 0 16px 38px rgba(180,83,9,.16); }
.st-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #f59e0b, #c2410c); color: #fff; box-shadow: 0 10px 24px rgba(194,65,12,.3); margin-bottom: 14px; position: relative; z-index: 1; }
.st-who { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: #fdf1d6; color: #92400e; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.steps-flow .step h3 { font-size: 1.12rem; line-height: 1.3; }
.steps-flow .step p { font-size: .95rem; }
/* linha que liga os passos e se completa ao aparecer */
.steps-flow::before { content: ""; position: absolute; z-index: 0; background: repeating-linear-gradient(90deg, #f59e0b 0 10px, transparent 10px 18px); transform-origin: left center; }
@media (min-width: 800px) {
  .steps-flow::before { left: 12%; right: 12%; top: 52px; height: 3px; transform: scaleX(0); }
  .steps-flow.in::before { transform: scaleX(1); transition: transform 1.8s cubic-bezier(.4,0,.2,1) .3s; }
}
@media (max-width: 799px) {
  .steps-flow::before { left: 51px; top: 40px; bottom: 40px; width: 3px; background: repeating-linear-gradient(180deg, #f59e0b 0 10px, transparent 10px 18px); transform-origin: top center; transform: scaleY(0); }
  .steps-flow.in::before { transform: scaleY(1); transition: transform 1.8s cubic-bezier(.4,0,.2,1) .3s; }
}
@keyframes st-pop { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
.js .steps-flow.in .step .st-ico { animation: st-pop .55s cubic-bezier(.2,.9,.3,1.3) both; }
.js .steps-flow.in .step:nth-child(1) .st-ico { animation-delay: .2s; }
.js .steps-flow.in .step:nth-child(2) .st-ico { animation-delay: .65s; }
.js .steps-flow.in .step:nth-child(3) .st-ico { animation-delay: 1.1s; }
.js .steps-flow.in .step:nth-child(4) .st-ico { animation-delay: 1.55s; }
.js .steps-flow:not(.in) .step .st-ico { transform: scale(.6); }
.impl-end { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px auto 0; padding: 12px 20px; max-width: 720px; border-radius: 999px; background: #dcfce7; border: 1.5px solid #86efac; color: #14532d; font-weight: 600; text-align: center; }
.impl-end .ie-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #16a34a; color: #fff; }
.trust-item { transition: transform .25s var(--ease), box-shadow .25s; }
.trust-item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(180,83,9,.12); }
@media (prefers-reduced-motion: reduce) { .steps-flow::before { transform: none !important; transition: none !important; } .js .steps-flow.in .step .st-ico, .js .steps-flow:not(.in) .step .st-ico { animation: none; transform: none; } }
.no-motion .steps-flow::before { transform: none !important; transition: none !important; }
.no-motion .js .steps-flow .step .st-ico, .no-motion .steps-flow .step .st-ico { animation: none !important; transform: none !important; }

/* ---------- Diferencial: Alice + Meta Ads (tons de azul) ---------- */
.meta-blue { position: relative; overflow: hidden; background: #eaf3ff; }
.meta-blue > .container { position: relative; z-index: 1; }
.meta-blue .eyebrow { color: #1d4ed8; }
.meta-blue .eyebrow::before { background: #3b82f6; }
.hl-blue { color: #1d4ed8; background: linear-gradient(transparent 62%, rgba(59,130,246,.25) 62%); padding: 0 .08em; }
.mb-orb { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, rgba(96,165,250,.4), rgba(59,130,246,.06) 70%); animation: rg-float 12s ease-in-out infinite; }
.mb-o1 { width: 280px; height: 280px; left: -80px; top: 30%; }
.mb-o2 { width: 200px; height: 200px; right: -50px; top: 12%; animation-delay: -5s; }
.mb-stage { display: grid; gap: 14px; margin: 8px 0 34px; align-items: stretch; }
.mb-board, .mb-meta { background: #fff; border: 1.5px solid #bfdbfe; border-radius: 22px; padding: 16px 16px 18px; box-shadow: 0 18px 44px rgba(29,78,216,.14); }
.mb-cap { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1d4ed8; margin-bottom: 10px; }
.mb-cols { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mb-col { background: #f1f7ff; border: 1px solid #dbeafe; border-radius: 12px; padding: 8px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; animation: mb-col 10s infinite; }
.mb-col b { font-size: .7rem; line-height: 1.2; color: #1e3a8a; }
.mb-col i { display: block; height: 26px; border-radius: 8px; background: #dbeafe; }
.mb-col:nth-child(1) { animation-delay: 0s; } .mb-col:nth-child(2) { animation-delay: 2.5s; } .mb-col:nth-child(3) { animation-delay: 5s; } .mb-col:nth-child(4) { animation-delay: 7.5s; }
@keyframes mb-col { 0%, 24% { background: #dbeafe; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.25); } 28%, 100% { background: #f1f7ff; border-color: #dbeafe; box-shadow: none; } }
.mb-run { position: absolute; left: 0; top: 52px; width: calc((100% - 30px) / 4); padding: 8px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.2; box-shadow: 0 10px 22px rgba(37,99,235,.45); animation: mb-travel 10s infinite; }
@keyframes mb-travel { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(calc(100% + 10px)); } 50%, 70% { transform: translateX(calc((100% + 10px) * 2)); } 75%, 95% { transform: translateX(calc((100% + 10px) * 3)); background: linear-gradient(135deg, #16a34a, #15803d); } 100% { transform: translateX(0); } }
.mb-flow { position: relative; display: grid; place-items: center; min-height: 54px; }
.mb-flow svg { width: 100%; height: 40px; overflow: visible; }
.mb-line { fill: none; stroke: #bfdbfe; stroke-width: 3; vector-effect: non-scaling-stroke; }
.mb-dots { fill: none; stroke: #2563eb; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; vector-effect: non-scaling-stroke; animation: mb-dash 1.1s linear infinite; }
@keyframes mb-dash { to { stroke-dashoffset: -16; } }
.mb-sig { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); padding: 6px 12px; border-radius: 999px; background: #1d4ed8; color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; opacity: 0; box-shadow: 0 8px 18px rgba(29,78,216,.4); animation: mb-sig 10s infinite; }
.mb-sig.s1 { animation-delay: 4.9s; } .mb-sig.s2 { animation-delay: 7.4s; background: #15803d; }
@keyframes mb-sig { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 4%, 20% { opacity: 1; transform: translate(-50%, -150%) scale(1); } 26%, 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.mb-camp { display: grid; gap: 12px; }
.mb-camp-name { font-weight: 700; color: #1e3a8a; }
.mb-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 8px; border-radius: 12px; background: #f1f7ff; border: 1px solid #dbeafe; }
.mb-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #60a5fa, #2563eb); transform-origin: bottom; animation: mb-bar 5s ease-in-out infinite; }
.mb-bars i:nth-child(2) { animation-delay: .25s; } .mb-bars i:nth-child(3) { animation-delay: .5s; } .mb-bars i:nth-child(4) { animation-delay: .75s; } .mb-bars i:nth-child(5) { animation-delay: 1s; }
@keyframes mb-bar { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.mb-learn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #dbeafe; color: #1e3a8a; font-size: .84rem; font-weight: 600; }
.mb-learn svg { flex: none; color: #2563eb; }
.mb-steps { list-style: none; display: grid; gap: 14px; }
.mb-steps li { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: #fff; border: 1.5px solid #bfdbfe; box-shadow: 0 8px 22px rgba(29,78,216,.08); transition: transform .25s var(--ease), box-shadow .25s; }
.mb-steps li:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(29,78,216,.18); }
.mb-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; font-weight: 800; }
.mb-steps h3 { font-size: 1.05rem; } .mb-steps p { margin-top: 4px; color: var(--ink-soft); font-size: .93rem; }
.mb-benefits { margin-top: 18px; display: grid; gap: 14px; }
.mb-ben { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: linear-gradient(160deg, #1e40af, #1d4ed8); color: #fff; box-shadow: 0 14px 34px rgba(29,78,216,.3); }
.mb-ben svg { flex: none; color: #93c5fd; margin-top: 3px; }
.mb-ben b { display: block; } .mb-ben p { margin-top: 3px; font-size: .92rem; color: #dbeafe; }
.mb-note { margin: 20px auto 0; max-width: 820px; text-align: center; font-size: .86rem; color: #475f86; }
.mb-cta { margin-top: 18px; text-align: center; }
@media (min-width: 900px) {
  .mb-stage { grid-template-columns: 1.5fr 110px 1fr; gap: 0; }
  .mb-steps { grid-template-columns: repeat(3, 1fr); }
  .mb-benefits { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) { .mb-flow svg { transform: rotate(90deg); width: 60px; height: 40px; } .mb-flow { min-height: 70px; } }
@media (max-width: 520px) { .mb-col b { font-size: .62rem; } .mb-run { font-size: .6rem; padding: 6px; } .mb-board, .mb-meta { padding: 12px; } .mb-cols { gap: 6px; } .mb-run { width: calc((100% - 18px) / 4); } }
@media (prefers-reduced-motion: reduce) { .mb-orb, .mb-col, .mb-run, .mb-dots, .mb-sig, .mb-bars i { animation: none; } .mb-bars i { transform: none; } .mb-sig.s1 { opacity: 1; transform: translate(-50%, -50%); } .mb-sig.s2 { display: none; } }
.no-motion .mb-orb, .no-motion .mb-col, .no-motion .mb-run, .no-motion .mb-dots, .no-motion .mb-sig, .no-motion .mb-bars i { animation: none; }

/* "alice." no menu: aparece (deslizando) quando o logo do hero sai da tela e fica durante o resto do site */
.header .nav { position: relative; }
.brand-dock { position: absolute; left: 20px; top: 50%; font-weight: 700; font-size: 1.9rem; letter-spacing: -0.045em; line-height: 1; color: #2b1608; opacity: 0; transform: translate(-14px, -50%) scale(.9); transform-origin: left center; pointer-events: none; visibility: hidden; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.brand-dock span { color: #d9500f; }
.header.dock-on .brand-dock { opacity: 1; transform: translate(0, -50%) scale(1); pointer-events: auto; visibility: visible; transition-delay: 0s; }
.brand-dock:focus-visible { outline: 3px solid #f59e0b; outline-offset: 4px; border-radius: 6px; }
@media (max-width: 959px) { .brand-dock { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .brand-dock { transition: opacity .01s; transform: translate(0, -50%); } }
.no-motion .brand-dock { transition: none; transform: translate(0, -50%); }

/* fora da tela, as animacoes continuas pausam (economiza CPU/GPU e evita travadas) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ---------- Planos e descontos por periodo ---------- */
.plans-sec { background: linear-gradient(180deg, var(--bg-cream, #fff7ea), #fff4e2); }
.pp-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 8px; padding: 8px; max-width: 760px; background: #fff; border: 1.5px solid #f0d9b8; border-radius: 999px; box-shadow: 0 10px 30px rgba(180,83,9,.1); }
.pp-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; }
.pp-btn em { font-style: normal; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534; }
.pp-btn:hover { background: #fdf1d6; }
.pp-btn[aria-checked="true"] { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; box-shadow: 0 8px 20px rgba(180,83,9,.35); transform: translateY(-1px); }
.pp-btn[aria-checked="true"] em { background: #fff; color: #166534; animation: pc-pop .45s cubic-bezier(.2,.9,.3,1.4); }
.pp-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.pp-note { text-align: center; color: var(--ink-soft); font-size: .92rem; margin-bottom: 22px; min-height: 1.5em; }
.plan-grid { display: grid; gap: 18px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; background: #fff; border: 1.5px solid #f0d9b8; border-radius: 24px; box-shadow: 0 10px 30px rgba(180,83,9,.08); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(180,83,9,.2); border-color: #f59e0b; }
.plan-card.featured { border: 2px solid #d97706; background: linear-gradient(170deg, #fff 55%, #fff6e6); box-shadow: 0 22px 54px rgba(180,83,9,.22); }
.pc-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; background: linear-gradient(135deg, #d97706, #b45309); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 8px 18px rgba(180,83,9,.4); white-space: nowrap; }
.plan-card h3 { font-size: 1.35rem; }
.pc-tag { margin-top: 4px; color: var(--ink-soft); font-size: .92rem; min-height: 2.6em; }
.pc-price { display: grid; gap: 2px; margin: 14px 0 10px; padding: 14px; border-radius: 16px; background: #fff8ec; border: 1px solid #f6e3c3; }
.pc-old { color: #9a7b5a; text-decoration: line-through; font-size: .95rem; }
.pc-now { display: flex; align-items: baseline; gap: 4px; }
.pc-cur { font-weight: 700; color: var(--brand-strong); }
.pc-val { font-size: 2.5rem; line-height: 1; letter-spacing: -.03em; color: #2b1608; font-variant-numeric: tabular-nums; }
.pc-per { color: var(--ink-soft); font-weight: 600; }
.pc-total { font-size: .88rem; color: var(--ink-soft); }
.pc-save { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .8rem; font-weight: 800; animation: pc-pop .45s cubic-bezier(.2,.9,.3,1.4); }
.pc-intro { font-weight: 700; margin: 6px 0 2px; }
.plan-card ul { list-style: none; display: grid; gap: 9px; margin: 12px 0 20px; flex: 1; }
.plan-card li { display: flex; gap: 10px; font-size: .93rem; align-items: flex-start; }
.plan-card li svg { flex: none; margin-top: 4px; color: #16a34a; }
.plan-card .btn { margin-top: auto; }
@keyframes pc-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.disc-box { margin: 30px auto 0; max-width: 980px; padding: 22px; border-radius: 22px; background: #fff; border: 1.5px dashed #e7c28a; }
.disc-box h3 { text-align: center; font-size: 1.15rem; }
.disc-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 12px; }
.disc-list li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; text-align: center; }
.disc-list b { color: #14532d; } .disc-list span { color: #166534; font-weight: 800; font-size: 1.05rem; }
.disc-box p { text-align: center; color: var(--ink-soft); font-size: .88rem; }
.plan-cta { text-align: center; margin-top: 26px; }
@media (min-width: 640px) { .disc-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } .plan-card.featured { transform: translateY(-10px); } .plan-card.featured:hover { transform: translateY(-16px); } .disc-list { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 599px) { .pp-bar { border-radius: 22px; gap: 6px; padding: 6px; } .pp-btn { padding: 0 12px; flex: 1 1 30%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pp-btn[aria-checked="true"] em, .pc-save { animation: none; } }
.no-motion .pp-btn[aria-checked="true"] em, .no-motion .pc-save { animation: none; }
.plans-sec .trial-badge { display: flex; width: max-content; max-width: 100%; margin: 0 auto 16px; justify-content: center; }
@media (min-width: 900px) { .pp-bar { max-width: 980px; flex-wrap: nowrap; gap: 6px; } .pp-btn { padding: 0 14px; white-space: nowrap; } }
@media (max-width: 599px) { .plans-sec .trial-badge { flex-direction: column; gap: 6px; border-radius: 22px; padding: 8px 14px; } }