/* ============================================================
   PROMPTHUB — GLOBAL CSS
   Fonte: ref/DESIGN-SYSTEM-PROMPTHUB.md v1.3
   Estrutura herdada do Cora Render; cor, marca e padronagem próprias.

   REGRA: nenhum valor literal de cor, espaço, raio ou duração
   aparece em CSS de componente. Tudo sai daqui.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&display=swap');

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  /* --- cor: superfícies e texto (herdado do Cora Render) --- */
  --ink:        #111111;  /* texto principal e títulos */
  --ink2:       #5b5b57;  /* texto de apoio · 6,30:1 sobre --wash */
  --ink3:       #8e8e88;  /* divisória e ícone decorativo · 3,29:1, nunca em texto */
  --paper:      #ffffff;  /* fundo de cartão e painel */
  --wash:       #f5f5f3;  /* fundo padrão de seção · off-white do guia 9barra7-ui */
  --wash2:      #efefeb;  /* fundo alternado e hover de superfície */
  --preto:      #000000;  /* blocos invertidos */
  --line:       #e4e4df;  /* borda de cartão e divisória */
  --line2:      #d2d2cb;  /* borda em hover · nunca em controle interativo */
  --sobre-escuro: rgba(255,255,255,.72); /* texto sobre preto · 10,59:1 */
  --linha-sobre-escuro: rgba(255,255,255,.14); /* --line some sobre preto */
  --sobre-escuro-fraco: rgba(255,255,255,.46);  /* 4,54:1 — piso do que ainda passa */

  /* --- superfície invertida: bloco preto ---
     Título em --paper (21:1) e texto de apoio em --sobre-escuro
     (10,59:1). O rótulo do botão laranja NÃO inverte: continua
     preto, porque branco sobre laranja dá 2,99:1. */
  --inverso-fundo:  var(--preto);
  --inverso-titulo: var(--paper);
  --inverso-apoio:  var(--sobre-escuro);
  --inverso-linha:  var(--linha-sobre-escuro);

  /* --- vidro sobre foto ---
     Pedido do cliente. Contraria a §5.5 do design system, que
     lista vidro líquido como ausência deliberada. O fundo a 72%
     é o piso: sobre a foto mais clara possível, texto branco
     ainda dá 6,4:1. Abaixo disso reprova. */
  --vidro-fundo:    rgba(0,0,0,.72);
  --vidro-claro:    rgba(255,255,255,.08); /* vidro sobre superfície escura */
  --vidro-claro-linha: rgba(255,255,255,.16);
  --vidro-linha:    rgba(255,255,255,.18);
  --vidro-desfoque: 20px;

  /* --- cor: identidade PromptHub --- */
  --laranja:    #fb6616;  /* cor de ação: CTA, acento, formas */
  --laranja-hover: #e0570d; /* = --p-laranja-600 do guia */
  /* anel de foco: --laranja reprova o piso de 3:1 da 1.4.11 sobre fundo
     claro (2,99:1 em --paper e 2,77:1 em --wash). O tom de hover passa
     nos três fundos da página: 3,68:1 · 3,40:1 · 5,71:1 sobre preto. */
  --foco:       var(--laranja-hover);
  --preto-hover:   #1c1c1c;
  --azul:       #7caee0;  /* cor de imagem: padronagem e material de marca */
  --alerta:     #c4443a;  /* erro de sistema. única cor de alerta */

  /* --- cor: texto sobre campo colorido ---
     Sobre laranja ou azul o texto é PRETO. Piso de 70% de opacidade:
     55% reprova (3,67:1 sobre azul · 3,34:1 sobre laranja). */
  --sobre-campo:       rgba(0,0,0,1);
  --sobre-campo-apoio: rgba(0,0,0,.7);   /* 5,44:1 azul · 4,68:1 laranja */
  --linha-sobre-campo: rgba(0,0,0,.12);  /* --line some sobre azul (1,83:1) */

  /* --- espaço --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  /* --- marcador circular --- */
  --marca-xs: 12px; --marca-sm: 28px; --marca-md: 36px;

  /* --- layout --- */
  --largura-max: 1180px;
  --gutter: 20px;
  --altura-cabecalho: 0px; /* a página não tem cabeçalho fixo desde 14/10 */
  --secao-y: var(--e-8);
  --medida: 46ch; /* cap de texto corrido ≈ 65 caracteres reais */

  /* --- forma --- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 100px;
  --sublinhado: 1px; --sublinhado-hover: 2px;

  /* --- elevação: sem sombra por padrão --- */
  /* as quatro do guia 9barra7-ui; a página usa a 3 */
  --sombra-1: 0 1px 2px rgba(0,0,0,.05);
  --sombra-2: 0 4px 16px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sombra-3: 0 8px 32px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.05);
  --sombra-4: 0 24px 64px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
  --sombra-flutuante: var(--sombra-3);

  /* --- movimento · teto de 300ms para UI --- */
  --tr-press:    140ms;
  --tr-rapida:   140ms;
  --tr-padrao:   180ms;
  --tr-acordeao: 260ms; /* = --tr-painel do guia (140 · 180 · 260) */
  --tr-menu:     260ms;
  --tr-entrada:  260ms;
  --easing:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* --- tipografia --- */
  --peso-corpo:         400;
  --peso-corpo-inverso: 350; /* sobre preto o texto engrossa opticamente */
  --fonte: 'DM Sans', system-ui, -apple-system, sans-serif;
  --fonte-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (min-width: 768px){
  :root{ --gutter: 24px; --secao-y: 80px; } /* = IA Studio */
}
@media (min-width: 1024px){
  :root{ --gutter: 32px; --secao-y: 104px; } /* = IA Studio */
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--fonte);
  font-optical-sizing: auto; /* o eixo óptico da DM Sans fica ativo de propósito */
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden; /* rede de segurança final contra estouro horizontal */
}

@media (min-width: 1024px){ body{ font-size: 17px; } }

h1, h2, h3, h4{
  margin: 0;
  font-weight: 500; /* autoridade vem de tamanho + tracking, não de peso */
  text-wrap: balance;
}
p{ margin: 0; text-wrap: pretty; }
img, svg, video{ max-width: 100%; display: block; }

a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--sublinhado);
  text-underline-offset: 2px;
}
/* O hover engrossa o sublinhado e escurece o texto. NÃO usa --laranja:
   laranja sobre --paper dá 2,99:1 e sobre --wash 2,77:1, os dois abaixo
   do mínimo. Laranja nunca é cor de texto sobre fundo claro. */
@media (hover: hover) and (pointer: fine){
  a:hover{ color: var(--preto); text-decoration-thickness: var(--sublinhado-hover); }
}

/* âncora não fica atrás do cabeçalho fixo */
[id]{ scroll-margin-top: calc(var(--altura-cabecalho) + var(--e-4)); }

/* ------------------------------------------------------------
   3. TIPOGRAFIA
   Tracking é função do tamanho E do peso: quanto maior, mais
   negativo; texto pequeno recebe tracking positivo. Peso ≥600
   recebe −0.01em sobre o valor do tamanho.
   ------------------------------------------------------------ */
/* escala igual à do IA Studio (14/10, pedido do William: padronizar com a
   página irmã). Mesmos valores, inclusive no celular. */
.display{ font-size: clamp(30px, 4.8vw, 64px); font-weight: 500; letter-spacing: -0.038em; line-height: 1.08; max-width: 16ch; }
.h2{ font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.032em; line-height: 1.14; }
.h3{ font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.h3-cartao{ font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.028em; line-height: 1.08; }
.h4{ font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }

.corpo-g{ font-size: clamp(16px, 1.2vw, 19px); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.corpo{ font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.55; }
.corpo-m{ font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.55; }
.corpo-p{ font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.legenda{ font-size: 13px; font-weight: 400; letter-spacing: .01em; line-height: 1.45; }

/* único caps do sistema */
.eyebrow{ font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }

.numero{ font-size: clamp(48px, 7vw, 96px); font-weight: 600; letter-spacing: -0.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.numero-preco{ font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }

/* .corpo fica em 16 px em todas as telas, como no IA Studio */

.prosa{ max-width: var(--medida); }
.apoio{ color: var(--ink2); }

/* piso de 11px: nenhum texto abaixo disso, nem em etiqueta */

/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */
.wrap{ max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--gutter); }
.secao{ padding-block: var(--secao-y); }

.pilha{ display: flex; flex-direction: column; }
.linha{ display: flex; align-items: center; }

/* sangra até a borda da viewport a partir de dentro do .wrap */
.sangra{ margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 1024px){
  .sangra{ margin-inline: calc((100vw - var(--largura-max)) / -2 - var(--gutter)); }
}

/* grades: nunca pulam de 1 para 4 */
.grade--2, .grade--3, .grade--4{ display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px){
  .grade--2, .grade--3, .grade--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .grade--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   5. COMPONENTES
   ------------------------------------------------------------ */

/* --- botão: um só tamanho, pílula, altura 48px --- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; min-width: 160px; padding: var(--e-3) var(--e-5);
  border: 0; border-radius: var(--r-pill);
  font-family: inherit; font-size: 15px; font-weight: 600;
  white-space: nowrap; /* rótulo nunca quebra: destruiria a pílula */
  cursor: pointer; text-decoration: none;
  transition: background-color var(--tr-padrao) var(--easing),
              border-color var(--tr-padrao) var(--easing),
              transform var(--tr-press) var(--easing);
}
.btn:active{ transform: scale(.97); }
.btn[aria-disabled="true"]{ opacity: .4; cursor: not-allowed; }

/* laranja é a ação. o rótulo é PRETO: branco sobre laranja dá 2,99:1 */
.btn--laranja{ background: var(--laranja); color: var(--ink); }
.btn--linha{ background: transparent; color: var(--ink); border: 1px solid var(--ink3); }
.btn--escuro{ background: var(--preto); color: var(--paper); }
.btn--claro{ background: var(--paper); color: var(--ink); }
.btn--largo{ width: 100%; }

@media (hover: hover) and (pointer: fine){
  .btn--laranja:hover{ background: var(--laranja-hover); }
  .btn--linha:hover{ border-color: var(--ink); }
  .btn--escuro:hover{ background: var(--preto-hover); }
}

/* --- cartão: destaque por borda, nunca por sombra --- */
.cartao{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--e-5);
  transition: border-color var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing);
}
@media (hover: hover) and (pointer: fine){
  .cartao--interativo:hover{ border-color: var(--line2); transform: translateY(-2px); }
}

/* --- marcação de pendência: sinaliza asset que falta --- */
.marcacao{
  background: repeating-linear-gradient(45deg,
    rgba(251,102,22,.10), rgba(251,102,22,.10) 8px,
    transparent 8px, transparent 16px);
  border: 1px dashed var(--laranja);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--ink);
  font-family: var(--fonte-mono); font-size: 12px;
  padding: var(--e-3);
}

/* ------------------------------------------------------------
   6. PADRONAGEM
   Círculo, semicírculo e vazio. Um diâmetro por peça, igual à
   ALTURA do campo: as formas encostam no topo e na base, nunca
   são cortadas na vertical. Ficam coladas umas às outras, e o
   vazio é uma peça removida do encaixe, com a largura exata que
   ela ocuparia. Semicírculos sempre na mesma orientação, e podem
   repetir em sequência.

   Uso: defina --d na .padrao (o diâmetro = a altura).
   ------------------------------------------------------------ */
.padrao{
  --d: 180px;
  height: var(--d);
  background: var(--azul);
  overflow: hidden;
  position: relative;
}
.padrao__fila{ display: flex; align-items: center; height: 100%; }
.padrao__o{ flex: none; width: var(--d); height: var(--d); background: var(--laranja); border-radius: 50%; }
/* O raio precisa ser relativo, não var(--r-pill): 100px só produz
   semicírculo enquanto o diâmetro for pequeno. Acima disso a peça
   vira retângulo arredondado e o encaixe desmancha. */
.padrao__meio{ flex: none; width: calc(var(--d) / 2); height: var(--d); background: var(--laranja); border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
.padrao__vazio-o{ flex: none; width: var(--d); }
.padrao__vazio-meio{ flex: none; width: calc(var(--d) / 2); }

/* texto sobre a padronagem: preto, e pode atravessar laranja e azul */
.sobre-padrao{ color: var(--sobre-campo); }
.sobre-padrao .apoio{ color: var(--sobre-campo-apoio); }

/* ------------------------------------------------------------
   7. ACESSIBILIDADE
   ------------------------------------------------------------ */
.pular-para-conteudo{
  position: absolute; left: -9999px;
  background: var(--preto); color: var(--paper);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-sm); z-index: 100;
}
.pular-para-conteudo:focus{ left: var(--gutter); top: var(--gutter); }

:focus-visible{
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus-visible{ border-radius: var(--r-pill); } /* o anel acompanha a pílula */

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* alvo de toque: piso de 44px */
.alvo{ min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------
   8. MOVIMENTO
   Anima só transform e opacity. Nunca `transition: all`.
   ------------------------------------------------------------ */
.revelar{
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--tr-entrada) var(--easing),
              transform var(--tr-entrada) var(--easing);
  /* rede de segurança: quem esconde é quem garante o retorno.
     Se o JS falhar, isto revela o conteúdo em 4s. */
  animation: rede-de-seguranca 0s linear 4s forwards;
}
.revelar.visivel{ opacity: 1; transform: none; animation: none; }
@keyframes rede-de-seguranca{ to{ opacity: 1; transform: none; } }

/* sem JS, nada é escondido */
html:not(.js) .revelar{ opacity: 1; transform: none; animation: none; }

/* Reduzir movimento: a página anima igual para todos, com ou sem o ajuste
   ligado no aparelho (pedido da Marilia, 22/10/2026). Sem versão parada. */

/* ============================================================
   PENDÊNCIAS
   - Logo em SVG, com versão branca de verdade para superfície
     escura. O wireframe usa PNG com filter:invert(1).
   - Ícones: migrar para Phosphor peso Regular.
   - Estado de loading para botão (nenhum CTA dispara ação
     assíncrona ainda).
   - Componente de input de formulário: o sistema não tem campo
     de texto, então não há estado de foco, erro ou preenchido.
   - Tipografia condensada do material de marca: nome e licença
     não confirmados. Não entra na interface de qualquer forma.
   ============================================================ */