
/* Layout: página única de produto; cabeçalho fixo, faixas alternadas névoa / branco / ameixa, conteúdo em 1160px. Telas reais da plataforma em moldura de navegador. */
:root {
  --surface: #F7F5FA; --raised: #FFFFFF; --ink: #24123A; --muted: #5E5470; --line: #ECE7F3;
  --violeta: #6A45B8; --on-violeta: #FFFFFF; --coral: #FF7A59; --lilas: #C9B8F5; --lavanda: #EDE6FB;
  --deep: #24123A; --on-deep: #F4EFFA; --on-deep-muted: #CFC4E2;
  --ok-bg: #E8F4EE; --ok-ink: #2E7457;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 24px 60px rgba(36, 18, 58, 0.14);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --surface: #160D22; --raised: #221632; --ink: #F4EFFA; --muted: #B9AEC9; --line: #33264A;
  --violeta: #9A7BE6; --on-violeta: #160D22; --coral: #FF8D70; --lilas: #5B4890; --lavanda: #2A1D40;
  --deep: #0E0817; --on-deep: #F4EFFA; --on-deep-muted: #B9AEC9;
  --ok-bg: #173326; --ok-ink: #8FD3B0; --shadow: 0 24px 60px rgba(0, 0, 0, 0.45); color-scheme: dark; } }
:root[data-theme="dark"] {
  --surface: #160D22; --raised: #221632; --ink: #F4EFFA; --muted: #B9AEC9; --line: #33264A;
  --violeta: #9A7BE6; --on-violeta: #160D22; --coral: #FF8D70; --lilas: #5B4890; --lavanda: #2A1D40;
  --deep: #0E0817; --on-deep: #F4EFFA; --on-deep-muted: #B9AEC9;
  --ok-bg: #173326; --ok-ink: #8FD3B0; --shadow: 0 24px 60px rgba(0, 0, 0, 0.45); color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; font-weight: 700; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violeta); }
.lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 60ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; }
.btn-main { background: var(--violeta); color: var(--on-violeta); }
.btn-main:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--violeta); }
.logo { display: block; height: 30px; width: auto; color: var(--ink); }
.ex { font-size: 12.5px; color: var(--muted); }
.muted { color: var(--muted); }
.ck-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ck-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.ck-list li svg { margin-top: 3px; }

/* Cabeçalho */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav { display: flex; gap: 16px; }
.menu-toggle { display:none; flex:none; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:var(--raised); cursor:pointer; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.top-actions { display:flex; gap:8px; flex:none; }
.top .btn { height: 42px; padding: 0 18px; font-size: 14.5px; }

/* Moldura de tela */
.frame { background: var(--raised); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.frame-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--raised); }
.frame-bar i { width: 10px; height: 10px; border-radius: 99px; background: var(--line); }
.frame-bar span { margin-left: 10px; font-size: 12px; color: var(--muted); }
.shot { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.phone { width: 230px; border-radius: 34px; padding: 8px; background: #0E0817; box-shadow: var(--shadow); }
.phone .shot { border-radius: 27px; overflow: hidden; background: #120A1E; }
.phone .shot img { aspect-ratio: 390 / 844; }
.cap { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Abertura */
.hero { padding-block: 64px 96px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(48px, 6.6vw, 88px); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; }
.hero h1 .til { position: relative; white-space: nowrap; }
.hero h1 .til svg { position: absolute; right: -0.36em; top: 0.02em; width: 0.32em; height: 0.15em; overflow: visible; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { font-size: 14px; color: var(--muted); }
.hero-vis { position: relative; min-width: 0; }
.hero-vis .frame { width: 128%; max-width: none; }
.float { position: absolute; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-size: 13px; z-index: 2; }
.float b { display: block; font-size: 13.5px; }
.float span { color: var(--muted); }
.dot-ia { width: 34px; height: 34px; border-radius: 10px; background: var(--violeta); display: flex; align-items: center; justify-content: center; flex: none; }

/* Faixas */
.band { padding-block: 96px; }
.band.white { background: var(--raised); }
.band.deep { background: var(--deep); color: var(--on-deep); }
.band.deep .lead, .band.deep .muted, .band.deep .cap { color: var(--on-deep-muted); }
.band.deep .eyebrow { color: var(--coral); }
.head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: 48px; }

/* Clima para todas */
.climate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.then-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.then-now div { border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.then-now .then { background: var(--surface); }
.then-now .now { background: var(--lavanda); }
.then-now b { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.then-now .then b { color: var(--muted); }
.then-now .now b { color: var(--violeta); }
.then-now ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.facts div { border-top: 2px solid var(--violeta); padding-top: 16px; }
.facts b { display: block; font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.facts span { font-size: 15px; color: var(--muted); }
.stack { position: relative; padding-bottom: 60px; }
.stack .back { width: 88%; }
.stack .front { position: absolute; right: 0; bottom: 0; width: 62%; }

/* Antes e depois */
.swap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.swap article { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 22px; background: var(--raised); }
.swap .before { font-size: 15px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.swap .after { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }

/* IA em todas as etapas */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.duo div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--lavanda); }
.duo .av { width: 48px; height: 48px; border-radius: 15px; background: var(--violeta); color: var(--on-violeta); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 21px; }
.duo b { font-size: 17px; }
.duo p { font-size: 14.5px; color: var(--muted); }
.tabs { display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 46px; padding: 0 18px; border-radius: 999px; border: 0; font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); display: inline-flex; align-items: center; gap: 8px; }
.tab small { font-size: 12px; color: var(--muted); font-weight: 600; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--surface); box-shadow: none; }
.tab[aria-selected="true"] small { color: var(--lilas); }
.stage { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 44px; align-items: center; }
.stage-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.does { display: flex; flex-direction: column; gap: 10px; }
.does div { border-radius: 16px; padding: 16px 18px; font-size: 15.5px; }
.does .ai { background: var(--lavanda); }
.does .you { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--line); }
.does b { display: block; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.does .ai b { color: var(--violeta); }
.does .you b { color: var(--muted); }

/* Product previews */
.shot img[src*="-gentil.webp"], .shot img[src*="engajar-empresa.webp"] { aspect-ratio:auto; }
.visual-note { padding:12px 16px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); }
.interview-head { max-width:780px; }
.interview-feature { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr); gap:36px; align-items:center; }
.interview-details { display:flex; flex-direction:column; gap:20px; }
.interview-details ol { padding-left:20px; margin:0; display:grid; gap:16px; color:var(--muted); }
.interview-details li b { display:block; color:var(--ink); }
.interview-details .btn { align-self:start; }
#pulso { scroll-margin-top:100px; }
@media(max-width:1080px) { .interview-feature { grid-template-columns:minmax(0,1fr); } }
/* Automático e especialista */
.help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.levels article { padding: 24px; border-radius: 22px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.levels .n { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--violeta); }
.levels p { color: var(--muted); font-size: 15px; }

/* Contextos de empresas e times */
.sector-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.sector-tabs button { padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:var(--raised); color:var(--muted); font:500 15px var(--sans); cursor:pointer; min-height:46px; }
.sector-tabs button:hover { border-color:var(--violeta); color:var(--ink); }
.sector-tabs button[aria-selected="true"] { background:var(--violeta); border-color:var(--violeta); color:var(--on-violeta); }
.sector-panel { padding:36px; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.sector-panel + .sector-panel { margin-top:24px; }
.sector-tabs[role="tablist"] ~ .sector-panel { margin-top:0; }
.sector-heading { max-width:760px; display:grid; gap:14px; }
.sector-heading h3 { font-size:clamp(26px,3vw,36px); }
.sector-heading p { color:var(--muted); font-size:18px; }
.sector-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:32px; }
.sector-benefits article { border-top:2px solid var(--lilas); padding-top:18px; display:grid; gap:10px; align-content:start; }
.sector-benefits h4 { font-family:var(--display); font-size:19px; line-height:1.3; margin:0; letter-spacing:-.015em; }
.sector-benefits p { color:var(--muted); font-size:15.5px; }
.sector-next { margin-top:28px; display:flex; gap:16px 28px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.sector-next p { color:var(--muted); font-size:14px; max-width:65ch; }
.sector-next a { color:var(--violeta); font-weight:600; text-underline-offset:4px; }
@media(max-width:760px) { .sector-panel { padding:24px; } .sector-benefits { grid-template-columns:minmax(0,1fr); gap:22px; } .sector-tabs button { padding:11px 14px; font-size:14px; } }

/* Gentileza e lucro */
.profit { background: var(--lavanda); }
.profit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--raised); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.stat b { font-family: var(--display); font-size: clamp(44px, 5vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--violeta); }
.stat span { font-size: 15.5px; line-height: 1.4; }
.source { margin-top: 18px; font-size: 13px; color: var(--muted); }
.source a { color: var(--violeta); }
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.why article { display: flex; flex-direction: column; gap: 8px; }
.why p { color: var(--muted); font-size: 15.5px; }

/* Placar */
.placar { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.tv { position: relative; padding-right: 70px; }
.tv .phone { position: absolute; right: 0; bottom: -40px; width: 170px; }
.tv .frame { border-color: rgba(255, 255, 255, 0.1); }

/* Princípios */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rules article { padding: 28px; border-top: 3px solid var(--violeta); background: var(--raised); border-radius: 0 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.rules article:nth-child(2) { border-top-color: var(--coral); }
.rules article:nth-child(3) { border-top-color: var(--lilas); }
.rules p { color: var(--muted); }

/* Podcast */
.pod { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.cover { aspect-ratio: 1; border-radius: 28px; background: #24123A; color: #F4EFFA; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.cover .wave { position: absolute; left: -12%; width: 124%; bottom: -14%; height: auto; opacity: 0.95; }
.cover small { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #FF7A59; font-weight: 600; position: relative; }
.cover strong { font-family: var(--display); font-size: clamp(36px, 4.2vw, 54px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; position: relative; }
.cover span { font-size: 15px; color: #CFC4E2; position: relative; }
.eps { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.ep { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--surface); }
.ep .num { width: 56px; height: 56px; border-radius: 16px; background: var(--lavanda); color: var(--violeta); font-family: var(--display); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.ep b { display: block; font-size: 16.5px; line-height: 1.3; }
.ep span { font-size: 14px; color: var(--muted); }
.ep em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.where { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.where .btn { height: 44px; font-size: 14.5px; }

/* Para quem */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.people article { padding: 28px; border-radius: 22px; background: var(--raised); display: flex; flex-direction: column; gap: 12px; }
.people .q { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--violeta); }
.people p { color: var(--muted); font-size: 15px; }

/* Preços */
.prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.price { padding: 26px; border-radius: 24px; background: var(--raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.price .btn { margin-top: auto; }
.price.entry { background: var(--lavanda); border-color: var(--lavanda); }
.price.hi { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.price .amount { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price .amount small { font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0; }
.price ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.extras { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.extras div { padding: 16px 18px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line); font-size: 14px; }
.extras b { display: block; font-size: 15px; }

/* Dani */
.dani { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 28px; background: var(--lavanda); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; border: 2px dashed var(--lilas); }

/* Agendar apresentação */
.pulse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
form { background: var(--raised); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input, select { height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 14px; font-family: var(--sans); font-size: 15.5px; }
.ok { background: var(--ok-bg); color: var(--ok-ink); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.steps { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.steps div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.steps span { width: 40px; height: 40px; border-radius: 999px; background: var(--coral); color: #24123A; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Perguntas */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
details { background: var(--raised); border-radius: 18px; padding: 20px 24px; border: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--display); font-size: 24px; line-height: 1; color: var(--violeta); }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; color: var(--muted); }

/* Ampliar tela */
dialog { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); width: 100%; }
dialog::backdrop { background: rgba(14, 8, 23, 0.82); }
dialog img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: 14px; background: #fff; }
dialog .close { position: absolute; top: -48px; right: 0; height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: #FFFFFF; color: #24123A; font-family: var(--sans); font-weight: 600; cursor: pointer; }
dialog p { color: #F4EFFA; font-size: 14px; margin-top: 10px; }

/* Rodapé */
footer { background: var(--deep); color: var(--on-deep); padding-block: 56px 40px; }
footer .wrap { display: flex; flex-direction: column; gap: 32px; }
footer .row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
footer .logo { height: 40px; color: var(--on-deep); }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14.5px; }
footer nav a { text-decoration: none; color: var(--on-deep-muted); }
footer small { color: var(--on-deep-muted); font-size: 13px; }

@media (max-width: 1080px) {
  .menu-toggle { display:inline-flex; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; padding:20px 24px; background:var(--raised); border-bottom:1px solid var(--line); box-shadow:var(--shadow); flex-wrap:wrap; gap:18px 24px; }
  .nav.is-open { display:flex; }
  .hero .wrap, .climate, .stage, .help, .placar, .pod, .dani, .pulse { grid-template-columns: minmax(0, 1fr); }
  .hero-vis .frame { width: 100%; }
  .prices, .extras, .profit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo { max-width: 320px; }
  .cover { max-width: 420px; }
}
@media (max-width: 760px) {
  .swap, .rules, .people, .levels, .why, .duo, .facts, .then-now { grid-template-columns: minmax(0, 1fr); }
  .float { display: none; }
  .tv { padding-right: 0; }
  .tv .phone { display: none; }
  .stack { padding-bottom: 0; }
  .stack .back { width: 100%; }
  .stack .front { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .band { padding-block: 64px; }
  .top .wrap { height:auto; min-height:72px; padding-block:12px; flex-wrap:wrap; gap:12px; }
  .top-actions { margin-left:auto; }
  .top .btn { padding-inline:10px; font-size:13px; height:42px; }
  .prices, .extras, .profit-grid { grid-template-columns: minmax(0, 1fr); }
  .ep { grid-template-columns: 44px minmax(0, 1fr); }
  .ep .num { width: 44px; height: 44px; font-size: 17px; }
  .ep em { grid-column: 2; }
}

/* Versão B: o til como protagonista */
.til-i { display: inline-block; width: 1.5em; height: 0.7em; vertical-align: 0.05em; margin-right: 6px; overflow: visible; }
.eyebrow { display: inline-flex; align-items: center; }
.hero-b { padding-block: 56px 96px; overflow: hidden; }
.hero-b .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero-b h1 { font-size: clamp(46px, 6.2vw, 84px); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; }
.hero-b h1 em { font-style: normal; color: var(--violeta); position: relative; white-space: nowrap; }
.big-til { display: block; width: min(220px, 50%); height: auto; overflow: visible; margin-bottom: 6px; }
.big-til path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 1.4s 0.2s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-vis .frame { width: 118%; }

.wave-sep { display: block; width: 100%; height: 28px; color: var(--lilas); }
.band.white + .wave-sep, .wave-sep.on-white { background: var(--raised); }

.strip { background: var(--ink); color: var(--surface); overflow: hidden; padding-block: 18px; }
.strip-track { display: flex; gap: 28px; width: max-content; animation: slide 38s linear infinite; font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.strip-track span { display: inline-flex; align-items: center; gap: 28px; }
.strip-track svg { width: 34px; height: 16px; }
@keyframes slide { to { transform: translateX(-50%); } }

.equation { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 36px); flex-wrap: wrap; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(44px, 8vw, 108px); line-height: 1; margin-block: 8px 56px; }
.equation .op { color: var(--muted); font-weight: 500; font-size: 0.6em; }
.equation .t svg { width: 1.1em; height: 0.5em; overflow: visible; }
.equation .res { color: var(--violeta); }
.meanings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.meanings article { background: var(--raised); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.meanings svg { width: 64px; height: 30px; overflow: visible; }
.meanings p { color: var(--muted); font-size: 15.5px; }

.dict { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.entry-main { background: var(--lavanda); border-radius: 26px; padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.entry-main .word { font-family: var(--display); font-size: clamp(48px, 6vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.entry-main .word i { font-style: normal; color: var(--muted); font-weight: 500; }
.entry-main .cls { font-style: italic; color: var(--muted); }
.entry-main ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.entries { display: flex; flex-direction: column; gap: 0; }
.entries div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.entries div:last-child { border-bottom: 1px solid var(--line); }
.entries b { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; }
.entries b small { display: block; font-family: var(--sans); font-size: 13px; font-style: italic; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.entries p { color: var(--muted); font-size: 15.5px; }

.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.versus > div { border-radius: 24px; padding: 30px; }
.versus .no { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.versus .yes { background: var(--violeta); color: #FFFFFF; }
.versus h3 { margin-bottom: 18px; }
.versus ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
.versus .no li { color: var(--on-deep-muted); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.versus .yes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.versus .yes li svg { width: 26px; height: 12px; margin-top: 7px; }

.signoff { text-align: center; padding-block: 88px; }
.signoff p { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(40px, 6vw, 76px); line-height: 1; }
.signoff svg { width: 120px; height: 56px; margin: 0 auto 18px; display: block; overflow: visible; }

@media (max-width: 1080px) {
  .hero-b .wrap, .dict { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .meanings, .versus { grid-template-columns: minmax(0, 1fr); }
  .entries div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .strip-track { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .big-til path { stroke-dashoffset: 0; }
  .strip-track { animation: none; }
}
.form-trap {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none;}

.preference-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.preference-fields input { width:100%; min-width:0; }
.btn:disabled { opacity:.6; cursor:wait; }
@media(max-width:560px) { .preference-fields { grid-template-columns:minmax(0,1fr); } form { padding:24px; } }
