/* Site de marketing — incluindo.me. Tokens = @theme do app (DESIGN.md).
   Toda cor aqui é um hex do canon (test/lib/marketing_site_test.rb confere). */
:root {
  --color-brand-yellow: #FFDE59; --color-brand-amber: #F5B841;
  --color-brand-ink: #1A1A1A; --color-background: #FDF6E7; --color-surface: #FFFCF3;
  --color-text: #1A1A1A; --color-text-muted: #5C574D; --color-border-control: #A06E1B;
  /* Escala do instrumento: só no mapa ilustrativo, sempre com numeral + rótulo (AD-6). */
  --scale-n1: #AD433B; --scale-n2: #FADF70; --scale-n3: #F2A842;
  --scale-n4: #7CC799; --scale-n5: #D0DF53; --scale-n6: #4E9AD3;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --tap-min: 2.75rem;
  --font-display: "Poppins", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--color-text); text-decoration: underline; text-underline-offset: .2em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999rem; } .skip:focus { left: 1rem; top: 1rem; z-index: 1; display: inline-flex; align-items: center; min-height: var(--tap-min); background: var(--color-surface); padding: .5rem 1rem; }
/* Anel de foco duplo do canon: 2px creme claro por dentro + 2px tinta por fora. */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-brand-ink); border-radius: 4px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* Faixa de marca: amarelo estrutural + uma colmeia. */
.band { background: var(--color-brand-yellow); padding: 1rem 0 1.25rem; position: relative; overflow: hidden; }
.honeycomb { position: absolute; right: -1rem; top: 0; width: 150px; height: 120px; color: var(--color-brand-amber); opacity: .55; pointer-events: none; }
.marca { position: relative; display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; color: var(--color-brand-ink); }
.abelha-p { width: 3rem; height: 2rem; color: var(--color-brand-ink); flex: none; }

/* Hero */
.hero { position: relative; padding-top: 2.5rem; padding-bottom: 3.5rem; }
.abelha-hero { display: none; }
.status { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 9999px; background: var(--color-surface); border: 1px solid var(--color-border-control); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.ponto { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--color-brand-ink); flex: none; }
h1 { margin-top: 1.5rem; font-weight: 800; font-size: 2.25rem; line-height: 1.1; letter-spacing: -.02em; max-width: 16ch; }
.lead { margin-top: 1.25rem; font-size: 1.125rem; max-width: 40rem; }
.sub { margin-top: .75rem; font-size: 1.125rem; color: var(--color-text-muted); max-width: 40rem; }
.ctas { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: .625rem 1.25rem; border-radius: var(--radius-md); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; color: var(--color-brand-ink); }
.btn-primary { background: var(--color-brand-yellow); } .btn-primary:hover { background: var(--color-brand-amber); }
.entrar { color: var(--color-text-muted); }
.entrar a, .rodape a, .nota-legal a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-text); font-weight: 600; }

/* Seções */
.secao { padding-top: 3.5rem; padding-bottom: 3.5rem; border-top: 1px solid var(--color-brand-amber); }
.secao > h2, .como-texto > h2 { font-size: 1.625rem; max-width: 24ch; }
.setas { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 42rem; }
.setas li { position: relative; padding-left: 2.25rem; }
.setas li::before { content: "↘"; content: "↘" / ""; position: absolute; left: 0; top: .1rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 6px; background: var(--color-brand-yellow); color: var(--color-brand-ink); font-size: .875rem; font-weight: 700; line-height: 1; }
.citacao { margin: 2rem 0 0; max-width: 42rem; padding-left: 1rem; border-left: 3px solid var(--color-brand-amber); }
.citacao blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.4; }
.citacao figcaption { margin-top: .5rem; font-size: .875rem; color: var(--color-text-muted); }

/* Como funciona: passos numerados + mapa ilustrativo */
.passos { list-style: none; counter-reset: passo; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.75rem; max-width: 42rem; }
.passos li { counter-increment: passo; position: relative; padding-left: 3.5rem; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 9999px; background: var(--color-brand-yellow); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; }
.passos h3 { font-size: 1.125rem; padding-top: .45rem; }
.passos p { margin-top: .375rem; color: var(--color-text-muted); }
.mapa { margin: 2.5rem 0 0; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-brand-yellow); border-radius: var(--radius-lg); }
.mapa table { border-collapse: separate; border-spacing: .25rem; margin: 0 auto; }
.mapa caption { caption-side: top; text-align: left; padding: 0 .25rem .5rem; font-size: .8125rem; color: var(--color-text-muted); }
.mapa thead th { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); padding: 0 0 .125rem; }
.mapa tbody th { text-align: left; font-size: .8125rem; font-weight: 600; padding-right: .5rem; text-wrap: nowrap; }
.cel { width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min); text-align: center; border-radius: var(--radius-sm); font-weight: 600; font-size: .9375rem; color: var(--color-brand-ink); }
.n1 { background: var(--scale-n1); color: var(--color-surface); }
.n2 { background: var(--scale-n2); } .n3 { background: var(--scale-n3); } .n4 { background: var(--scale-n4); }
.n5 { background: var(--scale-n5); } .n6 { background: var(--scale-n6); }
.vazio { background: var(--color-background); border: 1px dashed var(--color-text-muted); color: var(--color-text-muted); }
.chave { margin-top: .5rem; font-size: .75rem; color: var(--color-text-muted); text-align: center; }
.mapa figcaption { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-brand-yellow); }
.legenda-titulo { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.legenda { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .375rem; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.legenda li { display: flex; align-items: center; gap: .5rem; }
.sw { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: var(--radius-sm); font-size: .8125rem; }

/* Privacidade: o único callout da página */
.callout { margin-top: 1.5rem; max-width: 42rem; border-radius: var(--radius-md); background: var(--color-brand-amber); padding: 1rem 1.25rem; color: var(--color-brand-ink); }
.callout .kicker { font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .1em; }
.callout p + p { margin-top: .5rem; }
.nota-legal { margin-top: 1.5rem; max-width: 42rem; color: var(--color-text-muted); }

/* Quem está por trás */
.quem { position: relative; overflow: hidden; background: var(--color-brand-yellow); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem 2rem; }
.abelha-g { position: relative; width: 6rem; height: 4rem; color: var(--color-brand-ink); }
.quem-texto { position: relative; max-width: 42rem; }
.quem-texto h2 { margin-top: 1rem; font-size: 1.625rem; }
.quem-texto > p { margin-top: .875rem; }
.quem .citacao { border-left-color: var(--color-brand-ink); }
.quem .citacao figcaption { color: var(--color-brand-ink); }

/* Rodapé */
.rodape { border-top: 1px solid var(--color-brand-amber); padding: 2rem 0 3rem; font-size: .875rem; color: var(--color-text-muted); }
.rodape nav { margin-top: .25rem; }
.consultoria { margin-top: .75rem; }

@media (min-width: 640px) {
  h1 { font-size: 3rem; }
  .ctas { flex-direction: row; align-items: center; gap: 1.5rem; }
  .secao > h2, .como-texto > h2 { font-size: 2rem; }
  .quem { padding: 2.5rem; }
}
@media (min-width: 1024px) {
  .hero { padding-top: 4.5rem; padding-bottom: 5rem; }
  h1 { font-size: 3.75rem; }
  .lead, .sub { font-size: 1.25rem; }
  .secao { padding-top: 5rem; padding-bottom: 5rem; }
  .como { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 4rem; align-items: start; }
  .mapa { margin-top: 0; position: sticky; top: 2rem; }
  .quem { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 2.5rem; padding: 3rem; }
  .abelha-g { width: 8rem; height: 5.5rem; }
  .quem-texto h2 { margin-top: 0; }
  .abelha-hero { display: block; position: absolute; right: 1.25rem; top: 50%; width: 26rem; height: 17rem; transform: translateY(-50%); color: var(--color-brand-ink); }
  .duas { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 42rem); column-gap: 4rem; align-items: start; }
  .duas > h2 { grid-row: 1 / span 4; position: sticky; top: 2rem; }
  .duas > :not(h2) { grid-column: 2; }
  .duas > h2 + * { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 160ms ease; }
  .btn:active { transform: scale(.97); transition: transform 160ms cubic-bezier(.23,1,.32,1); }
}