/* [CELULA: kairogen-ui] components.css — componentes de interface do site Ramos Atelier */
/* Depende de css/tokens.css e css/base.css (carregar nesta ordem). */
/* Nenhum token e redefinido aqui. Valores derivados locais usam prefixo --k- e ficam no escopo do componente. */
/* Convencao de substituicao: cada bloco abre com um marcador [KAIROGEN-SLOT: nome]. */
/* O integrador pode trocar o conteudo entre o marcador e o proximo sem tocar nos seletores raiz. */

/* ==========================================================================
   [CELULA: kairogen-ui] rule-gold — filete decorativo reutilizavel
   [KAIROGEN-SLOT: rule-gold]

   HTML de exemplo:
   <span class="rule-gold" aria-hidden="true"></span>
   <span class="rule-gold rule-gold--short" aria-hidden="true"></span>
   <span class="rule-gold rule-gold--vertical" aria-hidden="true"></span>
   ========================================================================== */

.rule-gold {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--gradient-gold);
  opacity: 0.75;
}

.rule-gold--short {
  width: var(--sp-7);
}

.rule-gold--vertical {
  width: 1px;
  height: 100%;
  min-height: var(--sp-6);
}

.rule-gold--faint {
  opacity: 0.35;
}

/* ==========================================================================
   [CELULA: kairogen-ui] btn — botoes retos com preenchimento dourado pela esquerda
   [KAIROGEN-SLOT: btn]

   HTML de exemplo:
   <a class="btn btn--gold" href="https://wa.me/5511972146564">
     <span class="btn__label">Falar com o atelier</span>
   </a>
   <button class="btn btn--ghost" type="button">
     <span class="btn__label">Ver cursos</span>
   </button>
   ========================================================================== */

.btn {
  --k-btn-border: var(--line);
  --k-btn-ink: var(--offwhite);
  --k-btn-ink-hover: var(--ink-900);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.875rem;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--k-btn-border);
  border-radius: var(--radius-0);
  background-color: transparent;
  color: var(--k-btn-ink);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    color var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo);
}

/* camada de preenchimento: entra da esquerda, sem alterar o fluxo */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.btn:hover,
.btn:focus-visible {
  color: var(--k-btn-ink-hover);
  border-color: var(--gold-500);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn:active {
  transform: translateY(1px);
}

.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn__label {
  position: relative;
  display: inline-block;
}

.btn--gold {
  --k-btn-border: var(--gold-500);
  --k-btn-ink: var(--gold-100);
}

.btn--ghost {
  --k-btn-border: var(--line);
  --k-btn-ink: var(--offwhite);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  --k-btn-ink-hover: var(--ink-900);
}

.btn--compact {
  min-height: 2.375rem;
  padding: var(--sp-2) var(--sp-4);
}

@media (max-width: 480px) {
  .btn {
    padding-inline: var(--sp-4);
    letter-spacing: 0.14em;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] site-header — header fixo, blur ao rolar, esconde por direcao
   [KAIROGEN-SLOT: site-header]

   HTML de exemplo:
   <header class="site-header" data-header>
     <div class="site-header__inner">
       <a class="site-header__brand" href="/index.html" aria-label="Ramos Atelier, pagina inicial">
         <img class="logo-mark logo-mark--light" src="assets/logo/ramos-atelier-logo-light.png"
              alt="Ramos Atelier" width="242" height="138">
       </a>
       <nav class="site-header__nav" aria-label="Navegacao principal">
         <ul class="site-header__list">
           <li><a class="nav-link" href="/index.html">Inicio</a></li>
           <li><a class="nav-link" href="/pages/sobre.html">Sobre</a></li>
           <li><a class="nav-link" href="/pages/cursos.html">Cursos e Oficinas</a></li>
           <li><a class="nav-link" href="/pages/momento-alianca.html">Momento Alianca</a></li>
           <li><a class="nav-link" href="/pages/coworking.html">Coworking</a></li>
           <li><a class="nav-link" href="/pages/galeria.html">Galeria</a></li>
         </ul>
       </nav>
       <div class="site-header__actions">
         <a class="btn btn--gold btn--compact site-header__cta" href="https://wa.me/5511972146564">
           <span class="btn__label">Falar com o atelier</span>
         </a>
         <button class="site-header__toggle" type="button"
                 data-nav-toggle aria-expanded="false" aria-controls="nav-drawer">
           <span class="site-header__toggle-bars" aria-hidden="true"></span>
           <span class="site-header__toggle-text">Menu</span>
         </button>
       </div>
     </div>
   </header>
   ========================================================================== */

.site-header {
  --k-header-height: 5.5rem;

  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background-color: transparent;
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    background-color var(--dur-base) var(--ease-standard),
    backdrop-filter var(--dur-base) var(--ease-standard);
  will-change: transform;
}

/* filete dourado inferior: so aparece com a barra em estado rolado */
.site-header::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
}

.site-header.is-scrolled {
  background-color: rgba(8, 7, 10, 0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.site-header.is-scrolled::after {
  opacity: 0.9;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  min-height: var(--k-header-height);
  padding-inline: var(--gutter-mobile);
  padding-block: var(--sp-3);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  opacity: 0.95;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.site-header__brand:hover {
  opacity: 1;
}

/* ratio travado: altura fluida, proporcao 242/138 preservada pelo utilitario .logo-mark */
.site-header__brand .logo-mark {
  height: clamp(2rem, 3.4vw, 2.75rem);
}

.site-header__nav {
  display: none;
  justify-content: center;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
}

.site-header__cta {
  display: none;
}

/* botao de menu mobile: barras finas, sem icone importado */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-header__toggle-bars {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1px;
  background-color: var(--gold-300);
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background-color: var(--gold-300);
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.site-header__toggle-bars::before {
  inset-block-start: -6px;
}

.site-header__toggle-bars::after {
  inset-block-start: 6px;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars {
  background-color: transparent;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .site-header__inner {
    padding-inline: var(--gutter);
  }

  .site-header__nav {
    display: flex;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .site-header__toggle {
    display: none;
  }
}

@media (max-width: 360px) {
  .site-header__toggle-text {
    display: none;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] nav-link — sublinhado dourado que cresce da esquerda
   [KAIROGEN-SLOT: nav-link]

   HTML de exemplo:
   <a class="nav-link" href="/pages/cursos.html">Cursos e Oficinas</a>
   <a class="nav-link" href="/pages/sobre.html" aria-current="page">Sobre</a>
   ========================================================================== */

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-standard);
}

.nav-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--gold-100);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* estado de pagina corrente: filete permanente, sem depender de hover */
.nav-link[aria-current='page'] {
  color: var(--gold-300);
}

.nav-link[aria-current='page']::after {
  transform: scaleX(1);
}

/* ==========================================================================
   [CELULA: kairogen-ui] nav-drawer — menu mobile em tela cheia
   [KAIROGEN-SLOT: nav-drawer]

   HTML de exemplo:
   <div class="nav-drawer" id="nav-drawer" data-nav-drawer aria-hidden="true">
     <div class="nav-drawer__head">
       <img class="logo-mark logo-mark--light" src="assets/logo/ramos-atelier-logo-light.png"
            alt="Ramos Atelier" width="242" height="138">
       <button class="nav-drawer__close" type="button" data-nav-close>Fechar</button>
     </div>
     <nav class="nav-drawer__nav" aria-label="Navegacao principal">
       <ul class="nav-drawer__list">
         <li class="nav-drawer__item"><a class="nav-drawer__link" href="/index.html">Inicio</a></li>
         <li class="nav-drawer__item"><a class="nav-drawer__link" href="/pages/sobre.html">Sobre</a></li>
         <li class="nav-drawer__item"><a class="nav-drawer__link" href="/pages/cursos.html">Cursos e Oficinas</a></li>
         <li class="nav-drawer__item"><a class="nav-drawer__link" href="/pages/momento-alianca.html">Momento Alianca</a></li>
         <li class="nav-drawer__item"><a class="nav-drawer__link" href="/pages/coworking.html">Coworking</a></li>
         <li class="nav-drawer__item"><a class="nav-drawer__link" href="/pages/galeria.html">Galeria</a></li>
       </ul>
     </nav>
     <div class="nav-drawer__foot">
       <a class="nav-drawer__phone" href="tel:+5511972146564">11 97214 6564</a>
       <p class="nav-drawer__hours">Dias uteis 9h as 18h. Sabados 9h as 14h.</p>
     </div>
   </div>
   ========================================================================== */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background-color: var(--ink-900);
  padding-inline: var(--gutter-mobile);
  padding-block: var(--sp-4) var(--sp-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition:
    opacity var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo),
    visibility 0s linear var(--dur-base);
}

.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
}

.nav-drawer__head .logo-mark {
  height: 2.25rem;
}

.nav-drawer__close {
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-drawer__nav {
  margin-block-start: var(--sp-6);
}

.nav-drawer__item {
  position: relative;
}

/* filete dourado entre os itens, nao depois do ultimo */
.nav-drawer__item + .nav-drawer__item::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--gradient-gold);
  opacity: 0.28;
}

.nav-drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  color: var(--offwhite);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition:
    color var(--dur-base) var(--ease-standard),
    padding-inline-start var(--dur-base) var(--ease-out-expo);
}

.nav-drawer__link:hover,
.nav-drawer__link:focus-visible {
  color: var(--gold-100);
  padding-inline-start: var(--sp-3);
}

.nav-drawer__link[aria-current='page'] {
  color: var(--gold-300);
}

.nav-drawer__foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.nav-drawer__phone {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--gold-300);
}

.nav-drawer__hours {
  font-size: var(--fs-small);
  color: var(--muted);
}

@media (min-width: 1024px) {
  .nav-drawer {
    display: none;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] hero — bloco de abertura com video ao fundo
   [KAIROGEN-SLOT: hero]

   HTML de exemplo:
   <section class="hero vignette" data-hero>
     <div class="hero__media" aria-hidden="true">
       <!-- [CELULA: hyperframes-media] slot de video: bancada, macarico, macro -->
       <video class="hero__video" muted playsinline preload="metadata"
              poster="assets/video/hero-poster.jpg">
         <source src="assets/video/hero.mp4" type="video/mp4">
       </video>
     </div>
     <div class="hero__content">
       <p class="section-label">Sao Paulo, desde 2013</p>
       <h1 class="hero__title">Ourivesaria de bancada</h1>
       <p class="hero__lede">Escola, atelier e bancada compartilhada no centro de Sao Paulo.</p>
       <div class="hero__actions">
         <a class="btn btn--gold" href="/pages/cursos.html"><span class="btn__label">Cursos e oficinas</span></a>
         <a class="btn btn--ghost" href="/pages/sobre.html"><span class="btn__label">Sobre o atelier</span></a>
       </div>
     </div>
     <a class="hero__scroll" href="#capitulo-1">
       <span class="hero__scroll-text">Rolar</span>
       <span class="hero__scroll-line" aria-hidden="true"></span>
     </a>
   </section>
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: end;
  min-height: 100svh;
  padding-inline: var(--gutter-mobile);
  padding-block-start: var(--sp-9);
  padding-block-end: var(--sp-6);
  overflow: hidden;
  background-color: var(--ink-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.hero__video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* vinheta propria do hero, somada a .vignette do base.css */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.6) 100%);
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  grid-row: 1;
  align-self: end;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block-end: var(--sp-6);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  max-width: 16ch;
}

.hero__lede {
  max-width: 44ch;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}

/* indicador de rolagem discreto: linha que percorre e rotulo em caixa alta */
.hero__scroll {
  position: relative;
  z-index: var(--z-content);
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  color: var(--gold-300);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__scroll-line {
  position: relative;
  display: block;
  width: var(--sp-8);
  height: 1px;
  background-color: rgba(217, 190, 127, 0.25);
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  background: var(--gradient-gold);
  animation: k-hero-scroll-sweep 2.4s var(--ease-in-out-cubic) infinite;
}

@keyframes k-hero-scroll-sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(250%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after {
    animation: none;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-inline: var(--gutter);
    padding-block-end: var(--sp-7);
  }

  .hero__content {
    padding-block-end: var(--sp-7);
  }
}

@media (max-width: 480px) {
  .hero__title {
    max-width: 12ch;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] chapter — secao de scrollytelling com fundo de video
   [KAIROGEN-SLOT: chapter]

   HTML de exemplo:
   <div class="chapters">
     <section class="chapter" id="capitulo-1"
              data-pin-sequence="300" data-scrub-video>
       <!-- [CELULA: hyperframes-media] slot de video: a tag e injetada em tempo de execucao -->
       <div class="chapter__media" data-media-slot="fundicao" data-pin-bg aria-hidden="true"></div>
       <div class="chapter__inner">
         <div class="chapter__panel">
           <div data-pin-step>
             <p class="chapter__number">01</p>
             <h2 class="chapter__title">O metal vira liquido</h2>
           </div>
           <div data-pin-step>
             <p class="chapter__text">O ouro funde a 1.064 graus.</p>
           </div>
         </div>
       </div>
     </section>
   </div>

   O painel nao e um retangulo solido sobre o video. E texto off-white lendo contra
   o proprio fundo, ancorado por um filete a esquerda: uma caixa clara tampa a imagem
   e quebra a leitura de fundo escuro do site.
   ========================================================================== */

.chapters {
  position: relative;
}

/* overflow recorta o fundo enquanto o pin segura a secao na tela; isolation prende
   media e painel ao contexto de empilhamento do proprio capitulo */
.chapter {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-inline: var(--gutter-mobile);
  padding-block: var(--section-padding-block);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--ink-800);
}

/* absoluto, nunca fixed: com tres capitulos na mesma pagina, tres camadas fixas
   cobrem a viewport ao mesmo tempo e a ultima do DOM ganha, exibindo o video errado.
   Quem segura o fundo na tela e o pin do ScrollTrigger, nao o position. */
.chapter__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

/* seletor de elemento, nao de classe: quem cria a tag <video> e a celula
   hyperframes-media, que nao conhece .chapter__video — o elemento nasce sem classe
   alguma. Pelo elemento a regra vale para o video injetado e para o <img> de fallback. */
.chapter__media video,
.chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.chapter__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.85) 100%);
}

.chapter__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

/* variante espelhada para alternar o ritmo entre capitulos */
.chapter--right .chapter__inner {
  justify-content: flex-end;
}

/* coluna estreita, sem fundo proprio. display: grid porque as camadas de
   [data-pin-step] fazem crossfade sobrepostas: no fluxo normal elas empilhariam
   verticalmente e o pin mostraria as duas ao mesmo tempo. */
.chapter__panel {
  --k-panel-pad-block: var(--sp-6);

  position: relative;
  display: grid;
  width: 100%;
  max-width: 40rem;
  padding: var(--k-panel-pad-block) 0 var(--k-panel-pad-block) var(--sp-5);
  border-left: 1px solid var(--line);
  color: var(--offwhite);
}

/* trecho dourado sobreposto ao filete de linha, na altura da numeracao */
.chapter__panel::before {
  content: '';
  position: absolute;
  left: -1px;
  top: var(--k-panel-pad-block);
  width: 1px;
  height: var(--sp-7);
  background: var(--gradient-gold);
}

.chapter__panel > [data-pin-step] {
  grid-area: 1 / 1;
  align-self: center;
}

/* sem a camada de animacao a sobreposicao esconderia conteudo: os steps voltam a fluir */
.is-static .chapter__panel > [data-pin-step] {
  grid-area: auto;
}

.chapter__number {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold-300);
}

/* filete dourado ao lado da numeracao */
.chapter__number::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--gradient-gold);
}

.chapter__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--offwhite);
}

.chapter__text {
  margin-block-start: var(--sp-4);
  max-width: 46ch;
  color: var(--offwhite);
}

.chapter__text + .chapter__text {
  margin-block-start: var(--sp-3);
}

/* legibilidade sobre imagem em movimento sem recorrer a caixa solida */
.chapter__number,
.chapter__title,
.chapter__text {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.75);
}

@media (min-width: 1024px) {
  .chapter {
    padding-inline: var(--gutter);
  }
}

@media (max-width: 360px) {
  .chapter__panel {
    --k-panel-pad-block: var(--sp-5);

    padding-inline-start: var(--sp-4);
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] course-grid / course-card — grade editorial assimetrica de cursos
   [KAIROGEN-SLOT: course-grid]

   HTML de exemplo:
   <div class="course-filters" data-course-filters role="group" aria-label="Filtrar cursos por categoria">
     <button class="course-filters__btn" type="button" data-cat="todos" aria-pressed="true">Todos</button>
     <button class="course-filters__btn" type="button" data-cat="tecnica" aria-pressed="false">Tecnica</button>
     <button class="course-filters__btn" type="button" data-cat="pedras" aria-pressed="false">Pedras</button>
   </div>
   <div class="course-grid" data-course-grid>
     <article class="course-card" data-cat="tecnica">
       <p class="course-card__index">01</p>
       <h3 class="course-card__title">Joalheria Basico</h3>
       <p class="course-card__desc">Serra, lima, solda e acabamento em prata 950.</p>
       <a class="course-card__link" href="/pages/cursos.html#joalheria-basico">
         <span class="course-card__link-label">Ver programa</span>
       </a>
     </article>
   </div>
   ========================================================================== */

.course-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
}

.course-filters__btn {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.course-filters__btn:hover {
  color: var(--gold-100);
  border-color: var(--gold-700);
}

.course-filters__btn[aria-pressed='true'] {
  color: var(--ink-900);
  border-color: var(--gold-500);
  background-color: var(--gold-300);
}

.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.course-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'index title'
    'index desc'
    'index link';
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  background-color: var(--ink-700);
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

/* filete dourado no rodape do cartao: parte curto e se estende no hover */
.course-card::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: var(--sp-6);
  height: 1px;
  background: var(--gradient-gold);
  transition: width var(--dur-slow) var(--ease-out-expo);
}

.course-card:hover,
.course-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold-700);
  background-color: var(--ink-600);
}

.course-card:hover::after,
.course-card:focus-within::after {
  width: 100%;
}

.course-card[hidden] {
  display: none;
}

/* cartao largo: ocupa a linha inteira e quebra a simetria do ritmo editorial */
.course-card--wide {
  grid-column: 1 / -1;
}

.course-card__index {
  grid-area: index;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}

.course-card__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--offwhite);
}

/* descricao em uma linha: corta com reticencia em vez de quebrar o ritmo da grade */
.course-card__desc {
  grid-area: desc;
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-card__link {
  grid-area: link;
  justify-self: start;
  margin-block-start: var(--sp-2);
  color: var(--gold-300);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* area de clique estendida ao cartao inteiro, mantendo um unico alvo acessivel */
.course-card__link::before {
  content: '';
  position: absolute;
  inset: 0;
}

.course-card__link-label {
  position: relative;
  display: inline-block;
  padding-block-end: 2px;
  background-image: var(--gradient-gold);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size var(--dur-base) var(--ease-out-expo);
}

.course-card:hover .course-card__link-label,
.course-card__link:focus-visible .course-card__link-label {
  background-size: 100% 1px;
}

@media (min-width: 768px) {
  .course-grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    row-gap: var(--sp-5);
  }

  /* ritmo editorial 7/5 e 5/7 alternado, com desloques verticais */
  .course-card {
    grid-column: span 6;
    padding: var(--sp-6) var(--sp-5);
  }

  .course-card:nth-child(4n + 1) { grid-column: span 7; }
  .course-card:nth-child(4n + 2) { grid-column: span 5; margin-block-start: var(--sp-6); }
  .course-card:nth-child(4n + 3) { grid-column: span 5; }
  .course-card:nth-child(4n + 4) { grid-column: span 7; margin-block-start: var(--sp-5); }

  /* seletor duplicado de proposito: a classe sozinha tem menos peso que os
     :nth-child acima e o modificador nunca chegava a valer. O desloque vertical do
     ritmo tambem sai — um cartao de linha inteira nao tem par de quem se afastar. */
  .course-card.course-card--wide {
    grid-column: 1 / -1;
    margin-block-start: 0;
  }
}

@media (max-width: 360px) {
  .course-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      'index'
      'title'
      'desc'
      'link';
    row-gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-3);
  }

  .course-card__desc {
    white-space: normal;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] pillar-card — as tres frentes do atelier
   [KAIROGEN-SLOT: pillar-card]

   HTML de exemplo:
   <div class="pillar-grid">
     <a class="pillar-card" href="/pages/cursos.html">
       <img class="pillar-card__img" src="assets/img/escola.jpg" alt="Bancada de aula com limas e serras"
            width="900" height="1300" loading="lazy" decoding="async">
       <div class="pillar-card__body">
         <p class="pillar-card__kicker">Escola</p>
         <h3 class="pillar-card__title">Cursos e oficinas</h3>
         <p class="pillar-card__text">Quinze programas, da serra manual a cravacao de pedras.</p>
         <span class="pillar-card__cue">Ver cursos</span>
       </div>
     </a>
   </div>
   ========================================================================== */

.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.pillar-card {
  position: relative;
  display: block;
  min-height: clamp(24rem, 62vh, 40rem);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--ink-700);
  transition: border-color var(--dur-base) var(--ease-standard);
}

.pillar-card:hover,
.pillar-card:focus-visible {
  border-color: var(--gold-700);
}

.pillar-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transform: scale(1.02);
  transition:
    transform var(--dur-slower) var(--ease-out-expo),
    opacity var(--dur-slow) var(--ease-standard);
}

.pillar-card:hover .pillar-card__img,
.pillar-card:focus-visible .pillar-card__img {
  transform: scale(1.06);
  opacity: 0.45;
}

/* sobreposicao escura: garante leitura do texto sobre qualquer foto */
.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 8%, rgba(0, 0, 0, 0.15) 62%);
  transition: opacity var(--dur-base) var(--ease-standard);
}

.pillar-card__body {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
}

.pillar-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.pillar-card__kicker::before {
  content: '';
  width: var(--sp-5);
  height: 1px;
  background: var(--gradient-gold);
}

.pillar-card__title {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -0.015em;
}

/* revelacao de texto no hover: altura animada via grid 0fr para 1fr */
.pillar-card__text {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows var(--dur-slow) var(--ease-out-expo),
    opacity var(--dur-base) var(--ease-standard);
}

.pillar-card__text > * {
  min-height: 0;
}

.pillar-card:hover .pillar-card__text,
.pillar-card:focus-visible .pillar-card__text,
.pillar-card:focus-within .pillar-card__text {
  grid-template-rows: 1fr;
  opacity: 1;
}

.pillar-card__cue {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-100);
  transform: translateY(0.5rem);
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    opacity var(--dur-base) var(--ease-standard);
}

.pillar-card:hover .pillar-card__cue,
.pillar-card:focus-visible .pillar-card__cue,
.pillar-card:focus-within .pillar-card__cue {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
  }

  .pillar-card__body {
    padding: var(--sp-6) var(--sp-5);
  }

  /* desloque vertical do bloco central: quebra a simetria de tres colunas iguais */
  .pillar-card:nth-child(2) {
    margin-block-start: var(--sp-6);
  }
}

/* texto sempre visivel onde nao ha hover confiavel */
@media (hover: none) {
  .pillar-card__text {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .pillar-card__cue {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] timeline — linhagem 1950 / 2013 / hoje
   [KAIROGEN-SLOT: timeline]

   HTML de exemplo:
   <ol class="timeline">
     <li class="timeline__item">
       <p class="timeline__year">1950</p>
       <h3 class="timeline__title">Oficina no centro</h3>
       <p class="timeline__text">Ginez Ramos trabalha como ourives no centro de Sao Paulo.</p>
     </li>
     <li class="timeline__item">
       <p class="timeline__year">2013</p>
       <h3 class="timeline__title">Ramos Atelier</h3>
       <p class="timeline__text">Luciano Ramos deixa a publicidade e assume o oficio do pai.</p>
     </li>
     <li class="timeline__item">
       <p class="timeline__year">Hoje</p>
       <h3 class="timeline__title">Escola e bancada</h3>
       <p class="timeline__text">Cursos, Momento Alianca e coworking de bancada.</p>
     </li>
   </ol>
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding-inline-start: var(--sp-5);
}

/* eixo vertical dourado */
.timeline::before {
  content: '';
  position: absolute;
  inset-block: 0.35rem 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--gradient-gold);
  opacity: 0.5;
}

.timeline__item {
  position: relative;
}

/* marcador losangular sobre o eixo */
.timeline__item::before {
  content: '';
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: calc(var(--sp-5) * -1);
  width: 7px;
  height: 7px;
  background-color: var(--gold-500);
  transform: translateX(-3px) rotate(45deg);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}

.timeline__title {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 300;
}

.timeline__text {
  margin-block-start: var(--sp-2);
  max-width: 48ch;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
    padding-inline-start: 0;
    padding-block-start: var(--sp-5);
  }

  /* no desktop o eixo passa a ser horizontal, mantendo o gradiente canonico */
  .timeline::before {
    inset-block: 0 auto;
    inset-inline: 0;
    width: auto;
    height: 1px;
  }

  .timeline__item::before {
    inset-block-start: calc(var(--sp-5) * -1);
    inset-inline-start: 0;
    transform: translate(0, -3px) rotate(45deg);
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] step-list — os quatro passos do Momento Alianca
   [KAIROGEN-SLOT: step-list]

   HTML de exemplo:
   <ol class="step-list" data-step-list>
     <li class="step-list__item">
       <p class="step-list__num">01</p>
       <h3 class="step-list__title">Conversa</h3>
       <p class="step-list__text">Escolha do metal, largura e acabamento com o ourives.</p>
     </li>
     <li class="step-list__item">
       <p class="step-list__num">02</p>
       <h3 class="step-list__title">Fundicao</h3>
       <p class="step-list__text">O casal funde o metal e lamina a barra.</p>
     </li>
   </ol>
   ========================================================================== */

.step-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  counter-reset: step;
}

.step-list__item {
  position: relative;
  padding-inline-start: var(--sp-6);
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--k-stagger, 0) * 80ms);
}

/* realce progressivo ativado pela celula JS via IntersectionObserver */
.step-list__item.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* filete conector entre passos */
.step-list__item::before {
  content: '';
  position: absolute;
  inset-block: 0.4rem 0;
  inset-inline-start: 0.5rem;
  width: 1px;
  background: var(--gradient-gold);
  opacity: 0.35;
}

.step-list__item:last-child::before {
  inset-block-end: auto;
  height: 1.5rem;
}

.step-list__num {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gold-500);
  background-color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.step-list__title {
  font-size: var(--fs-h4);
  font-weight: 300;
}

.step-list__text {
  margin-block-start: var(--sp-2);
  max-width: 42ch;
  font-size: var(--fs-small);
  color: var(--muted);
}

@media (min-width: 900px) {
  .step-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
  }

  .step-list__item {
    padding-inline-start: 0;
    padding-block-start: var(--sp-5);
  }

  /* conector horizontal, interrompido antes do ultimo passo */
  .step-list__item::before {
    inset-block: 0 auto;
    inset-inline: 0;
    width: auto;
    height: 1px;
  }

  .step-list__item:last-child::before {
    inset-inline-end: auto;
    width: 2rem;
    height: 1px;
  }

  .step-list__num {
    inset-block-start: calc(var(--sp-5) * -0.35);
    padding-inline-end: var(--sp-2);
    text-align: start;
    width: auto;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] spec-table — ficha tecnica de maquinas e ferramentas
   [KAIROGEN-SLOT: spec-table]

   HTML de exemplo:
   <table class="spec-table" data-spec-table>
     <caption class="spec-table__caption">Bancada compartilhada, equipamentos disponiveis</caption>
     <thead>
       <tr>
         <th scope="col">Equipamento</th>
         <th scope="col">Especificacao</th>
         <th scope="col">Uso</th>
       </tr>
     </thead>
     <tbody>
       <tr class="spec-table__row">
         <th scope="row" data-label="Equipamento">Laminador</th>
         <td data-label="Especificacao">Cilindros planos e canaletas</td>
         <td data-label="Uso">Chapa e fio</td>
       </tr>
       <tr class="spec-table__row">
         <th scope="row" data-label="Equipamento">Politriz</th>
         <td data-label="Especificacao">Duas pontas, exaustao</td>
         <td data-label="Uso">Polimento</td>
       </tr>
     </tbody>
   </table>
   ========================================================================== */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.spec-table__caption {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-align: start;
}

.spec-table thead th {
  padding-block: var(--sp-2);
  padding-inline-end: var(--sp-4);
  border-block-end: 1px solid var(--gold-700);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-align: start;
}

.spec-table tbody th,
.spec-table tbody td {
  padding-block: var(--sp-3);
  padding-inline-end: var(--sp-4);
  border-block-end: 1px solid var(--line);
  font-weight: 300;
  text-align: start;
  vertical-align: top;
}

.spec-table tbody th {
  color: var(--offwhite);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  width: 34%;
}

.spec-table tbody td {
  color: var(--muted);
}

/* realce progressivo por linha, acionado pela celula JS */
.spec-table__row {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-expo),
    background-color var(--dur-fast) var(--ease-standard);
  transition-delay: calc(var(--k-stagger, 0) * 55ms);
}

.spec-table__row.is-in {
  opacity: 1;
  transform: translateY(0);
}

.spec-table__row:hover {
  background-color: var(--ink-700);
}

/* abaixo de 640px a tabela vira fichas empilhadas, com rotulo vindo de data-label */
@media (max-width: 640px) {
  .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .spec-table__row {
    display: grid;
    gap: var(--sp-1);
    padding-block: var(--sp-4);
    border-block-end: 1px solid var(--line);
  }

  .spec-table tbody th,
  .spec-table tbody td {
    width: auto;
    padding-block: var(--sp-1);
    padding-inline: 0;
    border-block-end: 0;
  }

  .spec-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 2px;
    font-size: var(--fs-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-700);
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] gallery-grid — mosaico assimetrico com legenda de ficha tecnica
   [KAIROGEN-SLOT: gallery-grid]

   HTML de exemplo:
   <div class="gallery-grid" data-gallery>
     <figure class="gallery-grid__item" tabindex="0">
       <img class="gallery-grid__img" data-src="assets/img/alianca-01.jpg"
            alt="Par de aliancas em ouro amarelo com acabamento fosco"
            width="1200" height="1500" decoding="async">
       <figcaption class="gallery-grid__caption">
         <span class="gallery-grid__caption-title">Aliancas lisas</span>
         <span class="gallery-grid__caption-spec">Ouro 18k, 4 mm, acabamento fosco</span>
       </figcaption>
     </figure>
   </div>
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* align-self: start e estrutural, nao cosmetico. Por padrao o item estica ate a
   altura do mais alto da mesma linha da grade; esticado, o contedor da legenda ganha
   altura propria enquanto suas faixas seguem em 0fr, e os dois filhos passam a ser
   desenhados no mesmo ponto de origem — sem que o overflow: hidden tenha o que
   recortar. Com start cada figura mantem a altura do proprio conteudo. */
.gallery-grid__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-self: start;
  margin: 0;
  background-color: var(--ink-700);
  border: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}

.gallery-grid__item:hover,
.gallery-grid__item:focus-visible {
  border-color: var(--gold-700);
}

/* altura ditada pelo aspect-ratio e limitada em svh: com height: 100% a altura sai
   so da largura da coluna e um item de tres colunas passa de 870px num container de
   1440px, cabendo duas fotos na tela inteira. O teto preserva a variacao de
   proporcao do mosaico e devolve a leitura de grade. */
.gallery-grid__img {
  width: 100%;
  height: auto;
  max-height: 46svh;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out-quart);
}

/* .is-loaded e aplicada pela celula JS ao concluir a carga preguicosa */
.gallery-grid__img.is-loaded {
  opacity: 1;
}

/* proporcoes variadas: o mosaico nao repete o mesmo enquadramento */
.gallery-grid__item:nth-child(5n + 1) .gallery-grid__img { aspect-ratio: 4 / 5; }
.gallery-grid__item:nth-child(5n + 2) .gallery-grid__img { aspect-ratio: 1 / 1; }
.gallery-grid__item:nth-child(5n + 3) .gallery-grid__img { aspect-ratio: 3 / 4; }
.gallery-grid__item:nth-child(5n + 4) .gallery-grid__img { aspect-ratio: 5 / 4; }
.gallery-grid__item:nth-child(5n + 5) .gallery-grid__img { aspect-ratio: 1 / 1; }

/* Legenda entra por baixo da imagem, sem lightbox. Duas armadilhas do truque
   0fr -> 1fr, ambas resolvidas aqui:

   1. O colapso so funciona com UM filho por faixa declarada. A legenda tem dois
      (titulo e ficha), entao com uma unica faixa o segundo cai numa linha implicita
      auto, que nunca colapsa, e a ficha vaza por cima do titulo. As duas faixas
      precisam ser declaradas nos dois estados.
   2. min-height: 0 zera a caixa de conteudo, nao o padding. Com padding vertical nos
      filhos sobram 24px no estado fechado, o suficiente para recortar as duas linhas
      pela metade. O padding vertical fica no contedor, que colapsa junto. */
.gallery-grid__caption {
  display: grid;
  grid-template-rows: 0fr 0fr;
  padding-block: 0;
  overflow: hidden;
  transition:
    grid-template-rows var(--dur-base) var(--ease-out-expo),
    padding-block var(--dur-base) var(--ease-out-expo);
}

.gallery-grid__item:hover .gallery-grid__caption,
.gallery-grid__item:focus-visible .gallery-grid__caption,
.gallery-grid__item:focus-within .gallery-grid__caption {
  grid-template-rows: 1fr 1fr;
  padding-block: var(--sp-3);
}

.gallery-grid__caption-title,
.gallery-grid__caption-spec {
  display: block;
  min-height: 0;
}

.gallery-grid__caption-title {
  padding-inline: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--offwhite);
}

.gallery-grid__caption-spec {
  padding-inline: var(--sp-3);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-4);
  }

  .gallery-grid__item { grid-column: span 2; }
  .gallery-grid__item:nth-child(7n + 1) { grid-column: span 3; }
  .gallery-grid__item:nth-child(7n + 2) { grid-column: span 3; }
  .gallery-grid__item:nth-child(7n + 5) { grid-column: span 4; }
  .gallery-grid__item:nth-child(7n + 6) { grid-column: span 2; }
}

/* legenda permanente onde nao ha hover confiavel */
@media (hover: none) {
  .gallery-grid__caption {
    grid-template-rows: 1fr 1fr;
    padding-block: var(--sp-3);
  }
}

@media (max-width: 360px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] site-footer — logo, navegacao, telefone e horarios
   [KAIROGEN-SLOT: site-footer]

   HTML de exemplo:
   <footer class="site-footer">
     <div class="site-footer__inner">
       <div class="site-footer__brand">
         <img class="logo-mark logo-mark--light" src="assets/logo/ramos-atelier-logo-light.png"
              alt="Ramos Atelier" width="242" height="138">
         <p class="site-footer__note">Ourivesaria, ensino e bancada compartilhada. Sao Paulo.</p>
       </div>
       <nav class="site-footer__nav" aria-label="Navegacao do rodape">
         <ul class="site-footer__list">
           <li><a class="nav-link" href="/index.html">Inicio</a></li>
           <li><a class="nav-link" href="/pages/sobre.html">Sobre</a></li>
           <li><a class="nav-link" href="/pages/cursos.html">Cursos e Oficinas</a></li>
           <li><a class="nav-link" href="/pages/momento-alianca.html">Momento Alianca</a></li>
           <li><a class="nav-link" href="/pages/coworking.html">Coworking</a></li>
           <li><a class="nav-link" href="/pages/galeria.html">Galeria</a></li>
         </ul>
       </nav>
       <div class="site-footer__contact">
         <a class="site-footer__phone" href="tel:+5511972146564">11 97214 6564</a>
         <p class="site-footer__hours">Dias uteis das 9h as 18h</p>
         <p class="site-footer__hours">Sabados das 9h as 14h</p>
       </div>
     </div>
     <p class="site-footer__legal">
       Ramos Atelier <span data-current-year>2026</span>
     </p>
   </footer>
   ========================================================================== */

.site-footer {
  position: relative;
  padding-inline: var(--gutter-mobile);
  padding-block: var(--sp-7) var(--sp-5);
  background-color: var(--ink-800);
}

/* filete superior dourado */
.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--gradient-gold);
  opacity: 0.7;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

.site-footer__brand .logo-mark {
  height: 3rem;
}

.site-footer__note {
  margin-block-start: var(--sp-3);
  max-width: 36ch;
  font-size: var(--fs-small);
  color: var(--muted);
}

.site-footer__list {
  display: grid;
  gap: var(--sp-2);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-footer__phone {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  color: var(--gold-300);
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
  color: var(--gold-100);
}

.site-footer__hours {
  font-size: var(--fs-small);
  color: var(--muted);
}

.site-footer__legal {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 5fr 4fr 3fr;
    gap: var(--gutter);
  }

  .site-footer__list {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: var(--sp-5);
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-inline: var(--gutter);
    padding-block: var(--sp-8) var(--sp-5);
  }
}

/* ==========================================================================
   [CELULA: kairogen-ui] ajustes globais de acessibilidade dos componentes
   [KAIROGEN-SLOT: a11y-overrides]
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .step-list__item,
  .spec-table__row {
    opacity: 1;
    transform: none;
  }

  .gallery-grid__img {
    opacity: 1;
  }

  .site-header.is-hidden {
    transform: none;
  }
}

/* fallback quando o JS nao roda: nada fica invisivel por conta de estado inicial */
.no-js .step-list__item,
.no-js .spec-table__row {
  opacity: 1;
  transform: none;
}

.no-js .gallery-grid__img {
  opacity: 1;
}