/* ==========================================================================
   Cadence Design System - CSS Custom Properties
   Extraido de https://www.asimov.academy/formacoes/engenheiro-de-ia/
   Gerado em 2026-08-06

   COMO TROCAR A COR DO SITE INTEIRO:
   altere apenas o bloco [data-accent] abaixo. Todo o resto deriva dele.
   ========================================================================== */

:root {
  /* --- Accent (tema trocavel) ------------------------------------------- */
  --ui-accent-dark:      #0891b2;
  --ui-accent:           #06b6d4;
  --ui-accent-light:     #22d3ee;
  --ui-accent-glow:      #67e8f9;
  --ui-accent-rgb-comma: 6, 182, 212;
  --ui-accent-rgb-space: 6 182 212;

  /* --- Superficies ------------------------------------------------------ */
  --surface:            #050505;
  --surface-deep:       #0d0d1f;
  --surface-nav:        rgb(6 6 16 / 0.75);
  --surface-card:       rgb(8 8 18 / 0.62);
  --surface-card-solid: #111116;
  --surface-card-from:  #0a0a0c;
  --surface-card-to:    #12121a;

  /* --- Texto ------------------------------------------------------------ */
  --text-heading:    #fafafa;
  --text-title-soft: #f0f3f3;
  --text-body:       #b4b4b4;
  --text-secondary:  #acacac;
  --text-card:       rgb(161 161 170 / 0.92);
  --text-muted:      rgb(255 255 255 / 0.88);
  --text-on-accent:  #050505;

  /* --- Bordas ----------------------------------------------------------- */
  --border-hairline:      rgb(255 255 255 / 0.05);
  --border-subtle:        rgb(255 255 255 / 0.08);
  --border-base:          rgb(255 255 255 / 0.14);
  --border-accent-s:      color-mix(in srgb, var(--ui-accent) 12%, transparent);
  --border-accent-m:      color-mix(in srgb, var(--ui-accent) 20%, transparent);
  --border-accent-strong: color-mix(in srgb, var(--ui-accent) 35%, transparent);

  /* --- Status ----------------------------------------------------------- */
  --status-success: #34d399;
  --status-warning: #fbbf24;
  --status-danger:  #f87171;
  --status-urgency: #f59e0b;

  /* --- Tipografia ------------------------------------------------------- */
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-logo:    "Voltaire", ui-serif, Georgia, serif;
  --font-mono:    ui-monospace, SF Mono, Menlo, Consolas, monospace;

  --fs-hero:    clamp(2.25rem, 5vw, 3.25rem);
  --lh-hero:    0.95;
  --ls-hero:    -0.05em;

  --fs-title:   clamp(2.25rem, 5vw, 3.25rem);
  --lh-title:   1.08;
  --ls-title:   -0.03em;

  --fs-copy:    1.125rem;
  --lh-copy:    1.65;
  --fs-card:    1rem;
  --lh-card:    1.65;
  --fs-nav:     0.9375rem;
  --fs-eyebrow: 0.6875rem;
  --ls-eyebrow: 0.14em;

  /* --- Raios ------------------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   12px;
  --radius-md:   1rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  1.75rem;
  --radius-pill: 9999px;

  /* --- Sombras e glows -------------------------------------------------- */
  --glow-xs: 0 0 10px color-mix(in srgb, var(--ui-accent-glow) 65%, transparent);
  --glow-sm: 0 0 12px color-mix(in srgb, var(--ui-accent) 20%, transparent);
  --glow-md: 0 0 16px color-mix(in srgb, var(--ui-accent) 25%, transparent);
  --glow-lg: 0 0 28px color-mix(in srgb, var(--ui-accent) 40%, transparent);
  --glow-xl: 0 0 40px color-mix(in srgb, var(--ui-accent) 20%, transparent);

  --shadow-cta:       0 4px 24px color-mix(in srgb, var(--ui-accent) 35%, transparent),
                      inset 0 1px rgb(255 255 255 / 0.35);
  --shadow-cta-hover: 0 8px 32px color-mix(in srgb, var(--ui-accent) 50%, transparent),
                      inset 0 1px rgb(255 255 255 / 0.4);
  --shadow-card:      inset 0 1px rgb(255 255 255 / 0.09),
                      inset 0 -1px rgb(0 0 0 / 0.22),
                      inset 0 0 48px -24px color-mix(in srgb, var(--ui-accent) 12%, transparent),
                      0 26px 60px -32px rgb(0 0 0 / 0.92);
  --focus-ring:       0 0 0 3px color-mix(in srgb, var(--ui-accent) 10%, transparent);

  /* --- Gradientes ------------------------------------------------------- */
  --grad-accent-text: linear-gradient(90deg,
                        var(--ui-accent) 0%,
                        var(--ui-accent-light) 55%,
                        var(--ui-accent-glow) 100%);
  --grad-cta:         linear-gradient(135deg,
                        var(--ui-accent-light) 0%,
                        var(--ui-accent) 55%,
                        var(--ui-accent-dark) 100%);
  --grad-btn-solid:   linear-gradient(135deg, var(--ui-accent-dark), var(--ui-accent));
  --grad-card:        linear-gradient(165deg,
                        rgb(255 255 255 / 0.045),
                        rgb(255 255 255 / 0.009));
  --grad-aura:        linear-gradient(to top,
                        color-mix(in srgb, var(--ui-accent-glow) 72%, #050505) 0,
                        color-mix(in srgb, var(--ui-accent) 48%, #050505) 22vh,
                        color-mix(in srgb, var(--ui-accent-dark) 22%, #050505) 42vh,
                        #050505 60vh,
                        #050505 100%);

  /* --- Layout ----------------------------------------------------------- */
  --header-height:   60px;
  --hero-max-width:  1440px;
  --hero-max-height: 700px;
  --container:       1280px;
  --container-wide:  1600px;
  --prose:           42rem;
  --prose-narrow:    36rem;
  --gutter:          24px;
  --gutter-lg:       40px;
  --gutter-sm:       16px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-entrance: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:      0.2s;
  --dur-base:      0.25s;
  --dur-slow:      0.4s;
}

/* --- Temas de accent alternativos ---------------------------------------- */
/* Azul de Aquario: a cor do topo da pagina. E o que vale quando o degradê
   nao roda, ou seja, sem JavaScript e com movimento reduzido ligado. */
[data-accent="blue"] {
  --ui-accent-dark: #385c91; --ui-accent: #639ff7;
  --ui-accent-light: #90bdff; --ui-accent-glow: #a7caff;
  --ui-accent-rgb-comma: 99, 159, 247; --ui-accent-rgb-space: 99 159 247;
}
/* Verde-limão: atende a intenção cromática do briefing (verde principal,
   verde-limão para energia) mantendo o contraste do sistema em fundo escuro. */
[data-accent="lime"] {
  --ui-accent-dark: #4d7c0f; --ui-accent: #84cc16;
  --ui-accent-light: #a3e635; --ui-accent-glow: #bef264;
  --ui-accent-rgb-comma: 132, 204, 22; --ui-accent-rgb-space: 132 204 22;
}
[data-accent="violet"] {
  --ui-accent-dark: #7c3aed; --ui-accent: #8b5cf6;
  --ui-accent-light: #a78bfa; --ui-accent-glow: #c4b5fd;
  --ui-accent-rgb-comma: 139, 92, 246; --ui-accent-rgb-space: 139 92 246;
}
[data-accent="emerald"] {
  --ui-accent-dark: #059669; --ui-accent: #10b981;
  --ui-accent-light: #34d399; --ui-accent-glow: #6ee7b7;
  --ui-accent-rgb-comma: 16, 185, 129; --ui-accent-rgb-space: 16 185 129;
}
[data-accent="amber"] {
  --ui-accent-dark: #d97706; --ui-accent: #f59e0b;
  --ui-accent-light: #fbbf24; --ui-accent-glow: #fcd34d;
  --ui-accent-rgb-comma: 245, 158, 11; --ui-accent-rgb-space: 245 158 11;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  margin: 0;
}

h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

a { color: inherit; text-decoration: none; }

::selection {
  background: color-mix(in srgb, var(--ui-accent) 35%, transparent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--ui-accent-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* Sem esta linha, uma animacao `infinite` nao para: ela passa a
       completar cada volta em 0.01ms e vira um piscar continuo, que e
       pior que a animacao original justamente para quem pediu menos
       movimento. Limitar a uma iteracao a faz assentar e parar. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Componentes
   ========================================================================== */

/* --- Fundo aura (a assinatura visual do site) ---------------------------- */
.aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--grad-aura);
  opacity: 0.55;
}

/* --- Header -------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-height);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-accent-s);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}
.nav__links {
  display: none;
  align-items: center;
  gap: 29px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-size: var(--fs-nav);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--text-heading); }

@media (min-width: 992px) {
  .nav { padding: 0 var(--gutter-lg); }
  .nav__links { display: flex; }
}
@media (max-width: 480px) {
  .nav { padding: 0 var(--gutter-sm); }
}

/* --- Botoes -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-nav);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color var(--dur-base), border-color var(--dur-base),
              box-shadow var(--dur-base), transform var(--dur-base),
              background var(--dur-base);
}
.btn--ghost {
  background: transparent;
  border-color: var(--border-accent-m);
  color: var(--text-heading);
}
.btn--ghost:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  box-shadow: var(--glow-sm);
}
.btn--solid {
  background: var(--grad-btn-solid);
  border: none;
  color: #fff;
  box-shadow: var(--glow-md);
}
.btn--solid:hover {
  box-shadow: var(--glow-lg);
  transform: translateY(-1px);
}
.btn--cta {
  width: 100%;
  padding: 0.9rem 1.35rem;
  font-size: var(--fs-nav);
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--grad-cta);
  border: none;
  box-shadow: var(--shadow-cta);
}
.btn--cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.btn--outline {
  width: 100%;
  padding: 0.9rem 1.35rem;
  font-weight: 600;
  color: #fff;
  border-color: var(--border-base);
  background: rgb(255 255 255 / 0.04);
}
.btn--outline:hover {
  border-color: var(--border-accent-strong);
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
  color: var(--ui-accent-light);
}
.btn--compact { padding: 6px 14px; font-size: 0.8125rem; white-space: nowrap; }

/* --- Eyebrow / badge ----------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-accent-strong);
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ui-accent-light);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ui-accent);
  box-shadow: var(--glow-xs);
}

/* --- Texto com gradiente ------------------------------------------------- */
.accent-text {
  background: var(--grad-accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Card de vidro (glass) ----------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.65rem;
  border-radius: var(--radius-2xl);
  border: 1px solid rgb(255 255 255 / 0.078);
  background-color: var(--surface-card);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-accent) 5%, transparent) 0%, transparent 42%),
    var(--grad-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-card);
  isolation: isolate;
  transition: transform var(--dur-slow) var(--ease-expo),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent-m);
}
.card--featured {
  border-color: var(--border-accent-strong);
  box-shadow: var(--shadow-card), var(--glow-xl);
}
.card__divider {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.card__title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.card__body  { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--text-card); }

@media (max-width: 767px) {
  .card { padding: 1.75rem 1.4rem 1.4rem; border-radius: var(--radius-xl); }
}

/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding: clamp(2rem, 5vw, 4rem) 0; position: relative; z-index: 1; }
.prose   { max-width: var(--prose); }

.hero {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: var(--hero-max-width);
  margin-inline: auto;
  padding: calc(var(--header-height) + 40px) var(--gutter) 4rem;
}

/* --- Animacao de entrada ------------------------------------------------- */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.animate-in    { animation: fadeSlideIn 1s var(--ease-entrance) both; }
.animate-in-lg { animation: fadeSlideIn 1.2s var(--ease-entrance) both; }
.delay-200 { animation-delay: 0.2s; }
.delay-420 { animation-delay: 0.42s; }
.delay-500 { animation-delay: 0.5s; }