/* ==========================================================================
   Do CLT a LLC — plataforma do curso
   CSS puro, servido direto (sem build step, sem framework).
   Tokens de cor herdados do funil. Usa @layer, aninhamento e container queries.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   Fontes auto-hospedadas (priv/static/fonts). Nenhuma chamada externa.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-c47ac31e5437a2a864c0aec1b2d611c0.woff2?vsn=d") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-ext-b21945eb5067341816e893cf6dc41235.woff2?vsn=d") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-0a301b6df4c74f022dc48cf9b1e8f3cf.woff2?vsn=d") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-ext-40f89707c10ea5004560631bad99a827.woff2?vsn=d") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-italic-latin-6d201901085f4f993d1c45428fb415bf.woff2?vsn=d") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-italic-latin-ext-045b9f0ec267d5d7b2919cf30a3daf69.woff2?vsn=d") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

@layer tokens {
  :root {
    /* Paleta. Quatro famílias: coral, pêssego, âmbar e azul. */
    --coral: 255 107 90;
    --peach: 255 172 120;
    --amber: 245 176 60;
    --blue: 84 132 255;

    /* Extremos do gradiente do botão principal: fechados o bastante para o
       texto branco passar de 4,5:1 nos dois temas. */
    --coral-deep: #b33b28;
    --amber-deep: #9e6008;
    /* Link é outra coisa: no claro tem de ser escuro, no escuro tem de ser
       claro. Por isso não reaproveita o tom do botão. */
    --link: #a63a24;
    --coral-ring: #c0392b;

    /* Base sobre a qual as manchas do fundo são pintadas. */
    --mesh-base: #fff3ea;

    /* Manchas do gradiente de malha. Ficam paradas: sem animação. */
    --mesh-1: rgb(var(--coral) / 0.62);
    --mesh-2: rgb(var(--peach) / 0.66);
    --mesh-3: rgb(var(--amber) / 0.6);
    --mesh-4: rgb(var(--blue) / 0.55);
    --mesh-5: rgb(255 120 160 / 0.42);

    /* Superfícies translúcidas: a cor do fundo atravessa por baixo. */
    --surface: rgb(255 255 255 / 0.85);
    --surface-solid: #ffffff;
    --surface-veil: rgb(255 255 255 / 0.44);
    --surface-tint: rgb(255 255 255 / 0.34);
    --border: rgb(255 255 255 / 0.72);
    --border-strong: rgb(60 50 45 / 0.62);
    --blur: 18px;

    /* Texto em três níveis. Nunca colorido em leitura. */
    --text-1: #1a1512;
    --text-2: #4f4640;
    --text-3: #6b615a;
    --on-color: #ffffff;

    --ok: #2f6b46;
    --danger: #a33124;

    /* Elevação vem da borda. Sombra só onde algo flutua de verdade. */
    --shadow-1: 0 1px 2px rgb(60 40 30 / 0.06);
    --shadow-2: 0 6px 20px rgb(60 40 30 / 0.12);

    /* Tipografia: a interface é toda Bricolage; a Newsreader fica no
       conteúdo de leitura e a monoespaçada nas pílulas das miniaturas. */
    --font-ui: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-reading: "Newsreader", ui-serif, Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-reading: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-10: 0.625rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;

    --radius-card: 10px;
    --radius-field: 10px;
    --radius-btn: 8px;
    --radius-pill: 999px;
    --radius-hero: 16px;

    --sidebar-w: 260px;
    --topbar-h: 56px;
    --content-max: 780px;
    --nav-item-h: 38px;
    --control-h: 40px;
    --bottomnav-h: 56px;
    --icon: 18px;

    /* Movimento: a interface se mexe, o fundo não. */
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --fast: 140ms;
    --calm: 260ms;

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --coral: 255 98 78;
      --peach: 255 150 100;
      --amber: 235 165 45;
      --blue: 70 115 255;

      --coral-deep: #c0402c;
      --amber-deep: #a3660a;
      --link: #ff9478;
      --coral-ring: #ff7a63;

      /* Mesmas manchas, mais fundas, sobre base escura. */
      --mesh-base: #0e1117;
      --mesh-1: rgb(var(--coral) / 0.26);
      --mesh-2: rgb(var(--peach) / 0.18);
      --mesh-3: rgb(var(--amber) / 0.2);
      --mesh-4: rgb(var(--blue) / 0.32);
      --mesh-5: rgb(255 90 140 / 0.18);

      --surface: rgb(24 27 34 / 0.82);
      --surface-solid: #181b22;
      --surface-veil: rgb(20 23 30 / 0.5);
      --surface-tint: rgb(255 255 255 / 0.06);
      --border: rgb(255 255 255 / 0.12);
      --border-strong: rgb(255 255 255 / 0.42);

      --text-1: #f4f1ee;
      --text-2: #c2b9b2;
      --text-3: #a2988f;
      --on-color: #ffffff;

      --ok: #7fc39a;
      --danger: #f08b78;

      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-2: 0 6px 20px rgb(0 0 0 / 0.5);
    }
  }
}

/* --------------------------------------------------------------------------
   Reset enxuto
   -------------------------------------------------------------------------- */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Base e fundo de malha
   -------------------------------------------------------------------------- */

@layer base {
  body {
    min-block-size: 100dvh;
    background-color: var(--mesh-base);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    font-optical-sizing: auto;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* O gradiente de malha da aplicação inteira. Cinco manchas radiais grandes
     e bem espalhadas: coral em cima à esquerda, pêssego descendo para o
     centro, âmbar no canto de baixo, azul ocupando a direita. É `fixed`,
     então não rola com a página, e é estático: não há animação aqui. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--mesh-base);
    background-image:
      radial-gradient(60rem 48rem at 2% -6%, var(--mesh-1), transparent 62%),
      radial-gradient(52rem 46rem at 34% 40%, var(--mesh-2), transparent 64%),
      radial-gradient(46rem 42rem at -4% 104%, var(--mesh-3), transparent 62%),
      radial-gradient(72rem 64rem at 104% 26%, var(--mesh-4), transparent 62%),
      radial-gradient(48rem 44rem at 82% 100%, var(--mesh-5), transparent 64%);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  h4 {
    font-size: var(--text-base);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--link);
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
    transition: color var(--fast) var(--ease);

    &:hover {
      color: var(--text-1);
    }
  }

  :focus-visible {
    outline: 2px solid var(--coral-ring);
    outline-offset: 2px;
    border-radius: var(--radius-btn);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--border);
  }

  svg {
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

@layer layout {
  .app-shell {
    min-block-size: 100dvh;
  }

  /* A lateral é translúcida sobre a malha, com desfoque de fundo. */
  .sidebar {
    display: none;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--sidebar-w);
    padding: var(--space-16) var(--space-12);
    border-inline-end: 1px solid var(--border);
    background-color: var(--surface-veil);
    backdrop-filter: blur(var(--blur)) saturate(190%);
    overflow-y: auto;
  }

  .sidebar__brand {
    display: flex;
    align-items: center;
    block-size: var(--topbar-h);
    padding-inline: var(--space-10);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--text-1);
    text-decoration: none;
    transition: color var(--fast) var(--ease);

    &:hover {
      color: var(--link);
    }
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
  }

  .nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .app-main {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    padding-block-end: var(--bottomnav-h);
  }

  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    block-size: var(--topbar-h);
    padding-inline: var(--space-16);
    border-block-end: 1px solid var(--border);
    background-color: var(--surface-veil);
    backdrop-filter: blur(var(--blur)) saturate(190%);
  }

  .topbar__search {
    flex: 1;
    max-inline-size: 360px;
  }

  .topbar__account {
    margin-inline-start: auto;
  }

  .content {
    container-type: inline-size;
    container-name: content;
    inline-size: min(100% - var(--space-32), var(--content-max));
    margin-inline: auto;
    padding-block: var(--space-32);
  }

  /* Mais espaço para o conteúdo, como na tela da aula com o player. */
  .content--larga {
    --content-max: 1120px;
  }

  .bottom-nav {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    block-size: var(--bottomnav-h);
    border-block-start: 1px solid var(--border);
    background-color: var(--surface-veil);
    backdrop-filter: blur(var(--blur)) saturate(190%);
  }

  .bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    text-decoration: none;
    transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);

    &:hover {
      color: var(--text-1);
      transform: translateY(-1px);
    }

    &[aria-current="page"] {
      color: var(--link);
    }
  }

  @media (min-width: 768px) {
    .sidebar {
      display: block;
    }

    .app-main {
      margin-inline-start: var(--sidebar-w);
      padding-block-end: 0;
    }

    .topbar {
      padding-inline: var(--space-24);
    }

    .bottom-nav {
      display: none;
    }
  }

  .public-shell {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }

  .public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    inline-size: min(100%, 960px);
    margin-inline: auto;
    block-size: var(--topbar-h);
    padding-inline: var(--space-16);
  }

  .public-brand {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--text-1);
    text-decoration: none;
    transition: color var(--fast) var(--ease);

    &:hover {
      color: var(--link);
    }
  }

  .public-main {
    flex: 1;
    display: grid;
    place-items: center;
    padding: var(--space-32) var(--space-16) var(--space-48);
  }

  .public-footer {
    padding: var(--space-20) var(--space-16);
    border-block-start: 1px solid var(--border);
    color: var(--text-2);
    font-size: var(--text-sm);
    text-align: center;
  }

  .auth-column {
    inline-size: min(100%, 400px);
  }

  .hero-column {
    inline-size: min(100%, 560px);
    text-align: center;

    & .row {
      justify-content: center;
    }

    & .prose {
      margin-inline: auto;
    }
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .stack--tight {
    gap: var(--space-8);
  }

  .stack--loose {
    gap: var(--space-24);
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
  }

  .row--between {
    justify-content: space-between;
  }

  /* Tela da aula: player e informações à esquerda, aulas do módulo à
     direita. No celular, a lista de aulas fica logo abaixo do player. */
  .aula-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "player" "nav" "info";
    gap: var(--space-24);
  }

  .aula-layout__player {
    grid-area: player;
  }

  .aula-layout__nav {
    grid-area: nav;
  }

  .aula-layout__info {
    grid-area: info;
  }

  .aula-layout--sem-nav {
    grid-template-areas: "player" "info";

    & .aula-layout__nav {
      display: none;
    }
  }

  @container content (min-width: 52rem) {
    .aula-layout {
      grid-template-columns: minmax(0, 1fr) 18rem;
      grid-template-areas: "player nav" "info nav";
      align-items: start;
    }

    .aula-layout--sem-nav {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "player" "info";
    }
  }

  .tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  @container content (min-width: 34rem) {
    .tile-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Grade de tópicos: 1 coluna no celular, 2 no tablet, 4 no desktop. */
  .topic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  @container content (min-width: 28rem) {
    .topic-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container content (min-width: 46rem) {
    .topic-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Cartão da grade de tópicos: o cartão inteiro é o link. */
  .topic-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-card);

    &:hover {
      color: inherit;
    }

    & > .card {
      block-size: 100%;
    }
  }
}

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */

@layer components {
  /* Ícone ----------------------------------------------------------------- */
  .icon {
    inline-size: var(--icon);
    block-size: var(--icon);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--lg {
    inline-size: 28px;
    block-size: 28px;
    stroke-width: 1.4;
  }

  .icon--sm {
    inline-size: 16px;
    block-size: 16px;
  }

  /* Rótulo de grupo ------------------------------------------------------- */
  .section-label {
    padding: var(--space-8) var(--space-10) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* Item de navegação. Ativo recebe gradiente coral/pêssego, nunca cinza. -- */
  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-10);
    block-size: var(--nav-item-h);
    padding-inline: var(--space-10);
    border-radius: var(--radius-btn);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    text-decoration: none;
    overflow: hidden;
    transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);

    /* O fundo entra deslizando quando o item vira o ativo. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background-image: linear-gradient(
        100deg,
        rgb(var(--coral) / 0.3),
        rgb(var(--peach) / 0.34) 55%,
        rgb(var(--amber) / 0.24)
      );
      opacity: 0;
      transform: translateX(-12%);
      transition: opacity var(--calm) var(--ease), transform var(--calm) var(--ease);
    }

    &:hover {
      color: var(--text-1);

      &::before {
        opacity: 0.5;
        transform: translateX(0);
      }
    }

    &:active {
      transform: scale(0.99);
    }

    &[aria-current="page"] {
      color: var(--text-1);
      font-weight: var(--weight-semibold);

      &::before {
        opacity: 1;
        transform: translateX(0);
      }
    }

    &[aria-disabled="true"] {
      color: var(--text-3);
      pointer-events: none;
    }
  }

  /* Abas: pílulas lado a lado. A ativa ganha o mesmo gradiente do item
     ativo da navegação. */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .tabs__item {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    block-size: var(--nav-item-h);
    padding-inline: var(--space-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    backdrop-filter: blur(var(--blur)) saturate(190%);
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    cursor: pointer;
    overflow: hidden;
    transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background-image: linear-gradient(
        100deg,
        rgb(var(--coral) / 0.3),
        rgb(var(--peach) / 0.34) 55%,
        rgb(var(--amber) / 0.24)
      );
      opacity: 0;
      transition: opacity var(--calm) var(--ease);
    }

    &:hover {
      color: var(--text-1);

      &::before {
        opacity: 0.5;
      }
    }

    &:active {
      transform: scale(0.98);
    }

    &:focus-visible {
      border-radius: var(--radius-pill);
    }

    &[aria-pressed="true"] {
      color: var(--text-1);
      font-weight: var(--weight-semibold);

      &::before {
        opacity: 1;
      }
    }
  }

  .nav-item__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Etiqueta: pílula pequena tingida de azul claro. ----------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    block-size: 20px;
    padding-inline: var(--space-8);
    border: 1px solid rgb(var(--blue) / 0.28);
    border-radius: var(--radius-pill);
    background-color: rgb(var(--blue) / 0.16);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    white-space: nowrap;
    transition: background-color var(--fast) var(--ease);
  }

  /* Botões ---------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    block-size: var(--control-h);
    padding-inline: var(--space-16);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-position var(--calm) var(--ease),
      background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
      color var(--fast) var(--ease), transform var(--fast) var(--ease),
      box-shadow var(--fast) var(--ease);

    &:active {
      transform: translateY(1px);
    }

    &[disabled],
    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    &[aria-busy="true"] {
      cursor: progress;
      pointer-events: none;
    }
  }

  /* Principal: gradiente coral → âmbar, texto branco. No hover o gradiente
     desloca. Os dois extremos são fechados o bastante para o branco passar
     de 4,5:1. */
  .btn--primary {
    background-image: linear-gradient(
      100deg,
      var(--coral-deep) 0%,
      var(--amber-deep) 50%,
      var(--coral-deep) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: var(--on-color);
    box-shadow: var(--shadow-1);

    &:hover {
      background-position: 100% 50%;
      box-shadow: var(--shadow-2);
    }
  }

  .btn--secondary {
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-1);
    backdrop-filter: blur(8px);

    &:hover {
      background-color: var(--surface-solid);
      border-color: var(--link);
      transform: translateY(-1px);
      box-shadow: var(--shadow-1);
    }
  }

  .btn--ghost {
    padding-inline: var(--space-10);
    background-color: transparent;
    color: var(--text-2);

    &:hover {
      background-color: var(--surface-tint);
      color: var(--text-1);
    }
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn__spinner {
    inline-size: 14px;
    block-size: 14px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-pill);
    animation: girar 700ms linear infinite;
  }

  @keyframes girar {
    to {
      transform: rotate(1turn);
    }
  }

  /* Campos ---------------------------------------------------------------- */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-1);
  }

  .field__hint {
    font-size: var(--text-sm);
    color: var(--text-2);
  }

  .field__error {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--danger);
  }

  .input {
    inline-size: 100%;
    block-size: var(--control-h);
    padding-inline: var(--space-12);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-field);
    background-color: var(--surface);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: border-color var(--fast) var(--ease), box-shadow var(--calm) var(--ease),
      background-color var(--fast) var(--ease);

    &::placeholder {
      color: var(--text-3);
    }

    &:hover {
      background-color: var(--surface-solid);
    }

    /* O anel de foco cresce em vez de aparecer seco. */
    &:focus-visible {
      outline: 2px solid var(--coral-ring);
      outline-offset: 0;
      border-color: var(--coral-ring);
      box-shadow: 0 0 0 4px rgb(var(--coral) / 0.18);
    }

    &[aria-invalid="true"] {
      border-color: var(--danger);
    }

    &[disabled] {
      background-color: var(--surface-tint);
      border-color: var(--border);
      color: var(--text-3);
      cursor: not-allowed;
    }
  }

  textarea.input {
    block-size: auto;
    min-block-size: 96px;
    padding-block: var(--space-10);
    resize: vertical;
  }

  .field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .checkbox {
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--coral-deep);
  }

  .search-field {
    position: relative;
    display: flex;
    align-items: center;

    & .icon {
      position: absolute;
      inset-inline-start: var(--space-12);
      color: var(--text-3);
      pointer-events: none;
    }

    & .input {
      padding-inline-start: var(--space-32);
    }
  }

  /* Cartão: branco com transparência e desfoque, para a cor atravessar. --- */
  .card {
    padding: var(--space-20);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    backdrop-filter: blur(var(--blur)) saturate(190%);
    transition: transform var(--calm) var(--ease), box-shadow var(--calm) var(--ease),
      border-color var(--calm) var(--ease);
  }

  .card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: rgb(var(--coral) / 0.45);
  }

  /* Cartão com miniatura: a faixa vai de ponta a ponta, sem respiro. */
  .card--media {
    padding: 0;
    overflow: hidden;
  }

  .card__body {
    padding: var(--space-20);
  }

  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-block-end: var(--space-12);
  }

  .card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-1);
  }

  .card__text {
    color: var(--text-2);
  }

  .card__footer {
    margin-block-start: var(--space-16);
    padding-block-start: var(--space-16);
    border-block-start: 1px solid var(--border);
  }

  /* Miniatura em gradiente de malha, 16:9. A cor sai do nome do item, então
     o mesmo item tem sempre a mesma miniatura. É a parte mais visível do
     cartão. Estática: sem animação. */
  .thumb {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: var(--space-12);
    border-block-end: 1px solid var(--border);
  }

  .thumb__pill {
    display: inline-flex;
    align-items: center;
    block-size: 24px;
    padding-inline: var(--space-10);
    border-radius: var(--radius-pill);
    background-color: #ffffff;
    box-shadow: var(--shadow-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    color: #1a1512;
  }

  /* Cabeçalho do painel: bloco largo em gradiente forte. O texto branco fica
     sobre um véu escuro, não sobre a cor crua — é a camada que escurece, não
     o gradiente. */
  .hero-panel {
    position: relative;
    isolation: isolate;
    padding: var(--space-32) var(--space-24);
    border-radius: var(--radius-hero);
    overflow: hidden;
    background-image: linear-gradient(
      104deg,
      rgb(var(--coral)) 0%,
      rgb(var(--peach)) 42%,
      rgb(var(--amber)) 62%,
      rgb(var(--blue)) 100%
    );
  }

  .hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgb(24 14 10 / 0.46);
  }

  .hero-panel__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--on-color);
  }

  .hero-panel__subtitle {
    margin-block-start: var(--space-8);
    max-inline-size: 52ch;
    color: rgb(255 255 255 / 0.92);
  }

  /* Avatar: gradiente derivado do nome, iniciais em branco. --------------- */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--radius-pill);
    color: var(--on-color);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
    transition: transform var(--calm) var(--ease), box-shadow var(--calm) var(--ease);
  }

  .avatar--24 {
    inline-size: 24px;
    block-size: 24px;
    font-size: 10px;
  }

  .avatar--40 {
    inline-size: 40px;
    block-size: 40px;
    font-size: var(--text-sm);
  }

  /* Avatar que é foto, não iniciais. */
  .avatar--foto {
    object-fit: cover;
  }

  /* Bloco da foto de perfil: o retrato à esquerda, os controles à direita. */
  .foto-perfil {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-16);
  }

  .foto-perfil__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 96px;
    block-size: 96px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid var(--border);
    background-color: var(--surface-tint);

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* Menu da conta --------------------------------------------------------- */
  .account-menu {
    position: relative;
  }

  .account-menu__trigger {
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;

    &:hover .avatar {
      transform: scale(1.06);
      box-shadow: var(--shadow-2);
    }
  }

  .account-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-8));
    inset-inline-end: 0;
    z-index: 40;
    min-inline-size: 220px;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    backdrop-filter: blur(var(--blur)) saturate(190%);
    box-shadow: var(--shadow-2);
    animation: menu-abre var(--calm) var(--ease);

    &[hidden] {
      display: none;
    }
  }

  @keyframes menu-abre {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.98);
    }
  }

  .account-menu__email {
    display: block;
    padding: var(--space-8) var(--space-10);
    margin-block-end: var(--space-4);
    border-block-end: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-2);
    overflow-wrap: anywhere;
  }

  .account-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    inline-size: 100%;
    block-size: var(--nav-item-h);
    padding-inline: var(--space-10);
    border-radius: var(--radius-btn);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
      padding-inline-start var(--fast) var(--ease);

    &:hover {
      background-image: linear-gradient(
        100deg,
        rgb(var(--coral) / 0.22),
        rgb(var(--peach) / 0.22)
      );
      color: var(--text-1);
      padding-inline-start: var(--space-12);
    }
  }

  /* Barra de progresso ---------------------------------------------------- */
  .progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .progress__track {
    block-size: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--surface-tint);
    overflow: hidden;
  }

  .progress__bar {
    block-size: 100%;
    border-radius: var(--radius-pill);
    background-image: linear-gradient(90deg, var(--coral-deep), var(--amber-deep));
    transition: inline-size var(--calm) var(--ease);
  }

  .progress__label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-12);
    font-size: var(--text-sm);
    color: var(--text-2);
  }

  /* Estado vazio: o ícone fica num bloco pequeno em gradiente. ------------ */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-32) var(--space-20);
    text-align: center;
  }

  .empty-state__badge {
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    margin-block-end: var(--space-4);
    border-radius: 14px;
    background-image: linear-gradient(
      135deg,
      rgb(var(--coral)) 0%,
      rgb(var(--peach)) 50%,
      rgb(var(--amber)) 100%
    );
    color: #2a1006;
    box-shadow: var(--shadow-1);
    transition: transform var(--calm) var(--ease);
  }

  .empty-state:hover .empty-state__badge {
    transform: rotate(-4deg) scale(1.04);
  }

  .empty-state__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-1);
  }

  .empty-state__text {
    max-inline-size: 44ch;
    color: var(--text-2);
  }

  .empty-state__actions {
    margin-block-start: var(--space-8);
  }

  /* "Em breve": o módulo que ainda não tem aula. Não é um estado vazio comum,
     é a primeira coisa que o aluno vê no módulo, então leva cor e ar. ----- */
  .em-breve {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-48) var(--space-24);
    border-radius: var(--radius-hero);
    text-align: center;
    background-image: linear-gradient(
      135deg,
      rgb(var(--coral) / 0.2) 0%,
      rgb(var(--peach) / 0.18) 40%,
      rgb(var(--amber) / 0.16) 64%,
      rgb(var(--blue) / 0.2) 100%
    );
  }

  /* Clarão atrás do selo, para o painel não ficar chapado. */
  .em-breve::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: -45%;
    inset-inline-start: 50%;
    inline-size: 420px;
    block-size: 420px;
    translate: -50% 0;
    border-radius: var(--radius-pill);
    background-image: radial-gradient(circle, rgb(var(--peach) / 0.42) 0%, transparent 70%);
  }

  .em-breve__selo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-12);
    border: 1px solid rgb(var(--coral) / 0.32);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-1);
  }

  /* O único movimento do painel: um ponto que respira devagar. */
  .em-breve__ponto {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-pill);
    background-color: rgb(var(--coral));
    animation: em-breve-respira 2.4s var(--ease) infinite;
  }

  @keyframes em-breve-respira {
    50% {
      opacity: 0.3;
      transform: scale(0.75);
    }
  }

  .em-breve__titulo {
    max-inline-size: 22ch;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-1);
  }

  .em-breve__texto {
    max-inline-size: 42ch;
    color: var(--text-2);
  }

  /* Aviso: barra fina colorida à esquerda, resto neutro. ------------------ */
  .callout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--text-3);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    backdrop-filter: blur(var(--blur));
    color: var(--text-2);
  }

  .callout__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-1);
  }

  .callout--info {
    border-inline-start-color: var(--coral-deep);
  }

  .callout--sucesso {
    border-inline-start-color: var(--ok);
  }

  .callout--erro {
    border-inline-start-color: var(--danger);
  }

  /* Flash ----------------------------------------------------------------- */
  .flash-group {
    position: fixed;
    inset-block-start: var(--space-16);
    inset-inline-end: var(--space-16);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    inline-size: min(100% - var(--space-32), 21rem);
  }

  .flash {
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--coral-deep);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-2);
    color: var(--text-2);
    cursor: pointer;
    animation: flash-entra var(--calm) var(--ease);

    &[hidden] {
      display: none;
    }
  }

  @keyframes flash-entra {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
  }

  .flash__title {
    font-weight: var(--weight-semibold);
    color: var(--text-1);
  }

  .flash--error {
    border-inline-start-color: var(--danger);
  }

  /* Cabeçalho de página --------------------------------------------------- */
  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-24);
  }

  .page-header__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-1);
  }

  .page-header__subtitle {
    margin-block-start: var(--space-4);
    color: var(--text-2);
  }

  /* Tabela e lista -------------------------------------------------------- */
  .table {
    inline-size: 100%;
    border-collapse: collapse;

    & th,
    & td {
      padding: var(--space-10) var(--space-12);
      border-block-end: 1px solid var(--border);
      text-align: start;
    }

    & th {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
    }
  }

  .table--clickable tbody td {
    cursor: pointer;
  }

  .data-list {
    & > li {
      padding-block: var(--space-12);
      border-block-end: 1px solid var(--border);
    }
  }

  /* Linha de aula: título à esquerda, duração e "Concluída" à direita. */
  .lesson-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-12);

    & a[aria-current="page"] {
      font-weight: var(--weight-semibold);
      color: var(--text-1);
    }
  }

  .lesson-row__meta {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  /* Módulo não publicado na lista: só o título, com cadeado e "Em breve". */
  .card[data-bloqueado] {
    & .card__header {
      margin-block-end: 0;
    }

    & .card__title {
      display: inline-flex;
      align-items: center;
      gap: var(--space-8);
      color: var(--text-2);
    }

    & .card__title .icon {
      color: var(--text-3);
    }
  }

  /* Aula que a conta não pode abrir: cadeado, título sem link e o aviso. */
  .lesson-row__bloqueada {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-8);
    color: var(--text-2);

    & .icon {
      flex: none;
      margin-block-start: 0.2em;
      color: var(--text-3);
    }
  }

  .lesson-row__bloqueada-texto {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .lesson-list {
    margin-block-start: var(--space-12);

    & > li {
      padding-block: var(--space-10);
      border-block-end: 1px solid var(--border);
    }

    & > li:last-child {
      border-block-end: 0;
    }
  }

  /* Ranking --------------------------------------------------------------- */

  /* Posição do próprio aluno: o número grande e, ao lado, quem ele é. */
  .ranking-destaque {
    display: flex;
    align-items: center;
    gap: var(--space-16);
  }

  .ranking-destaque__lugar {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
  }

  .ranking-destaque__apelido {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-1);
  }

  /* Linha da lista: lugar, apelido com os marcos, pontos à direita. */
  .ranking-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-4) var(--space-12);
  }

  .ranking-row:last-child {
    border-block-end: 0;
  }

  /* A linha do próprio aluno fica tingida, sem mudar de tamanho. */
  .ranking-row--eu {
    border-radius: var(--radius-card);
    background-color: var(--surface-tint);
    padding-inline: var(--space-12);
  }

  .ranking-row__lugar {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
  }

  .ranking-row__apelido {
    font-weight: var(--weight-medium);
    color: var(--text-1);
  }

  .ranking-row__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-inline-size: 0;
  }

  .ranking-row__marcos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .ranking-row__pontos {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
    white-space: nowrap;
  }

  /* Linha de marco: título e explicação à esquerda, pontos e botão à
     direita. No celular o botão desce para a linha de baixo. */
  .marco-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8) var(--space-12);
  }

  .marco-row__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 16rem;
  }

  .marco-row__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    font-weight: var(--weight-medium);
    color: var(--text-1);
  }

  .marco-row__pontos {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Player da aula: 16:9, fundo escuro enquanto o vídeo carrega. */
  .player {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-card);
    background-color: #000000;

    & video {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* Botão que alterna entre dois rótulos conforme aria-expanded. */
  [aria-expanded="true"] .quando-fechado,
  [aria-expanded="false"] .quando-aberto {
    display: none;
  }

  .data-list__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* Conteúdo de leitura: único lugar com Newsreader. Nunca sobre gradiente
     forte e nunca colorido. */
  .prose {
    font-family: var(--font-reading);
    font-size: var(--text-reading);
    line-height: 1.6;
    color: var(--text-2);
    max-inline-size: 68ch;

    & > * + * {
      margin-block-start: var(--space-16);
    }

    /* Markdown dos artigos de Dúvidas. */
    & :is(h2, h3, h4) {
      font-family: var(--font-ui);
      font-weight: var(--weight-semibold);
      line-height: 1.3;
      color: var(--text-1);
    }

    & h2 {
      font-size: var(--text-lg);
    }

    & :is(h3, h4) {
      font-size: var(--text-base);
    }

    & > :is(h2, h3, h4) {
      margin-block-start: var(--space-24);
    }

    & :is(ul, ol) {
      padding-inline-start: 1.25em;
    }

    & ul {
      list-style: disc;
    }

    & ol {
      list-style: decimal;
    }

    & li + li {
      margin-block-start: var(--space-4);
    }

    & strong {
      font-weight: var(--weight-semibold);
      color: var(--text-1);
    }
  }
}

/* --------------------------------------------------------------------------
   Movimento
   A interface se mexe; o gradiente de malha do fundo fica parado.
   -------------------------------------------------------------------------- */

@layer utilities {
  /* Entrada em cascata: cada filho sobe com um atraso. */
  .entra > * {
    animation: entra var(--calm) var(--ease) backwards;
  }

  .entra > *:nth-child(1) {
    animation-delay: 40ms;
  }
  .entra > *:nth-child(2) {
    animation-delay: 100ms;
  }
  .entra > *:nth-child(3) {
    animation-delay: 160ms;
  }
  .entra > *:nth-child(4) {
    animation-delay: 220ms;
  }
  .entra > *:nth-child(5) {
    animation-delay: 280ms;
  }

  @keyframes entra {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .muted {
    color: var(--text-2);
  }

  .meta {
    font-size: var(--text-sm);
    color: var(--text-2);
  }

  /* Corta o texto na segunda linha, com reticência. */
  .clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .fade-in {
    transition: opacity var(--calm) var(--ease), transform var(--calm) var(--ease);
  }

  .fade-out {
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }

  .fade-start {
    opacity: 0;
    transform: translateY(var(--space-8));
  }

  .fade-end {
    opacity: 1;
    transform: translateY(0);
  }

  /* Quem pede menos movimento não recebe nenhum. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}