/* ============================================================
   GRAFOLOGIA BRASIL — COMPONENTES  ·  v2 "Manuscrito"
   Depende de tokens.css. Classes prefixadas com .gb-
   ============================================================ */

/* ---------- RESET LEVE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* grão de papel sobre a página inteira */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1;
  background-image: var(--tex-grain);
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none;
}
body > * { position: relative; z-index: 2; }
img { max-width: 100%; display: block; }
::selection { background: var(--yellow-400); color: var(--ink-900); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--color-primary-hover); }

/* ---------- TIPOGRAFIA ---------- */
.gb-display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-soft);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.gb-h1, h1 { font-size: var(--fs-6xl); font-weight: var(--fw-black); }
.gb-h2, h2 { font-size: var(--fs-4xl); }
.gb-h3, h3 { font-size: var(--fs-2xl); }
.gb-h4, h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--sp-4); max-width: 66ch; }

.gb-lead  { font-size: var(--fs-lg); color: var(--ink-600); line-height: var(--lh-relaxed); }
.gb-muted { color: var(--color-text-muted); }
.gb-small { font-size: var(--fs-sm); }

/* assinatura / nota à mão — Caveat */
.gb-hand {
  font-family: var(--font-hand); font-weight: 700;
  color: var(--color-primary); line-height: 1;
}
.gb-hand--ink   { color: var(--indigo-500); }
.gb-hand--green { color: var(--green-600); }

/* eyebrow editorial: traço + versalete */
.gb-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--green-700); margin-bottom: var(--sp-4);
}
.gb-eyebrow::before {
  content: ""; width: 2.4em; height: 2px; background: var(--green-600); display: inline-block;
}

/* marca-texto (highlighter) — swipe amarelo levemente inclinado */
.gb-mark {
  background: var(--grad-marker);
  padding: 0.02em 0.12em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* palavra com SUBLINHADO desenhado à mão */
.gb-ink-underline {
  position: relative; white-space: nowrap;
}
.gb-ink-underline::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.32em; height: 0.5em;
  background: var(--stroke-underline) no-repeat center/100% 100%;
}
.gb-ink-underline--y::after { background-image: var(--stroke-underline-y); }

/* título com tinta dégradé */
.gb-grad-text {
  background: var(--grad-brasil);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- LAYOUT ---------- */
.gb-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.gb-container--narrow { max-width: var(--container-sm); }
.gb-section { padding-block: clamp(3.5rem, 9vw, var(--sp-9)); }
.gb-section--alt { background: var(--color-bg-alt); }
.gb-section--ruled { background-image: var(--tex-ruled); background-position: 0 8px; }
.gb-section--invert {
  background: var(--grad-ink); color: var(--color-text-onDark);
  position: relative; overflow: hidden;
}
.gb-section--invert::after { /* veios de tinta */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(0,168,89,0.18), transparent 60%),
    radial-gradient(50% 45% at 10% 95%, rgba(22,96,171,0.22), transparent 60%);
  pointer-events:none;
}
.gb-section--invert :is(h1,h2,h3,h4) { color: var(--paper); }
.gb-section--invert .gb-lead { color: var(--color-text-onDarkMut); }
.gb-section--invert > * { position: relative; z-index: 1; }

.gb-grid { display: grid; gap: var(--sp-5); }
.gb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gb-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .gb-grid--3,.gb-grid--4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .gb-grid--2,.gb-grid--3,.gb-grid--4 { grid-template-columns: 1fr;} }
.gb-stack > * + * { margin-top: var(--sp-4); }

/* ---------- BOTÕES ---------- */
.gb-btn {
  --btn-bg: var(--color-cta); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--fs-base); line-height: 1; letter-spacing: 0.01em;
  padding: 0.95em 1.7em; border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base);
}
.gb-btn:hover { transform: translateY(-2px); }
.gb-btn:active { transform: translateY(0) scale(0.99); }
.gb-btn:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
.gb-btn svg { width: 1.15em; height: 1.15em; }
/* seta que desliza no hover */
.gb-btn .gb-btn__arrow { transition: transform var(--t-base); }
.gb-btn:hover .gb-btn__arrow { transform: translateX(4px); }

.gb-btn--primary { --btn-bg: var(--color-cta); box-shadow: var(--sh-cta); }
.gb-btn--primary:hover { background: var(--color-cta-hover); }
.gb-btn--ink { --btn-bg: var(--indigo-600); box-shadow: var(--sh-md); }
.gb-btn--ink:hover { background: var(--indigo-700); }
.gb-btn--blue { --btn-bg: var(--blue-500); box-shadow: var(--sh-md); }
.gb-btn--blue:hover { background: var(--blue-600); }
.gb-btn--outline { background: transparent; color: var(--indigo-600); border-color: var(--indigo-300); }
.gb-btn--outline:hover { background: var(--indigo-600); color: #fff; border-color: var(--indigo-600); }
.gb-btn--ghost { background: transparent; color: var(--color-heading); }
.gb-btn--ghost:hover { background: rgba(62,64,149,0.07); }
.gb-btn--marker { --btn-bg: var(--yellow-500); --btn-fg: var(--indigo-700); }
.gb-btn--marker:hover { background: var(--yellow-400); }
.gb-btn--lg { font-size: var(--fs-lg); padding: 1.1em 2.1em; }
.gb-btn--sm { font-size: var(--fs-sm); padding: 0.7em 1.15em; }
.gb-btn--block { display: flex; width: 100%; }

/* ---------- BADGES / TAGS ---------- */
.gb-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 0.42em 0.85em; border-radius: var(--r-pill);
  background: var(--indigo-50); color: var(--indigo-600);
}
.gb-badge--green  { background: var(--green-50);  color: var(--green-700); }
.gb-badge--marker { background: var(--yellow-200); color: #7a5e00; }
.gb-badge--blue   { background: var(--blue-50);   color: var(--blue-700); }
.gb-badge--solid  { background: var(--color-cta); color:#fff; }
/* etiqueta tipo aba de fichário */
.gb-tab {
  display:inline-block; font-family: var(--font-hand); font-size: var(--fs-xl); font-weight:700;
  color: var(--indigo-600); transform: rotate(-3deg); transform-origin: left bottom;
}

/* ---------- CARDS ---------- */
.gb-card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-slow), box-shadow var(--t-slow);
}
.gb-card--hover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.gb-card--flat { box-shadow: none; }
/* ficha de índice: borda esquerda de tinta + pino */
.gb-card--index { border-left: 4px solid var(--green-500); }
.gb-card--paper { box-shadow: var(--sh-paper); border-color: var(--paper-edge); }
.gb-card__icon {
  width: 54px; height: 54px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--indigo-50); color: var(--indigo-600);
  margin-bottom: var(--sp-4);
}
.gb-card__icon svg { width: 26px; height: 26px; }
.gb-card__n { /* numeral editorial grande */
  font-family: var(--font-display); font-variation-settings: var(--fraunces-soft);
  font-size: var(--fs-4xl); font-weight: var(--fw-black);
  color: var(--indigo-100); line-height: 1; margin-bottom: var(--sp-2);
}

/* Depoimento = bilhete escrito à mão sobre papel */
.gb-testimonial {
  background: var(--paper-raised); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-paper);
  border: 1px solid var(--paper-edge);
  position: relative;
}
.gb-testimonial::before { /* aspas de tinta */
  content: "\201C"; position: absolute; top: -0.18em; left: 0.3em;
  font-family: var(--font-display); font-size: 4.5rem; line-height: 1;
  color: var(--yellow-500); opacity: 0.9;
}
.gb-testimonial__quote {
  font-family: var(--font-display); font-variation-settings: "opsz" 28;
  font-size: var(--fs-lg); font-weight: 500; color: var(--ink-800);
  line-height: var(--lh-snug); padding-top: var(--sp-4);
}
.gb-testimonial__person { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.gb-testimonial__avatar { width: 50px; height: 50px; border-radius: var(--r-pill); object-fit: cover; border: 2px solid var(--paper); box-shadow: var(--sh-sm); }
.gb-testimonial__name { font-family: var(--font-hand); font-size: var(--fs-xl); font-weight: 700; color: var(--indigo-600); }
.gb-testimonial__role { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- FORMULÁRIOS ---------- */
.gb-field { margin-bottom: var(--sp-4); }
.gb-label { display:block; font-family: var(--font-body); font-weight:600; font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--color-heading); }
.gb-input, .gb-textarea, .gb-select {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--ink-800); background: var(--paper-raised);
  padding: 0.85em 1em; border: 1.5px solid var(--ink-300);
  border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.gb-input::placeholder, .gb-textarea::placeholder { color: var(--ink-400); }
.gb-input:focus, .gb-textarea:focus, .gb-select:focus {
  outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-50);
}
.gb-textarea { min-height: 130px; resize: vertical; }

/* ---------- DIVISORES & FAIXAS ---------- */
.gb-rule { height: 1px; background: var(--color-border); border: 0; margin-block: var(--sp-6); }
.gb-flag-bar { height: 5px; border-radius: var(--r-pill); width: 72px;
  background: linear-gradient(90deg, var(--green-500) 0 33%, var(--yellow-500) 33% 66%, var(--blue-500) 66% 100%); }
.gb-flag-bar--full { width: 100%; }

/* ---------- HEADER / NAV ---------- */
.gb-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(250,246,236,0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.gb-nav { display:flex; align-items:center; justify-content:space-between; padding-block: var(--sp-3); }
.gb-nav__menu { display:flex; gap: var(--sp-5); list-style:none; margin:0; padding:0; }
.gb-nav__menu a { font-family: var(--font-body); font-weight:600; color: var(--indigo-700); font-size: var(--fs-sm); position: relative; }
.gb-nav__menu a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--green-500); transition: width var(--t-base); }
.gb-nav__menu a:hover::after { width:100%; }
@media (max-width:760px){ .gb-nav__menu { display:none; } }

/* ---------- LISTA COM MARCADOR DE "CHECK À MÃO" ---------- */
.gb-list { list-style:none; padding:0; margin:0; }
.gb-list li { position:relative; padding-left: 2em; margin-bottom: var(--sp-3); }
.gb-list li::before {
  content:""; position:absolute; left:0; top:0.05em; width: 1.35em; height: 1.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300A859' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13c3 0 5 5 6 6C12 9 16 5 21 3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- ANIMAÇÃO DE ENTRADA ORQUESTRADA ---------- */
@keyframes gbRise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }
@keyframes gbDrawUnderline { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.gb-rise { opacity:0; animation: gbRise 0.8s cubic-bezier(0.22,1,0.36,1) forwards; }
.gb-rise[data-d="1"]{ animation-delay:0.08s } .gb-rise[data-d="2"]{ animation-delay:0.18s }
.gb-rise[data-d="3"]{ animation-delay:0.30s } .gb-rise[data-d="4"]{ animation-delay:0.44s }
.gb-rise[data-d="5"]{ animation-delay:0.60s }
/* sublinhado que se "escreve" ao carregar */
.gb-draw::after { background-repeat:no-repeat; background-position:left bottom;
  animation: gbDrawUnderline 0.9s 0.6s cubic-bezier(0.65,0,0.35,1) backwards; }

/* ---------- UTILITÁRIOS ---------- */
.gb-text-center { text-align:center; }
.gb-mx-auto { margin-inline:auto; }
.gb-mt-0{margin-top:0}.gb-mb-0{margin-bottom:0}
.gb-flex{display:flex;gap:var(--sp-4);align-items:center}
.gb-flex--wrap{flex-wrap:wrap}.gb-flex--center{justify-content:center}
.gb-elev-sm{box-shadow:var(--sh-sm)}.gb-elev-md{box-shadow:var(--sh-md)}.gb-elev-lg{box-shadow:var(--sh-lg)}
.gb-round-lg{border-radius:var(--r-lg)}.gb-round-xl{border-radius:var(--r-xl)}