/* Alan Mello · base comum (link da bio + Depois do Fim) */
@font-face { font-family: "Libre Franklin"; src: url("fonts/LibreFranklin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --basalto: #151513;
  --basalto-2: #22211e;
  --pedra: #dfdedb;
  --pedra-2: #d3d2ce;
  --concreto: #bdbab3;
  --concreto-2: #a9a7a0;
  --concreto-3: #8f8c84;
  --tinta: #1c1b17;
  --tinta-suave: #4f4d46;
  --azul: #2456d6;
  --azul-escuro: #1a44b0;
  --branco: #ffffff;

  --display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --texto: "Source Serif 4", Georgia, "Times New Roman", serif;

  --m: 16px;
  --max: 1376px;
  --s-pequeno: 14px;
  --s-corpo: 17px;
  --s-lead: 21px;
  --s-titulo: 34px;
  --s-sub: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 600px) { :root { --m: 24px; --s-corpo: 18px; --s-lead: 23px; --s-titulo: 46px; --s-sub: 28px; } }
@media (min-width: 1024px) { :root { --m: 32px; --s-corpo: 19px; --s-lead: 26px; --s-titulo: 60px; --s-sub: 34px; } }
@supports (font-size: clamp(1px, 1vw, 2px)) {
  :root {
    --m: clamp(16px, 2.2vw, 32px);
    --s-pequeno: clamp(14px, 0.86rem + 0.1vw, 15px);
    --s-corpo: clamp(17px, 1rem + 0.25vw, 19px);
    --s-lead: clamp(20px, 1.1rem + 0.7vw, 26px);
    --s-titulo: clamp(34px, 1.3rem + 3.2vw, 64px);
    --s-sub: clamp(24px, 1rem + 1.3vw, 36px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--basalto);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--s-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--azul); color: var(--branco); }
:focus { outline: 3px solid var(--azul); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.escuro :focus-visible { outline-color: var(--pedra); }

/* Safari do iPhone ignora overflow-x no body: o contêiner segura a rolagem lateral */
.pagina { position: relative; width: 100%; }
/* Sem overflow aqui: ele desligaria o position: sticky. Cada seção com peça girada corta o próprio excesso. */
.caixa { width: 100%; max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--m); padding-right: var(--m); }

.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.92; }
.titulo { font-family: var(--display); font-weight: 700; font-size: var(--s-titulo); letter-spacing: -0.03em; line-height: 1; }
.lead { font-size: var(--s-lead); line-height: 1.4; }
.suave { color: var(--tinta-suave); }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botão: um só formato na página inteira. Cantos retos; o topo leva o corte da aba. */
.botao {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  min-height: 56px; padding: 14px 26px;
  background: var(--azul); color: var(--branco);
  font-family: var(--display); font-weight: 700; font-size: var(--s-corpo); letter-spacing: -0.01em; line-height: 1.15;
  text-decoration: none; text-align: center;
  -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  -webkit-transition: background-color .2s var(--ease), -webkit-transform .2s var(--ease);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.botao:hover { background: var(--azul-escuro); }
.botao:active { -webkit-transform: translateY(1px) scale(.99); transform: translateY(1px) scale(.99); }
.botao .seta { width: 18px; height: 18px; margin-left: 12px; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-transition: -webkit-transform .25s var(--ease); transition: transform .25s var(--ease); }
.botao:hover .seta { -webkit-transform: translateX(4px); transform: translateX(4px); }
.botao.tinta { background: var(--tinta); color: var(--pedra); }
.botao.tinta:hover { background: #000; }
.botao.cheio { display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; }

/* Entradas: o conteúdo aparece mesmo sem JS; só com .js ele espera a vez */
.js .entra { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
/* Blocos grandes só deslizam: ficam visíveis mesmo antes da vez */
.js .sobe { -webkit-transform: translateY(32px); transform: translateY(32px); }
.js .sobe.visto { -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform .9s var(--ease); transition: transform .9s var(--ease); }
.js .entra.visto { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: opacity .7s var(--ease), -webkit-transform .8s var(--ease); transition: opacity .7s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .entra, .js .sobe { opacity: 1; -webkit-transform: none; transform: none; }
  *, *::before, *::after { -webkit-transition-duration: .01ms !important; transition-duration: .01ms !important; -webkit-animation-duration: .01ms !important; animation-duration: .01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; }
}