/* ============================================================
   BRANDBOOK PROFESSOR PINGUIM, design tokens (CSS variables)
   Versão 2.0, oficial QG-002.5
   Fonte: extração visual do Key Visual "Imersão Física" e do
   logo horizontal #03 (laranja). Validado contra 6+ criativos
   anteriores (ads estáticos, posts Instagram, key visual lunar).

   v1.1 (2026-05-13): adicionados (a) cor de urgência coral,
   (b) glow do CTA laranja, (c) escala tipográfica hero
   (desktop/tablet/mobile) e (d) biblioteca de 7 @keyframes
   para animações CSS puras. Referência visual:
   02-estrategia/referencias-visuais/seonapratica/REFERENCIA.md

   v2.0 (2026-05-21): redesign Linear/Vercel dark refinado.
   Adicionados: mesh gradients, glassmorphism (3 níveis), glow
   tokens, tipografia display (pesos 200/300/800/900), escala
   de espaço ampliada (5xl/6xl/7xl), easing cubic-bezier
   nomeadas, timing cinematográfico, animações de scroll-reveal
   escalonado e mesh shift. Nenhum token v1.1 foi removido.
   Referência: 04-criativos/brandbook/BRANDBOOK-WEB-v2.md.
   ============================================================ */

:root {

  /* ----- CORES PRIMÁRIAS ----- */

  /* Laranja Energia, cor do logo, CTAs e ênfases */
  --cor-laranja-energia: #F39419;
  --cor-laranja-energia-claro: #F9B255;   /* hover, brilho do gradiente */
  --cor-laranja-energia-escuro: #C77410;  /* active, sombra do gradiente */
  --cor-laranja-energia-10: rgba(243, 148, 25, 0.10);
  --cor-laranja-energia-30: rgba(243, 148, 25, 0.30);
  --cor-laranja-energia-50: rgba(243, 148, 25, 0.50);

  /* Azul Pinguim, azul royal de marca, presente no tile do logo */
  --cor-azul-pinguim: #3F66C2;
  --cor-azul-pinguim-claro: #6F8FDB;
  --cor-azul-pinguim-escuro: #2C4A98;
  --cor-azul-pinguim-10: rgba(63, 102, 194, 0.10);
  --cor-azul-pinguim-30: rgba(63, 102, 194, 0.30);

  /* Urgência Coral, NOVO v1.1, usado APENAS para janelas que estão
     fechando (carrinho aberto, contagem regressiva, badge "começa
     em X dias"). Nunca usar como cor principal. Nunca em texto longo. */
  --cor-urgencia: #E5483A;
  --cor-urgencia-claro: #F0695C;
  --cor-urgencia-escuro: #B83025;
  --cor-urgencia-10: rgba(229, 72, 58, 0.10);
  --cor-urgencia-30: rgba(229, 72, 58, 0.30);
  --cor-urgencia-glow: rgba(229, 72, 58, 0.50);

  /* Glow do CTA laranja, NOVO v1.1, halo difuso usado nas animações
     pulse-glow do CTA primário. Não usar como cor de preenchimento. */
  --cor-laranja-glow: rgba(243, 148, 25, 0.55);

  /* ----- AZUIS COMPLEMENTARES (do Key Visual oficial) ----- */

  /* Azul Céu, mais claro dos 4, highlights e gradientes */
  --cor-azul-ceu: #6FA8F5;

  /* Azul Cosmos, profundo, blocos premium e seções de autoridade */
  --cor-azul-cosmos: #1F3666;

  /* Azul Abismo, navy profundo, fundos dramáticos alternativos */
  --cor-azul-abismo: #0E1F5A;

  /* ----- NEUTROS ----- */

  /* Preto Cosmos, fundo dramático principal */
  --cor-preto-cosmos: #0E0F12;
  --cor-preto-cosmos-90: rgba(14, 15, 18, 0.90);
  --cor-preto-cosmos-70: rgba(14, 15, 18, 0.70);
  --cor-preto-cosmos-50: rgba(14, 15, 18, 0.50);

  /* Cinza Aula, divisores, bordas sutis sobre escuro */
  --cor-cinza-aula: #2A2D33;

  /* Branco Limpo, texto sobre escuro, fundo limpo */
  --cor-branco-limpo: #FFFFFF;
  --cor-branco-suave: #F5F6F8;     /* fundos secos, cards claros */
  --cor-branco-borda: #E4E7EC;     /* divisores em fundos claros */

  /* ----- TEXTO ----- */

  --texto-principal-claro: #FFFFFF;          /* sobre fundo escuro */
  --texto-secundario-claro: #B6BAC2;         /* sobre fundo escuro, menor ênfase */
  --texto-principal-escuro: #0E0F12;         /* sobre fundo claro */
  --texto-secundario-escuro: #4A4F58;        /* sobre fundo claro, menor ênfase */

  /* ----- TIPOGRAFIA ----- */

  --fonte-principal: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* Escala tipográfica, base 16px */

  /* Hero display, NOVO v1.1, fluído desktop → mobile.
     Usar apenas no headline da seção 1 (HERO). Razão hero/body ~4,5x
     para teatralidade cinematográfica (referência: seonapratica). */
  --tipo-hero-desktop: 72px;
  --tipo-hero-tablet: 56px;
  --tipo-hero-mobile: 34px;
  --tipo-hero-altura: 1.05;
  --tipo-hero-letra: -0.025em;

  --tipo-h1-tamanho: 56px;
  --tipo-h1-altura: 1.10;
  --tipo-h1-letra: -0.02em;

  --tipo-h2-tamanho: 40px;
  --tipo-h2-altura: 1.15;
  --tipo-h2-letra: -0.015em;

  --tipo-h3-tamanho: 28px;
  --tipo-h3-altura: 1.25;
  --tipo-h3-letra: -0.01em;

  --tipo-h4-tamanho: 22px;
  --tipo-h4-altura: 1.30;
  --tipo-h4-letra: 0;

  --tipo-corpo-grande: 18px;
  --tipo-corpo-grande-altura: 1.55;

  --tipo-corpo: 16px;
  --tipo-corpo-altura: 1.60;

  --tipo-pequeno: 14px;
  --tipo-pequeno-altura: 1.55;

  --tipo-caption: 12px;
  --tipo-caption-altura: 1.50;

  --tipo-botao: 16px;
  --tipo-botao-altura: 1.20;
  --tipo-botao-letra: 0.01em;

  /* ----- GRID, ESPAÇAMENTO, RAIO, SOMBRAS ----- */

  /* Base 8px (com half-step 4px) */
  --espaco-xxs: 4px;
  --espaco-xs: 8px;
  --espaco-sm: 12px;
  --espaco-md: 16px;
  --espaco-lg: 24px;
  --espaco-xl: 32px;
  --espaco-2xl: 48px;
  --espaco-3xl: 64px;
  --espaco-4xl: 96px;

  /* Largura máxima de container */
  --container-max: 1200px;
  --container-conteudo: 720px;

  /* Raio de borda */
  --raio-sm: 6px;     /* inputs, tags */
  --raio-md: 10px;    /* botões, cards pequenos */
  --raio-lg: 16px;    /* cards principais */
  --raio-xl: 24px;    /* hero blocks, modais */
  --raio-pill: 999px; /* botões pílula */

  /* Sombras (suaves, foco em peso, não em difusão exagerada) */
  --sombra-1: 0 1px 2px rgba(14, 15, 18, 0.08), 0 1px 3px rgba(14, 15, 18, 0.06);
  --sombra-2: 0 4px 8px rgba(14, 15, 18, 0.10), 0 2px 4px rgba(14, 15, 18, 0.06);
  --sombra-3: 0 12px 24px rgba(14, 15, 18, 0.16), 0 4px 8px rgba(14, 15, 18, 0.08);

  /* Sombras com tom laranja, para CTAs */
  --sombra-cta: 0 8px 20px rgba(243, 148, 25, 0.35), 0 2px 6px rgba(243, 148, 25, 0.25);

  /* ----- GRADIENTES OFICIAIS ----- */

  /* Gradiente do botão CTA (assinatura visual presente em todos os ads) */
  --gradiente-cta: linear-gradient(90deg, #F39419 0%, #F9B255 55%, #F39419 100%);

  /* Gradiente cosmos (hero, headers premium) */
  --gradiente-cosmos: linear-gradient(180deg, #0E0F12 0%, #0E1F5A 100%);

  /* Gradiente azul-azul (cards de seção) */
  --gradiente-azul: linear-gradient(135deg, #1F3666 0%, #3F66C2 100%);

  /* ----- TRANSIÇÕES ----- */

  --transicao-rapida: 150ms ease-out;
  --transicao-padrao: 220ms ease-out;
  --transicao-lenta: 380ms ease-out;

  /* ----- DURAÇÕES DE ANIMAÇÃO (NOVO v1.1) ----- */
  --anim-entrada: 0.7s;        /* fade-in-up das seções no scroll */
  --anim-pulse: 2s;            /* pulse-glow do CTA, pulseBadge da urgência */
  --anim-border-trace: 3s;     /* borda animada do spotlight (curso da vez) */
  --anim-ticker: 30s;          /* marquee horizontal das universidades */
  --anim-accordion: 0.2s;      /* FAQ acordeão */
  --anim-card-flip: 0.3s;      /* flip das personas, opcional */

  /* ----- BREAKPOINTS (mobile-first) ----- */
  /* Documentação: usar via @media min-width */
  /* sm: 640, md: 768, lg: 1024, xl: 1280, 2xl: 1440 */

  /* ============================================================
     ADIÇÕES v2.0, REDESIGN LINEAR/VERCEL
     Somam-se aos tokens v1.1 acima. Nenhum token v1.1 removido.
     ============================================================ */

  /* ----- TONS DE SUPERFÍCIE (camadas glass sobre cosmos) ----- */
  --cor-superficie-1: #14161D;
  --cor-superficie-2: #1A1D26;
  --cor-superficie-3: #22262F;
  --cor-borda-glass: rgba(255, 255, 255, 0.08);
  --cor-borda-glass-forte: rgba(255, 255, 255, 0.14);

  /* ----- TONS AURORA (para mesh gradients) ----- */
  --cor-aurora-laranja: #FFB347;
  --cor-aurora-azul: #5B8FFF;
  --cor-aurora-violeta: #7B6FE8;
  --cor-aurora-magenta: #E84F8C;

  /* ----- TONS LARANJA AUXILIARES (sugeridos pelo designer) ----- */
  --cor-laranja-clara: #FFB85C;
  --cor-laranja-escuro: #C46A0A;

  /* ----- GLOW TOKENS ----- */
  --glow-laranja-sm: 0 0 24px rgba(243, 148, 25, 0.35);
  --glow-laranja-md:
    0 8px 32px rgba(243, 148, 25, 0.45),
    0 2px 8px rgba(243, 148, 25, 0.25);
  --glow-laranja-lg:
    0 16px 64px rgba(243, 148, 25, 0.55),
    0 4px 16px rgba(243, 148, 25, 0.35);
  --glow-azul-sm: 0 0 24px rgba(91, 143, 255, 0.30);
  --glow-azul-md:
    0 8px 32px rgba(91, 143, 255, 0.40),
    0 2px 8px rgba(91, 143, 255, 0.20);
  --glow-ambient-cosmos: inset 0 0 80px rgba(63, 102, 194, 0.20);
  --glow-cta-primary-soft: 0 8px 32px rgba(243, 148, 25, 0.40);
  --glow-pinguim-halo: 0 30px 120px rgba(63, 102, 194, 0.35);
  --glow-logo-soft: 0 0 18px rgba(243, 148, 25, 0.35);
  --glow-pill-laranja: 0 0 24px rgba(243, 148, 25, 0.45);
  --glow-foto-laranja: 0 0 80px rgba(243, 148, 25, 0.25);
  --glow-foto-azul: 0 30px 120px rgba(63, 102, 194, 0.35);

  /* ----- TIPOGRAFIA DISPLAY ----- */
  --peso-extralight: 200;
  --peso-light: 300;
  --peso-extrabold: 800;
  --peso-black: 900;

  --tipo-display-mobile: 44px;
  --tipo-display-tablet: 64px;
  --tipo-display-desktop: 88px;
  --tipo-display-xl: 112px;
  --tipo-display-altura: 1.02;
  --tipo-display-letra: -0.035em;

  --tipo-hero-mobile-v2: 46px;
  --tipo-hero-tablet-v2: 60px;
  --tipo-hero-desktop-v2: 88px;
  --tipo-hero-letra-v2: -0.035em;

  /* ----- TIPOGRAFIA MOBILE-PEQUENO (≤480px) -----
     Feedback USER 2026-05-24: a escala mobile (34px hero / 28px H2) ainda
     fica grande demais em viewports 360-414px (iPhone SE/12/13/14 padrão).
     Reduzimos toda a hierarquia em ~20% pra que o texto caiba confortavel
     sem zoom e sem ocupar a viewport inteira. Mínimo absoluto: 14px (a11y). */
  --tipo-hero-mobile-pequeno: 28px;       /* era 34px (token mobile) */
  --tipo-h2-mobile-pequeno: 24px;          /* era 28px (tipo-h3-tamanho) */
  --tipo-h3-mobile-pequeno: 22px;
  --tipo-subheadline-mobile-pequeno: 16px; /* era 18px (corpo-grande) */
  --tipo-microcopy-mobile-pequeno: 18px;   /* era clamp min 20px */
  --tipo-marcador-mobile-pequeno: 15px;    /* bullets do hero, era 16px */

  /* Refinamento pós-feedback USER (2026-05-21): hero desktop em 88px
     quebrava em 7 linhas e empurrava bullets pra baixo da dobra. Reduzido
     pra 68px (alvo: 4 linhas no 1440px com a copy atual). Mobile/tablet
     mantidos. Pareado com subheadline desktop ampliada (24px). */
  --tipo-hero-desktop-v2-refined: 68px;

  /* Subheadline desktop dedicada — antes usava --tipo-corpo-grande (18px)
     e somia ao lado do hero. Sobe pra 24px peso regular pra ganhar peso
     visual sem competir com o H1. Mobile/tablet seguem com tagline-mobile. */
  --tipo-subheadline-desktop: 24px;
  --tipo-subheadline-desktop-altura: 1.5;

  --tipo-h2-display-desktop: 56px;
  --tipo-h2-display-mobile: 40px;
  --tipo-h3-display-desktop: 36px;
  --tipo-h3-display-mobile: 28px;

  --tipo-tagline-desktop: 22px;
  --tipo-tagline-mobile: 18px;
  --tipo-tagline-altura: 1.45;

  --tipo-overline: 12px;
  --tipo-overline-letra: 0.16em;

  --tipo-stat-mobile: 52px;
  --tipo-stat-tablet: 64px;
  --tipo-stat-desktop: 72px;

  /* ----- ESPAÇAMENTO AMPLIADO ----- */
  --espaco-5xl: 128px;
  --espaco-6xl: 160px;
  --espaco-7xl: 200px;

  /* ----- TIMING CINEMATOGRÁFICO ----- */
  --duration-base: 220ms;
  --duration-slow: 380ms;
  --transicao-cinematic: 600ms;
  --transicao-epic: 1200ms;

  /* ----- EASING NOMEADAS ----- */
  --easing-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-confiante: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-dramatic: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-cinematic: cubic-bezier(0.22, 1, 0.36, 1);

  /* ----- DIVIDER ----- */
  --divider-gradient: linear-gradient(
    90deg,
    transparent 0%,
    rgba(243, 148, 25, 0.4) 50%,
    transparent 100%
  );

  /* ----- GLASS CARDS (tokens declarativos) ----- */
  --glass-card-bg: rgba(20, 22, 29, 0.55);
  --glass-card-blur: blur(12px) saturate(140%);
  --glass-card-border: rgba(255, 255, 255, 0.08);
  --glass-card-hover-border: rgba(255, 255, 255, 0.14);

  /* ----- MESH GRADIENTS ----- */
  --mesh-hero:
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(255, 179, 71, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 70% 55% at 15% 85%, rgba(91, 143, 255, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 65%, rgba(123, 111, 232, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0E0F12 0%, #0E1F5A 100%);

  --mesh-autoridade:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(91, 143, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(243, 148, 25, 0.08) 0%, transparent 70%),
    #0E0F12;

  --mesh-faq:
    radial-gradient(ellipse 50% 50% at 0% 0%, rgba(243, 148, 25, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(91, 143, 255, 0.15) 0%, transparent 60%),
    #0E0F12;

  --mesh-oferta:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255, 179, 71, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 100%, rgba(232, 79, 140, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, #0E0F12 0%, #1F3666 100%);

  /* ----- NOISE OVERLAY ----- */
  --noise-overlay: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  /* ============================================================
     BADGE DE SEÇÃO — TOKENS (candidatos a v2.1)
     Origem: 04-criativos/brandbook/BADGE-SECAO-spec.md (v1.1, 2026-05-26)
     Upgrade v1.0 → v1.1: +50% de presença visual mantendo hierarquia
     (badge < H2 < CTA). Fonte 12→15px desktop, 11→13px mobile.
     Padding, gap, ícone e min-height crescem proporcionalmente.
     Peso 700 MANTIDO (não sobe pra 800 — preserva separação do H2).
     Componente .section-badge: substitui .eyebrow.eyebrow--laranja em
     todas as seções não-hero da homepage. 22 tokens novos, derivados
     da paleta núcleo (zero cor nova). Formalização do bloco fica
     pendente para a próxima atualização oficial do brandbook v2.1.
     ============================================================ */

  /* Dimensões — desktop (v1.1, upgrade 2026-05-26) */
  --badge-fs: 15px;                 /* font-size desktop (v1.1, era 12px) */
  --badge-py: 13px;                 /* era 10px */
  --badge-px: 22px;                 /* era 18px */
  --badge-gap: 12px;                /* era 10px */
  --badge-min-h: 48px;              /* era 40px — atinge touch target a11y como bônus */
  --badge-icon-size: 18px;          /* era 14px */
  --badge-icon-stroke: 2.25;        /* MANTIDO — peso já calibrado pra acompanhar 700 */
  --badge-tracking: 0.12em;         /* era 0.14em — fonte maior pede menos tracking */
  --badge-mb: 28px;                 /* margin-bottom badge → H2 desktop (era 24px) */

  /* Dimensões — mobile (≤639px) (v1.1) */
  --badge-fs-mobile: 13px;          /* era 11px */
  --badge-py-mobile: 11px;          /* era 8px */
  --badge-px-mobile: 18px;          /* era 14px */
  --badge-gap-mobile: 10px;         /* era 8px */
  --badge-min-h-mobile: 42px;       /* era 36px */
  --badge-icon-size-mobile: 16px;   /* era 13px */
  --badge-mb-mobile: 20px;          /* margin-bottom badge → H2 mobile (era 16px) */

  /* Variante padrão — wash laranja sobre superficie-1 */
  --badge-bg:
    linear-gradient(180deg, rgba(243, 148, 25, 0.10) 0%, rgba(243, 148, 25, 0.04) 100%),
    rgba(20, 22, 29, 0.55);
  --badge-bg-hover:
    linear-gradient(180deg, rgba(243, 148, 25, 0.14) 0%, rgba(243, 148, 25, 0.06) 100%),
    rgba(20, 22, 29, 0.55);
  --badge-border: rgba(255, 255, 255, 0.14);
  --badge-border-hover: rgba(255, 255, 255, 0.20);
  --badge-text: var(--cor-laranja-energia-claro);

  /* Variante urgência — wash coral, único uso simultâneo permitido */
  --badge-bg-urgencia:
    linear-gradient(180deg, rgba(229, 72, 58, 0.14) 0%, rgba(229, 72, 58, 0.05) 100%),
    rgba(20, 22, 29, 0.55);
  --badge-bg-urgencia-hover:
    linear-gradient(180deg, rgba(229, 72, 58, 0.18) 0%, rgba(229, 72, 58, 0.07) 100%),
    rgba(20, 22, 29, 0.55);
  --badge-border-urgencia: rgba(229, 72, 58, 0.30);
  --badge-border-urgencia-hover: rgba(229, 72, 58, 0.42);
  --badge-text-urgencia: var(--cor-urgencia-claro);

  /* Variante institucional azul — wash azul-céu, exclusiva pra autoridade */
  --badge-bg-azul:
    linear-gradient(180deg, rgba(91, 143, 255, 0.12) 0%, rgba(91, 143, 255, 0.04) 100%),
    rgba(20, 22, 29, 0.55);
  --badge-bg-azul-hover:
    linear-gradient(180deg, rgba(91, 143, 255, 0.16) 0%, rgba(91, 143, 255, 0.06) 100%),
    rgba(20, 22, 29, 0.55);
  --badge-border-azul: rgba(91, 143, 255, 0.25);
  --badge-border-azul-hover: rgba(91, 143, 255, 0.36);
  --badge-text-azul: var(--cor-azul-ceu);

  /* Variante CLARO — adaptação dev pra seções de fundo branco
     (depoimentos, quem é o Pinguim). NÃO está no spec original
     do brand-director: o spec assumiu dark refinado. Reportada
     ao @brand-director como decisão técnica do @landing-developer
     pra preservar contraste WCAG AA sobre fundos claros existentes
     no site v2.0. Wash laranja sobre branco translúcido + texto em
     laranja escuro (#C77410, contraste 4.8:1 sobre #F5F6F8). */
  --badge-bg-claro:
    linear-gradient(180deg, rgba(243, 148, 25, 0.12) 0%, rgba(243, 148, 25, 0.05) 100%),
    rgba(255, 255, 255, 0.65);
  --badge-bg-claro-hover:
    linear-gradient(180deg, rgba(243, 148, 25, 0.18) 0%, rgba(243, 148, 25, 0.08) 100%),
    rgba(255, 255, 255, 0.75);
  --badge-border-claro: rgba(243, 148, 25, 0.32);
  --badge-border-claro-hover: rgba(243, 148, 25, 0.48);
  --badge-text-claro: var(--cor-laranja-energia-escuro);

  /* Sombra do badge — discreta, sem glow (glow é exclusivo do CTA primário) */
  --badge-shadow:
    0 2px 8px rgba(14, 15, 18, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --badge-shadow-claro:
    0 2px 8px rgba(14, 15, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

/* ============================================================
   Classes utilitárias mínimas (opcional, conveniência)
   ============================================================ */

.bg-cosmos { background-color: var(--cor-preto-cosmos); }
.bg-branco { background-color: var(--cor-branco-limpo); }
.bg-laranja { background-color: var(--cor-laranja-energia); }
.bg-azul { background-color: var(--cor-azul-pinguim); }

.txt-claro { color: var(--texto-principal-claro); }
.txt-escuro { color: var(--texto-principal-escuro); }
.txt-laranja { color: var(--cor-laranja-energia); }

/* ============================================================
   BIBLIOTECA DE ANIMAÇÕES (NOVO v1.1)
   CSS puro, zero dependência de JS. Aplicar nas seções da
   página institucional via classes utilitárias ou diretamente
   nos componentes. Todas respeitam prefers-reduced-motion.
   ============================================================ */

/* fade-in-up, entrada de cada seção no scroll (intersection observer) */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-in-up {
  animation: fade-in-up var(--anim-entrada) ease-out forwards;
}

/* pulse-glow, halo pulsando ao redor do CTA primário */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      0 8px 20px var(--cor-laranja-glow),
      0 0 0 0 var(--cor-laranja-energia-30);
  }
  50% {
    box-shadow:
      0 12px 28px var(--cor-laranja-glow),
      0 0 0 12px rgba(243, 148, 25, 0);
  }
}

.anim-pulse-glow {
  animation: pulse-glow var(--anim-pulse) ease-in-out infinite;
}

/* pulseBadge, pulso do badge de urgência (Semi Paulista, contagem etc.) */
@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--cor-urgencia-glow);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 8px rgba(229, 72, 58, 0);
  }
}

.anim-pulse-badge {
  animation: pulse-badge var(--anim-pulse) ease-in-out infinite;
}

/* border-trace, borda animada percorrendo o card do curso ativo.
   Aplicar em um pseudo-elemento ::before do card spotlight. */
@keyframes border-trace {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.anim-border-trace {
  position: relative;
  background:
    linear-gradient(var(--cor-azul-cosmos), var(--cor-azul-cosmos)) padding-box,
    linear-gradient(
      90deg,
      var(--cor-laranja-energia) 0%,
      var(--cor-laranja-energia-claro) 25%,
      var(--cor-laranja-energia) 50%,
      var(--cor-laranja-energia-claro) 75%,
      var(--cor-laranja-energia) 100%
    ) border-box;
  background-size: 200% 100%;
  border: 2px solid transparent;
  animation: border-trace var(--anim-border-trace) linear infinite;
}

/* scroll-ticker, marquee infinito horizontal de universidades.
   Aplicar no contêiner interno; o externo deve ter overflow:hidden. */
@keyframes scroll-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.anim-scroll-ticker {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll-ticker var(--anim-ticker) linear infinite;
}

/* accordion-down / accordion-up, FAQ */
@keyframes accordion-down {
  from { height: 0; opacity: 0; }
  to   { height: var(--accordion-height, auto); opacity: 1; }
}

@keyframes accordion-up {
  from { height: var(--accordion-height, auto); opacity: 1; }
  to   { height: 0; opacity: 0; }
}

/* card-flip-in / card-flip-out, OPCIONAL, flip 3D das personas */
@keyframes card-flip-in {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0);    opacity: 1; }
}

@keyframes card-flip-out {
  from { transform: rotateY(0);     opacity: 1; }
  to   { transform: rotateY(-90deg); opacity: 0; }
}

.anim-card-flip-in {
  animation: card-flip-in var(--anim-card-flip) ease-out forwards;
  backface-visibility: hidden;
}

/* ============================================================
   ACESSIBILIDADE, respeitar usuários com sensibilidade a
   movimento. Todas as animações decoram, não comunicam.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .anim-fade-in-up,
  .anim-pulse-glow,
  .anim-pulse-badge,
  .anim-border-trace,
  .anim-scroll-ticker,
  .anim-card-flip-in {
    animation: none !important;
    transition: none !important;
  }

  .anim-fade-in-up {
    opacity: 1;
    transform: none;
  }
}