/* Hallmark · shape: Cartaz e ficha · genre: editorial · theme: brand · brand: Vem com a Manu (spec 2026-11-09, pranchas do briefing) · job: join · copy: verbatim
 * paper: oklch(99.4% 0.004 354) · accent: oklch(66.1% 0.244 2.6) · display: Archivo Black · body: Inter · hero: Field (campo rosa, título à esquerda, retrato P&B recortado apoiado na borda de baixo à direita) · nav: band (a faixa branca das pranchas com a assinatura, quatro âncoras e Filie-se) · footer: ink strip (assinatura e links numa linha) · imagery: retrato da Manu (prancha do cliente, provisório) · tela da ficha no celular (capture.mjs) · signature: o retrato P&B da Manu no campo rosa ao lado de "Vem comigo construir o PSOL."
 * axes: light/display-heavy/chromatic-pink · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a página repete o tom do briefing sem tese própria; o cartaz do 6×1 em tipo gigante leva a pauta concreta pro meio da página */
/* Hallmark · waive 44c · retrato da altura do campo, sangrando pela borda direita, rosto na altura do título · é a composição da prancha 1 que o cliente aprovou para a primeira tela */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved (retrato do tamanho do campo e sem máscara, fio entre as ações, soma maior, tela da ficha recortada no celular, 6×1 em escala de cartaz no celular, secundário como link no desktop, viúvas) · gap: retrato provisório recortado da prancha, à espera da foto definitiva */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Archivo Black"; src: url("../fontes/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; src: url("../fontes/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

body { font-size: var(--text-md); }
strong, b { font-weight: 700; }
li, dd, label { text-wrap: pretty; }
a:hover { text-decoration-color: var(--color-accent); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* botões: pílula escura das pranchas */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 2px solid var(--color-action); border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-action-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .botao:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); } }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.botao[aria-busy="true"] { cursor: progress; }
.botao--contorno { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
@media (hover: hover) { .botao--contorno:hover { background: color-mix(in oklab, var(--color-ink) 10%, transparent); border-color: var(--color-ink); } }
.botao--faixa { min-height: 44px; padding: 0 var(--space-md); background: transparent; color: var(--color-ink); border-color: var(--color-ink); font-size: var(--text-sm); }
@media (hover: hover) { .botao--faixa:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } }
@media (prefers-reduced-motion: reduce) { .botao { transition: background-color var(--dur-short) linear; } }

/* faixa do topo, como nas pranchas */
.faixa { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-band); box-shadow: 0 1px 0 var(--color-rule); }
.faixa__in { position: relative; display: flex; align-items: center; gap: var(--space-lg); min-height: var(--band-h); padding-block: var(--space-xs); }
.assinatura { display: grid; gap: var(--space-2xs); flex: none; color: var(--color-ink); text-decoration: none; }
.assinatura__nome { font: var(--display-weight) var(--text-xl)/0.9 var(--font-display); letter-spacing: var(--tracking-display); }
.assinatura__quem { font-size: var(--text-sm); line-height: 1.1; }
.nav { margin-left: auto; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav__links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.nav__abrir { display: none; }

/* abertura: o campo rosa */
.abertura { position: relative; overflow: clip; background: var(--color-field); color: var(--color-on-field); }
.abertura__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); grid-template-areas: "titulo titulo titulo titulo titulo titulo titulo . . . . ." "texto texto texto texto texto texto texto . . . . ." "acoes acoes acoes acoes acoes acoes acoes . . . . ."; grid-template-rows: auto auto 1fr; padding-top: var(--space-2xl); min-height: min(calc(100svh - var(--band-h)), 760px); }
.abertura__titulo { grid-area: titulo; position: relative; z-index: var(--z-raised); max-width: none; font-size: var(--text-display); line-height: 0.92; color: var(--color-on-field); }
.abertura__texto { grid-area: texto; position: relative; z-index: var(--z-raised); max-width: 46ch; margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-field-2); }
.abertura__acoes { grid-area: acoes; position: relative; z-index: var(--z-raised); display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); padding-bottom: var(--space-2xl); align-self: start; }
.abertura__retrato[data-slot] { grid-area: foto; position: absolute; top: var(--space-lg); right: 0; bottom: 0; width: auto; max-width: 46%; aspect-ratio: 1032 / 1200; margin: 0; background: transparent; overflow: visible; }
.abertura__retrato[data-slot] > img { object-fit: contain; object-position: 100% 100%; }
/* o secundário vira link sublinhado no desktop: a pílula cheia é a única no campo */
@media (min-width: 60.0625rem) {
  .abertura__acoes .botao--contorno { padding-inline: 0; border-color: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
  .abertura__acoes .botao--contorno:hover { background: transparent; border-color: transparent; text-decoration-thickness: 3px; }
}
@media (min-width: 60.0625rem) and (max-width: 80rem) { .abertura__acoes { flex-direction: column; align-items: flex-start; } }


/* por que se filiar agora */
.porque { padding-top: var(--section-gap); }
.porque__carta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-bottom: var(--section-gap-s); }
.porque__carta > h2 { grid-column: 1 / -1; }
.porque__abre { grid-column: 1 / span 7; margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.35; max-width: 34ch; }
.porque__feitos { grid-column: 1 / -1; display: grid; gap: 0; margin: var(--space-2xl) 0; padding: var(--space-xl) 0; list-style: none; border-block: 2px solid var(--color-ink); }
.porque__feitos li + li { border-top: 1px solid var(--color-rule); }
.porque__feitos li { padding-block: var(--space-md); font: var(--display-weight) var(--text-display-s)/1.02 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.porque__soma { grid-column: 1 / span 8; font-size: var(--text-xl); font-weight: 700; line-height: 1.3; max-width: 34ch; }
.porque__psol { grid-column: 6 / span 7; margin-top: var(--space-xl); font-size: var(--text-md); line-height: 1.6; max-width: 60ch; }

/* o cartaz do 6×1 */
.cartaz { background: var(--color-field); color: var(--color-on-field); padding-block: var(--space-3xl); }
.cartaz__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.cartaz__numero { grid-column: 1 / span 7; margin: 0; font: var(--display-weight) var(--text-poster)/0.8 var(--font-display); letter-spacing: -0.02em; overflow-wrap: break-word; min-width: 0; font-variant-numeric: tabular-nums; }
.cartaz__texto { grid-column: 8 / span 5; display: grid; gap: var(--space-md); }
.cartaz__texto h3 { font-size: var(--text-display-s); line-height: 1; max-width: 14ch; color: var(--color-on-field); }
.cartaz__texto p { color: var(--color-on-field-2); max-width: 46ch; }
.cartaz__fecho { font-size: var(--text-lg); font-weight: 700; }

/* como funciona */
.funciona { padding-block: var(--section-gap); }
.funciona__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.funciona__texto { grid-column: 1 / span 6; display: grid; justify-items: start; }
.passos { display: grid; margin: var(--space-xl) 0; padding: 0; list-style: none; counter-reset: passo; width: 100%; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); max-width: 60ch; }
.passos li:last-child { border-bottom: 1px solid var(--color-rule); }
.passos li::before { content: counter(passo); grid-row: 1 / span 2; font: var(--display-weight) var(--text-3xl)/0.9 var(--font-display); color: var(--color-accent); }
.passos strong { display: block; font-size: var(--text-lg); }
.funciona__tela[data-slot] { grid-column: 8 / span 5; justify-self: center; width: min(100%, 380px); aspect-ratio: 780 / 1500; margin: 0; border-radius: var(--space-lg); background: var(--color-paper-2); }
.funciona__tela[data-slot] > img { object-position: 50% 0; border-radius: inherit; outline: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent); outline-offset: -1px; }

/* primeira conversa */
.conversa { padding-block: var(--section-gap); background: var(--color-paper-2); }
.conversa__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.conversa__convite { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.conversa__pergunta { font: var(--display-weight) var(--text-2xl)/1.05 var(--font-display); letter-spacing: var(--tracking-display); max-width: 18ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.encontro { display: grid; margin: var(--space-xs) 0 0; }
.encontro > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.encontro > div:last-child { border-bottom: 1px solid var(--color-rule); }
.encontro dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.encontro dd { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.inscricao, .inscricao-feita { grid-column: 8 / span 5; }
.inscricao { display: grid; gap: var(--space-md); }
.inscricao__nota, .inscricao__privacidade { font-size: var(--text-sm); color: var(--color-ink-2); }
.inscricao .botao { justify-self: start; margin-top: var(--space-xs); }
.inscricao__erro { min-height: 1lh; font-size: var(--text-sm); font-weight: 700; color: var(--color-error); }
.inscricao-feita { display: grid; gap: var(--space-sm); padding: var(--space-xl); border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); }
.inscricao-feita__titulo { font: var(--display-weight) var(--text-2xl)/1.05 var(--font-display); }
.inscricao-feita:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* campos (também na ficha) */
.campo { display: grid; gap: var(--space-2xs); min-width: 0; }
.campo > label, .grupo > legend { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.campo-linha { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); }
.entrada { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.3; outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .entrada:hover { background: var(--color-paper-2); } }
.entrada:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; border-color: var(--color-ink); }
.entrada:active { border-color: var(--color-ink); }
.entrada:disabled { opacity: 0.55; cursor: not-allowed; }
.entrada[aria-invalid="true"] { border-color: var(--color-error); }
.entrada::placeholder { color: var(--color-muted); opacity: 1; }
.seletor { position: relative; }
.seletor::after { content: ""; position: absolute; right: var(--space-md); top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.seletor .entrada { appearance: none; padding-right: var(--space-xl); }
.campo__ajuda { min-height: 1lh; margin: 0; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); }
.campo__ajuda.is-erro { color: var(--color-error); font-weight: 700; }
.marcar { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-sm); align-items: start; }
.marcar input { width: 22px; height: 22px; margin: var(--space-3xs) 0 0; accent-color: var(--color-ink); cursor: pointer; }
.marcar input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.marcar input:disabled { opacity: 0.55; cursor: not-allowed; }
.marcar label { cursor: pointer; line-height: 1.45; }
.marcar .campo__ajuda { grid-column: 2; }
.opcional { color: var(--color-ink-2); font-weight: 400; }
.pote { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* dúvidas */
.duvidas { padding-block: var(--section-gap); }
.duvidas__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.duvidas__grade > h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--band-h) + var(--space-xl)); }
.duvidas__lista { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); margin: 0; }
.duvidas__lista > div { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.duvidas__lista dt { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.duvidas__lista dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }

/* fechamento */
.fechamento { background: var(--color-field); color: var(--color-on-field); padding-block: var(--space-3xl); }
.fechamento__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; row-gap: var(--space-xl); }
.fechamento__titulo { grid-column: 1 / span 9; max-width: 13ch; font-size: var(--text-display); line-height: 0.92; color: var(--color-on-field); }
.fechamento__in .botao { grid-column: 10 / span 3; justify-self: end; }

/* rodapé */
.rodape { background: var(--color-foot); color: var(--color-on-foot); padding-block: var(--space-2xl); }
.rodape__in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-xl); }
.assinatura--rodape { color: var(--color-on-foot); }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.rodape__links a { color: var(--color-on-foot); }
.rodape__links a:focus-visible, .assinatura--rodape:focus-visible { outline-color: var(--color-on-foot); }
.rodape .fill { color: var(--color-on-foot); border-color: color-mix(in oklch, var(--color-on-foot) 60%, transparent); }

/* um fato que ainda falta */
.fill { padding: 0 var(--space-2xs); border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); font-weight: 400; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 60rem) {
  :root { --band-h: 72px; }
  .assinatura__nome { font-size: var(--text-lg); }
  .assinatura__quem { font-size: var(--text-xs); }
  .faixa__in { gap: var(--space-sm); }
  .botao--faixa { order: 2; margin-left: auto; }
  .nav { order: 3; margin-left: 0; }
  .js .nav__abrir { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
  .js .nav__abrir:hover { background: var(--color-paper-3); }
  .js .nav__abrir:active { background: var(--color-rule); }
  .js .nav__abrir:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .js .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-md); background: var(--color-band); box-shadow: 0 1px 0 var(--color-rule); }
  .js .nav[data-aberto] .nav__links { display: flex; }
  .js .nav__links a { min-height: 48px; font-size: var(--text-md); }
  html:not(.js) .faixa__in { flex-wrap: wrap; }
  html:not(.js) .nav { flex-basis: 100%; overflow-x: auto; }
  html:not(.js) .nav__links { gap: var(--space-md); }

  .abertura__grade { grid-template-areas: "titulo" "foto" "acoes" "texto"; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: var(--space-xl); min-height: 0; }
  .abertura__titulo { font-size: clamp(2.75rem, 11vw, 4.5rem); }
  .abertura__retrato[data-slot] { position: relative; top: auto; right: auto; bottom: auto; justify-self: end; width: auto; height: clamp(260px, 44svh, 440px); max-width: calc(100% + var(--gutter)); margin: var(--space-md) calc(-1 * var(--gutter)) 0 0; }
  .abertura__acoes { flex-direction: column; margin-top: 0; padding: var(--space-lg) 0 0; }
  .abertura__acoes .botao { width: 100%; }
  .abertura__texto { margin-top: var(--space-lg); padding-bottom: var(--space-2xl); max-width: 60ch; }

  .porque__abre, .porque__soma, .porque__psol { grid-column: 1 / -1; }
  .porque__soma { margin-bottom: 0; }
  .porque__psol { margin-top: var(--space-lg); }
  .cartaz__numero, .cartaz__texto { grid-column: 1 / -1; }
  .cartaz__numero { font-size: min(46vw, 21rem); }
  .cartaz__texto { margin-top: var(--space-lg); }
  .funciona__texto, .funciona__tela[data-slot] { grid-column: 1 / -1; }
  .funciona__tela[data-slot] { width: min(100%, 340px); aspect-ratio: 780 / 640; margin-top: var(--space-xl); }
  .conversa__convite, .inscricao, .inscricao-feita { grid-column: 1 / -1; }
  .inscricao, .inscricao-feita { margin-top: var(--space-2xl); }
  .duvidas__grade > h2, .duvidas__lista { grid-column: 1 / -1; }
  .duvidas__grade > h2 { position: static; margin-bottom: var(--space-xl); }
  .fechamento__titulo, .fechamento__in .botao { grid-column: 1 / -1; justify-self: start; }
  .conversa__pergunta { font-size: var(--text-xl); }
}

@media (max-width: 40rem) {
  .so-largo { display: none; }
  .duvidas__lista { grid-template-columns: minmax(0, 1fr); }
  .encontro > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .inscricao .botao { width: 100%; }
  .fechamento__in .botao { width: 100%; }
  .passos li { grid-template-columns: 3rem minmax(0, 1fr); }
}

/* páginas de texto (privacidade) */
.texto-longo { display: grid; gap: var(--space-md); padding-block: var(--space-2xl) var(--section-gap-s); }
.texto-longo > * { max-width: 68ch; }
.texto-longo h1 { font-size: var(--text-display-s); line-height: 1; }
.texto-longo h2 { margin-top: var(--space-xl); font-size: var(--text-2xl); }
.texto-longo p, .texto-longo li { line-height: 1.7; }
.texto-longo ul { display: grid; gap: var(--space-xs); margin: 0; padding-left: var(--space-lg); }
.texto-longo__lead { font-size: var(--text-lead); }
.texto-longo__data { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }