/* ============================================================================
   PERICIANDO — sistema de identidade
   Direção F (marca) + D (componente de exame) + E (textura)
   Autoria: DIANA-TP · 11/08/2026 · aprovado pelo Caio na 2ª rodada

   Como usar:
     <link rel="stylesheet" href="fonts.css">      (auto-hospedada, sem CDN)
     <link rel="stylesheet" href="periciando.css">

   v1.1 (11/08/2026): a serifa passou de Cormorant Garamond para EB Garamond.
   A Cormorant desenha o circunflexo MINÚSCULO solto e alto — 'você', 'três',
   'ônus', 'instância' saem quebrados. Ver fonts.css para o diagnóstico completo.

   REGRA DE COR QUE NÃO SE NEGOCIA (medida, não estimada):
     o ouro da marca (--pc-ouro, #B08432) tem contraste 3,01:1 sobre o papel
     vergê — reprova para texto corrido. Ele é cor de MARCA e de MARCAÇÃO,
     nunca de leitura. Para texto sobre papel use --pc-ouro-texto (4,74:1);
     sobre fundo escuro use --pc-ouro-app (7,03:1).
   ============================================================================ */

:root{
  /* --- superfície PAPEL: marca, laudo, landing, e-mail --- */
  --pc-papel:        #F6F1E4;   /* ground                                   */
  --pc-papel-alto:   #FDFBF6;   /* cartão sobre o ground                    */
  --pc-tinta:        #14213D;   /* texto e logotipo      14,16:1 sobre papel */
  --pc-tinta-2:      #3D4757;   /* texto secundário                          */
  --pc-sepia:        #6B6250;   /* apoio, legendas        5,34:1             */
  --pc-linha:        #DCD3BE;   /* fios e bordas                             */

  /* --- ouro: marca e marcação. Ver a regra acima. --- */
  --pc-ouro:         #B08432;   /* raster do logotipo, moldura de exame      */
  --pc-ouro-texto:   #8A6420;   /* quando o ouro precisar carregar texto     */
  --pc-ouro-app:     #C9973F;   /* ouro sobre fundo escuro       7,03:1      */

  /* --- superfície ARDÓSIA: o produto, escuro por padrão --- */
  --pc-carvao:       #101418;   /* ground do app                             */
  --pc-carvao-2:     #171C22;   /* superfície elevada                        */
  --pc-carvao-3:     #1F262E;   /* superfície de linha / hover               */
  --pc-osso:         #E9E6DE;   /* texto sobre escuro     14,83:1            */
  --pc-osso-2:       #97A0AA;   /* texto secundário        6,98:1            */
  --pc-linha-app:    #2A333C;

  /* --- semânticas: separadas do ouro, que é da marca --- */
  --pc-ok:           #2C6E52;
  --pc-atencao:      #8A5A18;
  --pc-erro:         #9B3232;
  --pc-ok-app:       #62B891;
  --pc-atencao-app:  #D9A94E;
  --pc-erro-app:     #E08585;

  /* --- tipografia --- */
  --pc-serif: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --pc-sans:  Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pc-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* escala tipográfica — razão 1.25, base 16 */
  --pc-t-xs: 12px; --pc-t-sm: 14px; --pc-t-md: 16px;
  --pc-t-lg: 20px; --pc-t-xl: 25px; --pc-t-2xl: 31px; --pc-t-3xl: 39px;

  /* --- espaçamento, base 4 --- */
  --pc-s-1: 4px;  --pc-s-2: 8px;  --pc-s-3: 12px; --pc-s-4: 16px;
  --pc-s-5: 24px; --pc-s-6: 32px; --pc-s-7: 48px; --pc-s-8: 64px;

  --pc-raio: 2px;            /* quase reto: é documento, não app de consumo  */
  --pc-transicao: 160ms cubic-bezier(.2,.6,.3,1);
}

/* ============================================================================
   1 · LOGOTIPO  (direção F — serifa e bitmap)
   O nome termina em raster: nove letras de tipografia, uma de pixel.
   ========================================================================= */

.pc-logo{
  display:inline-flex; align-items:baseline; gap:0;
  font-family:var(--pc-serif); font-weight:700;
  letter-spacing:.05em; color:var(--pc-tinta);
  line-height:1; text-decoration:none; white-space:nowrap;
  font-size:var(--pc-t-2xl);
}
.pc-logo__raster{                    /* o "O" — nunca é texto, é sempre o SVG */
  width:.72em; height:.86em; margin-left:.10em;
  transform:translateY(.10em);
  fill:var(--pc-ouro); flex:none;
}
.pc-logo--invertido{ color:var(--pc-osso); }
.pc-logo--invertido .pc-logo__raster{ fill:var(--pc-ouro-app); }
.pc-logo--mono, .pc-logo--mono .pc-logo__raster{ color:currentColor; fill:currentColor; }

/* assinatura — a tese do produto, e a blindagem de compliance */
.pc-assinatura{
  font-family:var(--pc-sans); font-size:var(--pc-t-xs);
  letter-spacing:.02em; color:var(--pc-sepia); max-width:46ch;
}

/* ícone isolado: app, favicon, avatar. O raster sozinho já é a marca. */
.pc-icone{ display:inline-block; width:32px; height:32px; fill:var(--pc-ouro); }

/* ============================================================================
   2 · JANELA DE EXAME  (direção D — ampliação)
   Marca a região sob análise. É componente funcional: use somente onde algo
   está de fato sendo examinado, nunca como enfeite de layout.
   ========================================================================= */

.pc-exame{ position:relative; display:inline-block; line-height:0; }
.pc-exame__janela{
  position:absolute; box-sizing:border-box;
  border:3px solid var(--pc-ouro);
  box-shadow:0 0 0 1px rgba(20,33,61,.18);
  pointer-events:none;
}
/* cantos: leem como recorte de instrumento, não como caixa de seleção */
.pc-exame__janela::before, .pc-exame__janela::after{
  content:""; position:absolute; width:7px; height:7px; background:var(--pc-ouro);
}
.pc-exame__janela::before{ top:-3px; left:-3px; }
.pc-exame__janela::after{ bottom:-3px; right:-3px; }

/* rótulo da medição — mono, tabular, junto da janela */
.pc-exame__cota{
  position:absolute; top:-1.55em; left:0;
  font-family:var(--pc-mono); font-size:var(--pc-t-xs);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  color:var(--pc-ouro-texto); background:var(--pc-papel);
  padding:0 var(--pc-s-1); white-space:nowrap;
}
.pc-exame--escuro .pc-exame__cota{ color:var(--pc-ouro-app); background:var(--pc-carvao-2); }

/* estado ratificado: o único lugar onde o ouro vira preenchimento */
.pc-exame__janela--ratificada{ background:color-mix(in srgb, var(--pc-ouro) 12%, transparent); }

/* ============================================================================
   3 · RETÍCULA  (direção E — textura)
   O papel sempre foi feito de pontos. Use em capas, fundos de seção e
   divisórias. Nunca sob texto corrido.
   ========================================================================= */

/* A cor do ponto é um token próprio: assim a textura esmaece SEM usar opacity,
   que apagaria junto todo o conteúdo colocado dentro dela. */
.pc-reticula{
  --pc-ret: rgba(20,33,61,.30);
  background-image:radial-gradient(var(--pc-ret) 1.1px, transparent 1.2px);
  background-size:7px 7px; background-position:0 0;
  background-repeat:repeat;
}
.pc-reticula--clara{ --pc-ret: rgba(233,230,222,.26); }
.pc-reticula--esmaecida{ --pc-ret: rgba(20,33,61,.13); }
.pc-reticula--clara.pc-reticula--esmaecida{ --pc-ret: rgba(233,230,222,.11); }

/* Transição sólido → retícula: a assinatura gráfica da marca.
   Cuidado de cascata: quem usar estas classes NÃO pode declarar o atalho
   `background` no mesmo elemento — ele zera o background-image da textura.
   Use `background-color` quando precisar do ground. */
.pc-transicao-reticula{
  --pc-ret: rgba(20,33,61,.34);
  background-image:
    radial-gradient(var(--pc-ret) 1.1px, transparent 1.2px),
    linear-gradient(90deg, var(--pc-tinta) 26%, transparent 70%);
  background-size:7px 7px, 100% 100%;
}

/* ============================================================================
   4 · SUPERFÍCIES E TEXTO
   ========================================================================= */

.pc-papel{ background:var(--pc-papel); color:var(--pc-tinta); }
.pc-app{   background:var(--pc-carvao); color:var(--pc-osso); }
.pc-cartao{
  background:var(--pc-papel-alto); border:1px solid var(--pc-linha);
  border-radius:var(--pc-raio); padding:var(--pc-s-5);
}
.pc-app .pc-cartao{ background:var(--pc-carvao-2); border-color:var(--pc-linha-app); }

.pc-titulo{ font-family:var(--pc-serif); font-weight:600; letter-spacing:-.01em;
  line-height:1.15; text-wrap:balance; }
.pc-rotulo{ font-family:var(--pc-mono); font-size:var(--pc-t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--pc-sepia); }
.pc-app .pc-rotulo{ color:var(--pc-osso-2); }
.pc-dado{ font-family:var(--pc-mono); font-variant-numeric:tabular-nums; }

/* ============================================================================
   4-BIS · CABEÇALHO  (.pc-nav)
   UM header, igual em todas as páginas. Hoje existem três diferentes, e a porta
   é a única sem "Criar conta" — justamente a página que recebe o visitante frio.

   Hierarquia das ações, e ela não se inverte:
     "Criar conta" é a ação primária (sólida) — serve a quem ainda não é cliente.
     "Entrar" é secundária (contorno) — serve a quem já é. Destacar o login não
     traz assinante novo; ele só precisa ser encontrável.
   ========================================================================= */

.pc-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--pc-s-5);
  padding:var(--pc-s-3) var(--pc-s-5);
  background:var(--pc-papel); border-bottom:1px solid var(--pc-linha);
}
.pc-app .pc-nav{ background:var(--pc-carvao-2); border-bottom-color:var(--pc-linha-app); }
/* nav fixa exige compensação no corpo, senão ela come a primeira seção */
.pc-nav + *{ scroll-margin-top:72px; }

.pc-nav__marca{ flex:none; text-decoration:none; }
.pc-nav__links{
  display:flex; align-items:center; gap:var(--pc-s-1);
  flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none;
}
.pc-nav__links::-webkit-scrollbar{ display:none; }
.pc-nav__link{
  font-family:var(--pc-sans); font-size:var(--pc-t-sm); color:var(--pc-tinta-2);
  text-decoration:none; white-space:nowrap;
  padding:11px var(--pc-s-3); border-radius:var(--pc-raio);
  border-bottom:2px solid transparent; min-height:44px;
  display:inline-flex; align-items:center;
}
.pc-nav__link:hover{ color:var(--pc-tinta); background:rgba(20,33,61,.045); }
/* estado ativo: o ouro marca ONDE VOCÊ ESTÁ — mesmo significado que ele tem
   na janela de exame (marcação), nunca decoração */
.pc-nav__link[aria-current="page"]{
  color:var(--pc-tinta); font-weight:600; border-bottom-color:var(--pc-ouro);
}
.pc-app .pc-nav__link{ color:var(--pc-osso-2); }
.pc-app .pc-nav__link:hover{ color:var(--pc-osso); background:var(--pc-carvao-3); }
.pc-app .pc-nav__link[aria-current="page"]{ color:var(--pc-osso); border-bottom-color:var(--pc-ouro-app); }

.pc-nav__acoes{ flex:none; display:flex; align-items:center; gap:var(--pc-s-2); }

/* Mobile: duas faixas. O CTA nunca sai da tela; os links rolam em trilho.
   Nada de menu sanfonado — ele esconde justamente as duas páginas de produto. */
@media (max-width:720px){
  .pc-nav{ flex-wrap:wrap; gap:var(--pc-s-2); padding:var(--pc-s-3) var(--pc-s-4); }
  .pc-nav__marca{ order:1; }
  .pc-nav__acoes{ order:2; margin-left:auto; }
  .pc-nav__links{
    order:3; width:100%; flex-basis:100%;
    border-top:1px solid var(--pc-linha); padding-top:var(--pc-s-1);
    margin-bottom:calc(var(--pc-s-1) * -1);
  }
  .pc-app .pc-nav__links{ border-top-color:var(--pc-linha-app); }
  .pc-nav__link{ padding-left:var(--pc-s-2); padding-right:var(--pc-s-2); }

  /* Em tela estreita a marca e os dois botões disputam a mesma linha, e quem
     seria empurrado para fora é justamente a ação primária. Aqui o login perde
     a moldura e vira link de texto: a hierarquia continua legível e a linha
     encolhe.
     RESSALVA HONESTA: não consegui medir isto abaixo de 500 px — o Chrome
     headless deste ambiente trava o viewport nesse mínimo, e a primeira captura
     que li como "cortado" era artefato do screenshot, não defeito do
     componente. A regra abaixo é decisão de HIERARQUIA, não correção de um
     corte medido. Conferir em 360 e 390 reais antes de considerar fechado. */
  .pc-nav__acoes{ gap:var(--pc-s-1); }
  .pc-nav__acoes .pc-botao--secundario{
    border-color:transparent; background:transparent;
    padding-left:var(--pc-s-2); padding-right:var(--pc-s-2);
    text-decoration:underline; text-underline-offset:3px;
  }
  .pc-nav__acoes .pc-botao{ padding:10px var(--pc-s-3); font-size:13.5px; }
  .pc-nav__marca{ font-size:18px !important; }
}

/* ============================================================================
   5 · CONTROLES
   ========================================================================= */

.pc-botao{
  font-family:var(--pc-sans); font-size:var(--pc-t-sm); font-weight:600;
  padding:10px var(--pc-s-4); border-radius:var(--pc-raio); border:1px solid transparent;
  background:var(--pc-tinta); color:var(--pc-papel); cursor:pointer;
  transition:background var(--pc-transicao), border-color var(--pc-transicao);
  min-height:44px;                      /* alvo de toque */
}
.pc-botao:hover{ background:#1B2C52; }
.pc-botao--secundario{
  background:transparent; color:var(--pc-tinta); border-color:var(--pc-linha);
}
.pc-app .pc-botao{ background:var(--pc-osso); color:var(--pc-carvao); }
.pc-app .pc-botao--secundario{ background:transparent; color:var(--pc-osso);
  border-color:var(--pc-linha-app); }

/* foco sempre visível — requisito, não enfeite */
.pc-botao:focus-visible, .pc-logo:focus-visible, a:focus-visible{
  outline:2px solid var(--pc-ouro-texto); outline-offset:2px;
}
.pc-app :focus-visible{ outline-color:var(--pc-ouro-app); }

/* sidebar vertical — a navegação do produto */
.pc-sidebar{
  background:var(--pc-carvao-2); border-right:1px solid var(--pc-linha-app);
  width:232px; display:flex; flex-direction:column; gap:var(--pc-s-1);
  padding:var(--pc-s-4) var(--pc-s-3);
}
.pc-sidebar__item{
  font-family:var(--pc-sans); font-size:var(--pc-t-sm); color:var(--pc-osso-2);
  padding:10px var(--pc-s-3); border-radius:var(--pc-raio);
  border-left:2px solid transparent; text-decoration:none; display:block;
}
.pc-sidebar__item:hover{ background:var(--pc-carvao-3); color:var(--pc-osso); }
.pc-sidebar__item[aria-current="page"]{
  color:var(--pc-osso); background:var(--pc-carvao-3);
  border-left-color:var(--pc-ouro-app);
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:1ms !important; animation-duration:1ms !important; }
}