/* PIBA — direção visual (protótipo). Tokens + componentes base. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');

:root {
  /* Cor — vinda do logo circular piba (azul-marinho) */
  --papel: #FAF7F2;        /* fundo: papel quente, não branco hospitalar */
  --papel-2: #F2EDE4;      /* superfície alternada */
  --tinta: #17181A;        /* texto principal (contraste 17:1) */
  --tinta-2: #5A5D58;      /* texto secundário (6,3:1) */
  --linha: #E3DDD2;        /* divisórias */
  --verde: #182339;        /* azul-marinho do logo piba — marca */
  --verde-acao: #182339;   /* ações (15:1 sobre branco) */
  --verde-claro: #E7EBF3;
  --sol: #E77817;          /* laranja do símbolo — só destaque, nunca texto sobre claro */
  --sol-claro: #FCEFE2;
  --noite: #101512;        /* fundo escuro (mensagens) */

  /* Tipo */
  --f-titulo: 'Montserrat', system-ui, sans-serif;  /* a mesma do logotipo */
  --f-texto: 'Source Serif 4', Georgia, serif;      /* leitura longa, calor editorial */
  --f-ui: 'Montserrat', system-ui, sans-serif;

  /* Espaço — escala de 4 */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 112px;
  --raio: 12px;
  --largura: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papel); color: var(--tinta); font: 400 18px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 40px, var(--largura)); margin-inline: auto; }

/* Tipografia */
.eyebrow { font: 600 13px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.display { font: 800 clamp(44px, 7.4vw, 96px)/.95 var(--f-titulo); letter-spacing: -.035em; }
.h2 { font: 800 clamp(30px, 4vw, 48px)/1.05 var(--f-titulo); letter-spacing: -.025em; }
.h3 { font: 700 21px/1.25 var(--f-titulo); letter-spacing: -.01em; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--tinta-2); max-width: 38ch; }
.ui { font-family: var(--f-ui); }

/* Botões — um primário por contexto */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--f-ui); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn-primario { background: var(--verde-acao); color: #fff; }
.btn-primario:hover { background: #0E1526; }
.btn-texto { padding: 0; min-height: 44px; color: var(--verde-acao); background: none; }
.btn-texto:hover { text-decoration: underline; text-underline-offset: 4px; }
.seta::after { content: '→'; transition: transform .2s var(--ease); }
.seta:hover::after { transform: translateX(3px); }

/* Assinatura: o arco do símbolo vira "porta" */
.arco { border-radius: 999px 999px var(--raio) var(--raio); overflow: hidden; }

/* Ponto de sol: o laranja só aparece como sinal de vida (ao vivo, novo, pendente) */
.sol { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); }
.sol.pulsa { box-shadow: 0 0 0 0 rgba(231,120,23,.5); animation: pulsa 2s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 10px rgba(231,120,23,0); } 100% { box-shadow: 0 0 0 0 rgba(231,120,23,0); } }

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