/* Fólio: base comum (landing, painel e vitrine). Depende de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--off);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 700; letter-spacing: var(--ls-title); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

/* acessibilidade */
:focus-visible { outline: 2.5px solid var(--teal-text); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--cream); padding: 12px 16px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }

/* botões: encolhem levemente ao toque; o hover é uma camada que só muda a opacidade */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border: 0; border-radius: 999px; /* cápsula, como no iPhone */
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform var(--press) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .1); opacity: 0; transition: opacity 180ms ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { opacity: 1; } }
.btn:active { transform: scale(.97); }
.btn[disabled] { cursor: default; opacity: .7; }
.btn-primary { background: var(--navy); color: var(--cream); }
.btn-lime { background: var(--lime-2); color: var(--navy); }
.btn-lime::before { background: rgba(255, 255, 255, .25); }
/* secundário: fundo cinza translúcido, sem borda (como "Continuar com e-mail" no protótipo) */
.btn-outline { background: var(--fill); color: var(--navy); }
.btn-outline::before { background: rgba(18, 26, 71, .05); }
.btn-lg { height: 56px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.escuro :focus-visible { outline-color: var(--lime-2); }