/* ============================================================
   António Ervedeiro — loja de arte
   Design read: registo de galeria limpo (art buyers + diáspora + turistas).
   Restyle 2026-07: saiu do "bege editorial", entrou base branca + cinza
   muito claro neutro; bege fica só como materialidade (palco de obra,
   passepartout, moldura). Referências de registo: p55.art e
   davidzwirner.com — fundo branco/quase-branco, tipografia sans contida,
   muito espaço, a OBRA é que traz a cor.
   TIPOGRAFIA (decisão): sans-led. Display e UI em Instrument Sans (grotesca
   neutra, contida) — como nas galerias de referência; a serifa
   (Cormorant Garamond itálico) fica reservada só a detalhes editoriais
   (legendas de obra e ficha técnica). Ocre = acento de ação contido
   (kickers, links, selo, estados); os CTA primários passam a tinta.
   Azul só dentro das pinturas. Assinatura PNG = word-mark (intocável).
   VARIANCE 7 · MOTION 6 · DENSITY 3 · tema claro único.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* superfícies (tema claro único) — base branca, bandas em cinza muito claro */
  --paper-warm:  #FFFFFF;   /* base branca do site */
  --paper:       #FAFAF9;   /* superfície quase-branca / texto claro sobre tinta */
  --paper-deep:  #F4F3F1;   /* banda alternada, cinza muito claro neutro */
  --sand:        #EAE4D8;   /* bege de materialidade: palco de obra atrás da moldura */
  --ink:         #1A1C1D;   /* preto de traço (nunca #000) */
  --ink-2:       #4b4e50;
  --line:        rgba(26,28,29,.12);
  --line-soft:   rgba(26,28,29,.07);
  --ink-soft:    rgba(26,28,29,.05);

  /* molduras */
  --frame-white: #FCFCFB;   /* moldura branca neutra (lê sobre palco bege/cinza) */
  --frame-black: #1A1C1D;   /* moldura preta (toggle) */
  --mat:         #FCFCFA;   /* passepartout branco neutro */

  /* acento único (contido) */
  --ochre:       #C6681D;   /* Ocre da Planície */
  --ochre-deep:  #A9531A;   /* ocre para texto/estados AA */
  --ochre-soft:  rgba(198,104,29,.10);

  /* cores de obra — segunda voz cromática (marca + coleções) */
  --campo:      #2F7A3C;   /* Verde Campo */
  --campo-soft: rgba(47,122,60,.12);
  --telha:      #A92D12;   /* Telha de Monsaraz */
  /* Azul-Lilás vive SO dentro das pinturas — nunca como cor de UI. */

  /* tipografia — sans-led; serifa só em detalhes */
  --disp:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;  /* display + UI */
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;     /* detalhe: legendas/ficha técnica */
  --ui:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* sombra fria e subtil (nunca preto puro, nunca quente) */
  --shadow-art: 0 1px 3px rgba(20,22,26,.05),
                0 18px 40px -20px rgba(20,22,26,.22);
  --shadow-art-hover: 0 4px 10px rgba(20,22,26,.07),
                0 30px 58px -22px rgba(20,22,26,.28);

  --ease: cubic-bezier(.22,.61,.16,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --wrap: 1240px;
  --radius: 3px;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--ui);
  background:var(--paper-warm);
  color:var(--ink);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ochre-soft); color:var(--ink); }

/* grão de papel muito subtil, fixo */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografia ---------- */
/* Selo pintado — assinatura real do artista (TOZÉ, pincel sobre transparente).
   Substitui o antigo lettering cursivo. Imagem inline alinhada à baseline. */
.selo-img{ display:inline-block; height:22px; width:auto; vertical-align:-.34em; }
.selo-img--mini{ height:19px; vertical-align:-.28em; }
h1,h2,h3{ font-family:var(--disp); font-weight:500; color:var(--ink);
  letter-spacing:-.011em; line-height:1.06; }
.kicker{
  font-family:var(--ui); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ochre-deep);
}
.lede{ font-size:1.24rem; line-height:1.6; color:var(--ink-2); max-width:56ch; }
p{ max-width:66ch; }
.muted{ color:var(--ink-2); }

/* ---------- Wrap ---------- */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
section{ position:relative; z-index:2; }
.pad{ padding-block:clamp(5rem,10vw,9rem); }
.pad-sm{ padding-block:clamp(3.5rem,7vw,6rem); }

/* bandas alternadas: branco quente (body) <-> bege papel */
.band-sand{ background:var(--paper-deep); }

/* ---------- Assinatura manuscrita = word-mark ---------- */
.nav__sig{ height:34px; width:auto; display:block; }
.foot__sig{ height:56px; width:auto; display:block;
  filter:invert(1) brightness(1.6); }
@media (max-width:768px){ .nav__sig{ height:30px; } .foot__sig{ height:48px; } }

/* ---------- Nav (pill flutuante) ---------- */
.nav{
  position:fixed; inset:1.1rem 0 auto 0; z-index:40;
  display:flex; justify-content:center; pointer-events:none;
}
.nav__inner{
  pointer-events:auto;
  width:min(var(--wrap), 94vw);
  display:flex; align-items:center; gap:1.4rem;
  padding:.55rem .7rem .55rem 1.5rem;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line-soft);
  border-radius:999px;
  box-shadow:0 10px 34px -22px rgba(20,22,26,.42);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
.nav.is-scrolled .nav__inner{ box-shadow:0 16px 40px -22px rgba(20,22,26,.5); }
.nav__brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.nav__brand small{
  font-family:var(--ui); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.nav__links{ display:flex; gap:.4rem; }
.nav__links a{
  font-size:.92rem; padding:.5rem .8rem; border-radius:999px; color:var(--ink-2);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:var(--ink-soft); }
.nav__cta{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.9rem; font-weight:500; color:var(--paper);
  background:var(--ink); padding:.6rem .7rem .6rem 1.2rem; border-radius:999px;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.nav__cta .ic{
  width:1.7rem; height:1.7rem; border-radius:999px; background:rgba(255,255,255,.14);
  display:grid; place-items:center; font-size:.85rem;
  transition:transform .4s var(--ease-out);
}
.nav__cta:hover{ background:var(--ochre-deep); }
.nav__cta:hover .ic{ transform:translate(2px,-2px); }
.nav__cta:active{ transform:scale(.97); }
.nav__inner{ flex-wrap:nowrap; }
.nav__links a{ white-space:nowrap; }
.nav__cta{ white-space:nowrap; }

/* ---------- Glifos de seta em SVG (traço fino, currentColor) ---------- */
.ic-svg{ width:1rem; height:1rem; flex:none; display:block; }
.nav__cta .ic-svg{ width:.82rem; height:.82rem; }
.btn .ic-svg{ width:1.02rem; height:1.02rem; }
.ic-line{ display:inline-flex; align-items:center; }
.ic-line .ic-svg{ width:.86em; height:.86em; margin-left:.18em;
  transition:transform .4s var(--ease-out); }
a:hover > .ic-line .ic-svg{ transform:translate(2px,-2px); }
.colcard__more{ display:inline-flex; align-items:center; gap:.35rem; }
.colcard__more .ic{ display:inline-flex; }

/* ---------- Menu hambúrguer (mobile) ---------- */
.nav__burger{
  display:none; pointer-events:auto; margin-left:.2rem;
  width:2.6rem; height:2.6rem; border:none; background:transparent;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  align-items:center; justify-content:center; border-radius:999px; padding:0;
}
.nav__burger-box{ position:relative; width:22px; height:12px; display:block; }
.nav__burger-line{
  position:absolute; left:0; width:22px; height:1.5px; border-radius:2px;
  background:var(--ink);
  transition:transform .5s var(--ease-out), opacity .3s var(--ease);
}
.nav__burger-line:nth-child(1){ top:0; }
.nav__burger-line:nth-child(2){ bottom:0; }
body.nav-open .nav__burger-line:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
body.nav-open .nav__burger-line:nth-child(2){ transform:translateY(-5.25px) rotate(-45deg); }

.navmenu{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; justify-content:center;
  padding:2rem clamp(1.6rem,8vw,4rem);
  background:var(--paper-warm);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
body.nav-open .navmenu{ opacity:1; visibility:visible; }
body.nav-open .nav{ z-index:70; }
body.nav-open{ overflow:hidden; }
.navmenu__links{ display:flex; flex-direction:column; gap:.15rem; }
.navmenu__links a{
  font-family:var(--disp); font-weight:600; line-height:1.15; color:var(--ink);
  font-size:clamp(2.1rem,9vw,3.2rem); padding:.25rem 0;
  opacity:0; transform:translateY(1.4rem);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), color .3s var(--ease);
}
.navmenu__links a em{ font-style:italic; color:var(--ink); opacity:.85; }
.navmenu__links a:hover{ color:var(--ochre-deep); }
body.nav-open .navmenu__links a{ opacity:1; transform:none; }
body.nav-open .navmenu__links a:nth-child(1){ transition-delay:.10s; }
body.nav-open .navmenu__links a:nth-child(2){ transition-delay:.15s; }
body.nav-open .navmenu__links a:nth-child(3){ transition-delay:.20s; }
body.nav-open .navmenu__links a:nth-child(4){ transition-delay:.25s; }
body.nav-open .navmenu__links a:nth-child(5){ transition-delay:.30s; }
body.nav-open .navmenu__links a:nth-child(6){ transition-delay:.35s; }
body.nav-open .navmenu__links a:nth-child(7){ transition-delay:.40s; }
.navmenu__foot{ margin-top:clamp(2rem,5vw,3rem); font-family:var(--ui);
  font-size:.9rem; letter-spacing:.02em; color:var(--ink-2);
  opacity:0; transition:opacity .5s var(--ease) .4s; }
body.nav-open .navmenu__foot{ opacity:1; }
.navmenu__foot .selo-img{ height:24px; vertical-align:-.36em; }
@media (min-width:821px){ .nav__burger,.navmenu{ display:none !important; } }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ui); font-size:.98rem; font-weight:500;
  padding:.85rem .95rem .85rem 1.5rem; border-radius:999px; cursor:pointer;
  border:1px solid transparent;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.btn .ic{
  width:1.9rem; height:1.9rem; border-radius:999px; display:grid; place-items:center;
  font-size:.9rem; transition:transform .45s var(--ease-out);
}
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark .ic{ background:rgba(255,255,255,.14); }
.btn--dark:hover{ background:var(--ochre-deep); }
.btn--dark:hover .ic{ transform:translate(3px,-2px); }
.btn--ochre{ background:var(--ochre-deep); color:#FDF7EF; }
.btn--ochre .ic{ background:rgba(255,255,255,.18); }
.btn--ochre:hover{ background:var(--ink); }
.btn--ghost{ border-color:var(--line); color:var(--ink); padding-left:1.3rem; }
.btn--ghost .ic{ background:var(--ochre-soft); color:var(--ochre-deep); }
.btn--ghost:hover{ border-color:var(--ochre-deep); background:var(--ochre-soft); }
.btn--ghost:hover .ic{ transform:translate(3px,-2px) scale(1.08); }
/* botão claro — para dentro do bloco de cor forte (azul-lilás) */
.btn--light{ background:var(--paper); color:var(--ink); }
.btn--light .ic{ background:var(--ochre-soft); color:var(--ochre-deep); }
.btn--light:hover{ background:var(--ochre-deep); color:#FDF7EF; }
.btn--light:hover .ic{ background:rgba(255,255,255,.2); color:#FDF7EF; transform:translate(3px,-2px) scale(1.08); }
.btn--dark:hover .ic, .btn--ochre:hover .ic{ transform:translate(3px,-2px) scale(1.08); }
.btn:active{ transform:scale(.98); }

/* link de texto sublinhado ocre (mantém AA: texto tinta) */
.tlink{ color:var(--ink); border-bottom:1px solid var(--ochre);
  padding-bottom:1px; transition:color .3s var(--ease), border-color .3s; }
.tlink:hover{ color:var(--ochre-deep); border-color:var(--ochre-deep); }

/* ============================================================
   MOLDURA — componente reutilizável
   moldura branca + passepartout branco, sobre fundo mais escuro,
   sombra tintada. Variante .moldura--preto para o toggle.
   ============================================================ */
.moldura{
  --frame: var(--frame-white);
  --frame-pad: clamp(10px, 1.4vw, 18px);
  --mat-pad:   clamp(14px, 3.2vw, 40px);
  background:var(--frame);
  padding:var(--frame-pad);
  border-radius:2px;
  box-shadow:var(--shadow-art);
  position:relative;
  transition:box-shadow .6s var(--ease), transform .6s var(--ease), background .5s var(--ease);
}
/* bisel muito fino do caixilho */
.moldura::after{
  content:""; position:absolute; inset:var(--frame-pad);
  border:1px solid rgba(26,28,29,.10); pointer-events:none; border-radius:1px;
}
.moldura__mat{
  background:var(--mat);
  padding:var(--mat-pad);
  box-shadow:inset 0 1px 3px rgba(26,28,29,.10);
}
.moldura__mat img{ width:100%;
  box-shadow:0 1px 2px rgba(26,28,29,.16); }
.moldura--preto{ --frame: var(--frame-black); }
.moldura--preto::after{ border-color:rgba(255,255,255,.16); }
/* moldura de madeira clara (carvalho) — aro em veio subtil, passepartout branco igual */
.moldura--madeira{
  background:
    repeating-linear-gradient(115deg, rgba(120,86,42,.05) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, #E0CBA2 0%, #D2B888 42%, #C6A876 74%, #B9986A 100%);
}
.moldura--madeira::after{ border-color:rgba(94,66,30,.22); }
.moldura--madeira .moldura__mat{ box-shadow:inset 0 1px 3px rgba(94,66,30,.16); }
/* hover físico (quando dentro de um link/card interativo) — lift + escala + sombra */
.est:hover .moldura, .colcard:hover .moldura, .rel:hover .moldura,
.est-mini:hover .moldura, .idx-card:hover .moldura{
  box-shadow:var(--shadow-art-hover); transform:translateY(-6px) scale(1.014);
}

/* ---------- Motion: reveal ---------- */
html.js-anim .reveal{ opacity:0; transform:translateY(30px) scale(.986); filter:blur(7px);
  transition:opacity .95s var(--ease-out), transform 1.05s var(--ease-out), filter .95s var(--ease-out); }
html.js-anim .reveal.in{ opacity:1; transform:none; filter:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }

/* barra de progresso de scroll — fio vivo (ocre -> azul-lilás) */
.scrollprog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:50; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
  background:linear-gradient(90deg, var(--ochre) 0%, var(--ink) 100%); opacity:.8;
}

/* ============================================================
   HERO — split assimétrico
   ============================================================ */
.hero{ padding-top:clamp(8rem,14vh,10rem); padding-bottom:clamp(4rem,8vw,7rem); }
.hero__grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.4rem);
  align-items:center;
}
.hero__title{ font-size:clamp(2.3rem,5.2vw,4.4rem); line-height:1.0; letter-spacing:-.01em; }
.hero__title em{ font-style:italic; font-weight:400; color:var(--ink); position:relative; white-space:nowrap; }
.hero__title em::after{ content:""; position:absolute; left:.04em; right:.12em; bottom:.015em; height:.085em; border-radius:2px;
  background:linear-gradient(90deg,#C6681D 0 22%,#D9A02A 22% 40%,#2F7A3C 40% 58%,#7E9BEC 58% 76%,#A92D12 76% 100%); }
.hero__lede{ margin-top:1.4rem; font-size:1.14rem; }
.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.hero__meta{ display:flex; gap:2.2rem; margin-top:2.4rem; padding-top:1.5rem;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta b{ font-family:var(--disp); font-size:2rem; font-weight:600; line-height:1; color:var(--ink); }
.hero__meta span{ font-size:.82rem; letter-spacing:.03em; color:var(--ink-2); margin-top:.35rem; }
.hero__art{ position:relative; }
/* halo quente muito subtil (areia) por trás da obra do hero — sem azul */
.hero__art::before{
  content:""; position:absolute; inset:-10% -8% -12% -8%; z-index:-1;
  background:radial-gradient(58% 52% at 62% 42%, rgba(198,104,29,.05), transparent 72%);
  filter:blur(8px); pointer-events:none;
}
.hero__art .obra-cap{ margin-top:1rem; text-align:right; }
.obra-cap{ font-family:var(--serif); font-style:italic; font-size:1.06rem; color:var(--ink-2); }
.obra-cap b{ font-style:normal; font-weight:600; color:var(--ink); }

/* selo de assinatura (uso legítimo: carimbo do artista) */
.selo{ display:inline-flex; align-items:center; gap:.7rem; margin-top:1.4rem;
  color:var(--ink-2); font-size:.86rem; }
.selo .selo-img{ height:22px; }

/* ============================================================
   COLEÇÕES — cartões assimétricos
   ============================================================ */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.sec-head h2{ font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:16ch; }
.sec-head p{ max-width:40ch; color:var(--ink-2); }

.colgrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.4rem,2.6vw,2.2rem); }
.colcard{ display:block; }
.colcard--lg{ grid-column:span 7; }
.colcard--sm{ grid-column:span 5; }
.colcard--full{ grid-column:span 12; }
.colcard__art{ background:var(--sand); padding:clamp(1.6rem,4vw,3.4rem);
  border-radius:4px; border:1px solid var(--line-soft); }
.colcard--full .colcard__art{ display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.colcard__body{ padding:1.5rem .2rem 0; }
.colcard--full .colcard__body{ padding:0; }
.colcard__body h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.colcard__meta{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:.7rem;
  flex-wrap:wrap; }
/* contagem de obras e etiquetas = tipografia discreta na tinta/ocre, sem pills */
.colcard__count{ font-family:var(--ui); font-size:.76rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); }
.colcard__flag{ font-family:var(--ui); font-size:.76rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ochre-deep); }
.colcard__flag::before{ content:"·"; margin-right:.7rem; color:var(--line); }
.colcard__more{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-size:.92rem; color:var(--ochre-deep); font-weight:500; }
.colcard__more .ic{ transition:transform .4s var(--ease-out); }
.colcard:hover .colcard__more .ic{ transform:translateX(4px); }

/* cartão de destaque a 1/3 (grelha de 12 colunas) */
.colcard--3{ grid-column:span 4; }

/* ---------- Célula uniforme de galeria ----------
   Nas grelhas (índice, coleção, relacionados, destaques 1/3) todas as
   miniaturas têm a MESMA proporção 1:1; a obra fica contida no
   passepartout (object-fit:contain), como uma parede de galeria arrumada
   com linhas alinhadas, mesmo misturando obras verticais e horizontais. */
.idx-card .moldura__mat,
.est .moldura__mat,
.rel .moldura__mat,
.colcard--3 .moldura__mat{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.idx-card .moldura__mat img,
.est .moldura__mat img,
.rel .moldura__mat img,
.colcard--3 .moldura__mat img{
  width:100%; height:100%; object-fit:contain;
  box-shadow:none; /* a sombra da folha não funciona com contain */
}

/* ---------- Hover-swap: miniatura -> mockup fotográfico ----------
   Ao passar o rato num cartão de coleção com mockup, a obra emoldurada
   faz cross-fade suave para a fotografia do produto real (papel/parede).
   Só em ponteiro fino com hover; em touch mantém a imagem normal. */
.moldura__mat{ position:relative; }
/* img.mock-swap com o mat no seletor: ganha às regras de object-fit:contain
   das miniaturas quadradas (senão o mockup horizontal fica letterboxed e a
   obra aparece por cima/por baixo — imagens sobrepostas). */
.mock-swap,
.moldura__mat img.mock-swap{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; box-shadow:none; z-index:2;
  pointer-events:none;
  transition:opacity 1.1s ease;
}
@media (hover:hover) and (pointer:fine){
  .colcard:hover .mock-swap, .hero-mock:hover .mock-swap{ opacity:1; }
}
/* mobile/touch: alternância automática obra <-> mockup (classe gerida por JS) */
.show-mock .mock-swap{ opacity:1; }

/* ---------- Secção "Em sua casa" — prova visual do produto físico ---------- */
.casa-grid{ display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.4rem,2.6vw,2.2rem); margin-top:clamp(2.4rem,5vw,3.4rem); }
.casa-card{ margin:0; display:block; }
.casa-card--wide{ grid-column:span 7; }
.casa-card--narrow{ grid-column:span 5; }
.casa-card__frame{
  overflow:hidden; border-radius:6px; background:var(--sand);
  box-shadow:var(--shadow-art);
  transition:box-shadow .6s var(--ease), transform .6s var(--ease);
}
.casa-card__frame img{
  width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3;
  transition:transform 1.3s var(--ease-out);
}
.casa-card:hover .casa-card__frame{ box-shadow:var(--shadow-art-hover); transform:translateY(-4px); }
.casa-card:hover .casa-card__frame img{ transform:scale(1.035); }
.casa-card__cap{ font-family:var(--serif); font-style:italic;
  font-size:1.06rem; color:var(--ink-2); margin-top:.95rem; }
.casa-card__cap span{ display:block; font-family:var(--ui); font-style:normal;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ochre-deep); margin-bottom:.3rem; }

/* ---------- Índice: todas as coleções ---------- */
.idx-block{ margin-top:clamp(2.4rem,5vw,3.4rem); }
.idx-block + .idx-block{ margin-top:clamp(3rem,6vw,5rem); padding-top:2.6rem;
  border-top:1px solid var(--line); }
.idx-title{ font-size:1.4rem; margin-bottom:.4rem; }
.idx-title span{ color:var(--ochre-deep); font-family:var(--ui); font-size:.9rem;
  font-weight:500; letter-spacing:.04em; }
.idx-note{ color:var(--ink-2); font-size:.94rem; margin-bottom:1.8rem; max-width:60ch; }
.idx-grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.4vw,2rem); margin-top:1.4rem; }
.idx-card{ display:block; }
.idx-card .moldura{ --mat-pad:clamp(10px,2vw,18px); }
.idx-card:hover .moldura{ box-shadow:var(--shadow-art-hover); transform:translateY(-6px) scale(1.014); }
.idx-card__body{ margin-top:.7rem; }
.idx-card__body b{ font-family:var(--disp); font-size:1.18rem; font-weight:600;
  display:block; line-height:1.1; }
.idx-card__body span{ font-size:.8rem; color:var(--ink-2); letter-spacing:.02em; }
.idx-card__expo{ color:var(--ochre-deep); text-transform:uppercase; letter-spacing:.1em;
  font-size:.68rem; margin-left:.3rem; }

/* nota "obra de exposição" no hero da coleção */
.col-expo{ font-size:.92rem; color:var(--ochre-deep); margin-top:1rem;
  padding:.7rem 1rem; border-left:2px solid var(--ochre); background:var(--ochre-soft);
  border-radius:0 4px 4px 0; max-width:60ch; }

/* ============================================================
   O ARTISTA — split editorial
   ============================================================ */
.artista{ background:var(--paper-deep); }
.artista__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.4rem,6vw,6rem);
  align-items:start; }
.artista__art{ position:sticky; top:7rem; }
.artista__art .obra-cap{ margin-top:.9rem; }
.artista__body h2{ font-size:clamp(2.2rem,4.2vw,3.2rem); margin-bottom:1.5rem; }
.artista__body p{ margin-bottom:1.1rem; color:var(--ink-2); }
.artista__body p strong{ color:var(--ink); font-weight:600; }
.factos{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; margin-top:2.4rem;
  padding-top:2rem; border-top:1px solid var(--line); }
.factos div span{ display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ochre-deep); margin-bottom:.3rem; }
.factos div b{ font-family:var(--disp); font-size:1.25rem; font-weight:600; line-height:1.2; }

/* ============================================================
   OFERTA / PREÇOS — três tiers diferenciados
   ============================================================ */
.oferta__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; }
.tier{ display:flex; flex-direction:column; padding:2rem 1.9rem;
  border:1px solid var(--line); border-radius:6px; background:var(--paper-deep);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.tier:hover{ transform:translateY(-5px); box-shadow:var(--shadow-art); }
.tier--feature{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tier--feature .muted,.tier--feature p{ color:rgba(243,238,225,.72); }
.tier--feature .tier__price{ color:var(--paper); }
.tier__k{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem;
  color:var(--ochre-deep); }
.tier--feature .tier__k{ color:#E9B36A; }
.tier h3{ font-size:1.6rem; margin-bottom:.5rem; }
.tier--feature h3{ color:var(--paper); }
.tier__price{ font-family:var(--disp); font-size:2.6rem; font-weight:600; line-height:1; margin:.6rem 0 .2rem; }
.tier__price small{ font-family:var(--ui); font-size:.9rem; font-weight:400; color:var(--ink-2); }
.tier--feature .tier__price small{ color:rgba(243,238,225,.7); }
.tier ul{ list-style:none; margin:1.4rem 0 1.8rem; display:grid; gap:.7rem; }
.tier li{ font-size:.95rem; padding-left:1.4rem; position:relative; color:inherit; }
.tier li::before{ content:""; position:absolute; left:0; top:.62em; width:.55rem; height:.55rem;
  border:1px solid var(--ochre); }
.tier--feature li::before{ border-color:#E9B36A; }
.tier .btn{ margin-top:auto; align-self:flex-start; }
.selo-mini{ font-family:var(--ui); font-weight:600; font-size:1.1rem; color:var(--ochre-deep); }

.envio{ text-align:center; margin-top:2rem; font-size:.92rem; color:var(--ink-2); }

/* ============================================================
   FAIXA — colecione a sua estação (scroll horizontal)
   ============================================================ */
/* BANDA BEGE QUENTE — a linha do Alentejo sobre papel, com profundidade
   quente subtil. Sem azul de UI; tema claro quente único. */
.faixa{
  background:var(--paper-deep);
  color:var(--ink); overflow:hidden; position:relative; isolation:isolate;
}
.faixa::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 120% at 12% -12%, rgba(198,104,29,.045), transparent 58%);
}
.faixa .sec-head{ margin-bottom:2rem; }
.faixa__scroll{ display:flex; gap:1.5rem; overflow-x:auto; padding-bottom:1.4rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.faixa__scroll::-webkit-scrollbar{ height:6px; }
.faixa__scroll::-webkit-scrollbar-thumb{ background:rgba(26,28,29,.2); border-radius:99px; }
.est-mini{ flex:0 0 clamp(220px,26vw,300px); scroll-snap-align:start; }
.est-mini .moldura{ --mat-pad:clamp(10px,2vw,20px); }
.est-mini .obra-cap{ margin-top:.7rem; font-size:.92rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--paper); padding-block:clamp(3.5rem,7vw,5.5rem); }
.foot a{ color:rgba(243,238,225,.75); transition:color .3s var(--ease); }
.foot a:hover{ color:var(--paper); }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(243,238,225,.16); }
.foot__brand small{ display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(243,238,225,.6); margin-top:.2rem; }
.foot__brand p{ margin-top:1.2rem; color:rgba(243,238,225,.72); max-width:34ch; }
.foot__col h4{ font-family:var(--ui); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,238,225,.55); margin-bottom:1.1rem; }
.foot__col a{ display:block; padding:.35rem 0; }
.foot__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:2rem; font-size:.85rem; color:rgba(243,238,225,.6); }
.foot__bottom .selo{ color:rgba(243,238,225,.7); }
.foot__bottom .selo .selo-img{ height:20px; filter:invert(1) brightness(1.7); opacity:.92; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb{ font-size:.86rem; color:var(--ink-2); }
.crumb a{ color:var(--ink-2); border-bottom:1px solid transparent; }
.crumb a:hover{ color:var(--ochre-deep); border-color:var(--ochre); }

/* ============================================================
   COLLECTION PAGE
   ============================================================ */
.col-hero{ padding-top:clamp(7.5rem,14vh,9rem); padding-bottom:2.5rem; }
.col-hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; }
.col-hero h1 em{ font-style:italic; font-weight:400; color:var(--ink); }
.col-hero .lede{ margin-top:1.4rem; }
/* --- Seletor compacto de coleção (disclosure) --- */
.col-picker{ position:relative; margin-top:2rem; }
/* Com o painel aberto, elevar a secção que o contém acima das secções
   seguintes (todas as <section> têm z-index:2; sem isto a banda a seguir
   sobrepõe-se ao painel e corta a lista). */
body.picker-open #indice,
body.picker-open .col-hero{ z-index:40; }

.col-picker__trigger{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  font-family:var(--ui); color:var(--ink);
  padding:.6rem .7rem .6rem 1.05rem; border-radius:999px;
  background:var(--paper-warm); border:1px solid var(--line);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.col-picker__trigger:hover{ border-color:var(--ochre-deep); background:var(--ochre-soft); }
.col-picker__trigger:active{ transform:scale(.985); }
.col-picker__eyebrow{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ochre-deep); font-weight:500;
}
.col-picker__now{ font-size:.92rem; font-weight:500; letter-spacing:-.005em; }
.col-picker__chev{
  width:1.55rem; height:1.55rem; border-radius:999px; display:grid; place-items:center;
  background:var(--ink-soft); color:var(--ink); margin-left:.15rem;
  transition:transform .45s var(--ease-out), background .4s var(--ease);
}
.col-picker__chev svg{ width:1rem; height:1rem; }
.col-picker__trigger[aria-expanded="true"] .col-picker__chev{ transform:rotate(180deg); background:var(--ochre-soft); color:var(--ochre-deep); }

/* scrim — só visível/ativo no bottom-sheet mobile */
.col-picker__scrim{ display:none; }

/* painel — double-bezel sobre papel */
.col-picker__panel{
  position:absolute; top:calc(100% + .7rem); left:0; z-index:55;
  width:min(23rem, calc(100vw - 2.4rem));
  background:var(--ink-soft);
  border:1px solid var(--line); border-radius:1.15rem; padding:.4rem;
  box-shadow:var(--shadow-art-hover);
  opacity:0; transform:translateY(-.5rem) scale(.985); transform-origin:top left;
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
body.picker-open .col-picker__panel{ opacity:1; transform:none; }
.col-picker__panel-in{
  background:var(--paper-warm); border-radius:.85rem; padding:.9rem .9rem 1rem;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6);
  max-height:min(64vh, 30rem); overflow-y:auto; overscroll-behavior:contain;
}
.col-picker__panel-in::-webkit-scrollbar{ width:6px; }
.col-picker__panel-in::-webkit-scrollbar-thumb{ background:rgba(26,28,29,.18); border-radius:99px; }
.col-picker__panel-title{
  display:none; font-family:var(--disp); font-weight:600; font-size:1.05rem;
  margin-bottom:.4rem;
}
.col-picker__group + .col-picker__group{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-soft); }
.col-picker__group-title{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  margin:.1rem .55rem .5rem;
}
.col-picker__group--expo .col-picker__group-title{ color:var(--ochre-deep); }
.col-picker__list{ display:flex; flex-direction:column; }
.col-picker__row{
  display:flex; align-items:baseline; gap:.6rem; justify-content:space-between;
  padding:.5rem .55rem; border-radius:.55rem; color:var(--ink-2);
  transition:background .28s var(--ease), color .28s var(--ease);
}
.col-picker__row:hover{ background:var(--ochre-soft); color:var(--ink); }
.col-picker__row:focus-visible{ outline:2px solid var(--ochre-deep); outline-offset:-1px; }
.col-picker__row-name{ font-size:.95rem; font-weight:500; }
.col-picker__row-count{ font-size:.78rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.col-picker__row.is-active{ color:var(--ink); }
.col-picker__row.is-active .col-picker__row-name{
  position:relative; padding-left:.95rem; font-weight:600;
}
.col-picker__row.is-active .col-picker__row-name::before{
  content:""; position:absolute; left:0; top:.5em; width:.42rem; height:.42rem;
  border-radius:999px; background:var(--ochre-deep);
}
.col-picker__row.is-active .col-picker__row-count{ color:var(--ochre-deep); }

@media (prefers-reduced-motion: reduce){
  .col-picker__panel, .col-picker__chev, .col-picker__trigger, .col-picker__row{ transition:none; }
}

/* mobile — folha simples de largura total */
@media (max-width:640px){
  .col-picker__trigger{ width:100%; justify-content:flex-start; }
  .col-picker__now{ margin-right:auto; }
  .col-picker__scrim{
    display:block; position:fixed; inset:0; z-index:54;
    background:rgba(26,28,29,.34);
    opacity:0; pointer-events:none;   /* fechado: transparente E sem captar toque (senão intercepta o burger/trigger) */
    transition:opacity .34s var(--ease);
  }
  body.picker-open .col-picker__scrim{ opacity:1; pointer-events:auto; }
  .col-picker__panel{
    position:fixed; top:auto; bottom:0; left:0; right:0; z-index:56;
    width:100%; border-radius:1.15rem 1.15rem 0 0; padding:.4rem .4rem 0;
    transform:translateY(100%); transform-origin:bottom;
    transition:transform .4s var(--ease-out), opacity .01s;
    opacity:1;
  }
  body.picker-open .col-picker__panel{ transform:none; }
  .col-picker__panel-in{
    border-radius:.85rem .85rem 0 0;
    max-height:70vh; padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  }
  .col-picker__panel-title{ display:block; }
  .col-picker__row{ padding:.7rem .6rem; }
}
@media (prefers-reduced-motion: reduce){
  .col-picker__scrim{ transition:none; }
}

.est-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,2.4vw,2.2rem); }
.est{ display:block; }
.est .obra-cap{ margin-top:.8rem; font-size:.95rem; }
.est .obra-cap .num{ color:var(--ochre-deep); font-style:normal; font-weight:600;
  font-family:var(--ui); font-size:.78rem; letter-spacing:.05em; margin-right:.5rem; }
.est__price{ font-size:.85rem; color:var(--ink-2); margin-top:.15rem; }

/* ============================================================
   PRODUTO PAGE
   ============================================================ */
.prod{ padding-top:clamp(7rem,12vh,8.5rem); }
.prod__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.4rem,5vw,5rem);
  align-items:start; }
.prod__art{ position:sticky; top:6.5rem; }
.prod__stage{ background:var(--sand); padding:clamp(2rem,5vw,4rem); border-radius:6px;
  border:1px solid var(--line-soft); }
.frame-toggle{ display:inline-flex; gap:.35rem; margin-top:1.4rem; padding:.3rem;
  background:var(--paper-deep); border-radius:999px; border:1px solid var(--line-soft); }
.frame-toggle button{ font-family:var(--ui); font-size:.82rem; cursor:pointer;
  padding:.5rem 1.1rem; border-radius:999px; border:none; background:transparent; color:var(--ink-2);
  transition:all .35s var(--ease); }
.frame-toggle button.is-active{ background:var(--ink); color:var(--paper); }
.frame-toggle button:not(.is-active):hover{ color:var(--ink); }
.frame-note{ font-size:.82rem; color:var(--ink-2); margin-top:.9rem; }

.prod__info .kicker{ display:block; margin-bottom:.9rem; }
.prod__info h1{ font-size:clamp(2.2rem,4.4vw,3.3rem); line-height:1.02; }
.prod__tech{ font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--ink-2);
  margin-top:.9rem; }
.prod__desc{ margin-top:1.5rem; color:var(--ink-2); }
.prod__buy{ margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line); }
.opt-group{ margin-bottom:1.6rem; }
.opt-group > span{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); display:block; margin-bottom:.8rem; }
.opts{ display:flex; gap:.7rem; flex-wrap:wrap; }
.opt{ cursor:pointer; padding:.75rem 1.1rem; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); transition:all .3s var(--ease); position:relative; }
.opt:hover{ border-color:var(--ink); }
.opt.is-sel{ border-color:var(--ochre-deep); background:var(--ochre-soft); }
.opt b{ display:block; font-size:.94rem; }
.opt small{ font-size:.8rem; color:var(--ink-2); }
.prod__price{ display:flex; align-items:baseline; gap:.6rem; margin:1.4rem 0; }
.prod__price b{ font-family:var(--disp); font-size:2.4rem; font-weight:600; }
.prod__price span{ font-size:.9rem; color:var(--ink-2); }
.prod__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.prod__assur{ margin-top:1.8rem; display:grid; gap:.7rem; }
.prod__assur div{ font-size:.9rem; color:var(--ink-2); padding-left:1.6rem; position:relative; }
.prod__assur .selo-mini{ position:absolute; left:0; top:-.15rem; }
/* linha da assinatura: o selo pintado (TOZÉ) é largo, por isso flui em
   vez de ficar absoluto — evita sobrepor-se ao texto ao lado */
.prod__assur .assur-sig{ padding-left:0; display:flex; gap:.55rem; align-items:center; }
.prod__assur .assur-sig .selo-img--mini{ flex:0 0 auto; vertical-align:middle; }

/* relacionados */
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
.rel .obra-cap{ margin-top:.7rem; font-size:.9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero__grid,.artista__grid,.prod__grid,.colcard--full .colcard__art{ grid-template-columns:1fr; }
  .artista__art,.prod__art{ position:static; }
  .hero__art{ max-width:520px; }
  .colcard--lg,.colcard--sm{ grid-column:span 6; }
  .colcard--3{ grid-column:span 6; }
  .casa-card--wide,.casa-card--narrow{ grid-column:span 6; }
  .est-grid,.rel-grid,.idx-grid{ grid-template-columns:repeat(3,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:span 2; }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__inner{ padding:.5rem .55rem .5rem 1.2rem; }
}
@media (max-width:768px){
  body{ font-size:16px; }
  .oferta__grid{ grid-template-columns:1fr; }
  .colgrid{ grid-template-columns:1fr; }
  .colcard--lg,.colcard--sm,.colcard--full,.colcard--3{ grid-column:span 1; }
  .casa-grid{ grid-template-columns:1fr; }
  .casa-card--wide,.casa-card--narrow{ grid-column:span 1; }
  .est-grid,.rel-grid,.idx-grid{ grid-template-columns:repeat(2,1fr); }
  .hero__meta{ gap:1.6rem; }
  .factos{ grid-template-columns:1fr; }
  .prod__cta{ flex-direction:column; align-items:stretch; }
  .prod__cta .btn{ justify-content:space-between; }
}
@media (max-width:520px){
  .idx-grid{ grid-template-columns:1fr 1fr; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__brand{ grid-column:span 1; }
  .est-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.12s !important; }
  .est:hover .moldura,.colcard:hover .moldura,.tier:hover,.rel:hover .moldura,
  .est-mini:hover .moldura,.idx-card:hover .moldura{ transform:none; }
  .mock-swap{ transition:none; }
  .colcard:hover .mock-swap, .hero-mock:hover .mock-swap{ opacity:0; }  /* cross-fade desativado */
  .casa-card:hover .casa-card__frame{ transform:none; }
  .casa-card:hover .casa-card__frame img{ transform:none; }
  .scrollprog{ display:none; }
  .navmenu,.navmenu__links a,.navmenu__foot,.nav__burger-line{ transition:none !important; }
  .navmenu__links a{ transform:none !important; }
  body.nav-open .navmenu__links a{ transition-delay:0s !important; }
}

/* ---------- Formulário de encomenda (pedido por email, sem pagamento online) ---------- */
.enc-form{ margin-top:1.4rem; padding:1.4rem; background:var(--areia,#F4F3F1);
  border:1px solid rgba(26,28,29,.08); display:grid; gap: .9rem; }
.enc-form__lead{ font-size:.95rem; color:var(--cinza,#5c5f61); max-width:46ch; margin:0; }
.enc-form label{ display:grid; gap:.35rem; font-size:.85rem; letter-spacing:.02em; }
.enc-form input, .enc-form textarea{ font:inherit; padding:.65rem .8rem; border:1px solid rgba(26,28,29,.18);
  background:#fff; border-radius:2px; }
.enc-form input:focus, .enc-form textarea:focus{ outline:2px solid var(--ocre,#B4642F); outline-offset:1px; }
.enc-form__msg{ margin:0; font-size:.95rem; }