/* ==========================================================================
   MicroEstore — Controlo Solar e Decoração
   Design system. Motif: the louvre (a lâmina). Horizontal, precise, warm.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Palette. Black is warm/olive-biased, like anodised headrail aluminium.
     Gold is brassy and muted — hardware, not heraldry. */
  --paper:      #FFFFFF;
  --ink:        #16150F;
  --ink-2:      #3A372E;
  --ink-3:      #6B675C;
  --beige:      #E7DFD1;
  --beige-wash: #F5F1E9;
  --beige-deep: #CFC2AC;
  /* O dourado é o do logótipo (o símbolo e o "ESTORE" da marca). A paleta segue a
     marca, não o contrário. */
  --gold:       #C6902F;
  --gold-ink:   #8A6A1E; /* o dourado do selo "20 anos" — passa AA em branco */
  --gold-lite:  #DFB463; /* para uso sobre --ink */

  --rule: color-mix(in srgb, var(--ink) 12%, transparent);

  /* Type */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --util: "Archivo", system-ui, -apple-system, sans-serif;

  --t-eyebrow: clamp(0.68rem, 0.64rem + 0.14vw, 0.76rem);
  --t-small:   clamp(0.85rem, 0.82rem + 0.14vw, 0.92rem);
  --t-body:    clamp(1.02rem, 0.98rem + 0.22vw, 1.14rem);
  --t-lead:    clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);
  --t-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);
  --t-h1:      clamp(2.4rem, 1.6rem + 3.2vw, 4.1rem);

  /* Space */
  --gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --pad-section: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --shell: 1240px;
  --edge: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);

  --dock-h: 0px;
}

/* --- Reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock-h);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; font-family: var(--util); font-size: var(--t-small);
}
.skip:focus { left: .5rem; top: .5rem; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Primitives --------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.section--beige { background: var(--beige-wash); }
.section--ink { background: var(--ink); color: var(--beige); }

/* The slat rule: a hairline divider drawn as light through a blind. */
.slatrule {
  height: 22px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 30%, transparent) 0 1px,
    transparent 1px 5px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.section--ink .slatrule {
  background: repeating-linear-gradient(to bottom, var(--gold) 0 1px, transparent 1px 5px);
}

.eyebrow {
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
}
.section--ink .eyebrow { color: var(--gold-lite); }

/* Display type is set wide — the letterforms echo the horizontal slat. */
.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 650;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h1.display { font-size: var(--t-h1); }
h2.display { font-size: var(--t-h2); }

.h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 620;
  text-transform: uppercase;
  font-size: var(--t-h3);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 1.4rem 0 0;
  text-wrap: pretty;
}
.section--ink .lead { color: var(--beige); }

.prose p { max-width: 62ch; text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }

.gold { color: var(--gold-ink); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  /* the light that falls off a slat's edge */
  box-shadow: 0 2px 0 0 var(--gold);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn--ghost:hover { --btn-bg: var(--beige-wash); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn--gold:hover { box-shadow: 0 2px 0 0 var(--ink); }

.section--ink .btn--ghost { --btn-fg: var(--beige); }
.section--ink .btn--ghost:hover { --btn-bg: rgba(255,255,255,.06); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.calltip {
  font-family: var(--util);
  font-size: 0.68rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin: .85rem 0 0;
}
.section--ink .calltip { color: var(--beige-deep); }

/* --- Topbar ------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--beige);
  font-family: var(--util);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding-block: .5rem;
}
.topbar__hours { color: var(--beige-deep); text-transform: uppercase; }
.topbar__links { display: flex; align-items: center; gap: 1.4rem; }
.topbar a { text-decoration: none; display: inline-flex; align-items: center; gap: .45em; }
.topbar a:hover { color: var(--gold-lite); }
.topbar svg { width: 14px; height: 14px; }
.topbar__tel { font-variation-settings: "wght" 700; letter-spacing: .04em; }

@media (max-width: 860px) { .topbar__hours { display: none; } }
@media (max-width: 520px) { .topbar__in { justify-content: center; } }

/* --- Masthead / nav ----------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

/* --- A marca ------------------------------------------------------------
   O logótipo é o ficheiro, não uma reconstrução em markup. O texto dos SVG já
   vem em curvas, por isso pode entrar numa <img> sem depender da webfont.

   Duas versões, porque o autor as desenhou assim:
   - clara  (470×170): só o lockup, fundo transparente.
   - escura (550×250): o lockup dentro da sua própria placa #201E1A, com margem.
   Como a escura traz margem no ficheiro, precisa de mais altura para o lockup
   ficar do mesmo tamanho — daí a altura maior e as margens negativas, que só
   descontam o ar que já vem lá dentro. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__img { display: block; width: auto; }
.brand__img--light { height: 52px; }
.brand__img--dark  { height: 76px; margin-block: -12px; }

/* Sobre claro mostra-se a clara; sobre escuro (tema escuro, e o rodapé, que é
   preto nos dois temas) mostra-se a escura. */
.brand__img--dark { display: none; }
:root[data-theme="dark"] .brand__img--light { display: none; }
:root[data-theme="dark"] .brand__img--dark { display: block; }
.footer .brand__img--light { display: none; }
.footer .brand__img--dark { display: block; }

@media (max-width: 640px) {
  .brand__img--light { height: 38px; }
  .brand__img--dark  { height: 56px; margin-block: -9px; }
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 550;
  font-size: var(--t-small);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .4rem 0;
  position: relative;
  white-space: nowrap;
}
/* The underline is a slat that tilts open on hover. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold-ink); }

.masthead .btn { padding: .78em 1.2em; }

.burger {
  display: none;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: .6rem; cursor: pointer; line-height: 0;
}
.burger svg { width: 20px; height: 20px; }

@media (max-width: 1000px) {
  .nav__list { display: none; }
  .burger { display: inline-block; }
  .masthead .btn--nav { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  padding: 1.5rem var(--edge) 2rem;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.22,1,.36,1), visibility .38s;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; min-height: 74px; margin-bottom: 1rem; }
.drawer__list { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.drawer__list a {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 115, "wght" 620;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 3.5vw, 2.4rem);
  line-height: 1.25;
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid var(--rule);
}
.drawer__list a[aria-current="page"] { color: var(--gold-ink); }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }

/* --- Louvre: the signature ---------------------------------------------- */
/*
   The hero is a window the scroll opens. Slats closed over the view, room dark;
   scroll and they turn. It is the product, working.
*/
.hero {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: center;
  gap: clamp(2rem, 3vw, 3.5rem);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}

/* The runway. The hero pins to the top of it and holds while the slats turn, so
   the opening gets real scroll to happen in instead of being over in three
   notches of the wheel. Below the fold the runway is simply empty page — what the
   visitor is "scrolling through" is the window opening.

   It has to be *content*, not padding: a sticky box is confined to its parent's
   content box, and padding lies outside it — a padding runway gives the visitor
   something to scroll past and the hero nowhere to stick.

   The louvre measures this block to learn how long the turn is, so --runway is the
   one number that sets the duration and the JS holds no copy of it. */
.herohold::after { content: ""; display: block; height: var(--runway, 0px); }
@media (min-width: 901px) {
  .herohold { --runway: 78vh; }
  .hero {
    position: sticky;
    top: 75px; /* clears the sticky masthead */
  }
}
/* Never break inside a word — an orphaned "." is worse than a tight line. */
.hero__copy .display { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.hero__copy .lead { max-width: 38ch; }

.louvre {
  --open: 0;          /* 0 closed, 1 open — the scroll writes this. */
  /* How far a slat turns when fully open. Steeper = the slat presents a narrower
     edge and more of the view gets through. The JS reads this to keep the aperture
     opening at an even rate, so it is safe to tune here alone. */
  --slat-angle: 82deg;
  position: relative;
  aspect-ratio: 4 / 3.35;
  overflow: hidden;
  border-radius: 2px 0 0 2px;
  background: var(--ink);
  /* Runs off the right edge of the viewport — the window has no far frame. */
  margin-right: calc(-1 * max(var(--edge), (100vw - var(--shell)) / 2 + var(--edge)));
}
.louvre__view {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.louvre__dim {
  position: absolute; inset: 0;
  background: #0B0A07;
  opacity: calc((1 - var(--open)) * 0.5);
  transition: opacity .12s linear;
  pointer-events: none;
}
/* No perspective. A real blind is a rod turning every slat at once, seen from
   across the room: the slats read identical. Perspective foreshortened each one
   differently by its distance from the eye — a nice trick, and a lie unless your
   nose is on the glass. */
.louvre__slats {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.louvre__slats span {
  flex: 1 1 0;
  transform-origin: 50% 50%;
  transform: rotateX(calc(var(--open) * var(--slat-angle)));
  background: linear-gradient(180deg, #FBF8F2 0%, var(--beige) 52%, var(--beige-deep) 100%);
  /* Shadow scaled to the slat: at ~13px a 7px blur is a smudge, not an edge.
     O rebordo dourado é o dourado da marca (#C6902F), não o antigo. */
  box-shadow: 0 1px 0 rgba(198, 144, 47, .38), 0 1px 3px rgba(0,0,0,.20);
  /* Just enough to smooth the per-frame steps; never enough to trail the scroll. */
  transition: transform 140ms linear;
  will-change: transform;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__copy { max-width: none; }
  .louvre {
    aspect-ratio: 4 / 3.1;
    margin-inline: calc(var(--edge) * -1);
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .louvre__slats span { transition: none; }
  .louvre__dim { transition: none; }
}

/* --- Facts strip -------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--rule);
  padding-top: 2.25rem;
}
.fact__k {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 680;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 .55rem;
}
.fact__v {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; gap: 1.6rem; }
  .fact { display: grid; grid-template-columns: 1fr; }
}

/* --- Section heads ------------------------------------------------------ */
.sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}
.sechead__aside { padding-bottom: .35rem; }
.sechead__aside p { margin: 0; color: var(--ink-2); max-width: 44ch; }
@media (max-width: 800px) {
  .sechead { grid-template-columns: 1fr; }
}

/* --- Category cards ----------------------------------------------------- */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
}
.cat {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.cat:hover { border-color: var(--gold); transform: translateY(-3px); }
.cat__fig { margin: 0; overflow: hidden; background: var(--beige); }
.cat__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.cat:hover .cat__fig img { transform: scale(1.045); }
.cat__body { padding: 1.35rem 1.35rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.cat__body .h3 { margin-bottom: .8rem; }
.cat__list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.55;
}
.cat__list li { padding-left: 1rem; position: relative; }
.cat__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.66em;
  width: 6px; height: 1px; background: var(--gold);
}
.cat__go {
  margin-top: auto;
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: .5em;
}
.cat:hover .cat__go svg { transform: translateX(4px); }
.cat__go svg { width: 14px; height: 14px; transition: transform .25s ease; }

/* --- Preview strip ------------------------------------------------------ */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, .4rem + .8vw, 1rem);
}
.strip__fig {
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--beige);
}
.strip__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.strip__fig:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .strip { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .strip__fig img { transition: none; } }

/* --- Services list ------------------------------------------------------ */
.svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.svc__item {
  padding: 2rem clamp(1rem, 2vw, 2rem) 2.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.svc__item .h3 { margin-bottom: .7rem; font-size: 1.05rem; }
.svc__item p { margin: 0; font-size: var(--t-small); color: var(--ink-2); max-width: 38ch; }

/* --- Gallery ------------------------------------------------------------ */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2.25rem;
}
.filter {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .6em 1.05em;
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 550;
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filter:hover { border-color: var(--gold); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter__n { color: var(--ink-3); margin-left: .5em; font-variation-settings: "wght" 400; }
.filter[aria-pressed="true"] .filter__n { color: var(--beige-deep); }

.grid {
  columns: 3 300px;
  column-gap: clamp(.6rem, .4rem + .8vw, 1rem);
}
.shot {
  break-inside: avoid;
  margin: 0 0 clamp(.6rem, .4rem + .8vw, 1rem);
  position: relative;
  background: var(--beige);
  border-radius: 2px;
  overflow: hidden;
}
.shot[hidden] { display: none; }
.shot__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  position: relative;
}
.shot__btn img { width: 100%; transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease; }
.shot__btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,10,7,.55), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
.shot:hover .shot__btn img { transform: scale(1.04); }
.shot:hover .shot__btn::after { opacity: 1; }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .9rem 1rem;
  color: var(--paper);
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 550;
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 1;
  pointer-events: none;
}
.shot:hover .shot__cap { opacity: 1; transform: translateY(0); }
.shot__btn:focus-visible .shot__cap { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { .grid { columns: 2 150px; } }

/* --- Lightbox ----------------------------------------------------------- */
/* Do not set `display` here: it would override <dialog>'s default
   `display: none` and leave the closed dialog's controls on the page. */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(11,10,7,.94);
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  max-width: 100%; max-height: 100%; width: 100%; height: 100%;
}
.lightbox::backdrop { background: rgba(11,10,7,.94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: grid; gap: 1rem; justify-items: center; max-height: 100%; }
.lightbox__fig img {
  max-width: min(1200px, 100%);
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  border-radius: 2px;
}
.lightbox__cap {
  color: var(--beige);
  font-family: var(--util);
  font-size: var(--t-small);
  text-align: center;
  max-width: 60ch;
}
.lightbox__cap b {
  display: block;
  color: var(--gold-lite);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.lb-btn {
  position: absolute;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  color: var(--beige);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.lb-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

/* --- Brand partners ----------------------------------------------------- */
.brands {
  display: flex; flex-wrap: wrap; gap: .5rem 0;
  list-style: none; margin: 0; padding: 0;
}
.brands li {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 600;
  text-transform: uppercase;
  font-size: clamp(.95rem, .8rem + .5vw, 1.25rem);
  letter-spacing: .01em;
  color: var(--ink-2);
  padding-inline: 1rem;
  border-left: 1px solid var(--rule);
  line-height: 1.3;
}
.brands li:first-child { padding-left: 0; border-left: 0; }
.brands li[data-tier="1"] { color: var(--ink); }
.brands li[data-tier="1"] span { color: var(--gold-ink); }

/* The brand wall lives on the dark band — invert it there. */
.section--ink .brands li {
  color: var(--beige-deep);
  border-left-color: rgba(255, 255, 255, .16);
}
.section--ink .brands li[data-tier="1"] { color: var(--beige); }
.section--ink .brands li[data-tier="1"] span { color: var(--gold-lite); }

/* --- CTA band ----------------------------------------------------------- */
.ctaband { text-align: center; }
.ctaband .display { margin-inline: auto; }
.ctaband .lead { margin-inline: auto; text-align: center; max-width: 52ch; }
.ctaband .btn-row { justify-content: center; }
.ctaband .slatrule { margin-bottom: 2.5rem; }

/* --- Contact ------------------------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; margin-bottom: 1.25rem; }
.field label {
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input, .field textarea, .field select {
  font-family: var(--body);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--beige-deep);
  border-radius: 2px;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: .35rem; accent-color: var(--gold-ink); }
.field--check label {
  text-transform: none; letter-spacing: 0;
  font-family: var(--body); font-size: var(--t-small);
  color: var(--ink-2); line-height: 1.5;
  font-variation-settings: normal;
}
.field--check a { color: var(--gold-ink); }
.hp { position: absolute; left: -9999px; }

.formnote {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: 1.25rem 0 0;
}
.formstatus {
  margin: 1.25rem 0 0;
  padding: .9rem 1rem;
  border-left: 2px solid var(--gold);
  background: var(--beige-wash);
  font-size: var(--t-small);
}
.formstatus[hidden] { display: none; }

.infolist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.infolist dt, .info__k {
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .35rem;
}
.info__v { margin: 0; font-size: var(--t-body); }
.info__v a { text-decoration: none; border-bottom: 1px solid var(--beige-deep); }
.info__v a:hover { border-color: var(--gold); }
.info__big {
  font-family: var(--display);
  font-variation-settings: "wdth" 115, "wght" 680;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1.05;
  display: inline-block;
  border: 0;
}
.info__big:hover { color: var(--gold-ink); }

.mapwrap {
  margin-top: 2rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--beige-wash);
}
.mapwrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--beige); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--gold-lite); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2.5rem;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__blurb {
  font-size: var(--t-small);
  color: var(--beige-deep);
  max-width: 34ch;
  margin: 1.25rem 0 0;
}
.footer__h {
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lite);
  margin: 0 0 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: var(--t-small); }
.footer__list--tight { gap: .3rem; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-family: var(--util);
  font-size: 0.7rem;
  letter-spacing: .04em;
  color: var(--beige-deep);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 2px;
  display: grid; place-items: center; transition: background-color .2s, border-color .2s, color .2s;
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.social svg { width: 17px; height: 17px; }

/* --- Mobile call dock --------------------------------------------------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.14);
}
.dock a {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  padding: 1rem .5rem;
  font-family: var(--util);
  font-variation-settings: "wdth" 100, "wght" 650;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 56px;
}
.dock svg { width: 18px; height: 18px; flex: none; }
.dock__call { background: var(--ink); color: var(--paper); }
.dock__wa { background: var(--gold); color: var(--ink); }

@media (max-width: 1000px) {
  :root { --dock-h: 56px; }
  .dock { display: grid; }
}

/* --- Reveal on scroll --------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cat, .cat__fig img, .shot__btn img, .btn { transition: none !important; }
}

/* --- Page header (interior pages) --------------------------------------- */
.pagehead {
  background: var(--beige-wash);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 1.8rem + 4vw, 5rem);
}
.pagehead .lead { margin-top: 1.25rem; }
.crumbs {
  font-family: var(--util);
  font-size: var(--t-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}
.crumbs a { text-decoration: none; color: var(--gold-ink); }
.crumbs span { margin-inline: .5em; }

/* --- Split feature ------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.split--flip .split__fig { order: -1; }
.split__fig { margin: 0; border-radius: 2px; overflow: hidden; background: var(--beige); }
.split__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* For photos whose own crop is worth keeping — don't force them into 4:3. */
.split__fig--natural img { aspect-ratio: auto; }
.split__fig figcaption {
  font-family: var(--util);
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: .75rem;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__fig { order: 0; }
}

/* --- Product detail block ----------------------------------------------- */
.prod { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.prod:first-of-type { border-top: 0; }
.prod__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 3.5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .prod__grid { grid-template-columns: 1fr; } }
.prod__fig { margin: 0; border-radius: 2px; overflow: hidden; background: var(--beige); }
.prod__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.prod__opts {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0 var(--gap);
}
.prod__opts li {
  padding: .7rem 0 .7rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.prod__opts li::before {
  content: ""; position: absolute; left: 0; top: 1.18em;
  width: 7px; height: 1px; background: var(--gold);
}

/* ==========================================================================
   Dark mode — "à noite". Same warm materials, the light turned down.
   ========================================================================== */
:root[data-theme="dark"] {
  --paper:      #14130E;
  --ink:        #ECE6DA;
  --ink-2:      #C6BFB0;
  --ink-3:      #9C9585;
  /* --beige stays light on purpose: it is both the physical slat colour and
     the text colour used on dark bands. It only ever sits on something dark. */
  --beige:      #E7DFD1;
  --beige-wash: #1E1C15;  /* section fills flip to a raised dark surface */
  --beige-deep: #736D5B;  /* input borders + muted text, tuned for dark */
  --gold:       #DDA94A;  /* o dourado da marca, subido para ler em quase-preto */
  --gold-ink:   #E5C079;  /* dourado em *texto* tem de ser claro no escuro (AA) */
  --gold-lite:  #F0D6A2;
}

/* Colour scheme hint for form controls, scrollbars, etc. */
:root[data-theme="dark"] { color-scheme: dark; }

/* Bands that use --ink as a *surface* would invert to light when --ink flips.
   Pin them to a near-black so they stay the dark bands they were designed as. */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .section--ink,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .louvre,
:root[data-theme="dark"] .dock__call { background: #0C0B07; }
:root[data-theme="dark"] .dock__call { color: var(--beige); }

/* Gold buttons keep dark text in both themes — light text on gold fails AA. */
:root[data-theme="dark"] .btn--gold { --btn-fg: #141109; }
:root[data-theme="dark"] .dock__wa { color: #141109; }

/* ==========================================================================
   The theme switch: a motorised roller blind (estore de rolo).
   Dark lowers it; light raises it. The theme swaps while the view is covered.
   ========================================================================== */
.blind {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
}
.blind[hidden] { display: none; }

.blind__panel {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 106dvh;                 /* extra bleed so no gap appears at either end */
  transform: translateY(-101%);
  will-change: transform;
  background-color: #E7DFD1;
  background-image:
    /* fabric fall-off at the sides */
    linear-gradient(90deg, rgba(94,74,33,.16), rgba(94,74,33,0) 9%, rgba(94,74,33,0) 91%, rgba(94,74,33,.16)),
    /* woven battens — the brand slat, in the cloth */
    repeating-linear-gradient(180deg, rgba(22,21,15,.055) 0 1px, rgba(22,21,15,0) 1px 30px),
    /* body of the cloth */
    linear-gradient(180deg, #EFE8DB 0%, #E1D6C1 60%, #D3C4A9 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
}

/* The weighted bottom bar — the part your eye follows. */
.blind__rail {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #2A281D, #16150F);
  border-top: 2px solid #A9863F;
  box-shadow: 0 -9px 24px rgba(0,0,0,.22);
}
.blind__pull {
  position: absolute;
  left: 50%; bottom: -18px;
  transform: translateX(-50%);
  width: 8px; height: 18px;
  border-radius: 0 0 4px 4px;
  background: #A9863F;
}
.blind__pull::before {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  transform: translateX(-50%);
  width: 2px; height: 7px;
  background: #2A281D;
}

/* ==========================================================================
   Theme toggle button
   ========================================================================== */
.themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.themetoggle:hover { color: var(--gold-lite); }
.topbar .themetoggle:hover { border-color: rgba(255,255,255,.25); }
.themetoggle svg { width: 16px; height: 16px; }
.themetoggle .i-sun { display: none; }
:root[data-theme="dark"] .themetoggle .i-moon { display: none; }
:root[data-theme="dark"] .themetoggle .i-sun  { display: block; }

/* Wider variant used inside the mobile drawer, styled like the other buttons. */
.themetoggle--drawer {
  width: auto; height: auto;
  gap: .6em;
}
.themetoggle--drawer svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .blind__panel { transition: none; }
}