/* =============================================================
   Portal Group · Design System · Tokens
   Cores extraídas do logo (Logo Portal_Vetor -01) e das peças do
   V Portal Meeting (programação PDF e banner). Ver /design-system.
   ============================================================= */
:root {
  /* =========================================================
     Paleta: só as cinco cores oficiais do Portal Meeting.
     Todo o resto é uma dessas cinco misturada com preto ou
     branco, ou a mesma cor com transparência. Nenhum matiz novo.
     ========================================================= */
  --c-purple-700: #4E1B81;   /* Roxo primário: topo, fundos de seção, botões */
  --c-cyan-500:   #3FB8EB;   /* Azul-ciano secundário: cor do logo */
  --c-purple-500: #7911E1;   /* Roxo vivo de apoio: hover e detalhes */
  --c-black:      #000000;   /* Texto da marca */
  --c-white:      #FFFFFF;

  /* Roxo primário com preto (escurecido) */
  --c-purple-900: #2F104D;   /* 60% do roxo primário */
  --c-purple-800: #3D1565;   /* 78% */
  /* Roxo primário com branco (clareado) */
  --c-purple-600: #633690;   /* 88% roxo + 12% branco */
  --c-purple-200: #D3C6E0;   /* 25% roxo sobre branco */
  --c-purple-100: #EAE4F0;   /* 12% */
  --c-purple-050: #F4F1F7;   /* 6% */

  /* Ciano com preto e com branco */
  --c-cyan-600:   #2C81A4;   /* 70% do ciano: anel de foco */
  --c-cyan-700:   #266E8D;   /* 60% do ciano: ciano como texto sobre branco e sobre o roxo 6% (AA) */
  --c-cyan-100:   #E7F7FD;   /* 12% do ciano sobre branco */
  --c-electric:   #7911E1;

  /* Cinzas: preto sobre branco */
  --c-ink:        #333333;   /* corpo de texto, como o site atual renderiza */
  --c-ink-soft:   #4D4D4D;
  --c-mute:       #6A6A6A;

  /* Linhas e fundos: roxo primário diluído no branco */
  --c-line:       #E6DFED;   /* 14% do roxo sobre branco */
  --c-line-soft:  #F3EFF6;   /* 7% */
  --c-bg:         #FFFFFF;
  --c-bg-alt:     #F4F1F7;   /* 6%: fundo alternado puxa mais para o roxo */
  --c-bg-dark:    var(--c-purple-900);
  --c-on-dark:    #FFFFFF;
  --c-on-dark-soft: rgba(255, 255, 255, 0.78);

  /* Componentes do roxo escurecido, para véus e sombras */
  --rgb-deep: 30, 10, 50;

  /* Estados funcionais. Fora da paleta da marca por necessidade de
     leitura: erro, sucesso e aviso precisam de matiz próprio. */
  --c-success: #157048;
  --c-success-bg: #E7F5EE;
  --c-error:   #C8322B;
  --c-error-bg: #FBEAE9;
  --c-warning: #8A5A0E;
  --c-warning-bg: #FCF3E3;
  --c-focus:   var(--c-cyan-600);

  /* Tipografia */
  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  --fs-hero: clamp(2.6rem, 1.6rem + 4vw, 4.75rem);
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Espaçamento */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  /* Ritmo vertical. Quatro degraus, um encaixado no outro:
     seção > hero > bloco > cabeçalho. Nenhuma página inventa valor fora daqui. */
  --section-y: clamp(3.5rem, 6vw, 7rem);      /* respiro de cada seção, 56 a 112 */
  --hero-y:    clamp(2.5rem, 4.2vw, 4.5rem);  /* fim do hero até o conteúdo, 40 a 72 */
  --block-y:   clamp(2rem, 3.4vw, 3.5rem);    /* entre blocos dentro da seção, 32 a 56 */
  --head-y:    clamp(1.75rem, 2.6vw, 2.75rem);/* do cabeçalho da seção ao conteúdo, 28 a 44 */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Forma */
  /* Cantos no mínimo: o arredondado existe só para tirar o serrilhado da
     quina, não para arredondar a forma. --r-full fica para o que precisa
     mesmo ser círculo (avatar, botão redondo). */
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-pill: 3px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(var(--rgb-deep), 0.06), 0 1px 6px rgba(var(--rgb-deep), 0.05);
  --shadow-md: 0 6px 18px rgba(var(--rgb-deep), 0.10), 0 2px 6px rgba(var(--rgb-deep), 0.06);
  --shadow-lg: 0 18px 40px rgba(var(--rgb-deep), 0.16), 0 6px 14px rgba(var(--rgb-deep), 0.08);

  /* Motion (vocabulário único do site) */
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* ease-out expo */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 24px;
  --reveal-stagger: 90ms;
  --tilt-max: 5deg;
  --lift: 8px;
  --parallax: 12%;
  --perspective: 1200px;
  --zoom-img: 1.06;

  /* Topo */
  --header-h: 76px;
}
@media (max-width: 760px) {
  :root { --header-h: 64px; --reveal-distance: 16px; --parallax: 6%; --tilt-max: 0deg; --dur-base: 350ms; --dur-slow: 600ms; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --reveal-distance: 0px; --parallax: 0%; --tilt-max: 0deg; --dur-base: 200ms; --dur-slow: 250ms; --zoom-img: 1; --lift: 0px; }
}