/* ═══════════════════════════════════════════════════════════════
   redesign.css — Simple Solutions new visual system
   Layered AFTER main.css. Implements the Brand & Web System handoff:
   Space Grotesk / Hanken Grotesk / Space Mono, the new colour tokens,
   the cursor motif and restyled components. Keeps every existing
   class hook (so PT copy + the PT/EN i18n engine keep working).
═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS — remap existing vars + add new ones ─────────────── */
:root {
  /* existing names, remapped to the new palette */
  --blue:   #27227D;
  --cyan:   #06C3D7;
  --navy:   #14104A;
  --light:  #F3F5FB;
  --border: #e7e9f4;
  --text:   #1a1838;
  --muted:  #5b6080;
  --radius: 14px;
  /* new design tokens */
  --indigo:      #27227D;
  --indigo-deep: #14104A;
  --royal:       #2E2BB0;
  --peri:        #6968B5;
  --cyan-bright: #3FE0F0;
  --ink:         #1a1838;
  --slate:       #5b6080;
  --mist:        #F3F5FB;
  --line:        #e7e9f4;
}

::selection { background: var(--cyan); color: var(--indigo-deep); }

/* ─── TYPOGRAPHY ──────────────────────────────────────────────── */
body { font-family: 'Hanken Grotesk', sans-serif; }

h1, h2, h3, h4,
.section-title, .hero-title, .cta-title,
.pf-title, .p-title, .tool-name, .step-name, .s-name,
.t-name, .stat-val, .pf-metric-val, .p-stat-val,
.cap-name, .diff-name, .sp-step-name, .calc-title,
.cto-del-name, .val-name, .tm-name, .csd-result-val {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.03em;
}

.eyebrow, .trust-label, .stat-lbl, .f-col h4,
.pf-metric-lbl, .p-stat-lbl, .pf-year, .p-year, .lang-btn {
  font-family: 'Space Mono', monospace;
}

.eyebrow {
  color: var(--cyan);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
}
.section-title { color: var(--indigo); letter-spacing: -.03em; }

/* Form controls use the body face, not Montserrat (overrides page styles) */
input, select, textarea, button { font-family: 'Hanken Grotesk', sans-serif !important; }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  border-radius: 11px;
  padding: 13px 24px;
  font-size: 13px;
}
.btn-cyan {
  background: var(--cyan); color: #0c1030;
  box-shadow: 0 10px 30px -10px rgba(6,195,215,.55);
}
.btn-cyan:hover {
  transform: translateY(-3px); opacity: 1;
  box-shadow: 0 18px 44px -10px rgba(6,195,215,.7);
}
.btn-dark         { background: var(--indigo); color: #fff; }
.btn-outline-dark { border-color: var(--indigo); color: var(--indigo); }
.btn-ghost        { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.btn:hover        { transform: translateY(-2px); }

/* ─── NAV — glass indigo ──────────────────────────────────────── */
#nav {
  background: rgba(20,16,74,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#nav.scrolled { background: rgba(20,16,74,.93); }
.nav-logo img, .f-logo img { height: 30px; display: block; }
.nav-dd-trigger, .mm-group-btn { font-family: 'Hanken Grotesk', sans-serif; }
.lang-btn { font-family: 'Space Mono', monospace; }
.lang-btn.active { background: rgba(6,195,215,.18); color: var(--cyan-bright); }
/* discreet staff login pill in the nav */
.nav-login {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 12.5px; font-weight: 600;
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px; padding: 8px 16px;
  transition: border-color .2s, color .2s;
}
.nav-login:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.nav-login i { font-size: 11px; }

/* ─── TRUST BAR — dark ────────────────────────────────────────── */
.trust-bar { background: var(--indigo-deep); border-bottom: 1px solid rgba(255,255,255,.07); }
.trust-label { color: rgba(255,255,255,.5); letter-spacing: .18em; }
.trust-logos span { color: rgba(255,255,255,.55); font-family: 'Space Mono', monospace; }

/* ─── CTA BAND — diagonal gradient ───────────────────────────── */
.cta-section {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--royal) 55%, var(--cyan) 130%) !important;
  text-align: left; padding: clamp(60px,8vw,100px) 0;
}
.cta-section .cta-title {
  color: #fff; font-size: clamp(30px,5vw,56px); max-width: 18ch;
  margin-left: 0; margin-right: 0;
}
.cta-section .cta-sub { color: rgba(255,255,255,.85); font-size: 17px; max-width: 52ch; }
.cta-actions { justify-content: flex-start; }
/* CTA buttons sit on the gradient — make them legible (white primary, light outlines) */
.cta-section .btn-dark { background: #fff; color: var(--indigo); }
.cta-section .btn-dark:hover { background: #fff; }
.cta-section .btn-outline-dark {
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.cta-section .btn-outline-dark:hover { background: rgba(255,255,255,.2); }
.cta-cursor {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: min(30vw,320px); opacity: .16; pointer-events: none;
  animation: ssFloatA 10s ease-in-out infinite;
}

/* ─── FOOTER — indigo deep ───────────────────────────────────── */
footer { background: var(--indigo-deep); }
.f-col h4 { color: var(--cyan); letter-spacing: .12em; }
.f-col a { color: rgba(255,255,255,.62); }
.f-col a:hover { color: #fff; }
.f-brand-text { color: rgba(255,255,255,.62); }
.f-copy { color: rgba(255,255,255,.42); }
.f-socials a { color: rgba(255,255,255,.5); }
.f-socials a:hover { color: var(--cyan); }

/* ─── CURSOR MOTIF (replaces the old triangle motif) ─────────── */
.cursor-motif { position: absolute; pointer-events: none; }

@keyframes ssFloatA { 0%,100% { transform: translateY(-50%) rotate(0); } 50% { transform: translateY(calc(-50% - 22px)) rotate(3deg); } }

/* ─── Tier 4 — nav-link animated cyan underline (microinteraction) ─── */
.nav-links a:not(.btn):not(.nav-login) { position: relative; }
.nav-links a:not(.btn):not(.nav-login)::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: var(--cyan); transition: width .25s ease;
}
.nav-links a:not(.btn):not(.nav-login):hover::after { width: 100%; }

/* ─── Tier 2.6 — "tecnologias com que trabalhamos" row: hover to colour ─── */
.trust-logos span { transition: color .2s, opacity .2s; }
.trust-logos span:hover { color: var(--cyan-bright); }

/* ─── Tier 3.9 — testimonial cards: cyan top-accent + larger quote ─── */
.t-box, .cs-quote { border-top: 3px solid var(--cyan) !important; }
.t-text, .cs-q-text { font-size: 15px !important; line-height: 1.85 !important; }

/* ─── Tier 2.4 remainder — values band + process steps: watermark + hover ─── */
.value-card, .proc-step { position: relative; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.value-card::after, .proc-step::after {
  content: ''; position: absolute; right: -16px; bottom: -16px; width: 84px; height: 84px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 18 L82 50 L22 82 L38 50 Z' fill='none' stroke='%2327227D' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .05; pointer-events: none; transition: opacity .25s;
}
.value-card:hover::after, .proc-step:hover::after { opacity: .12; }
.value-card:hover, .proc-step:hover { transform: translateY(-4px); border-color: rgba(6,195,215,.5); box-shadow: 0 16px 40px -18px rgba(6,195,215,.28); }

/* ─── Tier 3.7 — cyan gradient seam at light→dark section joins ─── */
#ferramentas, .cta-section {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(6,195,215,.5), transparent) 1;
}

/* ─── Tier 3.8 — faint dot-grid texture on large light sections ─── */
#servicos, #processo, .cap-section, .diff-section, .overview-section, .sp-process-section {
  background-image: radial-gradient(rgba(39,34,125,.05) 1px, transparent 1.4px) !important;
  background-size: 24px 24px !important;
}

/* ─── MOTION — respect reduced-motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor-motif, .cta-cursor, .hero-cursor { animation: none !important; }
}