/* ==========================================================================
   Faculdade Impacta · Home da Graduação
   01 · Fundamentos: fontes, tokens, base, container e tipografia
   Fonte da verdade: Figma yfW4xG6W9DgDYKLChEVRBS (página Design System 4154:5)
   Carregar DEPOIS do bootstrap-4.6.2.min.css.
   ========================================================================== */

/* ---------- Fontes (somente famílias e pesos usados no site, subset latin) */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/ubuntu-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ubuntu-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ubuntu-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ubuntu-latin-700-normal.woff2") format("woff2"); }
/* Ubuntu Mono: rótulos técnicos das páginas de curso (só é baixada onde é usada) */
@font-face { font-family: "Ubuntu Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ubuntu-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ubuntu-mono-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens (variáveis do Design System) */
:root {
  /* Texto */
  --imp-text-primary: #f4f4f7;
  --imp-text-secondary: #9a9a9a;
  --imp-text-tertiary: #808080;
  --imp-text-soft: #b3b3b3;
  --imp-text-muted: #9e9ea4;
  --imp-text-accent: #05d8ff;
  --imp-text-highlight: #fa6102;
  --imp-text-inverse: #0a0a0c;

  /* Superfícies */
  --imp-surface-page: #0a0a0c;
  --imp-surface-raised: #151518;
  --imp-surface-overlay: #232427;
  --imp-surface-sunken: #040405;

  /* Ações */
  --imp-cyan: #05d8ff;
  --imp-lime: #c3eb1e;
  --imp-orange: #fa6102;
  --imp-cyan-soft: rgba(5, 216, 255, .12);
  --imp-cyan-subtle: rgba(5, 216, 255, .06);
  --imp-error: #ee343b;

  /* Bordas */
  --imp-border: rgba(255, 255, 255, .12);
  --imp-border-strong: rgba(255, 255, 255, .16);
  --imp-border-placeholder: rgba(255, 255, 255, .20);
  --imp-border-contrast: rgba(255, 255, 255, .32);
  --imp-border-accent: rgba(5, 216, 255, .4);

  /* Fundo da Home (gradiente "Fundo/Home") */
  --imp-bg-home: linear-gradient(90deg, #0a0a0c 0%, #171719 49%, #0a0a0c 99%);

  /* Sombra "Sombra/Flutuante" */
  --imp-shadow-float: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

  /* Famílias */
  --imp-font-display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --imp-font-text: "Ubuntu", "Segoe UI", Arial, sans-serif;
  --imp-font-mono: "Ubuntu Mono", Consolas, "Courier New", monospace;

  /* Layout */
  --imp-container: 1400px;
  --imp-gutter: 20px;
  --imp-section-y: 72px;

  /* Barra fixa (altura usada também pelo voltar ao topo) */
  --imp-bar-h: 86px;
  --imp-header-h: 65px;

  /* Movimento */
  --imp-dur-fast: 200ms;
  --imp-dur-card: 250ms;
  --imp-dur-reveal: 620ms;   /* referência: entrada de seções e mídia dos cards */
  --imp-dur-zoom: 520ms;     /* referência: zoom de imagem */
  --imp-dur-mask: 700ms;     /* referência: imagem revelada de cima para baixo */
  --imp-ease: cubic-bezier(.65, 0, .35, 1);
  --imp-ease-out: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 768px) {
  :root {
    --imp-gutter: 40px;
    --imp-section-y: 128px;
    --imp-bar-h: 50px;
    --imp-header-h: 73px;
  }
}

@media (min-width: 1280px) {
  :root { --imp-header-h: 84px; }
}

/* ---------- Base (sobrepõe o reboot do Bootstrap) */
/* Recuo de rolagem: âncoras e foco por Tab param abaixo do cabeçalho e acima da barra fixa
   (e do botão "voltar ao topo"), para o elemento focado nunca ficar encoberto (WCAG 2.4.11) */
html {
  scroll-padding-top: var(--imp-header-h);
  scroll-padding-bottom: calc(var(--imp-bar-h) + 88px);
}

body.imp-home {
  margin: 0;
  min-width: 320px;
  background: var(--imp-surface-page) var(--imp-bg-home);
  color: var(--imp-text-primary);
  font-family: var(--imp-font-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: var(--imp-bar-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Zeragens com especificidade de uma classe (vencem o reboot do Bootstrap e
   perdem para as classes dos componentes, que vêm depois) */
.imp-home :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd, label) { margin: 0; }
.imp-home :where(ul, ol) { padding: 0; list-style: none; }
.imp-home :where(img, svg) { display: block; max-width: 100%; }
.imp-home :where(img) { height: auto; }
.imp-home :where(a) { color: inherit; text-decoration: none; }
.imp-home a:where(:hover) { color: inherit; text-decoration: none; }
.imp-home :where(button) { font-family: inherit; }
.imp-home strong, .imp-home b { font-weight: 700; }

/* Foco visível padrão (anel de 2px, afastamento de 3px) */
.imp-home :focus { outline: none; }
.imp-home :focus-visible {
  outline: 2px solid var(--imp-text-primary);
  outline-offset: 3px;
}

/* Link para pular direto ao conteúdo */
.imp-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1100;
  padding: 12px 16px;
  background: var(--imp-lime);
  color: var(--imp-text-inverse);
  font-weight: 700;
}
.imp-skip:focus, .imp-skip:focus-visible { top: 16px; color: var(--imp-text-inverse); }

/* ---------- Container: 1400 com respiro lateral de 20 (celular) e 40 (tablet+) */
.imp-container {
  width: 100%;
  max-width: var(--imp-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--imp-gutter);
  padding-right: var(--imp-gutter);
}

.imp-section { padding-top: var(--imp-section-y); padding-bottom: var(--imp-section-y); }

/* ---------- Tipografia (estilos de texto do Design System) */
.imp-eyebrow {
  display: block;
  font-family: var(--imp-font-text);
  font-size: 16px;
  line-height: 14.4px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--imp-cyan);
  margin-bottom: 24px;
}

.imp-title-section {
  font-family: var(--imp-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: 0;
}

.imp-title-block {
  font-family: var(--imp-font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 28.1px;
}

.imp-subtitle {
  font-family: var(--imp-font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}

.imp-text { font-size: 18px; line-height: 1.5; }
.imp-text--muted { color: var(--imp-text-muted); }
.imp-text--secondary { color: var(--imp-text-secondary); }

.imp-label {
  font-size: 16px;
  line-height: 14.4px;
  text-transform: uppercase;
}

.imp-note { font-size: 14px; line-height: 16px; }

/* Título com contorno ("Título contorno"): traço de 1px no celular, 2px a partir do tablet */
.imp-outline {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
}
@supports not (-webkit-text-stroke: 1px #000) {
  .imp-outline { color: inherit; -webkit-text-fill-color: currentColor; }
}

@media (min-width: 768px) {
  .imp-title-section { font-size: 42px; line-height: 1.05; }
  .imp-title-block { font-size: 32px; line-height: 1.1; }
  .imp-outline { -webkit-text-stroke-width: 2px; }
}

@media (min-width: 1024px) {
  .imp-title-section { font-size: 72px; line-height: 72px; }
  .imp-title-block { font-size: 41.6px; line-height: 44.928px; }
  .imp-subtitle { font-size: 24px; line-height: 32px; }
}

/* ---------- Utilidades da Home */
.imp-c-primary { color: var(--imp-text-primary); }
.imp-c-soft { color: var(--imp-text-soft); }
.imp-c-tertiary { color: var(--imp-text-tertiary); }
.imp-c-secondary { color: var(--imp-text-secondary); }
.imp-c-muted { color: var(--imp-text-muted); }
.imp-c-cyan { color: var(--imp-cyan); }
.imp-c-lime { color: var(--imp-lime); }
.imp-c-orange { color: var(--imp-orange); }

/* Blocos que mudam de posição por largura (tablet/celular x desktop) */
/* !important intencional: utilitário de visibilidade precisa vencer o display dos componentes */
@media (max-width: 1023.98px) { .imp-only-desktop { display: none !important; } }
@media (min-width: 1024px) { .imp-only-compact { display: none !important; } }

/* Marcação visual de pendência (link sem destino definido) */
.imp-pendente-nota {
  display: inline-block;
  padding: 4px 8px;
  border: 1px dashed var(--imp-border-contrast);
  color: var(--imp-text-tertiary);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Revelação de seção (somente com JS e sem redução de movimento) */
.imp-js .imp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--imp-dur-reveal) var(--imp-ease-out), transform var(--imp-dur-reveal) var(--imp-ease-out);
}
.imp-js .imp-reveal.is-visible { opacity: 1; transform: none; }
/* Foco por teclado numa seção que ainda não apareceu: mostra na hora, sem esperar a revelação */
.imp-js .imp-reveal:focus-within { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .imp-js .imp-reveal { opacity: 1; transform: none; transition: none; }
  .imp-js .imp-zoom { clip-path: none; transition: none; }
  .imp-home *, .imp-home *::before, .imp-home *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}