/* =================================================================
   Importação da Fonte Local Merriweather
   ================================================================ */

/* Merriweather Sans - Peso Regular (400) */
@font-face {
  font-family: 'Merriweather Sans';
  src: url('./Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =================================================================
   Variáveis Globais e Design Tokens
   ================================================================ */
:root {
  --color-bg-portal: #F7F9FC;
  --color-bg-header: #FFFFFF;
  --color-bg-white: #FFFFFF;
  --color-border: #DFE5EE;
  --color-primary-dark: #00314E;
  --color-secondary-dark: #182B46;
  --color-text-main: #FFFFFF;
  --color-text-muted: #627086;
  --color-brand: #245EDB;
  --color-icon-bg: #EEF4FF;
  
  --font-inter: 'Inter', sans-serif;
  --font-merriweather: 'Merriweather Sans', sans-serif;
}

/* =================================================================
   Reset Global
   ================================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg-portal);
  font-family: var(--font-merriweather);
}

/* =================================================================
   Classes Utilitárias Estilo Tailwind CSS
   ================================================================ */

/* Flexbox */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }

/* Alinhamentos */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-content { width: 1248px; }
.w-[80px] { width: 80px; }
.w-[83px] { width: 83px; }
.w-[163px] { width: 163px; }
.w-[336px] { width: 336px; }
.w-[400px] { width: 400px; }
.w-[1440px] { width: 1440px; }
.max-w-card { max-width: 336px; }

/* Height */
.h-full { height: 100%; }
.h-1 { height: 1px; }
.h-[20px] { height: 20px; }
.h-[28px] { height: 28px; }
.h-[41px] { height: 41px; }
.h-[42px] { height: 42px; }
.h-[56px] { height: 56px; }
.h-[104px] { height: 104px; }
.h-[360px] { height: 360px; }
.min-h-[900px] { min-height: 900px; }

/* Spacing & Gap */
.gap-2 { gap: 0.5rem; }     /* 8px */
.gap-3 { gap: 0.75rem; }    /* 12px */
.gap-4 { gap: 1rem; }       /* 16px */
.gap-5 { gap: 1.25rem; }    /* 20px */
.gap-6 { gap: 1.5rem; }     /* 24px */
.gap-8 { gap: 32px; }     /* 32px */
.gap-12 { gap: 3rem; }      /* 48px */
.gap-14 { gap: 56px; }      /* 56px */

/* Padding (Escala completa expandida de 2 até o teto de 24/27) */
.p-0 { padding: 0px; }
.p-2 { padding: 8px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-12 { padding: 48px; }

/* Padding Horizontal (px) */
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.px-12 { padding-left: 48px; padding-right: 48px; }
.px-24 { padding-left: 96px; padding-right: 96px; }

/* Padding Vertical (py) */
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-24 { padding-top: 96px; padding-bottom: 96px; }
.py-27 { padding-top: 108px; padding-bottom: 108px; }

/* Margin / Coordinates */
.m-auto { margin: auto; }
.my-portal { margin: 247px auto 0 193px; }
.top-[31px] { top: 31px; }
.left-[96px] { left: 96px; }
.left-[176px] { left: 176px; }

/* Backgrounds */
.bg-white { background: var(--color-bg-white); }
.bg-portal { background: var(--color-bg-portal); }
.bg-header { background: var(--color-bg-header); }
.bg-primary-dark { background: var(--color-primary-dark); }
.bg-secondary-dark { background: var(--color-secondary-dark); }
.bg-icon { background: var(--color-icon-bg); }
.bg-logo-translucent { background: rgba(255, 255, 255, 0.1); }

/* Borders & Radius */
.border-b { border-bottom: 1px solid var(--color-border); }
.border-card { border: 1px solid var(--color-border); }
.rounded-sm { border-radius: 12px; }
.rounded-md { border-radius: 14px; }
.rounded-lg { border-radius: 16px; }

/* Typography */
.font-inter { font-family: var(--font-inter); }
.font-merriweather { font-family: var(--font-merriweather); }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 500; }
.font-bold { font-weight: 600; }
.text-xs { font-size: 12px; line-height: 15px; }
.text-sm { font-size: 14px; line-height: 17px; }
.text-base { font-size: 16px; line-height: 160%; }
.text-lg { font-size: 18px; line-height: 150%; }
.text-xl { font-size: 20px; line-height: 140%; }
.text-2xl { font-size: 24px; line-height: 130%; }
.text-3xl { font-size: 30px; line-height: 120%; }
.text-4xl { font-size: 36px; line-height: 115%; }
.text-5xl { font-size: 40px; line-height: 110%; letter-spacing: -0.02em; }
.text-6xl { font-size: 48px; line-height: 115%; }
.uppercase { text-transform: uppercase; }
.text-white { color: var(--color-text-main); }
.text-primary { color: var(--color-primary-dark); }
.text-secondary { color: var(--color-secondary-dark); }
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-brand); }
.text-center { text-align: center; }
.no-underline { text-decoration: none; }

/* =================================================================
   Classes Utilitárias de Hover (Padrão Tailwind CSS)
   ================================================================ */

/* Transição suave para os efeitos de hover (boa prática) */
.transition {
  transition: all 0.2s ease-in-out;
}

/* Hover de Cores de Fundo */
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark); }
.hover\:bg-secondary-dark:hover { background-color: var(--color-secondary-dark); }
.hover\:bg-white:hover { background-color: var(--color-bg-header); }
.hover\:bg-icon:hover { background-color: var(--color-icon-bg); }

/* Hover de Cores de Texto */
.hover\:text-white:hover { color: var(--color-text-main); }
.hover\:text-brand:hover { color: var(--color-brand); }
.hover\:text-primary:hover { color: var(--color-primary-dark); }

/* Hover de Borda */
.hover\:border-brand:hover { border-color: var(--color-brand); }

/* Efeito visual comum (Exemplo: Elevação ou Opacidade) */
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:scale-105:hover { transform: scale(1.05); }

.btn-link {
  display: inline-flex;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.btn-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}