/* ==========================================================================
   Upgrid v2 — base.css
   Tokens, reset e tipografia.

   Regra da marca que atravessa o arquivo inteiro:
   O GRADIENTE NUNCA PREENCHE TEXTO. Ele existe em dois lugares só — nas
   células vivas da Malha Viva e no filete de 1px de um elemento em hover.
   Todo texto é sólido. Ver PLANO-DE-DESIGN.md.
   ========================================================================== */

:root {
  /* ---- Cores ---- */
  --carvao:     #08080A;   /* fundo base */
  --elev-1:     #0C0C10;   /* seções intermediárias */
  --elev-2:     #101016;   /* seções finais — a grade "atualizada" */
  --osso:       #EFEBE3;   /* texto principal */
  --grafite:    #4A4A52;   /* grade morta, rótulos técnicos */

  --roxo:       #3B0F7A;   /* cor sólida dos botões */
  --azul:       #2B6CFF;   /* foco do teclado e seleção de texto */
  --violeta:    #6C28E8;
  --magenta:    #B03CF5;

  --osso-72:    rgba(239, 235, 227, 0.72);
  --osso-50:    rgba(239, 235, 227, 0.50);
  --osso-32:    rgba(239, 235, 227, 0.32);
  --linha:      rgba(239, 235, 227, 0.10);
  --linha-forte:rgba(239, 235, 227, 0.20);

  /* Gradiente: só malha e filetes. Nunca em texto. */
  --grad: linear-gradient(100deg, #2B6CFF, #6C28E8 52%, #B03CF5);

  /* ---- Tipografia ---- */
  --display: "Syne", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --texto:   "Archivo", system-ui, -apple-system, sans-serif;

  /* 6,2vw: a Syne ExtraBold ocupa cerca de 0,9em por caractere, quase o dobro
     de uma grotesca comum. Neste corpo a linha mais longa ("quem não vende")
     cabe inteira na largura útil em qualquer tela, sem corte. */
  --t-hero:  clamp(2rem, 6.2vw, 6.2rem);
  /* 5vw: com a Syne num vão de 7 colunas, 6,5vw quebrava os títulos em cinco
     linhas e deixava a última palavra órfã. */
  --t-h2:    clamp(2rem, 5vw, 4.4rem);
  --t-h3:    clamp(1.5rem, 3vw, 2.4rem);
  --t-lead:  clamp(1.05rem, 1.7vw, 1.35rem);
  --t-corpo: clamp(0.97rem, 1.05vw, 1.05rem);
  --t-tec:   0.7rem;                          /* rótulos mono */

  /* ---- Grade exposta ---- */
  --colunas:  12;
  --gutter:   clamp(1.15rem, 4.2vw, 4rem);
  --maxw:     90rem;
  --barra:    clamp(0px, 4vw, 74px);          /* barra técnica à esquerda */
  /* 11vh e não 15: com 13rem de respiro em cima e embaixo, cada seção ficava
     isolada num oceano de vazio e a leitura perdia continuidade. */
  --secao-y:  clamp(4.5rem, 11vh, 9rem);
  --header-h: 70px;

  /* ---- Movimento ---- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur:      0.8s;
  --dur-r:    0.3s;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--carvao);
  color: var(--osso);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; height: auto; }

/* O atributo hidden do navegador vale por uma regra de display:none sem
   classe nenhuma — qualquer ".algo { display: grid }" a vence. Sem este
   reforço, esconder um elemento por JavaScript não funciona. */
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--azul); color: #fff; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); text-wrap: balance; }

/* As quebras manuais dos títulos foram escolhidas para telas largas. No
   celular elas somam-se à quebra natural e deixam palavras órfãs sozinhas
   numa linha; ali o texto flui e o balance distribui.

   ATENÇÃO ao escrever um <br> num h2: deixe um espaço ANTES dele. Escondido,
   o <br> não separa nada, e "site<br>antes" vira "siteantes". */
@media (max-width: 700px) {
  h2 br { display: none; }
}
h3 { font-size: var(--t-h3); line-height: 1.05; letter-spacing: -0.025em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--osso-72);
  max-width: 38ch;
}

/* Rótulo técnico: o vocabulário de prancheta do site inteiro */
.tec {
  font-family: var(--mono);
  font-size: var(--t-tec);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* Uma palavra destacada dentro de texto corrido — sólida, nunca gradiente */
.forte { color: var(--osso); font-weight: 600; }

/* --------------------------------------------------------------------------
   Grade exposta
   A grade de 12 colunas é visível como filetes. É o vocabulário estrutural
   do site e a razão de ele se chamar Upgrid.
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: calc(var(--gutter) + var(--barra));
  padding-right: var(--gutter);
}

.grade {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

/* Vãos irregulares — nunca simétricos. Ver PLANO-DE-DESIGN.md. */
@media (min-width: 900px) {
  .v-1-5  { grid-column: 1 / 6; }
  .v-1-7  { grid-column: 1 / 8; }
  .v-2-9  { grid-column: 2 / 10; }
  .v-6-12 { grid-column: 6 / 13; }
  .v-7-12 { grid-column: 7 / 13; }
  .v-8-12 { grid-column: 8 / 13; }
  .v-4-12 { grid-column: 4 / 13; }
  .v-1-9  { grid-column: 1 / 10; }
}

@media (max-width: 899px) {
  .grade > * { grid-column: 1 / -1; }
}

.secao {
  position: relative;
  padding-block: var(--secao-y);
}

/* Filetes verticais da grade, desenhados por gradiente repetido: uma camada
   só, sem 12 elementos vazios no HTML. */
.secao--grade::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--linha) 0 1px,
    transparent 1px calc(100% / 6)
  );
  background-position: calc(var(--gutter) + var(--barra)) 0;
  background-size: calc(100% - var(--gutter) * 2 - var(--barra)) 100%;
  opacity: 0.55;
}

.secao > .shell { position: relative; z-index: 1; }

/* Filete horizontal de topo de seção */
.secao--filete { border-top: 1px solid var(--linha); }

/* --------------------------------------------------------------------------
   Utilitários e acessibilidade
   -------------------------------------------------------------------------- */
.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--osso);
  color: var(--carvao);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-r) var(--ease);
}

.pular:focus-visible { transform: none; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Entradas ao rolar — REMOVIDAS a pedido.

   O texto aparece imediatamente, sem depender de rolagem, de JavaScript ou de
   IntersectionObserver. Os atributos data-reveal continuam no HTML, mas não
   têm mais efeito nenhum: ficaram como ganchos, caso um dia se queira algo
   discreto de volta.

   Efeito colateral positivo: nada de conteúdo invisível se o JavaScript
   falhar, e menos trabalho de composição durante a rolagem.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}