/* ============================================================================
   PG-INST.CSS · camada das páginas institucionais (home, método, sobre)
   Pacote P1 da refatoração v2 · 16/09/2026
   Fonte única: docs/branding/MANUAL_DE_MARCA_UMIND_SALES_V4.html (v4)
   Base obrigatória: /assets/ds.css (CSS literal do manual: tokens, .btn, .bc,
   .rd, .lp__*, .corrida, .bg-f1..f6, .u-rule, .u-glow, .u-text-silver,
   .u-text-red-grad, .cta-field). Este arquivo NÃO redefine token de cor:
   só dá ESCALA DE PÁGINA ao que o manual publica em miniatura de catálogo.

   Regras seguidas, com a linha do manual ao lado:
   · escala tipográfica §07 (M:1027-1033): Display 44-56 (40 no celular, D4),
     T1 32, T2 24, T3 19, corpo 17, legenda 12,5, rótulo 11.
   · grade 8pt e raios só {10,14,18,24,cápsula} (M:1048-1056).
   · dobra 1 sempre #18181B, rodapé sempre #0A0A0C, zero borda na junção
     (M:2072, M:2076, M:2256).
   · respiro de corrida 128/64 px, troca de fundo sem divisória (M:2369-2371).
   · profundidade no escuro é LUZ, no claro é sombra FRIA de carbono (M:942, M:2377).
   · nenhum vermelho com opacidade < 100% sobre superfície clara (M:2375).
   ============================================================================ */

/* ---- 1. BASE DE PÁGINA (o ds.css já traz reset, tokens e foco) ------------ */
:root{
  --gutter:24px;
  --respiro:128px;        /* M:2369 */
  --respiro-secao:96px;
  --cab-h:72px;
}
@media (max-width:767px){
  :root{ --gutter:16px; --respiro:64px; --respiro-secao:64px; --cab-h:64px; }
}
html{ background:#18181B; scroll-padding-top:calc(var(--cab-h) + 16px); }
body{
  font-size:1.0625rem; line-height:1.55; letter-spacing:-.01em;
  color:var(--u-text-2); background:#18181B; min-height:100dvh;
  font-variant-numeric:tabular-nums;   /* M:1040: numeral da marca é tabular */
}
img{ display:block; max-width:100%; height:auto; }
ul[class], ol[class]{ list-style:none; padding:0; margin:0; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.2em; }
[id]{ scroll-margin-top:calc(var(--cab-h) + 16px); }
.pular{
  position:absolute; left:-9999px; top:0; z-index:90;
  background:var(--u-surface); color:var(--u-text); padding:12px 20px; border-radius:var(--r-sm);
}
.pular:focus{ left:16px; top:16px; }

/* ---- 2. ESCALA TIPOGRÁFICA §07 ------------------------------------------- */
h1,h2,h3,h4{ color:var(--u-text); text-wrap:balance; font-family:var(--font-display); }
p,li{ text-wrap:pretty; }
.t-display{ font-size:clamp(2.5rem, 1.55rem + 2.6vw, 3.5rem); line-height:1.04; letter-spacing:-.035em; font-weight:700; }
.t-1{ font-size:clamp(1.75rem, 1.45rem + 1vw, 2rem); line-height:1.12; letter-spacing:-.030em; font-weight:700; }
.t-2{ font-size:1.5rem; line-height:1.2; letter-spacing:-.025em; font-weight:600; }
.t-3{ font-size:1.1875rem; line-height:1.3; letter-spacing:-.020em; font-weight:600; }
.t-intro{ font-size:1.1875rem; line-height:1.5; letter-spacing:-.012em; color:var(--u-text-2); }
.t-corpo{ font-size:1.0625rem; line-height:1.55; }
.t-legenda{ font-size:.78125rem; line-height:1.45; letter-spacing:0; color:var(--u-text-3); }
.t-rotulo{
  font-size:.6875rem; line-height:1.3; letter-spacing:.07em; text-transform:uppercase;
  font-weight:600; color:var(--u-text-3);
}
.t-apoio{ color:var(--u-text-3); }
.medida{ max-width:62ch; }
strong,b{ font-weight:600; color:var(--u-text); }
em,i{ font-style:normal; color:var(--u-text); }     /* §07.3: itálico não é ênfase */
.num{ font-variant-numeric:tabular-nums; }
/* o nome da marca é uma unidade de leitura INLINE (M:784). Sem estas linhas ele
   herda o display:block dos seletores de descendente das legendas e cada nome
   cai numa linha só dele (medido em /sobre: "Fundei a / UMIND Sales / com o /
   Miguel Loureiro" em 4 linhas). */
.u-brand{ white-space:nowrap; }
.seq .u-brand, .stats .u-brand,
.s7-nums--pg .s7-num-tile span .u-brand{ display:inline; }
::selection{ background:#DD0B17; color:#FFFFFF; }

/* ---- 3. ESTRUTURA E CORRIDAS --------------------------------------------- */
.wrap{
  width:100%; max-width:1200px; margin-inline:auto;
  padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.wrap--texto{ max-width:760px; }
.corrida{ position:relative; padding-block:var(--respiro); border:0; }
.corrida + .corrida.bg-f2, .corrida + .corrida.bg-f3{ padding-top:0; }
.secao + .secao{ margin-top:var(--respiro-secao); }
.pilha{ display:flex; flex-direction:column; gap:24px; }
.pilha--16{ gap:16px; }
.centro{ text-align:center; }
.cabeca{ max-width:34ch; }
.cabeca .t-rotulo + h2{ margin-top:12px; }
.duas{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
@media (min-width:900px){
  .duas{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; }
  .duas--igual{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .duas--centro{ align-items:center; }
}

/* a dobra clara carrega os tokens do tema claro do manual (M:95-106);
   a classe .tpl-light do ds.css faz isso, aqui só o que a página precisa */
.bg-f1, .bg-f6{ color:var(--u-text-2); }

/* ---- 4. HERÓI CENTRADO (peça PG-1a, M:1746-1782) ------------------------- */
.pg-heroi{ text-align:center; position:relative; isolation:isolate; }
.pg-heroi__eyebrow{ font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--u-text-3); }
.pg-heroi h1{ margin:20px auto 0; max-width:19ch; }
.pg-heroi__sub{ margin:24px auto 0; max-width:56ch; font-size:1.1875rem; line-height:1.5; color:var(--u-text-2); }
.pg-heroi__acao{ margin-top:32px; display:flex; justify-content:center; }
.pg-heroi__nota{ margin-top:16px; font-size:.9375rem; color:var(--u-text-3); }
/* herói com retrato (saída 1 da lei do vão morto, M:4309): só a página /sobre */
.pg-heroi--retrato{ text-align:left; display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
.pg-heroi--retrato h1, .pg-heroi--retrato .pg-heroi__sub{ margin-inline:0; max-width:none; }
.pg-heroi--retrato .pg-heroi__acao{ justify-content:flex-start; }
@media (min-width:900px){
  .pg-heroi--retrato{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center; }
}
.retrato{ border-radius:var(--r-xl); overflow:hidden; background:var(--u-well); }
.retrato img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

/* ---- 4b. NÚMEROS DO HERÓI .lp__stats em escala de página (M:1774-1778) --- */
.stats{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:32px clamp(32px,8vw,96px); padding:0; margin-top:64px;
}
.stats > div{ text-align:center; }
.stats b{
  display:block; font-family:var(--font-display); font-size:clamp(2.25rem,1.6rem + 1.8vw,3rem);
  font-weight:700; letter-spacing:-.05em; line-height:.92; color:var(--u-text);
  font-variant-numeric:tabular-nums;
}
.stats > div > span{ display:block; margin-top:12px; font-size:.9375rem; line-height:1.35; color:var(--u-text-3); max-width:22ch; }

/* ---- 5. SEQUÊNCIA .lp__seq em escala de página (M:1768-1772) ------------- */
/* o ds.css é o catálogo em MINIATURA: .lp__seq span vale 10,5 px e .lp__stats
   span 10,5 px, por descendência. Quem está aninhado (o nome da marca) herdava
   esses 10,5 px no meio de uma legenda de 15. Esta linha devolve a herança; a
   escala de página vem das regras de filho direto logo abaixo. */
.seq span, .stats span{ font-size:inherit; display:inline; color:inherit; }
.seq{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px clamp(24px,4vw,48px); margin-top:48px;
}
.seq > div{ min-width:0; }
.seq b{
  display:block; font-family:var(--font-display); font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  font-weight:700; letter-spacing:-.035em; line-height:1.1; color:var(--u-text);
}
.seq b.q{ color:var(--u-red-ink-dark); }
.seq > div > span{ display:block; margin-top:8px; font-size:.9375rem; line-height:1.45; color:var(--u-text-3); }
.centro .seq{ justify-content:center; }

/* ---- 6. PAREDE DE NÚMEROS (peça S69, M:7011-7032) ------------------------ */
/* A escala de página vem do P0 (.s7-nums--pg em site.css §15.9). Aqui só o
   número de colunas: o .s7-nums do manual é um slide de 4 células e a página
   tem 3 números; célula vazia no fim é grade planejada errada. Sem crédito
   inventado: a linha <em> de fonte e data só entra quando Valdemiro Ferreira
   informar a fonte de cada número. */
.s7-nums--pg{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  align-content:start; flex:none;
}

/* ---- 7. CARTÃO DE AVALIAÇÃO formato Google (peça S61, M:6535-6578) ------- */
/* Sem estrelas: não temos avaliação pública com nota para citar, e estrela sem
   avaliação real seria registro fabricado. O resto da peça é literal. */
.gcard{
  background:#FFFFFF; border-radius:var(--r-lg); padding:32px;
  box-shadow:0 1px 2px rgba(10,10,12,.05), 0 10px 26px -12px rgba(10,10,12,.16);
  max-width:56ch;
}
.gcard__head{ display:flex; align-items:center; gap:16px; }
.gcard__disco{
  width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:#DD0B17; color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1; opacity:1;
}
.gcard__quem b{ display:block; font-family:var(--font-display); font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:#18181B; }
.gcard__quem span{ display:block; margin-top:2px; font-size:.875rem; color:#6C6C70; }
.gcard__fala{ margin-top:24px; font-size:1.1875rem; line-height:1.5; color:#52525B; }
.gcard + .gcard__nota{ margin-top:24px; font-size:1rem; color:var(--u-text-3); }

/* ---- 8. LISTA DE DOR: separação por fio, nunca por caixa (M:808-809) ----- */
/* separação por RESPIRO, nunca por moldura nem por fio em cada linha (M:808-809) */
.lista-fio > li + li{ margin-top:32px; }
.lista-fio b{ display:block; font-family:var(--font-display); font-size:1.1875rem; font-weight:600; letter-spacing:-.02em; line-height:1.3; color:var(--u-text); }
.lista-fio p{ margin-top:8px; font-size:1rem; color:var(--u-text-2); }
.lista-traco{ margin-top:16px; }
.lista-traco > li{ position:relative; padding-left:20px; font-size:.9375rem; line-height:1.5; color:var(--u-text-2); }
.lista-traco > li + li{ margin-top:8px; }
.lista-traco > li::before{ content:""; position:absolute; left:0; top:.7em; width:10px; height:1px; background:var(--u-border-emphasis); }

/* ---- 9. NUMERAIS EM DISPLAY (o número é o elemento gráfico, M:813-814) --- */
.numerais{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; counter-reset:n; }
.numerais > li{
  counter-increment:n; display:grid; grid-template-columns:minmax(0,1fr); gap:16px;
  padding-block:40px; border-top:1px solid var(--u-hairline);
}
.numerais > li:first-child{ border-top:0; padding-top:0; }
@media (min-width:768px){
  .numerais > li{ grid-template-columns:120px minmax(0,1fr); gap:40px; align-items:start; }
}
.numerais > li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--font-display); font-size:clamp(2.5rem,1.9rem + 1.6vw,3rem); font-weight:700;
  letter-spacing:-.05em; line-height:.92; color:var(--u-text-3); font-variant-numeric:tabular-nums;
}
.numerais__cat{ margin-top:4px; }
.numerais__p{ margin-top:12px; font-size:1.0625rem; line-height:1.5; color:var(--u-text-2); }
.numerais__fecho{ margin-top:16px; font-size:.9375rem; line-height:1.5; color:var(--u-text-3); }

/* ---- 10. QUATRO PASSOS EM LINHA ----------------------------------------- */
.passos{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; margin-top:48px; }
@media (min-width:768px){ .passos{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; } }
.passos > li{ padding-top:20px; border-top:2px solid var(--u-border-default); }
.passos h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:var(--u-text); }
.passos p{ margin-top:8px; font-size:.9375rem; line-height:1.5; color:var(--u-text-2); }

/* ---- 11. FRASE DE IMPACTO ----------------------------------------------- */
.frase{
  font-family:var(--font-display); font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.25; color:var(--u-text);
  max-width:34ch; text-wrap:balance;
}

/* ---- 12. BLOCO DE CHAMADA BC1/BC2 (M:2202-2234) -------------------------- */
/* degradê, canto e escala de página vêm do ds.css + .bc__blk--pg do P0.
   O que falta lá é o LIMITE do bloco quando o hospedeiro é a corrida inteira:
   o ds.css publica a regra só para filho direto de .bg-f#. Mesmos valores. */
.bg-f2 .bc__blk, .bg-f3 .bc__blk, .bg-f5 .bc__blk{
  box-shadow:0 0 0 1px #FFFFFF, inset 0 1px 0 rgba(255,255,255,.16);
}
.bg-f1 .bc__blk, .bg-f6 .bc__blk{ box-shadow:0 18px 44px -22px rgba(24,24,27,.55); }
.bc--sozinho{ max-width:760px; margin-inline:auto; }
/* o título do bloco é <h3> e não <h4>: dentro de uma dobra que abre em <h2>,
   pular para h4 quebra a ordem de cabeçalhos (medido pelo Lighthouse em
   /, 16/09). Mesmos valores que o P0 deu ao h4 em site.css §15.8. */
.bc__blk--pg .bc__ttl{
  font-family:var(--font-display); font-weight:700; color:#FFFFFF;
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height:1.1;
  letter-spacing:-.034em; max-width:18ch; text-wrap:balance;
}
.bc--center.bc__blk--pg .bc__ttl{ margin-inline:auto; }

/* ---- 13. CHAMADA FINAL dentro do campo vermelho F4 (M:2193-2196) --------- */
.bg-f4{
  --u-text:#FFFFFF; --u-text-2:#FFFFFF; --u-text-3:#FFFFFF; --u-focus:#FFFFFF;
  color:#FFFFFF; text-align:center;
}
.bg-f4 h2{ color:#FFFFFF; max-width:26ch; margin-inline:auto; }
.bg-f4{ padding-block:calc(var(--respiro) * 1.5); }   /* 5 a 10% da altura da página, M:2195 */
.bg-f4 .acao{ margin-top:40px; display:flex; justify-content:center; }
/* vermelho sobre vermelho não existe: dentro do campo o botão inverte (M:1731-1736) */
.bg-f4 .btn-primary{ background:#FFFFFF; color:#0A0A0C; box-shadow:0 8px 24px rgba(10,10,12,.22); }
@media (max-width:767px){ .bg-f4{ min-height:max(50svh,360px); display:flex; align-items:center; } }

/* ---- 14. BOTÕES em escala de página (o ds.css traz campo, seta e inversão) */
.btn{ font-size:1rem; min-height:48px; padding:0 24px; }
.btn:active{ transform:scale(.98); }
.btn-primary:hover{ background:#C50A14; }
.btn-on-field:hover{ background:#F4F4F5; }
.btn-secondary:hover{ background:var(--u-surface-hover); border-color:var(--u-text-3); }
@media (prefers-reduced-motion:reduce){ .btn:active{ transform:none; } }

/* ---- 15. ALVO DE 44 px em link dentro de texto (M:1055) ------------------ */
.t-apoio a, .t-intro a, .t-corpo a, p a, figcaption a, .gcard a{
  display:inline-block; padding-block:12px; margin-block:-12px;
  color:var(--u-text); text-decoration-color:var(--u-border-emphasis);
}
.t-apoio a:hover, .t-intro a:hover, p a:hover{ text-decoration-color:currentColor; }

/* ---- 16. HEADLINE PRATEADA T1 / MARCA EM DEGRADÊ T2 (M:1204-1262) -------- */
/* o recorte vem do ds.css; aqui só o respiro da descida do prateado */
.u-text-silver{ padding-bottom:.06em; }

/* ---- 17. MOLDURA -------------------------------------------------------- */
/* cabeçalho PG-6 e rodapés RD1/RD2/RD3 são os partials do P0 (partials/*.html),
   estilizados por assets/site.css. Esta folha não os redefine.
   Única divergência declarada: nestas três páginas o botão do cabeçalho é
   SECUNDÁRIO, porque o herói já tem a ação primária vermelha e o manual manda
   uma ação primária por tela (M:1723). Registrado no RELATORIO_P1.md. */

/* correção de alvo no rodapé RD2 do P0: o link "Blog" mede 31 px de largura
   (a folha do P0 fixa só a altura). Alvo de toque é 44 em ambos os eixos (M:1055).
   Trocar por uma regra em site.css quando o P5 enxugar a folha. */
.rodape--rd2 .rodape__inline a{ min-width:44px; justify-content:center; }