/* ==========================================================================
   Fly Like a Bird — página bio v4
   Mesma identidade aprovada da v3 (escuro + verde-limão), com CSS consolidado,
   leitura melhor no celular e os blocos de oferta de cada serviço.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #0b0d0b;
  --panel: #121512;
  --panel-2: #171c16;
  --stage: #0d110c;
  --line: #2b3328;
  --line-2: #3a4632;
  --lime: #cafa43;
  --lime-hover: #dcff80;
  --lime-ink: #152008;
  --white: #f3f5ee;
  --text: #dde3d4;
  --muted: #b4bcab;
  --soft: #9aa58e;
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --z-sticky: 20;
  --z-toast: 40;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font: 16px/1.6 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.dialog-open { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: normal; color: var(--lime); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
img { max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.shell { width: min(100% - 64px, 1120px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -100px; padding: 12px 16px; background: var(--lime); color: var(--lime-ink); z-index: 50; border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: 12px; }

.eyebrow { display: flex; align-items: center; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 650; color: var(--lime); line-height: 1.6; }
.eyebrow.muted { color: var(--muted); }
.signal { display: inline-block; flex: none; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; margin-right: 9px; box-shadow: 0 0 14px #cafa4366; }

/* ---------- Botões ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 22px;
  border: 1px solid transparent; border-radius: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.button.primary { background: var(--lime); color: var(--lime-ink); }
.button.primary:hover { background: var(--lime-hover); }
.button.secondary { background: #1f251b; color: var(--white); border-color: #414a36; }
.button.secondary:hover { border-color: var(--lime); }
.button.small { min-height: 40px; padding: 8px 14px; font-size: 13px; border-radius: 9px; gap: 7px; }
.button.block { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--lime); background: none; border: 0; padding: 4px 0; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Topo ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 30px 0; }
.wordmark { position: relative; font-weight: 720; font-size: 21px; letter-spacing: -.05em; line-height: .9; padding-right: 30px; }
.wordmark .ic { position: absolute; right: 0; top: -4px; width: 24px; height: 24px; color: var(--lime); stroke-width: 2.6; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.social { color: var(--muted); font-size: 13px; }
.social:hover { color: var(--white); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px 34px; padding-top: 48px; position: relative; }
.hero-copy { min-width: 0; align-self: center; }
.hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.05em; margin: 22px 0; }
.lead { max-width: 470px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-note { font-size: 13px; color: var(--soft); margin-top: 16px; line-height: 1.6; }

.hero-showcase { min-width: 0; border: 1px solid #303929; border-radius: 22px; background: radial-gradient(ellipse at 65% 35%, #a2c63e12, transparent 65%), #101410; overflow: hidden; }
.showcase-caption { display: flex; align-items: center; gap: 2px; padding: 17px 19px; border-bottom: 1px solid var(--line); font-size: 12px; color: #bbc5af; }
.showcase-caption .ic { margin-left: auto; color: var(--lime); }
.welcome-cover { padding: 28px; min-height: 340px; background: radial-gradient(ellipse at 110% 0%, #cafa4320, transparent 65%), #10150e; }
.welcome-topline { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.welcome-topline > span:first-child { max-width: 180px; color: #b8c4a8; font-size: 10px; letter-spacing: .12em; }
.welcome-brand { font-size: 20px; font-weight: 700; line-height: .85; letter-spacing: -.07em; color: var(--lime); }
.welcome-cover h2 { font-size: clamp(34px, 4.2vw, 49px); line-height: 1.08; margin: 36px 0 18px; }
.welcome-cover > p { font-size: 14px; line-height: 1.75; color: var(--muted); }
.welcome-signature { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #42522d; margin-top: 30px; padding-top: 16px; font-size: 10px; letter-spacing: .12em; color: #b6c3a3; }
.welcome-signature .ic { color: var(--lime); width: 19px; height: 19px; }
.welcome-pending { padding: 14px 19px; border-top: 1px solid var(--line); background: #151a11; font-size: 12px; line-height: 1.6; color: var(--muted); }
.source-note { font-size: 11px; line-height: 1.6; color: var(--soft); }
.hero-showcase > .source-note { padding: 4px 19px 16px; }

.pathway { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 20px 0; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: #d2d8c8; }
.pathway li { display: flex; align-items: center; gap: 12px; flex: 1; }
.pathway li span { color: #8e9b7e; font-size: 12px; font-variant-numeric: tabular-nums; }
.pathway .pathway-arrow { flex: none; color: var(--lime); }

/* ---------- Serviços ---------- */
.services { padding-top: 84px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2 { font-size: clamp(32px, 4vw, 48px); margin-top: 12px; line-height: 1.08; }
.section-intro { max-width: 300px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.service-shortcuts { position: sticky; top: 12px; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 7px; margin-bottom: 26px; background: #131810ee; border: 1px solid #38432e; border-radius: 15px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 28px #0005; }
.service-shortcuts a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; min-height: 52px; padding: 8px 14px; border-radius: 10px; color: var(--white); transition: background-color .2s, color .2s; }
.service-shortcuts .sc-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.service-shortcuts .sc-path { grid-row: 2; font-size: 11px; color: var(--soft); }
.service-shortcuts .ic { grid-row: 1 / 3; grid-column: 2; color: var(--lime); }
.service-shortcuts a:hover, .service-shortcuts a:focus-visible { background: var(--lime); color: var(--lime-ink); }
.service-shortcuts a:hover .sc-path, .service-shortcuts a:hover .ic, .service-shortcuts a:focus-visible .sc-path, .service-shortcuts a:focus-visible .ic { color: inherit; }

.service-grid { display: grid; gap: 28px; }
.service { min-width: 0; padding: 38px; border: 1px solid var(--line); border-radius: var(--r-xl); background: linear-gradient(145deg, #19201640, transparent 40%), var(--panel); transition: border-color .3s; }
.service:target { border-color: #627344; }
.service-heading { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 36px; margin-bottom: 30px; }
.service-heading h3 { font-size: clamp(30px, 3.6vw, 44px); margin-top: 16px; line-height: 1.07; }
.service-heading > p { max-width: 380px; font-size: 15px; line-height: 1.75; color: var(--muted); padding-bottom: 4px; }

/* Palcos de demonstração (mantidos da v3) */
.stage { display: grid; align-items: center; gap: 26px; min-width: 0; padding: 26px; border: 1px solid #35402d; border-radius: var(--r-lg); }
.stage-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #a5b994; }
.demo-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #aebba0; margin-top: 24px; }
.demo-label .ic { color: var(--lime); }
.window-dots { display: inline-flex; gap: 4px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }

.google-stage { grid-template-columns: .9fr 1.2fr; padding: 22px 26px; background: radial-gradient(ellipse at 20% 70%, #cafa4312, transparent 70%), #0b100a; }
.stage-copy { padding: 10px 0 10px 5px; }
.stage-copy h4, .content-notes h4 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.045em; font-weight: 500; margin: 24px 0 16px; }
.stage-copy > p, .content-notes > p { font-size: 15px; color: var(--muted); line-height: 1.7; }
.screen-demo { min-width: 0; background: #1a2017; border: 1px solid #424d37; border-radius: 13px; overflow: hidden; box-shadow: 0 18px 38px #0005; }
.screen-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #b9c3ae; padding: 12px 15px; border-bottom: 1px solid #35412b; }
.screen-toolbar .window-dots { color: #728460; }
.screen-toolbar .ic { color: var(--lime); }
.screen-tabs { display: flex; gap: 6px; padding: 10px 13px 0; }
.screen-tabs button { flex: 1; min-height: 44px; padding: 8px 10px; border: 1px solid #424c39; border-radius: 8px; background: transparent; color: #c0cbb5; font-size: 13px; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.screen-tabs button:hover { border-color: var(--lime); }
.screen-tabs [aria-selected="true"] { background: var(--lime); color: #162109; border-color: var(--lime); }
.screen-panel { padding: 7px 2px 0; }
.screen-panel img { display: block; width: 100%; height: auto; }
.screen-panel[hidden] { display: none; }
.screen-footnote { padding: 10px 15px 14px; color: var(--soft); font-size: 11px; line-height: 1.5; }

.website-stage { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: 26px; background: radial-gradient(ellipse at 15% 30%, #cafa430d, transparent 65%), #10160e; }
.site-example { min-width: 0; width: 100%; max-width: 400px; container-type: inline-size; background: #f3f1e9; color: #29382c; border: 1px solid #63704e; border-radius: 12px; overflow: hidden; box-shadow: 0 22px 50px #0006; transform: rotate(3deg); }
.mini-browser { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #e4e5dc; font-size: 10px; color: #59624f; }
.mini-browser .window-dots { color: #8b9180; }
.site-example-body { background: #f3f1e9; }
.sample-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.sample-nav strong { font: 30px/.9 Georgia, 'Times New Roman', serif; letter-spacing: -.065em; }
.sample-nav strong span { color: #7b8c55; }
.sample-nav > span { font-size: 10px; color: #57644f; }
.sample-nav .ic { width: 17px; height: 17px; }
.sample-hero { position: relative; isolation: isolate; aspect-ratio: 16 / 10; min-height: 160px; color: #fffdf6; }
.sample-hero img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: -2; }
.sample-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #101a13d9, #101a1322 75%, transparent); z-index: -1; }
.sample-hero-copy { position: absolute; inset: auto 16px 16px; }
.sample-hero-copy > span { font-size: 9px; letter-spacing: .13em; color: #e1e8d2; }
.sample-hero h4 { font: 27px/1.02 Georgia, 'Times New Roman', serif; font-size: clamp(21px, 7.6cqw, 31px); letter-spacing: -.045em; margin-top: 9px; text-wrap: initial; }
.sample-detail { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.sample-index { font-size: 9px; letter-spacing: .12em; color: #596a4f; }
.sample-detail p { font: 20px/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.03em; margin-top: 6px; }
.sample-swatches { display: flex; flex: none; padding-left: 6px; }
.sample-swatches i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #f3f1e9; background: #6c7757; margin-left: -6px; }
.sample-swatches i:nth-child(2) { background: #bca787; }
.sample-swatches i:nth-child(3) { background: #dfdccb; }
.sample-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #d9ddce; border-bottom: 1px solid #d9ddce; margin-inline: 16px; color: #526249; font-size: 9px; text-align: center; }
.sample-services span { padding: 10px 2px; }
.sample-services span + span { border-left: 1px solid #d9ddce; }
.sample-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.sample-contact > span:first-child { font-size: 11px; line-height: 1.5; color: #526249; }
.sample-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 6px; background: #304530; color: #f8f9ed; font-size: 10px; line-height: 1.3; }
.site-notes ol { list-style: none; padding: 0; margin: 14px 0 0; }
.site-notes li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #3c4931; }
.site-notes li > span { color: var(--lime); font-size: 11px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.site-notes strong { font-size: 15px; font-weight: 600; }
.site-notes p { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 3px; }

.ads-stage { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 28px; background: radial-gradient(ellipse at 12% 60%, #cafa4310, transparent 65%), #0c110b; }
.ads-overview-title { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; font-weight: 600; letter-spacing: -.04em; margin: 18px 0; }
.ads-overview > p:last-of-type { color: var(--muted); font-size: 14px; line-height: 1.7; }
.analytics-preview { min-width: 0; margin: 0; border: 1px solid #3e4935; border-radius: 12px; overflow: hidden; background: #171d14; box-shadow: 0 18px 36px #0004; }
.analytics-preview .screen-toolbar { flex-wrap: wrap; font-size: 11px; }
.analytics-preview .screen-toolbar > span:last-child { color: var(--lime); font-size: 10px; }
.analytics-preview > a { display: block; background: white; }
.analytics-preview img { display: block; width: 100%; height: auto; }
.analytics-preview figcaption { padding: 12px 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.analytics-preview figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.service-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 26px 0 0; }
.service-benefits li { border-top: 1px solid var(--line-2); padding-top: 18px; }
.service-benefits li > span { display: block; color: var(--lime); font-size: 10px; letter-spacing: .09em; margin-bottom: 12px; }
.service-benefits strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.service-benefits p { color: var(--muted); font-size: 14px; line-height: 1.65; }

.content-stage { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: 40px; background: radial-gradient(ellipse at 15% 50%, #abce3114, transparent 60%), #0b0f09; }
.post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: center; min-width: 0; padding: 28px 12px 42px; isolation: isolate; }
.portfolio-card { position: relative; z-index: 1; min-width: 0; margin: 0; border: 1px solid #39462e; border-radius: 12px; overflow: hidden; background: #141a10; box-shadow: 0 18px 36px #0007; transform: translateX(12px) rotate(-6deg); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.portfolio-card:nth-child(2) { z-index: 2; transform: translate(-12px, 18px) rotate(6deg); }
.portfolio-card:hover, .portfolio-card:focus-within { z-index: 3; border-color: #8ca644; transform: translateY(-6px) rotate(0); }
.portfolio-label { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 12px; font-size: 10px; color: var(--muted); }
.portfolio-label > span:first-child { color: var(--lime); letter-spacing: .08em; font-weight: 600; }
.media-frame { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background: #090c08; border-top: 1px solid #2c3724; border-bottom: 1px solid #2c3724; }
.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-play { position: absolute; left: 50%; top: 44%; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #ffffff6b; border-radius: 50%; background: #0b0d0bcc; color: var(--lime); box-shadow: 0 8px 28px #0005; transform: translate(-50%, -50%); }
.cover-play svg { width: 24px; height: 24px; fill: currentColor; }
.video-cover:hover .cover-play, .video-cover:focus-visible .cover-play { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.portfolio-card figcaption { min-height: 84px; padding: 12px; font-size: 12px; color: var(--text); line-height: 1.55; }
.portfolio-card figcaption > span { display: block; margin-top: 4px; color: var(--soft); }
.portfolio-card figcaption a { display: inline-block; text-decoration: underline; text-underline-offset: 3px; padding-block: 6px; }
.content-notes h4 { font-size: 32px; margin: 18px 0 14px; }
.content-notes .portfolio-history { font-size: 12px; color: var(--soft); margin-top: 18px; }
.format-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.format-tags span { font-size: 12px; color: #b9c9a4; border: 1px solid #3b482b; border-radius: 6px; padding: 5px 9px; }

/* ---------- Oferta de cada serviço ---------- */
.offer { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); align-items: start; }
.offer-info { min-width: 0; }
.offer-kicker { font-size: 13px; font-weight: 600; color: var(--lime); letter-spacing: -.005em; }
.offer-info h4 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.035em; line-height: 1.12; margin: 10px 0 14px; }
.offer-lead { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text); }
.includes .ic { color: var(--lime); margin-top: 3px; width: 17px; height: 17px; stroke-width: 2.4; }
.includes strong { font-weight: 650; color: var(--white); font-variant-numeric: tabular-nums; }

.offer-box { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 #ffffff08; }
.path-label { display: flex; align-items: center; font-size: 13px; color: var(--muted); line-height: 1.4; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: clamp(36px, 3.6vw, 46px); font-weight: 650; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); }
.price-note { font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: -4px; }
.offer-box .includes { padding: 4px 0 6px; }
.offer-box .includes li { font-size: 14px; }
.offer-box .fineprint { margin-top: 0; }
.offer-box .text-link { align-self: center; }

/* Preço ainda não definido (só na prévia) */
.is-placeholder { color: #cafa43b3; }
body[data-preview] .is-placeholder::after { content: 'definir'; margin-left: 10px; padding: 3px 7px; border: 1px dashed #cafa4380; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; vertical-align: middle; color: var(--lime); }

/* Situação do Perfil no Google */
.situations { display: grid; gap: 8px; }
.situation { position: relative; display: block; cursor: pointer; }
.situation input { position: absolute; opacity: 0; pointer-events: none; }
.situation > span { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: #10140f; transition: border-color .2s, background-color .2s; }
.situation > span::before { content: ''; grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #6c7a5c; box-shadow: inset 0 0 0 4px #10140f; transition: background-color .2s, border-color .2s; }
.situation strong { font-size: 15px; font-weight: 600; }
.situation small { font-size: 13px; color: var(--muted); }
.situation:hover > span { border-color: #5d6f45; }
.situation input:checked + span { border-color: var(--lime); background: #171f12; }
.situation input:checked + span::before { border-color: var(--lime); background: var(--lime); box-shadow: inset 0 0 0 4px #171f12; }
.situation input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }

/* Anúncios: gestão x verba */
.money-split { display: grid; gap: 8px; margin-top: 22px; }
.split-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-md); font-size: 14px; }
.split-row strong { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.split-row.fee { background: #1d2716; border: 1px solid #4a5d33; }
.split-row.fee strong { color: var(--lime); }
.split-row.budget { border: 1px dashed #4a5640; color: var(--muted); }
.split-row.budget strong { color: var(--text); font-weight: 500; }

.field { display: grid; gap: 8px; font-size: 14px; color: var(--text); }
.field select, .fields input { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #526040; border-radius: 9px; background: #10150c; color: var(--white); font-size: 16px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lime) 50%), linear-gradient(135deg, var(--lime) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

/* Conteúdo: pacotes com compra direta */
.packages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.package { display: flex; flex-direction: column; gap: 16px; padding: 26px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 #ffffff08; }
.package .includes { flex: 1; }
.offer-foot { margin-top: 16px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.offer-foot .text-link { padding: 0; }

.fineprint { color: var(--soft); font-size: 12px; line-height: 1.6; }
.section-fineprint { margin-top: 18px; }

/* ---------- Abordagem, perguntas, contato ---------- */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 84px 0 76px; border-bottom: 1px solid var(--line); }
.approach h2 { font-size: clamp(32px, 3.4vw, 40px); margin-top: 18px; line-height: 1.1; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border: 0; }
.steps span { font-size: 12px; padding-top: 3px; color: var(--lime); font-variant-numeric: tabular-nums; }
.steps p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.steps strong { display: block; font-weight: 600; color: var(--white); margin-bottom: 3px; }

.questions { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 64px 0; border-bottom: 1px solid var(--line); }
.questions h2 { font-size: clamp(32px, 3.4vw, 40px); margin-top: 17px; }
.question-list { min-width: 0; }
.question-list details { border-top: 1px solid var(--line); }
.question-list details:last-child { border-bottom: 1px solid var(--line); }
.question-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--text); }
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary .ic { color: var(--lime); transition: transform .3s var(--ease); }
.question-list details[open] summary .ic { transform: rotate(45deg); }
.question-list summary:hover { color: var(--white); }
.question-list p { font-size: 15px; color: var(--muted); padding: 0 0 20px; line-height: 1.7; max-width: 520px; }

.contact-block { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 70px 0; }
.contact-block h2 { font-size: clamp(40px, 4.4vw, 52px); margin: 18px 0; }
.contact-block p:not(.eyebrow) { font-size: 16px; line-height: 1.7; color: var(--muted); }
.contact-actions { display: grid; justify-items: center; gap: 12px; flex: none; }

.footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; color: var(--soft); font-size: 12px; }
.footer a { display: inline-flex; align-items: center; gap: 4px; }
.footer a:hover { color: var(--white); }
.preview-note { text-align: center; font-size: 12px; background: #1e2418; color: #acbb96; padding: 10px 16px; }
.no-script { padding: 20px 0; font-size: 14px; color: var(--muted); }
.no-script a { text-decoration: underline; color: var(--lime); }

/* ---------- Barra fixa (celular) e aviso ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #0b0d0bf0; border-top: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(110%); transition: transform .35s var(--ease); }
.sticky-cta.is-visible { transform: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); max-width: min(92vw, 420px); padding: 12px 16px; border: 1px solid #4a5d33; border-radius: 12px; background: #1b2315; color: var(--white); font-size: 14px; box-shadow: 0 14px 30px #0008; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Diálogo: requisitos da landing page ---------- */
dialog { width: min(100% - 32px, 520px); max-height: calc(100dvh - 40px); padding: 34px; border: 1px solid #485536; border-radius: 20px; background: #151a11; color: var(--white); overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
dialog[open] { animation: dialog-in .35s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
dialog h2 { font-size: clamp(25px, 3vw, 30px); line-height: 1.15; margin: 14px 0 10px; padding-right: 24px; }
dialog h2:focus { outline: none; }
.close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #cfdbc1; }
.close:hover { background: #ffffff10; }
.close .ic { width: 22px; height: 22px; }
.dialog-intro { font-size: 15px; color: var(--muted); line-height: 1.6; }
.fields { display: grid; gap: 12px; margin: 22px 0 18px; }
.fields label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: var(--white); }
.fields label span { font-weight: 400; font-size: 12px; color: var(--soft); }
.fields input::placeholder { color: #8f9a83; opacity: 1; }
.fields input[aria-invalid="true"] { border-color: #ff8a7a; }
.checks { border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.checks legend { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.check input { width: 18px; height: 18px; accent-color: var(--lime); flex: none; }
.check small { margin-left: 6px; font-size: 12px; color: var(--soft); }
.check:has(input:checked) { border-color: #6d8a3d; background: #18200f; }
.form-error { min-height: 22px; margin: 10px 0 6px; font-size: 14px; color: #ff9d8f; }
.result-list { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.result-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.result-list li.ok .ic { color: var(--lime); margin-top: 3px; }
.result-list li.missing { color: #ffd2c9; }
.result-list li.missing .ic { color: #ff9d8f; margin-top: 3px; }
.dlg-actions { display: grid; gap: 10px; }
.dlg-actions [hidden] { display: none; }
.text-link.back { margin: 14px auto 0; display: flex; color: var(--muted); }

/* ---------- Entrada suave ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 36px; }
  .hero h1 { font-size: clamp(40px, 7vw, 58px); }
  .hero-showcase { width: 100%; max-width: 560px; justify-self: center; }
  .service { padding: 28px; }
  .service-heading { grid-template-columns: 1fr; gap: 16px; }
  .service-heading > p { max-width: 560px; }
  .google-stage { grid-template-columns: .8fr 1.2fr; padding: 20px; gap: 16px; }
  .website-stage, .ads-stage, .content-stage { padding: 20px; gap: 24px; }
  .ads-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .content-stage { grid-template-columns: minmax(0, 1fr); }
  .content-stage .post-gallery { width: 100%; max-width: 560px; margin-inline: auto; }
  .offer { grid-template-columns: 1fr; gap: 24px; }
  .service-shortcuts .sc-path { display: none; }
  .approach, .questions { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  html { scroll-padding-top: 84px; }
  body { font-size: 15px; }
  .shell { width: calc(100% - 32px); }
  .topbar { padding: 20px 0; }
  .wordmark { font-size: 19px; }
  .social { display: none; }
  .hero { padding-top: 22px; gap: 26px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); margin: 18px 0; }
  .lead { font-size: 16px; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-note { text-align: center; }
  .hero-showcase { border-radius: 16px; }
  .showcase-caption { font-size: 11px; padding: 13px 15px; }
  .welcome-cover { padding: 23px; min-height: 310px; }
  .welcome-cover h2 { font-size: 36px; margin-top: 30px; }
  .welcome-topline > span:first-child { max-width: 138px; }
  .welcome-signature { font-size: 9px; }
  .hero-showcase > .source-note { font-size: 10px; }
  .pathway { gap: 8px; padding: 16px 0; font-size: 13px; }
  .pathway li { display: block; }
  .pathway li span { display: block; font-size: 11px; margin-bottom: 2px; }
  .pathway .pathway-arrow { display: flex; }

  .services { padding-top: 56px; }
  .section-heading { display: block; margin-bottom: 20px; }
  .section-heading h2 { font-size: 33px; }
  .section-intro { max-width: none; margin-top: 14px; }
  .service-shortcuts { top: 8px; gap: 3px; padding: 5px; margin-bottom: 18px; border-radius: 13px; }
  .service-shortcuts a { grid-template-columns: 1fr; justify-items: center; min-height: 46px; padding: 6px 2px; }
  .service-shortcuts .sc-name { font-size: 12px; }
  .service-shortcuts .ic { display: none; }
  .service-grid { gap: 22px; }
  .service { padding: 22px 18px; border-radius: 18px; }
  .service-heading { margin-bottom: 22px; }
  .service-heading h3 { font-size: 31px; }
  .service-heading > p { font-size: 15px; line-height: 1.7; }
  .stage { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 22px; border-radius: 14px; }
  .google-stage, .website-stage, .ads-stage, .content-stage { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .stage-copy { padding: 4px 2px 0; }
  .stage-copy h4 { font-size: 30px; margin: 14px 0 10px; }
  .stage-copy h4 br { display: none; }
  .stage-copy .demo-label { margin-top: 12px; }
  .screen-toolbar { font-size: 10px; padding: 11px 10px; }
  .screen-tabs { padding: 8px 8px 0; }
  .screen-footnote { font-size: 10px; padding: 8px 11px 12px; }
  .site-example { max-width: 340px; justify-self: center; transform: rotate(2deg); }
  .sample-nav { padding: 12px 16px; gap: 10px; }
  .sample-nav strong { font-size: 30px; }
  .sample-nav > span { max-width: 90px; text-align: right; line-height: 1.4; }
  .sample-nav .ic { display: none; }
  .sample-hero-copy { inset-inline: 16px; bottom: 16px; }
  .sample-detail { padding: 14px 16px; }
  .sample-detail p { font-size: 20px; }
  .sample-services { margin-inline: 16px; font-size: 9px; }
  .sample-contact { display: block; padding: 14px 16px; }
  .sample-contact > span:first-child { display: none; }
  .sample-contact > span:first-child br { display: none; }
  .sample-button { width: 100%; min-height: 44px; font-size: 12px; }
  .ads-overview-title { font-size: 29px; }
  .service-benefits { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .service-benefits li { padding-top: 14px; }
  .service-benefits li > span { margin-bottom: 6px; }
  .content-stage { gap: 24px; }
  .content-stage .post-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; gap: 0; padding: 20px 6px 32px; }
  .portfolio-card { transform: translateX(8px) rotate(-5deg); border-radius: 9px; }
  .portfolio-card:nth-child(2) { transform: translate(-8px, 14px) rotate(5deg); }
  .portfolio-card:hover, .portfolio-card:focus-within { transform: translateY(-4px) rotate(0); }
  .portfolio-label { padding: 10px 8px; font-size: 8px; }
  .portfolio-label > span:last-child { display: none; }
  .portfolio-card figcaption { padding: 10px 8px; font-size: 11px; }
  .cover-play { width: 40px; height: 40px; }
  .cover-play svg { width: 19px; height: 19px; }
  .content-notes h4 { font-size: 29px; }
  .content-notes h4 br { display: none; }

  .offer { margin-top: 24px; padding-top: 24px; gap: 22px; }
  .offer-box, .package { padding: 20px; }
  .price { font-size: 38px; }
  .packages { grid-template-columns: 1fr; margin-top: 24px; padding-top: 24px; gap: 12px; }
  .split-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* No celular, a oferta já explica o serviço: escondo os textos de apoio dos palcos para encurtar a página. */
  .google-stage .stage-copy, .website-stage .site-notes > .stage-kicker, .website-stage .site-notes ol { display: none; }
  .website-stage .site-notes .demo-label { margin: 0; font-size: 11px; }
  .content-notes .format-tags { margin-top: 12px; }

  .approach { padding: 56px 0 50px; gap: 20px; }
  .questions { padding: 48px 0; gap: 20px; }
  .contact-block { display: block; padding: 52px 0 40px; }
  .contact-block h2 { font-size: 40px; }
  .contact-actions { margin-top: 26px; justify-items: stretch; }
  .contact-actions .text-link { justify-self: center; }
  .footer { flex-wrap: wrap; font-size: 12px; padding-bottom: 96px; }
  .footer > span:nth-child(2) { display: none; }
  .sticky-cta { display: block; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  dialog { padding: 28px 20px 22px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .site-example, .post-gallery figure { transform: none !important; }
}