/* Tatuí Tech · páginas internas (cases e futuras páginas). Carregar depois de base.css e header.css.
   O header global é fixo: o conteúdo começa abaixo dele (altura do header + área segura) e as âncoras param antes dele. */
/* Páginas internas começam logo abaixo do header e podem ser curtas: a cápsula entra assim que o conteúdo começa a passar por baixo dele */
:root { --header-threshold: 16px; }
html { scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px); }
.page { padding: calc(var(--header-h) + env(safe-area-inset-top) + 12px) max(var(--gutter), env(safe-area-inset-right)) 96px max(var(--gutter), env(safe-area-inset-left)); }
.page__context { margin: 0 0 40px; }
@media (min-width: 900px) and (min-height: 560px) { .page { padding-top: calc(var(--header-h) + 24px); } .page__context { margin-bottom: 64px; } }

/* Voltar (navegação contextual, abaixo do header): ícone Lucide arrow-left.
   O link nunca se move nem muda de tamanho; no hover a seta sai pela esquerda e entra de novo dentro do círculo,
   e o texto ganha sublinhado; na pressão a superfície do círculo preenche e a seta comprime. */
.backlink { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-right: 4px; border-radius: 999px; color: rgb(245 242 237 / .82); text-decoration: none; font-weight: 600; font-size: 15px; transition: color var(--dur-fast) var(--ease-out); }
.backlink__ico { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgb(245 242 237 / .24); overflow: hidden; isolation: isolate; transition: border-color var(--dur-fast) var(--ease-out); }
.backlink__ico::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: rgb(245 242 237 / .14); transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.backlink__ico svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: transform var(--dur-reveal) var(--ease-out); }
.backlink__ico svg + svg { transform: translateX(160%); }
.backlink__t { position: relative; }
.backlink__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-base) var(--ease-out); }
.backlink:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.backlink:focus-visible, .backlink.is-pressed { color: var(--off); }
.backlink:focus-visible .backlink__ico { border-color: rgb(245 242 237 / .5); }
.backlink:focus-visible .backlink__ico svg:first-child { transform: translateX(-160%); } .backlink:focus-visible .backlink__ico svg + svg { transform: none; }
.backlink:focus-visible .backlink__t::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
  .backlink:hover { color: var(--off); }
  .backlink:hover .backlink__ico { border-color: rgb(245 242 237 / .5); }
  .backlink:hover .backlink__ico svg:first-child { transform: translateX(-160%); } .backlink:hover .backlink__ico svg + svg { transform: none; }
  .backlink:hover .backlink__t::after { transform: scaleX(1); transform-origin: left center; }
}
.backlink:active .backlink__ico::before, .backlink.is-pressed .backlink__ico::before { transform: none; transition-duration: var(--dur-press); }
.backlink:active .backlink__ico svg, .backlink.is-pressed .backlink__ico svg { scale: .86; transition-duration: var(--dur-press); }