/* ==========================================================================
   JL Certificado Digital — Design System v2.0
   02. components.css — camada de composição

   Depende de tokens.css. Nenhum hex, nenhum px de fonte e nenhuma sombra
   literal aparecem aqui: só var(--semantic-*).

   Especificidade: tudo em classe única (0,1,0). Sem seletor de elemento
   disputando espaçamento com classe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

.jl-root {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--jl-font-body);
  font-size: var(--jl-size-body);
  line-height: var(--jl-lh-body);
  letter-spacing: var(--jl-ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.jl-focusable:focus-visible,
.jl-btn:focus-visible,
.jl-tab:focus-visible,
.jl-accordion__trigger:focus-visible,
.jl-field__input:focus-visible {
  outline: var(--jl-focus-ring) solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--jl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   LAYOUT
   Ritmo de seção vive em .jl-section. Componente interno nunca define
   margem vertical externa — quem espaça é o container, via gap.
   -------------------------------------------------------------------------- */
.jl-container {
  width: 100%;
  max-width: var(--jl-container);
  margin-inline: auto;
  padding-inline: var(--jl-gutter);
}

.jl-container--narrow { max-width: var(--jl-container-narrow); }

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

.jl-section--sunk { background: var(--surface-sunk); }

.jl-section--inverse {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.jl-stack {
  display: flex;
  flex-direction: column;
  gap: var(--jl-space-4);
}
.jl-stack--tight { gap: var(--jl-space-2); }
.jl-stack--loose { gap: var(--jl-space-8); }

.jl-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jl-space-3);
}

.jl-grid {
  display: grid;
  gap: var(--jl-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Filete guilhoché — traço cheio sobre tracejado prata. Máx. 1 por página. */
.jl-rule {
  border: 0;
  height: 3px;
  background:
    linear-gradient(var(--border-subtle), var(--border-subtle)) top / 100% 1px no-repeat,
    var(--rule-guilloche) bottom / 100% 1px no-repeat;
}

/* --------------------------------------------------------------------------
   MARCA

   O monograma é monocromático e pintado por currentColor: um único arquivo
   (logo-monograma.svg) serve as duas versões oficiais. --logo-ink já troca
   entre marinho e prata conforme o tema — não crie dois SVGs, e nunca
   recolora o arquivo na mão.

   Dimensione SEMPRE pela altura. A proporção 360:306 está travada no
   viewBox; largura fica por conta do aspect-ratio.
   -------------------------------------------------------------------------- */
.jl-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--jl-space-4);
  color: var(--logo-ink);
  text-decoration: none;
}

.jl-logo__mark {
  display: block;
  height: 2.5rem;
  width: auto;
  min-height: var(--jl-logo-min);
  aspect-ratio: var(--jl-logo-ratio);
  flex: none;
}

/* Respiro obrigatório: 1/3 da altura da marca em todos os lados. Nada de
   texto, traço ou borda dentro dessa área. */
.jl-logo--protected { padding: calc(2.5rem * var(--jl-logo-clear)); }

/* Assinatura tipográfica ao lado do monograma, quando não se usa o
   lockup oficial com o letreiro vetorizado. */
.jl-logo__word {
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-heading-md);
  font-weight: var(--jl-weight-semibold);
  letter-spacing: var(--jl-ls-heading);
  line-height: 1.15;
  color: currentColor;
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA
   Poppins é geométrica e larga: título grande exige tracking negativo forte,
   senão a palavra "certificado" abre e perde densidade.
   -------------------------------------------------------------------------- */
.jl-display-xl,
.jl-display-lg,
.jl-display-md {
  font-family: var(--jl-font-display);
  font-weight: var(--jl-weight-bold);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

.jl-display-xl {
  font-size: var(--jl-size-display-xl);
  line-height: var(--jl-lh-tight);
  letter-spacing: var(--jl-ls-display);
}
.jl-display-lg {
  font-size: var(--jl-size-display-lg);
  line-height: var(--jl-lh-display);
  letter-spacing: var(--jl-ls-display);
}
.jl-display-md {
  font-size: var(--jl-size-display-md);
  line-height: var(--jl-lh-display);
  letter-spacing: var(--jl-ls-heading);
}

.jl-heading-lg,
.jl-heading-md,
.jl-heading-sm {
  font-family: var(--jl-font-display);
  font-weight: var(--jl-weight-semibold);
  line-height: var(--jl-lh-heading);
  letter-spacing: var(--jl-ls-heading);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.jl-heading-lg { font-size: var(--jl-size-heading-lg); }
.jl-heading-md { font-size: var(--jl-size-heading-md); }
.jl-heading-sm { font-size: var(--jl-size-heading-sm); letter-spacing: -0.01em; }

.jl-body-lg,
.jl-body,
.jl-body-sm {
  margin: 0;
  color: var(--text-secondary);
  max-width: var(--jl-measure);
}
.jl-body-lg { font-size: var(--jl-size-body-lg); line-height: var(--jl-lh-relaxed); }
.jl-body { font-size: var(--jl-size-body); line-height: var(--jl-lh-body); }
.jl-body-sm { font-size: var(--jl-size-body-sm); line-height: var(--jl-lh-body); }

.jl-caption {
  margin: 0;
  font-size: var(--jl-size-caption);
  line-height: 1.5;
  /* --text-secondary, não --text-tertiary: esta legenda carrega informação
     real (horário, avaliação, nota de preço), não é decorativa — e
     tertiary só tem 3,3:1 sobre branco (ver tokens.css). */
  color: var(--text-secondary);
}

/* Sobrelinha de seção. Carrega o assunto da seção, não enfeite. */
.jl-eyebrow {
  display: block;
  margin: 0;
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-eyebrow);
  font-weight: var(--jl-weight-semibold);
  letter-spacing: var(--jl-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* Dado: série, CNPJ, protocolo, preço, contador. Sempre tabular. */
.jl-mono {
  font-family: var(--jl-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.jl-link {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.jl-link:hover { text-decoration-thickness: 2px; }

.jl-text-inverse { color: var(--text-on-inverse); }
.jl-text-inverse-muted { color: var(--text-on-inverse-muted); }

/* --------------------------------------------------------------------------
   BOTÃO

   A marca tem três cores e nenhuma delas é uma cor de urgência. Não existe
   variante vermelha: urgência é construída por PESO e CONTRASTE
   (.jl-btn--emphasis), pelo selo de oferta e pelo contador — nunca por hue.
   -------------------------------------------------------------------------- */
.jl-btn {
  --_btn-bg: var(--action-primary);
  --_btn-fg: var(--action-primary-text);
  --_btn-bg-hover: var(--action-primary-hover);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jl-space-2);
  padding: var(--jl-space-4) var(--jl-space-8);
  border: 1px solid transparent;
  border-radius: var(--jl-radius-md);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-body);
  font-weight: var(--jl-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--jl-dur-base) var(--jl-ease-out),
    transform var(--jl-dur-fast) var(--jl-ease-out),
    box-shadow var(--jl-dur-base) var(--jl-ease-out);
}

/* Brilho que cruza o botão no hover — a mesma família de gesto do medalhão
   ICP e do cartão do herói, não uma animação inventada só pra este
   componente. Fica pronto (fora de cena) em repouso e só atravessa quando
   convidado, então nunca soma ruído a uma tela cheia de botões parados. */
.jl-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Quem viaja é o FUNDO da camada, não a camada.
     A camada fica cravada em inset:0 e nunca sai do botão; o brilho é uma
     faixa dentro de uma imagem 3x mais larga que o botão, e o que se move é
     background-position — recortado pelo próprio elemento, por definição.

     Antes isto era um translate na camada inteira: ela realmente cruzava a
     tela por fora do botão antes e depois do gesto, e lia como defeito.
     overflow:hidden no botão seria a correção óbvia, mas cortaria o anel
     prata do --emphasis, que é box-shadow desenhado por FORA da borda.
     Mover só o fundo resolve os dois de uma vez, sem recorte nenhum. */
  background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  transition: background-position 640ms var(--jl-ease-out);
  pointer-events: none;
}

.jl-btn:hover:not([aria-disabled="true"]) { background-color: var(--_btn-bg-hover); transform: translateY(-2px); }
.jl-btn:hover:not([aria-disabled="true"])::after { background-position: 0 0; }
.jl-btn:active:not([aria-disabled="true"]) { transform: translateY(1px); }

.jl-btn--secondary {
  --_btn-bg: var(--action-secondary);
  --_btn-fg: var(--action-secondary-text);
  --_btn-bg-hover: var(--action-secondary-hover);
}

.jl-btn--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--text-primary);
  --_btn-bg-hover: var(--surface-sunk);
  border-color: var(--border-default);
}

/* Ênfase = marinho pleno + anel prata + sombra profunda. Máx. duas
   ocorrências na página: seletor de preço e fechamento. */
.jl-btn--emphasis {
  --_btn-bg: var(--action-emphasis);
  --_btn-fg: var(--action-emphasis-text);
  --_btn-bg-hover: var(--action-primary-hover);
  font-weight: var(--jl-weight-bold);
  box-shadow:
    0 0 0 1px var(--action-emphasis-ring),
    0 0 0 4px var(--surface-page),
    var(--jl-shadow-emphasis);
}

/* Sobre faixa institucional, a ação inverte para branco com texto marinho. */
.jl-btn--on-inverse {
  --_btn-bg: var(--surface-page);
  --_btn-fg: var(--text-brand);
  --_btn-bg-hover: var(--surface-silver);
}

.jl-btn--sm { padding: var(--jl-space-3) var(--jl-space-5); font-size: var(--jl-size-body-sm); }
.jl-btn--lg { padding: var(--jl-space-5) var(--jl-space-10); font-size: var(--jl-size-body-lg); }
.jl-btn--block { width: 100%; }

.jl-btn[aria-disabled="true"],
.jl-btn:disabled {
  --_btn-bg: var(--action-disabled);
  --_btn-fg: var(--action-disabled-text);
  --_btn-bg-hover: var(--action-disabled);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SELO / BADGE
   Sem cor de alerta. A hierarquia é construída em três níveis de peso
   dentro da própria marca:
     soft   -> categoria neutra (A1, A3, PF, PJ)
     outline-> credenciamento, garantia, atributo verificável
     solid  -> oferta, desconto, escassez (marinho pleno)
     metal  -> selo de credenciamento, ocasião única
   -------------------------------------------------------------------------- */
.jl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jl-space-2);
  padding: var(--jl-space-1) var(--jl-space-3);
  border: 1px solid transparent;
  border-radius: var(--jl-radius-pill);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-caption);
  font-weight: var(--jl-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.jl-badge--outline {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}

.jl-badge--solid {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

.jl-badge--silver {
  background: var(--surface-silver);
  color: var(--text-primary);
}

.jl-badge--metal {
  background: var(--surface-metal);
  color: var(--jl-navy-800);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--jl-shadow-xs);
}

.jl-badge--upper {
  text-transform: uppercase;
  letter-spacing: var(--jl-ls-eyebrow);
  font-size: var(--jl-size-eyebrow);
  font-weight: var(--jl-weight-bold);
}

/* Ponto de status: estado também na forma, não só na cor. */
.jl-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--jl-radius-pill);
  background: currentColor;
  flex: none;
}

/* Medalha metálica — credenciamento ICP-Brasil. Uma por página. */
.jl-seal {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--jl-radius-pill);
  background: var(--surface-metal);
  color: var(--jl-navy-800);
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-caption);
  font-weight: var(--jl-weight-bold);
  line-height: 1.1;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    var(--jl-shadow-sm);
}

/* --------------------------------------------------------------------------
   CARTÃO
   -------------------------------------------------------------------------- */
.jl-card {
  display: flex;
  flex-direction: column;
  gap: var(--jl-space-4);
  padding: var(--jl-space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--jl-radius-lg);
  background: var(--surface-card);
}

.jl-card--raised {
  border-color: transparent;
  box-shadow: var(--jl-shadow-md);
}

.jl-card--interactive {
  cursor: pointer;
  transition:
    border-color var(--jl-dur-base) var(--jl-ease-out),
    box-shadow var(--jl-dur-base) var(--jl-ease-out),
    transform var(--jl-dur-base) var(--jl-ease-out);
}
.jl-card--interactive:hover {
  border-color: var(--border-brand);
  box-shadow: var(--jl-shadow-md);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   CARTÃO DE PRODUTO (e-CPF / e-CNPJ, A1 / A3)
   O preço vigente é o elemento mais pesado do cartão. O preço anterior é
   riscado, em mono e terciário — nunca com a mesma presença.
   -------------------------------------------------------------------------- */
.jl-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--jl-space-4);
  padding: var(--jl-space-6);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--jl-radius-lg);
  background: var(--surface-card);
  transition:
    border-color var(--jl-dur-base) var(--jl-ease-out),
    box-shadow var(--jl-dur-base) var(--jl-ease-out);
}

.jl-plan:hover { border-color: var(--border-strong); }

.jl-plan[data-selected="true"] {
  border-color: var(--border-brand);
  box-shadow: var(--jl-shadow-md);
}

.jl-plan__flag {
  position: absolute;
  top: calc(var(--jl-space-3) * -1);
  right: var(--jl-space-5);
}

.jl-plan__name {
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-heading-md);
  font-weight: var(--jl-weight-semibold);
  letter-spacing: var(--jl-ls-heading);
  color: var(--text-primary);
  margin: 0;
}

.jl-plan__desc {
  font-size: var(--jl-size-body-sm);
  color: var(--text-secondary);
  margin: 0;
}

.jl-plan__prices {
  display: flex;
  align-items: baseline;
  gap: var(--jl-space-3);
  flex-wrap: wrap;
  margin-top: auto;
}

.jl-plan__was {
  font-family: var(--jl-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--jl-size-body-sm);
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.jl-plan__now {
  font-family: var(--jl-font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--jl-size-display-md);
  font-weight: var(--jl-weight-bold);
  letter-spacing: var(--jl-ls-display);
  color: var(--text-primary);
  line-height: 1;
}

.jl-plan__note {
  font-size: var(--jl-size-caption);
  color: var(--text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   ALTERNADOR PF / PJ
   -------------------------------------------------------------------------- */
.jl-tabs {
  display: inline-flex;
  padding: var(--jl-space-1);
  border-radius: var(--jl-radius-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--border-subtle);
}

.jl-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--jl-space-2) var(--jl-space-6);
  border-radius: var(--jl-radius-pill);
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-body-sm);
  font-weight: var(--jl-weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color var(--jl-dur-base) var(--jl-ease-out),
    color var(--jl-dur-base) var(--jl-ease-out);
}

.jl-tab[aria-selected="true"] {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

/* --------------------------------------------------------------------------
   LISTA DE BENEFÍCIOS
   -------------------------------------------------------------------------- */
.jl-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jl-space-3);
}

.jl-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--jl-space-3);
  font-size: var(--jl-size-body);
  color: var(--text-secondary);
}

.jl-checklist__mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: var(--jl-radius-pill);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  font-size: 11px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   PASSO NUMERADO
   Numeração usada só aqui: pagamento -> videoconferência -> emissão é uma
   sequência real e a ordem é informação que o cliente precisa. Não numere
   blocos de benefício.
   -------------------------------------------------------------------------- */
.jl-step {
  display: flex;
  gap: var(--jl-space-4);
  align-items: flex-start;
}

.jl-step__num {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--jl-radius-pill);
  border: 1px solid var(--border-brand);
  background: transparent;
  color: var(--text-brand);
  font-family: var(--jl-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--jl-size-body-sm);
  font-weight: var(--jl-weight-bold);
}

/* --------------------------------------------------------------------------
   INDICADOR / PROVA SOCIAL
   -------------------------------------------------------------------------- */
.jl-stat { display: flex; flex-direction: column; gap: var(--jl-space-1); }

.jl-stat__value {
  font-family: var(--jl-font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--jl-size-display-md);
  font-weight: var(--jl-weight-bold);
  letter-spacing: var(--jl-ls-display);
  line-height: 1;
  color: var(--text-brand);
}

.jl-stat__label {
  font-size: var(--jl-size-body-sm);
  color: var(--text-secondary);
}

.jl-quote {
  display: flex;
  flex-direction: column;
  gap: var(--jl-space-4);
  padding: var(--jl-space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--jl-radius-lg);
  background: var(--surface-card);
}

.jl-quote__text {
  margin: 0;
  font-size: var(--jl-size-body);
  line-height: var(--jl-lh-relaxed);
  color: var(--text-primary);
}

.jl-quote__author {
  display: flex;
  align-items: center;
  gap: var(--jl-space-3);
  margin-top: auto;
}

.jl-quote__avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--jl-radius-pill);
  display: grid;
  place-items: center;
  background: var(--surface-brand);
  color: var(--text-on-brand);
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-caption);
  font-weight: var(--jl-weight-semibold);
}

/* Estrelas em marinho, não em dourado: a marca não tem uma quarta cor. */
.jl-stars {
  color: var(--text-brand);
  letter-spacing: 0.1em;
  font-size: var(--jl-size-body-sm);
}

/* Faixa de credenciamento — ICP-Brasil / ITI */
.jl-trust {
  display: flex;
  gap: var(--jl-space-5);
  align-items: center;
  padding: var(--jl-space-5);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-brand);
  border-radius: var(--jl-radius-md);
  background: var(--surface-card);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.jl-accordion { border-top: 1px solid var(--border-subtle); }

.jl-accordion__item { border-bottom: 1px solid var(--border-subtle); }

.jl-accordion__trigger {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jl-space-4);
  padding: var(--jl-space-5) 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--jl-font-display);
  font-size: var(--jl-size-heading-sm);
  font-weight: var(--jl-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  cursor: pointer;
}

.jl-accordion__icon {
  flex: none;
  color: var(--text-brand);
  font-family: var(--jl-font-mono);
  font-size: var(--jl-size-heading-lg);
  line-height: 1;
  transition: transform var(--jl-dur-base) var(--jl-ease-out);
}

.jl-accordion__trigger[aria-expanded="true"] .jl-accordion__icon { transform: rotate(45deg); }

.jl-accordion__panel {
  padding: 0 0 var(--jl-space-5);
  color: var(--text-secondary);
  max-width: var(--jl-measure);
}

/* O recolhimento depende inteiramente desta regra — sem ela todo painel
   fica visível e o clique só gira o ícone. Fechado é o estado padrão do
   HTML (parceiro de aria-expanded="false" na maioria dos itens); só o
   primeiro item do FAQ nasce aberto. */
.jl-accordion__trigger[aria-expanded="false"] + .jl-accordion__panel {
  display: none;
}

/* --------------------------------------------------------------------------
   CONTAGEM REGRESSIVA
   Vive sobre a faixa institucional marinho. Só publique com prazo real:
   contador que reinicia sozinho destrói a confiança que o bloco de
   credenciamento constrói — e essa confiança é o produto.
   -------------------------------------------------------------------------- */
.jl-countdown { display: flex; gap: var(--jl-space-3); }

.jl-countdown__cell {
  min-width: 72px;
  padding: var(--jl-space-3);
  border-radius: var(--jl-radius-md);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-inverse);
  text-align: center;
}

.jl-countdown__value {
  display: block;
  font-family: var(--jl-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--jl-size-heading-lg);
  font-weight: var(--jl-weight-bold);
  line-height: 1.2;
  color: var(--text-on-inverse);
}

.jl-countdown__unit {
  display: block;
  font-size: var(--jl-size-eyebrow);
  letter-spacing: var(--jl-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-inverse-muted);
}

/* --------------------------------------------------------------------------
   CAMPO DE FORMULÁRIO
   Único lugar onde os utilitários de interface (vermelho, verde) aparecem.
   Erro diz o que houve e como resolver — nunca só a borda vermelha.
   -------------------------------------------------------------------------- */
.jl-field { display: flex; flex-direction: column; gap: var(--jl-space-2); }

.jl-field__label {
  font-size: var(--jl-size-body-sm);
  font-weight: var(--jl-weight-semibold);
  color: var(--text-primary);
}

.jl-field__input {
  width: 100%;
  padding: var(--jl-space-3) var(--jl-space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--jl-radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--jl-size-body);
  transition: border-color var(--jl-dur-base) var(--jl-ease-out);
}

.jl-field__input::placeholder { color: var(--text-secondary); }
.jl-field__input:hover { border-color: var(--border-strong); }
.jl-field[data-invalid="true"] .jl-field__input { border-color: var(--state-danger); }

.jl-field__hint { font-size: var(--jl-size-caption); color: var(--text-secondary); }

.jl-field__error {
  display: flex;
  align-items: center;
  gap: var(--jl-space-2);
  font-size: var(--jl-size-caption);
  color: var(--state-danger);
}

/* --------------------------------------------------------------------------
   BARRA FIXA DE CONVERSÃO (mobile)
   -------------------------------------------------------------------------- */
.jl-actionbar {
  position: sticky;
  bottom: 0;
  z-index: var(--jl-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jl-space-4);
  padding: var(--jl-space-3) var(--jl-space-4);
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 24px rgba(6, 8, 40, 0.16);
}

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   -------------------------------------------------------------------------- */
.jl-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jl-center { text-align: center; }
.jl-center .jl-body,
.jl-center .jl-body-lg { margin-inline: auto; }

.jl-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;
}