/* ============ SHARED DESIGN TOKENS — Modelo 1 ============ */
/* Used by index.html AND every page under /blog/. Change a color, a font,
   or the footer markup ONCE here — never redeclare it locally in a
   page-specific stylesheet or inline <style> block. That single-source-of-
   truth rule is the whole point of this file; breaking it is how two pages
   quietly drift out of sync over time.

   REBRAND CHECKLIST — to reskin this whole site for a new business, you
   only need to touch the seven --ink/--paper/--wine/--gold/--blush values
   below plus the two font names. Nothing else in index.html or the blog
   pages should need to change to change the palette. Pick colors with the
   dataviz/artifact-design contrast rules in mind: --ink on --paper and
   --paper on --wine-deep both need to clear body-text contrast. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/fraunces-italic.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/manrope.woff2) format("woff2")}

:root {
  /* --- swap these for the new brand --- */
  --ink: #0d2238; /* primary text color, near-black with a hue */
  --ink-soft: #37495c; /* secondary/body text, softer than --ink */
  --paper: #f5f9fc; /* page background (warm off-white, not pure #fff) */
  --paper-2: #e4eef6; /* secondary section background, one shade down from --paper */
  --wine: #14509a; /* primary brand/accent color — CTAs, links, contact section bg */
  --wine-strong: #0e3d78; /* --wine, one shade darker (hover states) */
  --wine-deep: #071a2e; /* darkest brand shade — footer, dark sections, hero scrim */
  --gold: #9a6200; /* secondary accent — eyebrows, small caps labels, primary button */
  --gold-soft: #f6c445; /* --gold for use on dark backgrounds (better contrast on --wine-deep) */
  --blush: #cfe0ee; /* body text on dark backgrounds */
  --cta: #f7b81c; /* amarelo do raio do logo — fundo do botão primário */

  /* --- structural tokens, rarely need to change --- */
  --line: rgba(13, 34, 56, 0.15); /* hairline borders on light backgrounds — derive from --ink */
  --line-light: rgba(245, 249, 252, 0.28); /* hairline borders on dark backgrounds — derive from --paper */
  --shadow: 0 30px 60px -20px rgba(7, 26, 46, 0.35);
  --serif:
    "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --container: 1180px;
  --radius: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto; /* Lenis drives smooth scroll; don't double up with CSS smooth-scroll */
}
html.lenis,
html.lenis body {
  height: auto;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}
::selection {
  background: var(--gold-soft);
  color: var(--wine-deep);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow.on-dark {
  color: var(--gold-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--cta);
  color: var(--wine-deep);
}
.btn-primary:hover {
  background: var(--gold-soft);
  box-shadow: 0 14px 30px -10px rgba(247, 184, 28, 0.5);
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-light);
}
.btn-ghost:hover {
  background: rgba(245, 249, 252, 0.08);
  border-color: var(--gold-soft);
}
.btn-outline {
  background: transparent;
  color: var(--wine);
  border-color: var(--wine);
}
.btn-outline:hover {
  background: var(--wine);
  color: var(--paper);
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

footer {
  background: var(--wine-deep);
  color: var(--blush);
  padding: 44px 0;
}
.foot-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
}
.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.foot-links a {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.foot-links a:hover {
  opacity: 1;
}