/* ================================================================
   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:     #6E6355;
  --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);
}
/* ── CTA DE ORCAMENTO no menu (Sara 2026-08-14): pedido direto, bem visual.
   Leva ao briefing (a Iris captura os dados e NOS chamamos a pessoa),
   nao ao WhatsApp - la o lead esfria esperando resposta da automacao. */
/* Na lingua da casa: mesmo corpo do menu, cor mostarda e o traco a lapis
   permanente embaixo (o risco do "voce esta aqui") - nada de pill/app. */
header.nav .menu a.navlink.nav-cta {
  color: var(--mostarda, #C79447) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
header.nav .menu a.navlink.nav-cta::after { display: none !important; }
header.nav .menu a.navlink.nav-cta .lb::after {
  transform: scaleX(1) !important;
}
header.nav .menu a.navlink.nav-cta:hover { opacity: .78 !important; }
.mobile-menu a.nav-cta {
  color: var(--mostarda, #C79447) !important;
  font-weight: 600 !important;
}

/* em fundo escuro o traço terra some — vira mostarda (a11y rodada 2) */
.bg-grafite :focus-visible, .bg-terra :focus-visible, .bg-petroleo :focus-visible,
header.nav :focus-visible, .mobile-menu :focus-visible {
  outline-color: var(--mostarda, #C79447);
}

/* 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 menu: WhatsApp E Instagram sempre visíveis (Sara 2026-07-28).
     Antes uma regra escondia o 2º social e só o WhatsApp aparecia. */

  /* 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 */
/* estilo-base; o efeito final (dourado que respira) está na regra mais abaixo */
/* .you-here: regra unica e definitiva mais abaixo (centrada sob a PALAVRA,
   com brilho dourado). A duplicata antiga (translateX(-50%), sem offset) foi
   removida aqui - era ela, servida em cache, que deixava o rotulo torto. */

/* 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; }

/* ── GRIFO (marca-texto) + PINCELADA — linguagem de destaque site-wide ──
   Sara (2026-07-14): reutilizar o grifo e a pincelada em toda a casa, com
   cores diferentes, para destacar as palavras-isca. A cor vai inline em cada
   uso (background/color no .gr; fill no <svg class="pincel">). */
.gr {
  /* A cor vai inline em --gr (ex.: style="--gr:var(--terra);color:var(--calcario)").
     A faixa é pintada como banda de altura controlada (background-size), menor que a
     entrelinha, para NUNCA encostar na linha de cima/de baixo nem se sobrepor quando
     o grifo quebra em duas linhas. Dá respiro. Aprovado por Sara 2026-07-17. */
  --gr: currentColor;
  padding: 0 .16em;
  margin: 0 .04em;
  background-image: linear-gradient(var(--gr), var(--gr));
  background-repeat: no-repeat;
  background-size: 100% 1.02em;
  background-position: 0 58%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pincel { display: block; width: 120px; height: 24px; margin: 4px 0 2px; filter: url(#brushTexture); } /* bordas frajadas: parece pincel de verdade, não vetor duro */
.pincel path { transition: none; }
.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); }

/* Controles sobre a foto — Sara 2026-07-21
   As setas e o fechar ficam POR CIMA da imagem, e a imagem pode ser branca
   (print de revista, página de papel). Glifo claro sem superfície sumia:
   contraste medido de 1.00 sobre papel branco. Sombra em texto é proibida na
   casa, e "mover para fora da foto" não resolve aqui porque a foto larga
   ocupa a tela inteira. A saída é a mesma pílula que o .lb-act já usa: o
   controle ganha superfície própria e passa a ler sobre qualquer imagem.
   Alpha .72 garante contraste 5.6 mesmo sobre branco puro.

   Vale para TODOS os lightboxes: o injetado (.lb-injected) e os inline que
   cada página declara no próprio <style>. Por isso a regra não é escopada
   em .lb-injected - dois seletores de classe vencem o ".lbox button" das
   páginas sem precisar de !important. */
.lbox .lb-nav,
.lbox .lb-x {
  background: rgba(34, 29, 24, .72);
  border: .8px solid rgba(244, 243, 238, .22);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .22s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lbox .lb-nav {
  width: 52px; height: 52px;
  font-size: 2rem;
}
.lbox .lb-x {
  width: 44px; height: 44px;
  font-size: 1.55rem;
}
.lbox .lb-nav:hover,
.lbox .lb-x:hover { background: rgba(34, 29, 24, .9); opacity: 1; }
@media (max-width: 640px) {
  .lbox .lb-nav { width: 46px; height: 46px; font-size: 1.75rem; }
  .lbox .lb-x { width: 42px; height: 42px; }
}

/* 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, #6E6355);
}




/* ── 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;
  /* Sara 2026-08-11: menu competia com a logo - corpo desce um degrau e a marca
     sobe (regra abaixo); contraste (opacity .85) fica, que foi pedido dela. */
  font-size: .57rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important; /* Sara 2026-08-14: menu apagado - mais tinta */
  color: var(--calcario, #F4F3EE) !important;
  opacity: 1;
  padding: 2px 0 8px !important;
  transition: opacity .4s ease, letter-spacing .4s ease !important;
}

/* a marca manda no topo: um degrau acima do menu (Sara 2026-08-11) */
header.nav .brand .name {
  font-size: .92rem !important;
}
header.nav .menu a.navlink .lb { position: relative; display: inline-block; }

/* fio editorial (Argila Natural) — desenha da esquerda no hover, fixo no ativo */
/* linha do menu = traço de grafite à mão (não régua reta). Sara 2026-07-30 */
header.nav .menu a.navlink .lb::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: -9px;
  height: 8px;
  background-image: var(--hand-rule-light);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  opacity: .9;
}
/* nav claro (rolado ou paginas de fundo claro) → grafite escuro */
header.nav.scrolled .menu a.navlink .lb::after { background-image: var(--hand-rule-dark); }
header.nav .menu a.navlink:hover { opacity: 1; }
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: .16em !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" — acende suave no dourado da casa (mostarda), sem berro (Sara 2026-07-30) */
header.nav .menu a.navlink.active .you-here {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% + 8.5px)); /* centra sob a PALAVRA: compensa o .hl(9px)+gap(8px) que fica antes dela no flex */
  bottom: -14px;
  font-family: "DM Sans", sans-serif;
  font-size: .44rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mostarda, #C79447);   /* dourado da paleta INSIDE */
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none;                 /* regra da casa: nunca sombra em texto */
  filter: drop-shadow(0 0 3px rgba(199,148,71,.5)); /* brilho quente sutil, via filtro */
  animation: youHereGlow 2.6s ease-in-out infinite;
}
/* respira como uma luz acesa — acende e recolhe, sem piscar de vitrine */
@keyframes youHereGlow {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 4px rgba(199,148,71,.55)); }
  50%      { opacity: .6;  filter: drop-shadow(0 0 1px rgba(199,148,71,.2)); }
}
@media (prefers-reduced-motion: reduce) {
  header.nav .menu a.navlink.active .you-here { animation: none; opacity: 1; }
}

/* 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; }

/* ── Menu com 7 itens (Imprensa entrou em 2026-07-18) ────────────────
   Entre o ponto do hamburger (860) e ~1100px o conjunto encostava na marca
   (folga 0 no 900). Aperta o gap só nessa faixa. Seletor com header.nav
   para vencer o `.menu{gap:28px}` que cada página declara. */
@media (min-width: 861px) and (max-width: 1100px) {
  header.nav .menu { gap: 14px; margin-left: clamp(20px, 3.4vw, 38px); }
}


/* ── 40. AVISO DE MEDIÇÃO (LGPD) — Sara 2026-07-21 ──────────────────────────
   Nasce junto com o Analytics. Enquanto a pessoa não responde, nenhuma tag de
   terceiro entra na página. O aviso é de papel: fundo calcário, canto solto,
   sombra difusa embaixo. Sem régua de 1px separando nada, sem sombra em texto. */
#ck-aviso {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  /* canto inferior direito é do chat da Iris (bottom:26 right:26, ~52px).
     O aviso não passa por baixo dele: para no início dessa faixa. */
  right: clamp(88px, 12vw, 108px);
  bottom: clamp(12px, 3vw, 26px);
  z-index: 9102;   /* acima do chat (9100/9101), para nada ficar cortado */
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  flex-wrap: wrap;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 26px);
  background: var(--calcario, #F4F3EE);
  border-radius: 14px 12px 15px 11px;   /* canto irregular: papel, não caixa */
  box-shadow: 0 18px 44px rgba(20, 20, 18, .22);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1);
}
#ck-aviso.ck-on { opacity: 1; transform: none; }

#ck-aviso .ck-txt {
  flex: 1 1 300px;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--grafite, #221D18);
  text-shadow: none;
}
#ck-aviso .ck-txt a {
  color: var(--terra, #2E4034);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ck-aviso .ck-btns {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
#ck-aviso button {
  font-family: "DM Sans", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  border-radius: 999px;
  padding: 11px 20px;
  transition: background .2s, color .2s;
  text-shadow: none;
}
#ck-aviso .ck-sim {
  background: var(--terra, #2E4034);
  color: var(--calcario, #F4F3EE);
  border: 0;
}
#ck-aviso .ck-sim:hover { background: var(--grafite, #221D18); }
#ck-aviso .ck-nao {
  background: transparent;
  color: var(--grafite, #221D18);
  border: 0;
  opacity: .8;
}
#ck-aviso .ck-nao:hover { opacity: 1; background: rgba(34, 29, 24, .07); }
#ck-aviso button:focus-visible {
  outline: 2px solid var(--terra, #2E4034);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  /* no mobile o aviso ocupa a largura, mas sobe acima do chat (que fica
     em bottom:14 right:14) para os botões não passarem por baixo dele. */
  #ck-aviso {
    flex-direction: column;
    align-items: stretch;
    left: 12px;
    right: 12px;
    bottom: 84px;
    max-width: none;
  }
  #ck-aviso .ck-btns { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  #ck-aviso { transition: none; opacity: 1; transform: none; }
}


/* ── 41. ÂNCORAS: compensar a nav fixa — Sara 2026-07-24 ────────────────────
   header.nav é position:fixed, então todo salto de âncora (#secao) caía atrás
   do header. scroll-margin-top afasta o alvo o suficiente para ele aparecer
   abaixo da nav. Só tem efeito quando o elemento é destino de âncora - inócuo
   no resto. Vale para o site inteiro. */
[id] { scroll-margin-top: clamp(84px, 10vh, 108px); }


/* ── 42. PRANCHETA DO ATELIÊ — international · Sara 2026-07-26 ───────────────
   Poucas fotos de "depois": elevamos a composição para a mesa de trabalho do
   arquiteto. Moodboards viram recortes presilhados; os 3Ds pousam em folhas de
   papel manteiga (vegetal) com fita crepe. Handmade real, sem linha dura.
   Nada de text-shadow; nada de cortar foto (as imagens entram inteiras). */
:root{
  --manteiga:#efe6d2;              /* papel vegetal / manteiga */
  --manteiga-film:rgba(226,214,187,.55);
  --fita:rgba(210,196,166,.5);     /* fita crepe translúcida */
  --folha-bg:#fbf9f3;
}
/* mesa de trabalho: leve calor sob a seção, sem textura pesada */
.prancheta{ position:relative; overflow-x:clip; }

/* fileira de recortes/folhas: flex com respiro para as inclinações não colidirem */
.ateliê-row,.atelie-row{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(18px,3vw,40px);
  margin-top:clamp(20px,3vw,30px);
}
.atelie-row > *{ flex:1 1 300px; min-width:min(300px,100%); }

/* folha: cartão de papel, sombra macia de coisa pousada na mesa */
.folha{
  position:relative;background:var(--folha-bg);
  padding:10px 10px 12px;border-radius:2px;
  box-shadow:0 1px 0 rgba(34,29,24,.05), 0 16px 30px -20px rgba(34,29,24,.5);
}
.folha > img,.folha > picture{display:block}
.folha img{display:block;width:100%;border-radius:1px}

/* papel manteiga: mat quente + film de vegetal sutil sobre o 3D */
.folha--manteiga{ background:var(--manteiga);padding:13px 13px 15px;
  box-shadow:0 1px 0 rgba(34,29,24,.06), 0 18px 34px -20px rgba(34,29,24,.55); }
.folha--manteiga::after{ content:"";position:absolute;inset:13px 13px 15px;
  pointer-events:none;border-radius:1px;mix-blend-mode:multiply;
  background:radial-gradient(125% 120% at 50% 42%, transparent 60%, var(--manteiga-film) 100%); }

/* fita crepe no topo da folha */
.folha--fita::before{ content:"";position:absolute;top:-10px;left:50%;
  width:86px;height:22px;background:var(--fita);
  transform:translateX(-50%) rotate(-1.6deg);
  box-shadow:0 1px 2px rgba(34,29,24,.07);
  -webkit-mask:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent);
          mask:linear-gradient(90deg,transparent,#000 5px,#000 calc(100% - 5px),transparent); }
.folha--fita.fita-r::before{ transform:translateX(-50%) rotate(1.6deg); }

/* inclinações leves e alternadas; endireita no hover (só onde há hover real) */
.tilt-l{transform:rotate(-1.4deg)}
.tilt-r{transform:rotate(1.4deg)}
.tilt-l,.tilt-r{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){ .tilt-l:hover,.tilt-r:hover{transform:rotate(0);z-index:2} }
@media(prefers-reduced-motion:reduce){ .tilt-l,.tilt-r{transition:none} }

/* rótulo manuscrito da folha (legenda fora da imagem, nunca sobre) */
.folha-cap{ margin-top:10px;font-size:.78rem;color:var(--muted,#8a8378);
  font-family:'DM Sans',sans-serif;line-height:1.4 }

/* mobile: sem inclinação (evita colisão e rolagem lateral) */
@media(max-width:640px){ .tilt-l,.tilt-r{transform:none} .folha--fita::before{width:70px} }


/* ── 43. LINGUAGEM ANTES/DEPOIS — international · Sara 2026-07-26 ────────────
   Direção editorial uniforme: ANTES em preto e branco envelhecido (arquivo);
   DEPOIS/render em cor, atual; moodboard como recorte na mesma folha. Selos
   padronizados de "Before / After / The concept". */
.im-antes img{ filter:grayscale(1) sepia(.12) contrast(1.04) brightness(.99);
  transition:filter .55s ease; }
@media(hover:hover){ .im-antes:hover img{ filter:grayscale(0) sepia(0); } }
@media(prefers-reduced-motion:reduce){ .im-antes img{transition:none} }

/* selo/legenda padronizada (fica FORA da imagem, nunca sobre) */
.selo{ display:inline-block;font:600 .56rem/1 'DM Sans',sans-serif;
  letter-spacing:.24em;text-transform:uppercase;padding:.34em .62em;border-radius:2px;
  margin-right:.55em;vertical-align:.1em; }
.selo--antes{ color:var(--grafite,#221D18);background:rgba(34,29,24,.07); }
.selo--depois{ color:var(--calcario,#F4F3EE);background:var(--terra,#2E4034); }
.selo--conceito{ color:var(--terra,#2E4034);background:rgba(46,64,52,.09); }


/* trio de fotos com moldura: masonry (multicol) - alturas naturais, sem corte,
   sem buraco (os itens se acomodam nas colunas). Inclinação leve mantida
   (renderiza bem no multicol). */
.trio{ columns:3 220px;column-gap:clamp(14px,2.2vw,28px);margin-top:22px; }
.trio > *{ break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 clamp(14px,2.2vw,28px);display:block; }
@media(max-width:640px){ .trio{columns:1} }


/* board: galeria masonry com moldura + inclinação + lightbox (Chris & Michel).
   Multicol para alturas naturais (sem corte/buraco). */
.board{ columns:3 240px;column-gap:clamp(12px,1.8vw,22px);margin-top:8px; }
.board > *{ break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 clamp(12px,1.8vw,22px);display:block; }
.board img{cursor:zoom-in}
@media(max-width:900px){ .board{columns:2 240px} }
@media(max-width:560px){ .board{columns:1} }


/* ── Bolinhas SEMPRE circulares - nunca esticadas/reduzidas pelo flex (Sara) ──
   O .dot dentro de um container flex (.cat, etc.) encolhia horizontalmente
   quando o texto era longo, virando elipse. flex:none trava o tamanho e
   aspect-ratio:1 garante o círculo mesmo se só uma dimensão for definida. */
.dot, .nd, .dot-pt, .cat .dot, .rede li .dot, .ico-dot, [class*="dot"]:not(.dotnav):not([class*="dotnav"]) {
  flex: 0 0 auto !important;
}
.dot, .nd, .dot-pt, .cat .dot, .rede li .dot { aspect-ratio: 1 / 1; }


/* ── Citação (voz convidada): frases sobre morar/habitar de filósofos,
   designers e da psicanálise/neurociência. Mensagem que provoca sentimento,
   não vende. Adapta à cor do fundo (currentColor), sem sombra. - Sara ── */
.citacao{max-width:60ch;margin-inline:auto}
.citacao blockquote{margin:0;font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(1.3rem,2.7vw,2.05rem);line-height:1.42;
  color:currentColor;text-shadow:none;text-wrap:balance}
.citacao .fonte{display:block;margin-top:clamp(12px,1.6vw,18px);font-family:'DM Sans',sans-serif;
  font-style:normal;font-weight:600;font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;opacity:.66}
.citacao--centro{text-align:center}


/* ── Copyright + anti-vazamento nas fotos de PESSOAS (Sara 2026-07-28) ──
   Marca de reprodução proibida sobre a foto (proteção legal; exceção
   consciente à regra de "sem texto sobre foto", só para fotos de pessoas) +
   sem ampliação (lightbox desativado). Instagram fica de fora. */
.imgcopy{position:absolute;right:7px;bottom:7px;z-index:6;pointer-events:none;
  font:600 .4rem/1.2 "DM Sans",system-ui,sans-serif;letter-spacing:.03em;
  text-transform:uppercase;color:rgba(244,243,238,.68);text-shadow:none;
  background:rgba(20,17,12,.24);padding:3px 6px;border-radius:3px;
  max-width:min(220px,82%);text-align:right}
/* card com a foto absoluta e faixa de legenda: a marca fica na BASE da foto,
   logo acima da faixa - nunca sobre o rosto (que fica no topo) */
.shot.has-photo.imgcopy-strip .imgcopy{bottom:64px}
img.no-zoom,.shot.no-zoom{cursor:default}

/* ══ MENU — marca-texto na palavra + equilíbrio óptico dos ícones (Sara 2026-07-30) ══ */
/* A linha reta/grafite sob o item saía estranha (esticava no "como pensamos").
   Troca por marca-texto (grifo) marcando a PRÓPRIA palavra ativa — linguagem da casa. */
header.nav .menu a.navlink .lb::after { display: none !important; }
/* marca-texto HANDMADE: banda de rosa clarinho com bordas frajadas (filtro de pincel),
   atrás da palavra — legível no nav escuro e com cara de marcador de verdade. */
header.nav .menu a.navlink.active .lb {
  position: relative;
  z-index: 0;
  padding: 0 .26em;
  color: var(--grafite, #221D18) !important;   /* texto escuro sobre o marca-texto claro */
}
header.nav .menu a.navlink.active .lb::before {
  content: "";
  position: absolute;
  left: -4px; right: -4px; top: -3px; bottom: -3px;   /* cobre a palavra INTEIRA (com folga), pra não sumir metade no nav escuro */
  background: #E9D3D3;                 /* rosa clarinho da casa, legível */
  border-radius: 2px;
  filter: url(#brushSoft);            /* fraja levemente as bordas (handmade), sem destruir a banda */
  z-index: -1;
}
header.nav .menu a.navlink:not(.active):hover .lb {
  position: relative; z-index: 0; padding: 0 .26em;
}
header.nav .menu a.navlink:not(.active):hover .lb::before {
  content: "";
  position: absolute;
  left: -3px; right: -3px; top: 8%; bottom: 6%;
  background: rgba(233,211,211,.5);
  border-radius: 2px;
  filter: url(#brushSoft);
  z-index: -1;
}

/* Equilíbrio ÓPTICO dos ícones do nav: caixas iguais + ink equalizado.
   O WhatsApp preenche o viewBox (pesado) → menor; IG/lupa têm folga interna → maiores. */
/* caixas justas ao ink (24px) + gap curto → espaço ink-a-ink ~12px, uniforme.
   margin-left separa o grupo de ícones do último item do menu (não cola no Contato). */
/* gap curto entre ícones + margem responsiva do menu (separa em tela larga, encolhe na estreita) */
header.nav .nav-actions { gap: 5px !important; margin-left: clamp(12px, 1.8vw, 24px); flex: 0 0 auto; }
header.nav .menu { min-width: 0; }
header.nav .nav-actions > a.nav-social,
header.nav .nav-actions > button.srch-btn {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
header.nav .nav-social[aria-label="WhatsApp"] svg { width: 16px; height: 16px; }
header.nav .nav-social[aria-label="Instagram"] svg { width: 21px; height: 21px; }
header.nav .srch-btn svg { width: 22px; height: 22px; }


/* ── ACESSIBILIDADE: pular para o conteudo (Sara 2026-08-12) ──
   Invisivel ate receber foco de teclado; primeiro item do TAB. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--grafite,#221D18);color:var(--calcario,#F4F3EE);padding:12px 22px;font-family:"DM Sans",sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-decoration:none;border-radius:0 0 6px 0}
.skip-link:focus{left:0;outline:2px solid var(--mostarda,#C79447);outline-offset:2px}

/* texto so para leitores de tela (nao altera o visual) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ── SELO DE ACESSIBILIDADE no rodape (Sara 2026-08-12) ──
   Acolhimento explicito: o simbolo universal + convite de feedback (eMAG).
   Sem linha dura: separa por respiro, nao por regua. */
footer.ft .a11y-selo{display:flex;align-items:flex-start;gap:14px;margin:30px 0 6px;max-width:62ch;color:#9a9488}
footer.ft .a11y-selo svg{flex-shrink:0;margin-top:2px;opacity:.85}
footer.ft .a11y-selo p{font-size:.8rem;line-height:1.65;margin:0}
footer.ft .a11y-selo a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
footer.ft .a11y-selo a:hover{color:var(--mostarda,#C79447)}

/* Telas medias (ate 1180px): menu respira - corpo e espacamento um fio menores.
   Sara 2026-08-14: o menu encavalava com o item de orcamento. */
@media (max-width: 1180px) {
  header.nav .menu a.navlink {
    font-size: .53rem !important;
    letter-spacing: .09em !important;
  }
  header.nav .menu { gap: clamp(10px, 1.6vw, 22px) !important; }
}



/* ── MENU no topo SEMPRE (Sara 2026-08-14: "cade o menu superior?") ──
   Na faixa 861-1250px o menu de linha fica, mas compacto de verdade:
   sem os numeros 01-08, tipografia e vaos menores. O hamburguer segue
   so no mobile (<=768/860 das paginas), como sempre foi. */
@media (max-width: 1250px) and (min-width: 881px) {
  header.nav .menu { display: flex !important; } /* 769-860: paginas escondiam o menu E o burger - sumia tudo */
  header.nav .menu a.navlink { font-size: .55rem !important; letter-spacing: .07em !important; }
  header.nav .menu { gap: clamp(8px, 1.2vw, 16px) !important; }
  header.nav .menu a.navlink:not(.active):not(:hover) .lb::before { content: none !important; } /* esconde 01-08 SEM matar a faixa do item ativo (o pseudo e o mesmo) */
  header.nav .menu { align-items: center !important; } /* sem numeros, centraliza na faixa */
  header.nav .menu a.navlink { padding-top: 0 !important; }
  header.nav .menu a.navlink .hl { transform: scale(.8); }
}

/* faixa 769-880: hamburguer - 8 itens nao cabem nem compactos (fisica).
   As paginas escondiam menu E burger aqui - buraco que a Sara flagrou. */
@media (max-width: 880px) and (min-width: 769px) {
  header.nav .menu { display: none !important; }
  header.nav label.burger { display: flex !important; }
  #nav-toggle:checked~.mobile-menu{
    display:block;
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(320px,90vw);
    z-index:60;
    background:var(--calcario);
    color:var(--grafite);
    padding:80px 28px 40px;
    box-shadow:-4px 0 32px rgba(20,18,16,.22);
    overflow-y:auto
  }
  #nav-toggle:checked~.mobile-menu a{display:block;font-family:"DM Sans",sans-serif;font-size:.9rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--hair)}
  #nav-toggle:checked~.mobile-menu .nav-cta{color:var(--mostarda,#C79447)!important;font-weight:600}
  .mobile-menu .close{position:absolute;top:20px;right:20px;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--grafite);line-height:1}
}


/* ── TINTAS DE TEXTO (a11y, Sara 2026-08-14: contraste e regra, nunca mais) ──
   Acentos da paleta em versao-tinta para TEXTO sobre fundo claro (>=4.5:1).
   Graficos (bolinhas, pinceladas, fundos) seguem nas cores originais. */
:root{--mostarda-ink:#7E5619;--rose-ink:#8F3F52;--oliva-ink:#55613F;--malva-ink:#8A5E80;--muted-ink:#6E6355}

/* ── CONTRASTE AUTOMATICO EM SECAO CLARA (a11y 2026-08-14) ──
   Acentos usados como COR DE TEXTO em fundos claros trocam para a versao
   tinta (>=4.5:1). Seletor por atributo pega os estilos inline; bolinhas,
   pinceladas e fundos nao sao afetados. */
.bg-calcario [style*="color:var(--mostarda)"]{color:var(--mostarda-ink) !important}
.bg-calcario [style*="color:var(--rose)"]{color:var(--rose-ink) !important}
.bg-calcario [style*="color:var(--oliva)"]{color:var(--oliva-ink) !important}
.bg-calcario [style*="color:var(--malva)"]{color:var(--malva-ink) !important}
.bg-branco [style*="color:var(--mostarda)"]{color:var(--mostarda-ink) !important}
.bg-branco [style*="color:var(--rose)"]{color:var(--rose-ink) !important}
.bg-branco [style*="color:var(--oliva)"]{color:var(--oliva-ink) !important}
.bg-branco [style*="color:var(--malva)"]{color:var(--malva-ink) !important}
.bg-aveia [style*="color:var(--mostarda)"]{color:var(--mostarda-ink) !important}
.bg-aveia [style*="color:var(--rose)"]{color:var(--rose-ink) !important}
.bg-aveia [style*="color:var(--oliva)"]{color:var(--oliva-ink) !important}
.bg-aveia [style*="color:var(--malva)"]{color:var(--malva-ink) !important}
.bg-areia [style*="color:var(--mostarda)"]{color:var(--mostarda-ink) !important}
.bg-areia [style*="color:var(--rose)"]{color:var(--rose-ink) !important}
.bg-areia [style*="color:var(--oliva)"]{color:var(--oliva-ink) !important}
.bg-areia [style*="color:var(--malva)"]{color:var(--malva-ink) !important}
.bg-kraft-l [style*="color:var(--mostarda)"]{color:var(--mostarda-ink) !important}
.bg-kraft-l [style*="color:var(--rose)"]{color:var(--rose-ink) !important}
.bg-kraft-l [style*="color:var(--oliva)"]{color:var(--oliva-ink) !important}
.bg-kraft-l [style*="color:var(--malva)"]{color:var(--malva-ink) !important}
.bg-kraft-m [style*="color:var(--mostarda)"]{color:var(--mostarda-ink) !important}
.bg-kraft-m [style*="color:var(--rose)"]{color:var(--rose-ink) !important}
.bg-kraft-m [style*="color:var(--oliva)"]{color:var(--oliva-ink) !important}
.bg-kraft-m [style*="color:var(--malva)"]{color:var(--malva-ink) !important}

/* LINKS DE ACAO EM CARTAO (a11y 2026-08-14): "Falar ->", "Enviar ->" etc.
   herdavam o acento do cartao e sumiam no branco. Tinta em qualquer contexto. */
.go[style*="--mostarda"],.go[style*="color:var(--mostarda)"]{color:var(--mostarda-ink)!important}
.go[style*="--rose"],.go[style*="color:var(--rose)"]{color:var(--rose-ink)!important}
.go[style*="--oliva"],.go[style*="color:var(--oliva)"]{color:var(--oliva-ink)!important}
.go[style*="--malva"],.go[style*="color:var(--malva)"]{color:var(--malva-ink)!important}
/* mesma regra para a cor herdada via variavel local do cartao */
.card .go,.acesso .go,.go{--rose:var(--rose-ink);--oliva:var(--oliva-ink);--malva:var(--malva-ink)}