/* ================================================================
   INSIDE ARQUITETURA — Design System v2
   Tokens expandidos · Microinterações · Qualidade editorial
   Carregado antes do <style> inline de cada página.
   Usa !important apenas onde precisa sobrescrever estilos inline.
   ================================================================ */


/* ── 1. TOKENS EXPANDIDOS ─────────────────────────────────────── */

:root {

  /* Rampas tonais — terra (verde INSIDE) */
  --terra-50:  #edf2ee;
  --terra-100: #d7e6d9;
  --terra-200: #b0ccb5;
  --terra-300: #7aab82;
  --terra-400: #4a7d54;
  --terra-500: #2E4034;   /* = --terra */
  --terra-600: #243329;
  --terra-700: #192520;

  /* Rampas tonais — grafite */
  --grafite-50:  #f4f2ef;
  --grafite-100: #e4e0da;
  --grafite-200: #c6c0b8;
  --grafite-300: #a49c94;
  --grafite-400: #746c64;
  --grafite-500: #221D18;  /* = --grafite */
  --grafite-600: #1a1510;
  --grafite-700: #100d09;

  /* Rampas tonais — mostarda (dourado) */
  --mostarda-100: #f5e8cc;
  --mostarda-300: #ddb96b;
  --mostarda-500: #C79447;  /* = --mostarda */
  --mostarda-700: #9a7030;

  /* Superfícies semânticas */
  --surface:          #ffffff;
  --surface-subtle:   #f9f8f5;
  --surface-warm:     var(--aveia, #E5DCD1);
  --surface-inset:    rgba(34,29,24,.04);

  /* Bordas semânticas */
  --border-soft:   rgba(34,29,24,.06);
  --border:        rgba(34,29,24,.11);
  --border-mid:    rgba(34,29,24,.18);
  --border-strong: rgba(34,29,24,.28);
  --border-focus:  var(--terra, #2E4034);

  /* Texto semântico */
  --text-primary:   var(--grafite, #221D18);
  --text-secondary: #5a5249;
  --text-muted:     #8f867a;
  --text-disabled:  #b8b2ab;
  --text-inverse:   var(--calcario, #F4F3EE);
  --text-accent:    var(--terra, #2E4034);

  /* Sombras */
  --shadow-xs: 0 1px 2px  rgba(34,29,24,.06);
  --shadow-sm: 0 2px 8px  rgba(34,29,24,.08);
  --shadow-md: 0 6px 20px rgba(34,29,24,.10);
  --shadow-lg: 0 12px 36px rgba(34,29,24,.13);
  --shadow-xl: 0 24px 64px rgba(34,29,24,.16);

  /* Raios */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-full: 9999px;

  /* Easing curves — editorial */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.23, 1, 0.32, 1);

  /* Durações */
  --t-xs: 0.11s;
  --t-sm: 0.20s;
  --t-md: 0.28s;
  --t-lg: 0.44s;
  --t-xl: 0.70s;
}


/* ── 2. FUNDAMENTOS DE QUALIDADE ──────────────────────────────── */

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Anti-aliasing editorial em todas as superfícies */
body,
.display, .lead, .big-quote, .idx, .escuta .grande,
h1, h2, h3, h4 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Seleção de texto — cor da marca */
::selection {
  background: rgba(46, 64, 52, .14);
  color: var(--grafite, #221D18);
}

/* Scrollbar discreta */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background: rgba(34,29,24,.18);
  border-radius: var(--r-full);
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(34,29,24,.34); }

/* Focus ring nativo — acessível e editorial */
:focus-visible {
  outline: 2px solid var(--terra, #2E4034);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Quebra de linha equilibrada — headings */
.display, .big-quote, h2.sec, .lead, .virada p, h1, h2, h3 {
  text-wrap: balance;
}

/* Quebra inteligente — corpo de texto */
p, .txt, .svc-d, .via .txt, .story p, .shot .desc {
  text-wrap: pretty;
}


/* ── 3. KEYFRAMES ─────────────────────────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Linha decorativa desenhada */
@keyframes risco-draw {
  from { stroke-dashoffset: 420; }
  to   { stroke-dashoffset: 0; }
}


/* ── 4. REVEAL — easing editorial ────────────────────────────── */

.js .reveal {
  transition:
    opacity   var(--t-xl, .7s) var(--ease-out, cubic-bezier(.16,1,.3,1)),
    transform var(--t-xl, .7s) var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
}

/* Risco decorativo — animação de traçado */
svg.risco path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: risco-draw 1.4s var(--ease-out, cubic-bezier(.16,1,.3,1)) .6s forwards;
}


/* ── 5. NAV — UNDERLINE SWEEP ────────────────────────────────── */

header.nav .menu a.navlink {
  position: relative;
  padding-bottom: 4px;
  /* Remove border-bottom inline do .active */
  border-bottom: none !important;
}

/* Linha animada sob cada link */
header.nav .menu a.navlink::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.34s var(--ease-out, cubic-bezier(.16,1,.3,1));
}

header.nav .menu a.navlink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

header.nav .menu a.navlink.active {
  padding-bottom: 4px !important; /* sobrescreve 3px inline */
}

header.nav .menu a.navlink.active::after {
  transform: scaleX(1);
  transform-origin: left;
  background: var(--terra, #2E4034);
}

/* Círculo colorido — spring bounce */
.navlink .hl {
  transition: transform 0.30s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) !important;
}
.navlink:hover .hl,
.navlink.active .hl {
  transform: scale(1.14) !important;
}

/* Brand — hover suave */
.brand {
  transition: opacity var(--t-sm, .2s) !important;
}
.brand:hover { opacity: .82; }


/* ── 6. BOTÕES ────────────────────────────────────────────────── */

.btn {
  transition:
    background    var(--t-sm, .2s) var(--ease-out, cubic-bezier(.16,1,.3,1)),
    color         var(--t-sm, .2s),
    border-color  var(--t-sm, .2s),
    box-shadow    var(--t-sm, .2s),
    transform     var(--t-xs, .11s) !important;
}

/* Press — escala sutil */
.btn:active { transform: scale(0.978); transition-duration: var(--t-xs, .11s) !important; }

/* Focus ring primário */
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(46,64,52,.26);
}

/* Link-seta — easing melhorado */
.link-arrow {
  transition:
    border-color var(--t-sm, .2s),
    color        var(--t-sm, .2s) !important;
}

.link-arrow span {
  transition: transform 0.30s var(--ease-snap, cubic-bezier(.23,1,.32,1)) !important;
}
.link-arrow:hover span { transform: translateX(7px) !important; }


/* ── 7. CARTÕES VIA E SVC ────────────────────────────────────── */

.via, .svc {
  transition:
    transform    var(--t-md, .28s) var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow   var(--t-md, .28s) var(--ease-out, cubic-bezier(.16,1,.3,1)),
    border-color var(--t-md, .28s) !important;
}

.via:hover, .svc:hover {
  transform:  translateY(-6px) !important;
  box-shadow: var(--shadow-lg, 0 12px 36px rgba(34,29,24,.13)) !important;
}

/* Ícone — rotação menor, mais elegante */
.via:hover .ic,
.svc:hover .svc-ic {
  transform: scale(1.10) rotate(-2deg) !important;
  transition-timing-function: var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) !important;
}

/* go arrow */
.via:hover .go span,
.svc:hover .svc-go span {
  transform: translateX(7px) !important;
  transition-timing-function: var(--ease-snap, cubic-bezier(.23,1,.32,1)) !important;
}

/* EA items */
.ea-item {
  transition:
    transform  0.22s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow 0.22s !important;
}
.ea-item:hover { transform: translateX(5px) !important; }


/* ── 8. GALERIA HISTGAL ──────────────────────────────────────── */

.histgal .hg {
  transition:
    transform  0.30s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow 0.30s !important;
  will-change: transform;
}

.histgal .hg:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(34,29,24,.10));
}


/* ── 9. WHATSAPP BUTTON ──────────────────────────────────────── */

.wa-ico {
  transition:
    transform    0.24s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    background   var(--t-sm, .2s),
    border-color var(--t-sm, .2s),
    color        var(--t-sm, .2s) !important;
}
.wa-ico:hover { transform: scale(1.08); }


/* ── 10. FORMULÁRIOS ─────────────────────────────────────────── */

.field input,
.field select,
.field textarea {
  transition: border-color .2s, box-shadow .2s !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px rgba(46,64,52,.10) !important;
}


/* ── 11. MENU MOBILE — SLIDE ANIMATION ──────────────────────── */

/* backdrop-filter no header cria containing block e prende o drawer
   fixed DENTRO da barra (menu de 120px mostrando só "Início").
   O header é grafite opaco: o blur não tem efeito visível. */
header.nav,
header.nav.scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 860px) {

  /* Estado base: menu fora da tela, pronto para animar */
  .mobile-menu {
    display: block !important;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(320px, 90vw);
    z-index: 60;
    background: var(--calcario, #F4F3EE);
    color: var(--grafite, #221D18);
    padding: 80px 28px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden !important;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.40s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity 0.28s, visibility 0s 0.40s;
  }

  /* Aberto via checkbox CSS-only */
  #nav-toggle:checked ~ .mobile-menu {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: -4px 0 32px rgba(34,29,24,.18) !important;
    transition: transform 0.40s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity 0.28s, visibility 0s !important;
  }

  /* Aberto via JS (.open class) */
  .mobile-menu.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: -4px 0 32px rgba(34,29,24,.18) !important;
    transition: transform 0.40s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity 0.28s, visibility 0s !important;
  }

  /* Overlay via checkbox */
  #nav-toggle:checked ~ .mobile-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Burger visivel ate 860px — calcário sobre header grafite
     (inline HTML define color grafite no mobile, herdado do header claro antigo) */
  .burger {
    display: flex !important;
    color: var(--calcario, #F4F3EE) !important;
  }

  /* Lupa da busca: mesmo bug do burger — grafite sobre header grafite */
  header.nav .srch-btn {
    color: var(--calcario, #F4F3EE) !important;
    opacity: .85 !important;
  }
  /* Social no mobile: só Instagram (espaço curto) */
  .nav-social + .nav-social { display: none; }

  /* Hamburger vira X quando aberto */
  #nav-toggle:checked ~ .bar .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  #nav-toggle:checked ~ .bar .burger span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  #nav-toggle:checked ~ .bar .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Ocultar links desktop nessa faixa */
  header.nav .menu {
    display: none !important;
  }
}


/* ── 12. PAGE BACK BUTTON ────────────────────────────────────── */

.page-back {
  transition:
    opacity   var(--t-sm, .2s),
    transform 0.22s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
}
.page-back:hover {
  opacity:   1 !important;
  transform: translateX(-4px) !important;
}


/* ── 13. FOOTER ──────────────────────────────────────────────── */

footer.ft .col a {
  transition:
    color     var(--t-sm, .2s),
    transform 0.22s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
  display: inline-block;
}
footer.ft .col a:hover { transform: translateX(3px); }

footer.ft .social a {
  transition:
    color     var(--t-sm, .2s),
    transform 0.22s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
  display: inline-block;
}
footer.ft .social a:hover { transform: translateX(5px); }


/* ── 14. DOTNAV REFINADO ─────────────────────────────────────── */

.dot-pt {
  transition: all 0.28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) !important;
}
.dotnav a:hover .dot-pt {
  transform: scale(1.4) !important;
}


/* ── 15. TAG GRID ────────────────────────────────────────────── */

.tags a {
  transition: background 0.22s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
}


/* ── 16. FAQ / DETAILS ANIMATION ────────────────────────────── */

details[open] summary ~ * {
  animation: fade-up 0.32s var(--ease-out, cubic-bezier(.16,1,.3,1));
}


/* ── 17. SHOT COM FOTO — SEM DESLOCAMENTO ───────────────────── */

/* Fotos não se deslocam no hover — estabilidade editorial */
.shot.has-photo {
  transition: none !important;
  transform: none !important;
}


/* ── 18. OVERLAY — MOBILE NAV ───────────────────────────────── */

/* Overlay escuro quando menu móvel abre */
.mobile-overlay {
  transition: opacity 0.38s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
}


/* ── 19. INPUT CHECKBOX NAV TOGGLE ─────────────────────────── */

/* Garantia de acessibilidade no toggle */
.nav-toggle:focus-visible + .mobile-overlay {
  outline: none;
}


/* ── 20. FILTRO EDITORIAL INSIDE — consistência visual do acervo ── */

/* Galeria masonry — tratamento homogêneo, "impresso editorial" */
.galmasonry img {
  filter: saturate(0.88) contrast(0.98) !important;
  transition: filter 0.28s var(--ease-out), transform 0.28s var(--ease-out), box-shadow 0.28s !important;
}

/* Hover: levemente mais vivo, não oversaturated */
.galmasonry img:hover {
  filter: saturate(0.92) contrast(1.00) brightness(1.04) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg, 0 12px 36px rgba(34,29,24,.13)) !important;
}

/* Shot-img nas páginas sem filtro proprio (estudio, como-pensamos, etc.)
   Exclui .shot--antes-photo que usa grayscale(1) intencional (historias.html) */
.shot.has-photo:not(.shot--antes-photo) .shot-img {
  filter: saturate(0.90) contrast(0.97);
}


/* ── 21. TOKENS — OVERLAY + ESTADOS SEMÂNTICOS ──────────────── */

:root {
  --overlay-dark:  rgba(34, 29, 24, 0.92);
  --overlay-mid:   rgba(34, 29, 24, 0.60);
  --overlay-light: rgba(34, 29, 24, 0.24);
  --success: #3d7a52;
  --warning: #b87d2e;
  --error:   #a04040;
}

/* No-scroll quando lightbox ou modal abre */
body.lb-no-scroll { overflow: hidden !important; }


/* ── 21. LEGENDA EM FLUXO — NUNCA SOBRE A FOTO, NUNCA TRUNCADA ── */

/*
  CORREÇÃO ESTRUTURAL v2: a faixa absoluta de 56px truncava ou sobrepunha
  legendas longas em cards estreitos. Agora o card é flex-column: a foto
  ocupa o espaço restante e as legendas ficam em fluxo, altura natural.
  Nada é cortado, nada sobrepõe, em qualquer largura (CLAUDE.md § LEGENDAS).
  .shot--antes-photo mantém seu próprio layout (imagem relative, historias.html).
*/
.shot.has-photo:not(.shot--antes-photo) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* Área da foto: preenche o espaço acima das legendas */
.shot.has-photo:not(.shot--antes-photo) picture {
  position: relative !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  order: 0;
}
.shot.has-photo:not(.shot--antes-photo) picture .shot-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Shots com <img> direto (sem <picture>) */
.shot.has-photo:not(.shot--antes-photo) > img.shot-img {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  order: 0;
}

/* Remove gradiente proibido sobre fotos (CLAUDE.md § LEGENDAS) */
.shot.has-photo::after {
  display: none !important;
}

/* Splits full-bleed: quando há corte inevitável, preservar a parte
   de cima (rostos ficam no topo da foto, nunca decapitar) */
.split .shot.has-photo picture .shot-img {
  object-position: center top;
}

/* Legendas em fluxo — abaixo da foto, área exclusiva */
.shot.has-photo:not(.shot--antes-photo) .cat {
  position: static !important;
  order: 2;
  margin: 12px 14px 0 !important;
  font-size: 0.72rem !important;
  opacity: 1 !important;
  letter-spacing: .14em !important;
  text-shadow:none;
  color: var(--grafite, #221D18) !important;
  white-space: normal !important;
}
.shot.has-photo:not(.shot--antes-photo) .desc {
  position: static !important;
  order: 3;
  margin: 6px 14px 0 !important;
  text-shadow:none;
  color: var(--grafite, #221D18) !important;
  opacity: .85 !important;
  max-width: none !important;
}
.shot.has-photo:not(.shot--antes-photo) .acervo {
  position: static !important;
  order: 4;
  display: block !important;
  margin: 5px 14px 12px !important;
  font-size: 0.72rem !important;
  opacity: 1 !important;
  letter-spacing: .08em !important;
  text-shadow:none;
  color: var(--grafite, #221D18) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

/* PROPORÇÃO NATURAL EM GALERIAS — PROIBIDO cortar (CLAUDE.md § FOTOS).
   Vale em TODAS as larguras: o conserto anterior era só mobile e o
   desktop seguiu cortando (Nicolli decapitada na team5, 2x).
   Grades de pessoas/histórias: card segue a altura da foto. */
.split .shot.has-photo:not(.shot--antes-photo),
.stories .shot.has-photo:not(.shot--antes-photo),
.team5 .shot.has-photo:not(.shot--antes-photo),
.tmember .shot.has-photo:not(.shot--antes-photo),
.rede .shot.has-photo:not(.shot--antes-photo),
section[id="rede"] .shot.has-photo:not(.shot--antes-photo),
.mstep .shot.has-photo:not(.shot--antes-photo),
section[id="bastidores-obra"] .shot.has-photo:not(.shot--antes-photo) {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  justify-content: flex-start !important;
}
.split .shot.has-photo:not(.shot--antes-photo) picture,
.stories .shot.has-photo:not(.shot--antes-photo) picture,
.team5 .shot.has-photo:not(.shot--antes-photo) picture,
.tmember .shot.has-photo:not(.shot--antes-photo) picture,
.rede .shot.has-photo:not(.shot--antes-photo) picture,
section[id="rede"] .shot.has-photo:not(.shot--antes-photo) picture,
.mstep .shot.has-photo:not(.shot--antes-photo) picture,
section[id="bastidores-obra"] .shot.has-photo:not(.shot--antes-photo) picture {
  flex: none !important;
}
.split .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
.stories .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
.team5 .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
.tmember .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
.rede .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
section[id="rede"] .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
.mstep .shot.has-photo:not(.shot--antes-photo) picture .shot-img,
section[id="bastidores-obra"] .shot.has-photo:not(.shot--antes-photo) picture .shot-img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}

/* Mobile: TODA galeria de shots em proporção natural (1 coluna) */
@media (max-width: 640px) {
  .shot.has-photo:not(.shot--antes-photo) {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    justify-content: flex-start !important;
  }
  .shot.has-photo:not(.shot--antes-photo) picture {
    flex: none !important;
  }
  .shot.has-photo:not(.shot--antes-photo) picture .shot-img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .shot.has-photo:not(.shot--antes-photo) > img.shot-img {
    flex: none !important;
  }
}

/* Fotos "antes" — fluxo natural completo. O card herdava aspect-ratio
   fixo + justify-content:flex-end do shot base: conteúdo mais alto que
   o card vazava por CIMA (overflow:visible) e cobria o texto anterior.
   E .shot.has-photo .desc (calcário + sombra) vencia o override por
   especificidade: legenda fantasma. Especificidade (0,4,0) resolve. */
.shot.shot--antes-photo.has-photo {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.shot.shot--antes-photo.has-photo picture {
  position: static !important;
  flex: none !important;
  order: 0;
}
.shot.shot--antes-photo.has-photo .shot-img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}
/* Selo ANTES e legenda: abaixo da foto — nunca sobre (CLAUDE.md § LEGENDAS) */
.shot.shot--antes-photo.has-photo .cat {
  position: static !important;
  order: 2;
  top: auto !important; left: auto !important; bottom: auto !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--grafite, #221D18) !important;
  text-shadow:none;
  opacity: .78 !important;
}
.shot.shot--antes-photo.has-photo .desc {
  position: static !important;
  order: 3;
  margin: 5px 0 2px !important;
  color: var(--grafite, #221D18) !important;
  text-shadow:none;
  opacity: .85 !important;
  font-size: .82rem !important;
}

/* Shots com fundo escuro — legenda em calcário.
   Especificidade (0,4,0) para vencer a regra de fluxo acima. */
.shot.shot--grafite.has-photo .cat,
.shot.shot--grafite.has-photo .acervo,
.shot.shot--grafite.has-photo .desc,
.shot.shot--terra.has-photo .cat,
.shot.shot--terra.has-photo .acervo,
.shot.shot--terra.has-photo .desc,
.shot.shot--petroleo.has-photo .cat,
.shot.shot--petroleo.has-photo .acervo,
.shot.shot--petroleo.has-photo .desc,
.shot.shot--oliva.has-photo .cat,
.shot.shot--oliva.has-photo .acervo,
.shot.shot--oliva.has-photo .desc {
  color: var(--calcario, #F4F3EE) !important;
  opacity: 1 !important;
}

/* ── 21b. CONTRASTE EM FUNDOS ESCUROS ────────────────────────── */

/* link-arrow herda terra (verde escuro): ilegível sobre grafite/terra */
.bg-grafite .link-arrow,
.bg-terra .link-arrow,
.bg-petroleo .link-arrow,
footer.ft .link-arrow {
  color: var(--calcario, #F4F3EE) !important;
}
/* kickers dos galtext (--ac por seção) somem em seções escuras */
.bg-grafite .galtext .gt-k,
.bg-terra .galtext .gt-k,
.bg-petroleo .galtext .gt-k {
  color: var(--calcario, #F4F3EE) !important;
  opacity: .92;
}

/* Frame interno dos shots — mais atmosférico, menos "CSS frame" */
.shot::before {
  opacity: .08 !important;
  border-color: currentColor !important;
}
.shot.has-photo::before {
  display: none !important;  /* sem frame geométrico sobre foto */
}


/* ── 22. LIGHTBOX EDITORIAL ──────────────────────────────────── */

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--overlay-dark, rgba(34,29,24,.92));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6vh, 80px) clamp(48px, 6vw, 80px) clamp(24px, 4vh, 48px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    0.32s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    visibility 0s   0.32s;
}

.lb-overlay.lb-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.32s var(--ease-out, cubic-bezier(.16,1,.3,1));
}

.lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(90vw, 1200px);
  gap: 20px;
}

.lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 78vh;
  width: 100%;
}

.lb-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.14s;
  user-select: none;
}

.lb-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.lb-caption {
  font-family: "DM Sans", sans-serif;
  font-size: 0.76rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(244, 243, 238, 0.65);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.lb-counter {
  font-family: "DM Sans", sans-serif;
  font-size: 0.68rem;
  letter-spacing: .16em;
  color: rgba(244, 243, 238, 0.36);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Botões de controle */
.lb-close,
.lb-prev,
.lb-next {
  position: fixed;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(244, 243, 238, 0.55);
  padding: 12px;
  transition: color 0.2s, opacity 0.2s;
  line-height: 0;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { color: rgba(244, 243, 238, 1); }

.lb-close svg,
.lb-prev svg,
.lb-next svg { width: 26px; height: 26px; }

.lb-close { top: 18px; right: 20px; }
.lb-prev  { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lb-overlay { padding: 56px 8px 20px; }
  .lb-img { max-height: 68vh; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
}


/* ── 23. NAV — ART DIRECTION: EDITORIAL, NÃO SaaS ───────────── */

/* REMOVE sublinha sweep digital — substituída por presença tipográfica */
header.nav .menu a.navlink::after {
  display: none !important;
}

/* Hover: presença pelo peso e opacidade, não por linha */
header.nav .menu a.navlink {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  opacity: 0.72;
  transition: opacity 0.22s !important;
}

header.nav .menu a.navlink:hover,
header.nav .menu a.navlink.active {
  opacity: 1 !important;
}

/* Presença ativa — CÍRCULO DESENHADO À MÃO (Sara, 2026-07-09: "você está
   aqui"). Um círculo a lápis 6B envolve o item da página atual, como se
   alguém tivesse circulado no papel. */
header.nav .menu a.navlink.active .hl::after {
  display: none !important;
}
header.nav .menu a.navlink.active .hl {
  transform: scale(1.15) !important;
  transform-origin: center bottom;
  z-index: 3;
}
header.nav .menu a.navlink.active .lb {
  font-weight: 700;
  position: relative;
  z-index: 3;
}
header.nav .menu a.navlink.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 176%;
  height: 168%;
  transform: translate(-50%, -50%);
  background: url("/public/images/ui/pencil-circle-light.png") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* rótulo "você está aqui" — inserido por site-ui.js, posicionado sem afetar o layout */
header.nav .menu a.navlink.active .you-here {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  font-family: "DM Sans", sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose, #CFA0A0);
  white-space: nowrap;
  opacity: 0.92;
  pointer-events: none;
}

/* HL spring — permanece, é orgânico */
.navlink .hl {
  transition: transform 0.34s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) !important;
}
.navlink:hover .hl {
  transform: scale(1.10) !important;
}
.navlink.active .hl {
  transform: scale(1.04) !important;
}


/* ── 24. EYEBROW — TRAÇO ATMOSFÉRICO ────────────────────────── */

/* Substitui a linha sólida por degradê que some nas pontas — como grafite */
.eyebrow::before {
  background: linear-gradient(
    to right,
    transparent,
    currentColor 30%,
    currentColor 70%,
    transparent
  ) !important;
  opacity: 0.38 !important;
  width: 22px !important;
  height: 1px !important;
}


/* ── 25. MOBILE MENU — DIVISORES ATMOSFÉRICOS ───────────────── */

/* Texto do menu mobile SEMPRE grafite sobre o painel calcário
   (o span .lb herdava calcário do menu desktop e sumia) */
.mobile-menu a,
.mobile-menu a .lb,
.mobile-menu a small {
  color: var(--grafite, #221D18) !important;
  opacity: 1 !important;
}
.mobile-menu a small {
  opacity: .6 !important;
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Bolinhas do menu: cor pura e legível — a marca interna (::before)
   ficava ilegível em 14-22px */
.navlink .hl::before,
.mobile-menu a .hl::before {
  display: none !important;
}

/* Substitui border sólida por linha com fade nas pontas */
.mobile-menu a {
  border-bottom: none !important;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(34,29,24,.12) 8%,
    rgba(34,29,24,.12) 92%,
    transparent 100%
  ) !important;
  background-position: bottom !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
}


/* ── 25b. BREADCRUMB VOLTAR — VISÍVEL SOB O HEADER FIXO ─────── */

/* O header é position:fixed (~69px). Sem esta margem o .pg-crumb
   ficava escondido atrás dele em TODAS as páginas — invisível. */
.pg-crumb {
  margin-top: 69px !important;
}


/* ── 26. VOLTAR AO TOPO ──────────────────────────────────────── */

/* Canto inferior ESQUERDO — o FAB de chat ocupa o direito */
.to-top {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(244,243,238,.25);
  background: var(--grafite, #221D18);
  color: var(--calcario, #F4F3EE);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  box-shadow: 0 6px 22px rgba(34,29,24,.28);
  transition: opacity 0.28s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform 0.28s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover { transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--mostarda, #C79447); outline-offset: 3px; }
.to-top .to-top-lb {
  font-family: "DM Sans", sans-serif;
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}


/* ── 27. VOCÊ ESTÁ EM — LOCALIZAÇÃO VIVA (MOBILE) ────────────── */

/* Rótulo central no header: orientação para quem se perde na navegação.
   Desktop dispensa (o item ativo do menu já marca a página). */
.here-chip {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "DM Sans", sans-serif;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,243,238,.62);
  white-space: nowrap;
  pointer-events: none;
  max-width: 55vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.here-chip b {
  font-weight: 700;
  color: var(--calcario, #F4F3EE);
}
@media (max-width: 860px) {
  header.nav .bar { position: relative; }
  .here-chip { display: inline-block; }
}
/* Em telas curtas o prefixo sai — fica só o nome da página,
   sem colidir com os ícones à direita */
@media (max-width: 560px) {
  .here-chip { max-width: calc(100vw - 250px); }
  .here-chip .hc-pre { display: none; }
}


/* ── 28. PORTFÓLIO — MASONRY NATURAL, LEGENDA ABAIXO DA FOTO ── */

/*
  CLAUDE.md § FOTOS: PROIBIDO cortar fotos em galerias de portfólio;
  alturas naturais, masonry sem buracos.
  CLAUDE.md § LEGENDAS: PROIBIDO texto e gradiente sobre a fotografia.
  As grids .pcat usavam aspect-ratio + cover (corte) e figcaption
  absoluto sobre a imagem com gradiente. Correção estrutural:
  masonry por colunas CSS + legenda em fluxo abaixo da foto.
*/
/* Grades .pcat entram na galeria justificada (jlayout do projetos.html):
   linhas 100% da largura, sem buraco, proporção natural preservada.
   A altura vai na <picture>; a legenda respira embaixo. */
.pcat .projgrid:not(.inside-masonry) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}
.pcat .projcard {
  overflow: visible !important;
}
.pcat .projcard img {
  aspect-ratio: auto !important;
  border-radius: 7px;
}
.pcat .projcard picture { border-radius: 7px; overflow: hidden; }
.pcat .projcard.span2,
.pcat .projcard.tall {
  grid-column: auto !important;
}
/* Mobile: coluna única em proporção natural, sem depender de JS */
@media (max-width: 560px) {
  .pcat .projcard { width: 100% !important; }
  .pcat .projcard picture { height: auto !important; }
  .pcat .projcard img { width: 100% !important; height: auto !important; object-fit: unset !important; }
}

/* Gradiente sobre foto — proibido */
.projcard::after {
  display: none !important;
}

/* Legenda abaixo da foto, área exclusiva (12-16px de distância) */
.projcard figcaption {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 12px;
  color: var(--ink, #221D18) !important;
  text-shadow:none;
}
.projcard .pname {
  font-size: 1.02rem !important;
  color: var(--ink, #221D18) !important;
}
.projcard .ptag {
  opacity: .68 !important;
  color: var(--ink, #221D18) !important;
}

/* Zoom no hover permanece só na imagem, sem crescer sobre a legenda */
.projcard:hover img { transform: none !important; }

/* Marca d'água ©: com a legenda em fluxo, o ::before do card caía
   sobre a área clara da legenda (texto sombreado ilegível).
   Reancorada dentro da foto, canto inferior da imagem. */
.projcard::before { display: none !important; }
.pcat .projcard picture { position: relative; display: block; }
.pcat .projcard picture::after {
  content: "© INSIDE Arquitetura & Design 2026";
  position: absolute;
  bottom: 6px;
  right: 9px;
  z-index: 3;
  color: rgba(255,255,255,.4);
  font-family: "DM Sans", sans-serif;
  font-size: .44rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow:none;
}


/* ── 35. FILTROS DO PORTFÓLIO — MARCA-TEXTO, NÃO PÍLULA ─────── */

/* Sara (2026-07-08): "menu engenheirado não é artístico".
   Sai a pílula de app; entra a linguagem editorial da casa:
   Fraunces, minúsculas, e o marca-texto (.gr) na seleção ativa. */
.pf-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  margin: 0 18px 10px 0 !important;
  font-family: "Fraunces", serif !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem) !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
  color: var(--grafite, #221D18) !important;
  opacity: .58;
  cursor: pointer;
  transition: opacity .2s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pf-btn:hover { opacity: .85; }
.pf-btn.on, .pf-btn[aria-pressed="true"], .pf-btn.active {
  opacity: 1;
  background: var(--mostarda, #C79447) !important;
  color: var(--grafite, #221D18) !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
}


/* ── 29. PRANCHAS VISUAIS — NÚMEROS EDITORIAIS ───────────────── */

/*
   Direção de arte aprovada por Sara (2026-07-08): menos parágrafo,
   mais prancha. Números gigantes em Fraunces + uma frase, riscos de
   grafite como pontuação visual. Sem fotos novas nesta fase
   (imagem nova exige matriz editorial + auditoria de exceções).
*/
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 900px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat .stat-num {
  font-family: "Fraunces", serif;
  font-variation-settings: "opsz" 144;
  font-weight: 340;
  font-size: clamp(3.4rem, 8vw, 5.8rem);
  line-height: .82;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat .stat-un {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  opacity: .82;
}
.stat .stat-lb {
  font-family: "DM Sans", sans-serif;
  font-size: .82rem;
  line-height: 1.5;
  opacity: .78;
  max-width: 22ch;
}
.stat .stat-hair {
  width: 34px;
  height: 2px;
  border-radius: 1px;
  margin-top: 4px;
  opacity: .85;
}

/* Número gigante inline — abre uma prancha de seção */
.n-giga {
  display: block;
  font-family: "Fraunces", serif;
  font-variation-settings: "opsz" 144;
  font-weight: 320;
  font-style: normal;
  font-size: clamp(4.6rem, 13vw, 9rem);
  line-height: .78;
  letter-spacing: -.025em;
  margin-bottom: 10px;
}


/* ── 30. TRILHA — A CAMINHADA CONTINUA ───────────────────────── */

/* GALLERY_EXPERIENCE_SYSTEM.md § 1: navegação espacial viva.
   Injetada pelo site-ui.js antes do footer. */
.trilha {
  background: var(--grafite, #221D18);
  color: var(--calcario, #F4F3EE);
  padding: clamp(44px, 6vh, 72px) 0;
  border-top: 1px solid rgba(244,243,238,.10);
}
.trilha-eb {
  font-family: "Caveat", "DM Sans", cursive;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: rgba(244,243,238,.55);
  margin-bottom: 22px;
}
.trilha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 28px);
}
@media (max-width: 720px) {
  .trilha-grid { grid-template-columns: 1fr; }
}
.trilha-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 44px 20px 0;
  text-decoration: none;
  color: var(--calcario, #F4F3EE);
  border-top: 1px solid rgba(244,243,238,.16);
  transition: transform 0.28s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.trilha-card:hover { transform: translateX(6px); }
.trilha-k {
  font-family: "DM Sans", sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mostarda, #C79447);
}
.trilha-t {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.25;
}
.trilha-go {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  opacity: .45;
  transition: opacity .2s, transform 0.28s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.trilha-card:hover .trilha-go {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}


/* ── 31. LIGHTBOX — AÇÕES EDITORIAIS ─────────────────────────── */

/* Salvar inspiração (Pinterest) e compartilhar, injetados no #lbox */
.lb-actions {
  position: absolute;
  left: 50%;
  bottom: clamp(52px, 8vh, 76px);
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.lb-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(244,243,238,.35);
  background: rgba(34,29,24,.55);
  backdrop-filter: blur(6px);
  color: var(--calcario, #F4F3EE);
  font-family: "DM Sans", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lb-act:hover {
  background: var(--terra, #2E4034);
  border-color: var(--terra, #2E4034);
}
@media (max-width: 640px) {
  .lb-actions { bottom: 64px; width: max-content; max-width: 94vw; }
  .lb-act { padding: 8px 13px; font-size: .62rem; }
}


/* ── 32. ACESSO DIRETO — MASHUP TRADICIONAL ──────────────────── */

/* Pedido de Sara (2026-07-08): quem chega quer achar fácil o
   portfólio, o contato, o e-mail e o endereço. Alvos grandes e
   óbvios, amigáveis para quem tem mais idade. */
.acesso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
}
@media (max-width: 860px) {
  .acesso-grid { grid-template-columns: repeat(2, 1fr); }
}
.acesso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid rgba(34,29,24,.14);
  border-radius: 6px;
  text-decoration: none;
  color: var(--grafite, #221D18);
  background: var(--calcario, #F4F3EE);
  transition: transform 0.24s var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color .2s, box-shadow .24s;
}
.acesso:hover {
  transform: translateY(-3px);
  border-color: var(--terra, #2E4034);
  box-shadow: 0 8px 24px rgba(34,29,24,.10);
}
.acesso svg {
  width: 24px;
  height: 24px;
  stroke: var(--terra, #2E4034);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 4px;
}
.acesso .ac-t {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.acesso .ac-d {
  font-family: "DM Sans", sans-serif;
  font-size: .82rem;
  line-height: 1.4;
  opacity: .68;
  overflow-wrap: anywhere;
}


/* ── 33. SOCIAL NO TOPO + CASA VIVA ──────────────────────────── */

.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--calcario, #F4F3EE);
  opacity: .78;
  transition: opacity .2s, transform 0.24s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.nav-social svg { width: 17px; height: 17px; }
.nav-social:hover { opacity: 1; transform: translateY(-1px); }

/* Vídeos vivos na galeria da home (luz acende, lareira, casa em uso) */
.hg-video video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--grafite, #221D18);
}


/* ── 34. DO NOSSO INSTAGRAM — FEED BEHOLD ────────────────────── */

/* Masonry por colunas em proporção NATURAL — nunca cortar (nem o feed) */
.insta-grid {
  position: relative;
}
.insta-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--aveia, #E5DCD1);
  border-radius: 5px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.24s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .24s;
}
.insta-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34,29,24,.12);
}
.insta-item img {
  width: 100%;
  height: auto;
  display: block;
}
/* Convite estático (antes do feed configurado) */
.insta-convite {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 26px;
  border: 1px dashed rgba(34,29,24,.25);
  border-radius: 6px;
  text-decoration: none;
  color: var(--grafite, #221D18);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  width: max-content;
  max-width: 100%;
  transition: border-color .2s, transform 0.24s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.insta-convite:hover { border-color: var(--terra, #2E4034); transform: translateY(-2px); }
.insta-convite svg { width: 22px; height: 22px; flex-shrink: 0; }
/* Lightbox em modo instagram: esconde as setas da galeria da página */
.lbox.lb-insta .lb-nav { display: none !important; }

/* Lightbox injetado (páginas sem galeria própria) */
.lbox.lb-injected {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(34,29,24,.94);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(20px, 5vh, 60px);
}
.lbox.lb-injected.open { display: flex; }
.lbox.lb-injected img {
  max-width: min(92vw, 900px);
  max-height: 74vh;
  object-fit: contain;
  display: block;
}
.lbox.lb-injected .lb-cap {
  margin-top: 16px;
  color: var(--calcario, #F4F3EE);
  font-family: "DM Sans", sans-serif;
  font-size: .88rem;
  line-height: 1.5;
  max-width: 60ch;
  text-align: center;
}
.lbox.lb-injected .lb-x {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: 0;
  color: var(--calcario, #F4F3EE);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.lbox.lb-injected .lb-x:hover { opacity: 1; }
.lbox.lb-injected .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--calcario, #F4F3EE);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  padding: 12px;
}
.lbox.lb-injected .lb-nav:hover { opacity: 1; }
.lbox.lb-injected .lb-prev { left: clamp(8px, 3vw, 40px); }
.lbox.lb-injected .lb-next { right: clamp(8px, 3vw, 40px); }

/* Galeria masonry natural reutilizável (projeto-online, etc.) — colunas
   CSS, proporção natural, zero corte, zero buraco */
.gal-natural {
  columns: 3 260px;
  column-gap: 14px;
}
.gal-natural figure {
  break-inside: avoid;
  margin: 0 0 14px;
}
.gal-natural img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.gal-natural figcaption {
  margin-top: 8px;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted, #8f867a);
}




/* ── 40. DIVISOR DESENHADO À MÃO (lápis 6B) ──────────────────────────
   Sara 2026-07-09: nada de linha dura/digital. O site é tela quase
   handmade; os divisores são traço de grafite, não régua de 1px. */
:root{
  --hand-rule-dark:url("/public/images/ui/pencil-rule-dark.png");
  --hand-rule-light:url("/public/images/ui/pencil-rule-light.png");
}
.hand-rule{border:0 !important;height:14px;width:100%;background-image:var(--hand-rule-dark);
  background-size:100% 100%;background-repeat:no-repeat;background-position:center}
.hand-rule--light{background-image:var(--hand-rule-light)}


/* ══ 41. MENU EDITORIAL — Sara 2026-07-09 ═══════════════════════════════════
   O menu deixa de ser navegação de site e vira índice de exposição / sumário
   de livro de arte. Sem bolas coloridas competindo, sem círculos nem rabiscos.
   O estado ativo parece que sempre pertenceu ao layout: mesma tipografia, peso
   e contraste maiores, tracking levemente ampliado, um fio de Argila Natural
   sob o item, e "você está aqui" como legenda de galeria. Calmo, editorial. */

:root { --argila: #C9A98B; }

/* remove marcadores anteriores: círculo à mão, anel, chip */
header.nav .menu a.navlink::after { content: none !important; }
header.nav .menu a.navlink.active::before { display: none !important; content: none !important; background: none !important; }
header.nav .menu a.navlink.active .hl::after { display: none !important; }
header.nav .here-chip { display: none !important; }

/* BOLINHAS DE COR DA MARCA (Sara 2026-07-11): a paleta acende em cada item do
   menu, em toda página — um ponto pequeno da cor sobre o número de catálogo.
   As cores "iluminam" o site como conjunto; o item atual acende mais forte. */
header.nav .menu a.navlink .hl {
  display: block !important;
  width: 7px !important; height: 7px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto 6px !important;
  padding: 0 !important;
  opacity: .9;
  transition: transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .3s ease !important;
}
header.nav .menu a.navlink:hover .hl { transform: scale(1.35) !important; opacity: 1; }
header.nav .menu a.navlink.active .hl {
  transform: scale(1.25) !important; opacity: 1;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 0 9px 1px rgba(255,255,255,.22) !important;
}
/* quando o header fica claro (scrolled), o halo escurece p/ manter contraste */
header.nav.scrolled .menu a.navlink.active .hl {
  box-shadow: 0 0 0 3px rgba(34,29,24,.10), 0 0 9px 1px rgba(34,29,24,.14) !important;
}

/* item base — legenda de galeria */
header.nav .menu a.navlink {
  font-family: "DM Sans", sans-serif !important;
  font-size: .7rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--calcario, #F4F3EE) !important;
  opacity: .56;
  padding: 2px 0 8px !important;
  transition: opacity .4s ease, letter-spacing .4s ease !important;
}
header.nav .menu a.navlink .lb { position: relative; display: inline-block; }

/* fio editorial (Argila Natural) — desenha da esquerda no hover, fixo no ativo */
header.nav .menu a.navlink .lb::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: var(--argila, #C9A98B);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  opacity: .9;
}
header.nav .menu a.navlink:hover { opacity: .88; }
header.nav .menu a.navlink:hover .lb::after { transform: scaleX(1); }

/* ATIVO — pertence ao layout */
header.nav .menu a.navlink.active {
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  color: #FBFAF6 !important;
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
}
header.nav .menu a.navlink.active .lb { box-shadow: none !important; }
header.nav .menu a.navlink.active .lb::after {
  transform: scaleX(1);
  transform-origin: center;
  left: -4px; right: -4px;
  opacity: 1;
}
/* "você está aqui" — legenda de galeria: small caps, tracking amplo, baixo contraste */
header.nav .menu a.navlink.active .you-here {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -14px;
  font-family: "DM Sans", sans-serif;
  font-size: .4rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--calcario, #F4F3EE);
  opacity: .3;
  white-space: nowrap;
  pointer-events: none;
}

/* MOBILE — mesma linguagem editorial no menu aberto */
.mobile-menu a.navlink.active, .mobile-menu a.active {
  color: var(--terra, #2E4034) !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
}
/* marcador "você está aqui" no menu mobile: fio curto em terra antes do rótulo ativo */
.mobile-menu a.navlink.active .lb::before, .mobile-menu a.active .lb::before { color: var(--terra, #2E4034) !important; }
.mobile-menu a.navlink.active .nd, .mobile-menu a.active .nd { display: none !important; }
/* bolinha de cor no menu mobile também (mesma paleta da marca) */
.mobile-menu a .hl {
  display: inline-block !important;
  width: 9px !important; height: 9px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  margin: 0 12px 0 0 !important;
  vertical-align: middle;
}

/* ── MAPA DA VISITA (Sara 2026-07-09): o menu é um índice de exposição.
   Cada item ganha um número de catálogo automático (01, 02…) sobre o rótulo,
   como numa mostra. O site vira uma visita guiada, não uma lista de páginas.
   O item atual acende em Argila Natural (número + fio), como marcador de leitura. */
header.nav .menu { counter-reset: visita; }
header.nav .menu a.navlink { counter-increment: visita; }
header.nav .menu a.navlink .lb::before {
  content: counter(visita, decimal-leading-zero);
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: .46rem;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--calcario, #F4F3EE);
  opacity: .34;
  margin-bottom: 4px;
  transition: opacity .4s ease, color .4s ease;
}
header.nav .menu a.navlink:hover .lb::before { opacity: .6; }
header.nav .menu a.navlink.active .lb::before { color: var(--argila, #C9A98B); opacity: 1; }