@layer reset, fonts, tokens, base, layout, components, motion, print;

/* Fontes do próprio site (subconjunto latino, pesos 300 a 500). Licença OFL em assets/fonts. */
@layer fonts {
  @font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
  @font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }
  @font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
}

/* ============================================================
   Reset
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h, 4rem) + var(--space-3));
    /* Reserva o espaço da barra de rolagem: travar a rolagem no diálogo não desloca a página. */
    scrollbar-gutter: stable;
  }
  img, svg, iframe { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; cursor: pointer; }
  ul, ol { padding: 0; list-style: none; }
  h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
  p, li { text-wrap: pretty; }
}

/* ============================================================
   Tokens (cores, tipografia, espaçamento, raios, sombras, movimento)
   ============================================================ */
@layer tokens {
  :root {
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Escala tipográfica fluida */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    --step-3: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    --step-4: clamp(2.4rem, 1.4rem + 4vw, 4.75rem);
    --step-title: clamp(3.2rem, 1rem + 11vw, 10.5rem);

    /* Espaçamento */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: clamp(3rem, 6vw, 5rem);
    --gutter: clamp(1rem, 4vw, 3rem);
    --section-y: clamp(4rem, 12vh, 8rem);
    --maxw: 78rem;

    /* Forma */
    --radius-sm: 0.4rem;
    --radius: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --border: 1px solid var(--line);

    /* Alvos de toque: 44px (WCAG 2.5.5) nos controles principais, nunca menos de 24px (2.5.8). */
    --tap: 2.75rem;

    /* Movimento */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 0.15s;
    --dur: 0.3s;

    /* Foco */
    --focus-ring: 2px solid var(--accent);
    --focus-offset: 3px;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f0e0c;
    --bg-2: #181613;
    --bg-3: #221f1b;
    --ink: #efe9dd;
    --ink-2: #a89f90;
    --line: #2b2823;
    --line-strong: #4a443b;
    --accent: #f2b84b;
    --on-accent: #1a1304;
    --success: #7fd29a;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 30px 60px -30px rgb(0 0 0 / 0.6);
    --backdrop: rgb(0 0 0 / 0.65);
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4efe6;
    --bg-2: #ebe4d6;
    --bg-3: #e2d9c8;
    --ink: #16130f;
    --ink-2: #5d5547;
    --line: #d6ccb9;
    --line-strong: #a99d87;
    --accent: #8f5200;
    --on-accent: #fff8ec;
    --success: #1f7a3f;
    --shadow-sm: 0 1px 2px rgb(60 40 10 / 0.12);
    --shadow-lg: 0 30px 60px -30px rgb(60 40 10 / 0.35);
    --backdrop: rgb(22 19 15 / 0.5);
  }
}

/* ============================================================
   Base
   ============================================================ */
@layer base {
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    min-height: 100dvh;
  }
  a { color: inherit; text-underline-offset: 0.2em; }
  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }
  /* Alvo do link "Pular para o conteúdo": recebe foco, mas não precisa de contorno. */
  main:focus { outline: none; }
  ::selection { background: var(--accent); color: var(--on-accent); }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip {
    position: fixed; left: var(--space-4); top: var(--space-4); z-index: 100;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
    background: var(--accent); color: var(--on-accent); font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
  }
  .skip:focus { transform: none; }

  /* Texto provisório, para nunca publicar algo sem perceber. */
  [data-placeholder] {
    text-decoration: underline dotted var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
}

/* ============================================================
   Layout
   ============================================================ */
@layer layout {
  .bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
    background: color-mix(in oklab, var(--bg) 85%, transparent);
    border-bottom: var(--border);
  }
  @supports (backdrop-filter: blur(1px)) {
    .bar { backdrop-filter: blur(10px) saturate(1.2); }
  }
  .bar__brand { font-family: var(--font-mono); font-weight: 500; text-decoration: none; margin-right: auto; padding-block: var(--space-2); }
  .bar__brand span { color: var(--accent); }
  .bar__nav ul { display: flex; gap: clamp(0.35rem, 2vw, 1.75rem); }
  .bar__nav, .bar__brand { min-width: 0; }

  .hero, .block, .foot { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

  .hero {
    /* Ocupa a primeira tela descontando a altura real do cabeçalho (medida pelo nav.js). */
    min-height: calc(100svh - var(--header-h, 4rem));
    display: grid; align-content: center; gap: var(--space-7);
    padding-block: clamp(2.5rem, 8vh, 6rem);
  }
  @media (min-width: 62rem) {
    .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  }

  .block { padding-block: var(--section-y); border-top: var(--border); }

  .foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
    padding-block: var(--space-6); border-top: var(--border);
    font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2);
  }
}

/* ============================================================
   Componentes
   ============================================================ */
@layer components {
  /* ---------- Navegação ---------- */
  .bar__nav a {
    position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.35rem 0.15rem;
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap;
    transition: color var(--dur-fast);
  }
  .bar__nav ul { position: relative; }
  .bar__nav a { z-index: 1; padding-inline: 0.7rem; border-radius: var(--radius-pill); }
  .bar__nav a[aria-current="true"] { color: var(--ink); }
  /* Pílula que desliza até a seção atual (posição e tamanho vêm do motion.js). */
  .pill {
    position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
    border-radius: var(--radius-pill); opacity: 0; transition: opacity var(--dur-fast);
  }
  .pill.is-on { opacity: 1; }
  .pill--nav { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .pill--lang { background: var(--accent); }

  .theme {
    flex: none;
    display: grid; place-items: center; width: var(--tap); height: var(--tap);
    background: none; border: var(--border); border-radius: 50%;
    transition: border-color var(--dur-fast), transform var(--dur) var(--ease);
  }
  .theme:active { transform: scale(0.94); }
  /* Mostra o ícone do tema que o botão vai ativar. */
  .theme__icon { grid-area: 1 / 1; }
  :root[data-theme="dark"] .theme__icon--moon,
  :root[data-theme="light"] .theme__icon--sun { display: none; }

  /* ---------- Seletor de idioma ---------- */
  .lang { position: relative; display: flex; flex: none; padding: 0.15rem; border: var(--border); border-radius: var(--radius-pill); }
  .lang__btn {
    display: grid; place-items: center; min-width: 2.6rem; min-height: 2.25rem; padding: 0.3rem 0.55rem;
    position: relative; z-index: 1; background: none; border: 0; border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast);
  }
  .flag { border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); opacity: 0.55; transition: opacity var(--dur-fast); }
  /* Sem JavaScript não há pílula: o fundo marca o idioma. */
  .lang:not(:has(.pill)) .lang__btn[aria-pressed="true"] { background: var(--accent); }
  .lang__btn[aria-pressed="true"] .flag { opacity: 1; }

  /* Hover só em dispositivos com ponteiro: no toque, o hover "gruda" depois do toque. */
  @media (hover: hover) {
    .bar__nav a:hover { color: var(--ink); }
    .theme:hover { border-color: var(--accent); transform: rotate(25deg); }
    .lang__btn:hover:not([aria-pressed="true"]) { background: var(--bg-3); }
    .lang__btn:hover .flag { opacity: 0.9; }
  }

  /* Celular: cabeçalho em duas linhas (marca e controles em cima, menu embaixo). */
  @media (max-width: 40rem) {
    .bar { flex-wrap: wrap; row-gap: var(--space-1); padding-block: var(--space-2); padding-inline: var(--space-3); }
    .bar__nav { order: 3; width: 100%; }
    .bar__nav ul {
      justify-content: space-between; gap: 0;
      /* Com zoom de texto alto (WCAG 1.4.4/1.4.10), o menu rola na horizontal em vez de quebrar a página. */
      overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .bar__nav ul::-webkit-scrollbar { display: none; }
    .bar__nav a { min-height: var(--tap); padding-inline: 0.5rem; }
    .theme { width: 2.5rem; height: 2.5rem; }
  }
  @media (max-width: 24rem) {
    .bar__nav ul { gap: 0; }
    .bar__nav a { font-size: 0.72rem; padding-inline: 0.45rem; }
  }

  /* ---------- Botões ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap); padding: 0.6rem 1.15rem;
    border: 1px solid var(--ink-2); border-radius: var(--radius-pill);
    background: transparent; color: var(--ink);
    font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.2; text-decoration: none; text-align: center;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
  }
  .btn:active { transform: translateY(1px) scale(0.98); }
  .btn--solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .btn--ghost { border-color: var(--line-strong); color: var(--ink-2); }
  .btn--sm { min-height: 2.5rem; padding: 0.45rem 1rem; }
  .btn[data-state="done"] { border-color: var(--success); color: var(--success); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

  @media (hover: hover) {
    .btn:hover { border-color: var(--accent); transform: translateY(-2px); }
    .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
    .btn--ghost:hover { color: var(--ink); }
  }

  /* ---------- Hero ---------- */
  .eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); letter-spacing: 0.04em; margin-bottom: 1.25rem; }
  /* O nome é medido pela largura da própria coluna (cqi), não pela janela: nunca quebra no meio da palavra. */
  .hero__copy { container-type: inline-size; min-width: 0; }
  .hero__title {
    font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144;
    font-size: min(var(--step-title), 17.5cqi); line-height: 0.92; letter-spacing: -0.035em;
    overflow-wrap: normal;
  }
  .hero__title .line { display: block; white-space: nowrap; }
  .hero__title .ch { display: inline-block; white-space: pre; }
  .hero__title .line--indent { padding-left: 0.9em; font-style: italic; font-weight: 300; }
  .hero__title .dot { color: var(--accent); }
  .hero__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .hero__links [hidden] { display: none; }

  /* ---------- Terminal ---------- */
  .term {
    min-width: 0;
    background: var(--bg-2); border: var(--border); border-radius: var(--radius);
    overflow: hidden; font-family: var(--font-mono); font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.88rem);
    box-shadow: var(--shadow-lg);
  }
  .term__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; border-bottom: var(--border); color: var(--ink-2); }
  .term__bar i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--line); }
  .term__bar i:first-child { background: var(--accent); }
  .term__bar span { margin-left: auto; font-size: var(--text-xs); }
  .term__body {
    display: grid; padding: 1rem 1.1rem 1.25rem;
    font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; color: var(--ink);
  }
  /* Fantasma e texto ao vivo ocupam a mesma célula; o fantasma define a altura. */
  .term__ghost, .term__live { grid-area: 1 / 1; }
  .term__ghost { visibility: hidden; }
  .term__body .p { color: var(--accent); }
  .term__body .m { color: var(--ink-2); }
  .term__body .caret {
    display: inline-block; width: 0.55em; height: 1.1em; vertical-align: text-bottom; background: var(--accent);
  }

  /* ---------- Rótulos e títulos de seção ---------- */
  .block__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; }
  /* Caminho de terminal acima do título: o mesmo idioma visual do ~/vd da marca e do terminal do topo. */
  .block__title .idx { display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); letter-spacing: 0; }
  .block__title .idx::before { content: "❯ cd "; color: var(--ink-2); }
  .about__label { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--step-1); color: var(--ink-2); margin-bottom: 0.9rem; }
  .stub { margin-top: var(--space-4); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-sm); }

  /* ---------- Sobre ---------- */
  .about { display: grid; gap: var(--space-7); margin-top: 2.5rem; }
  @media (min-width: 62rem) {
    .about { grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; }
    .about__lead { grid-row: span 2; position: sticky; top: calc(var(--header-h, 4rem) + var(--space-6)); }
  }
  .about__lead {
    font-family: var(--font-display); font-style: italic; font-weight: 300;
    font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; max-width: 12ch;
  }
  .about__side { display: grid; gap: var(--space-6); }
  .about__text { display: grid; gap: var(--space-4); max-width: 60ch; }

  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .chips li { font-family: var(--font-mono); font-size: 0.82rem; padding: 0.35rem 0.8rem; border: 1px solid color-mix(in oklab, var(--accent) 70%, var(--line)); border-radius: var(--radius-pill); }

  .timeline { border-left: var(--border); margin-left: 0.4rem; }
  .timeline__item { position: relative; padding: 0 0 var(--space-5) var(--space-5); }
  .timeline__item:last-child { padding-bottom: 0; }
  .timeline__item::before {
    content: ""; position: absolute; left: -0.3rem; top: 0.55rem; width: 0.55rem; height: 0.55rem;
    border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
  }
  .timeline__item:last-child::before { background: var(--accent); }
  .timeline__when { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); }
  .timeline__what { color: var(--ink-2); max-width: 54ch; }

  /* ---------- Projetos: composição editorial, cada projeto com a paleta do próprio trabalho ---------- */
  .projects { display: grid; gap: clamp(5rem, 14vh, 9rem); margin-top: var(--space-7); }
  .plate { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 62rem) {
    .plate { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--space-6); }
    .plate--a .plate__copy { grid-column: 1 / 7; }
    .plate--a .device { grid-column: 8 / 13; }
    .plate--b .plate__copy { grid-column: 7 / 13; grid-row: 1; }
    .plate--b .device { grid-column: 1 / 7; grid-row: 1; }
  }
  .plate__copy { position: relative; display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
  .plate__status {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--text-xs);
    padding: 0.2rem 0.75rem; border: 1px solid color-mix(in oklab, var(--p1) 60%, var(--line)); border-radius: var(--radius-pill); color: var(--ink-2);
  }
  .plate__status::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: linear-gradient(135deg, var(--p1), var(--p2)); }
  .plate__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
  .plate__kicker { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink-2); }
  .plate__summary { max-width: 52ch; }
  .plate__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
  .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .tags li { font-family: var(--font-mono); font-size: var(--text-xs); padding: 0.2rem 0.6rem; background: var(--bg-2); border-radius: var(--radius-sm); color: var(--ink-2); }

  /* Moldura da demonstração */
  .device {
    --scale: 0.5;
    position: relative; justify-self: center; width: 100%; min-width: 0;
    background: #0b0b0d; border: var(--border); border-radius: 1.1rem; padding: var(--space-2);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--p1) 30%, transparent), 0 40px 80px -40px color-mix(in oklab, var(--p1) 60%, transparent);
  }
  .device--phone { max-width: 19rem; border-radius: 2.2rem; padding: 0.6rem; }
  .device--browser { max-width: 46rem; padding: 0; overflow: hidden; }
  .device__bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; background: var(--bg-2); border-bottom: var(--border); font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); }
  .device__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); }
  .device__bar span { margin-inline: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .device__screen {
    position: relative; overflow: hidden; background: #000;
    aspect-ratio: var(--w) / var(--h); border-radius: 1.6rem;
    /* O pôster dimensiona o texto pela largura da própria moldura (celular x navegador). */
    container-type: inline-size;
  }
  .device--browser .device__screen { border-radius: 0; }
  .device__screen iframe {
    position: absolute; inset: 0 auto auto 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); max-width: none;
    border: 0; transform: scale(var(--scale)); transform-origin: top left; background: #fff;
  }
  .device__poster {
    position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: var(--space-5); text-align: center;
    background: radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--p1) 55%, #000), transparent 60%),
                radial-gradient(120% 90% at 100% 100%, color-mix(in oklab, var(--p2) 55%, #000), transparent 60%), #0b0b0d;
    border: 0; color: #fff; font: inherit; text-decoration: none; transition: filter var(--dur);
  }
  /* A moldura corta o que passa da borda: o anel de foco fica do lado de dentro. */
  .device__poster:focus-visible { outline-offset: -6px; outline-color: #fff; border-radius: inherit; }
  .device__screen iframe:focus-visible { outline-offset: -3px; }
  .device__name { font-family: var(--font-display); font-size: clamp(1.4rem, 9cqi, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; }
  .device__cta { font-family: var(--font-mono); font-size: 0.8rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); background: #fff; color: #111; transition: transform var(--dur-fast) var(--ease); }
  .device__hint { font-size: var(--text-xs); color: rgb(255 255 255 / 0.85); max-width: 28ch; }
  @media (hover: hover) {
    .device__poster:hover { filter: brightness(1.15); }
    .device__poster:hover .device__cta { transform: translateY(-2px); }
  }

  /* ---------- Painel de detalhes (dialog nativo: foco preso, Esc e retorno de foco tratados pelo navegador) ---------- */
  .detail {
    width: min(70rem, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0;
    background: var(--bg); color: var(--ink); border: var(--border); border-top: 4px solid var(--p1); border-radius: var(--radius-lg);
    overflow: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg);
  }
  .detail::backdrop { background: var(--backdrop); }
  @supports (backdrop-filter: blur(1px)) {
    .detail::backdrop { backdrop-filter: blur(4px); }
  }
  /* Trava a rolagem da página enquanto o painel está aberto. */
  :root:has(.detail[open]) { overflow: hidden; }
  .detail__head {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
    padding: var(--space-4) clamp(1rem, 3vw, 2rem); background: var(--bg); border-bottom: var(--border);
  }
  .detail__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.02em; min-width: 0; }
  .detail__close { flex: none; }
  .detail__handle { display: none; }
  .detail__body { display: grid; gap: var(--space-6); padding: clamp(1rem, 3vw, 2rem); }
  @media (min-width: 52rem) { .detail__body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-7); } }
  .detail__main, .detail__aside { display: grid; gap: 1.75rem; align-content: start; }
  .detail__h { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--step-1); color: var(--ink-2); margin-bottom: 0.6rem; }
  .detail__list { display: grid; gap: var(--space-2); }
  .detail__list li { position: relative; padding-left: 1.1rem; }
  .detail__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--p1); }
  .detail__decision { padding: 0.9rem 0 0.9rem var(--space-4); border-left: 2px solid var(--p1); margin-bottom: var(--space-3); }
  .detail__decision h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
  .detail__decision p { color: var(--ink-2); margin-top: var(--space-1); }
  /* Celular: o painel vira uma folha de tela cheia, aproveitando toda a área útil. */
  /* Celular: o painel vira uma folha que sobe de baixo e fecha arrastando a alça (beUI Bottom Sheet). */
  @media (max-width: 40rem) {
    .detail {
      width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      border-inline: 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom);
    }
    .detail__head { flex-wrap: wrap; padding-top: 1.4rem; }
    .detail__handle {
      display: block; position: absolute; inset: 0 0 auto; height: 1.4rem; touch-action: none; cursor: grab;
    }
    .detail__handle::before { content: ""; position: absolute; left: 50%; top: 0.55rem; width: 2.5rem; height: 0.3rem; margin-left: -1.25rem; border-radius: var(--radius-pill); background: var(--line-strong); }
  }

  /* ---------- Ilha: aviso em pílula no topo (beUI Dynamic Island) ---------- */
  .island {
    position: fixed; z-index: 90; top: max(0.6rem, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
    display: none; overflow: hidden; width: max-content; max-width: calc(100vw - 1.5rem);
    background: #050505; color: #f6f1e7; border-radius: 1.4rem; box-shadow: 0 12px 40px -12px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  }
  .island.is-open { display: block; }
  .island__in { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.65rem; padding: 0.6rem 1.1rem 0.6rem 0.75rem; }
  .island__dot { grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--success); position: relative; }
  .island__dot::after { content: ""; position: absolute; left: 0.52rem; top: 0.36rem; width: 0.45rem; height: 0.75rem; border: solid #06210f; border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
  .island__t { font-weight: 600; font-size: 0.9rem; line-height: 1.25; white-space: nowrap; }
  .island__d { font-family: var(--font-mono); font-size: 0.75rem; color: rgb(246 241 231 / 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Botão cujo rótulo troca (Copiar → Copiado): a largura desliza e o texto não vaza durante a troca. */
  .btn--swap { overflow: hidden; white-space: nowrap; }
  .btn__label { display: inline-block; }
  .btn[data-state="selected"] { border-color: var(--accent); color: var(--accent); }

  /* ---------- Explorando ---------- */
  .explore { display: grid; gap: var(--space-7); margin-top: 2.5rem; }
  @media (min-width: 62rem) { .explore { grid-template-columns: 1fr 1.2fr; gap: 5rem; } }
  .explore__studying { display: grid; gap: var(--space-1); }
  .explore__studying li {
    font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
    line-height: 1.1; letter-spacing: -0.025em;
  }
  .explore__studying li:nth-child(even) { font-style: italic; padding-left: 0.8em; }
  .explore__groups { display: grid; gap: 1.25rem; align-content: start; }
  .explore__row { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--border); }
  .explore__group { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; }

  /* ---------- Contato ---------- */
  .contact__lead { margin-top: var(--space-4); max-width: 46ch; color: var(--ink-2); }
  .contact { display: grid; gap: var(--space-6); margin-top: 2.5rem; }
  .contact__main { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
  .contact__main .about__label { margin-bottom: 0; }
  .contact__mail, .contact__phone {
    font-family: var(--font-display); text-decoration-thickness: 1px; text-decoration-color: var(--accent);
    transition: text-decoration-thickness var(--dur-fast);
  }
  .contact__mail { font-size: clamp(1.5rem, 0.6rem + 4.6vw, 3.6rem); letter-spacing: -0.02em; overflow-wrap: anywhere; line-height: 1.15; }
  .contact__phone { font-size: clamp(1.4rem, 0.8rem + 3vw, 2.2rem); letter-spacing: -0.01em; }
  .contact__actions { display: flex; align-items: center; gap: var(--space-3); }
  .contact__social { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
  .contact__link { display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--tap); font-family: var(--font-mono); font-size: 0.95rem; transition: color var(--dur-fast); }
  .contact__arrow { transition: transform var(--dur-fast) var(--ease); }
  @media (hover: hover) {
    .contact__mail:hover, .contact__phone:hover { text-decoration-thickness: 3px; }
    .contact__link:hover { color: var(--accent); }
    .contact__link:hover .contact__arrow { transform: translate(2px, -2px); }
  }
}

/* ============================================================
   Movimento (sempre condicionado à preferência do usuário)
   ============================================================ */
@layer motion {
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: no-preference) {
    /* Entrada curta e sem atraso no título (maior elemento da primeira tela). */
    .hero__copy > :not(.hero__title), .term { animation: rise 0.6s var(--ease) both; }
    /* O título entra letra a letra pelo motion.js; sem JavaScript, entra inteiro. */
    .hero__title:not(.is-ready) { animation: rise 0.6s var(--ease) both 0.05s; }
    /* Com JavaScript, o título espera as letras; se o script falhar, aparece sozinho depois de 1,5 s. */
    .js .hero__title:not(.is-ready) { animation-delay: 1.5s; }
    .hero__links { animation-delay: 0.3s; }
    .term { animation-delay: 0.35s; }
    .term__body .caret { animation: blink 1.1s steps(1) infinite; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}

/* ============================================================
   Impressão: conteúdo legível em papel, sem elementos interativos
   ============================================================ */
@layer print {
  @media print {
    :root, :root[data-theme] {
      --bg: #fff; --bg-2: #fff; --ink: #000; --ink-2: #333; --line: #bbb; --line-strong: #888; --accent: #000;
    }
    .bar, .skip, .term, .device, .plate__actions, .hero__links, .contact__actions, .detail, .island { display: none !important; }
    .hero { min-height: 0; padding-block: 0 var(--space-6); }
    .block { padding-block: var(--space-6); break-inside: avoid-page; }
    .about__lead { position: static; }
    .contact__link::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  }
}

/* Página 404 */
@layer components {
  .lost { min-height: 100svh; }
  .lost .hero__title { font-size: min(var(--step-title), 15cqi); }
  .lost__text { margin-top: var(--space-5); color: var(--ink-2); max-width: 46ch; }
}