/* ============================================================
   POMARTEC — Design System
   main.css: tokens, reset, tipografia, grid, utilitários
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --blue:      #478ac9;
  --blue-dk:   #2e6da4;
  --blue-lt:   #d6eaf8;
  --orange:    #f58220;
  --orange-dk: #d96a0f;
  --green:     #27ae60;
  --navy:      #0f1c2e;
  --navy-lt:   #162436;
  --dark:      #1a2e42;
  --text:      #4a5568;
  --muted:     #718096;
  --light:     #f7fafc;
  --white:     #ffffff;
  --border:    #e2e8f0;
  --border-dk: #cbd5e0;

  --font: 'Roboto', system-ui, -apple-system, sans-serif;

  --text-xs:   clamp(.75rem,   1vw,   .875rem);
  --text-sm:   clamp(.875rem,  1.2vw, 1rem);
  --text-base: clamp(1rem,     1.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 2vw,   1.375rem);
  --text-xl:   clamp(1.375rem, 2.5vw, 1.75rem);
  --text-2xl:  clamp(1.75rem,  3.5vw, 2.5rem);
  --text-3xl:  clamp(2.25rem,  5vw,   3.5rem);

  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12);

  --max-w:   1200px;
  --max-w-sm: 800px;
  --trans:    .25s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

h1, h2, h3, h4, h5 {
  color: var(--dark);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); font-weight: 600; }

p { max-width: 68ch; }
p + p { margin-top: var(--space-4); }

strong { font-weight: 700; }

/* ── Container ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

@media (max-width: 640px) {
  .container { padding-inline: var(--space-6); }
}

/* ── Sections ───────────────────────────────────────────── */
.section {
  padding-block: var(--space-24);
}

.section--sm { padding-block: var(--space-16); }
.section--lg { padding-block: var(--space-32); }
.section--dark  { background: var(--navy); color: var(--white); }
.section--light { background: var(--light); }
.section--blue  { background: var(--blue); color: var(--white); }

/* ── Grid ───────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ── Flex helpers ───────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-gap-4  { gap: var(--space-4); }
.flex-gap-8  { gap: var(--space-8); }

/* ── Section headers ────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header .eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-lt);
  padding: var(--space-1) var(--space-4);
  border-radius: 100px;
  margin-bottom: var(--space-4);
}

.section--dark .section-header .eyebrow {
  background: rgba(71,138,201,.2);
  color: #93c5e8;
}

.section-header h2 { margin-bottom: var(--space-4); }

.section-header p {
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 56ch;
  margin-inline: auto;
}

.section--dark .section-header p { color: #94a3b8; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: 100px;
  background: var(--blue-lt);
  color: var(--blue-dk);
}

.badge--orange {
  background: #fdebd0;
  color: #d96a0f;
}

.badge--green {
  background: #d5f5e3;
  color: #1a7a43;
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  width: 48px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin-block: var(--space-4);
}

.section-header .divider { margin-inline: auto; }

/* ── Text utilities ─────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--muted); }
.text-white  { color: var(--white); }
.text-blue   { color: var(--blue); }
.text-orange { color: var(--orange); }

/* ── Visibility ─────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Fade-in animation ──────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in:nth-child(2) { transition-delay: .1s; }
.fade-in:nth-child(3) { transition-delay: .2s; }
.fade-in:nth-child(4) { transition-delay: .3s; }
.fade-in:nth-child(5) { transition-delay: .4s; }
.fade-in:nth-child(6) { transition-delay: .5s; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--light); }
::-webkit-scrollbar-thumb { background: var(--border-dk); border-radius: 3px; }