/* Base compartilhada: site, diagnóstico e painel.
   Identidade tirada do feed dele: papel claro, tinta quase preta, azul do "COLATTO". */

:root {
  --papel: #f3f1ec;
  --papel-2: #ebe8e1;
  --papel-3: #e1ddd4;
  --branco: #fbfaf7;
  --tinta: #0c1220;
  --tinta-2: #161e30;
  --tinta-3: #232c42;
  --texto: #1b2232;
  --apagado: #5b6376;
  --apagado-2: #8a91a2;
  --linha: rgba(12, 18, 32, .12);
  --linha-forte: rgba(12, 18, 32, .22);
  --linha-escura: rgba(255, 255, 255, .12);

  --azul: #2f52e0;
  --azul-escuro: #2140bd;
  --azul-claro: #7088ff;
  --azul-nevoa: #dfe5fb;
  --alerta: #c2492f;
  --alerta-nevoa: #f6e1da;
  --atencao: #b7800f;
  --atencao-nevoa: #f5ecd6;
  --verde: #1d7f57;
  --verde-nevoa: #dbeee5;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serifa: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --raio: 14px;
  --raio-p: 9px;
  --raio-g: 22px;
  --sombra: 0 1px 2px rgba(12, 18, 32, .06), 0 8px 24px -12px rgba(12, 18, 32, .18);
  --sombra-g: 0 2px 6px rgba(12, 18, 32, .06), 0 30px 60px -24px rgba(12, 18, 32, .35);

  --larg: 1200px;
  --lado: clamp(18px, 5vw, 40px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Marca: GIORDANO em tinta, COLATTO em azul, condensada como no post de apresentação */
.marca {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 68;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.marca b { font-weight: inherit; color: var(--azul); }

.serifa { font-family: var(--f-serifa); font-style: italic; font-weight: 400; letter-spacing: -.005em; }

/* Botões */
.bt {
  --bt-bg: var(--tinta);
  --bt-cor: var(--papel);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--bt-bg); color: var(--bt-cor);
  font-weight: 650; font-size: 16px; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.bt:hover { transform: translateY(-1px); }
.bt:active { transform: translateY(0) scale(.985); }
.bt svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.bt:hover svg.seta { transform: translateX(3px); }

.bt-azul { --bt-bg: var(--azul); --bt-cor: #fff; box-shadow: 0 10px 28px -12px rgba(47, 82, 224, .75); }
.bt-azul:hover { --bt-bg: var(--azul-escuro); }
.bt-claro { --bt-bg: var(--papel); --bt-cor: var(--tinta); }
.bt-vazado { --bt-bg: transparent; --bt-cor: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.bt-vazado:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.bt-vazado-claro { --bt-bg: transparent; --bt-cor: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.bt-vazado-claro:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.bt-zap { --bt-bg: #1f9d55; --bt-cor: #fff; }
.bt-zap:hover { --bt-bg: #188a4a; }
.bt-p { min-height: 42px; padding: 0 18px; font-size: 14.5px; }

/* Granulado leve por cima das fotos: dá textura e esconde a baixa resolução */
.grao { position: relative; isolation: isolate; overflow: hidden; }
.grao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: multiply;
}