/* =========================================================================
   Design system · Carla Rodrigues (DigiEx)
   Fonte única das cores, fontes e medidas. Páginas e peças importam este
   arquivo e não escrevem cor ou fonte soltas.

   Marca (tirada da logo oficial DIGIEX, @mrdesginn):
     turquesa #37AACE · turquesa escuro #2D91AE · chumbo #333333 · branco #F8F8F8
   Linguagem visual herdada do Outsider Club: base escura quase preta, fios
   finos no lugar de sombra pesada, um único acento, um bloco claro de papel
   no meio da página e o padrão de círculos que crescem na diagonal.
   ========================================================================= */

/* ── Fontes (arquivos em ./fonts, todas variáveis) ───────────────────────── */
@font-face{font-family:"Montserrat";font-weight:500 800;font-display:swap;src:url(fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-weight:500 800;font-display:swap;src:url(fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-weight:400 700;font-display:swap;src:url(fonts/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-weight:400 700;font-display:swap;src:url(fonts/caveat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ── Neutros: chumbo da marca, sem tom azulado ──────────────────────────
     --linha É o chumbo oficial (#333333): todo fio e borda da página usa a cor da marca. */
  --fundo:#0E0E0F;        /* fundo da página */
  --preto:#141415;        /* texto sobre bloco claro, faixas escuras */
  --painel:#1B1B1C;       /* cartões e formulário */
  --campo:#232324;        /* inputs e selects */
  --linha:#333333;        /* chumbo da marca: fios, bordas, divisórias */
  --cinza:#8C8C8C;        /* texto de apoio (5,7:1 no fundo) */
  --cinza-claro:#B8B8B8;  /* texto secundário (9,7:1 no fundo) */
  --branco:#F8F8F8;       /* branco da marca */

  /* ── Acento: turquesa da marca (um só, no lugar do amarelo do original) ─ */
  --turquesa:#37AACE;        /* botão, destaque, número. 7,2:1 no fundo */
  --turquesa-esc:#2D91AE;    /* hover, traço do padrão, tom da seta da logo. 5,3:1 no fundo */
  --turquesa-claro:#8FD2E8;  /* link e código sobre fundo escuro. 11,5:1 */
  --turquesa-fundo:#0C2A33;  /* brilho de fundo e foco suave. Nunca como texto */
  --turquesa-tinta:#17687F;  /* turquesa para TEXTO sobre o bloco claro (papel) */

  /* ── Papel: o bloco claro que quebra a página ─────────────────────────── */
  --papel:#E9EAEA;
  --papel-claro:#F6F6F6;
  --papel-cinza:#5C5C5C;  /* texto de apoio sobre papel */

  /* ── Estado: erro mantém o tom terroso do original (não compete com a marca) */
  --erro:#E7B39B; --erro-fundo:rgba(183,121,95,.12); --erro-borda:rgba(183,121,95,.35);

  /* ── Tipografia ──────────────────────────────────────────────────────────
     Montserrat nos títulos: a mesma geometria larga da logo DIGIEX.
     Inter no texto corrido. Caveat só como assinatura à mão, nunca em parágrafo. */
  --f-titulo:"Montserrat","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mao:"Caveat","Segoe Script",cursive;

  /* Escala 1,25 (mínimo contra o "título e corpo parecidos") */
  --t-12:12px; --t-14:14px; --t-16:16px; --t-18:18px; --t-24:24px; --t-32:32px;
  --t-h2:clamp(30px,3.6vw,44px);   /* título de seção */
  --t-h1:clamp(38px,5vw,62px);     /* título do herói */
  --track-eyebrow:.24em;           /* rótulo em caixa alta */

  /* ── Medidas ─────────────────────────────────────────────────────────── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:72px; --e9:112px;
  --r-campo:8px; --r-cartao:18px; --r-pilula:999px;
  --largura:1180px; --gutter:24px;

  /* ── Movimento ───────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,.7,.2,1); --t-rapido:.2s; --t-entrada:.7s;

  color-scheme:dark;
}

/* =========================================================================
   Botão metalizado (turquesa escovado)
   Contido de propósito: o gradiente varia só ~12% de luz, o filete branco no topo
   e a sombra escura embaixo dão a borda de metal, e um brilho cruza o botão no
   hover. Sem glow colorido, sem chanfro grosso, sem textura. Texto sempre chumbo.
   Um tratamento só para todo botão primário, em qualquer fundo.
   ========================================================================= */
:root{
  --metal-turquesa:linear-gradient(180deg,#52BBDC 0%,#37AACE 50%,#2E94B3 100%);
  --metal-aro:#23788F;
}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;
  font:600 13px/1 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pilula);padding:16px 26px;
  background:var(--metal-turquesa);color:var(--fundo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.22),0 0 0 1px var(--metal-aro),0 10px 20px -12px rgba(0,0,0,.9);
  transition:transform var(--t-rapido) var(--ease),filter var(--t-rapido) var(--ease),box-shadow var(--t-rapido) var(--ease)}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(0);filter:brightness(.96);box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 1px var(--metal-aro)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.btn[disabled]::after{display:none}
.btn--fino{padding:11px 20px;font-size:12px;white-space:nowrap}
.btn--contorno{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 1px var(--linha)}
.btn--contorno::after{display:none}
.btn--contorno:hover{filter:none;background:var(--painel);box-shadow:inset 0 0 0 1px var(--turquesa-esc)}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}.btn{transition:none}}