/* ============================================================
   BASE.CSS — RESET + VARIÁVEIS CSS
   POLYMAX Brasil Indústria de Plásticos LTDA
   Sprint 1 — Estrutura Base
   ============================================================ */

/* --- VARIÁVEIS CSS --- */
:root {
  /* Paleta aprovada no briefing */
  --green:        #3DBE6E;
  --green-dark:   #2EA85A;
  --blue:         #3A7FC1;
  --blue-dark:    #2E6BAA;
  --dark:         #2D3748;

  /* Tons neutros */
  --white:        #FFFFFF;
  --gray-50:      #F9FAFB;
  --gray-100:     #F7FAFC;
  --gray-200:     #EDF2F7;
  --gray-300:     #E2E8F0;
  --gray-400:     #A0AEC0;
  --gray-500:     #718096;
  --gray-600:     #4A5568;

  /* Superfícies suaves das cores principais */
  --light-green:  #EBF9F1;
  --light-blue:   #EBF2FB;

  /* Tipografia */
  --font-primary: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Espaçamento */
  --section-gap:      80px;
  --container-max:    1200px;
  --container-px:     24px;

  /* Componentes */
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    20px;
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow:       0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.12);

  /* Transições */
  --transition:   0.22s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografia base */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark);
}

p {
  line-height: 1.7;
}

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

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

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* --- ANIMAÇÃO DE FADE-IN (ativada por JS via IntersectionObserver) --- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

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

/* Atraso escalonado para grupos de cards */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }

/* --- ACESSIBILIDADE: foco visível --- */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- PERFORMANCE: evita CLS em imagens --- */
img {
  height: auto;
  max-width: 100%;
  display: block;
}

/* Reserva espaço para imagens com width/height declarados */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* --- PERFORMANCE: font-display swap evita FOIT --- */
/* (aplicado via Google Fonts URL com &display=swap já no <link>) */

/* --- PRINT: estilos básicos para impressão --- */
@media print {
  .site-header,
  .site-footer,
  .hamburger,
  .btn,
  .cta-section {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  a {
    text-decoration: underline;
  }
}

/* --- ACESSIBILIDADE: Skip link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--green);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* --- UTILITÁRIOS GERAIS --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Corrige hidden attribute sendo sobrescrito por display flex/grid */
[hidden] {
  display: none !important;
}

/* Bloqueia scroll quando menu mobile está aberto (funciona no iOS Safari) */
html.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}