/* Componentes de UX compartilhados. Cada site define as variáveis --ux-* com as próprias cores.
   Espaçamentos na escala Fibonacci (.25 .5 .75 1 1.5 2 3 4 rem). */
@layer ux {
  :root {
    --ux-1: .25rem; --ux-2: .5rem; --ux-3: .75rem; --ux-5: 1rem; --ux-8: 1.5rem; --ux-13: 2rem; --ux-21: 3rem;
    --ux-accent: #A88B5E; --ux-ink: #1E1F21; --ux-bg: #F2F1EE; --ux-card: #FBFAF8; --ux-line: rgba(0, 0, 0, .12); --ux-on-ink: #FBFAF8;
    --ux-radius: 1rem; --ux-ease: cubic-bezier(.22, 1, .36, 1);
  }

  /* Acessibilidade: link "pular para o conteúdo" aparece ao receber foco do teclado */
  .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ux-skip { position: absolute; left: var(--ux-5); top: -4rem; z-index: 100; background: var(--ux-ink); color: var(--ux-on-ink); padding: var(--ux-3) var(--ux-8); border-radius: var(--ux-radius); text-decoration: none; font-weight: 600; transition: top .2s; }
  .ux-skip:focus { top: var(--ux-5); }
  :where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 3px; }

  /* Cabeçalho ao rolar */
  .top.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
  body.menu-open { overflow: hidden; }

  /* Progresso de leitura */
  .ux-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--ux-accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; }

  /* Sumário do artigo */
  .ux-toc { background: var(--ux-card); border: 1px solid var(--ux-line); border-radius: var(--ux-radius); padding: var(--ux-8); margin: 0 0 var(--ux-21); }
  .ux-toc[hidden] { display: none; }
  .ux-toc summary { cursor: pointer; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--ux-accent); list-style: none; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; }
  .ux-toc summary::-webkit-details-marker { display: none; }
  .ux-toc summary::after { content: "+"; font-size: 1.25rem; transition: transform .3s var(--ux-ease); }
  .ux-toc[open] summary::after { transform: rotate(45deg); }
  .ux-toc ol { margin: var(--ux-3) 0 0; padding-left: var(--ux-8); display: grid; gap: var(--ux-2); }
  .ux-toc a { text-decoration: none; color: inherit; opacity: .8; display: inline-block; padding-block: var(--ux-1); }
  .ux-toc a:hover, .ux-toc a.is-current { opacity: 1; color: var(--ux-accent); }
  .article h2 { scroll-margin-top: 6rem; position: relative; }
  .ux-anchor { margin-left: var(--ux-3); font-size: .7em; text-decoration: none; color: var(--ux-accent); opacity: 0; transition: opacity .2s; }
  .article h2:hover .ux-anchor, .ux-anchor:focus-visible { opacity: 1; }

  /* Compartilhar */
  .ux-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ux-3); margin: var(--ux-13) 0; padding-block: var(--ux-8); border-block: 1px solid var(--ux-line); }
  .ux-share > span { font-size: .875rem; font-weight: 600; margin-right: var(--ux-2); }
  .ux-share a, .ux-share button { font: inherit; font-size: .875rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--ux-2); padding: var(--ux-2) var(--ux-8); border-radius: 9999px; border: 1px solid var(--ux-line); background: var(--ux-card); color: var(--ux-ink); text-decoration: none; cursor: pointer; transition: border-color .2s, transform .2s; }
  .ux-share a:hover, .ux-share button:hover { border-color: var(--ux-accent); transform: translateY(-1px); }

  /* CTA dentro do artigo */
  .ux-cta { margin: var(--ux-21) 0; padding: var(--ux-13); border-radius: var(--ux-radius); background: var(--ux-ink); color: var(--ux-on-ink); display: grid; gap: var(--ux-5); }
  .ux-cta h2, .ux-cta h3 { margin: 0 !important; color: var(--ux-on-ink); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
  .ux-cta p { margin: 0; color: var(--ux-on-ink); opacity: .8; }
  .ux-cta .btn { justify-self: start; }

  /* Busca e filtros do blog */
  .ux-filter { display: grid; gap: var(--ux-8); margin-top: var(--ux-21); }
  .ux-search { position: relative; max-width: 32rem; }
  .ux-search input { width: 100%; font: inherit; min-height: 3rem; padding: var(--ux-3) var(--ux-8) var(--ux-3) 2.75rem; border-radius: 9999px; border: 1px solid var(--ux-line); background: var(--ux-card); color: var(--ux-ink); }
  .ux-search svg { position: absolute; left: var(--ux-5); top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }
  .ux-chips { display: flex; flex-wrap: wrap; gap: var(--ux-2); }
  .ux-chips button { font: inherit; font-size: .875rem; min-height: 2.75rem; padding: var(--ux-2) var(--ux-8); border-radius: 9999px; border: 1px solid var(--ux-line); background: transparent; color: var(--ux-ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
  .ux-chips button:hover { border-color: var(--ux-accent); }
  .ux-chips button[aria-pressed="true"] { background: var(--ux-ink); color: var(--ux-on-ink); border-color: var(--ux-ink); }
  .ux-count { font-size: .875rem; opacity: .7; }
  .ux-empty { padding: var(--ux-13); border: 1px dashed var(--ux-line); border-radius: var(--ux-radius); text-align: center; }
  .ux-empty[hidden], [data-cat][hidden] { display: none !important; }

  /* Ferramentas das perguntas frequentes */
  .ux-faq-tools { display: flex; flex-wrap: wrap; gap: var(--ux-3); align-items: center; margin-top: var(--ux-13); }
  .ux-faq-tools .ux-search { flex: 1 1 18rem; }
  .ux-faq-tools button { font: inherit; font-size: .875rem; min-height: 3rem; padding: var(--ux-2) var(--ux-8); border-radius: 9999px; border: 1px solid var(--ux-line); background: var(--ux-card); color: var(--ux-ink); cursor: pointer; }
  details[hidden] { display: none; }

  /* Barra fixa de agendamento no celular */
  .ux-sticky { display: none; }
  @media (max-width: 48rem) {
    .ux-sticky { display: flex; position: fixed; left: var(--ux-3); right: var(--ux-3); bottom: calc(var(--ux-3) + env(safe-area-inset-bottom, 0px)); z-index: 40; gap: var(--ux-2); padding: var(--ux-2); border-radius: 9999px; background: var(--ux-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transform: translateY(160%); transition: transform .4s var(--ux-ease); }
    .ux-sticky.is-on { transform: none; }
    .ux-sticky a { flex: 1; min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: var(--ux-2); border-radius: 9999px; text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--ux-on-ink); }
    .ux-sticky a.is-main { background: var(--ux-accent); color: var(--ux-ink); }
    .ux-sticky svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
    body:has(.ux-sticky) .wa { display: none; }
    body:has(.ux-sticky) { padding-bottom: 5rem; }
    .ux-top { bottom: 5.5rem !important; }
  }

  /* Voltar ao topo */
  .ux-top { position: fixed; right: var(--ux-8); bottom: 6rem; z-index: 35; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--ux-line); background: var(--ux-card); color: var(--ux-ink); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: translateY(var(--ux-5)); pointer-events: none; transition: opacity .3s, transform .3s var(--ux-ease); box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
  .ux-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .ux-top svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }

  /* Faixa de confiança */
  .ux-trust { display: flex; flex-wrap: wrap; gap: var(--ux-3) var(--ux-8); margin-top: var(--ux-13); padding-top: var(--ux-8); border-top: 1px solid var(--ux-line); font-size: .875rem; }
  .ux-trust span { display: inline-flex; align-items: center; gap: var(--ux-2); }
  .ux-trust span::before { content: ""; width: var(--ux-2); height: var(--ux-2); border-radius: 50%; background: var(--ux-accent); flex: none; }

  /* Mapa / como chegar */
  .ux-map { display: inline-flex; align-items: center; gap: var(--ux-2); min-height: 2.75rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

  /* Linha do tempo das etapas */
  .ux-timeline { list-style: none; padding: 0 !important; margin: var(--ux-13) 0 !important; display: grid; gap: 0 !important; counter-reset: t; }
  .ux-timeline li { counter-increment: t; position: relative; padding: 0 0 var(--ux-13) var(--ux-21); border-left: 1px solid var(--ux-line); margin-left: 1.25rem; }
  .ux-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
  .ux-timeline li::before { content: counter(t); position: absolute; left: -1.25rem; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ux-ink); color: var(--ux-on-ink); font-weight: 700; font-size: .875rem; }

  /* Revelação ao rolar */
  .ux-reveal-on [data-reveal] { opacity: 0; transform: translateY(var(--ux-8)); transition: opacity .8s var(--ux-ease), transform .8s var(--ux-ease); }
  .ux-reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

  /* Página não encontrada */
  .ux-404 { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--ux-21) var(--ux-8); }
  .ux-404 b { display: block; font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--ux-accent); font-weight: 400; }
  .ux-404 .links { display: flex; flex-wrap: wrap; gap: var(--ux-3); justify-content: center; margin-top: var(--ux-13); }

  /* Impressão de artigos: sem navegação e com links visíveis */
  @media print {
    .top, .nav, .foot, footer, .wa, .ux-sticky, .ux-top, .ux-progress, .ux-share, .ux-toc, .ux-cta, .cta, .burger, .menu { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .refs a::after { content: " (" attr(href) ")"; font-size: .8em; }
  }
}