/* SiteGen AI — Design System */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --color-primary: #111111;
  --color-primary-dark: #000000;
  --color-accent: #B87333;
  --color-accent-dark: #96551f;
  --color-bg: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-card: #FFFFFF;
  --color-text: #2B2B2B;
  --color-text-muted: #6B7280;
  --color-border: #E5E5E5;
  --color-on-primary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-on-card: #2B2B2B;
  --color-on-surface: #2B2B2B;

  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.06);
  --shadow: 0 4px 16px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.14);
  --transition: 0.2s ease;
  /* tokens de fallback — a IA não os definiu */
  --color-secondary: #7C3AED;
  --color-secondary-dark: #6D28D9;
  --color-on-secondary: #FFFFFF;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.2;
}

p {
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

/* Typography scale */
.text-hero {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.text-h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

.text-lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.text-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Navigation */
.site-nav {
  position: sticky;
  top: 0;
  height: 68px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.site-nav a:not(.btn) {
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--color-text);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn).active {
  color: var(--color-accent);
  background: var(--color-surface);
}

.site-nav a.btn {
  padding: 0.75rem 1.5rem;
  color: var(--color-on-accent);
  border-radius: var(--radius);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--color-accent);
  padding: 0.75rem 0.5rem;
}

.btn-ghost::after {
  content: '→';
  transition: var(--transition);
}

.btn-ghost:hover::after {
  transform: translateX(4px);
}

/* Cards */
.card {
  background: var(--color-card);
  color: var(--color-on-card);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card-featured {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}

.card-featured h1, .card-featured h2, .card-featured h3, .card-featured p {
  color: var(--color-on-primary);
}

.metric-card {
  background: var(--color-card);
  color: var(--color-on-card);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}

.metric-card .metric-label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.surface-card {
  background: var(--color-surface);
  color: var(--color-on-surface);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
}

/* Icon boxes */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.icon-box-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.icon-box-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.icon-box svg {
  color: inherit;
  width: 24px;
  height: 24px;
}

/* Process steps */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 800;
  flex-shrink: 0;
}

.step-number-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Testimonials */
.testimonial-card {
  background: var(--color-card);
  color: var(--color-on-card);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}

.testimonial-quote {
  color: inherit;
  line-height: 1.7;
  font-size: 1.05rem;
}

.testimonial-name {
  color: var(--color-on-card);
  font-weight: 700;
}

.testimonial-role {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Hero */
.hero {
  min-height: min(48rem, calc(100svh - 4.5rem));
  display: flex;
  align-items: center;
}

.hero-split img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  max-height: min(58svh, 36rem);
  width: 100%;
  border-radius: var(--radius-lg);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.4));
}

/* Section backgrounds */
.bg-default {
  background: var(--color-bg);
}

.bg-surface {
  background: var(--color-surface);
}

.bg-dark {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark p {
  color: var(--color-on-primary);
}

/* Badges & tags */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(184, 115, 51, 0.12);
  color: var(--color-accent);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Eyebrow & highlight */
.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.highlight {
  color: var(--color-accent);
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* Footer */
.footer-wrap {
  background: #0c0c0c;
  color: rgba(255, 255, 255, 0.8);
  padding: 4rem 0 2rem;
}

.footer-wrap a:hover {
  color: var(--color-accent);
}

/* Animations */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
  opacity: 0;
  animation: slideUp 0.6s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a, button, .btn, .card, input, textarea {
  transition: var(--transition);
}





/* page: index */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

/* ── SiteGen Base Layout BEGIN (determinístico — não editar) ── */
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%;height:auto}
/* overflow-x:clip evita scroll horizontal causado por badges flutuantes com
   offset negativo, sem criar scroll container (não quebra position:sticky) */
html{overflow-x:clip}
.container{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:clamp(1rem,4vw,2rem);padding-right:clamp(1rem,4vw,2rem)}
.grid-2col{display:grid;grid-template-columns:1fr;gap:2rem}
.grid-3col{display:grid;grid-template-columns:1fr;gap:1.5rem}
.grid-4col{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:640px){
.grid-3col{grid-template-columns:repeat(2,1fr)}
.grid-4col{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
.grid-2col{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
.grid-3col{grid-template-columns:repeat(3,1fr)}
.grid-4col{grid-template-columns:repeat(4,1fr)}
}
.section-sm{padding-top:3rem;padding-bottom:3rem}
.section-md{padding-top:4rem;padding-bottom:4rem}
.section-lg{padding-top:4.5rem;padding-bottom:4.5rem}
@media (min-width:768px){
.section-sm{padding-top:4rem;padding-bottom:4rem}
.section-md{padding-top:5rem;padding-bottom:6rem}
.section-lg{padding-top:6rem;padding-bottom:8rem}
}
.hero{min-height:min(48rem,calc(100svh - 4.5rem));display:flex;align-items:center}
#hero.section-lg{padding-top:clamp(1.75rem,4vh,3rem);padding-bottom:clamp(1.75rem,4vh,3rem)}
#hero.hero-split img[data-img-id]{width:100%;aspect-ratio:4/3!important;max-height:min(58svh,36rem);object-fit:cover}
#hero.hero-split .text-hero{font-size:clamp(2.125rem,3.8vw,3.25rem);text-wrap:balance}
#hero.hero-split .text-lead{font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.55}
/* Contratos de componentes: modificadores nunca podem perder a estrutura base
   e superfícies claras dentro de seções escuras recuperam cores legíveis. */
.btn-primary{color:var(--color-on-accent)}
.site-nav a.btn{padding:.75rem 1.5rem;line-height:1}
.site-nav a.btn.btn-lg{padding:1rem 2.25rem}
.site-nav a.btn.btn-sm{padding:.5rem 1.125rem}
.site-nav a.btn-primary{color:var(--color-on-accent)}
.site-nav a:not(.btn):hover{color:var(--color-accent)!important}
.icon-box-primary{color:var(--color-on-primary)}
.icon-box-accent{color:var(--color-on-accent)}
.icon-box-primary svg,.icon-box-accent svg{color:inherit!important}
.step-number,.step-number-accent{width:2.75rem;height:2.75rem;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;line-height:1}
.step-number-accent{background:var(--color-accent);color:var(--color-on-accent)}
.card:not(.card-featured),.metric-card,.testimonial-card{color:var(--color-on-card)}
.card:not(.card-featured) .text-white,.metric-card .text-white,.testimonial-card .text-white{color:var(--color-on-card)!important}
.metric-card .metric-label{color:var(--color-text-muted)!important}
.surface-card{color:var(--color-on-surface)}
.surface-card .text-white{color:var(--color-on-surface)!important}
.card-featured{color:var(--color-on-primary)}
.card-featured .text-white{color:var(--color-on-primary)!important}
.text-on-primary{color:var(--color-on-primary)}
.text-on-secondary{color:var(--color-on-secondary)}
.text-on-accent{color:var(--color-on-accent)}
.text-on-card{color:var(--color-on-card)}
.text-on-surface{color:var(--color-on-surface)}
.bg-dark .testimonial-card{background:var(--color-card);color:var(--color-on-card)}
.bg-dark .testimonial-card p,.bg-dark .testimonial-card blockquote,.bg-dark .testimonial-card .testimonial-quote,.bg-dark .testimonial-card .testimonial-name{color:var(--color-on-card)}
.bg-dark .testimonial-card .testimonial-role{color:var(--color-text-muted)}
@media(max-width:767px){
.hero{min-height:auto}
#hero.section-lg{padding-top:3rem;padding-bottom:3rem}
#hero.hero-split img[data-img-id]{max-height:22rem}
.site-nav .container{position:relative}
#site-header [data-nav-menu]:not(.nav-open),#site-header .nav-menu:not(.nav-open),#site-header .mobile-menu:not(.nav-open){display:none!important}
#site-header [data-nav-toggle]{display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text)}
#site-header [data-nav-menu].nav-open,#site-header .nav-menu.nav-open,#site-header .mobile-menu.nav-open{position:absolute;top:calc(100% + .5rem);left:1rem;right:1rem;display:flex!important;flex-direction:column;align-items:stretch;gap:.25rem;padding:1rem;background:var(--color-card);color:var(--color-on-card);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
#site-header .nav-open a:not(.btn){display:block;padding:.75rem 1rem!important;border-radius:var(--radius-sm)}
#site-header .nav-open .btn{width:100%}
}
@media(min-width:768px){
#site-header [data-nav-menu]{display:flex!important}
#site-header [data-nav-toggle]{display:none!important}
}
/* ── SiteGen Base Layout END ── */