/* Página de pré-inscrição · Mapa Ponto Cego, Edição 2027
 * Consome ds/tokens.css e ds/ui-kit.css (copiados por montar.sh). Sem hex nem px crus:
 * valor que faltar vira token no repositório do design system. */

*, *::before, *::after { box-sizing: border-box; }

/* Sombra e unidade da página. O DS só tem --shadow-none (a "caixa" das peças é sem sombra); na web
 * a sombra é feita do véu de Raiz, nunca de preto, como pede a regra de fotografia. Proposta a levar
 * ao repositório do design system se for aprovada. --u: o fio do DS é medido em px de 1080. */
.vp-root {
  --u: calc(var(--space-1) / 4);
  --sombra-suave: 0 var(--space-3) var(--space-8) calc(var(--space-3) * -1) var(--color-veu-16);
  --sombra-media: 0 var(--space-6) var(--space-12) calc(var(--space-5) * -1) var(--color-veu-38);
  --sombra-funda: 0 var(--space-8) var(--space-20) calc(var(--space-6) * -1) var(--color-veu-55);
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); }
img { display: block; max-width: 100%; height: auto; }

.faixa-maquete {
  margin: 0; padding: var(--space-2) var(--space-4);
  background: var(--feedback-warningSoft); color: var(--feedback-warningText);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-align: center; text-transform: uppercase;
}

.vp-container { padding-inline: var(--space-4); }
.estreito { max-width: var(--size-container-md); }

/* ---------- Tipografia da página ---------- */
.marca { margin: var(--space-4) 0 var(--space-6); display: grid; gap: var(--space-1); }
.marca__nome {
  font-family: var(--font-sans); font-weight: var(--weight-extrabold);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.marca__edicao {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); line-height: var(--leading-voz);
  color: var(--text-secondary);
}
.voz {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); line-height: var(--leading-voz);
  margin: 0 0 var(--space-8); color: var(--text-onRaizSerif);
}
.titulo {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
  line-height: var(--leading-titulo); letter-spacing: var(--tracking-titulo);
  margin: var(--space-4) 0 var(--space-6);
}
.titulo--claro { color: var(--text-onRaiz); }
.subtitulo { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.intro { margin: 0 0 var(--space-10); font-size: var(--text-md); color: var(--text-secondary); }
.nota { margin-top: var(--space-6); color: var(--text-secondary); font-style: italic; }
.rotulo-claro { color: var(--text-onRaizSoft); }
p { max-width: var(--measure-default); }
.faixa-maquete { max-width: none; }

/* ---------- Seções ---------- */
.secao { padding-block: var(--section-md); }
.secao--clara { background: var(--surface-primary); }
.vp-on-raiz p, .vp-on-raiz li { color: var(--text-onRaiz); }
.vp-on-raiz .vp-fio { background: var(--surface-dourado); }

/* ---------- Topo ---------- */
.topo {
  position: relative; overflow: hidden;
  padding-block: var(--space-10) var(--section-md);
  background:
    radial-gradient(60% 70% at 88% 18%, color-mix(in srgb, var(--surface-dourado) 38%, transparent), transparent 70%),
    radial-gradient(50% 60% at 4% 96%, color-mix(in srgb, var(--surface-nevoa) 24%, transparent), transparent 70%),
    var(--surface-page);
}
.topo__rotulo { display: block; margin-top: var(--space-4); }
.topo__grade { display: grid; gap: var(--space-10); align-items: center; }
.topo__promessa { font-size: var(--text-lg); line-height: var(--leading-snug); margin: 0 0 var(--space-4); }
.topo__apoio { color: var(--text-secondary); margin: 0 0 var(--space-8); }
.topo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; }

/* Moldura: um bloco de cor deslocado atrás da foto (dá profundidade sem sombra preta) */
.moldura { --desloc: var(--space-3); position: relative; margin: 0 var(--desloc) var(--desloc) 0; isolation: isolate; }
.moldura img { position: relative; box-shadow: var(--sombra-funda); }
.moldura::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--desloc) calc(var(--desloc) * -1) calc(var(--desloc) * -1) var(--desloc);
}
.moldura--dourado::before { background: var(--surface-dourado); }
.moldura--fio::before { border: var(--border-hairline) solid var(--border-dourado); }

/* Selo sobre a foto do topo: a "caixa" Raiz do DS, com o número na serifada Dourado */
.selo {
  position: absolute; left: 0; bottom: var(--space-8);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--surface-raiz) calc(var(--grade-caixa-opacidade) * 100%), transparent);
  color: var(--text-onRaiz); box-shadow: var(--sombra-funda); border-left: var(--border-fio) solid var(--border-dourado);
}
.selo__texto strong { font-size: var(--text-md); font-weight: var(--weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.selo__texto span { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-onRaizSerif); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--size-control-lg); padding: 0 var(--space-8);
  background: var(--action-primary); color: var(--action-primaryText);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-decoration: none; text-transform: uppercase;
  border: 0; border-radius: var(--radius-none); cursor: pointer;
  box-shadow: var(--sombra-media);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-normal) var(--motion-easing-standard),
              box-shadow var(--motion-duration-normal) var(--motion-easing-standard);
}
.botao:hover { color: var(--action-primaryHoverText); transform: translateY(calc(var(--space-1) * -0.5)); box-shadow: var(--sombra-funda); }
.botao[disabled] { background: var(--action-disabledBg); color: var(--action-disabledText); cursor: wait; }


/* ---------- Destaques do topo ---------- */
.destaques { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.destaques__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); background: var(--surface-primary);
  border: var(--border-hairline) solid var(--border-strong); box-shadow: var(--sombra-suave);
  font-size: var(--text-sm);
}
.destaques__item--forte { background: var(--surface-raiz); color: var(--text-onRaiz); border-color: var(--surface-raiz); }
.destaques__item--forte strong { color: var(--text-onRaizSerif); }
.selo .selo__numero {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: var(--text-6xl); line-height: var(--leading-none); color: var(--text-onRaizSerif);
}
.selo__texto { display: grid; gap: var(--space-1); align-content: center; }

/* ---------- Demanda × capacidade ---------- */
.balanca { display: grid; gap: var(--space-6); align-items: stretch; margin: var(--space-10) 0; }
.balanca__lado { position: relative; padding: var(--space-8) var(--space-6) var(--space-6); box-shadow: var(--sombra-funda); }
.balanca__lado--pede { background: var(--surface-dourado); color: var(--text-onDourado); }
.balanca__lado--tem { background: var(--surface-primary); color: var(--text-primary); }
.vp-on-raiz .balanca__lado li { color: inherit; }
.balanca__num {
  position: absolute; top: calc(var(--space-5) * -1); left: var(--space-6);
  display: grid; place-items: center; width: var(--space-10); height: var(--space-10);
  border-radius: var(--radius-circle); background: var(--surface-raiz); color: var(--text-onRaizSerif);
  font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-none);
  border: var(--border-thin) solid var(--border-dourado);
}
.balanca__titulo { margin: 0 0 var(--space-5); font-size: var(--text-lg); font-weight: var(--weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.balanca__centro { display: flex; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-onRaizSerif); }
.balanca__desenho { width: var(--space-24); height: auto; }
.balanca__x { font-family: var(--font-serif); font-size: var(--text-4xl); line-height: var(--leading-none); }
.fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fichas li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  border: var(--border-hairline) solid var(--border-raiz);
}
.balanca__lado--pede .fichas li { background: color-mix(in srgb, var(--surface-primary) 45%, transparent); }
.balanca__lado--tem .fichas li { background: var(--surface-page); border-color: var(--border-strong); }

/* ---------- Chamadas (botões no meio da página) ---------- */
.chamada { margin-top: var(--space-10); display: grid; gap: var(--space-3); justify-items: start; }
.chamada--centro { justify-items: center; text-align: center; margin-top: var(--space-12); }
.chamada__nota { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--text-muted); }
.botao--dourado { background: var(--action-secondary); color: var(--action-secondaryText); }
.botao--dourado:hover { color: var(--action-secondaryText); }

/* ---------- Domínios ---------- */
.dominios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.dominios li { padding: var(--space-8) var(--space-6); border-top: var(--border-fio) solid var(--accent); }
.dominios__icone { margin-bottom: var(--space-5); }
.dominios h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.dominios p { margin: 0; color: var(--text-secondary); }


/* ---------- Passos: cartões com ícone, data e número ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.passo { position: relative; padding: var(--space-8) var(--space-6); border-top: var(--border-fio) solid var(--accent); }
.passo__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.passo__num { font-family: var(--font-serif); font-weight: var(--weight-light); font-size: var(--text-5xl); line-height: var(--leading-none); color: var(--surface-nevoa); }
.passo__quando {
  display: inline-block; padding: var(--space-1) var(--space-3); background: var(--surface-raiz); color: var(--text-onRaiz);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.passo h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.passo p { margin: 0; color: var(--text-secondary); }

/* ---------- Para quem é ---------- */
.dupla--persona { align-items: center; }
.foto-persona img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 72% center; }
.intro--escura { color: var(--text-primary); margin-bottom: var(--space-6); }
.topicos__titulo { margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--text-muted); }
.topicos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.topicos li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding: var(--space-4) var(--space-5); background: var(--surface-page); border-left: var(--border-fio) solid var(--border-dourado);
}
.topicos .vp-icon { color: var(--text-primary); margin-top: var(--space-1); }
.nao-inclui { margin-top: var(--section-sm); max-width: none; }
.nao-inclui p { max-width: var(--measure-wide); margin: 0; }

/* ---------- Agenda: calendário com dia da semana ---------- */
.agenda { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-5); position: relative; }
.agenda::before { content: ""; position: absolute; left: calc(var(--space-10) + var(--space-1)); top: var(--space-6); bottom: var(--space-6); border-left: var(--border-hairline) dashed var(--border-raiz); }
.agenda__item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; }
.agenda__dia {
  display: grid; justify-items: center; align-content: center; gap: var(--space-1);
  width: var(--space-24); height: var(--space-24); padding: var(--space-3) var(--space-2);
  background: var(--surface-primary); box-shadow: var(--sombra-media); border-top: var(--border-fio) solid var(--surface-raiz);
}
.agenda__semana { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.agenda__num { font-family: var(--font-serif); font-size: var(--text-3xl); line-height: var(--leading-none); color: var(--text-primary); white-space: nowrap; }
.agenda__mes { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--text-secondary); }
.agenda__item--destaque .agenda__dia { background: var(--surface-dourado); border-top-color: var(--surface-raiz); }
.agenda__item--destaque .agenda__semana, .agenda__item--destaque .agenda__mes { color: var(--text-onDourado); }
.agenda__texto h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-bold); }
.agenda__texto p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------- Redes ---------- */
.redes { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.redes .rede {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  color: var(--text-onRaiz); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  border: var(--border-hairline) solid var(--border-dourado);
  transition: background var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard);
}
.redes .rede:hover { background: var(--surface-dourado); color: var(--text-onDourado); }
.redes--rodape { justify-content: center; margin-top: var(--space-5); }
.redes--rodape .rede { padding: var(--space-2); border-radius: var(--radius-circle); }

/* ---------- Duas colunas ---------- */
.dupla { display: grid; gap: var(--space-10); align-items: center; }
.lista { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.foto-lateral { margin: 0; }
.foto-lateral img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto-lateral--retrato img { object-position: center 30%; }

/* ---------- Números ---------- */
.numeros { list-style: none; margin: var(--space-8) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-10); }
.numeros li { display: grid; gap: var(--space-1); align-content: start; max-width: 20ch; }
.numeros__valor {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: var(--text-5xl); line-height: var(--leading-none); color: var(--text-onRaizSerif);
}
.depoimentos-pendentes {
  margin-top: var(--space-8); padding: var(--space-6);
  border: var(--border-thin) dashed var(--border-onRaiz);
  color: var(--text-onRaizSoft); font-size: var(--text-sm); text-align: center;
}

/* ---------- Datas ---------- */

/* ---------- Formulário ---------- */
.form { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.form.cartao { padding: var(--space-8) var(--space-6); }
.campo { display: grid; gap: var(--space-2); }
.campo label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"] {
  min-height: var(--size-control-lg); padding: 0 var(--space-4);
  font: inherit; color: var(--text-primary); background: var(--surface-primary);
  border: var(--border-thin) solid var(--border-raiz); border-radius: var(--radius-none);
}
.campo--check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-3); }
.campo--check input { width: var(--size-icon-sm); height: var(--size-icon-sm); margin: var(--space-1) 0 0; accent-color: var(--action-primary); }
.campo--check label { font-weight: var(--weight-regular); }
.campo--check .campo__erro { grid-column: 2; }
.campo--oculto { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.campo__erro { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--feedback-errorText); }
.campo.com-erro input { border-color: var(--feedback-errorText); }
.campo__dica { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.campo--fone .vp-select { min-height: var(--size-control-lg); border: var(--border-thin) solid var(--border-raiz); }
.campo__rotulo-fone { margin-top: var(--space-3); }
.fone { display: grid; grid-template-columns: auto 1fr; }
.fone__ddi {
  display: grid; place-items: center; padding: 0 var(--space-4); min-width: var(--space-16);
  background: var(--surface-raiz); color: var(--text-onRaiz); font-weight: var(--weight-semibold);
}
.fone__ddi:empty { display: none; }
.fone:has(.fone__ddi:empty) { grid-template-columns: 1fr; }
.form__status { margin: 0; font-weight: var(--weight-semibold); min-height: var(--space-6); }
.botao--escuro { width: 100%; }

/* ---------- Dúvidas ---------- */
.duvida-zap { margin-top: var(--space-10); display: grid; gap: var(--space-4); justify-items: start; }
.duvida-zap p { margin: 0; font-weight: var(--weight-semibold); }
.botao--claro { background: var(--action-secondary); color: var(--action-secondaryText); }
.botao--claro:hover { color: var(--action-secondaryText); text-decoration: underline; }
.link-zap { font-weight: var(--weight-semibold); color: var(--text-primary); }
details { border-bottom: var(--border-hairline) solid var(--border-strong); padding-block: var(--space-4); }
summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-md); }
details p { margin: var(--space-3) 0 0; color: var(--text-secondary); }

/* ---------- Rodapé ---------- */
.rodape { padding-block: var(--space-12); text-align: center; }
.rodape__aviso { margin: var(--space-6) auto 0; font-size: var(--text-xs); color: var(--text-onRaizSoft); }

/* ---------- Cartões: branco, sombra de véu, sobe de leve no hover ---------- */
.cartao {
  background: var(--surface-primary); box-shadow: var(--sombra-suave);
  transition: transform var(--motion-duration-normal) var(--motion-easing-standard),
              box-shadow var(--motion-duration-normal) var(--motion-easing-standard);
}
.dominios .cartao:hover { transform: translateY(calc(var(--space-1) * -1)); box-shadow: var(--sombra-media); }
.cartao--destaque { padding: var(--space-10) var(--space-6); border-left: var(--border-fio) solid var(--border-dourado); }
.cartao--destaque .vp-fio { display: none; }
.lista--check { list-style: none; padding-left: 0; gap: var(--space-4); }
.lista--check li { position: relative; padding-left: var(--space-8); }
.lista--check li::before {
  content: ""; position: absolute; left: var(--space-1); top: calc(var(--space-2) - var(--space-1) / 2);
  width: var(--space-2); height: var(--space-2); background: var(--surface-dourado);
  transform: rotate(45deg); box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--surface-dourado) 35%, transparent);
}
.secao--clara .cartao { box-shadow: var(--sombra-media); }

/* ---------- Entrada suave ao rolar (só com JS e sem pedido de menos movimento) ---------- */
.js-revelar .revelar { opacity: 0; transform: translateY(var(--motion-distance-md)); }
.js-revelar .revelar.visivel {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard),
              transform var(--motion-duration-slow) var(--motion-easing-standard);
}

/* ---------- Telas largas ---------- */
@media (min-width: 48em) {
  .vp-container { padding-inline: var(--space-8); }
  .topo__grade { grid-template-columns: 1.15fr 1fr; }
  .balanca { grid-template-columns: 1fr auto 1fr; }
  .balanca__centro { flex-direction: column; }
  .dominios { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .dupla--persona { grid-template-columns: 1fr 1.1fr; }
  .agenda { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  .agenda::before { left: var(--space-10); right: var(--space-10); top: calc(var(--space-12) + var(--space-1)); bottom: auto; border-left: 0; border-top: var(--border-hairline) dashed var(--border-raiz); }
  .agenda__item { grid-template-columns: 1fr; justify-items: center; align-items: start; align-content: start; text-align: center; }
  .dupla { grid-template-columns: 1.3fr 1fr; }
  .dupla--foto-esq { grid-template-columns: 1fr 1.4fr; }
  .dupla--simetrica { grid-template-columns: 1fr 1fr; align-items: start; }
  .botao--escuro { width: auto; justify-self: start; }
  .form.cartao { padding: var(--space-12) var(--space-10); }
  .cartao--destaque { padding: var(--space-12); }
  .selo { left: calc(var(--space-10) * -1); }
  .moldura { --desloc: var(--space-6); }
}
@media (min-width: 64em) {
  .dominios { grid-template-columns: repeat(4, 1fr); }
  .passos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .cartao { transition: none; }
  .botao:hover, .dominios .cartao:hover { transform: none; }
}