/* Blocos deste site, na ordem em que aparecem na página. */


:is(h1, h2, h3, .marca, .painel__letra) { font-stretch: var(--font-display-largura); font-weight: var(--font-display-peso); }


/* ── Cabeçalho: marca e WhatsApp ── */
.site-header__inner { gap: var(--space-3); }
.marca { margin-right: auto; font-size: var(--text-lg); white-space: nowrap; }
/* Logo "R." (desenho do Rafael, 2026-10-14): o R na cor do texto, o ponto no vermelhão */
.marca__logo { flex-shrink: 0; width: 2.4rem; height: auto; margin-right: var(--space-2); }
.marca__ponto { fill: var(--color-accent); }
/* Abaixo de 360px só o R. cabe ao lado de "Começar" e do WhatsApp; o nome continua para leitores de tela */
@media (max-width: 359px) {
  .marca__nome, .marca__sobrenome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.btn-icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-icone svg { width: 22px; height: 22px; transition: rotate var(--duration-small) var(--ease-out); }
/* o ícone balança de leve, como o telefone chamando */
.btn-icone:hover svg { rotate: -12deg; }

/* Botão de página no cabeçalho (Ficha do site / Portfólio): contorno, para não disputar com o WhatsApp */
.cabecalho__botao { flex-shrink: 0; min-height: var(--touch-min); padding-inline: var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); }
.cabecalho__botao:hover { background: var(--color-surface); }
/* A Ficha é a ação principal da página: cheia em tinta escura. O WhatsApp continua sendo o único vermelho */
.cabecalho__botao--ficha {
  background: var(--color-text);
  color: var(--color-bg);
  transition: translate var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out);
}
.cabecalho__botao--ficha svg { transition: rotate var(--duration-small) var(--ease-out); }
/* No hover a ficha "sobe da mesa": sombra chapada em vermelho, como a segunda cor de um impresso, e a prancheta inclina */
.cabecalho__botao--ficha:hover { background: var(--color-text); translate: 0 -2px; box-shadow: 0 3px 0 var(--color-accent); }
.cabecalho__botao--ficha:hover svg { rotate: -10deg; }
.cabecalho__botao--ficha:active { translate: 0 0; box-shadow: 0 0 0 var(--color-accent); }

/* Links das seções: só quando cabem ao lado do nome completo, da Ficha e do WhatsApp, sem apertar */
.cabecalho__menu { display: none; }
/* Com o nome inteiro o cabeçalho mede ~1025px (medido na página), então o nome completo só volta a partir de 1200px.
   Entre 960 e 1199px (notebook pequeno, tablet deitado, "versão para computador" do celular, que desenha em 980px)
   o nome encurta para "Rafael Araujo" e os links se aproximam: ~842px em 980px, com ~60px de folga */
@media (min-width: 960px) {
  .cabecalho__menu { display: flex; gap: var(--space-1); margin-right: var(--space-3); }
  .cabecalho__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-small) var(--ease-out);
  }
  /* Hover como seleção no Corel: contorno azul com alças */
  .cabecalho__menu a::after {
    content: "";
    position: absolute;
    inset: var(--space-2) 0;
    pointer-events: none;
    border: 1px solid var(--color-selecao);
    --q: 5px;
    background:
      linear-gradient(var(--color-selecao), var(--color-selecao)) top left / var(--q) var(--q) no-repeat,
      linear-gradient(var(--color-selecao), var(--color-selecao)) top right / var(--q) var(--q) no-repeat,
      linear-gradient(var(--color-selecao), var(--color-selecao)) bottom left / var(--q) var(--q) no-repeat,
      linear-gradient(var(--color-selecao), var(--color-selecao)) bottom right / var(--q) var(--q) no-repeat;
    background-origin: border-box;
    opacity: 0;
    scale: 0.92;
    transition: opacity var(--duration-small) var(--ease-out), scale var(--duration-small) var(--ease-out);
  }
  .cabecalho__menu a:hover { color: var(--color-text); }
  .cabecalho__menu a:is(:hover, :focus-visible)::after { opacity: 1; scale: 1; }
}
/* depois do bloco acima: a mesma especificidade, então a ordem decide */
@media (min-width: 960px) and (max-width: 1199px) {
  .marca__meio { display: none; }
  .cabecalho__menu a { padding-inline: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .cabecalho__menu a::after,
  .cabecalho__botao--ficha,
  .cabecalho__botao--ficha svg,
  .btn-icone svg { transition: none; }
}

/* Nome completo quando cabe; encurta com a tela: Rafael Araujo (< 640px), só Rafael (< 480px), para caber o botão da ficha */
@media (max-width: 639px) {
  .marca__meio { display: none; }
}
@media (max-width: 479px) {
  .marca__sobrenome { display: none; }
}

/* ── Prancha: a folha de papel com régua e marcas de corte (ficha e 404) ── */
.prancha {
  position: relative;
  /* à esquerda, a régua (space-4) e as marcas de corte: o conteúdo começa depois delas */
  padding: var(--space-16) var(--space-6) var(--space-10) calc(var(--space-4) + var(--space-6));
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  background-image:
    repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, var(--color-border) 0 1px, transparent 1px 10px);
  background-size: 100% var(--space-4), var(--space-4) 100%;
  background-repeat: no-repeat;
}
.prancha__corte {
  position: absolute;
  inset: calc(var(--space-4) + var(--space-3)) var(--space-3) var(--space-3) calc(var(--space-4) + var(--space-3));
  pointer-events: none;
  background:
    linear-gradient(var(--color-text), var(--color-text)) top left / 14px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) top left / 1px 14px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) top right / 14px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) top right / 1px 14px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) bottom right / 1px 14px no-repeat;
}
@media (min-width: 900px) {
  .prancha { padding: var(--space-16) var(--space-12) var(--space-12) calc(var(--space-4) + var(--space-12)); }
}

/* ── Seções: respiro menor que o padrão do kit; cabeçalho comum ── */
.secao { padding-block: var(--space-12); }
@media (min-width: 900px) {
  .secao { padding-block: var(--space-16); }
}
.secao__cabeca { display: grid; gap: var(--space-3); max-width: 40rem; margin-bottom: var(--space-10); }
.secao__cabeca h2 { font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.02em; }
.secao__cabeca p { font-size: var(--text-lg); }

/* ── Sites (página de design): cada site é uma prancha ── */
.sites { padding-top: var(--space-4); }
.pranchas { display: grid; gap: var(--space-8); padding: 0; list-style: none; }
.prancha-site { display: grid; align-content: start; background: var(--color-surface); box-shadow: var(--shadow-md); }
.prancha-site__imagem { display: block; overflow: hidden; background: var(--color-bg-alt); }
.prancha-site__imagem img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: scale var(--duration-medium) var(--ease-out); }
a.prancha-site__imagem:hover img { scale: 1.03; }
@media (max-width: 699px) {
  .prancha-site__imagem img { aspect-ratio: 4 / 5; }
}
/* Três blocos com respiro entre eles: identidade (ramo + nome), descrição e ação.
   Sem isso, as cinco linhas ficam com o mesmo espaço e o cartão parece um bloco só. */
.prancha-site__texto { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-6); }
.prancha-site__texto h3 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.prancha-site__ramo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-selecao); }
/* a descrição se separa da identidade por um fio pontilhado, como a dobra de uma prancha */
.prancha-site__descricao {
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}
.prancha-site__texto .link-icone { margin-top: var(--space-3); color: var(--color-accent); }

/* Celular: lista com miniatura à esquerda, para os sites não ocuparem uma tela cada (escolha do Rafael, 2026-09-22) */
@media (max-width: 699px) {
  .pranchas { gap: var(--space-3); }
  .prancha-site { grid-template-columns: 7rem minmax(0, 1fr); }
  :is(.prancha-site__imagem, .prancha-site__imagem picture) { height: 100%; }
  .prancha-site__imagem img { height: 100%; aspect-ratio: auto; object-position: left top; }
  .prancha-site__texto { gap: var(--space-1); padding: var(--space-3) var(--space-4); }
  .prancha-site__texto h3 { font-size: var(--text-lg); }
  .prancha-site__ramo { flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); }
  .prancha-site__descricao { margin-top: var(--space-1); padding-top: var(--space-2); font-size: var(--text-sm); line-height: 1.45; }
  .prancha-site__texto .link-icone { margin-top: 0; font-size: var(--text-sm); }
}

@media (min-width: 700px) {
  .pranchas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prancha-site--destaque { grid-column: 1 / -1; }
  .prancha-site:last-child:nth-child(even) { grid-column: 1 / -1; }
}
/* três colunas só quando há três sites abaixo do destaque; com dois, ficam lado a lado sem buraco */
@media (min-width: 1100px) {
  .pranchas:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pranchas:has(> :nth-child(4)) > .prancha-site:last-child:nth-child(even) { grid-column: auto; }
}
@media (min-width: 1000px) {
  .prancha-site--destaque { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
  .prancha-site--destaque .prancha-site__texto { padding: var(--space-10); }
  .prancha-site--destaque .prancha-site__descricao { margin-top: var(--space-4); padding-top: var(--space-5); }
  .prancha-site--destaque h3 { font-size: var(--text-3xl); }
}

/* ── Como eu trabalho: a seção inteira é uma prancha, com régua no alto ── */
.processo {
  background: var(--color-surface);
  background-image: repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 10px);
  background-size: 100% var(--space-4);
  background-repeat: no-repeat;
}
.passos { display: grid; gap: var(--space-16); padding: 0; list-style: none; }
.passo { display: grid; gap: var(--space-8); padding-top: var(--space-6); border-top: 2px solid var(--color-linha); }
.passo__texto { display: grid; align-content: start; gap: var(--space-3); justify-items: start; }
/* Número pequeno, como a numeração de uma ficha: o peso fica no título do passo (AS-17) */
.passo__numero { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-selecao); }
.passo h3 { font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; }
.passo__texto p:not(.passo__numero) { font-size: var(--text-lg); max-width: 34rem; }
.passo__texto .btn { margin-top: var(--space-2); }

.passo__visual {
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: var(--space-8) var(--space-5);
  background: var(--color-bg);
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}

/* Celular: os mesmos desenhos, a 60% do tamanho; a seção ocupava mais de 4 telas */
@media (max-width: 699px) {
  .passos { gap: var(--space-10); }
  .passo { gap: var(--space-5); }
  .passo__visual { min-height: 0; padding: var(--space-6) var(--space-4); }
  .passo__visual > * { zoom: 0.6; }
}

/* 01 · ficha de briefing */
.ficha { width: min(100%, 20rem); padding: var(--space-6); background: var(--color-surface); box-shadow: var(--shadow-lg); rotate: -2deg; }
.ficha__titulo { margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-selecao); }
.ficha__lista { display: grid; gap: var(--space-3); padding: 0; list-style: none; font-weight: 600; }
.ficha__lista li { display: flex; align-items: center; gap: var(--space-3); }
.ficha__lista li::before {
  content: "";
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--color-linha);
}
.ficha__lista li:nth-child(-n + 3)::before { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-surface); }

/* 02 · painel de referências */
.painel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: min(100%, 22rem); rotate: 1.5deg; }
.painel > * { aspect-ratio: 1; box-shadow: var(--shadow-md); }
.painel__cor--1 { background: var(--color-accent); }
.painel__cor--2 { background: var(--color-selecao); }
.painel__cor--3 { background: var(--color-linha); }
.painel__letra { display: grid; place-items: center; background: var(--color-surface); font-family: var(--font-display); font-size: var(--text-4xl); }
.painel__letra--mono { font-family: var(--font-mono); font-weight: 400; }
.painel__esboco { display: grid; align-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); }
.painel__esboco i { height: 0.5rem; background: var(--color-border); }
.painel__esboco i:first-child { width: 70%; height: 0.9rem; background: var(--color-linha); }
.painel__esboco i:last-child { width: 45%; background: var(--color-accent); }

/* 03 · o site, o vídeo e um post da mesma casa, sobrepostos como provas na mesa */
.trio { position: relative; display: grid; place-items: center; width: min(100%, 24rem); aspect-ratio: 5 / 4; }
.trio > * { position: absolute; box-shadow: var(--shadow-lg); }
.trio__site { left: 6%; top: 2%; width: 36%; z-index: 2; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--color-linha); }
.trio__site img { border-radius: var(--radius-md); }
.trio__story { left: 40%; top: 6%; width: 32%; border-radius: var(--radius-md); rotate: 3deg; }
.trio__post { right: 0; bottom: 4%; width: 32%; rotate: -4deg; z-index: 3; }

/* 03 e 04 · celular com um site de verdade; no 04, marcações de prova de gráfica */
.celular { position: relative; width: min(62%, 14rem); padding: var(--space-2); border-radius: var(--radius-xl); background: var(--color-linha); box-shadow: var(--shadow-lg); }
.celular img { border-radius: var(--radius-lg); }
.celular--prova::before,
.celular--prova::after { content: ""; position: absolute; border: 3px solid var(--color-accent); border-radius: 50%; pointer-events: none; }
/* as marcações acompanham a captura da Pé-Direito: o título embaixo, a cartela conferida em cima */
.celular--prova::before { left: 1%; width: 64%; top: 54%; height: 27%; rotate: -3deg; }
.celular--prova::after { left: 40%; right: 0; top: 25%; height: 26%; rotate: 4deg; }
.marca-prova {
  position: absolute;
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.marca-prova--1 { right: -14%; top: 62%; rotate: 4deg; }
.marca-prova--2 { right: -6%; top: 22%; rotate: -3deg; }

@media (min-width: 900px) {
  .passos { gap: var(--space-24); }
  .passo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-16); }
  .passo:nth-child(even) .passo__texto { order: 2; }
  .passo__visual { min-height: 26rem; }
  .trio { width: min(100%, 30rem); }
}

/* ── Convite logo depois dos sites: quem gostou do que viu já encontra o próximo passo ── */
.convite { padding-bottom: var(--space-12); }
.convite__cartao { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); background: var(--color-surface); box-shadow: var(--shadow-md); }
.convite h2 { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .convite { padding-bottom: var(--space-16); }
  .convite__cartao { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-10); padding: var(--space-8) var(--space-10); }
}

/* ── O que eu entrego: fundo em outro tom, para separar dos Sites ── */
.entrega { background: var(--color-bg-alt); }
.entrega__grade { display: grid; gap: var(--space-6); }
.pacote { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface); box-shadow: var(--shadow-md); }
.pacote h3 { font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.02em; }
.pacote__rotulo { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-selecao); }
.pacote__lista { display: grid; gap: var(--space-3); padding: 0; list-style: none; font-size: var(--text-lg); }
.pacote__lista li { display: flex; gap: var(--space-3); }
.pacote__lista li::before { content: ""; flex-shrink: 0; width: 0.9rem; height: 0.9rem; margin-top: 0.45rem; border: 2px solid var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-surface); }
/* Cartão Vídeo: capa pequena em pé + chamada; abre o vídeo no <dialog> (main.js) */
.pacote__video { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); color: var(--color-text); text-decoration: none; }
.pacote__video img { flex-shrink: 0; width: 4.5rem; aspect-ratio: 9 / 16; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transition: translate var(--duration-small) var(--ease-out); }
.pacote__video span { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.pacote__video b { font-size: var(--text-lg); color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.pacote__video:hover img { translate: 0 -4px; }
.pacote__video:hover b { color: var(--color-accent-hover); }
@media (prefers-reduced-motion: reduce) { .pacote__video img { transition: none; } }

@media (min-width: 900px) {
  .entrega__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .pacote { padding: var(--space-8); }
}

/* ── Dúvidas: acordeão nativo; no desktop, título ao lado ── */
.duvidas { background: var(--color-bg-alt); }
.duvidas__lista { max-width: 44rem; }
.duvidas .acordeao summary { font-weight: 700; font-size: var(--text-lg); }
.duvidas .acordeao p { padding-bottom: var(--space-4); color: var(--color-text-muted); }

@media (min-width: 900px) {
  .duvidas__grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-16); align-items: start; }
  .duvidas .secao__cabeca { margin-bottom: 0; }
}

/* ── Contato: fechamento em magenta, frase curta centralizada ── */
.contato { padding-block: var(--space-16); background: var(--color-accent); color: var(--color-on-accent); }
.contato__inner { display: grid; justify-items: center; gap: var(--space-5); text-align: center; }
.contato h2 { max-width: 18ch; font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; }
.contato__regiao { max-width: 36ch; font-size: var(--text-lg); }
.contato__quem { display: grid; justify-items: center; gap: var(--space-2); font-weight: 600; }
.contato__quem img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 3px solid var(--color-on-accent); }
.btn--claro { background: var(--color-surface); color: var(--color-accent); font-size: var(--text-lg); padding-inline: var(--space-8); }
.btn--claro:hover { background: var(--color-bg); }
.contato__outros { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); padding: 0; list-style: none; }
.contato .link-icone { color: var(--color-on-accent); }
/* Duas saídas, cada uma dizendo para quem é */
.contato__saidas { display: grid; justify-items: center; gap: var(--space-6); }
.contato__saida { display: grid; justify-items: center; gap: var(--space-2); }
.contato__saida p { font-weight: 600; }
@media (min-width: 700px) {
  .contato__saidas { grid-template-columns: repeat(2, auto); align-items: end; column-gap: var(--space-8); }
}

@media (min-width: 900px) {
  .contato { padding-block: var(--space-24); }
}

.btn--claro svg, .btn--contorno svg { width: 20px; height: 20px; }
.btn--contorno { border-color: currentColor; background: transparent; }
.btn--contorno:hover { background: var(--color-surface); }
/* Contorno sobre o vermelhão do contato (página Portfólio): no hover inverte, como o botão claro ao lado */
.btn--contorno-claro { color: var(--color-on-accent); font-size: var(--text-lg); }
.btn--contorno-claro:hover { background: var(--color-on-accent); color: var(--color-accent); }

/* ── Rodapé ── */
.site-footer__contatos { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: 0; list-style: none; }
.site-footer__inner { align-items: center; }
.site-footer .link-icone { color: var(--color-text); }



.erro { padding-block: var(--space-8) var(--space-12); }
.pagina-404 { display: grid; justify-items: start; gap: var(--space-5); }
.pagina-404__codigo { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-selecao); }
.pagina-404__texto { font-size: var(--text-lg); max-width: 36ch; }
.pagina-404__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pagina-404 h1 { font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; }
.pagina-404__vazio {
  display: grid;
  place-items: end start;
  width: min(100%, 22rem);
  aspect-ratio: 16 / 10;
  padding: var(--space-2);
  outline: 1px dashed var(--color-selecao);
  outline-offset: 4px;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--color-border) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--color-border) 50%, transparent calc(50% + 0.5px));
}
.pagina-404__vazio span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-selecao); }
@media (min-width: 900px) {
  .pagina-404 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-12); align-items: center; }
  .pagina-404 > :not(.pagina-404__vazio, .prancha__corte) { grid-column: 1; }
  .pagina-404__vazio { grid-column: 2; grid-row: 1 / span 4; justify-self: end; }
}

/* ── Ficha do seu site (/comecar): a ficha é uma prancha em três partes; a prévia é uma conversa num celular ── */
.comecar { padding-block: var(--space-8) var(--space-16); }
.comecar__grade { display: grid; gap: var(--space-8); }
.comecar__cabeca { display: grid; gap: var(--space-3); max-width: 40rem; }
.comecar__cabeca h1 { font-size: clamp(2rem, 9vw, 4.25rem); line-height: 1; letter-spacing: -0.02em; }
.comecar__cabeca p { font-size: var(--text-lg); }
/* O que acontece depois de preencher, desenhado: ficha → mensagem no WhatsApp da pessoa → resposta */
.promessa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-3); padding: 0; list-style: none; }
.promessa__passo { position: relative; display: grid; align-content: start; gap: var(--space-3); }
.promessa__passo:not(:last-child)::after { content: "→"; position: absolute; top: 1.4rem; right: calc(-1 * var(--space-5) + 2px); font-family: var(--font-mono); color: var(--color-accent); }
.comecar__cabeca .promessa__passo p { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.promessa__peca { display: grid; align-content: center; gap: 5px; height: 4rem; padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-md); }
.promessa__peca i { display: block; height: 5px; border-radius: 2px; background: var(--color-border); }
.promessa__peca--ficha { background: var(--color-surface); rotate: -3deg; }
.promessa__peca--ficha i { display: flex; align-items: center; gap: 5px; height: 7px; background: none; }
.promessa__peca--ficha i::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; background: var(--color-accent); }
.promessa__peca--ficha i::after { content: ""; flex: 1; height: 5px; border-radius: 2px; background: var(--color-border); }
.promessa__peca--ficha i:last-child::before { background: none; box-shadow: inset 0 0 0 1.5px var(--color-linha); }
.promessa__peca--enviada { border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md); background: var(--color-surface); }
.promessa__peca--enviada i:last-child { width: 60%; }
.promessa__peca--resposta { border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); background: var(--color-linha); }
.promessa__peca--resposta i { background: var(--color-text-muted); }
.promessa__peca--resposta i:last-child { width: 55%; background: var(--color-accent); }


/* Só a régua do alto: a lateral e as marcas de corte disputavam espaço com os campos */
.ficha-site { display: grid; padding: var(--space-10) var(--space-5) var(--space-6); background-image: repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 10px); background-size: 100% var(--space-4); }
.ficha-site__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-linha); }
.ficha-site__titulo { font-family: var(--font-display); font-stretch: var(--font-display-largura); font-weight: var(--font-display-peso); font-size: var(--text-xl); line-height: 1.1; }
.ficha-site__progresso { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.ficha-site__progresso span { color: var(--color-accent); font-weight: 600; }

/* Três partes, cada uma com a etiqueta sobre um fio */
.ficha-parte { display: grid; margin-top: var(--space-10); }
.ficha-parte:first-of-type { margin-top: var(--space-8); }
.ficha-parte__rotulo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-stretch: 100%; font-weight: 400; font-size: var(--text-sm); color: var(--color-selecao); }
.ficha-parte__rotulo::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

:where(.ficha-site fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
.pergunta { display: grid; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px dashed var(--color-border); }
.ficha-parte > .pergunta:last-child { border-bottom: 0; padding-bottom: 0; }
.pergunta__titulo { padding: 0; font-size: var(--text-lg); font-weight: 800; line-height: 1.3; }
/* <legend> com float deixa de ser a legenda "especial" do fieldset e vira item da grade, com o mesmo respiro dos outros títulos */
legend.pergunta__titulo { float: left; width: 100%; }
.pergunta__dica { margin-top: calc(-1 * var(--space-3)); font-size: var(--text-sm); color: var(--color-text-muted); }

.campo { display: grid; gap: var(--space-1); }
.campo > span:not(.pergunta__titulo) { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.campo small { font-size: var(--text-sm); color: var(--color-text-muted); }
.campo input,
.campo textarea { width: 100%; padding: var(--space-2) 0; border: 0; border-bottom: 2px solid var(--color-linha); border-radius: 0; background: transparent; font-size: var(--text-lg); }
.campo textarea { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-linha); background: var(--color-bg); resize: vertical; }
/* Dica sutil pelo estilo (itálico, corpo menor, um pouco mais clara), sem cair do AA: 88% dá 5,6 no papel e 4,7 no fundo da caixa de texto */
.campo input::placeholder,
.campo textarea::placeholder { color: var(--color-text-muted); opacity: 0.88; font-size: var(--text-base); font-style: italic; }
.campo :is(input, textarea):focus-visible { outline: none; border-color: var(--color-selecao); box-shadow: 0 2px 0 var(--color-selecao); }
.campo textarea:focus-visible { box-shadow: 0 0 0 1px var(--color-selecao); }

/* Opções de tocar: o input fica por cima do rótulo, invisível, e continua recebendo foco e toque */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.opcoes--lista { display: grid; }
.opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--duration-small) var(--ease-out), background-color var(--duration-small) var(--ease-out);
}
.opcao input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
.opcao span { display: flex; align-items: center; gap: var(--space-3); }
.opcao span::before { content: ""; flex-shrink: 0; width: 1rem; height: 1rem; border: 2px solid var(--color-linha); background: var(--color-surface); }
.opcao:has([type="radio"]) span::before { border-radius: 50%; }
.opcao:hover { border-color: var(--color-linha); }
.opcao:has(:checked) { border-color: var(--color-linha); background: var(--color-bg); }
.opcao:has(:checked) span::before { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-surface); }
.opcao:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Marcada = objeto selecionado no Corel: contorno azul com alças nos cantos */
.opcao:has(:checked)::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  border: 1px solid var(--color-selecao);
  --q: 7px;
  background:
    linear-gradient(var(--color-selecao), var(--color-selecao)) top left / var(--q) var(--q) no-repeat,
    linear-gradient(var(--color-selecao), var(--color-selecao)) top right / var(--q) var(--q) no-repeat,
    linear-gradient(var(--color-selecao), var(--color-selecao)) bottom left / var(--q) var(--q) no-repeat,
    linear-gradient(var(--color-selecao), var(--color-selecao)) bottom right / var(--q) var(--q) no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}

/* Blocos com ícone (ramo, prazo): o ícone e as alças mostram a escolha, sem a bolinha */
.opcoes--blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.opcao--bloco { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 5rem; padding: var(--space-3) var(--space-4); }
.opcao--bloco svg { width: 26px; height: 26px; color: var(--color-text-muted); transition: color var(--duration-small) var(--ease-out); }
.opcao--bloco span::before { display: none; }
.opcao--bloco:has(:checked) svg { color: var(--color-accent); }
.opcoes--prazo { grid-template-columns: minmax(0, 1fr); }
.opcoes--prazo .opcao--bloco { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 3.5rem; }

@media (min-width: 600px) {
  .opcoes--blocos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opcoes--prazo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opcoes--prazo .opcao--bloco { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 5rem; }
}

/* Opção com complemento ("Outro", "Instagram", "Site antigo", "Tenho uma data"...): o campo aparece quando ela é marcada */
.campo--outro { display: none; }
.pergunta:has([data-outro="ramo"]:checked) [data-campo="ramo"],
.pergunta:has([data-outro="cidade"]:checked) [data-campo="cidade"],
.pergunta:has([data-outro="objetivo"]:checked) [data-campo="objetivo"],
.pergunta:has([data-outro="instagram"]:checked) [data-campo="instagram"],
.pergunta:has([data-outro="dominio"]:checked) [data-campo="dominio"],
.pergunta:has([data-outro="site"]:checked) [data-campo="site"],
.pergunta:has([data-outro="prazo"]:checked) [data-campo="prazo"] { display: grid; }

/* Prévia: a mensagem já dentro de uma conversa, no celular */
.previa { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.previa__rotulo { font-family: var(--font-mono); font-stretch: 100%; font-weight: 400; font-size: var(--text-sm); color: var(--color-selecao); }
.conversa { justify-self: stretch; border: var(--space-2) solid var(--color-linha); border-radius: var(--radius-xl); background: var(--color-linha); box-shadow: var(--shadow-lg); overflow: hidden; }
.conversa__topo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); color: var(--color-surface); font-size: var(--text-sm); font-weight: 700; }
/* o avatar é a logo R. no creme, como o ícone do site */
.conversa__avatar { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-bg); color: var(--color-text); }
.conversa__avatar svg { width: 1.5rem; height: auto; }
.conversa__tela {
  display: grid;
  justify-items: end;
  align-content: start;
  min-height: 18rem;
  padding: var(--space-5) var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  background-image:
    linear-gradient(var(--color-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grade) 1px, transparent 1px);
  background-size: 24px 24px;
}
.conversa__balao { position: relative; max-width: 92%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.conversa__balao::after { content: ""; position: absolute; top: 0; right: -9px; border-left: 10px solid var(--color-surface); border-bottom: 10px solid transparent; }
.previa__enviar { margin-top: var(--space-2); font-size: var(--text-lg); }
.previa__aviso { max-width: 34rem; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Celular: a prévia fica no fim, então uma barra lembra o progresso e leva ao envio. Some com o teclado aberto e quando a prévia aparece (js/comecar.js) */
.barra-envio {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--container-padding) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-linha);
  color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
}
.barra-envio[hidden] { display: none; }
.barra-envio span[data-respondidas] { color: var(--color-surface); font-family: var(--font-mono); }
.barra-envio .btn svg { width: 18px; height: 18px; }
@media (max-width: 899px) {
  body:has(.barra-envio:not([hidden])) .comecar { padding-bottom: calc(var(--space-16) + 4.5rem); }
}

@media (min-width: 900px) {
  .comecar { padding-block: var(--space-12) var(--space-24); }
  .comecar__grade { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-12); align-items: start; }
  .comecar__cabeca, .ficha-site { grid-column: 1; }
  .ficha-site { padding: var(--space-12) var(--space-10) var(--space-10); }
  /* top = distância natural da prévia até o topo (cabeçalho 4rem + 1px de borda + respiro da página): assim ela não sobe antes de fixar */
  .barra-envio { display: none; }
  .previa { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(4rem + 1px + var(--space-12)); }
  /* Fio tracejado entre a ficha (rola) e a prévia (fica) */
  .comecar__grade::before { content: ""; grid-column: 2; grid-row: 1 / span 2; justify-self: start; align-self: stretch; margin-left: calc(-1 * var(--space-12) / 2); border-left: 1px dashed var(--color-border); }
}

/* ── Topo: as três opções avulsas (site, vídeo dos stories, posts), cada uma no seu cartão ──
   No celular o cabeçalho fica escondido (fixo, fora da tela) enquanto o topo está na tela; o R. no canto faz as vezes dele. */
.topo { padding-block: var(--space-4) var(--space-6); }
.topo__marca { width: 2.25rem; height: auto; }
@media (min-width: 768px) {
  .topo { min-height: calc(100svh - 4rem); padding-block: var(--space-12) var(--space-10); }
  .topo__marca { display: none; }
}
.cel { border: 5px solid var(--color-linha); border-radius: 1.5rem; overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.cel img { width: 100%; }
.topo__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.topo__grade { display: grid; gap: var(--space-4); }
.topo__titulo { font-size: clamp(1.375rem, 5.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.topo__pacote {
  display: grid; gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "site video" "posts posts" "exemplo exemplo";
}
.peca {
  display: grid; grid-template-rows: auto 1fr; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.peca figcaption { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.3; color: var(--color-text-muted); }
.peca figcaption b { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-stretch: var(--font-display-largura); font-weight: var(--font-display-peso); font-size: var(--text-xl); line-height: 1; color: var(--color-accent); }
.peca__midia { display: grid; place-items: end center; }
.peca--site { grid-area: site; }
.peca--video { grid-area: video; background: var(--color-linha); border-color: var(--color-linha); }
.peca--video figcaption, .peca--video figcaption b { color: var(--color-bg); }
.peca--posts { grid-area: posts; background: var(--color-bg-alt); }
/* celular e vídeo com a mesma altura: 9:19,5 e 9:16 */
.peca--site .cel { width: 66%; border-width: 4px; border-radius: 1.1rem; }
.peca__story { position: relative; width: 76%; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--color-on-accent); }
.peca__story img { width: 100%; }
.peca__story svg { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; }
.peca__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; box-shadow: var(--shadow-md); }
.peca__posts img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.topo__exemplo { grid-area: exemplo; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.topo__acoes .btn { flex: 1 1 0; padding-inline: var(--space-3); }

/* A partir de 600px as três peças ficam lado a lado, na mesma ordem do celular; os posts com o dobro da largura */
@media (min-width: 600px) {
  .topo__pacote {
    gap: var(--space-4);
    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
    grid-template-areas: "site video posts" "exemplo exemplo exemplo";
  }
  .peca__midia { place-items: center; }
  .peca--site .cel { width: 82%; }
  .peca__story { width: 92%; }
  .topo__acoes .btn { flex: 0 0 auto; padding-inline: var(--space-6); }
}
@media (min-width: 900px) {
  .topo__grade { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); row-gap: var(--space-5); align-content: center; }
  .topo__titulo { grid-column: 1; grid-row: 1; font-size: var(--text-3xl); max-width: 24ch; }
  .topo__acoes { grid-column: 2; grid-row: 1; align-self: end; }
  .topo__pacote { grid-column: 1 / -1; gap: var(--space-5); }
  .peca { padding: var(--space-6); gap: var(--space-5); }
  .peca figcaption { font-size: var(--text-sm); }
  .peca figcaption b { font-size: var(--text-3xl); }
  .peca--site .cel { width: min(76%, 11rem); }
  .peca__story { width: min(86%, 12.5rem); }
}

/* Cabeçalho escondido no celular enquanto o topo está na tela (main.js põe a classe) */
@media (max-width: 767px) {
  .cabecalho-esconde .site-header { position: fixed; inset: 0 0 auto; }
  .cabecalho-pronto .site-header { transition: translate var(--duration-medium) var(--ease-out); }
  .cabecalho-esconde .site-header--fora:not(:focus-within) { translate: 0 -100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecalho-pronto .site-header { transition: none; }
}

/* Pergunta que só vale para o site: escondida até marcar "Site" (comecar.js) */
.pergunta[hidden] { display: none; }