:root {
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --blue-tint: #EEF3FF;
  --ink: #0F172A;
  --text: #334155;
  --muted: #64748B;
  --line: #E2E8F0;
  --bg: #FFFFFF;
  --bg-alt: #F7F9FC;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
.narrow { width: min(760px, 100% - 40px); }
section { scroll-margin-top: 72px; }
h1, h2, h3 { color: var(--ink); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }
p { margin: 0; }
.center { text-align: center; }
.lead { margin-top: 10px; font-size: 18px; color: var(--muted); }
.lead.center { margin-left: auto; margin-right: auto; max-width: 560px; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px 20px; font: 600 16px "Inter", sans-serif; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #CBD5E1; }
.btn-white { background: #fff; color: var(--blue-dark); }

/* topo */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--ink); }
.nav nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; color: var(--muted); }
.nav nav > a:not(.btn):hover { color: var(--ink); }
.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.langs a { padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.langs a.on { background: var(--ink); color: #fff; }

/* herói */
.hero { padding: 72px 0 64px; background: var(--blue-tint); border-bottom: 1px solid #DCE6FF; }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue-dark); background: #fff; border: 1px solid #D6E2FF; border-radius: 999px; padding: 4px 12px; margin-bottom: 18px; }
.sub { margin-top: 18px; font-size: 19px; color: var(--text); max-width: 520px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.trust { margin-top: 14px; font-size: 14px; color: var(--muted); }
.hero-shot { position: relative; padding-right: 70px; }
.browser { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(15,23,42,.14); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #F1F5F9; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; }
.browser-bar span { margin-left: 12px; font-size: 12px; color: var(--muted); background: #fff; border-radius: 6px; padding: 2px 10px; }
.panel-float { position: absolute; right: 0; top: 40px; width: 31%; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(15,23,42,.18); background: #fff; }

/* seções */
.section { padding: 88px 0; }
.section.alt { background: var(--bg-alt); }
.section h2 + .lead { margin-bottom: 36px; }
#comparativo h2 { margin-bottom: 32px; }

/* antes e depois */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-item { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.cmp-item.on { border: 2px solid var(--blue); }
.cmp-item figcaption { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.cmp-item.on figcaption { color: var(--blue-dark); }
.cmp-item video { display: block; width: 100%; height: auto; }

/* passos */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shot { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-soft { background: var(--blue-tint); padding: 14px; }
img.crop-top { object-position: top center; }
img.crop-bottom { object-position: bottom center; }
img.contain { object-fit: contain; }
.n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; margin: 18px 0 8px; }
.steps p { margin-top: 6px; color: var(--muted); font-size: 16px; }

/* recursos (bento) */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 22px; background: #fff; }
.card.wide { grid-column: span 2; }
.card-shot { height: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 16px; background: #fff; }
.card-shot img { width: 100%; height: 100%; object-fit: cover; }
.card-shot.soft { background: var(--blue-tint); padding: 14px; border-color: transparent; }
.card-shot.dark { background: #15141c; }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card p { margin-top: 6px; color: var(--muted); font-size: 16px; }
.card.text-only { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
.card.text-only svg { color: var(--blue); margin-bottom: auto; }
.pro { font-size: 11px; font-weight: 600; color: #92400E; background: #FEF3C7; border-radius: 6px; padding: 2px 7px; letter-spacing: 0; }

/* para quem */
.who { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.who div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.who p { margin-top: 6px; color: var(--muted); font-size: 16px; }

/* preços */
.plans { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: #fff; }
.plan.best { border: 2px solid var(--blue); box-shadow: 0 16px 40px rgba(37,99,235,.14); }
.tag { position: absolute; top: -12px; left: 22px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.price { margin-top: 12px; font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.note { font-size: 14px; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 8px; align-content: start; flex: 1; font-size: 15px; }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: "✓"; color: var(--blue); font-weight: 700; }
.plan li.off { color: #94A3B8; }
.plan li.off::before { content: "–"; color: #CBD5E1; }
.plan .btn { width: 100%; }
.fine { margin-top: 20px; font-size: 14px; color: var(--muted); }
.fine a { text-decoration: underline; }

/* dúvidas */
.faq { margin-top: 28px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 4px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--muted); }

/* chamada final */
.band { background: var(--blue); color: #fff; padding: 72px 0; }
.band-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.band h2 { color: #fff; max-width: 640px; }
.band-mascote { width: 96px; height: auto; }

.foot { border-top: 1px solid var(--line); padding: 28px 0; font-size: 14px; color: var(--muted); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--ink); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 500; font-size: 14px; transition: .25s ease; z-index: 30; }
.toast.on { opacity: 1; transform: translateX(-50%); }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .steps, .bento { grid-template-columns: 1fr 1fr; }
  .card.wide { grid-column: span 2; }
  .who, .plans { grid-template-columns: 1fr 1fr; }
  .hide-sm { display: none; }
}
@media (max-width: 640px) {
  .hero { padding-top: 40px; }
  .hero-shot { padding-right: 0; }
  .panel-float { display: none; }
  .cmp-grid, .steps, .bento, .who, .plans { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
  .section { padding: 64px 0; }
  .nav nav { gap: 10px; }
}

.shot img.contain, .card-shot img.contain { object-fit: contain; }

/* aproxima a parte que importa de cada print */
.shot img.zoom-top { object-fit: cover; object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 0; }
.shot img.zoom-bottom { object-fit: cover; object-position: 50% 100%; transform: scale(1.7); transform-origin: 38% 100%; }
.card-shot img.zoom-bottom-wide { object-fit: cover; object-position: 50% 100%; transform: scale(1.35); transform-origin: 45% 100%; }
.card-shot img.cursor-crop { object-fit: cover; object-position: 50% 42%; border-radius: 8px; }
.card.text-only.wide { min-height: 0; }
.btn { white-space: nowrap; }

/* ---- três passos animados (por cima dos prints reais) ---- */
.anim { position: relative; }
.anim .a-cur { position: absolute; width: 20px; height: 24px; z-index: 3; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.a-ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(114,85,241,.45); opacity: 0; z-index: 2; }
/* passo 1: cursor clica na página e os passos aparecem */
.a1 .a-cur { animation: a1cur 6s ease-in-out infinite; }
.a1 .r1 { left: 30%; top: 22%; animation: a1r1 6s infinite; }
.a1 .r2 { left: 55%; top: 70%; animation: a1r2 6s infinite; }
.a-steps { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 5px; z-index: 3; }
.a-steps span { background: #7255F1; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 7px; opacity: 0; transform: translateY(6px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.a-steps .c1 { animation: a1c1 6s infinite; } .a-steps .c2 { animation: a1c2 6s infinite; } .a-steps .c3 { animation: a1c3 6s infinite; }
@keyframes a1cur { 0% { left: 70%; top: 60%; } 20%, 28% { left: 30%; top: 22%; } 50%, 58% { left: 55%; top: 70%; } 75% { left: 75%; top: 45%; } 100% { left: 70%; top: 60%; } }
@keyframes a1r1 { 0%, 21% { opacity: 0; transform: scale(.4); } 24% { opacity: 1; } 34%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes a1r2 { 0%, 51% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; } 64%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes a1c1 { 0%, 24% { opacity: 0; transform: translateY(6px); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes a1c2 { 0%, 40% { opacity: 0; transform: translateY(6px); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes a1c3 { 0%, 72% { opacity: 0; transform: translateY(6px); } 76%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* passo 2: cabecinha anda, ↑, aparece a faixa e a tela aproxima */
.a-page { position: absolute; inset: 0; overflow: hidden; }
.a-page img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 62% 40%; animation: a2zoom 6s ease-in-out infinite; }
.a-tl { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; background: #20202a; border-radius: 10px; padding: 7px 8px; z-index: 3; }
.a-play { width: 20px; height: 20px; border-radius: 6px; background: #34344a; color: #fff; font-size: 8px; display: grid; place-items: center; }
.a-rail { position: relative; flex: 1; height: 4px; border-radius: 4px; background: #45455e; }
.a-head { position: absolute; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #7255F1; animation: a2head 6s ease-in-out infinite; }
.a-band { position: absolute; top: -18px; left: 42%; width: 0; height: 12px; border-radius: 4px; background: #FFC94D; color: #20202a; font: 700 8px/12px Inter, sans-serif; font-style: normal; text-align: center; overflow: hidden; animation: a2band 6s ease-in-out infinite; }
.a-add { background: #7255F1; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.a-key { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 2px solid #b9aef0; border-bottom-width: 4px; color: #5D3FE0; font-weight: 800; display: grid; place-items: center; z-index: 3; animation: a2key 6s infinite; }
@keyframes a2head { 0% { left: 4%; } 35%, 100% { left: 42%; } }
@keyframes a2key { 0%, 38%, 50%, 100% { transform: translateY(0); border-bottom-width: 4px; } 42%, 46% { transform: translateY(2px); border-bottom-width: 2px; } }
@keyframes a2band { 0%, 40% { width: 0; } 55%, 92% { width: 40%; } 100% { width: 0; } }
@keyframes a2zoom { 0%, 42% { transform: scale(1); } 60%, 88% { transform: scale(1.7); } 100% { transform: scale(1); } }
/* passo 3: clica em Baixar MP4 e aparece o arquivo salvo */
.a3 .a-cur { animation: a3cur 5s ease-in-out infinite; }
.a3 .r3 { left: 41%; top: 87%; animation: a3r 5s infinite; }
.a-toast { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -10px); background: #0F172A; color: #fff; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; z-index: 3; animation: a3toast 5s infinite; }
.a-toast b { color: #4ADE80; }
@keyframes a3cur { 0% { left: 78%; top: 30%; } 35%, 45% { left: 41%; top: 87%; } 80% { left: 70%; top: 55%; } 100% { left: 78%; top: 30%; } }
@keyframes a3r { 0%, 37% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 50%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes a3toast { 0%, 45% { opacity: 0; transform: translate(-50%, -10px); } 52%, 90% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .anim * { animation: none !important; } }

/* ---- paleta (referência "Captain Rufus"): azul vivo, amarelo, rosa, céu, ameixa e creme ---- */
:root {
  --blue: #2186EB;
  --blue-dark: #1668C9;
  --blue-tint: #DDF2FE;
  --sky: #8FD8FA;
  --yellow: #FFC857;
  --pink: #EE5D86;
  --plum: #8C4A6E;
  --peri: #5A68D8;
  --cream: #FFF7E6;
  --ink: #1F2A44;
  --bg-alt: #FFF7E6;
}
.hero { background: var(--blue-tint); border-bottom: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); background: #fff; border: 0; box-shadow: 0 1px 2px rgba(18,36,90,.08), 0 4px 14px rgba(33,134,235,.10); padding: 6px 14px 6px 6px; font-size: 14px; }
.eb-ic { display: inline-flex; gap: 4px; }
.eb-ic svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--blue); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eb-ic svg + svg { background: var(--yellow); stroke: var(--ink); }
.n { background: var(--pink); }
.tag { background: var(--pink); }
.plan.best { border-color: var(--blue); box-shadow: 0 16px 40px rgba(33,134,235,.18); }
.pro { background: var(--yellow); color: #5A3A00; }
.band { background: var(--blue); }
.band h2 { color: var(--yellow); }
.btn-white { color: var(--blue-dark); }
.cmp-item.on { border-color: var(--blue); }
.card.text-only svg { color: var(--pink); }
.card-shot.soft, .shot-soft { background: var(--blue-tint); }
.who div:nth-child(1) { border-top: 4px solid var(--blue); }
.who div:nth-child(2) { border-top: 4px solid var(--yellow); }
.who div:nth-child(3) { border-top: 4px solid var(--pink); }
.who div:nth-child(4) { border-top: 4px solid var(--sky); }
.langs a.on { background: var(--blue); }
.faq summary::after { color: var(--pink); }

/* comparativo com fundo azul escuro */
#comparativo { background: #12245A; }
#comparativo h2 { color: #fff; }
#comparativo .cmp-item { border-color: rgba(255,255,255,.18); }
#comparativo .cmp-item.on { border-color: var(--yellow); }
#comparativo .cmp-item.on figcaption { color: #8A5A00; background: var(--yellow); border-bottom-color: var(--yellow); }

/* herói ilustrado */
.hero-ill { padding-right: 0; }
.hero-art { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; overflow: visible; }

/* tamanho de tela e fundos: demonstrativo animado (9s: iPhone > iPad > notebook) */
.tl-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.tl-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; font-size: 16px; color: var(--text); }
.tl-list li { padding-left: 30px; position: relative; }
.tl-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px; background: var(--yellow); }
.tl-list li:nth-child(2)::before { background: var(--pink); }
.tl-list li:nth-child(3)::before { background: var(--sky); }
.tl-list b { color: var(--ink); }
.tl-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; display: grid; place-items: center; }
.tl-bg { position: absolute; inset: 0; animation: tl-bg 9s infinite; background-color: #fff; background-image: linear-gradient(45deg, #E4E9F2 25%, transparent 25%, transparent 75%, #E4E9F2 75%), linear-gradient(45deg, #E4E9F2 25%, transparent 25%, transparent 75%, #E4E9F2 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; }
@keyframes tl-bg {
  0%, 30% { background-color: #F3F7FC; background-size: 0 0; }
  35%, 63% { background-color: var(--blue); background-size: 0 0; }
  68%, 96% { background-color: #fff; background-size: 24px 24px; }
  100% { background-color: #F3F7FC; background-size: 0 0; }
}
.tl-dev { position: relative; z-index: 1; width: 25%; height: 78%; padding: 1.1%; border-radius: 22px; background: #111; animation: tl-dev 9s infinite cubic-bezier(.6, 0, .2, 1); box-shadow: 0 18px 40px rgba(18, 36, 90, .22); }
@keyframes tl-dev {
  0%, 28% { width: 25%; height: 78%; border-radius: 22px; padding: 1.1%; }
  35%, 61% { width: 46%; height: 84%; border-radius: 18px; padding: 1.3%; }
  68%, 93% { width: 70%; height: 66%; border-radius: 10px; padding: .8%; }
  100% { width: 25%; height: 78%; border-radius: 22px; padding: 1.1%; }
}
.tl-screen { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: #fff; }
.tl-island { position: absolute; z-index: 2; left: 50%; top: 2.5%; width: 34%; height: 4.5%; transform: translateX(-50%); border-radius: 99px; background: #000; animation: tl-island 9s infinite; }
@keyframes tl-island { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
.tl-base { position: absolute; left: -9%; right: -9%; bottom: -6%; height: 6%; border-radius: 0 0 14px 14px; background: #C9D3E3; opacity: 0; animation: tl-base 9s infinite; }
@keyframes tl-base { 0%, 64% { opacity: 0; } 68%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
.tl-page { position: absolute; inset: 0; padding: 14% 9% 0; display: flex; flex-direction: column; gap: 5%; background: var(--blue-tint); }
.tl-page b { display: block; height: 7%; width: 70%; border-radius: 6px; background: var(--ink); }
.tl-page span { display: block; height: 3%; width: 90%; border-radius: 4px; background: #9FB2CC; }
.tl-page span.s { width: 60%; }
.tl-page em { display: block; height: 8%; width: 46%; border-radius: 99px; background: var(--pink); animation: tl-press 3s infinite; }
@keyframes tl-press { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(.92); } }
.tl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; flex: 1; margin-bottom: 8%; }
.tl-cards i { border-radius: 10px; background: #fff; }
.tl-chips { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.tl-chips > span { position: relative; display: grid; }
.tl-chips i { grid-area: 1 / 1; font-style: normal; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: #fff; white-space: nowrap; opacity: 0; animation: tl-chip 9s infinite; }
.tl-fundo i { background: var(--yellow); color: #5A3A00; }
.tl-chips i:nth-child(2) { animation-delay: 3s; }
.tl-chips i:nth-child(3) { animation-delay: 6s; }
@keyframes tl-chip { 0% { opacity: 0; transform: translateY(6px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 1000px) { .tl-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .tl-stage { aspect-ratio: 1 / 1.05; } .tl-chips i { font-size: 11px; padding: 5px 9px; } }
@media (prefers-reduced-motion: reduce) { .tl-bg, .tl-dev, .tl-island, .tl-base, .tl-page em, .tl-chips i { animation: none; } .tl-chips i:first-child { opacity: 1; } }

/* ===== Recursos: animações flat ===== */
.card-shot.an { position: relative; background: var(--blue-tint); border-color: transparent; }
.an i, .an b, .an em, .an span { display: block; font-style: normal; }
.an-cursor { position: absolute; width: 22px; height: 30px; }

/* zoom: a página aproxima no botão enquanto a faixa amarela passa na linha do tempo */
.az-view { position: absolute; left: 18px; right: 18px; top: 16px; bottom: 58px; border-radius: 10px; overflow: hidden; background: #fff; }
.az-page { position: absolute; inset: 0; padding: 16px 20px; transform-origin: 22% 62%; animation: az-zoom 6s infinite cubic-bezier(.6, 0, .2, 1); }
.az-page b { height: 12px; width: 34%; border-radius: 6px; background: var(--ink); margin-bottom: 12px; }
.az-page span { height: 6px; width: 46%; border-radius: 3px; background: #9FB2CC; margin-bottom: 8px; }
.az-page span.s { width: 30%; }
.az-page em { width: 18%; height: 20px; border-radius: 99px; background: var(--pink); margin-top: 12px; }
.az-img { position: absolute; right: 20px; top: 16px; width: 34%; height: 58%; border-radius: 8px; background: linear-gradient(160deg, var(--sky) 55%, var(--blue) 55%); }
.az-cards { position: absolute; left: 20px; right: 20px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.az-cards i { height: 18px; border-radius: 6px; background: var(--cream); }
.an-zoom .an-cursor { left: 21%; top: 58%; animation: az-cur 6s infinite; }
@keyframes az-zoom { 0%, 30% { transform: scale(1); } 40%, 74% { transform: scale(1.9); } 84%, 100% { transform: scale(1); } }
@keyframes az-cur { 0%, 22% { transform: translate(120px, 30px); } 30%, 84% { transform: none; } 100% { transform: translate(120px, 30px); } }
.az-tl { position: absolute; left: 18px; right: 18px; bottom: 12px; height: 34px; border-radius: 10px; background: #12245A; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.az-play { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.az-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.az-seg { position: absolute; left: 33%; width: 44%; top: -9px; height: 14px; border-radius: 5px; background: var(--yellow); color: #5A3A00; font: 800 9px/14px Inter, sans-serif; text-align: center; transform-origin: left; animation: az-seg 6s infinite; }
.az-head { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; animation: az-head 6s infinite linear; }
@keyframes az-head { from { left: 0; } to { left: 100%; } }
@keyframes az-seg { 0%, 28% { transform: scaleX(0); opacity: 0; } 34%, 100% { transform: scaleX(1); opacity: 1; } }

/* cursor: cresce e diminui junto com o controle */
.ac-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 64px; display: grid; place-items: center; }
.ac-ptr { position: relative; width: 22px; height: 30px; animation: ac-size 6s infinite cubic-bezier(.6, 0, .2, 1); }
.ac-ptr .an-cursor { left: 0; top: 0; }
.ac-ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--pink); opacity: 0; animation: ac-ring 6s infinite; }
@keyframes ac-size { 0%, 18% { transform: scale(1.2); } 32%, 52% { transform: scale(2.4); } 66%, 100% { transform: scale(1.8); } }
@keyframes ac-ring { 0%, 52% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(.6); } 64%, 100% { opacity: 0; transform: scale(1.6); } }
.ac-slider { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 40px; border-radius: 12px; background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.ac-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #DCE6F2; }
.ac-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--blue); animation: ac-fill 6s infinite cubic-bezier(.6, 0, .2, 1); }
.ac-thumb { position: absolute; top: -6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--blue); animation: ac-thumb 6s infinite cubic-bezier(.6, 0, .2, 1); }
@keyframes ac-fill { 0%, 18% { width: 25%; } 32%, 52% { width: 85%; } 66%, 100% { width: 55%; } }
@keyframes ac-thumb { 0%, 18% { left: 25%; } 32%, 52% { left: 85%; } 66%, 100% { left: 55%; } }
.ac-val { display: grid; width: 44px; text-align: right; font: 800 13px Inter, sans-serif; color: var(--blue-dark); }
.ac-val i { grid-area: 1 / 1; opacity: 0; animation: ac-v1 6s infinite; }
.ac-val i:nth-child(2) { animation-name: ac-v2; }
.ac-val i:nth-child(3) { animation-name: ac-v3; }
@keyframes ac-v1 { 0%, 22% { opacity: 1; } 26%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-v2 { 0%, 24% { opacity: 0; } 28%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes ac-v3 { 0%, 58% { opacity: 0; } 62%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* sons: clique e scroll fazem barulho */
.an-som { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.as-half { position: relative; border-radius: 12px; background: #fff; overflow: hidden; }
.as-btn { position: absolute; left: 50%; top: 58%; width: 60%; height: 28px; transform: translate(-50%, -50%); border-radius: 99px; background: var(--pink); animation: as-press 2.4s infinite; }
@keyframes as-press { 0%, 40%, 60%, 100% { transform: translate(-50%, -50%) scale(1); } 48% { transform: translate(-50%, -50%) scale(.9); } }
.as-ptr { position: absolute; left: 52%; top: 58%; width: 22px; height: 30px; animation: as-ptr 2.4s infinite; }
.as-ptr .an-cursor { left: 0; top: 0; }
@keyframes as-ptr { 0% { transform: translate(40px, 50px); } 40%, 70% { transform: none; } 100% { transform: translate(40px, 50px); } }
.as-ring { position: absolute; left: 52%; top: 58%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid var(--yellow); opacity: 0; animation: as-ring 2.4s infinite; }
@keyframes as-ring { 0%, 44% { opacity: 0; transform: scale(.3); } 48% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.8); } }
.as-spk { position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.as-spk svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.as-spk svg path:first-child { stroke: none; }
.as-spk .w1, .as-spk .w2 { opacity: .25; }
.as-k1 .w1 { animation: as-w 2.4s infinite .1s; } .as-k1 .w2 { animation: as-w 2.4s infinite .25s; }
.as-k2 .w1 { animation: as-w2 1.2s infinite; } .as-k2 .w2 { animation: as-w2 1.2s infinite .15s; }
@keyframes as-w { 0%, 44% { opacity: .25; } 50%, 66% { opacity: 1; } 76%, 100% { opacity: .25; } }
@keyframes as-w2 { 0%, 100% { opacity: .25; } 40%, 60% { opacity: 1; } }
.as-mouse { position: absolute; left: 50%; top: 58%; width: 44px; height: 66px; transform: translate(-50%, -50%); border-radius: 22px; background: var(--sky); }
.as-mouse::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 26px; background: #fff; }
.as-wheel { position: absolute; left: 50%; top: 10px; width: 8px; height: 14px; margin-left: -4px; border-radius: 4px; background: var(--ink); animation: as-wheel 1.2s infinite; }
@keyframes as-wheel { 0% { transform: translateY(-3px); } 50% { transform: translateY(4px); } 100% { transform: translateY(-3px); } }

/* modo noturno: o painel troca de claro pra escuro */
.an-dark { display: grid; place-items: center; animation: ad-bg 6s infinite; }
@keyframes ad-bg { 0%, 42% { background: var(--blue-tint); } 50%, 92% { background: #0E1530; } 100% { background: var(--blue-tint); } }
.ad-panel { width: 62%; height: 84%; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 9px; animation: ad-panel 6s infinite; }
@keyframes ad-panel { 0%, 42% { background: #fff; } 50%, 92% { background: #1B2240; } 100% { background: #fff; } }
.ad-head { display: flex; align-items: center; gap: 8px; }
.ad-logo { width: 22px; height: 22px; border-radius: 7px; background: var(--blue); }
.ad-head b { flex: 1; height: 8px; border-radius: 4px; max-width: 60px; animation: ad-ink 6s infinite; }
.ad-moon { position: relative; width: 26px; height: 26px; border-radius: 8px; margin-left: auto; animation: ad-btn 6s infinite; }
.ad-sun { position: absolute; inset: 7px; border-radius: 50%; background: var(--yellow); animation: ad-sun 6s infinite; }
.ad-crescent { position: absolute; inset: 6px; border-radius: 50%; box-shadow: inset -5px -2px 0 0 var(--yellow); opacity: 0; animation: ad-cres 6s infinite; }
@keyframes ad-btn { 0%, 42% { background: #EEF4FB; } 50%, 92% { background: #2A3358; } 100% { background: #EEF4FB; } }
@keyframes ad-sun { 0%, 42% { opacity: 1; transform: scale(1); } 48%, 94% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; } }
@keyframes ad-cres { 0%, 44% { opacity: 0; transform: rotate(-40deg); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ad-ink { 0%, 42% { background: var(--ink); } 50%, 92% { background: #E8EEF8; } 100% { background: var(--ink); } }
.ad-red { height: 26px; border-radius: 9px; background: #E5484D; }
.ad-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ad-row i { height: 22px; border-radius: 7px; animation: ad-chip 6s infinite; }
@keyframes ad-chip { 0%, 42% { background: #DDF2FE; } 50%, 92% { background: #27305A; } 100% { background: #DDF2FE; } }
.ad-line { height: 18px; border-radius: 7px; animation: ad-chip 6s infinite; }
.ad-line.s { width: 70%; }
.ad-yellow { margin-top: auto; height: 22px; border-radius: 8px; background: var(--yellow); }

/* qualquer site: a janela troca de loja, painel e blog */
.an-sites { display: grid; place-items: center; }
.aw-win { position: relative; width: 82%; height: 80%; border-radius: 12px; overflow: hidden; background: #fff; }
.aw-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: var(--cream); }
.aw-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.aw-bar i:nth-child(2) { background: var(--yellow); } .aw-bar i:nth-child(3) { background: var(--sky); }
.aw-bar span { margin-left: 8px; height: 9px; width: 40%; border-radius: 5px; background: #fff; }
.aw-pg { position: absolute; left: 0; right: 0; top: 22px; bottom: 0; padding: 12px; opacity: 0; animation: aw-show 9s infinite; }
.aw-p2 { animation-delay: 3s; } .aw-p3 { animation-delay: 6s; }
@keyframes aw-show { 0% { opacity: 0; transform: translateY(8px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
.aw-pg b { height: 10px; width: 40%; border-radius: 5px; background: var(--ink); margin-bottom: 10px; }
.aw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aw-grid i { height: 38px; border-radius: 8px; background: var(--blue-tint); }
.aw-grid i:nth-child(2n) { background: #FCE1EA; }
.aw-p2 { display: flex; gap: 10px; }
.aw-side { width: 22%; border-radius: 8px; background: var(--ink); }
.aw-main { flex: 1; }
.aw-bars { display: flex; align-items: flex-end; gap: 8px; height: 70%; }
.aw-bars i { flex: 1; border-radius: 5px 5px 0 0; background: var(--blue); }
.aw-bars i:nth-child(1) { height: 40%; } .aw-bars i:nth-child(2) { height: 70%; background: var(--yellow); } .aw-bars i:nth-child(3) { height: 55%; } .aw-bars i:nth-child(4) { height: 90%; background: var(--pink); } .aw-bars i:nth-child(5) { height: 65%; }
.aw-p3 span { height: 6px; width: 70%; border-radius: 3px; background: #9FB2CC; margin-bottom: 7px; }
.aw-p3 span.s { width: 45%; }
.aw-photo { height: 42%; border-radius: 8px; background: linear-gradient(160deg, var(--sky) 55%, var(--blue) 55%); margin-top: 8px; }

/* pausas: uma pausa entra entre os passos e muda de 1s pra 2s */
.an-pause { display: grid; place-items: center; }
.ap-list { width: 78%; display: flex; flex-direction: column; }
.ap-step { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 10px; background: #fff; margin-bottom: 8px; }
.ap-ic { width: 18px; height: 18px; border-radius: 6px; background: var(--blue); }
.ap-ic.s { background: var(--sky); }
.ap-step b { height: 7px; width: 50%; border-radius: 4px; background: var(--ink); }
.ap-step b.m { width: 38%; } .ap-step b.l { width: 62%; }
.ap-gap { height: 0; overflow: hidden; animation: ap-gap 6s infinite cubic-bezier(.6, 0, .2, 1); }
@keyframes ap-gap { 0%, 15% { height: 0; } 28%, 90% { height: 40px; } 100% { height: 0; } }
.ap-chip { display: flex !important; align-items: center; gap: 6px; width: max-content; margin: 2px auto 0; padding: 6px 12px; border-radius: 99px; background: var(--yellow); color: #5A3A00; font: 800 13px Inter, sans-serif; }
.ap-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ap-t { display: grid !important; }
.ap-t em { grid-area: 1 / 1; opacity: 0; animation: ap-t1 6s infinite; }
.ap-t em:nth-child(2) { animation-name: ap-t2; }
@keyframes ap-t1 { 0%, 20% { opacity: 0; } 26%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ap-t2 { 0%, 54% { opacity: 0; } 58%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* MP4: o vídeo fica pronto e cai no computador */
.an-mp4 { display: flex; align-items: center; justify-content: center; gap: 18px; }
.am-file { position: relative; width: 84px; height: 104px; border-radius: 12px; background: #fff; padding: 12px 10px; animation: am-file 6s infinite; }
.am-file span { font: 800 14px Inter, sans-serif; color: var(--blue-dark); }
.am-play { width: 0; height: 0; margin: 14px auto 0; border-left: 16px solid var(--pink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.am-prog { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 6px; border-radius: 3px; background: #DCE6F2; overflow: hidden; }
.am-prog i { height: 100%; width: 0; background: var(--blue); animation: am-prog 6s infinite; }
@keyframes am-prog { 0% { width: 0; } 40%, 100% { width: 100%; } }
@keyframes am-file { 0%, 42% { transform: none; opacity: 1; } 58% { transform: translateX(70px) scale(.4); opacity: 0; } 59%, 90% { opacity: 0; transform: none; } 100% { opacity: 1; } }
.am-arrow { width: 26px; height: 26px; border-right: 5px solid var(--ink); border-bottom: 5px solid var(--ink); transform: rotate(-45deg); border-radius: 3px; animation: am-arrow 1.2s infinite; }
@keyframes am-arrow { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
.am-laptop { position: relative; width: 120px; }
.am-scr { height: 76px; border-radius: 10px 10px 0 0; background: var(--ink); display: grid; place-items: center; }
.am-base { height: 10px; margin: 0 -12px; border-radius: 0 0 10px 10px; background: #9FB2CC; }
.am-check { width: 34px; height: 34px; border-radius: 50%; background: #22C55E; position: relative; opacity: 0; transform: scale(.4); animation: am-check 6s infinite; }
.am-check::after { content: ""; position: absolute; left: 12px; top: 7px; width: 8px; height: 15px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(45deg); }
@keyframes am-check { 0%, 56% { opacity: 0; transform: scale(.4); } 62%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* app no Windows: o painel pequeno entra na direita e grava a tela toda */
.aa-desk { position: absolute; inset: 14px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #7CC4F6, var(--blue)); }
.aa-w1, .aa-w2 { position: absolute; border-radius: 8px; background: #fff; }
.aa-w1 { left: 8%; top: 12%; width: 48%; height: 52%; }
.aa-w2 { left: 26%; top: 34%; width: 34%; height: 40%; background: var(--cream); }
.aa-panel { position: absolute; right: 4%; top: 8%; bottom: 22%; width: 22%; border-radius: 8px; background: #fff; padding: 7px; display: flex; flex-direction: column; gap: 6px; animation: aa-panel 6s infinite cubic-bezier(.6, 0, .2, 1); }
@keyframes aa-panel { 0%, 10% { transform: translateX(140%); } 22%, 88% { transform: none; } 100% { transform: translateX(140%); } }
.aa-logo { width: 14px; height: 14px; border-radius: 5px; background: var(--blue); }
.aa-rec { position: absolute; right: 8px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); animation: aa-rec 1s infinite steps(1); }
@keyframes aa-rec { 50% { opacity: .2; } }
.aa-l { height: 6px; border-radius: 3px; background: #DCE6F2; }
.aa-l.s { width: 70%; }
.aa-btn { margin-top: auto; height: 14px; border-radius: 5px; background: var(--yellow); }
.aa-ptr { position: absolute; left: 30%; top: 30%; width: 22px; height: 30px; animation: aa-ptr 6s infinite; }
.aa-ptr .an-cursor { left: 0; top: 0; }
@keyframes aa-ptr { 0%, 25% { transform: none; } 50% { transform: translate(60px, 40px); } 75% { transform: translate(-20px, 50px); } 100% { transform: none; } }
.aa-task { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: rgba(18, 36, 90, .85); display: flex; justify-content: center; align-items: center; gap: 8px; }
.aa-task i { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.aa-task i.on { background: var(--sky); }

@media (prefers-reduced-motion: reduce) { .an * { animation: none !important; } }
.an .ac-val { display: grid; }
.an .as-spk { display: grid; }

/* ===== ferramenta de verdade (fotos reais do painel) ===== */
.rl { position: relative; overflow: hidden; background: var(--blue-tint); border-color: transparent; display: grid; place-items: center; }
.rl img { display: block; }
.rl-cur { position: absolute; width: 22px; height: auto; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.rl-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; background: var(--ink); color: #fff; font: 700 13px Inter, sans-serif; padding: 8px 14px; border-radius: 10px; white-space: nowrap; opacity: 0; animation: rl-toast 5s infinite; }
.rl-toast b { color: #4ADE80; }
@keyframes rl-toast { 0%, 50% { opacity: 0; transform: translate(-50%, 10px); } 56%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
/* passo 1: barra de captura + passos aparecendo */
.rl-cap { align-content: start; padding-top: 12px; gap: 8px; }
.rl-cap .rl-bar { width: 82%; height: auto; }
.rl-list { width: 80%; height: 120px; overflow: hidden; border-radius: 10px; }
.rl-list img { width: 100%; height: auto; clip-path: inset(0 0 100% 0); animation: rl-rows 6s infinite steps(1); }
@keyframes rl-rows { 0% { clip-path: inset(0 0 86% 0); } 25% { clip-path: inset(0 0 72% 0); } 45% { clip-path: inset(0 0 58% 0); } 65% { clip-path: inset(0 0 43% 0); } 85% { clip-path: inset(0 0 29% 0); } }
.rl-cap .rl-cur { left: 70%; top: 70%; animation: rl-curcap 6s infinite; }
@keyframes rl-curcap { 0%, 100% { transform: none; } 20% { transform: translate(-60px, -20px) scale(.9); } 40% { transform: translate(20px, 10px); } 60% { transform: translate(-30px, 20px) scale(.9); } 80% { transform: translate(30px, -10px); } }
/* passo 2 e card de zoom: editor + linha do tempo */
.rl-zoom .rl-ctl, .rl-fzoom .rl-ctl { width: 94%; height: auto; border-radius: 10px; animation: rl-float 4s ease-in-out infinite; }
@keyframes rl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.rl-key { position: absolute; left: 18px; top: 16px; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--blue-dark); font: 800 20px/38px Inter, sans-serif; text-align: center; box-shadow: 0 3px 0 #C9D6EA; animation: rl-key 2s infinite; }
@keyframes rl-key { 0%, 60%, 100% { transform: translateY(0); box-shadow: 0 3px 0 #C9D6EA; } 70% { transform: translateY(3px); box-shadow: 0 0 0 #C9D6EA; } }
.rl-fzoom .rl-cur { left: 44%; top: 56%; animation: rl-curzoom 5s infinite; }
@keyframes rl-curzoom { 0%, 100% { transform: translate(120px, 40px); } 40%, 70% { transform: none; } 50% { transform: scale(.85); } }
/* passo 3: janela de salvar */
.rl-save .rl-sheet { height: 92%; width: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(18,36,90,.15); }
.rl-save .rl-cur { left: 56%; bottom: 22px; animation: rl-cursave 5s infinite; }
@keyframes rl-cursave { 0%, 100% { transform: translate(40px, -60px); } 40%, 60% { transform: none; } 48% { transform: scale(.85); } }
/* cards de painel */
.rl-modal { max-width: 88%; max-height: 90%; width: auto; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(18,36,90,.14); }
.rl-big { position: absolute; right: 18%; bottom: 14%; width: 22px; height: auto; transform-origin: 0 0; animation: rl-big 6s infinite cubic-bezier(.6,0,.2,1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
@keyframes rl-big { 0%, 15% { transform: scale(.9); } 35%, 60% { transform: scale(1.9); } 80%, 100% { transform: scale(1.3); } }
.rl-wave { position: absolute; right: 22px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); animation: rl-wave 1.4s infinite; }
@keyframes rl-wave { 0% { box-shadow: 0 0 0 0 rgba(238,93,134,.6); } 100% { box-shadow: 0 0 0 16px rgba(238,93,134,0); } }
.rl-fdark { place-items: stretch; }
.rl-fdark img { position: absolute; left: 50%; top: 12px; width: 66%; height: auto; transform: translateX(-50%); border-radius: 12px; box-shadow: 0 10px 30px rgba(18,36,90,.18); }
.rl-fdark .rl-d { opacity: 0; animation: rl-dark 6s infinite; }
.rl-fdark { animation: rl-darkbg 6s infinite; }
@keyframes rl-dark { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rl-darkbg { 0%, 40% { background: var(--blue-tint); } 50%, 90% { background: #0E1530; } 100% { background: var(--blue-tint); } }
.rl-fpause { place-items: stretch; }
.rl-scroll { position: absolute; left: 7%; right: 7%; top: 10px; bottom: 0; overflow: hidden; border-radius: 12px 12px 0 0; }
.rl-scroll img { width: 100%; height: auto; animation: rl-scroll 8s ease-in-out infinite; }
@keyframes rl-scroll { 0%, 15% { transform: translateY(0); } 50%, 65% { transform: translateY(-30%); } 100% { transform: translateY(0); } }
.rl-fmp4 .rl-toast { bottom: 18px; }
/* topo: painel ao lado da ilustração */
.hero-ill { position: relative; }
.hero-panel { position: absolute; right: -24px; top: 4%; width: 31%; height: auto; border-radius: 14px; box-shadow: 0 24px 50px rgba(18,36,90,.22); animation: rl-float 5s ease-in-out infinite; }
@media (max-width: 1000px) { .hero-panel { right: 0; } }
@media (max-width: 640px) { .hero-panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .rl *, .rl, .hero-panel { animation: none !important; } .rl-list img { clip-path: none; } .rl-toast { opacity: 1; } }
/* fotos reais: não esticar (vence .card-shot img / .shot img) */
.card-shot.rl img, .shot.rl img { width: auto; height: auto; max-width: 100%; object-fit: contain; }
.rl img.rl-cur, .rl img.rl-big { width: 22px; max-width: none; }
.rl img.rl-bar { width: 82%; }
.rl .rl-list img, .rl .rl-scroll img { width: 100%; }
.rl img.rl-ctl { width: 94%; }
.rl img.rl-modal { max-width: 88%; max-height: 90%; }
.rl img.rl-sheet { height: 92%; width: auto; max-width: none; }
.rl-fdark img.rl-l, .rl-fdark img.rl-d { width: 66%; }
.rl-fsom .rl-modal { max-height: 84%; }
.hero-panel { width: 27%; top: 14%; right: -40px; }
.steps > li { min-width: 0; }
.shot.rl { height: 220px; grid-template-columns: 100%; justify-items: center; }
.card-shot.rl { grid-template-columns: 100%; justify-items: center; }
.rl-save img.rl-sheet { height: 200px; width: auto; }
.rl-cap .rl-list { height: 140px; }
/* bolinha de login (Minha conta) */
.acc-dot { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); border: 1px solid var(--line); transition: .15s; }
.acc-dot:hover { color: var(--blue); border-color: var(--blue); }
.acc-dot.on { background: var(--blue); border-color: var(--blue); color: #fff; font: 800 16px/1 Inter, sans-serif; }
.price s.was { font-size: .5em; color: var(--muted); font-weight: 600; margin-right: 6px; }

/* ===== estilo das referências: turma, cartões macios, pílulas ===== */
:root { --soft: #EEF4FF; --r: 26px; }
.btn { border-radius: 999px; padding: 13px 24px; }
.btn-sm { padding: 9px 16px; }
.btn-primary { box-shadow: 0 10px 24px rgba(33,134,235,.28); }
.btn-ghost { box-shadow: 0 6px 18px rgba(18,36,90,.06); border-color: #E3EAF6; }
header.top { background: rgba(255,255,255,.82); backdrop-filter: blur(10px); }
/* topo centralizado sobre papel quadriculado */
.hero.hero-c { position: relative; padding: 70px 0 0; overflow: hidden; text-align: center;
  background-color: #F4F8FF; background-image: linear-gradient(#E3ECFA 1px, transparent 1px), linear-gradient(90deg, #E3ECFA 1px, transparent 1px); background-size: 48px 48px; background-position: center top; }
.hero-center { display: flex; flex-direction: column; align-items: center; }
.hero-center h1 { max-width: 760px; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; }
.hero-center .sub { margin-left: auto; margin-right: auto; max-width: 560px; }
.hero-center .ctas { justify-content: center; }
.ch-row { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 26px); margin-top: 34px; padding: 0 12px; }
.ch-wrap { width: clamp(110px, 15vw, 190px); }
.ch-row .ch-wrap { margin-bottom: -26px; }
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch-body { transform-origin: 50% 100%; animation: ch-bob 3.2s ease-in-out infinite; }
.c2 .ch-body { animation-delay: -.6s; } .c3 .ch-body { animation-delay: -1.2s; } .c4 .ch-body { animation-delay: -1.8s; } .c5 .ch-body { animation-delay: -2.4s; }
@keyframes ch-bob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-8px) scaleY(1.02); } }
.ch-eye { animation: ch-blink 5s infinite; }
.c2 .ch-eye { animation-delay: 1.3s; } .c3 .ch-eye { animation-delay: 2.1s; } .c4 .ch-eye { animation-delay: .7s; } .c5 .ch-eye { animation-delay: 3.2s; }
@keyframes ch-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.ch-clica .ch-tool { transform-origin: 170px 30px; animation: ch-tap 1.8s ease-in-out infinite; }
@keyframes ch-tap { 0%, 60%, 100% { transform: none; } 70% { transform: translate(-4px, 6px) scale(.92); } }
.ch-zoom .ch-tool { transform-origin: 124px 116px; animation: ch-zoom 3s ease-in-out infinite; }
@keyframes ch-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.ch-rec { animation: ch-rec 1.1s steps(1) infinite; }
@keyframes ch-rec { 50% { opacity: .2; } }
.ch-w1, .ch-w2 { animation: ch-wave 1.2s ease-in-out infinite; } .ch-w2 { animation-delay: .2s; }
@keyframes ch-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ch-mp4 .ch-tool { animation: ch-bob 2.2s ease-in-out infinite; }
/* cartões macios */
.card, .plan, .cmp-item, .faq details { border-radius: var(--r); }
.card { border-color: transparent; box-shadow: 0 14px 40px rgba(33,134,235,.08); }
.card-shot, .shot, .ui-stage { border-radius: 20px !important; }
.section.alt { background: var(--soft); }
.plan { box-shadow: 0 14px 40px rgba(18,36,90,.06); border-color: transparent; }
.plan.best { box-shadow: 0 20px 50px rgba(33,134,235,.22); }
.steps .n { border-radius: 12px; }
/* faixa azul com o mundo de personagens */
.band { position: relative; overflow: hidden; background: #1F6FE5; padding: 90px 0 80px; }
.band .band-inner { position: relative; z-index: 1; }
.band h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.ch-world { position: absolute; inset: 0; pointer-events: none; }
.ch-world .ch-wrap { position: absolute; width: 150px; opacity: .95; }
.ch-world .w0 { left: 2%; top: -30px; transform: rotate(-12deg); } .ch-world .w1 { left: 13%; bottom: -50px; transform: rotate(8deg); }
.ch-world .w2 { right: 3%; top: -24px; transform: rotate(10deg); } .ch-world .w3 { right: 14%; bottom: -46px; transform: rotate(-8deg); width: 120px; }
.ch-world .w4 { left: -30px; top: 40%; width: 120px; } .ch-world .w5 { right: -24px; top: 38%; width: 120px; transform: rotate(14deg); }
.ch-world .w6, .ch-world .w7 { display: none; }
.ch-world .ch-body { animation-duration: 4s; }
@media (max-width: 900px) { .ch-world .w4, .ch-world .w5 { display: none; } .ch-world .ch-wrap { width: 100px; } }
@media (max-width: 640px) { .ch-row .c4, .ch-row .c5 { display: none; } .ch-wrap { width: 30vw; } .hero.hero-c { padding-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .ch *, .ch-body { animation: none !important; } }
/* grifo do título (marca-texto amarelo, como o recurso Grifar) */
.hero-center h1 .hl { background: linear-gradient(#FFC857, #FFC857) no-repeat 0 78% / 0% 40%; color: inherit; padding: 0 .06em; transition: background-size var(--hl-ms, 900ms) cubic-bezier(.6,0,.25,1); }
.hero-center h1 .hl.on { background-size: 100% 40%; }
.hl-cur { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.hl-cur.on { opacity: 1; }
.hl-cur svg { display: block; transform-origin: 3px 2px; transition: transform .12s; }
.hl-cur.press svg { transform: scale(.88); }
#recursos h2 { margin-bottom: 32px; }

/* ===== antes e depois (v2): o mesmo site em HTML, sem e com o Permealha ===== */
#comparativo h2 { font-size: clamp(30px, 4.4vw, 48px); }
.cmp-v2 { grid-template-columns: 1fr 1.55fr; gap: 24px; align-items: center; margin-top: 40px; }
.cmp-v2 .cmp-item { border: 0 !important; border-radius: 26px; background: #fff; }
.cmp-v2 .cmp-item figcaption { border: 0; padding: 12px 18px; font-size: 15px; }
.cmp-v2 .cmp-item:not(.on) { background: rgba(255,255,255,.08); }
.cmp-v2 .cmp-item:not(.on) figcaption { color: rgba(255,255,255,.7); background: none; }
.cmp-v2 .cmp-item:not(.on) .cx { border-radius: 0 0 26px 26px; filter: saturate(.55); opacity: .9; }
.cmp-v2 .cmp-item.on { box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.cmp-v2 .cmp-item.on figcaption { font-size: 17px; font-weight: 800; color: #12245A !important; padding: 14px 20px; }
.cmp-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; }
.cmp-pills span { padding: 7px 14px; border-radius: 99px; background: #EAF4FE; color: #2186EB; font-size: 14px; font-weight: 700; }
.cmp-pills span:nth-child(2) { background: #FFF3D6; color: #8A5A00; }
.cmp-pills span:nth-child(3) { background: #FDE6EE; color: #C23A63; }
@media (max-width: 900px) { .cmp-v2 { grid-template-columns: 1fr; } .cmp-v2 .cmp-item.on { order: -1; } }

.cx { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; background: #F7FAFF; font-family: "Inter", system-ui, sans-serif; text-align: left; }
.cx *, .cx *::before { box-sizing: border-box; }
.cx-bar { position: relative; z-index: 2; height: 7%; display: flex; align-items: center; gap: 1.2cqw; padding: 0 2.6cqw; background: #EEF3FA; }
.cx-bar i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #EE5D86; } .cx-bar i + i { background: #FFC857; } .cx-bar i + i + i { background: #8FD8FA; }
.cx-bar span { margin-left: 2cqw; padding: .5cqw 3cqw; border-radius: 99px; background: #fff; color: #8A97B2; font-size: 1.7cqw; }
.cx-cam { position: absolute; left: 0; right: 0; top: 7%; bottom: 0; overflow: hidden; }
.cx-page { position: absolute; inset: 0; transform-origin: 15% 62%; }
.cx-page > * { position: absolute; }
.cx-nav { left: 7%; right: 7%; top: 6%; height: 6%; display: flex; align-items: center; gap: 3cqw; }
.cx-nav b { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: #2186EB; margin-right: auto; }
.cx-nav span { width: 7cqw; height: 1.1cqw; border-radius: 1cqw; background: #C9D5E6; }
.cx-hero { left: 7%; right: 7%; top: 20%; height: 48%; }
.cx-txt > * { position: absolute; display: block; border-radius: 1cqw; }
.cx-txt b { left: 0; top: 8%; width: 40%; height: 9%; background: #12245A; }
.cx-txt b.s { top: 23%; width: 28%; }
.cx-txt span { left: 0; top: 44%; width: 36%; height: 4%; background: #B8C6DA; }
.cx-txt span.s { top: 54%; width: 26%; }
.cx-btn { left: 0; top: 72%; width: 23%; height: 22%; border-radius: 99px !important; background: #EE5D86; color: #fff; font-style: normal; font-weight: 800; font-size: 2cqw; display: grid !important; place-items: center; }
.cx-cal { right: 0; top: 0; width: 42%; height: 100%; border-radius: 2.4cqw; background: #fff; padding: 2.4cqw; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; box-shadow: 0 1cqw 3cqw rgba(18,36,90,.06); }
.cx-cal i { border-radius: 1cqw; background: #EAF1FB; }
.cx-cal i:nth-child(7) { background: #8FD8FA; } .cx-cal i:nth-child(12) { background: #FFC857; }
.cx-cards { left: 7%; right: 7%; top: 75%; height: 17%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.cx-cards i { border-radius: 2cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(18,36,90,.05); }
.cx-ok { left: 33%; top: 56%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.6cqw 1.4cqw 1.4cqw; border-radius: 99px; background: #12245A; color: #fff; font-size: 2.1cqw; font-weight: 700; white-space: nowrap; opacity: 0; }
.cx-ok b { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #FFC857; color: #12245A; display: grid; place-items: center; font-size: 2cqw; }
.cx .pm-cur { position: absolute; z-index: 3; width: 2.4cqw; height: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* sem o Permealha: cursor pulando, sem zoom, nada avisa o clique */
.cx-a .pm-cur { animation: cxa-cur 8s infinite steps(1); }
@keyframes cxa-cur { 0% { left: 70%; top: 30%; } 12% { left: 58%; top: 48%; } 22% { left: 31%; top: 81%; } 30%, 70% { left: 16%; top: 67%; } 80% { left: 62%; top: 40%; } }
.cx-a .cx-ok { animation: cxa-ok 8s infinite steps(1); }
@keyframes cxa-ok { 0%, 41% { opacity: 0; } 42%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }

/* com o Permealha: cursor grande e suave, zoom no botão, clique marcado */
.cx-b .pm-cur { width: 4cqw; animation: cxb-cur 8s infinite cubic-bezier(.55,0,.2,1); }
@keyframes cxb-cur { 0%, 8% { left: 70%; top: 32%; } 34%, 39% { left: 18%; top: 70%; transform: none; } 40.5% { left: 18%; top: 70%; transform: scale(.82); } 42%, 72% { left: 18%; top: 70%; transform: none; } 88%, 100% { left: 70%; top: 32%; } }
.cx-b .cx-page { animation: cxb-cam 8s infinite cubic-bezier(.65,0,.2,1); }
@keyframes cxb-cam { 0%, 20% { transform: none; } 34%, 72% { transform: scale(1.8); } 86%, 100% { transform: none; } }
.cx-b .cx-btn { animation: cxb-btn 8s infinite; }
@keyframes cxb-btn { 0%, 39% { transform: none; box-shadow: none; } 40.5% { transform: scale(.94); } 42%, 70% { transform: none; box-shadow: 0 0 0 1.2cqw rgba(238,93,134,.25); } 74%, 100% { box-shadow: none; } }
.cx-b .cx-ok { animation: cxb-ok 8s infinite cubic-bezier(.2,.9,.3,1.3); }
@keyframes cxb-ok { 0%, 43% { opacity: 0; transform: translateY(2cqw) scale(.9); } 48%, 70% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: none; } }
.cx-ring { position: absolute; z-index: 3; left: 18%; top: 70%; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border-radius: 50%; border: .6cqw solid #FFC857; opacity: 0; animation: cxb-ring 8s infinite ease-out; }
@keyframes cxb-ring { 0%, 40% { opacity: 0; transform: scale(.3); } 41% { opacity: 1; transform: scale(.3); } 50%, 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .cx * { animation: none !important; } }
.cx-txt { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; } .cx-cal { position: absolute; } .cx-txt b, .cx-txt span, .cx-txt em { width: auto; } .cx-txt b { width: 72%; } .cx-txt b.s { width: 52%; } .cx-txt span { width: 66%; } .cx-txt span.s { width: 48%; } .cx-txt .cx-btn { width: 42%; }
.cmp-v2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.cmp-v2 .cmp-item .cx { border-radius: 26px 26px 0 0 !important; }
.cmp-v2 .cmp-item:not(.on) { background: #2A3B70; }
.cmp-pills span.lbl { background: #FFC857; color: #12245A; font-weight: 800; }
.cmp-v2 .cmp-pills span:nth-child(2) { background: #EAF4FE; color: #2186EB; }
.cmp-v2 .cmp-pills span:nth-child(3) { background: #FFF3D6; color: #8A5A00; }
.cmp-v2 .cmp-pills span:nth-child(4) { background: #FDE6EE; color: #C23A63; }
.cmp-v2 .cmp-item:not(.on) .cmp-pills span.lbl { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.cmp-pills { padding: 14px 16px 16px; gap: 6px; }
.cmp-pills span { font-size: 13px; padding: 6px 12px; }
.cmp-pills span { white-space: nowrap; }
@media (max-width: 900px) { .cmp-v2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .cmp-v2 .cmp-item.on { order: 0; } }
.cmp-v2 .cmp-item video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 26px 26px 0 0; background: #fff; }
.cmp-v2 .cmp-item:not(.on) video { filter: saturate(.7); }
.cmp-v2 .cmp-item video { aspect-ratio: 16 / 9; object-fit: contain; }
h1 mark.hl { white-space: nowrap; }
.cmp-v2 { margin-top: 0; }
/* "Com o Permealha" em destaque: contorno azul claro e pílula azul */
.cmp-v2 .cmp-item.on { box-shadow: 0 0 0 5px #8FD8FA, 0 30px 80px rgba(0,0,0,.35) !important; }
.cmp-v2 .cmp-item.on .cmp-pills span.lbl { background: #2186EB; color: #fff; }
/* preços: só Grátis, Pro mensal (destaque) e Pro anual */
.plans.plans-3 { grid-template-columns: 1fr 1.12fr 1fr; max-width: 1040px; margin-left: auto; margin-right: auto; align-items: center; gap: 20px; }
.plan[hidden] { display: none !important; }
.plan .price { white-space: nowrap; }
.plan.best { background: #2186EB; color: #fff; border: 0 !important; border-radius: 28px; padding: 34px 28px 28px; box-shadow: 0 0 0 6px #8FD8FA, 0 30px 70px rgba(33,134,235,.35) !important; transform: translateY(-6px); }
.plan.best h3, .plan.best .price { color: #fff; }
.plan.best .price small, .plan.best .note { color: rgba(255,255,255,.85); }
.plan.best .was { color: rgba(255,255,255,.65); }
.plan.best li::before { color: #FFC857; }
.plan.best .tag { background: #FFC857; color: #12245A; font-weight: 800; }
.plan.best .btn { background: #fff; color: #2186EB; box-shadow: 0 10px 24px rgba(18,36,90,.2); }
.plan.best .btn:hover { background: #FFF7E6; }
@media (max-width: 900px) { .plans.plans-3 { grid-template-columns: 1fr; max-width: 440px; } .plan.best { transform: none; order: -1; } }

/* modal "Como você quer usar o Permealha?" */
.im { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(18,36,90,.45); opacity: 0; transition: opacity .2s; }
.im.on { opacity: 1; }
.im-box { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #FFF7E6; border-radius: 28px; padding: 32px; box-shadow: 0 40px 90px rgba(18,36,90,.3); transform: translateY(12px) scale(.98); transition: transform .25s cubic-bezier(.2,.9,.3,1.2); }
.im.on .im-box { transform: none; }
.im-box h3 { font-size: 24px; text-align: center; margin: 0 0 22px; color: #12245A; }
.im-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #12245A; font-size: 22px; line-height: 1; cursor: pointer; }
.im-x:hover { background: #EAF4FE; }
.im-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.im-opt { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 22px; padding: 22px; text-align: left; }
.im-opt p { margin: 0; flex: 1; font-size: 15px; color: var(--muted); line-height: 1.5; }
.im-opt .btn { width: 100%; margin-top: 6px; }
.im-ic { width: 52px; height: 52px; border-radius: 16px; background: #EAF4FE; display: grid; place-items: center; }
.im-ic img { width: 32px !important; height: 32px !important; }
.im-ic.win i { position: relative; width: 30px; height: 21px; border-radius: 4px; border: 4px solid #12245A; border-top-width: 6px; background: #8FD8FA; }
.im-ic.win i::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #12245A; }
.im-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.im-head b { font-size: 18px; color: #12245A; }
.im-head em { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.im-free { background: #DDF2FE; color: #2186EB; }
.im-pro { background: #FFC857; color: #12245A; }
@media (max-width: 640px) { .im-opts { grid-template-columns: 1fr; } .im-box { padding: 26px 18px 20px; } .im-box h3 { font-size: 20px; padding: 0 30px; } }
.im[hidden] { display: none !important; }
/* ilustrações das opções (no lugar dos ícones) */
.im-ic { display: none; }
.im-art { position: relative; display: block; height: 128px; margin: -8px -8px 6px; border-radius: 16px; background: #D9ECFD; overflow: hidden; }
.im-art.app { background: #FFEFC7; }
.im-art > *, .im-art i, .im-art em { position: absolute; display: block; font-style: normal; }
.ia-win { left: 50%; top: 22px; width: 190px; height: 112px; margin-left: -95px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px rgba(18,36,90,.1); }
.ia-dots { left: 12px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: #EE5D86; box-shadow: 11px 0 #FFC857, 22px 0 #8FD8FA; }
.ia-url { left: 48px; top: 8px; width: 80px; height: 13px; border-radius: 99px; background: #EEF3FA; }
.ia-l { left: 14px; top: 38px; width: 82px; height: 7px; border-radius: 4px; background: #D3DEEE; }
.ia-l.s { top: 52px; width: 56px; }
.ia-panel { right: 10px; top: 32px; width: 62px; height: 72px; border-radius: 10px; background: #EAF4FE; padding: 8px; }
.ia-panel i { position: static !important; height: 10px; border-radius: 4px; background: #fff; margin-bottom: 6px; box-shadow: inset 10px 0 #2186EB; }
.ia-panel i:nth-child(2) { box-shadow: inset 10px 0 #EE5D86; } .ia-panel i:nth-child(3) { box-shadow: inset 10px 0 #FFC857; }
.ia-cur { position: absolute; left: calc(50% - 6px); top: 66px; width: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.ia-mon { left: 50%; top: 18px; width: 150px; height: 92px; margin-left: -75px; border-radius: 14px; background: #12245A; padding: 7px; }
.ia-scr { position: static !important; display: block; height: 100%; border-radius: 8px; background: #fff; padding: 10px; }
.ia-scr i { position: static !important; height: 12px; border-radius: 4px; background: #D9ECFD; margin-bottom: 7px; box-shadow: inset 12px 0 #2186EB; }
.ia-scr i:nth-child(2) { width: 80%; box-shadow: inset 12px 0 #EE5D86; } .ia-scr i:nth-child(3) { width: 60%; box-shadow: inset 12px 0 #FFC857; margin: 0; }
.ia-stand { left: 50%; top: 110px; width: 56px; height: 8px; margin-left: -28px; border-radius: 4px; background: #12245A; box-shadow: 0 -8px 0 -2px #12245A; }
.ia-rec { right: calc(50% - 88px); top: 10px; padding: 4px 9px 4px 18px; border-radius: 99px; background: #EE5D86; color: #fff; font: 800 10px/1.2 Inter, sans-serif; }
.ia-rec::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; }
/* modal: passo dos planos Pro */
.im-step[hidden] { display: none !important; }
.im-back { position: absolute; top: 18px; left: 18px; border: 0; background: #fff; color: #12245A; font: 700 14px Inter, sans-serif; padding: 8px 14px; border-radius: 99px; cursor: pointer; }
.im-back:hover { background: #EAF4FE; }
.im-sub { text-align: center; color: var(--muted); font-size: 15px; margin: -12px 0 20px; }
.im-plans { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: stretch; }
.im-plan { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 22px; padding: 22px; text-align: left; }
.im-plan b { font-size: 16px; color: #12245A; }
.im-plan .price { font-size: 30px; font-weight: 800; color: #12245A; letter-spacing: -.02em; white-space: nowrap; }
.im-plan .price small { font-size: 14px; font-weight: 600; color: var(--muted); }
.im-plan .was { font-size: 15px; color: #94A3B8; font-weight: 600; margin-right: 4px; }
.im-plan .note { margin: 0; flex: 1; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.im-plan .btn { width: 100%; margin-top: 10px; }
.im-plan.best { background: #2186EB; box-shadow: 0 0 0 5px #8FD8FA; }
.im-plan.best b, .im-plan.best .price { color: #fff; }
.im-plan.best .price small, .im-plan.best .note, .im-plan.best .was { color: rgba(255,255,255,.8); }
.im-plan.best .btn { background: #fff; color: #2186EB; }
.im-plan .tag { position: absolute; top: -12px; left: 18px; background: #FFC857; color: #12245A; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.im-inc { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.im-inc li { background: #fff; color: #12245A; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px; }
.im-fine { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.im-fine a { color: #2186EB; font-weight: 700; }
@media (max-width: 640px) { .im-plans { grid-template-columns: 1fr; gap: 20px; } .im-back { top: 14px; left: 14px; } .im-step[data-step="2"] h3 { margin-top: 30px; } }