/* TheCruiseJobs — folha única de estilo (design system).
 *
 * Organizada em camadas CSS nativas, sem build step:
 *   reset < tokens < base < layout < components < utilities
 * A ordem é declarada na 1ª linha e NÃO depende da ordem física em que as
 * regras aparecem no arquivo. Regra fora de qualquer camada vence tudo —
 * por isso carregar este arquivo no admin do Django é seguro: o CSS do
 * admin não está em camada e sempre ganha.
 *
 * Divisão: marketing (hero/passos/preços) usa `.wrap`; telas de app usam
 * `.wrap-wide`; textos longos usam `.wrap-narrow`. Ver @layer layout.
 *
 * Três decisões que valem explicar antes de mexer em qualquer cor:
 *
 * 1. AÇÚCAR (--brand) só aparece em link, ícone, borda de destaque e no
 *    fundo do CTA escuro. Texto corrido nunca é açúcar sobre branco: o tom
 *    de link é `--brand-ink`, que passa de 4.5:1. A 4,5:1 é o mínimo da
 *    WCAG AA para texto normal — o tom antigo dava 2,9:1 e a tabela de
 *    vagas virava um campo de azul ilegível.
 *
 * 2. ÂMBAR é sinal, nunca decoração. "Nova vaga", "pendente", "foco em
 *    item novo". Se algo é âmbar, é porque algo mudou. Isso mata a
 *    ambiguidade do estado anterior, em que o mesmo dourado pintava o anel
 *    de foco, a pilha "NEW" e o selo do topo ao mesmo tempo.
 *
 * 3. A cor de fundo de uma LINHA da tabela é sempre mais clara que a da
 *    célula vizinha. A versão anterior pintava a linha inteira de amarelo,
 *    então uma lista em que (como é o normal) tudo é novo virava um bloco
 *    amarelo sólido sem nenhuma linha separando os itens. Hoje o status
 *    entra por um trilho de 3px à esquerda e um tom de 3% no fundo.
 */

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

/* ============================================================ reset ===== */
/* Tudo com :where() -> especificidade 0. Qualquer regra de componente vence. */

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

  html, body { margin: 0; padding: 0; }

  :where(img, svg) { display: block; max-width: 100%; }
  :where(img) { height: auto; }

  /* Títulos: altura de linha consistente e não-órfã (evita "pairopo" na 1ª linha). */
  :where(h1, h2, h3, h4) { line-height: 1.18; text-wrap: balance; }

  /* Formulários herdam a tipografia do documento por padrão. */
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(button) { cursor: pointer; }

  :where([hidden]) { display: none !important; }
}

/* =========================================================== tokens ===== */

@layer tokens {
  :root {
    /* --- cor: marca ------------------------------------------------ */
    --brand:      #0d7c8f;   /* fundo de CTA escuro sobre texto branco */
    --brand-ink:  #0a6b7c;   /* link/texto sobre branco — 6,1:1 */
    --brand-soft: #e8f4f7;   /* fundo lavado de realce */
    --brand-line: #b9dde4;   /* borda de realce */
    --brand-tint: #1aa3bb;   /* detalhe, ícone, barra de progresso */

    --amber-ink:  #8f5a05;   /* "nova vaga" / "pendente": 6,8:1 no seu fundo */
    --amber-soft: #fdf4e0;
    --amber-line: #f0dcae;

    /* --- cor: azuis (chrome da aplicação) -------------------------- */
    --navy-950: #060a13;
    --navy-900: #0a1120;
    --navy-850: #0e1729;
    --navy-800: #141f36;
    --navy-700: #1c2a45;
    --navy-600: #263651;

    --bg:        var(--navy-900);   /* nav, rodapé, hero */
    --bg2:       var(--navy-850);   /* bandas alternadas */
    --bg3:       var(--navy-800);   /* hover de botão na nav */
    --bg4:       var(--navy-700);   /* select de idioma */
    --border-nav:  #22314f;
    --border-nav-2:#2e4064;

    --ok:   #15803d;
    --bad:  #b42318;
    --warn: #9a6a09;

    /* --- cor: superfícies e texto ---------------------------------- */
    --page:       #f5f7fa;
    --surface:    #ffffff;
    --surface-2:  #f7f9fc;   /* cabeçalho do painel suspenso */
    --surface-3:  #eef2f7;   /* thead de tabela, fundo do segmentado */
    --surface-4:  #e9eef5;   /* hover de link em lista */
    --surface-5:  #eef2f7;   /* borda interna de tabela */

    --line:    #e3e8ef;   /* borda padrão */
    --line-2:  #cfd7e3;   /* borda de input, pager, segmentado */
    --line-3:  #dbe2ec;

    --text:     #0d1526;
    --text-2:   #4d5b74;  /* texto secundário — 7,0:1 */
    --text-3:   #5a6a85;  /* cabeçalho de tabela */
    --text-inv:   #ccd7ea;  /* texto sobre navy */
    --text-inv-2: #93a5c4;  /* rodapé */
    --text-inv-3: #aab9d4;  /* stat sobre band */
    --text-inv-4: #dde6f5;  /* lede sobre hero */

    /* --- estados semânticos (par de fundo/texto/borda) -------------- */
    --ok-soft:   #e8f6ee;  --ok-line:   #b6e0c9;
    --bad-soft:  #fdeceb;  --bad-line:  #f4c8c3;
    --warn-soft: #fdf5e3;  --warn-line: #f0dfae;
    --info-soft: #e9f4f7;  --info-line: #c3e0e7;

    /* --- espaco: escala base 4px ------------------------------------ */
    --sp-0:  0;
    --sp-1:  0.25rem;   /*  4 */
    --sp-2:  0.5rem;    /*  8 */
    --sp-3:  0.75rem;   /* 12 */
    --sp-4:  1rem;      /* 16 */
    --sp-5:  1.25rem;   /* 20 */
    --sp-6:  1.5rem;    /* 24 */
    --sp-7:  1.75rem;   /* 28 */
    --sp-8:  2rem;      /* 32 */
    --sp-10: 2.5rem;    /* 40 */
    --sp-12: 3rem;      /* 48 */
    --sp-14: 3.5rem;    /* 56 */
    --sp-16: 4rem;      /* 64 */
    --sp-20: 5rem;      /* 80 */

    /* Ritmo vertical das seções. Antes todas usavam 3rem fixo e a página
       ficava com uma pulsação só; agora banda cheia, seção média e bloco
       dentro de uma seção têm alturas diferentes e a hierarquia aparece
       sem precisar de cor. */
    --section-y:  clamp(3.25rem, 1.5rem + 5.5vw, 5.5rem);
    --section-y-sm: clamp(2rem, 1.2rem + 3vw, 3.25rem);

    /* --- tipografia ------------------------------------------------ */
    --font: ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
    /* "Segoe UI Variable Display" tem Drawings一旁的 optical size próprio:
       os glifos de display são mais largos e com menos espaço interno, então
       um h1 de 3rem fica com outra textura do corpo de 15px. Quando a fonte
       não existe, cai na próxima da pilha sem diferença visual. */
    --font-display: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif,
                    system-ui, Roboto, Arial, sans-serif;

    --fs-xs:    0.75rem;    /* 12 */
    --fs-sm:    0.8125rem;  /* 13 */
    --fs-md:    0.9375rem;  /* 15 — botão, input, corpo de card */
    --fs-base:  1rem;       /* 16 — documento */
    --fs-lg:    1.125rem;   /* 18 */
    --fs-xl:    1.25rem;    /* 20 */
    --fs-2xl:   1.5rem;     /* 24 */
    --fs-3xl:   1.875rem;   /* 30 */
    --fs-4xl:   2.25rem;    /* 36 */
    --fs-display: clamp(2.25rem, 1.1rem + 4.2vw, 3.625rem);  /* h1 do hero */
    --fs-h1:      clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem);   /* h1 de página */
    --fs-h2:      clamp(1.3rem, 1.12rem + 0.7vw, 1.6rem);
    --fs-lede:    clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);

    --track-tight: -0.028em;  /* títulos grandes */
    --track-snug:  -0.014em;  /* h2/h3, números grandes */
    --track-wide:  0.085em;   /* olho/rótulo em maiúscula */

    /* --- containers ------------------------------------------------ */
    --gutter:          clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
    --container:       1120px;   /* marketing */
    --container-narrow: 780px;    /* prose: login, conta, checkout */
    --container-wide:  1400px;    /* tabelas de /vagas/ e /painel/admin/ */
    --container-hero:   860px;
    --container-table:  660px;    /* largura mínima da tabela antes de rolar */

    /* --- forma ----------------------------------------------------- */
    --r-xs:  6px;
    --r-sm:  8px;
    --r-md:  10px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-2xl: 20px;
    --r-pill: 999px;

    /* Três degraus de elevação. O `--shadow` do tema anterior
       (0 10px 30px / 12%) fazia até um card de FAQ parecer uma caixa
       flutuante; aqui o padrão é quase imperceptível e só o elemento que
       realmente se destaca — o card de preço em foco — ganha profundidade. */
    --shadow-xs: 0 1px 2px rgba(10, 17, 32, .05);
    --shadow-sm: 0 1px 2px rgba(10, 17, 32, .05),
                 0 2px 6px rgba(10, 17, 32, .05);
    --shadow-md: 0 2px 4px rgba(10, 17, 32, .04),
                 0 8px 20px rgba(10, 17, 32, .07);
    --shadow-lg: 0 4px 10px rgba(10, 17, 32, .06),
                 0 20px 44px rgba(10, 17, 32, .13);

    /* --- movimento e pilha ----------------------------------------- */
    --dur-fast: 120ms;
    --dur:      180ms;
    --ease:     cubic-bezier(.2, .8, .2, 1);

    --nav-h: 64px;         /* altura da nav — offset do thead sticky */
    /* Escada de pilha. A ordem importa: a nav é sticky e precisa ficar
       ACIMA de qualquer cabeçalho grudado da página. Antes --z-nav era 20 e
       --z-sticky 30, e a nav só se mantinha no topo por acaso, porque
       .table-scroll ganha `contain: layout` (container-type) e cria um
       contexto de pilha próprio. Qualquer página sem essa contenção punha o
       thead por cima da nav. */
    --z-sticky: 30;        /* thead grudado, abaixo da nav */
    --z-nav:    60;        /* nav sticky, acima de tudo da página */
    --z-menu:   70;        /* painel do usuário (dentro do contexto da nav) */
    --z-drawer: 80;        /* gaveta do mobile, se um dia precisar de overlay */
  }
}

/* ============================================================= base ===== */

@layer base {
  /* O rodapé morava no meio da página em toda tela curta (login, conta,
     pricing): o <body> não era coluna, então a página acabava e o rodapé
     ficava lá, com um bloco de 4rem de espaço e mais o vazio embaixo dele.
     Coluna + `main` crescendo resolve e não custa nada. */
  body {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--page);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  main { flex: 1 0 auto; }

  h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; }
  h1 { letter-spacing: var(--track-tight); }
  h2 { letter-spacing: var(--track-snug); }

  a { color: var(--brand-ink); text-decoration: none; }
  a:hover { text-decoration: underline; }

  code {
    background: var(--surface-3);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    font-size: .92em;
  }

  ::selection { background: var(--brand-line); color: var(--navy-900); }

  /* --- acessibilidade ---------------------------------------------- */

  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--surface); color: var(--text);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 0 var(--r-lg) 0;
    font-weight: 700;
  }
  .skip-link:focus { left: 0; }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* Foco visível em tudo que recebe teclado. Anel de 2px na cor da marca com
     2px de folga: o dourado de 3px do tema anterior gritava a cada Tab e
     competia com o âmbar de "nova vaga". */
  a:focus-visible,
  button:focus-visible,
  select:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--brand-tint);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }
  /* Sobre navy o turquesa some: anel mais claro só na nav. */
  .nav :focus-visible { outline-color: #7fd8e8; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .hero-slides .slide { animation: none; opacity: 0; }
    .hero-slides .slide:first-child { opacity: 1; }
    .hero-dots span { animation: none; }
    .fm-beam { animation: none; display: none; }
  }
}

/* =========================================================== layout ===== */

@layer layout {
  /* Três larguras, uma por tipo de tela. `width: min()` absorve o gutter
     lateral, então não há mais `max-width` + `padding` competindo. */
  .wrap,
  .wrap-narrow,
  .wrap-wide {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }
  .wrap-narrow { width: min(100% - var(--gutter) * 2, var(--container-narrow)); }
  .wrap-wide   { width: min(100% - var(--gutter) * 2, var(--container-wide)); }

  .center { text-align: center; }
  .pad { padding: var(--sp-6) 0; }
  .nowrap { white-space: nowrap; }

  .section    { padding: var(--section-y) 0; }
  .section-sm { padding: var(--section-y-sm) 0; }
  .band { background: var(--bg2); color: #fff; }
  /* Faixa clara para separar dois blocos sem mudar o fundo da página. */
  .band-soft { background: var(--surface); border-block: 1px solid var(--line); }

  /* Cabeçalho de seção: olho em maiúscula + h2 alinhado à esquerda.
     O tema anterior centralizava tudo com o mesmo `section-title`, o que
     fazia cada seção parecer um slide de apresentação sem hierarquia entre
     elas. */
  .section-head { max-width: 62ch; margin-bottom: var(--sp-8); }
  .section-head.center { margin-inline: auto; text-align: center; }
  .section-title {
    font-size: var(--fs-h2);
    margin: 0 0 var(--sp-3);
  }
  .section-title.left { text-align: left; margin-bottom: var(--sp-4); }
  .section-title.center { text-align: center; }
  .subtitle-note { color: var(--text-2); margin: 0 0 var(--sp-6); max-width: 60ch; }
  .subtitle-note.left { margin: 0 0 var(--sp-5); }
  .subtitle-note.center { margin-inline: auto; text-align: center; }
  .note { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--sp-5); text-align: center; }
  .hint { color: var(--text-2); font-size: var(--fs-sm); margin: var(--sp-3) 0; }
  .lede {
    font-size: var(--fs-lede);
    color: var(--text-inv-4);
    max-width: 62ch;
    margin: 0 auto var(--sp-8);
    line-height: 1.5;
  }

  /* Cabeçalho de página (pricing, conta, painel, checkout...). O grid deixa
     o texto ocupar a coluna larga e as ações encostarem na direita, com
     quebra para baixo no celular — antes cada tela inventava seu próprio
     cabeçalho e nada ficava alinhado entre elas.

     A estrutura é sempre a mesma: `.page-head-main` com o texto e
     `.page-head-aside` com as ações. Sem o wrapper, cada filho (olho, h1,
     lede) cairia numa coluna diferente do grid. */
  .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-5) var(--sp-8);
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-8);
  }
  .page-head-main { min-width: 0; }
  /* Variante centralizada: uma coluna só, tudo no meio. */
  .page-head.center {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .page-head.center .page-lede { margin-inline: auto; }
  .page-title {
    font-size: var(--fs-h1);
    margin: 0 0 var(--sp-2);
  }
  .page-lede {
    color: var(--text-2);
    font-size: var(--fs-lede);
    margin: 0;
    max-width: 60ch;
    line-height: 1.5;
  }
  .page-head-aside {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
  }
  @media (max-width: 720px) {
    .page-head {
      grid-template-columns: 1fr;
      align-items: start;
      padding-top: var(--sp-8);
      padding-bottom: var(--sp-6);
    }
  }

  /* Olho/rótulo: microcaixa em maiúscula com um fio de 2px na frente. É o
     que dá o ar de "editorial" em vez de "template". */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--brand-ink);
  }
  .eyebrow::before {
    content: "";
    width: 18px; height: 2px;
    background: var(--brand-tint);
    border-radius: 2px;
  }
  .eyebrow.center { justify-content: center; }
  .eyebrow .ic { flex: 0 0 auto; }
  .on-dark .eyebrow,
  .band .eyebrow { color: #7fd8e8; }
  .on-dark .eyebrow::before,
  .band .eyebrow::before { background: #7fd8e8; }

  /* Grade. As quatro são container queries (abaixo) para que os cards
     respondam à largura da COLUNA, não à da viewport. */
  .grid3      { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
  .steps      { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }
  .steps.big  { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  .cards-small{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
  .kpis       { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
  .pricing    { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); align-items: start; }
  .cols-2     { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); }

  .grid3, .steps, .cards-small, .kpis, .pricing, .cols-2 { container-type: inline-size; }

  /* --- tabelas ---------------------------------------------------- */
  /* Container é a própria tabela, e não a viewport: o scroll horizontal é
     ligado pela largura REAL disponível (que numa tela de app difere da
     viewport) e some sozinho quando há espaço.
     O limiar é literal de propósito: condição de @container não aceita
     var() (ver --container-table). */
  .table-scroll { container-type: inline-size; }

  @container (max-width: 720px) {
    .table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
    .table-scroll > .table { min-width: var(--container-table); }
  }
}

/* ======================================================= components ===== */

@layer components {

  /* ---------------------------------------------------------------- nav */
  .nav {
    background: var(--bg); color: #fff;
    position: sticky; top: 0; z-index: var(--z-nav);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--nav-h);
    flex-wrap: wrap;
  }
  .brand {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.0625rem; color: #fff;
    letter-spacing: -0.015em;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding-block: var(--sp-2);
  }
  .brand:hover { text-decoration: none; }
  .brand-logo { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); }

  .nav-links {
    display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  }
  /* Item de link da nav: 8px de lado e 6px de topo/base. O `::after` é o
     sublinhado de "você está aqui" — 2px na cor da marca, empurrado para
     baixo do texto para não brigar com a altura de linha. */
  .nav-links > a {
    color: var(--text-inv);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    position: relative;
    font-weight: 500;
  }
  .nav-links > a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.07); }
  .nav-links > a[aria-current="page"] { color: #fff; }
  .nav-links > a[aria-current="page"]::after {
    content: ""; position: absolute;
    left: var(--sp-3); right: var(--sp-3); bottom: 2px;
    height: 2px; border-radius: 2px; background: var(--brand-tint);
  }

  .link-btn { background: none; border: 0; color: var(--text-inv); padding: 0; }
  .link-btn:hover { color: #fff; font-weight: 600; }

  /* Hamburger: só aparece abaixo do breakpoint da nav. */
  .nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--bg3); color: var(--text-inv);
    border: 1px solid var(--border-nav); border-radius: var(--r-sm);
  }
  .nav-toggle:hover { background: var(--bg4); color: #fff; }

  @media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    /* Fechado: os links saem do fluxo, a nav fica com uma linha só. */
    .nav-links { display: none; }
    /* Aberto: coluna cheia logo abaixo da marca. */
    .nav[data-open="true"] .nav-links {
      display: flex;
      flex-direction: column; align-items: stretch;
      gap: var(--sp-1);
      flex-basis: 100%;
      padding-block: var(--sp-2) var(--sp-4);
    }
    .nav[data-open="true"] .nav-links > a { padding: var(--sp-3); }
    .nav[data-open="true"] .nav-links > a[aria-current="page"] {
      background: rgba(255, 255, 255, .08);
    }
    .nav[data-open="true"] .nav-links > a[aria-current="page"]::after { display: none; }
    .nav[data-open="true"] .nav-cta { text-align: center; margin-top: var(--sp-2); }

    /* Dentro da gaveta o painel deixa de ser absoluto. Sem isso ele sai
       posicionado em relação ao botão e pode encostar na borda da tela,
       cortando itens. Como bloco, ele ocupa a largura da coluna e sempre
       cabe. Só importa com a gaveta aberta: abaixo de 900px a
       .nav-links está em display:none, então é o único jeito de chegar aqui. */
    .nav[data-open="true"] .usermenu { width: 100%; }
    .nav[data-open="true"] .usermenu-panel {
      position: static;
      width: 100%; min-width: 0; max-width: none;
      max-height: none;
      margin-top: var(--sp-2);
    }
  }

  /* --- menu do usuário (dropdown) ---------------------------------- */
  /* Sem JS o painel continua acessível (ver [data-usermenu] no base.html). */
  .usermenu { position: relative; }

  .usermenu-btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: var(--bg3); color: var(--text-inv);
    border: 1px solid var(--border-nav); border-radius: var(--r-pill);
    padding: 5px 10px 5px 7px; position: relative;
  }
  .usermenu-btn:hover { background: var(--bg4); color: #fff; }
  .usermenu-btn .caret { transition: transform var(--dur-fast) var(--ease); }
  .usermenu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
  /* Iniciais no lugar do ícone genérico: o usuário reconhece a própria conta
     sem precisar abrir o menu. */
  .usermenu-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-tint), var(--brand-ink));
    color: #fff; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .02em;
  }

  .usermenu-dot {
    position: absolute; top: 0; right: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--amber-ink); border: 2px solid var(--bg3);
  }

  .usermenu-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 264px;
    /* Sem teto, um e-mail longo ou um item com nome comprido estica o painel
       além da viewport. max-width em duas camadas: 320px no desktop e
       92vw no telefone. */
    max-width: min(320px, 92vw);
    /* Em tela baixa o rodapé (logout) saía cortado; agora rola. */
    max-height: min(70vh, 440px);
    overflow-x: hidden; overflow-y: auto;
    z-index: var(--z-menu);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .usermenu-panel[hidden] { display: none; }
  /* Barra de rolagem do painel não deve encostar na borda arredondada. */
  .usermenu-panel::-webkit-scrollbar { width: 8px; }
  .usermenu-panel::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: var(--r-pill);
  }

  .usermenu-head {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
  }
  .usermenu-head strong { display: block; font-size: var(--fs-md); }
  .usermenu-head small { display: block; color: var(--text-2); font-size: var(--fs-xs); word-break: break-all; }
  .usermenu-head .pill { display: inline-block; margin-top: var(--sp-3); text-decoration: none; }

  .usermenu-panel ul { list-style: none; margin: 0; padding: var(--sp-2) 0; }
  /* A cor é declarada no estado normal E no :hover de propósito.
     Qualquer regra de nav que use descendente ampla (`.nav-links a`) tem
     especificidade (0,2,1) no hover e venceria (0,1,3) do estado normal —
     foi assim que os itens deste painel ficaram brancos sobre fundo claro.
     Travando a cor nos dois estados o vazamento não tem por onde entrar. */
  .usermenu-panel li a,
  .usermenu-panel li a:hover {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px var(--sp-4);
    color: var(--text); font-weight: 500;
  }
  .usermenu-panel li a:hover { background: var(--surface-4); text-decoration: none; }
  .usermenu-panel li a:focus-visible { background: var(--surface-4); }
  .usermenu-panel li a .ic { color: var(--text-3); flex: 0 0 auto; }
  .usermenu-panel li a:hover .ic { color: var(--brand-ink); }

  .usermenu-foot { border-top: 1px solid var(--line); padding: var(--sp-2); }
  .usermenu-logout {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; text-align: left;
    padding: 10px var(--sp-3);
    background: none; border: 0; border-radius: var(--r-sm);
    font-weight: 500; color: var(--bad);
  }
  .usermenu-logout:hover { background: var(--bad-soft); }

  /* Troca de idioma: dois botões em vez de um <select> nativo. O select
     renderizava um retângulo escuro com a seta do SO por cima, e na janela
     do Chrome no Windows parecia um controle quebrado. */
  .lang-switch {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px;
    background: var(--bg3); border: 1px solid var(--border-nav);
    border-radius: var(--r-pill);
  }
  .lang-switch button {
    min-width: 32px; padding: 3px 9px;
    background: none; border: 0; border-radius: var(--r-pill);
    color: var(--text-inv-2); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .04em;
  }
  .lang-switch button:hover { color: #fff; background: rgba(255,255,255,.08); }
  .lang-switch button[aria-pressed="true"] {
    background: var(--brand-tint); color: #fff;
  }
  /* O X só existe quando a gaveta está aberta; o JS põe `nav-open` no <html>. */
  .nav-toggle .ic-close { display: none; }
  html.nav-open .nav-toggle .ic-menu  { display: none; }
  html.nav-open .nav-toggle .ic-close { display: block; }

  /* ------------------------------------------------------------ botoes */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    border: 1px solid transparent; border-radius: var(--r-sm);
    padding: 9px 18px; font-size: var(--fs-md); font-weight: 600;
    line-height: 1.35;
    background: var(--surface-3); color: var(--text);
    text-align: center; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
  }
  .btn:hover { text-decoration: none; background: var(--line); }
  .btn .ic { flex: 0 0 auto; }

  .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
  .btn-primary:hover { background: var(--brand-ink); }

  .btn-dark { background: var(--navy-800); color: #fff; }
  .btn-dark:hover { background: var(--navy-700); }

  .btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--text); }
  .btn-ghost:hover { background: var(--surface-2); border-color: var(--line-2); }

  .btn-success { background: var(--ok); color: #fff; }
  .btn-success:hover { background: #106232; }

  .btn-danger { background: var(--surface); border-color: var(--bad-line); color: var(--bad); }
  .btn-danger:hover { background: var(--bad-soft); }

  .btn-lg { padding: 13px 26px; font-size: var(--fs-base); border-radius: var(--r-md); }
  .btn-sm { padding: 5px 11px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
  .btn-block { width: 100%; }
  .nav-cta { color: #fff !important; padding: 8px var(--sp-4); border-radius: var(--r-sm); }
  .btn.disabled, .pager .btn.disabled { opacity: .45; pointer-events: none; }
  .btn[disabled] { opacity: .45; pointer-events: none; }

  /* Botão de ícone: alvo de 34px (era 24px com o glifo sozinho) e o glifo
     só aparece no hover sobre uma dica. */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--surface); color: var(--text-2);
    border: 1px solid var(--line-2); border-radius: var(--r-xs);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }
  .icon-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
  .icon-btn-ok:hover  { background: var(--ok-soft);  border-color: var(--ok-line);  color: var(--ok); }
  .icon-btn-no:hover  { background: var(--surface-3); color: var(--bad); border-color: var(--bad-line); }
  .icon-btn-back:hover{ background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }

  /* ------------------------------------------------------------- hero */
  /* A camada base é desenhada (gradiente + brilho + grade), não só uma cor:
     se as fotos do Unsplash não carregarem — bloqueio de rede, CDN fora, o
     navegador corporativo da empresa — o topo continua com intenção em vez
     de virar um retângulo azul vazio. */
  .hero {
    position: relative; color: #fff;
    padding: clamp(3.5rem, 2rem + 8vw, 6.5rem) 0 clamp(3rem, 2rem + 5vw, 5rem);
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(90% 120% at 82% 8%,  rgba(26, 163, 187, .30) 0%, rgba(26, 163, 187, 0) 58%),
      radial-gradient(70% 100% at 12% 100%, rgba(20, 31, 54, .95) 0%, rgba(20, 31, 54, 0) 60%),
      linear-gradient(150deg, #0d1729 0%, #101c33 48%, #0a1120 100%);
  }
  /* Grade fina: dá textura de "painel de controle" e esconde o canto morto
     do gradiente sem precisar de outra imagem. */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000 0%, transparent 78%);
            mask-image: radial-gradient(75% 70% at 50% 30%, #000 0%, transparent 78%);
    pointer-events: none;
  }
  .hero-inner {
    width: min(100% - var(--gutter) * 2, var(--container-hero));
    margin-inline: auto;
    text-align: center; position: relative; z-index: 3;
  }
  .hero-slides, .hero-slides .slide { position: absolute; inset: 0; }
  .hero-slides { z-index: 1; }
  .hero-slides .slide {
    background-position: center 32%; background-size: cover;
    opacity: 0; animation: heroXfade 24s linear infinite;
  }
  .hero-slides .slide:nth-child(1) { animation-delay: 0s; }
  .hero-slides .slide:nth-child(2) { animation-delay: 6s; }
  .hero-slides .slide:nth-child(3) { animation-delay: 12s; }
  .hero-slides .slide:nth-child(4) { animation-delay: 18s; }
  @keyframes heroXfade {
    0%       { opacity: 0; }
    7%, 23%  { opacity: 1; }
    30%,100% { opacity: 0; }
  }
  /* Escurecimento em duas camadas: um wash uniforme para o texto e um piso
     mais escuro embaixo, onde o hero encontra a faixa de números. */
  .hero-shade {
    position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(180deg, rgba(7, 12, 22, .72) 0%, rgba(7, 12, 22, .52) 48%, rgba(7, 12, 22, .92) 100%);
  }
  .hero h1 {
    font-size: var(--fs-display);
    margin: var(--sp-4) 0 var(--sp-4);
    letter-spacing: var(--track-tight);
    text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
  }
  .hero .lede { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
  .hero-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
  .hero .btn-ghost {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(10, 17, 32, .40); color: #fff;
    backdrop-filter: blur(6px);
  }
  .hero .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255,255,255,.6); }

  .hero-dots {
    position: absolute; bottom: 18px; left: 0; right: 0; z-index: 4;
    display: flex; gap: var(--sp-2); justify-content: center;
  }
  .hero-dots span {
    width: 7px; height: 7px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .3); animation: dotPulse 24s linear infinite;
  }
  .hero-dots span:nth-child(1) { animation-delay: 0s; }
  .hero-dots span:nth-child(2) { animation-delay: 6s; }
  .hero-dots span:nth-child(3) { animation-delay: 12s; }
  .hero-dots span:nth-child(4) { animation-delay: 18s; }
  @keyframes dotPulse {
    0%, 22%, 100% { background: rgba(255, 255, 255, .28); transform: scale(1); }
    7%, 16%      { background: #fff;                      transform: scale(1.4); }
  }

  .badge {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: rgba(26, 163, 187, .14); color: #8ee0f0;
    border: 1px solid rgba(126, 216, 232, .32);
    padding: 6px 14px; border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: 600;
  }
  .badge-lg { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-md); }

  /* Faixa de números: cada bloco com um filete no topo. Sem o filete era
     só texto grande e cinza, sem nenhuma âncora de separação. */
  .stats-inner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-6);
    padding: var(--sp-8) 0;
  }
  .stat { position: relative; padding-top: var(--sp-5); text-align: center; }
  .stat::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-tint), transparent);
  }
  .stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    letter-spacing: var(--track-snug);
    line-height: 1.1;
  }
  .stat span { color: var(--text-inv-3); font-size: var(--fs-sm); }

  /* ------------------------------------------------------------ cards */
  .card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
  }
  .card > :first-child { margin-top: 0; }
  .card > :last-child { margin-bottom: 0; }
  .card h3 { margin: 0 0 var(--sp-2); }
  .card p { margin: 0; }
  /* Cartão com cabeçalho: ícone + título à esquerda, ação opcional à
     direita via `.push-right`. É o padrão de "tela interna" (conta,
     painel, checkout) e dá a todas elas a mesma silhueta. */
  .card-head {
    display: flex; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap; margin: 0 0 var(--sp-5);
  }
  .card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-lg); }
  .card-head .ic-badge { width: 36px; height: 36px; }
  .card-head .push-right { margin-left: auto; }

  .card.mini { display: block; padding: var(--sp-4); color: var(--text); }
  .card.mini strong {
    display: block; margin: var(--sp-2) 0 var(--sp-1);
    font-weight: 600; line-height: 1.35;
    /* O título da vaga é o que o usuário lê; antes era um link azul de 600
       em toda linha da tabela e virava um muro de cor. Aqui é quase preto,
       com a cor da marca reservada para o hover e para o "Apply". */
    color: var(--text);
  }
  .card.mini:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); text-decoration: none; }
  .card.mini:hover strong { color: var(--brand-ink); }
  .card.mini small { color: var(--text-3); font-variant-numeric: tabular-nums; }

  .tag {
    display: inline-flex; align-items: center;
    background: var(--brand-soft); color: var(--brand-ink);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-xs); padding: 2px 8px;
    font-size: var(--fs-xs); font-weight: 700;
  }

  /* Selo de ícone: quadrado tingido no lugar do emoji dentro do <h3>.
     Emoji renderiza diferente em cada SO, não herda cor e é lido como
     decoração — aqui o ícone é parte da hierarquia. */
  .ic-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--r-md);
    background: var(--brand-soft); color: var(--brand-ink);
    border: 1px solid var(--brand-line);
  }
  .ic-badge-lg { width: 52px; height: 52px; }
  .ic-badge-amber { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-ink); }
  .ic-badge-ok    { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
  .ic-badge-plain { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }

  /* Card de benefício: ícone → título → texto, com respiro entre eles.
     Antes o emoji estava colado no h3 e o texto encostava embaixo. */
  .feature {
    display: flex; flex-direction: column; gap: var(--sp-4);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
  }
  .feature:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .feature h3 { margin: 0; font-size: var(--fs-lg); }
  .feature p { margin: 0; color: var(--text-2); }

  .step {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
  }
  .step-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--navy-800); color: #fff;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .step h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); }
  .step p { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.5; }

  /* Sobre a faixa escura o card precisa de borda clara, não de outro
     fundo: a versão anterior pintava um cinza-azulado sobre a banda e os
     dois se confundiam. */
  .band .steps .step,
  .on-dark .step { background: rgba(255, 255, 255, .045); border-color: rgba(255,255,255,.12); box-shadow: none; }
  .band .steps .step h3,
  .on-dark .step h3 { color: #fff; }
  .band .steps .step p,
  .on-dark .step p { color: var(--text-inv-2); }
  .band .step-num, .on-dark .step-num { background: rgba(126, 216, 232, .16); color: #8ee0f0; }

  /* Coluna estreita: o número vai para cima e o texto ganha a largura toda. */
  @container (max-width: 268px) {
    .step { flex-direction: column; gap: var(--sp-3); }
  }

  /* ------------------------------------------- mock animado "gif" do fluxo */
  .flowmock {
    position: relative; max-width: 680px;
    margin: var(--sp-8) auto 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-xl); padding: var(--sp-5); overflow: hidden;
  }
  .flowtrack { display: flex; align-items: stretch; gap: var(--sp-3); position: relative; z-index: 1; }
  .fm-cell {
    flex: 1; text-align: center;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-3); color: #fff;
    font-size: var(--fs-md); font-weight: 600;
  }
  .fm-cell span {
    display: block; color: var(--text-inv-2);
    font-size: var(--fs-xs); font-weight: 400; margin-top: 3px;
  }
  .fm-arrow { align-self: center; color: var(--brand-tint); flex: 0 0 auto; }
  .fm-beam {
    position: absolute; top: 0; bottom: 0; left: 0; width: 33.33%;
    background: linear-gradient(90deg, transparent, rgba(26, 163, 187, .38), transparent);
    animation: beam 4.5s ease-in-out infinite;
  }
  @keyframes beam {
    0%       { margin-left: -34%; opacity: 0; }
    10%      { opacity: 1; }
    30%      { margin-left: 0%; }
    55%      { opacity: 1; }
    90%,100% { margin-left: 101%; opacity: 0; }
  }

  @media (max-width: 520px) {
    .fm-cell { font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-2); }
    .steps { grid-template-columns: 1fr; }
    .flowtrack { flex-direction: column; }
    .fm-arrow { align-self: center; transform: rotate(90deg); }
  }

  /* ---------------------------------------------------------- pricing */
  /* O card em foco cresce, ganha sombra e um selo "Mais popular": o
     contorno de 2px do tema anterior só delineava e não dava nenhuma
     pista de qual plano comprar. */
  .price-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6) var(--sp-6);
    box-shadow: var(--shadow-sm);
  }
  .price-card.featured {
    border-color: var(--brand-tint);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-tint);
  }
  @media (min-width: 640px) {
    /* `origin: top` para o topo do card em foco continuar na mesma linha do
       vizinho. Sem isso o `scale` escala em torno do centro e o card
       featured desce ~7px, deixando os títulos desalinhados — que era
       exatamente o defeito que o destaque deveria resolver. */
    .price-card.featured { transform: scale(1.03); transform-origin: top center; }
  }
  .price-card h3 {
    margin: 0; font-size: var(--fs-md);
    color: var(--text-2); font-weight: 700;
    letter-spacing: .01em;
  }
  .price-card .ribbon {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--navy-800); color: #fff;
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--r-pill);
    white-space: nowrap;
  }
  /* Preço: o número é o elemento dominante da tela e o símbolo da moeda
     fica pequeno ao lado, como numa nota fiscal — não "USD 5.00" com o
     código empurrando o algarismo para o meio do card. */
  .price {
    display: flex; align-items: baseline; gap: 2px;
    margin: var(--sp-3) 0 var(--sp-5);
    color: var(--text-3); font-size: var(--fs-sm);
  }
  .price strong {
    font-family: var(--font-display);
    font-size: var(--fs-4xl); line-height: 1;
    color: var(--text); letter-spacing: var(--track-tight);
    font-variant-numeric: tabular-nums;
  }
  .price .cur { font-size: var(--fs-2xl); color: var(--text-3); margin-right: 1px; }
  .price .per { margin-left: var(--sp-2); }

  .price-card ul {
    list-style: none; padding: 0; margin: 0 0 var(--sp-6);
    display: flex; flex-direction: column; gap: var(--sp-3);
    border-top: 1px solid var(--line); padding-top: var(--sp-5);
    flex: 1;
  }
  .price-card ul li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: var(--fs-md); color: var(--text-2);
  }
  .price-card ul li .ic { flex: 0 0 auto; color: var(--ok); margin-top: 2px; }

  .price-summary { text-align: center; margin-bottom: var(--sp-6); }

  .pix-box {
    background: var(--brand-soft); border: 1px dashed var(--brand-line);
    border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-4) 0;
  }
  .pix-box code { background: var(--surface); border: 1px solid var(--brand-line); font-weight: 700; }

  /* -------------------------------------------------------------- faq */
  /* <details> com marcador nativo some: no lugar, um "+" que gira para "×"
     e o item aberto ganha um fio de acento na esquerda. */
  .faq { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 76ch; }
  .faq.center { margin-inline: auto; }
  .faq details {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 0;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .faq details[open] { border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
  .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    cursor: pointer; font-weight: 600;
    padding: var(--sp-4) var(--sp-5);
    list-style: none;
    border-radius: var(--r-lg);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::marker { content: ""; }
  .faq summary:hover { color: var(--brand-ink); }
  .faq summary .faq-mark {
    position: relative; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-2);
  }
  .faq summary .faq-mark::before,
  .faq summary .faq-mark::after {
    content: ""; position: absolute; inset: 50% 6px auto 6px;
    height: 1.8px; border-radius: 2px; background: currentColor;
    translate: 0 -50%;
    transition: rotate var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .faq summary .faq-mark::after { rotate: 90deg; }
  .faq details[open] summary .faq-mark { background: var(--brand-soft); color: var(--brand-ink); }
  .faq details[open] summary .faq-mark::after { rotate: 0deg; opacity: 0; }
  .faq p {
    color: var(--text-2); margin: 0;
    padding: 0 var(--sp-5) var(--sp-5);
    max-width: 66ch;
  }

  /* -------------------------------------------------------------- cta */
  /* Fecha a página com uma "faixa" de verdade: gradiente da marca, não
     mais a mesma banda escura repetida três vezes na mesma tela. */
  .cta { text-align: center; position: relative; overflow: hidden; isolation: isolate; }
  .cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, var(--brand-ink) 0%, var(--navy-800) 62%, var(--navy-900) 100%);
  }
  .cta::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(60% 90% at 80% 0%, rgba(26,163,187,.34), transparent 62%);
  }
  .cta h2 { font-size: var(--fs-h2); color: #fff; }
  .cta p { color: var(--text-inv); }

  /* ------------------------------------------------------------ forms */
  /* Campo = rótulo / controle / ajuda / erro empilhados com o mesmo
     ritmo. Antes o `.auth label` trazia a própria margem superior e o
     `.input` a inferior, o que dava dois ritmos diferentes entre o login
     (que usa .input) e o cadastro (que usa {{ form.field }} cru). */
  .field { display: block; margin-bottom: var(--sp-5); }
  .field:last-child { margin-bottom: 0; }
  .field > label, .field-label {
    display: block; font-weight: 600;
    margin-bottom: var(--sp-2); font-size: var(--fs-md);
    color: var(--text);
  }
  .field-hint { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-2); }

  .input {
    display: block; width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    font-size: var(--fs-md); margin: 0;
    background: var(--surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .input::placeholder { color: var(--text-3); }
  .input:hover { border-color: var(--line-2); }
  .input:focus { border-color: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-soft); }
  textarea.input { min-height: 96px; resize: vertical; }
  select.input {
    appearance: none;
    padding-right: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .field-error, .errorlist {
    color: var(--bad); font-size: var(--fs-sm);
    margin: var(--sp-2) 0 0; padding: 0; list-style: none;
  }
  /* Lista de requisitos de senha do Django: vira uma coluna com o ✓. */
  .field-help ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
  .field-help li { color: var(--text-3); font-size: var(--fs-sm); }
  .field-help li ul { padding-left: var(--sp-4); margin: 0; }

  .auth { padding: var(--sp-12) 0 var(--sp-16); }
  .auth .card { padding: var(--sp-8); }

  /* ---------------------------------------------------------- alerts */
  /* Cada estado tem um par próprio e o ícone dá à cor uma segunda pista
     além do texto — o "!" e o "×" é o que separa erro de aviso quando as
     duas cores são parecidas. */
  .alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    border-radius: var(--r-md); padding: var(--sp-4);
    margin: var(--sp-3) 0;
    border: 1px solid transparent;
    font-size: var(--fs-md); line-height: 1.5;
  }
  .alert .ic { flex: 0 0 auto; margin-top: 1px; }
  .alert-error   { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-line); }
  .alert-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
  .alert-success { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok-line); }
  .alert-info    { background: var(--info-soft); color: var(--brand-ink); border-color: var(--info-line); }
  .messages .alert { margin: var(--sp-3) 0; }
  /* A faixa de mensagens entra logo abaixo da nav, colada nela. */
  .messages { padding-top: var(--sp-5); }
  .messages:empty { display: none; }

  /* ---------------------------------------------------------- tabelas */
  /* `border-collapse: separate` + `border-spacing: 0` em vez de `collapse`:
     só o `collapse` dá as bordas entre células sem duplicá-las, o que
     impedia o arquivo de declarar a cor do trilho e do hover por célula.
     E SEM `overflow: hidden` no <table> de propósito: ele tornaria a
     tabela num scroll container e o thead sticky grudaria nela — visível
     no meio da lista em vez de no topo da janela. O raio é recortado
     nos cantos das células (ver .table > tbody:first-child, logo abaixo).
     A sombra fica no elemento com `overflow: hidden` (`.table-scroll`). */
  .table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--surface);
  }
  .table-scroll {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    /* Nenhum `overflow` aqui: qualquer um deles (hidden, clip, auto) prenderia
       o thead sticky dentro da tabela, e o cabeçalho sumiria assim que a
       rolagem passasse do topo da tabela. O raio vem do container e o
       recorte dos cantos, dos cells do thead. */
  }
  .table > :first-child > :first-child { border-top-left-radius: var(--r-xl); }
  .table > :first-child > :last-child  { border-top-right-radius: var(--r-xl); }
  .table > :last-child  > :first-child { border-bottom-left-radius: var(--r-xl); }
  .table > :last-child  > :last-child  { border-bottom-right-radius: var(--r-xl); }

  .table th, .table td {
    padding: 12px var(--sp-4); text-align: left;
    border-bottom: 1px solid var(--line); vertical-align: middle;
  }
  .table th {
    background: var(--surface-3); color: var(--text-3);
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: var(--track-wide); text-transform: uppercase;
    white-space: nowrap;
  }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr { transition: background var(--dur-fast) var(--ease); }
  .table tbody tr:hover td { background: var(--surface-2); }

  /* Cabeçalho grudado, logo abaixo da nav. Só funciona porque
     `.table-scroll` fica `overflow: visible` no desktop (ver @layer layout). */
  .table thead th {
    position: sticky; top: var(--nav-h); z-index: var(--z-sticky);
  }

  /* Grade fechada, como a tabela do painel: borda em cada célula deixa a
     leitura bem mais nítida em tabela de administração. */
  .table.grid th, .table.grid td { border: 1px solid var(--line); }
  .table.grid th { border-bottom-color: var(--line-3); }
  .table.grid tbody tr:hover td { background: var(--surface-2); }

  .table th:first-child, .table td:first-child { white-space: nowrap; }
  .col-status { width: 104px; }
  .col-date   { width: 116px; }
  .th-actions { width: 120px; }
  .tnum { font-variant-numeric: tabular-nums; }

  /* Status da linha entra por um trilho de 3px + 3% de fundo. Pintar a
     linha inteira de amarelo (como antes) transformava a tabela num bloco
     sólido sempre que havia vaga nova — que é o estado normal do produto. */
  .row-new td:first-child     { box-shadow: inset 3px 0 0 var(--amber-line); }
  .row-new td                { background: #fffdf6; }
  .row-applied td:first-child { box-shadow: inset 3px 0 0 var(--ok-line); }
  .row-applied td             { background: #f7fcf9; }
  .row-ignored td             { background: var(--surface-2); color: var(--text-3); }
  .row-ignored td:first-child { box-shadow: inset 3px 0 0 var(--line-2); }
  .row-ignored .job-title     { color: var(--text-2); }
  .row-applied .job-title,
  .row-new .job-title         { color: var(--text); }
  .table tbody tr:hover td    { background: var(--surface-2) !important; }

  /* Título da vaga: quase preto, com a cor da marca só no hover. */
  .job-title { font-weight: 600; color: var(--text); }
  .job-title:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
  /* "Candidatar-se" ao lado do título, que é a célula larga da linha.
     O `display: inline-flex` mantém o botão na mesma linha do texto; sem
     ele o `<a>` deixaria de ser caixa atômica e o padding se desfaria.
     A coluna ganha uma largura mínima: com `max-width: 0` (tentativa de
     forçar quebra) o título empurrava o botão para a linha de baixo e cada
     vaga passava a ocupar duas linhas — o dobro de altura para ler menos. */
  .job-apply { display: inline-flex; margin-left: var(--sp-3); vertical-align: middle; }
  /* Só a largura mínima. Dar `width: 100%` para a posição (tentando
     absorber a sobra) espreme a empresa até "Royal Caribbean Group" quebrar
     em três linhas e a linha dobrar de altura — pior que o vão. */
  .job-cell { min-width: 260px; }
  .job-cell .job-title { display: inline; }

  .row-actions { display: inline-flex; gap: var(--sp-2); }

  /* --- lista em cartão para celular ---------------------------------
     Mesmos dados, mesma laço, outra forma. A tabela de 5 colunas num
     telefone de 390px exigia rolagem lateral e cortava o título da vaga
     no meio da palavra — o ecrã principal do produto ficava inutilizável.
     O cartão cabe inteiro e o "Apply" vira alvo de toque de verdade. */
  .job-cards { display: none; list-style: none; margin: 0; padding: 0; gap: var(--sp-3); }
  @media (max-width: 780px) {
    .job-cards { display: grid; }
    .jobs-table { display: none; }
  }
  .job-card {
    display: grid; gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
  }
  .job-card.is-new     { border-left-color: var(--amber-line); background: #fffdf6; }
  .job-card.is-applied { border-left-color: var(--ok-line);   background: #f7fcf9; }
  .job-card.is-ignored { border-left-color: var(--line-2); background: var(--surface-2); }
  .job-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
  }
  .job-card-title {
    font-weight: 600; line-height: 1.35; color: var(--text);
    display: block;
  }
  .job-card-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
    color: var(--text-3); font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .job-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .job-card-foot { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .job-card-foot .btn { flex: 1 1 auto; }
  .job-card-foot .row-actions { flex: 0 0 auto; }

  /* ------------------------------------------------------- dashboard */
  .dash-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--sp-4); padding-top: var(--sp-10); padding-bottom: var(--sp-6);
    flex-wrap: wrap;
  }
  .dash-head h1 { margin: 0; }
  .dash-filters {
    display: flex; gap: var(--sp-3); align-items: center;
    padding-bottom: var(--sp-5);
    flex-wrap: wrap;
  }
  .dash-filters .search-field {
    flex: 1 1 260px; max-width: 380px; min-width: 0;
  }
  .dash-filters input[type="search"] { margin-bottom: 0; }

  /* Segmentado: cápsula com o item ativo em branco "flutuando". O
     anterior pintava o item ativo de azul com borda que não separava um
     botão do outro — lia-se como quatro botões soltos. */
  .seg {
    display: inline-flex; gap: 2px;
    padding: 3px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
  }
  .seg-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: none; color: var(--text-2);
    font-weight: 600; font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .seg-item:hover { text-decoration: none; background: rgba(255,255,255,.7); color: var(--text); }
  .seg-active, .seg-active:hover {
    background: var(--surface); color: var(--brand-ink);
    box-shadow: var(--shadow-xs);
  }
  .seg-item .count {
    font-size: var(--fs-xs); font-weight: 700;
    color: var(--text-3); font-variant-numeric: tabular-nums;
  }
  .seg-active .count { color: var(--brand-ink); }

  /* ----------------------------------------------------------- admin */
  .admin { padding-bottom: var(--sp-12); }
  .kpi {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-xs);
    min-width: 0; overflow-wrap: anywhere;
    position: relative; overflow: hidden;
  }
  .kpi strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-2xl); line-height: 1.1;
    letter-spacing: var(--track-snug);
    font-variant-numeric: tabular-nums;
  }
  .kpi strong small { font-size: var(--fs-md); color: var(--text-3); font-weight: 600; }
  .kpi span { display: block; color: var(--text-2); font-size: var(--fs-xs); margin-top: 5px; }
  .kpi-ok strong   { color: var(--ok); }
  .kpi-warn strong { color: var(--warn); }

  @container (max-width: 190px) {
    .kpi { padding: var(--sp-3) var(--sp-4); }
    .kpi strong { font-size: var(--fs-xl); }
  }

  .panel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: var(--sp-6);
    margin: 0 0 var(--sp-6); box-shadow: var(--shadow-sm);
  }
  .panel-head {
    display: flex; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap; margin-bottom: var(--sp-5);
  }
  .panel-head h2 { margin: 0; font-size: var(--fs-lg); }
  .panel-head .grow { flex: 1; }

  /* Lista de metadados: flex, não grid. Com `repeat(auto-fit, minmax(150px))`
     o carimbo ISO da última execução ("2026-10-14T00:37:45.011402+00:00")
     caía numa coluna de 150px e quebrava em três linhas, enquanto os
     vizinhos ("1min 26s") ficavam com metade vazia. No flex cada item
     ocupa o que o texto pedir. */
  .meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8);
    margin: var(--sp-5) 0 var(--sp-2);
    padding-top: var(--sp-5); border-top: 1px solid var(--line);
  }
  .meta div { display: flex; flex-direction: column; gap: 3px; min-width: 132px; }
  .meta dt {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-wide);
    color: var(--text-3); font-weight: 700;
  }
  .meta dd {
    margin: 0; font-size: var(--fs-md); font-weight: 600;
    overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
  }

  /* Barra de busca dos filtros: sem `max-width` o `.input` com width:100%
     ficava com 1000px de lado e empurrava os demais controles para fora da
     tela em telas largas. */
  .filters {
    display: flex; gap: var(--sp-3); align-items: center;
    flex-wrap: wrap; margin: 0 0 var(--sp-5);
  }
  .filters .search-field { flex: 1 1 220px; max-width: 420px; min-width: 0; }
  .filters .input { margin-bottom: 0; }
  .filters select.input { width: auto; }
  .filters .count { font-size: var(--fs-sm); white-space: nowrap; }

  /* ------------------------------------------------------------ pills */
  /* Chip de status com ponto. O ponto dá a mesma leitura do texto com só
     a cor, e a cauda em maiúscula abrevia o rótulo dentro da tabela sem
     perder significado. */
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-pill);
    padding: 3px 10px; font-size: var(--fs-xs); font-weight: 700;
    white-space: nowrap;
  }
  .pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto; opacity: .85;
  }
  .pill-new     { background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-line); }
  .pill-applied { background: var(--ok-soft);   color: var(--ok);         box-shadow: inset 0 0 0 1px var(--ok-line); }
  .pill-ignored { background: var(--surface-3); color: var(--text-3);     box-shadow: inset 0 0 0 1px var(--line-2); }
  .pill-open    { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-line); }
  .pill-new a, .pill-open a { color: inherit; }

  /* ------------------------------------------------------------ pager */
  .pager {
    display: flex; gap: var(--sp-2); align-items: center;
    justify-content: center; flex-wrap: wrap;
    padding: var(--sp-8) 0 var(--sp-2);
  }
  .pager-nums { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
  .pager-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    border: 1px solid transparent; background: none;
    color: var(--text-2); font-size: var(--fs-md); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .pager-num:hover { background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-xs); }
  .pager-num.current {
    background: var(--navy-800); border-color: var(--navy-800); color: #fff;
  }
  .pager-gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 36px; color: var(--text-3); font-weight: 700;
  }
  .pager-info { text-align: center; font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }

  /* ------------------------------------------------------- estado vazio */
  /* Antes era um `<td class="muted center pad">` com uma frase. Agora tem
     ícone, título e ação: a tela mais vista depois da lista precisa de um
     destino, não só de um motivo. */
  .empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--sp-3);
    padding: var(--sp-14) var(--sp-6);
    color: var(--text-2);
  }
  .empty .ic-badge { margin-bottom: var(--sp-1); }
  .empty strong {
    display: block; color: var(--text);
    font-size: var(--fs-lg); font-family: var(--font-display);
  }
  .empty p { margin: 0; max-width: 44ch; }
  .empty .btn { margin-top: var(--sp-2); }

  /* ------------------------------------------------------------ sync */
  .sync-live {
    display: none; margin: 0 0 var(--sp-5); padding: var(--sp-4);
    border: 1px solid var(--info-line); background: var(--info-soft);
    border-radius: var(--r-md);
  }
  .sync-live.ativo { display: block; }
  .sync-live .sync-linha {
    display: flex; justify-content: space-between; gap: var(--sp-3);
    flex-wrap: wrap; font-size: var(--fs-md); margin-bottom: var(--sp-3);
  }
  .sync-live .sync-etapa { font-weight: 700; }
  .sync-live .sync-num { color: var(--text-2); font-variant-numeric: tabular-nums; }

  .barra { height: 8px; border-radius: var(--r-pill); background: var(--info-line); overflow: hidden; }
  /* width:0 é o estado inicial; a sync.js escreve style.width direto no
     elemento conforme o crawl avança, e `.indefinida` sobrescreve abaixo. */
  .barra > span {
    display: block; width: 0; height: 100%;
    background: var(--brand-tint); border-radius: var(--r-pill);
    transition: width .4s ease;
  }
  /* Sem valor de progresso real: movimento discreto, sem mentir sobre %. */
  .barra.indefinida > span {
    width: 35% !important; animation: desliza 1.3s ease-in-out infinite;
  }
  @keyframes desliza {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .barra.indefinida > span { animation: none; width: 100% !important; opacity: .45; }
    .barra > span { transition: none; }
  }

  .sync-live .sync-stats {
    display: flex; gap: var(--sp-5); flex-wrap: wrap;
    margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-2);
  }
  .sync-live .sync-stats b { color: var(--text); font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------- footer */
  /* Rodapé de verdade: marca + resumo, navegação do produto e idioma.
     Antes eram duas phrases soltas no escuro e a página fechava com uma
     faixa que parecia sobra. */
  .footer { background: var(--navy-950); color: var(--text-inv-2); margin-top: var(--section-y); }
  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-8);
    padding-block: var(--sp-12);
  }
  .footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 38ch; }
  .footer-brand .brand { padding: 0; }
  .footer-brand p { margin: 0; color: var(--text-inv-2); font-size: var(--fs-sm); line-height: 1.6; }
  .footer-col h4 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--track-wide);
    color: var(--text-inv);
    font-family: var(--font);
  }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
  .footer-col a { color: var(--text-inv-2); font-size: var(--fs-sm); }
  .footer-col a:hover { color: #fff; }
  .footer-lang { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .footer-lang .lang-switch {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border-nav);
  }
  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--sp-3); flex-wrap: wrap;
    padding-block: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: var(--fs-sm);
  }
  @media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  }
}

/* ========================================================= utilities ===== */
/* Substituem os style="" inline que estavam espalhados pelos templates. */

@layer utilities {
  .stack   { display: flex; flex-direction: column; }
  .stack-2 { gap: var(--sp-2); }
  .stack-3 { gap: var(--sp-3); }
  .stack-5 { gap: var(--sp-5); }

  .cluster     { display: flex; align-items: center; flex-wrap: wrap; }
  .cluster-2   { gap: var(--sp-2); }
  .cluster-3   { gap: var(--sp-3); }
  .grow        { flex: 1; }
  .inline-form { display: inline; }

  .list-plain { list-style: none; margin: var(--sp-2) 0; padding-left: 0; }
  .list-plain li { margin: var(--sp-1) 0; }
  .list-bullets { margin: var(--sp-2) 0; padding-left: var(--sp-5); color: var(--text-2); }
  .list-bullets li { margin: var(--sp-2) 0; }

  /* Lista de termos da conta: cada item vira uma linha com botão de
     remover à direita. A versão anterior botava o ✕ colado na palavra,
     com o <form> inline quebrando o alinhamento em telas estreitas. */
  .term-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .term-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .term-item span { font-weight: 500; overflow-wrap: anywhere; }

  .mt-2 { margin-top: var(--sp-2); }
  .mt-5 { margin-top: var(--sp-5); }

  .tnum { font-variant-numeric: tabular-nums; }
  .muted { color: var(--text-2); }
  .text-bad { color: var(--bad); }
  .remove-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 auto;
    background: none; border: 0; border-radius: var(--r-xs);
    color: var(--text-3);
  }
  .remove-btn:hover { background: var(--bad-soft); color: var(--bad); }

  /* Slides do hero: a imagem vira classe, tirando 4 style="" do template. */
  .hero-slide-1 { background-image: url("https://images.unsplash.com/photo-1767602280402-8fc0e7f092e7?auto=format&fit=crop&w=1600&q=80"); }
  .hero-slide-2 { background-image: url("https://images.unsplash.com/photo-1719007129627-780ab16f588c?auto=format&fit=crop&w=1600&q=80"); }
  .hero-slide-3 { background-image: url("https://images.unsplash.com/photo-1617170788899-ef9587d6e63f?auto=format&fit=crop&w=1600&q=80"); }
  .hero-slide-4 { background-image: url("https://images.unsplash.com/photo-1758334296129-978df3db9db8?auto=format&fit=crop&w=1600&q=80"); }

  /* Leve, mas a parede inteira não pode tremer quando o drawer abre. */
  @media (max-width: 900px) {
    html.nav-open, html.nav-open body { overflow: hidden; }
  }
}