/* =========================
   Gtech Theme (Base #0f1470)
   ========================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Neutros / Base */
  --color-white: #ffffff;
  --color-cream-50: #fffdf8;
  --color-cream-100: #fffaf1;
  --color-gray-200: #f3f4f6;
  --color-gray-300: #e5e7eb;
  --color-gray-400: #9aa1a6;
  --color-slate-500: #64748b;
  --color-charcoal-700: #1f2321;
  --color-charcoal-800: #262828;

  /* Paleta Gtech (derivada de #0f1470) */
  --gtech-50:  #eef1ff;
  --gtech-100: #dfe4ff;
  --gtech-200: #bfc8ff;
  --gtech-300: #9eabff;
  --gtech-400: #7d8eff;
  --gtech-500: #0f1470; /* PRIMÁRIA */
  --gtech-600: #0d1262; /* hover */
  --gtech-700: #0b0f53; /* active */
  --gtech-800: #090c45;

  /* Semânticas */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-primary: var(--gtech-500);
  --color-primary-hover: var(--gtech-600);
  --color-primary-active: var(--gtech-700);
  --color-secondary: rgba(17, 24, 39, 0.06);
  --color-secondary-hover: rgba(17, 24, 39, 0.12);
  --color-secondary-active: rgba(17, 24, 39, 0.16);
  --color-border: rgba(17, 24, 39, 0.12);
  --color-btn-primary-text: #ffffff;

  /* Estados */
  --color-error: #c0152f;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: var(--color-slate-500);

  /* BG decorativos suaves */
  --color-bg-1: rgba(15, 20, 112, 0.08);
  --color-bg-2: rgba(15, 20, 112, 0.16);
  --color-bg-3: rgba(16, 185, 129, 0.10);

  /* Tipografia e layout */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;

  --radius-sm: 6px;
  --radius-base: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 18px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 14px 30px rgba(17, 24, 39, 0.10);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; font-family: var(--font-family-base); line-height: var(--line-height-normal); color: var(--color-text); background: var(--color-background); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--color-primary-hover); }

/* ---------- Containers ---------- */
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
section { padding: var(--space-40) 0; }

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text); letter-spacing: var(--letter-spacing-tight); }
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
p { margin: 0 0 var(--space-16) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base); font-weight: 600; line-height: 1.5;
  cursor: pointer; transition: all var(--duration-normal) var(--ease-standard);
  border: none; text-decoration: none; box-shadow: var(--shadow-sm);
  background: var(--color-primary); color: var(--color-btn-primary-text);
}
.btn:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { background: var(--color-primary-active); transform: translateY(0); }
.btn--lg { padding: var(--space-12) var(--space-20); font-size: var(--font-size-lg); border-radius: var(--radius-md); }
.btn--full-width { width: 100%; }

/* ---------- Forms ---------- */
.form-control {
  display: block; width: 100%;
  padding: var(--space-10) var(--space-12);
  font-size: var(--font-size-md); line-height: 1.5;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.form-control:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(15, 20, 112, 0.25); }
.form-label { display: block; margin-bottom: var(--space-8); font-weight: 600; font-size: var(--font-size-sm); }
.form-group { margin-bottom: var(--space-16); }
.help { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.input-group { position: relative; display: flex; align-items: center; }
.input-prefix { position: absolute; left: var(--space-12); color: var(--color-text-secondary); font-weight: 600; z-index: 1; }
.input-group .form-control { padding-left: 32px; }

/* ---------- Header ---------- */
.header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); }
.header__content { display: flex; justify-content: space-between; align-items: center; padding: var(--space-16) 0; }
.logo h1 { font-size: var(--font-size-2xl); color: var(--color-primary); margin: 0; font-weight: var(--font-weight-bold); }
.logo__tagline { font-size: var(--font-size-sm); color: var(--color-text-secondary); display: block; margin-top: var(--space-2); }
.nav { display: flex; gap: var(--space-24); }
.nav a { color: var(--color-text); font-weight: 600; }
.nav a:hover { color: var(--color-primary); }

/* ---------- Hero ---------- */
.hero { background: var(--color-bg-1); padding: var(--space-40) 0 var(--space-32); text-align: center; }
.hero__content { max-width: 800px; margin: 0 auto; }
.hero__title { font-size: var(--font-size-4xl); margin-bottom: var(--space-16); }
.hero__subtitle { font-size: var(--font-size-xl); color: var(--color-text-secondary); margin-bottom: var(--space-24); line-height: var(--line-height-normal); }
.hero__badges { display: flex; justify-content: center; gap: var(--space-16); margin-bottom: var(--space-32); flex-wrap: wrap; }
.badge { background: var(--color-primary); color: #fff; padding: var(--space-8) var(--space-16); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 600; }

/* ---------- Section Header ---------- */
.section-header { text-align: center; margin-bottom: var(--space-32); }
.section-header h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-8); }
.section-header p { font-size: var(--font-size-lg); color: var(--color-text-secondary); }

/* ---------- Calculator ---------- */
.calculator-section { padding: var(--space-40) 0; background: var(--color-surface); }
.calculator {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32);
  max-width: 1000px; margin: 0 auto;
  background: var(--color-background); padding: var(--space-32);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.calculator__form { display: flex; flex-direction: column; gap: var(--space-20); }
.calculator__results { display: flex; align-items: center; justify-content: center; }
.results { width: 100%; }
.results__placeholder { text-align: center; color: var(--color-text-secondary); padding: var(--space-32); }
.results__placeholder h3 { margin-bottom: var(--space-16); color: var(--color-text-secondary); }

.results__data {
  background: var(--color-bg-3);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: var(--shadow-sm);
}
.result-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border); }
.result-item:last-child { border-bottom: none; }
.result-label { font-weight: 600; }
.result-value { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary-active); }
.result-value--highlight { font-size: var(--font-size-2xl); color: #0ea5a5; }

/* ---------- How it works ---------- */
.how-it-works { padding: var(--space-40) 0; background: var(--color-bg-2); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-32); }
.step { text-align: center; padding: var(--space-24); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.step__number { width: 60px; height: 60px; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: 800; margin: 0 auto var(--space-16); }
.step h3 { margin-bottom: var(--space-8); }

/* ---------- Benefits ---------- */
.benefits { padding: var(--space-40) 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-24); }
.benefit { padding: var(--space-24); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); text-align: center; transition: transform var(--duration-normal) var(--ease-standard); }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit__icon { font-size: 48px; margin-bottom: var(--space-16); }
.benefit h3 { margin-bottom: var(--space-8); color: var(--color-primary); }

/* ---------- Testimonials ---------- */
.testimonials { padding: var(--space-40) 0; background: #fff; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-24); }
.testimonial { background: var(--color-surface); padding: var(--space-24); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.testimonial__stars { margin-bottom: var(--space-12); font-size: var(--font-size-lg); }
.testimonial p { margin-bottom: var(--space-16); font-style: italic; }
.testimonial__author { font-weight: 700; color: var(--color-primary); }

/* ---------- CTA ---------- */
.cta-section { padding: var(--space-40) 0; background: var(--color-primary); color: #fff; }
.cta { text-align: center; max-width: 600px; margin: 0 auto; }
.cta h2 { color: #fff; margin-bottom: var(--space-16); }
.cta p { font-size: var(--font-size-lg); margin-bottom: var(--space-24); opacity: 0.95; }
.cta .btn--primary { background: #fff; color: var(--color-primary); font-weight: 800; }
.cta .btn--primary:hover { background: var(--color-gray-200); }

/* ---------- Footer ---------- */
.footer { background: var(--color-charcoal-800); color: #e5e7eb; padding: var(--space-32) 0 var(--space-16); }
.footer__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-32); margin-bottom: var(--space-24); }
.footer__info h3, .footer__contact h4 { color: var(--gtech-300); margin-bottom: var(--space-8); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-16); text-align: center; color: #cbd5e1; }

/* ---------- Responsivo ---------- */
@media (min-width: 640px){ .container { max-width: var(--container-sm); } }
@media (min-width: 768px){ .container { max-width: var(--container-md); } }
@media (min-width: 1024px){ .container { max-width: var(--container-lg); } }
@media (min-width: 1280px){ .container { max-width: var(--container-xl); } }

@media (max-width: 768px){
  .nav { display: none; }
  .hero__title { font-size: var(--font-size-3xl); }
  .calculator { grid-template-columns: 1fr; gap: var(--space-24); padding: var(--space-20); }
  .calculator__results { order: -1; }
  .steps, .benefits-grid, .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .hero { padding: var(--space-32) 0; }
  .hero__title { font-size: var(--font-size-2xl); }
  .calculator { margin: 0 var(--space-16); }
  .section-header h2 { font-size: var(--font-size-2xl); }
}

/* ---------- Efeitos ---------- */
html { scroll-behavior: smooth; }
.results--success { animation: fadeInUp .5s var(--ease-standard); }
@keyframes fadeInUp { from {opacity:0; transform: translateY(12px);} to {opacity:1; transform: translateY(0);} }


/* === NOVO BLOCO: Simulações rápidas === */
.quick-sims{margin-top:16px;padding:16px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg-1)}
.quick-title{font-weight:600;margin-bottom:10px}
.quick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.quick-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px;border:1px dashed var(--color-border);border-radius:8px;background:var(--color-bg-0)}
.quick-left{min-width:70px}
.quick-left strong{font-size:16px;display:block}
.quick-left small{color:var(--color-text-secondary)}
.quick-line{font-size:14px;line-height:1.3}
.quick-line span{color:var(--color-text-secondary);margin-right:6px}